Refactor pagination and add per page options

client/web/workflow/src/components/Configurator/basic.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <b-form-group
-      :label="$t('general:label')"
+      :label="$t('general:label.label')"
       label-class="text-primary"
     >
       <b-form-input

lib/vue/src/components/resourceList/CResourceList.vue

@@ -3,7 +3,7 @@
     no-body
     header-bg-variant="white"
     footer-bg-variant="white"
-    footer-class="d-flex align-items-center flex-wrap gap-1 border-top"
+    footer-class="p-0 border-top"
     :header-class="cardHeaderClass"
     class="shadow-sm"
   >
@@ -130,51 +130,73 @@
       #footer
     >
       <div
-        v-if="!hideTotal"
-        class="text-nowrap"
+        class="d-flex align-items-center flex-wrap justify-content-between p-2 w-100"
       >
-        {{ getPagination }}
+        <div class="d-flex gap-col-3 align-items-center flex-wrap">
+          <div
+            v-if="!hideTotal"
+            class="text-nowrap ml-2"
+          >
+            {{ getPagination }}
+          </div>
+        
+          <div class="d-flex align-items-center ml-2 my-1 gap-1 text-nowrap">
+            <span>
+                {{ $t('general:resourceList.pagination.recordsPerPage') }}
+            </span>
+
+            <b-form-select
+              :value="pagination.limit"
+              :options="perPageOptions"
+              @change="handlePerPageChange"
+            />
+          </div>
+        </div>
+
+        <div
+          v-if="!hidePagination"
+          class="d-flex align-items-center justify-content-end"
+        >
+          <b-button-group>
+            <b-button
+              :disabled="!hasPrevPage"
+              variant="outline-light"
+              class="d-flex align-items-center text-primary border-0"
+              @click="goToPage()"
+            >
+              <font-awesome-icon :icon="['fas', 'angle-double-left']" />
+            </b-button>
+
+            <b-button
+              :disabled="!hasPrevPage"
+              variant="outline-light"
+              class="d-flex align-items-center text-primary border-0"
+              @click="goToPage('prevPage')"
+            >
+              <font-awesome-icon
+                :icon="['fas', 'angle-left']"
+                class="mr-1"
+              />
+
+              {{ translations.prevPagination }}
+            </b-button>
+
+            <b-button
+              :disabled="!hasNextPage"
+              variant="outline-light"
+              class="d-flex align-items-center justify-content-center text-primary border-0"
+              @click="goToPage('nextPage')"
+            >
+              {{ translations.nextPagination }}
+
+              <font-awesome-icon
+                :icon="['fas', 'angle-right']"
+                class="ml-1"
+              />
+            </b-button>
+          </b-button-group>
+        </div>
       </div>
-
-      <b-button-group
-        v-if="!hidePagination"
-        class="ml-auto"
-      >
-        <b-button
-          :disabled="!hasPrevPage"
-          variant="outline-light"
-          class="d-flex align-items-center text-primary border-0"
-          @click="goToPage()"
-        >
-          <font-awesome-icon :icon="['fas', 'angle-double-left']" />
-        </b-button>
-
-        <b-button
-          :disabled="!hasPrevPage"
-          variant="outline-light"
-          class="d-flex align-items-center text-primary border-0"
-          @click="goToPage('prevPage')"
-        >
-          <font-awesome-icon
-            :icon="['fas', 'angle-left']"
-            class="mr-1"
-          />
-          {{ translations.prevPagination }}
-        </b-button>
-
-        <b-button
-          :disabled="!hasNextPage"
-          variant="outline-light"
-          class="d-flex align-items-center justify-content-center text-primary border-0"
-          @click="goToPage('nextPage')"
-        >
-          {{ translations.nextPagination }}
-          <font-awesome-icon
-            :icon="['fas', 'angle-right']"
-            class="ml-1"
-          />
-        </b-button>
-      </b-button-group>
     </template>
   </b-card>
 </template>
@@ -276,6 +298,11 @@ export default {
       type: String,
       default: 'query',
     },
+
+    hidePerPageOption: {
+      type: Boolean,
+      default: false
+    }
   },
 
   data () {
@@ -314,6 +341,21 @@ export default {
       ].filter(s => s !== 'header')
     },
 
