DeforaNetworks/corteza
3
0
Fork 0
Code Activity

Add ability to determine number of records loaded at once.

Browse Source
This commit is contained in:
Emmy Leke
2023-09-20 00:31:44 +01:00
committed by Jože Fortun
parent e5c3edabd6
commit 6f455148ec
6 changed files with 106 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/compose/src/components/PageBlocks/RecordListBase.vue
+58 -13
View File
@@ -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
}
client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
+26 -9
View File
@@ -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>
client/web/compose/src/themes/corteza-base/custom.scss
+13 -1
View File
@@ -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 {
lib/js/src/compose/types/page-block/record-list.ts
+5 -2
View File
@@ -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) {
locale/en/corteza-webapp-compose/block.yaml
+3
View File
@@ -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
locale/en/corteza-webapp-compose/general.yaml
+1
View File
@@ -44,6 +44,7 @@ label:
name: Name
next: Next
no: No
all: All
noHandle: No handle
none: None
now: Now