incr: two way bound quick edit for item rows

src/components/Controls/Table.vue

@@ -86,6 +86,7 @@ import TableRow from './TableRow.vue';
 
 export default {
   name: 'Table',
+  emits: ['editrow'],
   extends: Base,
   props: {
     value: { type: Array, default: () => [] },

src/components/Controls/TableRow.vue

@@ -45,12 +45,9 @@
       :padding="false"
       :background="false"
       @click="openRowQuickEdit"
+      v-if="canEditRow"
     >
-      <feather-icon
-        name="edit"
-        class="w-4 h-4 text-gray-600"
-        v-if="canEditRow"
-      />
+      <feather-icon name="edit" class="w-4 h-4 text-gray-600" />
     </Button>
 
     <!-- Error Display -->
@@ -66,7 +63,6 @@
 import { Doc } from 'fyo/model/doc';
 import Row from 'src/components/Row.vue';
 import { getErrorMessage } from 'src/utils';
-import { openQuickEdit } from 'src/utils/ui';
 import Button from '../Button.vue';
 import FormControl from './FormControl.vue';
 
@@ -120,10 +116,7 @@ export default {
         return;
       }
 
-      openQuickEdit({
-        schemaName: this.row.schemaName,
-        name: this.row.name,
-      });
+      this.$parent.$emit('editrow', this.row);
     },
   },
 };

src/components/FormContainer.vue

@@ -1,26 +1,31 @@
 <template>
-  <div class="flex flex-col bg-gray-25">
-    <!-- Page Header (Title, Buttons, etc) -->
-    <PageHeader :title="title" :border="false">
-      <slot name="header" />
-    </PageHeader>
+  <div class="flex bg-gray-25">
+    <div class="flex flex-1 flex-col">
+      <!-- Page Header (Title, Buttons, etc) -->
+      <PageHeader :title="title" :border="false">
+        <slot name="header" />
+      </PageHeader>
 
-    <!-- Invoice Form -->
-    <div
-      class="
-        border
-        rounded-lg
-        shadow-lg
-        flex flex-col
-        self-center
-        w-form
-        h-full
-        mb-4
-        bg-white
-      "
-    >
-      <slot name="body" />
+      <!-- Invoice Form -->
+      <div
+        class="
+          border
+          rounded-lg
+          shadow-lg
+          flex flex-col
+          self-center
+          w-form
+          h-full
+          mb-4
+          bg-white
+        "
+      >
+        <slot name="body" />
+      </div>
     </div>
+
+    <!-- Invoice Quick Edit -->
+    <slot name="quickedit" />
   </div>
 </template>
 <script>

src/pages/InvoiceForm.vue

@@ -101,6 +101,7 @@
           :showHeader="true"
           :max-rows-before-overflow="4"
           @change="(value) => doc.set('items', value)"
+          @editrow="(r) => (row = r)"
           :read-only="doc?.submitted"
         />
       </div>
@@ -175,6 +176,17 @@
         </div>
       </div>
     </template>
+
+    <template #quickedit v-if="row">
+      <QuickEditForm
+        class="w-80"
+        :name="row.name"
+        :source-doc="row"
+        :schema-name="row.schemaName"
+        :route-back="false"
+        @close="row = null"
+      />
+    </template>
   </FormContainer>
 </template>
 <script>
@@ -190,13 +202,13 @@ import StatusBadge from 'src/components/StatusBadge.vue';
 import { fyo } from 'src/initFyo';
 import { docsPathMap } from 'src/utils/misc';
 import {
-  docsPath,
-  getActionsForDocument,
-  openSettings,
-  routeTo,
-  showMessageDialog,
+docsPath,
+getActionsForDocument,
+routeTo,
+showMessageDialog
 } from 'src/utils/ui';
 import { handleErrorWithDialog } from '../errorHandling';
+import QuickEditForm from './QuickEditForm.vue';
 
 export default {
   name: 'InvoiceForm',
@@ -208,6 +220,7 @@ export default {
     DropdownWithActions,
     Table,
     FormContainer,
+    QuickEditForm,
   },
   provide() {
     return {
@@ -220,6 +233,7 @@ export default {
     return {
       chstatus: false,
       doc: null,
+      row: null,
       color: null,
       printSettings: null,
       companyName: null,
@@ -309,9 +323,6 @@ export default {
     async handleError(e) {
       await handleErrorWithDialog(e, this.doc);
     },
-    openInvoiceSettings() {
-      openSettings('Invoice');
-    },
     formattedValue(fieldname, doc) {
       if (!doc) {
         doc = this.doc;

src/pages/QuickEditForm.vue

@@ -19,9 +19,9 @@
       </div>
 
       <!-- Actions, Badge and Status Change Buttons -->
-      <div class="flex items-stretch gap-2">
-        <StatusBadge :status="status" v-if="!isChild" />
-        <DropdownWithActions :actions="actions" v-if="!isChild" />
+      <div class="flex items-stretch gap-2" v-if="!isChild">
+        <StatusBadge :status="status" />
+        <DropdownWithActions :actions="actions" />
         <Button
           :icon="true"
           @click="sync"
@@ -92,6 +92,7 @@
 <script>
 import { computed } from '@vue/reactivity';
 import { t } from 'fyo';
+import { Doc } from 'fyo/model/doc';
 import { getDocStatus } from 'models/helpers';
 import Button from 'src/components/Button.vue';
 import FormControl from 'src/components/Controls/FormControl.vue';
@@ -109,6 +110,8 @@ export default {
     schemaName: String,
     defaults: String,
     white: { type: Boolean, default: false },
+    sourceDoc: { type: Doc, default: null },
+    routeBack: { type: Boolean, default: true },
     hideFields: { type: Array, default: () => [] },
     showFields: { type: Array, default: () => [] },
   },
@@ -119,6 +122,7 @@ export default {
     TwoColumnForm,
     DropdownWithActions,
   },
+  emits: ['close'],
   provide() {
     return {
       schemaName: this.schemaName,
@@ -233,6 +237,10 @@ export default {
       }, 300);
     },
     async fetchDoc() {
+      if (this.sourceDoc) {
+        return (this.doc = this.sourceDoc);
+      }
+
       if (!this.schemaName) {
         this.$router.back();
       }
@@ -289,7 +297,12 @@ export default {
       if (this.doc.dirty && !this.doc.notInserted) {
         this.doc.load();
       }
-      this.$router.back();
+
+      if (this.routeBack) {
+        this.$router.back();
+      } else {
+        this.$emit('close');
+      }
     },
     setTitleSize() {
       if (!this.$refs.titleControl) {