From ea441c240be994bf5c6b126b70be63bf7eabd5fa Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Thu, 12 Jul 2018 13:17:56 +0530
Subject: [PATCH] Form

- Add Submit Buttons
- Disable inputs in submitted form
- Simplify FormLayout template
---
 ui/components/Form/Form.vue              | 12 ++++
 ui/components/Form/FormActions.vue       | 25 ++++++-
 ui/components/Form/FormLayout.vue        | 31 ++++----
 ui/components/ModelTable.vue             | 11 ++-
 ui/components/controls/Base.vue          |  5 +-
 ui/components/controls/FrappeControl.vue | 90 ++++++++++++++----------
 ui/components/controls/Table.vue         |  1 +
 ui/components/controls/Text.vue          |  3 +-
 8 files changed, 114 insertions(+), 64 deletions(-)

diff --git a/ui/components/Form/Form.vue b/ui/components/Form/Form.vue
index 3466ed13..210dd862 100644
--- a/ui/components/Form/Form.vue
+++ b/ui/components/Form/Form.vue
@@ -4,6 +4,8 @@
           v-if="shouldRenderForm"
           :doc="doc"
           @save="save"
+          @submit="submit"
+          @revert="revert"
         />
         <div class="p-3">
           <form-layout
@@ -89,6 +91,16 @@ export default {
       }
     },
 
