From 6f455148ec0db4939c7431dd21f1d27fa79d2b0c Mon Sep 17 00:00:00 2001
From: Emmy Leke <emmy.leke@planetcrust.com>
Date: Wed, 20 Sep 2023 00:31:44 +0100
Subject: [PATCH] Add ability to determine number of records loaded at once.

---
 .../components/PageBlocks/RecordListBase.vue  | 71 +++++++++++++++----
 .../PageBlocks/RecordListConfigurator.vue     | 35 ++++++---
 .../src/themes/corteza-base/custom.scss       | 14 +++-
 .../compose/types/page-block/record-list.ts   |  7 +-
 locale/en/corteza-webapp-compose/block.yaml   |  3 +
 locale/en/corteza-webapp-compose/general.yaml |  1 +
 6 files changed, 106 insertions(+), 25 deletions(-)

diff --git a/client/web/compose/src/components/PageBlocks/RecordListBase.vue b/client/web/compose/src/components/PageBlocks/RecordListBase.vue
index 9c72b7819..b7d591c75 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListBase.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListBase.vue
@@ -620,24 +620,23 @@
       />
     </template>
 
-    <template
-      #footer
-    >
+    <template #footer>
       <div
         v-if="showFooter"
-        class="d-flex align-items-center justify-content-between p-2"
+        class="d-flex align-items-center flex-wrap justify-content-between p-2"
       >
-        <div class="text-truncate">
+        <div class="d-flex gap-col-3 align-items-center flex-wrap">
           <div
             v-if="options.showTotalCount"
-            class="ml-2 text-nowrap my-1"
+            class="ml-2 text-nowrap my-1 text-truncate"
           >
             <span
-              v-if="pagination.count > options.perPage"
+              v-if="pagination.count > recordsPerPage"
               data-test-id="pagination-range"
             >
               {{ $t('recordList.pagination.showing', getPagination) }}
             </span>
+
             <span
               v-else
               data-test-id="pagination-single-number"
@@ -645,11 +644,26 @@
               {{ $t('recordList.pagination.single', getPagination) }}
             </span>
           </div>
+
+          <div
+            v-if="options.showRecordPerPageOption"
+            class="d-flex align-items-center ml-2 my-1 gap-1 text-nowrap"
+          >
+            <span>
+              {{ $t('recordList.pagination.recordsPerPage') }}
+            </span>
+
+            <b-form-select
+              v-model="recordsPerPage"
+              :options="perPageOptions"
+              @change="handlePerPageChange"
+            />
+          </div>
         </div>
 
         <div
           v-if="showPageNavigation"
-          class="d-flex align-items-center justify-content-end"
+          class="d-flex align-items-center justify-content-end "
         >
           <b-pagination
             v-if="options.fullPageNavigation"
@@ -667,15 +681,19 @@
             <template #first-text>
               <font-awesome-icon :icon="['fas', 'angle-double-left']" />
             </template>
+
             <template #prev-text>
               <font-awesome-icon :icon="['fas', 'angle-left']" />
             </template>
+
             <template #next-text>
               <font-awesome-icon :icon="['fas', 'angle-right']" />
             </template>
+
             <template #last-text>
               <font-awesome-icon :icon="['fas', 'angle-double-right']" />
             </template>
+
             <template #elipsis-text>
               <font-awesome-icon :icon="['fas', 'ellipsis-h']" />
             </template>
@@ -691,6 +709,7 @@
             >
               <font-awesome-icon :icon="['fas', 'angle-double-left']" />
             </b-button>
+
             <b-button
               :disabled="!hasPrevPage || processing"
               data-test-id="previous-page"
@@ -704,6 +723,7 @@
               />
               {{ $t('recordList.pagination.prev') }}
             </b-button>
+
             <b-button
               :disabled="!hasNextPage || processing"
               data-test-id="next-page"
@@ -833,6 +853,7 @@ export default {
       selectedAllRecords: false,
 
       abortableRequests: [],
+      recordsPerPage: undefined,
     }
   },
 
