Add confirmation dialog to delete publications.
This commit is contained in:
@@ -0,0 +1,10 @@
|
||||
<h1>{{title}}</h1>
|
||||
<h2>{{description}}</h2>
|
||||
<footer>
|
||||
<button type="button" class="secondary" (click)="closeDialog()">
|
||||
No
|
||||
</button>
|
||||
<button type="button" (click)="closeAndValidate()">
|
||||
Yes
|
||||
</button>
|
||||
</footer>
|
||||
@@ -0,0 +1,39 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
button {
|
||||
padding: .8em 1.2em;
|
||||
border-radius: 10em;
|
||||
border: none;
|
||||
background-color: #3f51b5;
|
||||
color: white;
|
||||
transition: background-color .2s ease-in-out;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background-color: #5b6ed8;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: #3f51b5;
|
||||
background-color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: #f2f4ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { Component, inject, Input } from "@angular/core";
|
||||
import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
|
||||
|
||||
export interface ConfirmationDialogData {
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-confirmation-dialog',
|
||||
standalone: true,
|
||||
templateUrl: './confirmation-dialog.component.html',
|
||||
styleUrl: './confirmation-dialog.component.scss',
|
||||
imports: []
|
||||
})
|
||||
export class ConfirmationDialog {
|
||||
private readonly dialogRef = inject(MatDialogRef<ConfirmationDialog>);
|
||||
data: ConfirmationDialogData = inject(MAT_DIALOG_DATA);
|
||||
|
||||
get title(): string {
|
||||
return this.data.title;
|
||||
}
|
||||
|
||||
get description(): string {
|
||||
return this.data.description;
|
||||
}
|
||||
|
||||
closeAndValidate(): void {
|
||||
this.dialogRef.close(true);
|
||||
}
|
||||
|
||||
closeDialog(): void {
|
||||
this.dialogRef.close(false);
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,14 @@
|
||||
import { inject, Injectable, OnDestroy } from "@angular/core";
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
|
||||
import { MatSnackBar } from "@angular/material/snack-bar";
|
||||
import { MatDialog } from "@angular/material/dialog";
|
||||
import { BehaviorSubject, Observable, Subscription } from "rxjs";
|
||||
import { copy } from "../../core/utils/ObjectUtils";
|
||||
import { Publication } from "../../core/rest-services/publications/model/publication";
|
||||
import { Location } from "@angular/common";
|
||||
import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
|
||||
import { inject, Injectable, OnDestroy } from "@angular/core";
|
||||
import { MatDialog } from "@angular/material/dialog";
|
||||
import { MatSnackBar } from "@angular/material/snack-bar";
|
||||
import { ActivatedRoute } from "@angular/router";
|
||||
import { BehaviorSubject, Observable, Subscription } from "rxjs";
|
||||
import { Publication } from "../../core/rest-services/publications/model/publication";
|
||||
import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
|
||||
import { copy } from "../../core/utils/ObjectUtils";
|
||||
import { CodeBlockDialog } from "./code-block-dialog/code-block-dialog.component";
|
||||
import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
|
||||
|
||||
declare let Prism: any;
|
||||
|
||||
@@ -58,7 +58,6 @@ export class PublicationEditionService implements OnDestroy {
|
||||
private readonly activatedRoute = inject(ActivatedRoute);
|
||||
private readonly publicationRestService = inject(PublicationRestService);
|
||||
private readonly location = inject(Location);
|
||||
private readonly router = inject(Router);
|
||||
private readonly snackBar = inject(MatSnackBar);
|
||||
private readonly dialog = inject(MatDialog);
|
||||
|
||||
@@ -265,23 +264,6 @@ export class PublicationEditionService implements OnDestroy {
|
||||
this._save(state);
|
||||
}
|
||||
|
||||
save(): void {
|
||||
const state = this._state;
|
||||
|
||||
this.isSavingSubject.next(true);
|
||||
this.publicationRestService.update(state.publication)
|
||||
.then(() => {
|
||||
this.snackBar.open('Publication updated succesfully!', 'Close', { duration: 5000 });
|
||||
this.router.navigate(['/home']);
|
||||
})
|
||||
.catch(error => {
|
||||
const errorMessage = 'An error occured while saving publication modifications.';
|
||||
console.error(errorMessage, error);
|
||||
this.snackBar.open(errorMessage, 'Close', { duration: 5000 });
|
||||
})
|
||||
.finally(() => this.isSavingSubject.next(false));
|
||||
}
|
||||
|
||||
loadPreview(): void {
|
||||
const state = this._state;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user