+    async submit() {
+      this.doc.set('submitted', 1);
+      await this.save();
+    },
+
+    async revert() {
+      this.doc.set('submitted', 0);
+      await this.save();
+    },
+
     onValidate(fieldname, isValid) {
       if (!isValid && !this.invalidFields.includes(fieldname)) {
         this.invalidFields.push(fieldname);
diff --git a/ui/components/Form/FormActions.vue b/ui/components/Form/FormActions.vue
index b39b3cb9..4cab83d3 100644
--- a/ui/components/Form/FormActions.vue
+++ b/ui/components/Form/FormActions.vue
@@ -1,7 +1,9 @@
 <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 :disabled="!isDirty" @click="$emit('save')">{{ _('Save') }}</f-button>
+    <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>
 </template>
 <script>
@@ -11,13 +13,32 @@ export default {
   props: ['doc'],
   data() {
     return {
-      isDirty: false
+      isDirty: false,
+      showSubmit: false,
+      showRevert: false
     }
   },
   created() {
     this.doc.on('change', () => {
       this.isDirty = this.doc._dirty;
+      this.updateShowSubmittable();
     });
+    this.updateShowSubmittable();
+  },
+  methods: {
+    updateShowSubmittable() {
+      this.showSubmit =
+        this.meta.isSubmittable
+        && !this.isDirty
+        && !this.doc._notInserted
+        && this.doc.submitted === 0;
+
+      this.showRevert =
+        this.meta.isSubmittable
+        && !this.isDirty
+        && !this.doc._notInserted
+        && this.doc.submitted === 1;
+    }
   },
   computed: {
     meta() {
diff --git a/ui/components/Form/FormLayout.vue b/ui/components/Form/FormLayout.vue
index ca5703fa..59f82346 100644
--- a/ui/components/Form/FormLayout.vue
+++ b/ui/components/Form/FormLayout.vue
@@ -11,20 +11,11 @@
           :key="fieldname"
           :docfield="getDocField(fieldname)"
           :value="$data[fieldname]"
+          :doc="doc"
           @change="value => updateDoc(fieldname, value)"
         />
       </div>
     </div>
-    <div v-if="!layout">
-      <frappe-control
-        v-for="docfield in fields"
-        v-if="shouldRenderField(docfield.fieldname)"
-        :key="docfield.fieldname"
-        :docfield="docfield"
-        :value="$data[docfield.fieldname]"
-        @change="value => updateDoc(docfield.fieldname, value)"
-      />
-    </div>
   </form>
 </template>
 <script>
@@ -85,17 +76,21 @@ export default {
   },
   computed: {
     layoutConfig() {
-      if (!this.layout) return false;
+      let layout = this.layout;
 
-      let config = this.layout;
-
-      if (Array.isArray(config)) {
-        config = {
-          sections: config
-        }
+      if (!layout) {
+        const fields = this.fields.map(df => df.fieldname);
+        layout = [{
+          columns: [{ fields }]
+        }];
       }
 
-      return config;
+      if (Array.isArray(layout)) {
+        layout = {
+          sections: layout
+        }
+      }
+      return layout;
     }
   }
 };
diff --git a/ui/components/ModelTable.vue b/ui/components/ModelTable.vue
index 529b177d..885ca1ce 100644
--- a/ui/components/ModelTable.vue
+++ b/ui/components/ModelTable.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div ref="wrapper" class="datatable-wrapper"></div>
-    <div class="table-actions mt-1">
+    <div class="table-actions mt-1" v-if="!disabled">
       <f-button danger @click="removeCheckedRows" v-if="checkedRows.length">Remove</f-button>
       <f-button light @click="addRow" v-if="!checkedRows.length">Add Row</f-button>
     </div>
@@ -16,7 +16,7 @@ import FrappeControl from './controls/FrappeControl';
 import { convertFieldsToDatatableColumns } from 'frappejs/client/ui/utils';
 
 export default {
-  props: ['doctype', 'rows'],
+  props: ['doctype', 'rows', 'disabled'],
   data() {
     return {
       docs: this.getRowDocs(),
@@ -121,7 +121,12 @@ export default {
     },
     getColumns() {
       const fieldsToShow = this.meta.fields.filter(df => !df.hidden);
-      return convertFieldsToDatatableColumns(fieldsToShow);
+      const columns = convertFieldsToDatatableColumns(fieldsToShow);
+
+      if (this.disabled) {
+        columns.forEach(col => col.editable = false);
+      }
+      return columns;
     },
     addRow() {
       const doc = new Observable();
diff --git a/ui/components/controls/Base.vue b/ui/components/controls/Base.vue
index 5f7125fc..1c510ec7 100644
--- a/ui/components/controls/Base.vue
+++ b/ui/components/controls/Base.vue
@@ -12,7 +12,8 @@ export default {
         onlyInput: {
             type: Boolean,
             default: false
-        }
+        },
+        disabled: Boolean
     },
     computed: {
         id() {
@@ -71,7 +72,7 @@ export default {
                 placeholder: '',
                 value: this.value,
                 required: this.docfield.required,
-                disabled: this.docfield.disabled
+                disabled: this.disabled
             }
         },
         getInputListeners() {
diff --git a/ui/components/controls/FrappeControl.vue b/ui/components/controls/FrappeControl.vue
index 9f67e594..db48cd7c 100644
--- a/ui/components/controls/FrappeControl.vue
+++ b/ui/components/controls/FrappeControl.vue
@@ -1,11 +1,12 @@
 <template>
-    <component
-        :is="component"
-        :docfield="docfield"
-        :value="value"
-        :onlyInput="onlyInput"
-        @change="$emit('change', $event)"
-    />
+  <component
+    :is="component"
+    :docfield="docfield"
+    :value="value"
+    :onlyInput="onlyInput"
+    :disabled="isDisabled"
+    @change="$emit('change', $event)"
+  />
 </template>
 <script>
 import Base from './Base';
@@ -26,39 +27,52 @@ import Table from './Table';
 import Text from './Text';
 
 export default {
-    props: ['docfield', 'value', 'onlyInput'],
-    computed: {
-        component() {
-            if (this.docfield.template) {
-                // for controls with their own template
-                // create a vue object for it
-                return {
-                    extends: Base,
-                    render: null,
-                    template: this.docfield.template()
-                }
-            }
+  props: ['docfield', 'value', 'onlyInput', 'doc'],
+  computed: {
+    component() {
+      if (this.docfield.template) {
+        // for controls with their own template
+        // create a vue object for it
+        return {
+          extends: Base,
+          render: null,
+          template: this.docfield.template()
+        };
+      }
 
-            return {
-                Autocomplete,
-                Check,
-                Code,
-                Currency,
-                Data,
-                Date,
-                DynamicLink,
-                File,
-                Float,
-                Int,
-                Link,
-                Password,
-                Select,
-                Table,
-                Text,
-            }[this.docfield.fieldtype];
-        }
+      return {
+        Autocomplete,
+        Check,
+        Code,
+        Currency,
+        Data,
+        Date,
+        DynamicLink,
+        File,
+        Float,
+        Int,
+        Link,
+        Password,
+        Select,
+        Table,
+        Text
+      }[this.docfield.fieldtype];
+    },
+    isDisabled() {
+      let disabled = this.docfield.disabled;
+
+      if (this.doc && this.doc.submitted) {
+        disabled = true;
+      }
+
+      if (this.docfield.formula && this.docfield.fieldtype !== 'Table') {
+        disabled = true;
+      }
+
+      return Boolean(disabled);
     }
-}
+  }
+};
 </script>
 <style scoped>
 .form-group {
diff --git a/ui/components/controls/Table.vue b/ui/components/controls/Table.vue
index 7f18c2cd..80cf20dc 100644
--- a/ui/components/controls/Table.vue
+++ b/ui/components/controls/Table.vue
@@ -3,6 +3,7 @@
     <model-table
       :doctype="docfield.childtype"
       :rows="value"
+      :disabled="disabled"
       @update:rows="emitChange"
     />
   </div>
diff --git a/ui/components/controls/Text.vue b/ui/components/controls/Text.vue
index 46118ca0..57dbe59f 100644
--- a/ui/components/controls/Text.vue
+++ b/ui/components/controls/Text.vue
@@ -10,7 +10,8 @@ export default {
             return {
                 id: this.id,
                 required: this.docfield.required,
-                rows: 3
+                rows: 3,
+                disabled: this.disabled
             };
         },
         getDomProps() {