incr: use legible temp name

- fix table borders
- enable edit row

fyo/core/docHandler.ts

@@ -14,9 +14,11 @@ export class DocHandler {
   singles: SinglesMap = {};
   docs: Observable<DocMap | undefined> = new Observable();
   observer: Observable<never> = new Observable();
+  #temporaryNameCounters: Record<string, number>;
 
   constructor(fyo: Fyo) {
     this.fyo = fyo;
+    this.#temporaryNameCounters = {};
   }
 
   init() {
@@ -97,7 +99,7 @@ export class DocHandler {
     }
 
     const doc = new Model!(schema, data, this.fyo, isRawValueMap);
-    doc.name ??= getRandomString();
+    doc.name ??= this.#getTemporaryName(schema);
     if (cacheDoc) {
       this.#addToCache(doc);
     }
@@ -105,6 +107,19 @@ export class DocHandler {
     return doc;
   }
 
+  #getTemporaryName(schema: Schema): string {
+    if (schema.naming === 'random') {
+      return getRandomString();
+    }
+
+    this.#temporaryNameCounters[schema.name] ??= 1;
+
+    const idx = this.#temporaryNameCounters[schema.name];
+    this.#temporaryNameCounters[schema.name] = idx + 1;
+
+    return this.fyo.t`New ${schema.label ?? schema.name} - Temp No. ${idx}`;
+  }
+
   /**
    * Cache operations
    */

schemas/app/Party.json

@@ -46,7 +46,8 @@
     {
       "fieldname": "outstandingAmount",
       "label": "Outstanding Amount",
-      "fieldtype": "Currency"
+      "fieldtype": "Currency",
+      "hidden": true
     },
     {
       "fieldname": "currency",

src/components/Controls/Color.vue

@@ -28,7 +28,7 @@
       <template #content>
         <div class="text-sm p-2 text-center">
           <div>
-            <Row class="border-none" :column-count="5" gap="0.5rem">
+            <Row :column-count="5" gap="0.5rem">
               <div
                 v-for="color in colors"
                 :key="color.value"

src/components/Controls/Table.vue

@@ -33,7 +33,8 @@
         v-if="value"
       >
         <TableRow
-          v-for="row in value"
+          v-for="(row, idx) of value"
+          :class="idx < value.length - 1 ? 'border-b' : ''"
           ref="table-row"
           :key="row.name"
           v-bind="{ row, tableFields, size, ratio, isNumeric }"
@@ -49,13 +50,13 @@
         class="
           text-gray-500
           cursor-pointer
-          border-transparent
           px-2
           w-full
           h-row-mid
           flex
           items-center
         "
+        :class="value.length > 0 ? 'border-t' : ''"
         v-if="!isReadOnly"
         @click="addRow"
       >

src/components/Controls/TableRow.vue

@@ -4,7 +4,6 @@
     class="
       w-full
       px-2
-      border-b
       hover:bg-gray-25
       group
       flex

src/components/Row.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-grid border-b" :style="style" v-bind="$attrs">
+  <div class="inline-grid" :style="style" v-bind="$attrs">
     <slot></slot>
   </div>
 </template>

src/pages/CommonForm/CommonForm.vue

@@ -35,6 +35,7 @@
       <div v-if="hasDoc" class="overflow-auto custom-scroll">
         <CommonFormSection
           v-for="([name, fields], idx) in activeGroup.entries()"
+          @editrow="(doc: Doc) => toggleQuickEditDoc(doc)"
           :key="name + idx"
           ref="section"
           class="p-4"
@@ -60,10 +61,10 @@
           bottom-0
           bg-white
         "
-        v-if="true || allGroups.size > 1"
+        v-if="groupedFields.size > 1"
       >
         <div
-          v-for="key of allGroups.keys()"
+          v-for="key of groupedFields.keys()"
           :key="key"
           @click="activeTab = key"
           class="text-sm cursor-pointer"
@@ -80,6 +81,22 @@
         </div>
       </div>
     </template>
+    <template #quickedit>
+      <Transition name="quickedit">
+        <QuickEditForm
+          v-if="hasQeDoc"
+          :name="qeDoc.name"
+          :show-name="false"
+          :show-save="false"
+          :source-doc="qeDoc"
+          :schema-name="qeDoc.schemaName"
+          :white="true"
+          :route-back="false"
+          :load-on-close="false"
+          @close="() => toggleQuickEditDoc(null)"
+        />
+      </Transition>
+    </template>
   </FormContainer>
 </template>
 <script lang="ts">
@@ -98,13 +115,14 @@ import {
   getFieldsGroupedByTabAndSection,
   getGroupedActionsForDoc,
 } from 'src/utils/ui';
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, nextTick } from 'vue';
+import QuickEditForm from '../QuickEditForm.vue';
 import CommonFormSection from './CommonFormSection.vue';
 
 export default defineComponent({
   props: {
-    name: { type: String, default: 'PAY-1008' },
-    schemaName: { type: String, default: ModelNameEnum.Payment },
+    name: { type: String, default: '' },
+    schemaName: { type: String, default: ModelNameEnum.StockMovement },
   },
   provide() {
     return {
@@ -117,7 +135,12 @@ export default defineComponent({
     return {
       docOrNull: null,
       activeTab: 'Default',
-    } as { docOrNull: null | Doc; activeTab: string };
+      quickEditDoc: null,
+    } as {
+      docOrNull: null | Doc;
+      activeTab: string;
+      quickEditDoc: null | Doc;
+    };
   },
   async mounted() {
     if (this.fyo.store.isDevelopment) {
@@ -131,6 +154,9 @@ export default defineComponent({
     hasDoc(): boolean {
       return !!this.docOrNull;
     },
+    hasQeDoc(): boolean {
+      return !!this.quickEditDoc;
+    },
     status(): string {
       if (!this.hasDoc) {
         return '';
@@ -147,12 +173,21 @@ 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`;
       }
 
-      return this.docOrNull?.name!;
+      return this.docOrNull?.name!?? this.t`New Entry`;
     },
     schema(): Schema {
       const schema = this.fyo.schemaMap[this.schemaName];
@@ -163,7 +198,7 @@ export default defineComponent({
       return schema;
     },
     activeGroup(): Map<string, Field[]> {
-      const group = this.allGroups.get(this.activeTab);
+      const group = this.groupedFields.get(this.activeTab);
       if (!group) {
         throw new ValidationError(
           `Tab group ${this.activeTab} has no value set`
@@ -172,7 +207,7 @@ export default defineComponent({
 
       return group;
     },
-    allGroups(): UIGroupedFields {
+    groupedFields(): UIGroupedFields {
       return getFieldsGroupedByTabAndSection(this.schema);
     },
     groupedActions(): ActionGroup[] {
@@ -195,6 +230,14 @@ export default defineComponent({
         this.docOrNull = this.fyo.doc.getNewDoc(this.schemaName);
       }
     },
+    async toggleQuickEditDoc(doc: Doc | null) {
+      if (this.quickEditDoc && doc) {
+        this.quickEditDoc = null;
+        await nextTick();
+      }
+
+      this.quickEditDoc = doc;
+    },
   },
   components: {
     FormContainer,
@@ -203,6 +246,7 @@ export default defineComponent({
     StatusBadge,
     Button,
     DropdownWithActions,
+    QuickEditForm,
   },
 });
 </script>

src/pages/CommonForm/CommonFormSection.vue

@@ -24,6 +24,7 @@
         :key="field.fieldname"
         :df="field"
         :value="doc[field.fieldname]"
+        @editrow="(doc:Doc) => $emit('editrow', doc)"
         @change="async (value) => await doc.set(field.fieldname, value)"
       />
     </div>
@@ -37,6 +38,7 @@ import { evaluateHidden } from 'src/utils/doc';
 import { defineComponent, PropType } from 'vue';
 
 export default defineComponent({
+  emits: ['editrow'],
   props: {
     title: String,
     showTitle: Boolean,
@@ -48,9 +50,19 @@ export default defineComponent({
   },
   computed: {
     filteredFields(): Field[] {
-      return (this.fields ?? []).filter(
-        (f) => !evaluateHidden(f, this.doc) && !f.meta
-      );
+      const fields: Field[] = [];
+      for (const field of this.fields ?? []) {
+        if (evaluateHidden(field, this.doc)) {
+          continue;
+        }
+
+        if (field.meta) {
+          continue;
+        }
+
+        fields.push(field);
+      }
+      return fields;
     },
   },
   components: { FormControl },

src/pages/ListView/List.vue

@@ -9,7 +9,7 @@
     >
       <p class="w-8 text-end me-4 text-gray-700">#</p>
       <Row
-        class="flex-1 text-gray-700 border-none h-row-mid"
+        class="flex-1 text-gray-700 h-row-mid"
         :columnCount="columns.length"
         gap="1rem"
       >
@@ -45,7 +45,7 @@
           </p>
           <Row
             gap="1rem"
-            class="cursor-pointer text-gray-900 flex-1 border-none h-row-mid"
+            class="cursor-pointer text-gray-900 flex-1 h-row-mid"
             @click="$emit('openDoc', doc.name)"
             :columnCount="columns.length"
           >