Form

- Add Submit Buttons
- Disable inputs in submitted form
- Simplify FormLayout template

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);

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() {

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;
     }
   }
 };

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();

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() {

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 {

ui/components/controls/Table.vue

@@ -3,6 +3,7 @@
     <model-table
       :doctype="docfield.childtype"
       :rows="value"
+      :disabled="disabled"
       @update:rows="emitChange"
     />
   </div>

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() {