(apps/contacts) Added confirmation to the "Delete contact" action using FuseConfirmationService

(apps/ecommerce/inventory) Added confirmation to the "Delete product" action using FuseConfirmationService
(apps/scrumboard) Added confirmation to the "Delete list" action using FuseConfirmationService
(apps/tasks) Added confirmation to the "Delete task" action using FuseConfirmationService

src/app/modules/admin/apps/contacts/details/details.component.ts

@@ -6,6 +6,7 @@ import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { MatDrawerToggleResult } from '@angular/material/sidenav';
 import { Subject } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
 import { Contact, Country, Tag } from 'app/modules/admin/apps/contacts/contacts.types';
 import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list.component';
 import { ContactsService } from 'app/modules/admin/apps/contacts/contacts.service';
@@ -42,6 +43,7 @@ export class ContactsDetailsComponent implements OnInit, OnDestroy
         private _contactsListComponent: ContactsListComponent,
         private _contactsService: ContactsService,
         private _formBuilder: FormBuilder,
+        private _fuseConfirmationService: FuseConfirmationService,
         private _renderer2: Renderer2,
         private _router: Router,
         private _overlay: Overlay,
@@ -276,41 +278,61 @@ export class ContactsDetailsComponent implements OnInit, OnDestroy
      */
     deleteContact(): void
     {
-        // Get the current contact's id
+        // Open the confirmation dialog
-        const id = this.contact.id;
+        const confirmation = this._fuseConfirmationService.open({
-
+            title  : 'Delete contact',
-        // Get the next/previous contact's id
+            message: 'Are you sure you want to delete this contact? This action cannot be undone!',
-        const currentContactIndex = this.contacts.findIndex(item => item.id === id);
+            actions: {
-        const nextContactIndex = currentContactIndex + ((currentContactIndex === (this.contacts.length - 1)) ? -1 : 1);
+                confirm: {
-        const nextContactId = (this.contacts.length === 1 && this.contacts[0].id === id) ? null : this.contacts[nextContactIndex].id;
+                    label: 'Delete'
-
-        // Delete the contact
-        this._contactsService.deleteContact(id)
-            .subscribe((isDeleted) => {
-
-                // Return if the contact wasn't deleted...
-                if ( !isDeleted )
-                {
-                    return;
                 }
+            }
+        });
 
-                // Navigate to the next contact if available
+        // Subscribe to the confirmation dialog closed action
-                if ( nextContactId )
+        confirmation.afterClosed().subscribe((result) => {
-                {
-                    this._router.navigate(['../', nextContactId], {relativeTo: this._activatedRoute});
-                }
-                // Otherwise, navigate to the parent
-                else
-                {
-                    this._router.navigate(['../'], {relativeTo: this._activatedRoute});
-                }
 
-                // Toggle the edit mode off
+            // If the confirm button pressed...
-                this.toggleEditMode(false);
+            if ( result === 'confirmed' )
-            });
+            {
+                // Get the current contact's id
+                const id = this.contact.id;
+
+                // Get the next/previous contact's id
+                const currentContactIndex = this.contacts.findIndex(item => item.id === id);
+                const nextContactIndex = currentContactIndex + ((currentContactIndex === (this.contacts.length - 1)) ? -1 : 1);
+                const nextContactId = (this.contacts.length === 1 && this.contacts[0].id === id) ? null : this.contacts[nextContactIndex].id;
+
+                // Delete the contact
+                this._contactsService.deleteContact(id)
+                    .subscribe((isDeleted) => {
+
+                        // Return if the contact wasn't deleted...
+                        if ( !isDeleted )
+                        {
+                            return;
+                        }
+
+                        // Navigate to the next contact if available
+                        if ( nextContactId )
+                        {
+                            this._router.navigate(['../', nextContactId], {relativeTo: this._activatedRoute});
+                        }
+                        // Otherwise, navigate to the parent
+                        else
+                        {
+                            this._router.navigate(['../'], {relativeTo: this._activatedRoute});
+                        }
+
+                        // Toggle the edit mode off
+                        this.toggleEditMode(false);
+                    });
+
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            }
+        });
 
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
     }
 
     /**

src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.ts

@@ -6,6 +6,7 @@ import { MatSort } from '@angular/material/sort';
 import { merge, Observable, Subject } from 'rxjs';
 import { debounceTime, map, switchMap, takeUntil } from 'rxjs/operators';
 import { fuseAnimations } from '@fuse/animations';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
 import { InventoryBrand, InventoryCategory, InventoryPagination, InventoryProduct, InventoryTag, InventoryVendor } from 'app/modules/admin/apps/ecommerce/inventory/inventory.types';
 import { InventoryService } from 'app/modules/admin/apps/ecommerce/inventory/inventory.service';
 
@@ -62,6 +63,7 @@ export class InventoryListComponent implements OnInit, AfterViewInit, OnDestroy
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseConfirmationService: FuseConfirmationService,
         private _formBuilder: FormBuilder,
         private _inventoryService: InventoryService
     )
@@ -525,14 +527,34 @@ export class InventoryListComponent implements OnInit, AfterViewInit, OnDestroy
      */
     deleteSelectedProduct(): void
     {
-        // Get the product object
+        // Open the confirmation dialog
-        const product = this.selectedProductForm.getRawValue();
+        const confirmation = this._fuseConfirmationService.open({
+            title  : 'Delete product',
+            message: 'Are you sure you want to remove this product? This action cannot be undone!',
+            actions: {
+                confirm: {
+                    label: 'Delete'
+                }
+            }
+        });
 
-        // Delete the product on the server
+        // Subscribe to the confirmation dialog closed action
-        this._inventoryService.deleteProduct(product.id).subscribe(() => {
+        confirmation.afterClosed().subscribe((result) => {
 
-            // Close the details
+            // If the confirm button pressed...
-            this.closeDetails();
+            if ( result === 'confirmed' )
+            {
+
+                // Get the product object
+                const product = this.selectedProductForm.getRawValue();
+
+                // Delete the product on the server
+                this._inventoryService.deleteProduct(product.id).subscribe(() => {
+
+                    // Close the details
+                    this.closeDetails();
+                });
+            }
         });
     }
 

src/app/modules/admin/apps/scrumboard/board/board.component.html

@@ -85,7 +85,7 @@
                                         <mat-icon
                                             class="icon-size-5"
                                             [svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
-                                        Rename List
+                                        Rename list
                                     </button>
                                     <button
                                         mat-menu-item
@@ -93,7 +93,7 @@
                                         <mat-icon
                                             class="icon-size-5"
                                             [svgIcon]="'heroicons_solid:trash'"></mat-icon>
-                                        Delete List
+                                        Delete list
                                     </button>
                                 </mat-menu>
                             </div>

src/app/modules/admin/apps/scrumboard/board/board.component.ts

@@ -3,9 +3,10 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import * as moment from 'moment';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
 import { ScrumboardService } from 'app/modules/admin/apps/scrumboard/scrumboard.service';
 import { Board, Card, List } from 'app/modules/admin/apps/scrumboard/scrumboard.models';
-import * as moment from 'moment';
 
 @Component({
     selector       : 'scrumboard-board',
@@ -31,6 +32,7 @@ export class ScrumboardBoardComponent implements OnInit, OnDestroy
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _formBuilder: FormBuilder,
+        private _fuseConfirmationService: FuseConfirmationService,
         private _scrumboardService: ScrumboardService
     )
     {
@@ -148,8 +150,28 @@ export class ScrumboardBoardComponent implements OnInit, OnDestroy
      */
     deleteList(id): void
     {
-        // Delete the list
+        // Open the confirmation dialog
-        this._scrumboardService.deleteList(id).subscribe();
+        const confirmation = this._fuseConfirmationService.open({
+            title  : 'Delete list',
+            message: 'Are you sure you want to delete this list and its cards? This action cannot be undone!',
+            actions: {
+                confirm: {
+                    label: 'Delete'
+                }
+            }
+        });
+
+        // Subscribe to the confirmation dialog closed action
+        confirmation.afterClosed().subscribe((result) => {
+
+            // If the confirm button pressed...
+            if ( result === 'confirmed' )
+            {
+
+                // Delete the list
+                this._scrumboardService.deleteList(id).subscribe();
+            }
+        });
     }
 
     /**

src/app/modules/admin/apps/tasks/details/details.component.ts

@@ -4,6 +4,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { MatDrawerToggleResult } from '@angular/material/sidenav';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
 import { Subject } from 'rxjs';
 import { debounceTime, filter, takeUntil, tap } from 'rxjs/operators';
 import { assign } from 'lodash-es';
@@ -40,6 +41,7 @@ export class TasksDetailsComponent implements OnInit, AfterViewInit, OnDestroy
         private _activatedRoute: ActivatedRoute,
         private _changeDetectorRef: ChangeDetectorRef,
         private _formBuilder: FormBuilder,
+        private _fuseConfirmationService: FuseConfirmationService,
         private _renderer2: Renderer2,
         private _router: Router,
         private _tasksListComponent: TasksListComponent,
@@ -472,38 +474,58 @@ export class TasksDetailsComponent implements OnInit, AfterViewInit, OnDestroy
      */
     deleteTask(): void
     {
-        // Get the current task's id
+        // Open the confirmation dialog
-        const id = this.task.id;
+        const confirmation = this._fuseConfirmationService.open({
-
+            title  : 'Delete task',
-        // Get the next/previous task's id
+            message: 'Are you sure you want to delete this task? This action cannot be undone!',
-        const currentTaskIndex = this.tasks.findIndex(item => item.id === id);
+            actions: {
-        const nextTaskIndex = currentTaskIndex + ((currentTaskIndex === (this.tasks.length - 1)) ? -1 : 1);
+                confirm: {
-        const nextTaskId = (this.tasks.length === 1 && this.tasks[0].id === id) ? null : this.tasks[nextTaskIndex].id;
+                    label: 'Delete'
-
-        // Delete the task
-        this._tasksService.deleteTask(id)
-            .subscribe((isDeleted) => {
-
-                // Return if the task wasn't deleted...
-                if ( !isDeleted )
-                {
-                    return;
                 }
+            }
+        });
 
-                // Navigate to the next task if available
+        // Subscribe to the confirmation dialog closed action
-                if ( nextTaskId )
+        confirmation.afterClosed().subscribe((result) => {
-                {
-                    this._router.navigate(['../', nextTaskId], {relativeTo: this._activatedRoute});
-                }
-                // Otherwise, navigate to the parent
-                else
-                {
-                    this._router.navigate(['../'], {relativeTo: this._activatedRoute});
-                }
-            });
 
-        // Mark for check
+            // If the confirm button pressed...
-        this._changeDetectorRef.markForCheck();
+            if ( result === 'confirmed' )
+            {
+
+                // Get the current task's id
+                const id = this.task.id;
+
+                // Get the next/previous task's id
+                const currentTaskIndex = this.tasks.findIndex(item => item.id === id);
+                const nextTaskIndex = currentTaskIndex + ((currentTaskIndex === (this.tasks.length - 1)) ? -1 : 1);
+                const nextTaskId = (this.tasks.length === 1 && this.tasks[0].id === id) ? null : this.tasks[nextTaskIndex].id;
+
+                // Delete the task
+                this._tasksService.deleteTask(id)
+                    .subscribe((isDeleted) => {
+
+                        // Return if the task wasn't deleted...
+                        if ( !isDeleted )
+                        {
+                            return;
+                        }
+
+                        // Navigate to the next task if available
+                        if ( nextTaskId )
+                        {
+                            this._router.navigate(['../', nextTaskId], {relativeTo: this._activatedRoute});
+                        }
+                        // Otherwise, navigate to the parent
+                        else
+                        {
+                            this._router.navigate(['../'], {relativeTo: this._activatedRoute});
+                        }
+                    });
+
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            }
+        });
     }
 
     /**