incr: add RowEditForm

- simplify QuickEditForm markdown

src/components/TwoColumnForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-sm border-t">
+  <div class="text-sm">
     <template v-for="df in formFields">
       <!-- Table Field Form (Eg: PaymentFor) -->
       <Table

src/pages/CommonForm/CommonForm.vue

@@ -70,7 +70,7 @@
       <div v-if="hasDoc" class="overflow-auto custom-scroll">
         <CommonFormSection
           v-for="([name, fields], idx) in activeGroup.entries()"
-          @editrow="(doc: Doc) => toggleQuickEditDoc(doc)"
+          @editrow="(doc: Doc) => showRowEditForm(doc)"
           :key="name + idx"
           ref="section"
           class="p-4"
@@ -120,30 +120,44 @@
       </div>
     </template>
     <template #quickedit>
-      <Transition name="quickedit"> </Transition>
       <Transition name="quickedit">
         <LinkedEntries
-          v-if="showLinks && !hasQeDoc"
+          v-if="showLinks && canShowLinks"
           :doc="doc"
           @close="showLinks = false"
         />
       </Transition>
+      <Transition name="quickedit">
+        <RowEditForm
+          v-if="row && !showLinks"
+          :doc="doc"
+          :fieldname="row.fieldname"
+          :index="row.index"
+          @previous="(i:number) => row!.index = i"
+          @next="(i:number) => row!.index = i"
+          @close="() => (row = null)"
+        />
+      </Transition>
     </template>
   </FormContainer>
 </template>
 <script lang="ts">
 import { DocValue } from 'fyo/core/types';
 import { Doc } from 'fyo/model/doc';
+import { DEFAULT_CURRENCY } from 'fyo/utils/consts';
 import { ValidationError } from 'fyo/utils/errors';
 import { getDocStatus } from 'models/helpers';
 import { ModelNameEnum } from 'models/types';
 import { Field, Schema } from 'schemas/types';
 import Button from 'src/components/Button.vue';
+import Barcode from 'src/components/Controls/Barcode.vue';
+import ExchangeRate from 'src/components/Controls/ExchangeRate.vue';
 import DropdownWithActions from 'src/components/DropdownWithActions.vue';
 import FormContainer from 'src/components/FormContainer.vue';
 import FormHeader from 'src/components/FormHeader.vue';
 import StatusBadge from 'src/components/StatusBadge.vue';
 import { getErrorMessage } from 'src/utils';
+import { shortcutsKey } from 'src/utils/injectionKeys';
 import { docsPathMap } from 'src/utils/misc';
 import { docsPathRef } from 'src/utils/refs';
 import { ActionGroup, DocRef, UIGroupedFields } from 'src/utils/types';
@@ -156,17 +170,11 @@ import {
   isPrintable,
   routeTo,
 } from 'src/utils/ui';
-import { computed, defineComponent, nextTick } from 'vue';
-import QuickEditForm from '../QuickEditForm.vue';
-import CommonFormSection from './CommonFormSection.vue';
-import { inject } from 'vue';
-import { shortcutsKey } from 'src/utils/injectionKeys';
-import { ref } from 'vue';
 import { useDocShortcuts } from 'src/utils/vueUtils';
-import Barcode from 'src/components/Controls/Barcode.vue';
+import { computed, defineComponent, inject, nextTick, ref } from 'vue';
-import { DEFAULT_CURRENCY } from 'fyo/utils/consts';
+import CommonFormSection from './CommonFormSection.vue';
-import ExchangeRate from 'src/components/Controls/ExchangeRate.vue';
 import LinkedEntries from './LinkedEntries.vue';
