Add next action links for doctype meta

ui/components/Form/Form.vue

@@ -3,6 +3,7 @@
         <form-actions
           v-if="shouldRenderForm"
           :doc="doc"
+          :links="links"
           @save="save"
           @submit="submit"
           @revert="revert"
@@ -37,8 +38,9 @@ export default {
       docLoaded: false,
       notFound: false,
       invalid: false,
-      invalidFields: []
-    }
+      invalidFields: [],
+      links: []
+    };
   },
   computed: {
     meta() {
@@ -67,9 +69,11 @@ export default {
       }
 
       this.docLoaded = true;
-    } catch(e) {
+    } catch (e) {
       this.notFound = true;
     }
+    this.setLinks();
+    this.doc.on('change', this.setLinks);
   },
   methods: {
     async save() {
@@ -84,13 +88,28 @@ export default {
         }
 
         this.$emit('save', this.doc);
-
+        
       } catch (e) {
         console.error(e);
         return;
       }
     },
 
+    setLinks() {
+      if (this.meta.links) {
+        let links = [];
+        for (let link of this.meta.links) {
+          if (link.condition(this)) {
+            link.handler = () => {
+              link.action(this);
+            };
+            links.push(link);
+          }
+        }
+        this.links = links;
+      }
+    },
+
     async submit() {
       this.doc.set('submitted', 1);
       await this.save();
@@ -105,7 +124,9 @@ export default {
       if (!isValid && !this.invalidFields.includes(fieldname)) {
         this.invalidFields.push(fieldname);
       } else if (isValid) {
-        this.invalidFields = this.invalidFields.filter(invalidField => invalidField !== fieldname)
+        this.invalidFields = this.invalidFields.filter(
+          invalidField => invalidField !== fieldname
+        );
       }
     },
 
@@ -113,7 +134,7 @@ export default {
       const form = this.$el.querySelector('form');
       let validity = form.checkValidity();
       this.invalid = !validity;
-    },
+    }
   }
 };
 </script>

ui/components/Form/FormActions.vue

@@ -1,16 +1,23 @@
 <template>
   <div class="frappe-form-actions d-flex justify-content-between align-items-center p-3 border-bottom">
     <h5 class="m-0">{{ title }}</h5>
-    <f-button primary v-if="isDirty" @click="$emit('save')">{{ _('Save') }}</f-button>
-    <f-button primary v-if="showSubmit" @click="$emit('submit')">{{ _('Submit') }}</f-button>
-    <f-button secondary v-if="showRevert" @click="$emit('revert')">{{ _('Revert') }}</f-button>
+    <div class="d-flex">
+      <f-button primary v-if="isDirty" @click="$emit('save')">{{ _('Save') }}</f-button>
+      <f-button primary v-if="showSubmit" @click="$emit('submit')">{{ _('Submit') }}</f-button>
+      <f-button secondary v-if="showRevert" @click="$emit('revert')">{{ _('Revert') }}</f-button>
+      <dropdown v-if="links.length" :label="'Next Action'" :options="links"></dropdown>
+    </div>
   </div>
 </template>
 <script>
 import frappe from 'frappejs';
+import Dropdown from '../Dropdown';
 
 export default {
-  props: ['doc'],
+  props: ['doc', 'links'],
+  components: {
+    Dropdown
+  },
   data() {
     return {
       isDirty: false,