Development documentation
  1. Components
  2. modalAlertComponent

File

libs/upp-base/src/modules/alert.ts

Description

A component that displays a customizable alert modal with various input types.

This component is used to create alert modals within the application. It supports various input types such as text, checkboxes, and radio buttons, allowing for a flexible and interactive user interface. The component also manages user input data, processes dismissal actions, and communicates with the modal controller to present and dismiss the modal.

Implements

OnInit

Metadata

selector upp-modal-alert
styleUrls ./alert/modal-alert.scss
templateUrl ./alert/modal-alert.html

Index

Properties
Methods
Inputs

Constructor

constructor(modalCtrl: ModalController)

Initializes a new instance of the modalAlertComponent class.

Parameters :
Name Type Optional Description
modalCtrl ModalController No
  • The modal controller instance used to control the modal.

Inputs

data
Type : {}
Default value : {}

Methods

CheckRadio
CheckRadio(name: string)

Manages the selection state of radio inputs.

Parameters :
Name Type Optional Description
name string No
  • The name of the radio input.
Returns : boolean

true if the radio input was not previously selected, otherwise false.
IsCheck
IsCheck(_input: literal type)

Determines if the input is of checkbox type.

Parameters :
Name Type Optional Description
_input literal type No
  • The input object to check.
Returns : boolean

true if the input is a checkbox, otherwise false.
IsRadio
IsRadio(_input: literal type)

Determines if the input is a radio button or radiogroup.

Parameters :
Name Type Optional Description
_input literal type No
  • The input object to check.
Returns : boolean

true if the input is a radio button or radiogroup, otherwise false.
IsText
IsText(_input: literal type)

Determines if the input is of text type.

Parameters :
Name Type Optional Description
_input literal type No
  • The input object to check.
Returns : boolean

true if the input is a text field, otherwise false.
ngOnInit
ngOnInit()

Lifecycle hook that is called after the component's view has been fully initialized.

Retrieves and processes the modal data on initialization.

Returns : void
normalize
normalize(str: string)

Normalizes a string to be used as a variable.

Parameters :
Name Type Optional Description
str string No
  • The string to be normalized.
Returns : string | null

The normalized string or null if no string is provided.
OnCheckChange
OnCheckChange(value: any, input: any)

Handles the change event for checkbox inputs.

Parameters :
Name Type Optional Description
value any No
  • The new value of the checkbox input.
input any No
  • The input object that triggered the change.
Returns : void
OnClose
OnClose()

Closes the modal dialog.

Returns : void
OnTextChange
OnTextChange(value: any, input: literal type)

Handles the change event for text inputs and updates the _data property.

Parameters :
Name Type Optional Description
value any No
  • The new value of the text input.
input literal type No
  • The input object that triggered the change.
Returns : void

Properties

Public _close
Default value : true

Indicates whether the modal can be dismissed by clicking on the backdrop
Public _data
Type : any
Default value : {}

Stores the input data for the modal component
Public _params
Type : any
Default value : {}

Holds the parameters passed to the modal component
Public _radio
Type : any
Default value : []

Stores the names of radio inputs that have been processed to ensure each radio input is handled only once.

 
<ion-header>
    <ion-toolbar color="dark">
        <ion-title *ngIf="_params.header" [innerHTML]="_params.header"></ion-title>
        <ion-buttons slot="end" *ngIf="_close">
            <ion-button uppDataId="modal-alert-close-button" (click)="OnClose()">
                <ion-icon slot="icon-only" name="close-outline"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content color="light">
    <p *ngIf="_params.message" [innerHTML]="_params.message"></p>

    <ion-list [attr.data-id]="'modal-alert-content'">
        <ng-container *ngFor="let _input of _params.inputs">
            <ion-item class="input" lines="none" *ngIf="IsText(_input)">
                <upp-modal-input [attr.data-id]="'modal-alert-input-text'" 
                    [type]="_input.type" 
                    [placeholder]="_input.placeholder" 
                    [value]="_input.value" 
                    (Changed)="OnTextChange($event, _input)"
                ></upp-modal-input>
            </ion-item>
    
            <ion-item class="check" *ngIf="IsCheck(_input)" lines="none">
                <ion-checkbox [attr.data-id]="'modal-alert-check-' + normalize(_input.label)" 
                    slot="start" 
                    [value]="_input.value" 
                    (ionChange)="OnCheckChange($event, _input)"
                ></ion-checkbox>
                <ion-label>
                    {{_input.label}}
                </ion-label>
            </ion-item>

            <ng-container *ngIf="_input.type === 'radiogroup'" lines="none">        
                <ion-radio-group [attr.data-id]="'modal-alert-input-radiogroup'" *ngIf="IsRadio(_input)" [(ngModel)]="_data[_input.name]">
                    <ng-container *ngFor="let _option of _params.inputs">
                        <ion-item *ngIf="_option.type === 'radiobutton' && _option.name === _input.name" lines="none">
                            <ion-label>
                                {{_option.label}}
                            </ion-label>
                            <ion-radio [attr.data-id]="'modal-alert-radio-' + normalize(_option.label)" 
                                [value]="_option.value"
                            ></ion-radio>
                        </ion-item>    
                    </ng-container>
                </ion-radio-group>
            </ng-container>    
        </ng-container>                
    </ion-list>

    <div class="form-buttons">
        <ng-container *ngFor="let _button of _params.buttons">
            <ion-button [attr.data-id]="'modal-alert-button-' + normalize(_button.text)" fill="clear" color="primary" (click)="_button.handler(_data)" [disabled]="_button['check'] && !_button['check'](_data)">{{_button.text}}</ion-button>
        </ng-container>
        <div style="clear:both; height:5px"></div>    
    </div>
</ion-content>

./alert/modal-alert.scss 

ion-content {
    --padding-start: 15px;
    --padding-end: 15px;

    position: relative;
    .form-buttons {
        position: absolute;
        right: 15px;
        bottom: 15px;

        ion-button {
            float: right;
            margin-left: 10px;
        }
    }
}

h1 {
    font-size: 24px;
}

ion-list {
    background: transparent;
}

ion-item {
    --background: transparent;

    &.input {
        border-radius: 6px;
        border: 1px solid var(--ion-color-medium);    
    }

    &.check {
        --padding-start: 0px;

        ion-checkbox {
            margin-right: 10px;
        }
    }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""