Added a pop up to confirm to the user if they want to cancel the acti…

…on and a confirmation message when successfully canceled

apps/web-mzima-client/src/app/settings/general/ confirm-dialog.component.ts

@@ -0,0 +1,57 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-confirm-dialog',
+  template: `
+    <h2 mat-dialog-title style="font-size: 24px; font-weight: bold;">
+      The data has not been saved
+    </h2>
+    <div class="dialog-content" style="margin-bottom: 20px; font-size: 16px;">
+      This action cannot be undone. Please proceed with caution.
+    </div>
+    <div class="dialog-actions" style="display: flex; justify-content: flex-end;">
+      <button
+        class="dialog-button cancel-button"
+        style="color: #333; padding: 12px 24px;  width:20%; margin-right: 10px; border: 1px solid gray; border-radius: 3px; font-size: 14px; font-weight: semi-bold;"
+        (click)="onCancel()"
+      >
+        Cancel
+      </button>
+      <button
+        class="dialog-button confirm-button"
+        style="background-color: orange; color: #333; width:20%; padding: 12px 24px; margin-left: 10px; border: none; border-radius: 3px; font-size: 14px; font-weight: semi-bold;"
+        (click)="onConfirm()"
+      >
+        OK
+      </button>
+    </div>
+  `,
+})
+export class ConfirmDialogComponent {
+  constructor(
+    public dialogRef: MatDialogRef<ConfirmDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData,
+  ) {}
+
+  get title(): string {
+    return this.data.title || 'Confirmation';
+  }
+
+  get message(): string {
+    return this.data.message || 'Are you sure you want to discard the changes?';
+  }
+
+  onCancel(): void {
+    this.dialogRef.close(false);
+  }
+
+  onConfirm(): void {
+    this.dialogRef.close(true);
+  }
+}
+
+export interface ConfirmDialogData {
+  title?: string;
+  message?: string;
+}

apps/web-mzima-client/src/app/settings/general/general.component.ts

@@ -11,6 +11,9 @@ import { LoaderService } from '../../core/services/loader.service';
 import { LanguageService } from '../../core/services/language.service';
 import { ConfirmModalService } from '../../core/services/confirm-modal.service';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { MatDialog } from '@angular/material/dialog';
+import { ConfirmDialogComponent, ConfirmDialogData } from './ confirm-dialog.component';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @UntilDestroy()
 @Component({
@@ -19,6 +22,9 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
   styleUrls: ['./general.component.scss'],
 })
 export class GeneralComponent implements OnInit {
+  openConfirmModal() {
+    throw new Error('Method not implemented.');
+  }
   @ViewChild('mapSettings') mapSettings: SettingsMapComponent;
   public isDesktop$: Observable<boolean>;
   public generalForm: FormGroup;
@@ -43,6 +49,8 @@ export class GeneralComponent implements OnInit {
     private clipboard: Clipboard,
     private breakpointService: BreakpointService,
     private notificationService: NotificationService,
+    private dialog: MatDialog,
+    private snackBar: MatSnackBar,
   ) {
     this.isDesktop$ = this.breakpointService.isDesktop$.pipe(untilDestroyed(this));
     this.generalForm = this.formBuilder.group({
@@ -166,14 +174,30 @@ export class GeneralComponent implements OnInit {
     value === '0' ? (value = parseFloat(value)) : value; // Better fix could be to fix zero being returned as string from the backend
     return Number.isInteger(value) && value >= this.minObfuscation && value <= this.maxObfuscation;
   }
-  clearForm() {
-    this.generalForm.get('name')?.setValue('');
-    this.generalForm.get('description')?.setValue('');
-    this.generalForm.get('email')?.setValue('');
-    this.generalForm.get('language')?.setValue('en');
-    this.generalForm.get('private')?.setValue(false);
-    this.generalForm.get('disable_registration')?.setValue(false);
-    this.uploadedFile = undefined;
-    this.siteConfig.image_header = '';
+
+  clearForm(): void {
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      data: {
+        title: 'Confirmation',
+        message: 'Are you sure you want to discard the changes?',
+      } as ConfirmDialogData,
+    });
+
+    dialogRef.afterClosed().subscribe((confirmed: boolean) => {
+      if (confirmed) {
+        this.generalForm.get('name')?.setValue('');
+        this.generalForm.get('description')?.setValue('');
+        this.generalForm.get('email')?.setValue('');
+        this.generalForm.get('language')?.setValue('en');
+        this.generalForm.get('private')?.setValue(false);
+        this.generalForm.get('disable_registration')?.setValue(false);
+        this.uploadedFile = undefined;
+        this.siteConfig.image_header = '';
+
+        this.snackBar.open('Changes successfully discarded', 'Close', {
+          duration: 3000,
+        });
+      }
+    });
   }
 }

apps/web-mzima-client/src/app/settings/general/general.module.ts

@@ -15,6 +15,7 @@ import { SettingsModule } from '../settings.module';
 import { GeneralRoutingModule } from './general-routing.module';
 import { GeneralComponent } from './general.component';
 import { SettingsMapComponent } from './settings-map/settings-map.component';
+import { MatDialogModule } from '@angular/material/dialog';
 
 @NgModule({
   declarations: [GeneralComponent, SettingsMapComponent],
@@ -34,6 +35,7 @@ import { SettingsMapComponent } from './settings-map/settings-map.component';
     FormsModule,
     MzimaUiModule,
     FilterVisibleLayersModule,
+    MatDialogModule,
   ],
 })
 export class GeneralModule {}

package.json

@@ -25,7 +25,7 @@
   "dependencies": {
     "@angular-material-components/datetime-picker": "^8.0.0",
     "@angular/animations": "~14.2.7",
-    "@angular/cdk": "^14.2.5",
+    "@angular/cdk": "^14.2.7",
     "@angular/common": "~14.2.7",
     "@angular/compiler": "~14.2.7",
     "@angular/core": "~14.2.7",