Add form-actions in FormView

src/pages/FormView/index.vue

@@ -1,20 +1,30 @@
 <template>
   <div class="bg-light">
-    <page-header :title="name" />
+    <page-header :title="doctype" />
-    <div class="form-container col-8 bg-white mt-4 ml-auto mr-auto border px-4 py-3">
+    <div class="form-container col-8 bg-white mt-4 ml-auto mr-auto border p-5">
+      <form-actions
+        v-if="shouldRenderForm"
+        :doc="doc"
+        @save="save"
+        @submit="submit"
+        @revert="revert"
+        @print="print"
+        :links="links"
+      />
+      <hr class="mb-3">
       <form-layout
-        class="p-3"
         v-if="shouldRenderForm"
         :doc="doc"
         :fields="meta.fields"
         :layout="meta.layout"
-        :invalid="invalid"
+        :invalid="isFormInvalid"
       />
     </div>
   </div>
 </template>
 <script>
 import frappe from 'frappejs';
+import FormActions from 'frappejs/ui/components/Form/FormActions';
 import FormLayout from 'frappejs/ui/components/Form/FormLayout';
 import PageHeader from '@/components/PageHeader';
 
@@ -23,11 +33,15 @@ export default {
   props: ['doctype', 'name'],
   components: {
     PageHeader,
+    FormActions,
     FormLayout
   },
   data() {
     return {
-      doc: null
+      doc: null,
+      links: [],
+      isFormInvalid: false,
+      notFound: false
     }
   },
   computed: {
@@ -38,8 +52,83 @@ export default {
       return frappe.getMeta(this.doctype);
     }
   },
-  async mounted() {
+  async created() {
+    if (!this.name) return;
+    try {
       this.doc = await frappe.getDoc(this.doctype, this.name);
+
+      if (this.doc._notInserted && this.meta.fields.map(df => df.fieldname).includes('name')) {
+        // For a user editable name field,
+        // it should be unset since it is autogenerated
+        this.doc.set('name', '');
+      }
+
+      if (this.defaultValues) {
+        for (let fieldname in this.defaultValues) {
+          const value = this.defaultValues[fieldname];
+          this.doc.set(fieldname, value);
+        }
+      }
+    } catch (e) {
+      this.notFound = true;
+    }
+    this.setLinks();
+    this.doc.on('change', this.setLinks);
+  },
+  methods: {
+    async save() {
+      this.setValidity();
+      if (this.isFormInvalid) return;
+
+      try {
+        if (this.doc._notInserted) {
+          await this.doc.insert();
+        } else {
+          await this.doc.update();
+        }
+
+        this.$emit('save', this.doc);
+
+      } catch (e) {
+        console.error(e);
+        return;
+      }
+    },
+
+    async submit() {
+      this.doc.set('submitted', 1);
+      await this.save();
+    },
+
+    async revert() {
+      this.doc.set('submitted', 0);
+      await this.save();
+    },
+
+    print() {
+      this.$router.push(`/print/${this.doctype}/${this.name}`);
+    },
+
+    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;
+      }
+    },
+
+    setValidity() {
+      const form = this.$el.querySelector('form');
+      let validity = form.checkValidity();
+      this.isFormInvalid = !validity;
+    }
   }
 }
 </script>