fix: Confirmation dialog before Invoice delete

src/pages/InvoiceForm.vue

@@ -171,6 +171,7 @@ import FormControl from '@/components/Controls/FormControl';
 import Row from '@/components/Row';
 import Dropdown from '@/components/Dropdown';
 import { openSettings } from '@/pages/Settings/utils';
+import { showMessageDialog } from '@/utils';
 
 export default {
   name: 'InvoiceForm',
@@ -190,8 +191,6 @@ export default {
   },
   data() {
     return {
-      meta: null,
-      itemsMeta: null,
       doc: null,
       partyDoc: null,
       printSettings: null,
@@ -199,6 +198,12 @@ export default {
     };
   },
   computed: {
+    meta() {
+      return frappe.getMeta(this.doctype);
+    },
+    itemsMeta() {
+      return frappe.getMeta(`${this.doctype}Item`);
+    },
     itemTableFields() {
       return this.itemsMeta.tableFields.map(fieldname =>
         this.itemsMeta.getField(fieldname)
@@ -227,11 +232,29 @@ export default {
           template: `<span class="text-red-700">{{ _('Delete') }}</span>`
         },
         condition: doc => !doc.isNew() && !doc.submitted,
+        action: () => {
+          showMessageDialog({
+            message: this._('Are you sure you want to delete {0} "{1}"?', [
+              this.doctype,
+              this.name
+            ]),
+            description: this._('This action is permanent'),
+            buttons: [
+              {
+                label: 'Delete',
                 action: () => {
                   this.doc.delete().then(() => {
                     this.routeToList();
                   });
                 }
+              },
+              {
+                label: 'Cancel',
+                action() {}
+              }
+            ]
+          });
+        }
       };
       let actions = [...(this.meta.actions || []), deleteAction]
         .filter(d => (d.condition ? d.condition(this.doc) : true))
@@ -247,10 +270,7 @@ export default {
     }
   },
   async mounted() {
-    this.meta = frappe.getMeta(this.doctype);
-    this.itemsMeta = frappe.getMeta(`${this.doctype}Item`);
     this.doc = await frappe.getDoc(this.doctype, this.name);
-    window.doc = this.doc;
     this.doc.on('change', ({ changed }) => {
       if (changed === this.partyField.fieldname) {
         this.fetchPartyDoc();

src/utils.js

@@ -38,3 +38,21 @@ export function loadExistingDatabase() {
     );
   });
 }
+
+export function showMessageDialog({ message, description, buttons }) {
+  let buttonLabels = buttons.map(a => a.label);
+  remote.dialog.showMessageBox(
+    remote.getCurrentWindow(),
+    {
+      message,
+      detail: description,
+      buttons: buttonLabels
+    },
+    response => {
+      let button = buttons[response];
+      if (button && button.action) {
+        button.action();
+      }
+    }
+  );
+}