+    perPageOptions () {
+      const defaultText = this.pagination.limit === 0 ? this.$t('general:label.all') : this.pagination.limit.toString()
+
+      return [
+        { text: defaultText, value: this.pagination.limit },
+        { text: '25', value: 25 },
+        { text: '50', value: 50 },
+        { text: '100', value: 100 },
+      ].filter((v, i) => i === 0 || v.value !== this.pagination.limit).sort((a, b) => {
+        if (a.value === 0) return 1
+        if (b.value === 0) return -1
+        return a.value - b.value
+      })
+    },
+
     disableSelectAll () {
       return !this.selectableItemIDs.length
     },
@@ -345,7 +387,7 @@ export default {
     },
 
     showFooter () {
-      return !(this.hideTotal && this.hidePagination)
+      return !(this.hideTotal && this.hidePagination && this.hidePerPageOption)
     }
   },
 
@@ -408,6 +450,11 @@ export default {
       this.$router.replace({ query: { ...this.$route.query, page, pageCursor } })
     },
 
+    handlePerPageChange (limit) {
+      this.$router.replace({ query: { ...this.$route.query, page: 1, limit } })
+      this.$refs.resourceList.refresh()
+    },
+
     setDefaultValues () {
       this.selected = [],
       this.selectableItemIDs = []

locale/en/corteza-webapp-admin/general.yaml

@@ -37,6 +37,7 @@ label:
     plural: Workflows
   plus-add: + Add
   clear: Clear
+  all: All
   none: None
   now: Now
   today: Today
@@ -53,3 +54,6 @@ label:
   fileTypeNotAllowed: File type not allowed
 editor:
   unsavedChanges:  Unsaved changes will be lost. Do you wish to leave the page?
+resourceList:
+  pagination:
+    recordsPerPage: 'Records per page:'

locale/en/corteza-webapp-compose/general.yaml

@@ -36,6 +36,7 @@ label:
   here: here
   home: Home
   import: Import
+  all: All
   importPlaceholder: Upload files to import
   loading: Loading
   makeDefault: Make default
@@ -44,7 +45,6 @@ label:
   name: Name
   next: Next
   no: No
-  all: All
   noHandle: No handle
   none: None
   now: Now
@@ -164,6 +164,7 @@ resourceList:
     showing: '{{from}} - {{to}} of {{count}} {{data}}'
     single: 'One {{data}}'
     single_plural: '{{count}} {{data}}'
+    recordsPerPage: 'Records per page:'
 recordNavigation:
   next: Next record
   prev: Previous record

locale/en/corteza-webapp-discovery/general.yaml

@@ -1,2 +1,7 @@
 federated: Federated
-no-values: No values
+no-values: No values
+label:
+  all: All
+resourceList:
+  pagination:
+    recordsPerPage: 'Records per page:'

locale/en/corteza-webapp-privacy/general.yaml

@@ -1,5 +1,6 @@
 label:
   back: Back
+  all: All
   privacy_request:
     single: Privacy Request
     plural: Privacy Requests
@@ -19,3 +20,4 @@ resourceList:
     showing: '{{from}} - {{to}} of {{count}} {{data}}'
     single: 'One {{data}}'
     single_plural: '{{count}} {{data}}'
+    recordsPerPage: 'Records per page:'

locale/en/corteza-webapp-reporter/general.yaml

@@ -1,6 +1,7 @@
 label:
   add: Add
   and: And
+  all: All
   ascending: Ascending
   back: Back
   clear: Clear
@@ -31,3 +32,4 @@ resourceList:
     showing: '{{from}} - {{to}} of {{count}} {{data}}'
     single: 'One {{data}}'
     single_plural: '{{count}} {{data}}'
+    recordsPerPage: 'Records per page:'

locale/en/corteza-webapp-workflow/general.yaml

@@ -11,7 +11,9 @@ import:
   label: Import
   reassign-run-as: "NOTE: the Run as workflow property won't be imported and should be reassigned"
   upload-files: Browse or drop files to upload...
-label: Label
+label:
+  all: All
+  label: Label
 loading: Loading
 name: Name
 new-workflow: New Workflow 
@@ -46,6 +48,7 @@ resourceList:
     showing: '{{from}} - {{to}} of {{count}} {{data}}'
     single: 'One {{data}}'
     single_plural: '{{count}} {{data}}'
+    recordsPerPage: 'Records per page:'
 
 tooltip:
   permissions: Workflow permissions