Form rendering based on Layout

- ListAndForm is now cached between list and form routes

models/doctype/Item/Item.js

@@ -65,7 +65,11 @@ module.exports = {
         },
 
         // section 2
-        { fields: [ "description" ] },
+        {
+            columns: [
+                { fields: [ "description" ] }
+            ]
+        },
 
         // section 3
         {

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <frappe-desk>
-      <router-view :key="$route.path" />
+      <router-view />
     </frappe-desk>
   </div>
 </template>

src/components/Form.vue

@@ -10,9 +10,10 @@
           v-if="shouldRenderForm"
           :doc="doc"
           :fields="meta.fields"
+          :layout="meta.layout"
           @field-change="updateDoc"
         />
-        <not-found v-else />
+        <not-found v-if="notFound" />
     </div>
   </keep-alive>
 </template>
@@ -40,7 +41,7 @@ export default {
       return frappe.getMeta(this.doctype);
     },
     shouldRenderForm() {
-      return this.name && this.doc && !this.notFound;
+      return this.name && this.doc;
     }
   },
   async created() {
@@ -58,14 +59,13 @@ export default {
         return;
       }
       try {
-        let oldName = this.doc.name;
         if (this.doc._notInserted) {
           await this.doc.insert();
         } else {
           await this.doc.update();
         }
-        // frappe.ui.showAlert({ message: frappe._('Saved'), color: 'green' });
+
-        if (oldName !== this.doc.name) {
+        if (this.doc.name !== this.$route.params.name) {
           this.$router.push(`/edit/${this.doctype}/${this.doc.name}`);
           return;
         }

src/components/ListAndForm.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="frappe-list-form row no-gutters">
         <div class="col-4 border-right">
-            <frappe-list :doctype="doctype" />
+            <frappe-list :doctype="doctype" :key="doctype" />
         </div>
         <div class="col-8">
-            <frappe-form v-if="name" :doctype="doctype" :name="name" />
+            <frappe-form v-if="name" :key="doctype + name" :doctype="doctype" :name="name" />
         </div>
     </div>
 </template>
@@ -13,20 +13,22 @@ import List from './List';
 import Form from './Form';
 
 export default {
-    data() {
-        return {
-            doctype: this.$route.params.doctype,
-            name: this.$route.params.name
-        }
-    },
     components: {
         FrappeList: List,
         FrappeForm: Form
+    },
+    computed: {
+        doctype() {
+            return this.$route.params.doctype;
+        },
+        name() {
+            return this.$route.params.name;
+        }
     }
 }
 </script>
 <style>
 .frappe-list-form {
-    min-height: calc(100vh - 57px);
+    min-height: calc(100vh - 4rem);
 }
 </style>