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",
+      "fieldname": "account",
-      "label": "Number Series",
+      "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
+      "required": true,
-    },
+      "section": "Details"
-    {
-      "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"
     },
     {
       "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,79 +4,84 @@
       {{ df.label }}
     </div>
 
-    <!-- Title Row -->
+    <div :class="border ? 'border rounded-md' : ''">
-    <Row
+      <!-- Title Row -->
-      :ratio="ratio"
+      <Row
-      class="border-b px-2 text-gray-600 w-full flex items-center"
+        :ratio="ratio"
-    >
+        class="border-b px-2 text-gray-600 w-full flex items-center"
-      <div class="flex items-center ps-2">#</div>
-      <div
-        class="items-center flex px-2 h-row-mid"
-        :class="{
-          'ms-auto': isNumeric(df),
-        }"
-        v-for="df in tableFields"
-        :key="df.fieldname"
-        :style="{
-          height: ``,
-        }"
       >
-        {{ df.label }}
+        <div class="flex items-center ps-2">#</div>
-      </div>
+        <div
-    </Row>
+          class="items-center flex px-2 h-row-mid"
-
+          :class="{
-    <!-- Data Rows -->
+            'ms-auto': isNumeric(df),
-    <div
+          }"
-      class="overflow-auto"
+          v-for="df in tableFields"
-      :style="{ 'max-height': maxHeight }"
+          :key="df.fieldname"
-      v-if="value"
+          :style="{
-    >
+            height: ``,
-      <TableRow
+          }"
-        v-for="row in value"
-        ref="table-row"
-        :key="row.name"
-        v-bind="{ row, tableFields, size, ratio, isNumeric }"
-        :read-only="isReadOnly"
-        @remove="removeRow(row)"
-        :can-edit-row="canEditRow"
-      />
-    </div>
-
-    <!-- Add Row and Row Count -->
-    <Row
-      :ratio="ratio"
-      class="
-        text-gray-500
-        cursor-pointer
-        border-transparent
-        px-2
-        w-full
-        h-row-mid
-        flex
-        items-center
-      "
-      v-if="!isReadOnly"
-      @click="addRow"
-    >
-      <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}`">
-        <p>
-          {{ t`Add Row` }}
-        </p>
-        <p
-          class="text-end px-2"
-          v-if="
-            value &&
-            maxRowsBeforeOverflow &&
-            value.length > maxRowsBeforeOverflow
-          "
         >
-          {{ t`${value.length} rows` }}
+          {{ df.label }}
-        </p>
+        </div>
+      </Row>
+
+      <!-- Data Rows -->
+      <div
+        class="overflow-auto"
+        :style="{ 'max-height': maxHeight }"
+        v-if="value"
+      >
+        <TableRow
+          v-for="row in value"
+          ref="table-row"
+          :key="row.name"
+          v-bind="{ row, tableFields, size, ratio, isNumeric }"
+          :read-only="isReadOnly"
+          @remove="removeRow(row)"
+          :can-edit-row="canEditRow"
+        />
       </div>
-    </Row>
+
+      <!-- Add Row and Row Count -->
+      <Row
+        :ratio="ratio"
+        class="
+          text-gray-500
+          cursor-pointer
+          border-transparent
+          px-2
+          w-full
+          h-row-mid
+          flex
+          items-center
+        "
+        v-if="!isReadOnly"
+        @click="addRow"
+      >
+        <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}`"
+        >
+          <p>
+            {{ t`Add Row` }}
+          </p>
+          <p
+            class="text-end px-2"
+            v-if="
+              value &&
+              maxRowsBeforeOverflow &&
+              value.length > maxRowsBeforeOverflow
+            "
+          >
+            {{ t`${value.length} rows` }}
+          </p>
+        </div>
+      </Row>
+    </div>
   </div>
 </template>
 
@@ -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()"
+          :class="idx !== 0 && activeGroup.size > 1 ? 'border-t' : ''"
-          :show-title="activeGroup.size > 1"
+          :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>
-    <FormControl
+    <div
-      v-for="field of filteredFields"
+      v-if="showTitle && title"
-      :class="field.fieldtype === 'Table' ? 'col-span-2' : ''"
+      class="flex justify-between items-center cursor-pointer select-none"
-      :show-label="true"
+      :class="collapsed ? '' : 'mb-4'"
-      :border="true"
+      @click="collapsed = !collapsed"
-      :key="field.fieldname"
+    >
-      :df="field"
+      <h2 class="text-base text-gray-900 font-semibold">
-      :value="getRegularValue(field)"
+        {{ title }}
-      @change="async (value) => await doc.set(field.fieldname, value)"
+      </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="mt-auto"
+        :class="field.fieldtype === 'Table' ? 'col-span-2 text-base' : ''"
+        :show-label="true"
+        :border="true"
+        :key="field.fieldname"
+        :df="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>