Modal

- pass arguments in an object
- add primaryAction prop

ui/components/Modal/Modal.vue

@@ -10,10 +10,11 @@
           </button>
         </div>
         <div class="modal-body modal-height">
-          <component :is="component" v-bind="props" v-on="events"/>
+          <component ref="modalComponent" :is="component" v-bind="props" v-on="events"/>
         </div>
         <div class="modal-footer">
-          <f-button secondary @click="closeModal">{{ _('Close') }}</f-button>
+          <!-- <f-button secondary @click="closeModal">{{ _('Close') }}</f-button> -->
+          <f-button primary v-if="primaryAction" @click="onPrimaryAction">{{ primaryAction.label }}</f-button>
         </div>
       </div>
     </div>
@@ -26,6 +27,10 @@ export default {
       type: String,
       default: "Modal Title"
     },
+    primaryAction: {
+      type: Object,
+      default: null
+    },
     component: {
       type: Object
     },
@@ -39,6 +44,9 @@ export default {
   methods: {
     closeModal() {
       this.$emit('close-modal');
+    },
+    onPrimaryAction() {
+      this.primaryAction.handler(this.$refs.modalComponent);
     }
   }
 };

ui/components/Modal/ModalContainer.vue

@@ -3,7 +3,7 @@
     <modal
       :key="modal.id"
       v-for="modal in modals"
-      v-bind="modal"
+      v-bind="modal.modalProps"
       @close-modal="onModalClose(modal.id)"
     ></modal>
     <div class="modal-backdrop show" v-show="modals.length"></div>
@@ -35,13 +35,15 @@ export default {
     });
   },
   methods: {
-    add(component, props, events) {
+    add({ component, props = {}, events = {}, modalProps = {} }) {
       this.currentId++;
       this.modals.push({
         id: this.currentId,
-        component,
-        props,
-        events
+        modalProps: Object.assign({}, modalProps, {
+          component,
+          props,
+          events
+        })
       });
       return this.currentId;
     },
@@ -55,7 +57,7 @@ export default {
     onModalClose(id) {
       if (id) {
         const modal = this.modals.find(modal => modal.id === id);
-        modal.props.onClose && modal.props.onClose();
+        modal.modalProps.events.onClose && modal.modalProps.events.onClose();
       }
       this.removeModal(id);
     }

ui/plugins/formModal.js

@@ -1,3 +1,4 @@
+import frappe from 'frappejs';
 import Form from '../components/Form/Form';
 
 export default function installFormModal(Vue) {
@@ -7,11 +8,19 @@ export default function installFormModal(Vue) {
       $formModal() {
         const open = (doc, options = {}) => {
           const { defaultValues = null, onClose = null } = options;
-          this.$modal.show(Form, {
-            doctype: doc.doctype,
-            name: doc.name,
-            defaultValues,
-            onClose
+          this.$modal.show({
+            component: Form,
+            props: {
+              doctype: doc.doctype,
+              name: doc.name,
+              defaultValues,
+            },
+            events: {
+              onClose
+            },
+            modalProps: {
+              title: frappe._('Form Modal')
+            }
           });
         }