Moving away from sweetalert2 since ngx-sweetalert2 seems to be defunct

sweetalert2/ngx-sweetalert2#269

package.json

@@ -38,8 +38,6 @@
     "@angular/ssr": "^18.2.12",
     "@ngneat/hotkeys": "^4.0.0",
     "@ngneat/until-destroy": "^10.0.0",
-    "@sweetalert2/ngx-sweetalert2": "^12.4.0",
-    "@sweetalert2/themes": "^5.0.18",
     "buffer": "^6.0.3",
     "buffer-crc32": "^1.0.0",
     "escape-string-regexp": "^5.0.0",
@@ -53,7 +51,6 @@
     "ngx-spinner": "^17.0.0",
     "rxjs": "~7.8.1",
     "scroll-into-view-if-needed": "^3.1.0",
-    "sweetalert2": "^11.14.5",
     "tslib": "^2.8.1",
     "uuid": "^11.0.3",
     "zone.js": "^0.14.10"

src/app/app.component.spec.ts

@@ -2,12 +2,11 @@ import { TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
 import { AppComponent } from './app.component';
-import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent, NoopAnimationsModule, RouterModule.forRoot([]), SweetAlert2Module.forRoot()],
+      imports: [AppComponent, NoopAnimationsModule, RouterModule.forRoot([])],
     }).compileComponents();
   });
 

src/app/app.config.ts

@@ -1,20 +1,14 @@
-import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { ApplicationConfig } from '@angular/core';
 import { provideRouter, withEnabledBlockingInitialNavigation } from '@angular/router';
 
 import { provideClientHydration } from '@angular/platform-browser';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes, withEnabledBlockingInitialNavigation()),
     provideClientHydration(),
     provideAnimationsAsync(),
-    importProvidersFrom(
-      SweetAlert2Module.forRoot({
-        provideSwal: async () => import('sweetalert2/dist/sweetalert2.js'),
-      }),
-    ),
   ],
 };

src/app/checklists/checklist-tree/checklist-tree.component.ts

@@ -20,18 +20,19 @@ import {
   ViewChildren,
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTree, MatTreeModule, MatTreeNestedDataSource } from '@angular/material/tree';
 import { MatIconButtonSizesModule } from 'mat-icon-button-sizes';
 import scrollIntoView from 'scroll-into-view-if-needed';
-import Swal from 'sweetalert2/dist/sweetalert2.js';
 import {
   Checklist,
   ChecklistFile,
   ChecklistGroup,
   ChecklistGroup_Category,
   ChecklistItem,
 } from '../../../../gen/ts/checklist';
+import { TitleDialogComponent } from '../dialogs/title-dialog/title-dialog.component';
 import { ChecklistDragDirective } from './drag.directive';
 import { ChecklistTreeNode } from './node/node';
 import { ChecklistTreeNodeComponent } from './node/node.component';
@@ -50,6 +51,7 @@ type MovementDirection = 'up' | 'down';
     ChecklistDragDirective,
     ChecklistTreeNodeComponent,
     MatButtonModule,
+    MatDialogModule,
     MatIconButtonSizesModule,
     MatIconModule,
     MatTreeModule,
@@ -69,6 +71,7 @@ export class ChecklistTreeComponent {
 
   constructor(
     private readonly _element: ElementRef<Element>,
+    private readonly _dialog: MatDialog,
     private readonly _injector: Injector,
   ) {}
 
@@ -704,17 +707,18 @@ export class ChecklistTreeComponent {
   }
 
   private async fillTitle(pb: Checklist | ChecklistGroup, promptType: string): Promise<boolean> {
-    const result = await Swal.fire({
-      title: `Enter ${promptType} title:`,
-      input: 'text',
-      inputPlaceholder: `My ${promptType} title`,
-      inputValue: pb.title,
-    });
+    const title = await TitleDialogComponent.promptForTitle(
+      {
+        promptType: promptType,
+        initialTitle: pb.title,
+      },
+      this._dialog,
+    );
 
-    if (!result.isConfirmed) {
+    if (!title) {
       return false;
     }
-    pb.title = result.value as string; // eslint-disable-line require-atomic-updates
+    pb.title = title; // eslint-disable-line require-atomic-updates
     return true;
   }
 }

src/app/checklists/checklist-tree/node/node.component.html

@@ -67,20 +67,7 @@
       mat-small-icon-button
       [attr.aria-label]="'Delete ' + node.title"
       [matTooltip]="'Delete ' + node.title + ' and all its items'"
-      [swal]="{
-        titleText: node.checklist ? 'Delete checklist?' : 'Delete group?',
-        text: node.checklist
-          ? 'Are you sure you\'d like to delete checklist "' + node.title + '"?'
-          : 'Are you sure you\'d like to delete checklist group "' +
-            node.title +
-            '" and all checklists within??',
-        icon: 'warning',
-        showConfirmButton: true,
-        showCancelButton: true,
-        confirmButtonText: 'Delete!',
-        confirmButtonColor: '#d32f2f',
-      }"
-      (confirm)="nodeDelete.emit(node)"
+      (click)="onDelete()"
     >
       <mat-icon>delete</mat-icon>
     </button>

src/app/checklists/checklist-tree/node/node.component.spec.ts