+import RowEditForm from './RowEditForm.vue';
 
 export default defineComponent({
   props: {
@@ -198,16 +206,16 @@ export default defineComponent({
       errors: {},
       activeTab: this.t`Default`,
       groupedFields: null,
-      quickEditDoc: null,
       isPrintable: false,
       showLinks: false,
+      row: null,
     } as {
       errors: Record<string, string>;
       activeTab: string;
       groupedFields: null | UIGroupedFields;
-      quickEditDoc: null | Doc;
       isPrintable: boolean;
       showLinks: boolean;
+      row: null | { index: number; fieldname: string };
     };
   },
   async mounted() {
@@ -243,6 +251,7 @@ export default defineComponent({
   deactivated(): void {
     docsPathRef.value = '';
     this.showLinks = false;
+    this.row = null;
   },
   computed: {
     canShowBarcode(): boolean {
@@ -292,7 +301,7 @@ export default defineComponent({
       return !this.doc.isCancelled && !this.doc.dirty && this.isPrintable;
     },
     canShowLinks(): boolean {
-      if (!this.hasDoc || this.hasQeDoc) {
+      if (!this.hasDoc) {
         return false;
       }
 
@@ -305,9 +314,6 @@ export default defineComponent({
     hasDoc(): boolean {
       return this.docOrNull instanceof Doc;
     },
-    hasQeDoc(): boolean {
-      return this.quickEditDoc instanceof Doc;
-    },
     status(): string {
       if (!this.hasDoc) {
         return '';
@@ -324,15 +330,6 @@ export default defineComponent({
       }
       return doc;
     },
-    qeDoc(): Doc {
-      const doc = this.quickEditDoc as Doc | null;
-      if (!doc) {
-        throw new ValidationError(
-          this.t`Doc ${this.schema.label} ${this.name} not set`
-        );
-      }
-      return doc;
-    },
     title(): string {
       if (this.schema.isSubmittable && this.docOrNull?.notInserted) {
         return this.t`New Entry`;
@@ -402,18 +399,18 @@ export default defineComponent({
         this.name
       );
     },
-    async toggleQuickEditDoc(doc: Doc | null) {
+    async showRowEditForm(doc: Doc) {
-      if (this.quickEditDoc && doc) {
+      if (this.showLinks) {
-        this.quickEditDoc = null;
-        await nextTick();
-      }
-
-      if (doc && this.showLinks) {
         this.showLinks = false;
         await nextTick();
       }
 
-      this.quickEditDoc = doc;
+      const index = doc.idx;
+      const fieldname = doc.parentFieldname;
+
+      if (typeof index === 'number' && typeof fieldname === 'string') {
+        this.row = { index, fieldname };
+      }
     },
     async onValueChange(field: Field, value: DocValue) {
       const { fieldname } = field;
@@ -442,6 +439,7 @@ export default defineComponent({
     Barcode,
     ExchangeRate,
     LinkedEntries,
+    RowEditForm,
   },
 });
 </script>

src/pages/CommonForm/RowEditForm.vue

@@ -0,0 +1,113 @@
+<template>
+  <div
+    class="border-s h-full overflow-auto w-quick-edit bg-white custom-scroll"
+  >
+    <!-- Row Edit Tool bar -->
+    <div class="sticky top-0 border-b bg-white" style="z-index: 1">
+      <div class="flex items-center justify-between px-4 h-row-largest">
+        <!-- Close Button -->
+        <Button :icon="true" @click="$emit('close')">
+          <feather-icon name="x" class="w-4 h-4" />
+        </Button>
+
+        <!-- Actions, Badge and Status Change Buttons -->
+        <div class="flex items-stretch gap-2">
+          <Button
+            v-if="previous >= 0"
+            :icon="true"
+            @click="$emit('previous', previous)"
+          >
+            <feather-icon name="chevron-left" class="w-4 h-4" />
+          </Button>
+          <Button v-if="next >= 0" :icon="true" @click="$emit('next', next)">
+            <feather-icon name="chevron-right" class="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+      <FormHeader
+        class="border-t"
+        :form-title="t`Row ${index + 1}`"
+        :form-sub-title="fieldlabel"
+      />
+    </div>
+    <TwoColumnForm
+      class="w-full"
+      ref="form"
+      :doc="row"
+      :fields="fields"
+      :column-ratio="[1.1, 2]"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { Doc } from 'fyo/model/doc';
+import { ValueError } from 'fyo/utils/errors';
+import Button from 'src/components/Button.vue';
+import FormHeader from 'src/components/FormHeader.vue';
+import TwoColumnForm from 'src/components/TwoColumnForm.vue';
+import { shortcutsKey } from 'src/utils/injectionKeys';
+import { computed } from 'vue';
+import { inject } from 'vue';
+import { defineComponent } from 'vue';
+
+const COMPONENT_NAME = 'RowEditForm';
+
+export default defineComponent({
+  setup() {
+    return { shortcuts: inject(shortcutsKey) };
+  },
+  emits: ['next', 'previous', 'close'],
+  props: {
+    doc: { type: Doc, required: true },
+    index: { type: Number, required: true },
+    fieldname: { type: String, required: true },
+  },
+  provide() {
+    return {
+      doc: computed(() => this.row),
+    };
+  },
+  mounted() {
+    this.shortcuts?.set(COMPONENT_NAME, ['Escape'], () => this.$emit('close'));
+  },
+  unmounted() {
+    this.shortcuts?.delete(COMPONENT_NAME);
+  },
+  computed: {
+    fieldlabel() {
+      return (
+        this.fyo.getField(this.doc.schemaName, this.fieldname)?.label ?? ''
+      );
+    },
+    row() {
+      const rows = this.doc.get(this.fieldname);
+      if (Array.isArray(rows) && rows[this.index] instanceof Doc) {
+        return rows[this.index];
+      }
+
+      const label = `${this.doc.name}.${this.fieldname}[${this.index}]`;
+      throw new ValueError(this.t`Invalid value found for ${label}`);
+    },
+    fields() {
+      const fieldnames = this.row.schema.quickEditFields ?? [];
+      return fieldnames.map((f) => this.fyo.getField(this.row.schemaName, f));
+    },
+    previous(): number {
+      return this.index - 1;
+    },
+    next() {
+      const rows = this.doc.get(this.fieldname);
+      if (!Array.isArray(rows)) {
+        return -1;
+      }
+
+      if (rows.length - 1 === this.index) {
+        return -1;
+      }
+
+      return this.index + 1;
+    },
+  },
+  components: { Button, TwoColumnForm, FormHeader },
+});
+</script>

src/pages/QuickEditForm.vue

@@ -15,13 +15,12 @@
       "
       style="z-index: 1"
     >
-      <!-- Close Button and Status Text -->
+      <!-- Close Button  -->
       <Button :icon="true" @click="routeToPrevious">
         <feather-icon name="x" class="w-4 h-4" />
       </Button>
 
-      <!-- Actions, Badge and Status Change Buttons -->
+      <!-- Save & Submit Buttons -->
-      <div class="flex items-stretch gap-2">
       <Button
         :icon="true"
         @click="sync"
@@ -41,11 +40,10 @@
         {{ t`Submit` }}
       </Button>
     </div>
-    </div>
 
     <!-- Name and image -->
     <div
-      class="items-center"
+      class="items-center border-b"
       :class="imageField ? 'grid' : 'flex justify-center'"
       :style="{
         height: `calc(var(--h-row-mid) * ${!!imageField ? '2 + 1px' : '1'})`,