incr: add collapsible sections

- table borders

schemas/app/Payment.json

@@ -11,7 +11,18 @@
       "fieldname": "name",
       "fieldtype": "Data",
       "required": true,
-      "readOnly": true
+      "readOnly": true,
+      "section": "Default"
+    },
+    {
+      "fieldname": "numberSeries",
+      "label": "Number Series",
+      "fieldtype": "Link",
+      "target": "NumberSeries",
+      "create": true,
+      "required": true,
+      "default": "PAY-",
+      "section": "Default"
     },
     {
       "fieldname": "party",
@@ -19,13 +30,15 @@
       "fieldtype": "Link",
       "target": "Party",
       "create": true,
-      "required": true
+      "required": true,
+      "section": "Default"
     },
     {
       "fieldname": "date",
       "label": "Posting Date",
       "fieldtype": "Date",
-      "required": true
+      "required": true,
+      "section": "Default"
     },
     {
       "fieldname": "paymentType",
@@ -42,16 +55,27 @@
           "label": "Pay"
         }
       ],
-      "required": true
+      "required": true,
+      "section": "Default"
     },
     {
-      "fieldname": "numberSeries",
-      "label": "Number Series",
+      "fieldname": "account",
+      "label": "From Account",
       "fieldtype": "Link",
-      "target": "NumberSeries",
+      "target": "Account",
       "create": true,
       "required": true,
-      "default": "PAY-"
+      "section": "Details"
+    },
+    {
+      "fieldname": "paymentAccount",
+      "label": "To Account",
+      "placeholder": "To Account",
+      "fieldtype": "Link",
+      "target": "Account",
+      "create": true,
+      "required": true,
+      "section": "Details"
     },
     {
       "fieldname": "paymentMethod",
@@ -73,72 +97,64 @@
         }
       ],
       "default": "Cash",
-      "required": true
-    },
-    {
-      "fieldname": "account",
-      "label": "From Account",
-      "fieldtype": "Link",
-      "target": "Account",
-      "create": true,
-      "required": true
-    },
-    {
-      "fieldname": "paymentAccount",
-      "label": "To Account",
-      "placeholder": "To Account",
-      "fieldtype": "Link",
-      "target": "Account",
-      "create": true,
-      "required": true
-    },
-    {
-      "fieldname": "referenceId",
-      "label": "Ref. / Cheque No.",
-      "placeholder": "Ref. / Cheque No.",
-      "fieldtype": "Data"
-    },
-    {
-      "fieldname": "referenceDate",
-      "label": "Ref. Date",
-      "placeholder": "Ref. Date",
-      "fieldtype": "Date"
-    },
-    {
-      "fieldname": "clearanceDate",
-      "label": "Clearance Date",
-      "placeholder": "Clearance Date",
-      "fieldtype": "Date"
+      "required": true,
+      "section": "Details"
     },
     {
       "fieldname": "amount",
       "label": "Amount",
       "fieldtype": "Currency",
-      "required": true
+      "required": true,
+      "section": "Amounts"
     },
     {
       "fieldname": "writeoff",
       "label": "Write Off",
-      "fieldtype": "Currency"
+      "fieldtype": "Currency",
+      "section": "Amounts"
     },
     {
       "fieldname": "amountPaid",
       "label": "Amount Paid",
       "fieldtype": "Currency",
-      "computed": true
+      "computed": true,
+      "section": "Amounts"
+    },
+    {
+      "fieldname": "referenceId",
+      "label": "Ref. / Cheque No.",
+      "placeholder": "Ref. / Cheque No.",
+      "fieldtype": "Data",
+      "section": "References"
+    },
+    {
+      "fieldname": "referenceDate",
+      "label": "Reference Date",
+      "placeholder": "Ref. Date",
+      "fieldtype": "Date",
+      "section": "References"
+    },
+    {
+      "fieldname": "clearanceDate",
+      "label": "Clearance Date",
+      "placeholder": "Clearance Date",
+      "fieldtype": "Date",
+      "section": "References"
     },
     {
       "fieldname": "for",
       "label": "Payment Reference",
       "fieldtype": "Table",
       "target": "PaymentFor",
-      "required": false
+      "required": false,
+      "section": "References"
     },
     {
       "fieldname": "attachment",
       "placeholder": "Add attachment",
       "label": "Attachment",
-      "fieldtype": "Attachment"
+      "fieldtype": "Attachment",
+      "section": "References"
     }
   ],
   "quickEditFields": [

schemas/meta/base.json

@@ -6,28 +6,32 @@
       "label": "Created By",
       "fieldtype": "Data",
       "required": true,
-      "meta": true
+      "meta": true,
+      "section": "System"
     },
     {
       "fieldname": "modifiedBy",
       "label": "Modified By",
       "fieldtype": "Data",
       "required": true,
-      "meta": true
+      "meta": true,
+      "section": "System"
     },
     {
       "fieldname": "created",
       "label": "Created",
       "fieldtype": "Datetime",
       "required": true,
-      "meta": true
+      "meta": true,
+      "section": "System"
     },
     {
       "fieldname": "modified",
       "label": "Modified",
       "fieldtype": "Datetime",
       "required": true,
-      "meta": true
+      "meta": true,
+      "section": "System"
     }
   ]
 }