@@ -1,6 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
 import { ChecklistTreeNodeComponent } from './node.component';
 
 describe('NodeComponent', () => {
@@ -9,7 +8,7 @@ describe('NodeComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ChecklistTreeNodeComponent, SweetAlert2Module.forRoot()],
+      imports: [ChecklistTreeNodeComponent],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ChecklistTreeNodeComponent);

src/app/checklists/checklist-tree/node/node.component.ts

@@ -2,12 +2,13 @@ import { CdkDragHandle } from '@angular/cdk/drag-drop';
 import { NgIf } from '@angular/common';
 import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatOption, MatSelect } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
 import { MatIconButtonSizesModule } from 'mat-icon-button-sizes';
 import { ChecklistGroup_Category } from '../../../../../gen/ts/checklist';
+import { DeleteDialogComponent } from '../../dialogs/delete-dialog/delete-dialog.component';
 import { ChecklistTreeNode } from './node';
 
 @Component({
@@ -16,13 +17,13 @@ import { ChecklistTreeNode } from './node';
   imports: [
     CdkDragHandle,
     MatButtonModule,
+    MatDialogModule,
     MatIconButtonSizesModule,
     MatIconModule,
     MatTooltipModule,
     NgIf,
     MatSelect,
     MatOption,
-    SweetAlert2Module,
   ],
   templateUrl: './node.component.html',
   styleUrl: './node.component.scss',
@@ -42,10 +43,30 @@ export class ChecklistTreeNodeComponent {
     [ChecklistGroup_Category.emergency, '🄴mergency'],
   ]);
 
+  constructor(private readonly _dialog: MatDialog) {}
+
   get checklistGroupCategory(): ChecklistGroup_Category {
     return this.node.group!.category;
   }
   set checklistGroupCategory(value: ChecklistGroup_Category) {
     this.node.group!.category = value;
   }
+
+  async onDelete() {
+    const isChecklist = Boolean(this.node.checklist);
+    const nodeTitle = this.node.title;
+    const confirmed = await DeleteDialogComponent.confirmDeletion(
+      {
+        entityType: isChecklist ? 'checklist' : 'group',
+        entityDescription: isChecklist
+          ? `checklist ${nodeTitle}`
+          : `checklist group ${nodeTitle} and all checklists within`,
+      },
+      this._dialog,
+    );
+
+    if (confirmed) {
+      this.nodeDelete.emit(this.node);
+    }
+  }
 }

src/app/checklists/checklists.component.spec.ts

@@ -2,7 +2,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { provideRouter } from '@angular/router';
-import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
 import { ChecklistsComponent } from './checklists.component';
 
 describe('ChecklistsComponent', () => {
@@ -11,7 +10,7 @@ describe('ChecklistsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ChecklistsComponent, NoopAnimationsModule, SweetAlert2Module.forRoot()],
+      imports: [ChecklistsComponent, NoopAnimationsModule],
       providers: [provideRouter([{ path: 'checklists', component: ChecklistsComponent }])],
     }).compileComponents();
 

src/app/checklists/checklists.component.ts

@@ -39,12 +39,12 @@ import { GoogleDriveStorage } from '../../model/storage/gdrive';
 import { ChecklistTreeBarComponent } from './checklist-tree/bar/bar.component';
 import { ChecklistTreeComponent } from './checklist-tree/checklist-tree.component';
 import { ChecklistCommandBarComponent } from './command-bar/command-bar.component';
-import { ExportDialogComponent } from './export-dialog/export-dialog.component';
 import { ChecklistFileInfoComponent, FileInfoDialogData } from './file-info/file-info.component';
 import { ChecklistFilePickerComponent } from './file-picker/file-picker.component';
 import { ChecklistFileUploadComponent } from './file-upload/file-upload.component';
 import { HelpComponent } from './hotkeys/help/help.component';
 import { ChecklistItemsComponent } from './items-list/items-list.component';
+import { ExportDialogComponent } from './export-dialog/export-dialog.component';
 
 interface ParsedFragment {
   fileName?: string;
@@ -618,7 +618,7 @@ export class ChecklistsComponent implements OnInit, AfterViewInit, OnDestroy {
 
     await firstValueFrom(dialogRef.afterClosed())
       .then(async (updatedData?: FileInfoDialogData): Promise<unknown> => {
-        if (!updatedData || !this.selectedFile) throw new Error('Metadata change cancelled');
+        if (!updatedData || !this.selectedFile) return;
 
         const oldName = this.selectedFile.metadata!.name;
         const newName = updatedData.metadata.name;

src/app/checklists/command-bar/command-bar.component.html

@@ -1,17 +1,5 @@
 <div class="command-bar">
-  <button
-    mat-icon-button
-    matTooltip="New file"
-    aria-label="New file"
-    [swal]="{
-      titleText: 'New checklist file',
-      input: 'text',
-      inputLabel: 'File name',
-      inputPlaceholder: 'My checklist file',
-      inputValidator: isValidFileName,
-    }"
-    (confirm)="newFile.emit($event)"
-  >
+  <button mat-icon-button matTooltip="New file" aria-label="New file" (click)="onNewFile()">
     <mat-icon>note_add</mat-icon>
   </button>
   <button
@@ -54,16 +42,7 @@
     matTooltip="Delete file"
     aria-label="Delete file"
     [disabled]="fileIsOpen"
-    [swal]="{
-      titleText: 'Delete file?',
-      text: 'Are you sure you\'d like to delete this file and all checklists within?',
-      icon: 'warning',
-      showConfirmButton: true,
-      showCancelButton: true,
-      confirmButtonText: 'Delete!',
-      confirmButtonColor: '#d32f2f',
-    }"
-    (confirm)="deleteFile.emit(true)"
+    (click)="onDeleteFile()"
   >
     <mat-icon>delete</mat-icon>
   </button>

src/app/checklists/command-bar/command-bar.component.spec.ts

@@ -1,6 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
 import { ChecklistCommandBarComponent } from './command-bar.component';
 
 describe('ChecklistCommandBarComponent', () => {
@@ -9,7 +8,7 @@ describe('ChecklistCommandBarComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ChecklistCommandBarComponent, SweetAlert2Module.forRoot()],
+      imports: [ChecklistCommandBarComponent],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ChecklistCommandBarComponent);