@@ -847,12 +868,26 @@ export default {
     },
 
     showFooter () {
-      return this.showPageNavigation || this.options.showTotalCount
+      return this.showPageNavigation || this.options.showTotalCount || this.options.showRecordPerPageOption
+    },
+
+    perPageOptions () {
+      const defaultText = this.options.perPage === 0 ? this.$t('general:label.all') : this.options.perPage.toString()
+      return [
+        { text: defaultText, value: this.options.perPage },
+        { text: '25', value: 25 },
+        { text: '50', value: 50 },
+        { text: '100', value: 100 },
+      ].filter((v, i) => i === 0 || v.value !== this.options.perPage).sort((a, b) => {
+        if (a.value === 0) return 1
+        if (b.value === 0) return -1
+        return a.value - b.value
+      })
     },
 
     getPagination () {
       const { page = 1, count = 0 } = this.pagination
-      const { perPage = 10 } = this.options
+      const perPage = this.recordsPerPage
 
       return {
         from: ((page - 1) * perPage) + 1,
@@ -879,6 +914,10 @@ export default {
       return this.items.length && !this.options.hidePaging
     },
 
+    showPerPageSelector () {
+      return this.options.showRecordPerPageOption
+    },
+
     disableSelectAll () {
       if (this.options.hidePaging) {
         return !this.items.length
@@ -1099,6 +1138,11 @@ export default {
       this.refresh(true)
     },
 
+    handlePerPageChange () {
+      this.filter.limit = this.recordsPerPage
+      this.refresh(true)
+    },
+
     onSaveFilterPreset (filter = []) {
       this.currentCustomPresetFilter = {
         filter,
@@ -1249,7 +1293,8 @@ export default {
     // Sanitizes record list config and
     // prepares prefilter
     prepRecordList () {
-      const { moduleID, presort, prefilter, editable, perPage, refField, positionField } = this.options
+      this.recordsPerPage = this.options.perPage
+      const { moduleID, presort, prefilter, editable, refField, positionField } = this.options
 
       // Validate props
       if (!moduleID) {
@@ -1298,7 +1343,7 @@ export default {
       }
 
       this.prefilter = filter.join(' AND ')
-      const limit = perPage
+      const limit = this.recordsPerPage
       this.filter = {
         limit,
         sort,
@@ -1594,7 +1639,7 @@ export default {
               if (!paginationOptions.incTotal) {
                 if (pages.length > 1) {
                   const lastPageCount = pages[pages.length - 1].items
-                  count = ((pages.length - 1) * this.options.perPage) + lastPageCount
+                  count = ((pages.length - 1) * this.recordsPerPage) + lastPageCount
                 } else {
                   count = records.length
                 }
diff --git a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
index 1ee34d134..5b6cf5298 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
@@ -11,6 +11,7 @@
         <h5 class="mb-3">
           {{ $t('recordList.record.generalLabel') }}
         </h5>
+
         <b-row>
           <b-col
             cols="12"
@@ -435,9 +436,7 @@
             {{ $t('recordList.record.pagingLabel') }}
           </h5>
 
-          <b-row
-            class="mb-3"
-          >
+          <b-row>
             <b-col
               cols="12"
               md="6"
@@ -481,14 +480,14 @@
               md="6"
             >
               <b-form-group
-                :label="$t('recordList.record.fullPageNavigation')"
+                :label="$t('recordList.record.showTotalCount')"
                 label-class="text-primary"
               >
                 <c-input-checkbox
-                  v-model="options.fullPageNavigation"
+                  v-model="options.showTotalCount"
+                  data-test-id="show-total-record-count"
                   switch
                   :labels="checkboxLabel"
-                  data-test-id="hide-page-navigation"
                 />
               </b-form-group>
             </b-col>
@@ -498,18 +497,36 @@
               md="6"
             >
               <b-form-group
-                :label="$t('recordList.record.showTotalCount')"
+                :label="$t('recordList.record.showRecordPerPageOption')"
                 label-class="text-primary"
               >
                 <c-input-checkbox
-                  v-model="options.showTotalCount"
-                  data-test-id="show-total-record-count"
+                  v-model="options.showRecordPerPageOption"
                   switch
                   :labels="checkboxLabel"
                 />
               </b-form-group>
             </b-col>
           </b-row>
+
+          <b-row>
+            <b-col
+              cols="12"
+              md="6"
+            >
+              <b-form-group
+                :label="$t('recordList.record.fullPageNavigation')"
+                label-class="text-primary"
+              >
+                <c-input-checkbox
+                  v-model="options.fullPageNavigation"
+                  switch
+                  :labels="checkboxLabel"
+                  data-test-id="hide-page-navigation"
+                />
+              </b-form-group>
+            </b-col>
+          </b-row>
         </div>
 
         <hr>
diff --git a/client/web/compose/src/themes/corteza-base/custom.scss b/client/web/compose/src/themes/corteza-base/custom.scss
index 075703862..9dd36b7ee 100644
--- a/client/web/compose/src/themes/corteza-base/custom.scss
+++ b/client/web/compose/src/themes/corteza-base/custom.scss
@@ -43,6 +43,18 @@ button:disabled {
   cursor: pointer;
 }
 
+.gap-1{
+  gap: 0.5rem;
+}
+
+.gap-2 {
+  gap: 1rem;
+}
+
+.gap-col-3 {
+  column-gap: 1.5rem;
+}
+
 .grab {
   cursor: grab;
 }
@@ -78,7 +90,7 @@ th {
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   margin-bottom: 0;
-  font-size: .9rem;
+  font-size: 0.9rem;
   border-radius: 0.25rem;
 
   .vs__selected-options {
diff --git a/lib/js/src/compose/types/page-block/record-list.ts b/lib/js/src/compose/types/page-block/record-list.ts
index 0f9f012b1..4f2f473d2 100644
--- a/lib/js/src/compose/types/page-block/record-list.ts
+++ b/lib/js/src/compose/types/page-block/record-list.ts
@@ -68,6 +68,7 @@ interface Options {
   bulkRecordEditEnabled: boolean;
   inlineRecordEditEnabled: boolean;
   filterPresets: FilterPreset[];
+  showRecordPerPageOption: boolean;
 }
 
 const defaults: Readonly<Options> = Object.freeze({
@@ -119,7 +120,8 @@ const defaults: Readonly<Options> = Object.freeze({
 
   bulkRecordEditEnabled: true,
   inlineRecordEditEnabled: false,
-  filterPresets: []
+  filterPresets: [],
+  showRecordPerPageOption: false,
 })
 
 export class PageBlockRecordList extends PageBlock {
@@ -181,7 +183,8 @@ export class PageBlockRecordList extends PageBlock {
       'linkToParent',
       'showRefresh',
       'bulkRecordEditEnabled',
-      'inlineRecordEditEnabled'
+      'inlineRecordEditEnabled',
+      'showRecordPerPageOption',
     )
 
     if (o.selectionButtons) {
diff --git a/locale/en/corteza-webapp-compose/block.yaml b/locale/en/corteza-webapp-compose/block.yaml
index 25b8d29cb..720056ddf 100644
--- a/locale/en/corteza-webapp-compose/block.yaml
+++ b/locale/en/corteza-webapp-compose/block.yaml
@@ -414,6 +414,8 @@ recordList:
     showing: '{{from}} - {{to}} of {{count}} records'
     single: One record
     single_plural: '{{count}} records'
+    recordsPerPage: 'Records per page:'
+    selectLabel: Select an option
   positionField:
     footnote: Records will be sorted based on this field
     label: Record sort field
@@ -464,6 +466,7 @@ recordList:
     presortInputLabel: Presort
     presortPlaceholder: field1 DESC, field2 ASC
     showTotalCount: Show total record count
+    showRecordPerPageOption: Allow users to select records per page
     showDeletedRecordsOption: Show option to see deleted records
     setCustomFilterPresets: User will be able to set custom filter presets
     openInSameTab: Open record in the same tab
diff --git a/locale/en/corteza-webapp-compose/general.yaml b/locale/en/corteza-webapp-compose/general.yaml
index a25bca317..a93393208 100644
--- a/locale/en/corteza-webapp-compose/general.yaml
+++ b/locale/en/corteza-webapp-compose/general.yaml
@@ -44,6 +44,7 @@ label:
   name: Name
   next: Next
   no: No
+  all: All
   noHandle: No handle
   none: None
   now: Now