mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2024-10-30 09:18:46 +00:00
(ui/confirmation-dialog) Created a separate page for FuseConfirmationService and moved the example configurator to there for better visibility
This commit is contained in:
sercan
parent
747b4f44c8
commit
c04550b887
|
|
@ -167,6 +167,9 @@ export const appRoutes: Route[] = [
|
||||||
// Colors
|
// Colors
|
||||||
{path: 'colors', loadChildren: () => import('app/modules/admin/ui/colors/colors.module').then(m => m.ColorsModule)},
|
{path: 'colors', loadChildren: () => import('app/modules/admin/ui/colors/colors.module').then(m => m.ColorsModule)},
|
||||||
|
|
||||||
|
// Confirmation Dialog
|
||||||
|
{path: 'confirmation-dialog', loadChildren: () => import('app/modules/admin/ui/confirmation-dialog/confirmation-dialog.module').then(m => m.ConfirmationDialogModule)},
|
||||||
|
|
||||||
// Datatable
|
// Datatable
|
||||||
{path: 'datatable', loadChildren: () => import('app/modules/admin/ui/datatable/datatable.module').then(m => m.DatatableModule)},
|
{path: 'datatable', loadChildren: () => import('app/modules/admin/ui/datatable/datatable.module').then(m => m.DatatableModule)},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -737,6 +737,13 @@ export const defaultNavigation: FuseNavigationItem[] = [
|
||||||
icon : 'heroicons_outline:color-swatch',
|
icon : 'heroicons_outline:color-swatch',
|
||||||
link : '/ui/colors'
|
link : '/ui/colors'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id : 'user-interface.confirmation-dialog',
|
||||||
|
title: 'Confirmation Dialog',
|
||||||
|
type : 'basic',
|
||||||
|
icon : 'heroicons_outline:question-mark-circle',
|
||||||
|
link : '/ui/confirmation-dialog'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id : 'user-interface.datatable',
|
id : 'user-interface.datatable',
|
||||||
title: 'Datatable',
|
title: 'Datatable',
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,198 @@
|
||||||
|
<div class="flex flex-col flex-auto min-w-0">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<!-- Breadcrumbs -->
|
||||||
|
<div class="flex flex-wrap items-center font-medium">
|
||||||
|
<div>
|
||||||
|
<a class="whitespace-nowrap text-primary-500">User Interface</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Title -->
|
||||||
|
<div class="mt-2">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||||
|
Confirmation Dialog
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main -->
|
||||||
|
<div class="flex-auto p-6 sm:p-10">
|
||||||
|
|
||||||
|
<div class="max-w-3xl">
|
||||||
|
<div class="max-w-3xl prose prose-sm">
|
||||||
|
<p>
|
||||||
|
One of the repetitive and tedious jobs in Angular is to create confirmation dialogs. Since dialogs require their own component
|
||||||
|
you have to either create a separate component every time you need a confirmation dialog or you have to create your own
|
||||||
|
confirmation dialog system that can be configured.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
In order for you to save time while developing with Fuse, we have created a simple yet powerful <code>FuseConfirmationService</code>
|
||||||
|
to create customized confirmation dialogs on-the-fly.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Below you can configure and preview the confirmation dialog. You can use the generated configuration object within your code to have
|
||||||
|
the exact same dialog.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
For more detailed information and API documentation, check the
|
||||||
|
<a [routerLink]="'/ui/fuse-components/services/confirmation'">documentation</a>
|
||||||
|
page.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="example-viewer">
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<h6>Configure the dialog and preview it</h6>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col p-8 pt-0">
|
||||||
|
|
||||||
|
<form
|
||||||
|
[formGroup]="configForm"
|
||||||
|
class="flex flex-col items-start">
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<mat-form-field class="fuse-mat-no-subscript w-full">
|
||||||
|
<mat-label>Title</mat-label>
|
||||||
|
<input
|
||||||
|
matInput
|
||||||
|
[formControlName]="'title'">
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<!-- Message -->
|
||||||
|
<mat-form-field class="fuse-mat-no-subscript fuse-mat-textarea w-full mt-6">
|
||||||
|
<mat-label>Message</mat-label>
|
||||||
|
<textarea
|
||||||
|
matInput
|
||||||
|
[formControlName]="'message'">
|
||||||
|
</textarea>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<div class="w-full mt-8 mb-7 border-b"></div>
|
||||||
|
|
||||||
|
<!-- Icon -->
|
||||||
|
<div
|
||||||
|
class="flex flex-col w-full"
|
||||||
|
[formGroupName]="'icon'">
|
||||||
|
<mat-checkbox
|
||||||
|
[color]="'primary'"
|
||||||
|
[formControlName]="'show'">
|
||||||
|
Show Icon
|
||||||
|
</mat-checkbox>
|
||||||
|
<div class="flex items-center w-full mt-6">
|
||||||
|
<!-- Icon name -->
|
||||||
|
<mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
|
||||||
|
<mat-label>Icon name</mat-label>
|
||||||
|
<input
|
||||||
|
matInput
|
||||||
|
[formControlName]="'name'">
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<!-- Icon color -->
|
||||||
|
<mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
|
||||||
|
<mat-label>Icon color</mat-label>
|
||||||
|
<mat-select [formControlName]="'color'">
|
||||||
|
<ng-container *ngFor="let color of ['primary', 'accent', 'warn', 'basic', 'info', 'success', 'warning', 'error']">
|
||||||
|
<mat-option [value]="color">{{color | titlecase}}</mat-option>
|
||||||
|
</ng-container>
|
||||||
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<div class="w-full mt-8 mb-7 border-b"></div>
|
||||||
|
|
||||||
|
<!-- Actions -->
|
||||||
|
<div
|
||||||
|
class="w-full"
|
||||||
|
[formGroupName]="'actions'">
|
||||||
|
<!-- Confirm -->
|
||||||
|
<div
|
||||||
|
class="flex flex-col w-full"
|
||||||
|
[formGroupName]="'confirm'">
|
||||||
|
<mat-checkbox
|
||||||
|
class="mt-2"
|
||||||
|
[color]="'primary'"
|
||||||
|
[formControlName]="'show'">
|
||||||
|
Show Confirm button
|
||||||
|
</mat-checkbox>
|
||||||
|
<div class="flex items-center w-full mt-4">
|
||||||
|
<!-- Confirm label -->
|
||||||
|
<mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
|
||||||
|
<mat-label>Confirm button label</mat-label>
|
||||||
|
<input
|
||||||
|
matInput
|
||||||
|
[formControlName]="'label'">
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<!-- Confirm color -->
|
||||||
|
<mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
|
||||||
|
<mat-label>Confirm button color</mat-label>
|
||||||
|
<mat-select [formControlName]="'color'">
|
||||||
|
<ng-container *ngFor="let color of ['primary', 'accent', 'warn']">
|
||||||
|
<mat-option [value]="color">{{color | titlecase}}</mat-option>
|
||||||
|
</ng-container>
|
||||||
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Cancel -->
|
||||||
|
<div
|
||||||
|
class="flex flex-col w-full mt-6"
|
||||||
|
[formGroupName]="'cancel'">
|
||||||
|
<mat-checkbox
|
||||||
|
class="mt-2"
|
||||||
|
[color]="'primary'"
|
||||||
|
[formControlName]="'show'">
|
||||||
|
Show Cancel button
|
||||||
|
</mat-checkbox>
|
||||||
|
<div class="flex items-center w-full mt-4">
|
||||||
|
<!-- Cancel label -->
|
||||||
|
<mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
|
||||||
|
<mat-label>Cancel button label</mat-label>
|
||||||
|
<input
|
||||||
|
matInput
|
||||||
|
[formControlName]="'label'">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<div class="w-full mt-8 mb-7 border-b"></div>
|
||||||
|
|
||||||
|
<!-- Dismissible -->
|
||||||
|
<mat-checkbox
|
||||||
|
[color]="'primary'"
|
||||||
|
[formControlName]="'dismissible'">
|
||||||
|
Dismissible
|
||||||
|
</mat-checkbox>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="mt-12">
|
||||||
|
<button
|
||||||
|
mat-flat-button
|
||||||
|
[color]="'primary'"
|
||||||
|
(click)="openConfirmationDialog()">
|
||||||
|
Open Confirmation Dialog
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Config as json -->
|
||||||
|
<div class="dark w-full mt-8 p-4 rounded-2xl overflow-hidden">
|
||||||
|
<textarea
|
||||||
|
fuse-highlight
|
||||||
|
[code]="configForm.value | json"
|
||||||
|
[lang]="'json'"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||||
|
import { FuseConfirmationService } from '@fuse/services/confirmation';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector : 'confirmation',
|
||||||
|
templateUrl : './confirmation-dialog.component.html',
|
||||||
|
encapsulation : ViewEncapsulation.None,
|
||||||
|
changeDetection: ChangeDetectionStrategy.OnPush
|
||||||
|
})
|
||||||
|
export class ConfirmationDialogComponent implements OnInit
|
||||||
|
{
|
||||||
|
configForm: FormGroup;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*/
|
||||||
|
constructor(
|
||||||
|
private _formBuilder: FormBuilder,
|
||||||
|
private _fuseConfirmationService: FuseConfirmationService
|
||||||
|
)
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Lifecycle hooks
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On init
|
||||||
|
*/
|
||||||
|
ngOnInit(): void
|
||||||
|
{
|
||||||
|
// Build the config form
|
||||||
|
this.configForm = this._formBuilder.group({
|
||||||
|
title : 'Remove contact',
|
||||||
|
message : 'Are you sure you want to remove this contact permanently? <span class="font-medium">This action cannot be undone!</span>',
|
||||||
|
icon : this._formBuilder.group({
|
||||||
|
show : true,
|
||||||
|
name : 'heroicons_outline:exclamation',
|
||||||
|
color: 'warn'
|
||||||
|
}),
|
||||||
|
actions : this._formBuilder.group({
|
||||||
|
confirm: this._formBuilder.group({
|
||||||
|
show : true,
|
||||||
|
label: 'Remove',
|
||||||
|
color: 'warn'
|
||||||
|
}),
|
||||||
|
cancel : this._formBuilder.group({
|
||||||
|
show : true,
|
||||||
|
label: 'Cancel'
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
dismissible: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Public methods
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Open confirmation dialog
|
||||||
|
*/
|
||||||
|
openConfirmationDialog(): void
|
||||||
|
{
|
||||||
|
// Open the dialog and save the reference of it
|
||||||
|
const dialogRef = this._fuseConfirmationService.open(this.configForm.value);
|
||||||
|
|
||||||
|
// Subscribe to afterClosed from the dialog reference
|
||||||
|
dialogRef.afterClosed().subscribe((result) => {
|
||||||
|
console.log(result);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { Route, RouterModule } from '@angular/router';
|
||||||
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||||
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||||
|
import { MatInputModule } from '@angular/material/input';
|
||||||
|
import { MatSelectModule } from '@angular/material/select';
|
||||||
|
import { FuseHighlightModule } from '@fuse/components/highlight';
|
||||||
|
import { SharedModule } from 'app/shared/shared.module';
|
||||||
|
import { ConfirmationDialogComponent } from 'app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component';
|
||||||
|
|
||||||
|
export const routes: Route[] = [
|
||||||
|
{
|
||||||
|
path : '',
|
||||||
|
component: ConfirmationDialogComponent
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [
|
||||||
|
ConfirmationDialogComponent
|
||||||
|
],
|
||||||
|
imports : [
|
||||||
|
RouterModule.forChild(routes),
|
||||||
|
MatButtonModule,
|
||||||
|
MatCheckboxModule,
|
||||||
|
MatFormFieldModule,
|
||||||
|
MatInputModule,
|
||||||
|
MatSelectModule,
|
||||||
|
FuseHighlightModule,
|
||||||
|
SharedModule
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class ConfirmationDialogModule
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
@ -6,7 +6,6 @@ import { MatIconModule } from '@angular/material/icon';
|
||||||
import { MatInputModule } from '@angular/material/input';
|
import { MatInputModule } from '@angular/material/input';
|
||||||
import { MatSelectModule } from '@angular/material/select';
|
import { MatSelectModule } from '@angular/material/select';
|
||||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
||||||
import { MatTabsModule } from '@angular/material/tabs';
|
import { MatTabsModule } from '@angular/material/tabs';
|
||||||
import { MatTreeModule } from '@angular/material/tree';
|
import { MatTreeModule } from '@angular/material/tree';
|
||||||
import { FuseCardModule } from '@fuse/components/card';
|
import { FuseCardModule } from '@fuse/components/card';
|
||||||
|
|
@ -67,7 +66,6 @@ import { fuseComponentsRoutes } from 'app/modules/admin/ui/fuse-components/fuse-
|
||||||
MatInputModule,
|
MatInputModule,
|
||||||
MatSelectModule,
|
MatSelectModule,
|
||||||
MatSidenavModule,
|
MatSidenavModule,
|
||||||
MatSlideToggleModule,
|
|
||||||
MatTabsModule,
|
MatTabsModule,
|
||||||
MatTreeModule,
|
MatTreeModule,
|
||||||
FuseAlertModule,
|
FuseAlertModule,
|
||||||
|
|
|
||||||
|
|
@ -260,161 +260,6 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Example</h2>
|
|
||||||
<p>
|
|
||||||
Below you can configure the dialog and preview it. You can use the generated configuration object within your code
|
|
||||||
to have the exact same dialog.
|
|
||||||
</p>
|
|
||||||
<div class="example-viewer">
|
|
||||||
|
|
||||||
<div class="title">
|
|
||||||
<h6>Configure the dialog and preview it</h6>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col p-8 pt-0">
|
|
||||||
|
|
||||||
<form
|
|
||||||
[formGroup]="configForm"
|
|
||||||
class="flex flex-col items-start">
|
|
||||||
|
|
||||||
<!-- Title -->
|
|
||||||
<mat-form-field class="fuse-mat-no-subscript w-full">
|
|
||||||
<mat-label>Title</mat-label>
|
|
||||||
<input
|
|
||||||
matInput
|
|
||||||
[formControlName]="'title'">
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<!-- Message -->
|
|
||||||
<mat-form-field class="fuse-mat-no-subscript fuse-mat-textarea w-full mt-6">
|
|
||||||
<mat-label>Message</mat-label>
|
|
||||||
<textarea
|
|
||||||
matInput
|
|
||||||
[formControlName]="'message'">
|
|
||||||
</textarea>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<!-- Divider -->
|
|
||||||
<div class="w-full mt-8 mb-7 border-b"></div>
|
|
||||||
|
|
||||||
<!-- Icon -->
|
|
||||||
<div
|
|
||||||
class="flex flex-col w-full"
|
|
||||||
[formGroupName]="'icon'">
|
|
||||||
<mat-slide-toggle
|
|
||||||
[color]="'primary'"
|
|
||||||
[formControlName]="'show'">
|
|
||||||
Show Icon
|
|
||||||
</mat-slide-toggle>
|
|
||||||
<div class="flex items-center w-full mt-6">
|
|
||||||
<!-- Icon name -->
|
|
||||||
<mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
|
|
||||||
<mat-label>Icon name</mat-label>
|
|
||||||
<input
|
|
||||||
matInput
|
|
||||||
[formControlName]="'name'">
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<!-- Icon color -->
|
|
||||||
<mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
|
|
||||||
<mat-label>Icon color</mat-label>
|
|
||||||
<mat-select [formControlName]="'color'">
|
|
||||||
<ng-container *ngFor="let color of ['primary', 'accent', 'warn', 'basic', 'info', 'success', 'warning', 'error']">
|
|
||||||
<mat-option [value]="color">{{color | titlecase}}</mat-option>
|
|
||||||
</ng-container>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Divider -->
|
|
||||||
<div class="w-full mt-8 mb-7 border-b"></div>
|
|
||||||
|
|
||||||
<!-- Actions -->
|
|
||||||
<div
|
|
||||||
class="w-full"
|
|
||||||
[formGroupName]="'actions'">
|
|
||||||
<!-- Confirm -->
|
|
||||||
<div
|
|
||||||
class="flex flex-col w-full"
|
|
||||||
[formGroupName]="'confirm'">
|
|
||||||
<mat-slide-toggle
|
|
||||||
class="mt-2"
|
|
||||||
[color]="'primary'"
|
|
||||||
[formControlName]="'show'">
|
|
||||||
Show Confirm button
|
|
||||||
</mat-slide-toggle>
|
|
||||||
<div class="flex items-center w-full mt-4">
|
|
||||||
<!-- Confirm label -->
|
|
||||||
<mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
|
|
||||||
<mat-label>Confirm button label</mat-label>
|
|
||||||
<input
|
|
||||||
matInput
|
|
||||||
[formControlName]="'label'">
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<!-- Confirm color -->
|
|
||||||
<mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
|
|
||||||
<mat-label>Confirm button color</mat-label>
|
|
||||||
<mat-select [formControlName]="'color'">
|
|
||||||
<ng-container *ngFor="let color of ['primary', 'accent', 'warn']">
|
|
||||||
<mat-option [value]="color">{{color | titlecase}}</mat-option>
|
|
||||||
</ng-container>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Cancel -->
|
|
||||||
<div
|
|
||||||
class="flex flex-col w-full mt-6"
|
|
||||||
[formGroupName]="'cancel'">
|
|
||||||
<mat-slide-toggle
|
|
||||||
class="mt-2"
|
|
||||||
[color]="'primary'"
|
|
||||||
[formControlName]="'show'">
|
|
||||||
Show Cancel button
|
|
||||||
</mat-slide-toggle>
|
|
||||||
<div class="flex items-center w-full mt-4">
|
|
||||||
<!-- Cancel label -->
|
|
||||||
<mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
|
|
||||||
<mat-label>Cancel button label</mat-label>
|
|
||||||
<input
|
|
||||||
matInput
|
|
||||||
[formControlName]="'label'">
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Divider -->
|
|
||||||
<div class="w-full mt-8 mb-7 border-b"></div>
|
|
||||||
|
|
||||||
<!-- Dismissible -->
|
|
||||||
<mat-slide-toggle
|
|
||||||
[color]="'primary'"
|
|
||||||
[formControlName]="'dismissible'">
|
|
||||||
Dismissible
|
|
||||||
</mat-slide-toggle>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="mt-12">
|
|
||||||
<button
|
|
||||||
mat-flat-button
|
|
||||||
[color]="'primary'"
|
|
||||||
(click)="openConfirmationDialog()">
|
|
||||||
Open Confirmation Dialog
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Config as json -->
|
|
||||||
<textarea
|
|
||||||
fuse-highlight
|
|
||||||
[code]="configForm.value | json"
|
|
||||||
[lang]="'json'"></textarea>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,78 +1,25 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
|
||||||
import { FuseConfirmationService } from '@fuse/services/confirmation';
|
|
||||||
import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
|
import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'confirmation',
|
selector : 'confirmation',
|
||||||
templateUrl: './confirmation.component.html'
|
templateUrl: './confirmation.component.html'
|
||||||
})
|
})
|
||||||
export class ConfirmationComponent implements OnInit
|
export class ConfirmationComponent
|
||||||
{
|
{
|
||||||
configForm: FormGroup;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Constructor
|
* Constructor
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
private _formBuilder: FormBuilder,
|
|
||||||
private _fuseConfirmationService: FuseConfirmationService,
|
|
||||||
private _fuseComponentsComponent: FuseComponentsComponent
|
private _fuseComponentsComponent: FuseComponentsComponent
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
|
||||||
// @ Lifecycle hooks
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
/**
|
|
||||||
* On init
|
|
||||||
*/
|
|
||||||
ngOnInit(): void
|
|
||||||
{
|
|
||||||
// Build the config form
|
|
||||||
this.configForm = this._formBuilder.group({
|
|
||||||
title : 'Remove contact',
|
|
||||||
message : 'Are you sure you want to remove this contact permanently? <span class="font-medium">This action cannot be undone!</span>',
|
|
||||||
icon : this._formBuilder.group({
|
|
||||||
show : true,
|
|
||||||
name : 'heroicons_outline:exclamation',
|
|
||||||
color: 'warn'
|
|
||||||
}),
|
|
||||||
actions : this._formBuilder.group({
|
|
||||||
confirm: this._formBuilder.group({
|
|
||||||
show : true,
|
|
||||||
label: 'Remove',
|
|
||||||
color: 'warn'
|
|
||||||
}),
|
|
||||||
cancel : this._formBuilder.group({
|
|
||||||
show : true,
|
|
||||||
label: 'Cancel'
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
dismissible: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
// @ Public methods
|
// @ Public methods
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
/**
|
|
||||||
* Open confirmation dialog
|
|
||||||
*/
|
|
||||||
openConfirmationDialog(): void
|
|
||||||
{
|
|
||||||
// Open the dialog and save the reference of it
|
|
||||||
const dialogRef = this._fuseConfirmationService.open(this.configForm.value);
|
|
||||||
|
|
||||||
// Subscribe to afterClosed from the dialog reference
|
|
||||||
dialogRef.afterClosed().subscribe((result) => {
|
|
||||||
console.log(result);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Toggle the drawer
|
* Toggle the drawer
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user