Adding a confirmation before deletion

front/app/src/common/crud/card/card.component.html

@@ -2,11 +2,26 @@
   <form cForm [formGroup]="form" (ngSubmit)="onSubmit(model)">
     <span class="col col-form-label" *ngIf="formLoading$ || modelLoading$ | async">Loading...</span>
     <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
-    <button class="btn btn-success btn-lg" type="submit" [disabled]="!form.valid">
-      {{ this.isCreateForm() ? "Create" : "Update" }}
-    </button>
-    <button class="btn btn-danger btn-lg float-end" type="button" *ngIf="!this.isCreateForm()" (click)="onDelete()">
-      Delete
-    </button>
+    <div class="d-grid gap-2 d-md-flex">
+      <button class="btn btn-success btn-lg" type="submit"
+              [disabled]="!form.valid && (formLoading$ || modelLoading$ | async)">
+        {{ this.isCreateForm() ? "Create" : "Update" }}
+      </button>
+      <button class="btn btn-danger btn-lg" type="button" *ngIf="!this.isCreateForm()"
+              [disabled]="formLoading$ || modelLoading$ | async"
+              (click)="open(confirmDeleteModal)">
+        Delete
+      </button>
+      <ng-template #confirmDeleteModal let-modal>
+        <div class="modal-header">
+            <h4 class="modal-title" id="modal-basic-title">Are you sure you want to delete this {{ this.schema }}?</h4>
+            <button type="button" class="btn-close" aria-label="Cancel" (click)="modal.dismiss('Cancel Deletion')"></button>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-light" aria-label="Cancel" (click)="modal.dismiss('Cancel Deletion')">Cancel</button>
+            <button type="button" class="btn btn-danger" (click)="modal.close('Save click')">Delete</button>
+        </div>
+      </ng-template>
+    </div>
   </form>
 </div>

front/app/src/common/crud/card/card.component.ts

@@ -6,6 +6,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { CrudService } from '../crud.service'
 import {BehaviorSubject, NotFoundError} from "rxjs";
 import { CrudFormlyJsonschemaService } from "../crud-formly-jsonschema.service";
+import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 
 @Component({
   selector: 'crud-card',
@@ -44,6 +45,7 @@ export class CardComponent implements OnInit {
               private formlyJsonschema: CrudFormlyJsonschemaService,
               private router: Router,
               private route: ActivatedRoute,
+              private modalService: NgbModal,
   ) { }
 
     ngOnInit(): void {
@@ -99,7 +101,18 @@ export class CardComponent implements OnInit {
         });
     }
 
+    onDuplicate() {
+
+    }
+
   isCreateForm() {
     return this.resource_id === null;
   }
+
+  	open(content: any) {
+		this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then(
+			(result) => { this.onDelete() },
+			(reason) => {},
+		);
+	}
 }