schemas/meta/submittable.json

@@ -6,14 +6,16 @@
       "label": "Submitted",
       "fieldtype": "Check",
       "required": true,
-      "meta": true
+      "meta": true,
+      "section": "System"
     },
     {
       "fieldname": "cancelled",
       "label": "Cancelled",
       "fieldtype": "Check",
       "required": true,
-      "meta": true
+      "meta": true,
+      "section": "System"
     }
   ]
 }

src/components/Controls/Table.vue

@@ -4,6 +4,7 @@
       {{ df.label }}
     </div>
 
+    <div :class="border ? 'border rounded-md' : ''">
       <!-- Title Row -->
       <Row
         :ratio="ratio"
@@ -61,7 +62,10 @@
         <div class="flex items-center ps-1">
           <feather-icon name="plus" class="w-4 h-4 text-gray-500" />
         </div>
-      <div class="flex justify-between px-2" :style="`grid-column: 2 / ${ratio.length + 1}`">
+        <div
+          class="flex justify-between px-2"
+          :style="`grid-column: 2 / ${ratio.length + 1}`"
+        >
           <p>
             {{ t`Add Row` }}
           </p>
@@ -78,6 +82,7 @@
         </div>
       </Row>
     </div>
+  </div>
 </template>
 
 <script>
@@ -101,6 +106,10 @@ export default {
       type: Number,
       default: 3,
     },
+    border: {
+      type: Boolean,
+      default: false,
+    },
   },
   components: {
     Row,

src/pages/CommonForm/CommonForm.vue

@@ -10,13 +10,14 @@
       <!-- Section Container -->
       <div v-if="hasDoc" class="overflow-auto custom-scroll">
         <CommonFormSection
+          v-for="([name, fields], idx) in activeGroup.entries()"
+          :key="name + idx"
           ref="section"
           class="p-4"
-          v-for="[name, fields] of activeGroup.entries()"
-          :show-title="activeGroup.size > 1"
+          :class="idx !== 0 && activeGroup.size > 1 ? 'border-t' : ''"
+          :show-title="activeGroup.size > 1 && name !== t`Default`"
           :title="name"
           :fields="fields"
-          :key="name"
           :doc="doc"
         />
       </div>
@@ -57,7 +58,6 @@
     </template>
   </FormContainer>
 </template>
-
 <script lang="ts">
 import { Doc } from 'fyo/model/doc';
 import { ValidationError } from 'fyo/utils/errors';

src/pages/CommonForm/CommonFormSection.vue

@@ -1,19 +1,35 @@
 <template>
-  <div class="grid gap-4 gap-x-8 grid-cols-2">
+  <div>
+    <div
+      v-if="showTitle && title"
+      class="flex justify-between items-center cursor-pointer select-none"
+      :class="collapsed ? '' : 'mb-4'"
+      @click="collapsed = !collapsed"
+    >
+      <h2 class="text-base text-gray-900 font-semibold">
+        {{ title }}
+      </h2>
+      <feather-icon
+        :name="collapsed ? 'chevron-up' : 'chevron-down'"
+        class="w-4 h-4 text-gray-600"
+      />
+    </div>
+    <div class="grid gap-4 gap-x-8 grid-cols-2" v-if="!collapsed">
       <FormControl
         v-for="field of filteredFields"
-      :class="field.fieldtype === 'Table' ? 'col-span-2' : ''"
+        class="mt-auto"
+        :class="field.fieldtype === 'Table' ? 'col-span-2 text-base' : ''"
         :show-label="true"
         :border="true"
         :key="field.fieldname"
         :df="field"
-      :value="getRegularValue(field)"
+        :value="doc[field.fieldname]"
         @change="async (value) => await doc.set(field.fieldname, value)"
       />
     </div>
+  </div>
 </template>
 <script lang="ts">
-import { DocValue } from 'fyo/core/types';
 import { Doc } from 'fyo/model/doc';
 import { Field } from 'schemas/types';
 import FormControl from 'src/components/Controls/FormControl.vue';
@@ -27,16 +43,14 @@ export default defineComponent({
     doc: { type: Object as PropType<Doc>, required: true },
     fields: Array as PropType<Field[]>,
   },
+  data() {
+    return { collapsed: false };
+  },
   computed: {
     filteredFields(): Field[] {
       return (this.fields ?? []).filter((f) => !evaluateHidden(f, this.doc));
     },
   },
-  methods: {
-    getRegularValue(field: Field): DocValue | Doc[] {
-      return this.doc.get(field.fieldname);
-    },
-  },
   components: { FormControl },
 });
 </script>