From 178d09597bbe5a1520cf86eec45dbba6c81456f1 Mon Sep 17 00:00:00 2001 From: sercan Date: Sat, 10 Jul 2021 22:03:58 +0300 Subject: [PATCH] (fuse/confirmation) First iteration of the FuseConfirmationService --- src/@fuse/fuse.module.ts | 2 + .../confirmation/confirmation.module.ts | 31 ++ .../confirmation/confirmation.service.ts | 57 +++ .../confirmation/confirmation.types.ts | 22 + .../confirmation/dialog/dialog.component.html | 85 ++++ .../confirmation/dialog/dialog.component.ts | 38 ++ src/@fuse/services/confirmation/index.ts | 1 + src/@fuse/services/confirmation/public-api.ts | 3 + .../navigation/navigation.component.html | 3 +- .../fuse-components.component.ts | 6 + .../fuse-components/fuse-components.module.ts | 12 +- .../fuse-components.routing.ts | 5 + .../confirmation/confirmation.component.html | 420 ++++++++++++++++++ .../confirmation/confirmation.component.ts | 84 ++++ 14 files changed, 766 insertions(+), 3 deletions(-) create mode 100644 src/@fuse/services/confirmation/confirmation.module.ts create mode 100644 src/@fuse/services/confirmation/confirmation.service.ts create mode 100644 src/@fuse/services/confirmation/confirmation.types.ts create mode 100644 src/@fuse/services/confirmation/dialog/dialog.component.html create mode 100644 src/@fuse/services/confirmation/dialog/dialog.component.ts create mode 100644 src/@fuse/services/confirmation/index.ts create mode 100644 src/@fuse/services/confirmation/public-api.ts create mode 100644 src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.html create mode 100644 src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.ts diff --git a/src/@fuse/fuse.module.ts b/src/@fuse/fuse.module.ts index 3bd69876..455f1807 100644 --- a/src/@fuse/fuse.module.ts +++ b/src/@fuse/fuse.module.ts @@ -1,5 +1,6 @@ import { NgModule, Optional, SkipSelf } from '@angular/core'; import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field'; +import { FuseConfirmationModule } from '@fuse/services/confirmation'; import { FuseMediaWatcherModule } from '@fuse/services/media-watcher/media-watcher.module'; import { FuseSplashScreenModule } from '@fuse/services/splash-screen/splash-screen.module'; import { FuseTailwindConfigModule } from '@fuse/services/tailwind/tailwind.module'; @@ -7,6 +8,7 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module'; @NgModule({ imports : [ + FuseConfirmationModule, FuseMediaWatcherModule, FuseSplashScreenModule, FuseTailwindConfigModule, diff --git a/src/@fuse/services/confirmation/confirmation.module.ts b/src/@fuse/services/confirmation/confirmation.module.ts new file mode 100644 index 00000000..2ebbef45 --- /dev/null +++ b/src/@fuse/services/confirmation/confirmation.module.ts @@ -0,0 +1,31 @@ +import { NgModule } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatIconModule } from '@angular/material/icon'; +import { FuseConfirmationService } from '@fuse/services/confirmation/confirmation.service'; +import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component'; +import { CommonModule } from '@angular/common'; + +@NgModule({ + declarations: [ + FuseConfirmationDialogComponent + ], + imports: [ + MatButtonModule, + MatDialogModule, + MatIconModule, + CommonModule + ], + providers : [ + FuseConfirmationService + ] +}) +export class FuseConfirmationModule +{ + /** + * Constructor + */ + constructor(private _fuseConfirmationService: FuseConfirmationService) + { + } +} diff --git a/src/@fuse/services/confirmation/confirmation.service.ts b/src/@fuse/services/confirmation/confirmation.service.ts new file mode 100644 index 00000000..10fe2e9a --- /dev/null +++ b/src/@fuse/services/confirmation/confirmation.service.ts @@ -0,0 +1,57 @@ +import { Injectable } from '@angular/core'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; +import { merge } from 'lodash-es'; +import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component'; +import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types'; + +@Injectable() +export class FuseConfirmationService +{ + private _defaultConfig: FuseConfirmationConfig = { + title : 'Confirm action', + message : 'Are you sure you want to confirm this action?', + icon : { + show : true, + name : 'heroicons_outline:exclamation', + color: 'warn' + }, + actions : { + confirm: { + show : true, + label: 'Confirm', + color: 'warn' + }, + cancel : { + show : true, + label: 'Cancel' + } + }, + dismissible: false + }; + + /** + * Constructor + */ + constructor( + private _matDialog: MatDialog + ) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + open(config: FuseConfirmationConfig = {}): MatDialogRef + { + // Merge the user config with the default config + const userConfig = merge({}, this._defaultConfig, config); + + // Open the dialog + return this._matDialog.open(FuseConfirmationDialogComponent, { + autoFocus : false, + disableClose: !userConfig.dismissible, + data : userConfig + }); + } +} diff --git a/src/@fuse/services/confirmation/confirmation.types.ts b/src/@fuse/services/confirmation/confirmation.types.ts new file mode 100644 index 00000000..53bd2dc5 --- /dev/null +++ b/src/@fuse/services/confirmation/confirmation.types.ts @@ -0,0 +1,22 @@ +export interface FuseConfirmationConfig +{ + title?: string; + message?: string; + icon?: { + show?: boolean; + name?: string; + color?: 'primary' | 'accent' | 'warn' | 'basic' | 'info' | 'success' | 'warning' | 'error'; + }; + actions?: { + confirm?: { + show?: boolean; + label?: string; + color?: 'primary' | 'accent' | 'warn'; + }; + cancel?: { + show?: boolean; + label?: string; + }; + }; + dismissible?: boolean; +} diff --git a/src/@fuse/services/confirmation/dialog/dialog.component.html b/src/@fuse/services/confirmation/dialog/dialog.component.html new file mode 100644 index 00000000..af0fee6d --- /dev/null +++ b/src/@fuse/services/confirmation/dialog/dialog.component.html @@ -0,0 +1,85 @@ +
+ + + +
+ +
+ + + +
+ + + +
+ +
+ + + +
+ + + +
+ + + + +
+ +
+ + +
+ + + +
+ + + + + + + + + + + +
+ + +
diff --git a/src/@fuse/services/confirmation/dialog/dialog.component.ts b/src/@fuse/services/confirmation/dialog/dialog.component.ts new file mode 100644 index 00000000..52d718c3 --- /dev/null +++ b/src/@fuse/services/confirmation/dialog/dialog.component.ts @@ -0,0 +1,38 @@ +import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types'; + +@Component({ + selector : 'fuse-confirmation-dialog', + templateUrl : './dialog.component.html', + encapsulation: ViewEncapsulation.None +}) +export class FuseConfirmationDialogComponent implements OnInit +{ + /** + * Constructor + */ + constructor( + @Inject(MAT_DIALOG_DATA) public data: FuseConfirmationConfig, + public matDialogRef: MatDialogRef + ) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + +} diff --git a/src/@fuse/services/confirmation/index.ts b/src/@fuse/services/confirmation/index.ts new file mode 100644 index 00000000..f6f2fee1 --- /dev/null +++ b/src/@fuse/services/confirmation/index.ts @@ -0,0 +1 @@ +export * from '@fuse/services/confirmation/public-api'; diff --git a/src/@fuse/services/confirmation/public-api.ts b/src/@fuse/services/confirmation/public-api.ts new file mode 100644 index 00000000..815db9fd --- /dev/null +++ b/src/@fuse/services/confirmation/public-api.ts @@ -0,0 +1,3 @@ +export * from '@fuse/services/confirmation/confirmation.module'; +export * from '@fuse/services/confirmation/confirmation.service'; +export * from '@fuse/services/confirmation/confirmation.types'; diff --git a/src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.html b/src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.html index 970764b3..6bed662f 100644 --- a/src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.html +++ b/src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.html @@ -73,8 +73,7 @@

Navigation item

- This is the type alias for the Navigation item. It's used to create the navigation and both vertical and horizontal variations use the - same item type: + This is the interface of the Navigation item. Both vertical and horizontal navigation items use the same interface:

+ +

Confirmation Config

+

+ Here is the interface for the Confirmation configuration: +

+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
+
title
+ 		+ Title of the confirmation dialog. +
+
message
+ 		+ Message of the confirmation dialog. +
+
icon.show
+ 		+ Whether to show the icon. +
+
icon.name
+ 		+ Name of the icon. +
+
icon.color
+ 		+ Color of the icon. +
+
actions.confirm.show
+ 		+ Whether to show the confirmation button. +
+
actions.confirm.label
+ 		+ Label of the confirmation button. +
+
actions.confirm.color
+ 		+ Color of the confirmation button. +
+
actions.cancel.show
+ 		+ Whether to show the cancel button. +
+
actions.confirm.label
+ 		+ Label of the cancel button. +
+
dismissible
+ 		+ Sets the dismissible status of the confirmation dialog.
+ If false, confirmation dialog cannot be closed by clicking on backdrop or pressing Escape key. + The close button on the top right corner also won't show up. +
+
+ +

Methods

+
+
+ open(config: FuseConfirmationConfig): MatDialogRef<FuseConfirmationDialogComponent> +
+
+ Opens the confirmation dialog with the given configuration +
+
+ +

MatDialogRef

+

+ Since FuseConfirmationService uses MatDialog behind the scenes, it returns + a reference to the created dialog. Using that reference, you can access to the user input: +

+ + + +
+ + + + + + + + + + + + + + + + + + + + + +
ResultDescription
+
'confirmed'
+ 		+ This is the result if the user pressed the Confirm button. +
+
'cancelled'
+ 		+ This is the result if the user pressed the Cancel button. +
+
undefined
+ 		+ This is the result if the confirmation dismissed either using the close button, + clicking on the backdrop or pressing the Escape key. +
+
+ +

Example

+

+ 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. +

+
+ +
+
Configure the dialog and preview it
+
+ +
+ +
+ + + + Title + + + + + + Message + + + + +
+ + +
+ + Show Icon + +
+ + + Icon name + + + + + + Icon color + + + {{color | titlecase}} + + + +
+
+ + +
+ + +
+ +
+ + Show Confirm button + +
+ + + Confirm button label + + + + + + Confirm button color + + + {{color | titlecase}} + + + +
+
+ + +
+ + Show Cancel button + +
+ + + Cancel button label + + +
+
+
+ + +
+ + + + Dismissible + +
+ +
+ +
+
+
+ + + + + + diff --git a/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.ts b/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.ts new file mode 100644 index 00000000..2e859b9d --- /dev/null +++ b/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.ts @@ -0,0 +1,84 @@ +import { Component, OnInit } 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'; + +@Component({ + selector : 'confirmation', + templateUrl: './confirmation.component.html' +}) +export class ConfirmationComponent implements OnInit +{ + configForm: FormGroup; + + /** + * Constructor + */ + constructor( + private _formBuilder: FormBuilder, + private _fuseConfirmationService: FuseConfirmationService, + 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? This action cannot be undone!', + 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); + }); + } + + /** + * Toggle the drawer + */ + toggleDrawer(): void + { + // Toggle the drawer + this._fuseComponentsComponent.matDrawer.toggle(); + } +}