mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2024-10-30 01:08:47 +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
|
||||
{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
|
||||
{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',
|
||||
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',
|
||||
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 { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatTreeModule } from '@angular/material/tree';
|
||||
import { FuseCardModule } from '@fuse/components/card';
|
||||
|
|
@ -67,7 +66,6 @@ import { fuseComponentsRoutes } from 'app/modules/admin/ui/fuse-components/fuse-
|
|||
MatInputModule,
|
||||
MatSelectModule,
|
||||
MatSidenavModule,
|
||||
MatSlideToggleModule,
|
||||
MatTabsModule,
|
||||
MatTreeModule,
|
||||
FuseAlertModule,
|
||||
|
|
|
|||
|
|
@ -260,161 +260,6 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,78 +1,25 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { FuseConfirmationService } from '@fuse/services/confirmation';
|
||||
import { Component } from '@angular/core';
|
||||
import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
|
||||
|
||||
@Component({
|
||||
selector : 'confirmation',
|
||||
templateUrl: './confirmation.component.html'
|
||||
})
|
||||
export class ConfirmationComponent implements OnInit
|
||||
export class ConfirmationComponent
|
||||
{
|
||||
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? <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);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user