purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-08 03:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
(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
This commit is contained in:
sercan 2021-07-16 12:28:43 +03:00
parent 8b977c0eeb
commit 961b86c8cb
5 changed files with 159 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/app/modules/admin/apps/contacts/details/details.component.ts
View File

@ -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
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;
// Open the confirmation dialog
const confirmation = this._fuseConfirmationService.open({
title : 'Delete contact',
message: 'Are you sure you want to delete this contact? This action cannot be undone!',
actions: {
confirm: {
label: 'Delete'
}
}
});
// 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});
}
// Subscribe to the confirmation dialog closed action
confirmation.afterClosed().subscribe((result) => {
// Toggle the edit mode off
this.toggleEditMode(false);
});
// If the confirm button pressed...
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();
}
/**

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

@ -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
const product = this.selectedProductForm.getRawValue();
// Open the confirmation dialog
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
this._inventoryService.deleteProduct(product.id).subscribe(() => {
// Subscribe to the confirmation dialog closed action
confirmation.afterClosed().subscribe((result) => {
// Close the details
this.closeDetails();
// If the confirm button pressed...
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();
});
}
});
}

4
src/app/modules/admin/apps/scrumboard/board/board.component.html
View File

@ -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>

28
src/app/modules/admin/apps/scrumboard/board/board.component.ts
View File

@ -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
this._scrumboardService.deleteList(id).subscribe();
// Open the confirmation dialog
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();
}
});
}
/**

80
src/app/modules/admin/apps/tasks/details/details.component.ts
View File

@ -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
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;
// Open the confirmation dialog
const confirmation = this._fuseConfirmationService.open({
title : 'Delete task',
message: 'Are you sure you want to delete this task? This action cannot be undone!',
actions: {
confirm: {
label: 'Delete'
}
}
});
// 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});
}
});
// Subscribe to the confirmation dialog closed action
confirmation.afterClosed().subscribe((result) => {
// Mark for check
this._changeDetectorRef.markForCheck();
// If the confirm button pressed...
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();
}
});
}
/**