incr: add list pagination

models/baseModels/JournalEntry/JournalEntry.ts

@@ -49,7 +49,7 @@ export class JournalEntry extends Transactional {
     return {
       formRoute: (name) => `/edit/JournalEntry/${name}`,
       columns: [
-        'date',
+        'name',
         {
           label: t`Status`,
           fieldtype: 'Select',
@@ -72,14 +72,7 @@ export class JournalEntry extends Transactional {
             };
           },
         },
-        {
+        'date',
-          label: t`Entry ID`,
-          fieldtype: 'Data',
-          fieldname: 'name',
-          getValue(doc) {
-            return doc.name as string;
-          },
-        },
         'entryType',
         'referenceNumber',
       ],

models/baseModels/Payment/Payment.ts

@@ -442,7 +442,7 @@ export class Payment extends Transactional {
   static getListViewSettings(fyo: Fyo): ListViewSettings {
     return {
       columns: [
-        'party',
+        'name',
         {
           label: t`Status`,
           fieldname: 'status',
@@ -465,7 +465,7 @@ export class Payment extends Transactional {
             };
           },
         },
-        'paymentType',
+        'party',
         'date',
         'amount',
       ],

models/baseModels/PurchaseInvoice/PurchaseInvoice.ts

@@ -36,9 +36,9 @@ export class PurchaseInvoice extends Invoice {
     return {
       formRoute: (name) => `/edit/PurchaseInvoice/${name}`,
       columns: [
-        'party',
         'name',
         getTransactionStatusColumn(),
+        'party',
         'date',
         'grandTotal',
         'outstandingAmount',

models/baseModels/SalesInvoice/SalesInvoice.ts

@@ -35,9 +35,9 @@ export class SalesInvoice extends Invoice {
     return {
       formRoute: (name) => `/edit/SalesInvoice/${name}`,
       columns: [
-        'party',
         'name',
         getTransactionStatusColumn(),
+        'party',
         'date',
         'grandTotal',
         'outstandingAmount',

src/pages/ListView/List.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="mx-4 pb-16 text-base flex flex-col overflow-y-hidden">
+  <div class="mx-4 text-base flex flex-col overflow-y-hidden">
     <!-- Title Row -->
-    <div class="flex">
+    <div class="flex items-center">
-      <div class="py-4 mr-3 w-7" v-if="hasImage" />
+      <p class="w-8 text-right mr-4 text-gray-700">#</p>
       <Row
-        class="flex-1 text-gray-700"
+        class="flex-1 text-gray-700 border-none"
         :columnCount="columns.length"
         gap="1rem"
       >
@@ -22,34 +22,118 @@
         </div>
       </Row>
     </div>
+    <hr />
 
     <!-- Data Rows -->
     <div class="overflow-y-auto" v-if="data.length !== 0">
-      <div class="flex hover:bg-gray-100" v-for="doc in data" :key="doc.name">
+      <div
-        <div class="w-7 py-4 mr-3" v-if="hasImage">
+        v-for="(doc, i) in data.slice((pageNo - 1) * count, pageNo * count)"
-          <Avatar :imageURL="doc.image" :label="doc.name" />
+        :key="doc.name"
+      >
+        <!-- Row Content -->
+        <div class="flex hover:bg-gray-100 items-center">
+          <p class="w-8 text-right mr-4 text-gray-900">
+            {{ i + 1 + (pageNo - 1) * count }}
+          </p>
+          <Row
+            gap="1rem"
+            class="cursor-pointer text-gray-900 flex-1 border-none"
+            @click="openForm(doc)"
+            :columnCount="columns.length"
+          >
+            <ListCell
+              v-for="column in columns"
+              :key="column.label"
+              :class="{
+                'text-right': ['Float', 'Currency'].includes(column.fieldtype),
+              }"
+              :doc="doc"
+              :column="column"
+            ></ListCell>
+          </Row>
         </div>
-        <Row
+        <hr v-if="i !== count - 1" />
-          gap="1rem"
+      </div>
-          class="cursor-pointer text-gray-900 flex-1"
+    </div>
-          @click="openForm(doc)"
+
-          :columnCount="columns.length"
+    <!-- Pagination Footer -->
+    <hr v-if="data.length > 20" />
+    <div
+      v-if="data.length > 20"
+      class="my-3 grid grid-cols-3 text-gray-800 text-sm select-none"
+    >
+      <!-- Length Display -->
+      <div class="justify-self-start">
+        {{
+          `${(pageNo - 1) * count + 1} - ${Math.min(
+            pageNo * count,
+            data.length
+          )}`
+        }}
+      </div>
+
+      <!-- Pagination Selector -->
+      <div class="flex gap-1 items-center justify-self-center">
+        <feather-icon
+          name="chevron-left"
+          class="w-4 h-4"
+          :class="
+            pageNo > 1 ? 'text-gray-600 cursor-pointer' : 'text-transparent'
+          "
+          @click="pageNo = Math.max(1, pageNo - 1)"
+        />
+        <div class="flex gap-1 bg-gray-100 rounded">
+          <input
+            type="number"
+            class="
+              w-6
+              text-right
+              outline-none
+              bg-transparent
+              focus:text-gray-900
+            "
+            :value="pageNo"
+            @change="setPageNo"
+            @input="setPageNo"
+            min="1"
+            :max="maxPages"
+          />
+          <p class="text-gray-600">/</p>
+          <p class="w-5">
+            {{ maxPages }}
+          </p>
+        </div>
+        <feather-icon
+          name="chevron-right"
+          class="w-4 h-4"
+          :class="
+            pageNo < maxPages
+              ? 'text-gray-600 cursor-pointer'
+              : 'text-transparent'
+          "
+          @click="pageNo = Math.min(maxPages, pageNo + 1)"
+        />
+      </div>
+
+      <!-- Count Selector -->
+      <div class="border rounded flex justify-self-end">
+        <button
+          v-for="c in allowedCounts"
+          :key="c + '-count'"
+          @click="setCount(c)"
+          class="w-9"
+          :class="count === c ? 'bg-gray-200' : ''"
         >
-          <ListCell
+          {{ c }}
-            v-for="column in columns"
+        </button>
-            :key="column.label"
-            :class="{
-              'text-right': ['Float', 'Currency'].includes(column.fieldtype),
-            }"
-            :doc="doc"
-            :column="column"
-          ></ListCell>
-        </Row>
       </div>
     </div>
 
     <!-- Empty State -->
-    <div v-else class="flex flex-col items-center justify-center my-auto">
+    <div
+      v-if="!data?.length"
+      class="flex flex-col items-center justify-center my-auto"
+    >
       <img src="@/assets/img/list-empty-state.svg" alt="" class="w-24" />
       <p class="my-3 text-gray-800">{{ t`No entries found` }}</p>
       <Button type="primary" class="text-white" @click="$emit('makeNewDoc')">
@@ -59,7 +143,6 @@
   </div>
 </template>
 <script>
-import Avatar from 'src/components/Avatar';
 import Button from 'src/components/Button';
 import Row from 'src/components/Row';
 import { fyo } from 'src/initFyo';
@@ -73,7 +156,6 @@ export default {
   components: {
     Row,
     ListCell,
-    Avatar,
     Button,
   },
   watch: {
@@ -87,11 +169,16 @@ export default {
   },
   data() {
     return {
+      pageNo: 1,
+      count: 20,
+      allowedCounts: [20, 100, 500],
       data: [],
     };
   },
-  mounted() {},
   computed: {
+    maxPages() {
+      return Math.ceil(this.data.length / this.count);
+    },
     columns() {
       let columns = this.listConfig?.columns ?? [];
 
@@ -110,15 +197,23 @@ export default {
         })
         .filter(Boolean);
     },
-    hasImage() {
-      return !!fyo.getField(this.schemaName, 'image');
-    },
   },
   async mounted() {
     await this.updateData();
     this.setUpdateListeners();
   },
   methods: {
+    setPageNo({ target: { value } }) {
+      value = parseInt(value);
+      if (isNaN(value)) {
+        return;
+      }
+      this.pageNo = Math.min(Math.max(1, value), this.maxPages);
+    },
+    setCount(count) {
+      this.pageNo = 1;
+      this.count = count;
+    },
     setUpdateListeners() {
       const listener = (name) => {
         this.updateData();
@@ -152,7 +247,7 @@ export default {
       this.data = await fyo.db.getAll(this.schemaName, {
         fields: ['*'],
         filters,
-        orderBy: 'created',
+        orderBy: 'modified',
       });
     },
   },