Skip to content

Commit

Permalink
Added a pop up to confirm to the user if they want to cancel the acti…
Browse files Browse the repository at this point in the history
…on and a confirmation message when successfully canceled
  • Loading branch information
kivuvarosekivuvan committed Mar 11, 2024
1 parent c60b34c commit eb45ebe
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 11 deletions.
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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;
Expand All @@ -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({
Expand Down Expand Up @@ -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,
});
}
});
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand All @@ -34,6 +35,7 @@ import { SettingsMapComponent } from './settings-map/settings-map.component';
FormsModule,
MzimaUiModule,
FilterVisibleLayersModule,
MatDialogModule,
],
})
export class GeneralModule {}
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit eb45ebe

Please sign in to comment.