feat: QuickEditForm

models/doctype/Item/Item.js

@@ -17,14 +17,14 @@ module.exports = {
     },
     {
       fieldname: 'unit',
-      label: 'Unit',
+      label: 'Unit Type',
       fieldtype: 'Select',
       default: 'No',
       options: ['No', 'Kg', 'Gram', 'Hour', 'Day']
     },
     {
       fieldname: 'incomeAccount',
-      label: 'Income Account',
+      label: 'Income',
       fieldtype: 'Link',
       target: 'Account',
       required: 1,
@@ -37,7 +37,7 @@ module.exports = {
     },
     {
       fieldname: 'expenseAccount',
-      label: 'Expense Account',
+      label: 'Expense',
       fieldtype: 'Link',
       target: 'Account',
       required: 1,
@@ -67,6 +67,13 @@ module.exports = {
       fieldtype: 'Currency'
     }
   ],
+  quickEditFields: [
+    'unit',
+    'incomeAccount',
+    'expenseAccount',
+    'tax',
+    'description'
+  ],
   layout: [
     // section 1
     {

src/components/Button.vue

@@ -1,10 +1,25 @@
 <template>
-  <button class="text-white text-sm px-4 py-2 focus:outline-none rounded-lg">
+  <button class="text-sm px-4 py-2 focus:outline-none rounded-lg" :style="style">
     <slot></slot>
   </button>
 </template>
-<style scoped>
-button {
-  background-image: linear-gradient(180deg, #4AC3F8 0%, #2490EF 100%);
+<script>
+export default {
+  name: 'Button',
+  props: {
+    type: {
+      type: String,
+      default: 'secondary'
+    }
+  },
+  computed: {
+    style() {
+      return {
+        'background-image': this.type === 'primary'
+          ? 'linear-gradient(180deg, #4AC3F8 0%, #2490EF 100%)'
+          : 'linear-gradient(180deg, #FFFFFF 0%, #F4F4F6 100%)'
+      }
+    }
+  }
 }
-</style>
+</script>

src/components/Icons/X.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.2.8L.8 7.2m6.4 0L.8.8"
+      fill="none"
+      fill-rule="evenodd"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

src/components/PageHeader.vue

@@ -2,7 +2,7 @@
   <div class="mt-4 px-8 flex justify-between">
     <h1 class="text-xl font-bold" v-if="title">{{ title }}</h1>
     <div class="flex">
-      <Button>
+      <Button type="primary">
         <Add class="w-3 h-3 stroke-current text-white" />
       </Button>
       <SearchBar class="ml-2" />

src/pages/Desk.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="flex">
     <Sidebar class="w-56" />
-    <div class="flex-1 overflow-y-hidden">
-      <router-view :key="$route.fullPath" />
+    <div class="flex flex-1 overflow-y-hidden">
+      <router-view class="flex-1" :key="$route.fullPath" />
     </div>
   </div>
 </template>
@@ -15,16 +15,3 @@ export default {
   }
 };
 </script>
-<style>
-.page-container {
-  height: 100vh;
-  max-height: 100vh;
-  width: 100%;
-  padding-left: 208px;
-  overflow-x: hidden;
-}
-.sidebar {
-  position: fixed;
-  z-index: 20;
-}
-</style>

src/pages/ListView/List.vue

@@ -75,7 +75,8 @@ export default {
       await this.updateData();
     },
     openForm(name) {
-      this.$router.push(`/edit/${this.doctype}/${name}`);
+      this.$router.push(`/list/${this.doctype}/${name}`);
+      // this.$router.push(`/edit/${this.doctype}/${name}`);
     },
     async updateData(filters) {
       if (!filters) filters = this.getFilters();

src/pages/ListView/ListRow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="list-row border-b" :style="style">
+  <div class="grid border-b" :style="style">
     <slot></slot>
   </div>
 </template>
@@ -21,8 +21,3 @@ export default {
   }
 }
 </script>
-<style>
-.list-row {
-  display: grid;
-}
-</style>

src/pages/ListView/index.vue

@@ -1,8 +1,13 @@
 <template>
-  <div class="flex flex-col">
-    <PageHeader :title="title" />
-    <div class="flex-1">
-      <List :listConfig="listConfig" :filters="filters" />
+  <div class="flex">
+    <div class="flex flex-col flex-1">
+      <PageHeader :title="title" />
+      <div class="flex-1">
+        <List :listConfig="listConfig" :filters="filters" />
+      </div>
+    </div>
+    <div class="flex">
+      <router-view class="w-64 flex-1" />
     </div>
   </div>
 </template>

src/pages/QuickEditForm/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="border-l h-full">
+    <div class="flex justify-end px-4 pt-4">
+      <Button>
+        <XIcon class="w-3 h-3 stroke-current text-gray-700" />
+      </Button>
+    </div>
+    <div class="px-4 pt-2 pb-4 border-b">
+      <h2 class="font-medium">{{ title }}</h2>
+    </div>
+    <div class="text-xs">
+      <div
+        class="grid border-b px-4 py-3"
+        style="grid-template-columns: 1fr 2fr"
+        v-for="df in fields"
+        :key="df.fieldname"
+      >
+        <div class="text-gray-600">{{ df.label }}</div>
+        <div class="text-gray-900">{{ doc[df.fieldname] }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import frappe from 'frappejs';
+import Button from '@/components/Button';
+import XIcon from '@/components/Icons/X';
+
+export default {
+  name: 'QuickEditForm',
+  props: ['doctype', 'name'],
+  components: {
+    Button,
+    XIcon
+  },
+  data() {
+    return {
+      title: '',
+      doc: {},
+      fields: []
+    };
+  },
+  async mounted() {
+    let meta = frappe.getMeta(this.doctype);
+    this.doc = await frappe.getDoc(this.doctype, this.name);
+    this.title = this.doc[meta.titleField];
+    this.fields = meta
+      .getQuickEditFields()
+      .map(fieldname => meta.getField(fieldname));
+  }
+};
+</script>

src/router/index.js

@@ -5,6 +5,7 @@ import ListView from '../pages/ListView';
 import Dashboard from '../pages/Dashboard';
 import FormView from '../pages/FormView/FormView';
 import PrintView from '../pages/PrintView';
+import QuickEditForm from '../pages/QuickEditForm';
 
 import Report from '../pages/Report';
 import reportViewConfig from '../../reports/view';
@@ -35,7 +36,20 @@ const routes = [
         listName,
         filters: route.query
       };
-    }
+    },
+    children: [
+      {
+        path: ':name',
+        component: QuickEditForm,
+        props: route => {
+          const { listName, name } = route.params;
+          return {
+            doctype: listName,
+            name
+          };
+        }
+      }
+    ]
   },
   {
     path: '/edit/:doctype/:name',
@@ -92,6 +106,6 @@ const routes = [
 ];
 
 let router = new Router({ routes });
-router.replace('/list/SalesInvoice');
+router.replace('/list/Item');
 
 export default router;

src/styles/index.css

@@ -22,3 +22,7 @@
 .window-drag {
   -webkit-app-region: drag;
 }
+
+.grid {
+  display: grid;
+}