File
Metadata
| selector |
lib-dialog |
| styleUrls |
./dialog.component.scss |
| templateUrl |
./dialog.component.html |
Methods
|
onSubmitForm
|
onSubmitForm(data)
|
|
|
|
|
|
Public
data
|
Type : DataDialog
|
Decorators :
@Inject(MAT_DIALOG_DATA)
|
|
|
|
Public
DEFAULT_ACCEPT
|
Type : string
|
|
|
|
Public
DEFAULT_CANCEL
|
Type : string
|
|
|
|
Private
response
|
Type : DialogResponse<any>
|
|
|
import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {DialogResponse, DialogResponseType, DialogType} from '@maplander/types';
import {DataDialog} from '../../../utils/models/data-dialog';
@Component({
selector: 'lib-dialog',
templateUrl: './dialog.component.html',
styleUrls: ['./dialog.component.scss']
})
export class DialogComponent {
public DEFAULT_ACCEPT: string;
public DEFAULT_CANCEL: string;
public simpleForm: FormGroup;
private response: DialogResponse<any>;
constructor(
@Inject(MAT_DIALOG_DATA) public data: DataDialog,
private _ref: MatDialogRef<DialogComponent>,
private _formBuilder: FormBuilder
) {
this.DEFAULT_ACCEPT = 'ACEPTAR';
this.DEFAULT_CANCEL = 'CANCELAR';
if (this.data.type === DialogType.WITH_INPUT) {
this.simpleForm = this._formBuilder.group({
value: ['', [Validators.required]]
});
}
}
accept(): void {
this.response = {code: DialogResponseType.ACCEPT};
this._ref.close(this.response);
}
cancel(): void {
this.response = {code: DialogResponseType.CANCEL};
this._ref.close(this.response);
}
onSubmitForm(data): void {
if (this.simpleForm.invalid) {
return;
}
this.response = {code: DialogResponseType.ACCEPT, data: data};
this._ref.close(this.response);
}
}
<div class="global-dialog">
<ng-template [ngIf]="data.title">
<h2 class="global-dialog__title">{{data.title}}</h2>
</ng-template>
<mat-dialog-content class="global-dialog__content">
<ng-template [ngIf]="data.message">
<p class="content__message">
{{data.message}}
</p>
</ng-template>
<ng-template [ngIf]="data.type === 2" [ngIfElse]="constantActions"> <!-- WITH_INPUT type -->
<form class="content__form" [formGroup]="simpleForm" (ngSubmit)="onSubmitForm(simpleForm.value)" aria-label="Form for user">
<mat-form-field class="form__form-field">
<input formControlName="value" matInput placeholder="{{data.options.placeholder}}'" type="text" required
aria-label="User input text">
<mat-error *ngIf="simpleForm.controls['value'].hasError('required')">
Este campo es requerido
</mat-error>
</mat-form-field>
<mat-dialog-actions class="content__actions">
<button mat-button type="button" (click)="cancel()">{{data.options.cancel || DEFAULT_CANCEL}}</button>
<button mat-button type="submit">{{data.options.accept || DEFAULT_ACCEPT}}</button>
</mat-dialog-actions>
</form>
</ng-template>
<ng-template #constantActions>
<mat-dialog-actions class="content__actions">
<ng-template [ngIf]="data.type !== 0"> <!-- ALERT type -->
<button mat-button (click)="cancel()">{{data.options.cancel || DEFAULT_CANCEL}}</button>
</ng-template>
<button mat-button (click)="accept()">{{data.options.accept || DEFAULT_ACCEPT}}</button>
</mat-dialog-actions>
</ng-template>
</mat-dialog-content>
</div>
:host {
display: block;
}
::ng-deep .global_dialog {
max-width: 30vw !important;
min-width: 300px !important;
}
.global-dialog__content {
overflow: hidden;
padding: 8px 24px;
}
.global-dialog__title {
margin: 0;
}
.content__form, .form__form-field {
width: 100%;
}
.content__actions {
display: flex;
align-items: center;
justify-content: flex-end;
}
Legend
Html element with directive