DeforaNetworks/corteza
3
0
Fork 0
Code Activity

Adjust record page pagination logic

Browse Source
This commit is contained in:
Jože Fortun
2023-02-21 13:14:37 +01:00
committed by Kelani Tolulope
parent 31572e33dc
commit 369385424f
9 changed files with 128 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/compose/src/components/Common/RecordToolbar.vue
+11 -8
View File
@@ -33,28 +33,24 @@
>
<b-button-group v-if="recordNavigation.prev || recordNavigation.next">
<b-button
id="tooltip-target-prev-page"
v-b-tooltip.hover
pill
size="lg"
variant="outline-primary"
class="mr-2"
:disabled="!recordNavigation.prev"
:disabled="!record || processing || !recordNavigation.prev"
:title="$t('recordNavigation.prev')"
@click="$emit('update-navigation', recordNavigation.prev)"
@click="navigateToRecord(recordNavigation.prev)"
>
<font-awesome-icon :icon="['fas', 'angle-left']" />
</b-button>
<b-button
id="tooltip-target-next-page"
v-b-tooltip.hover
size="lg"
pill
variant="outline-primary"
:disabled="!recordNavigation.next"
:disabled="!record || processing || !recordNavigation.next"
:title="$t('recordNavigation.next')"
@click="$emit('update-navigation', recordNavigation.next)"
@click="navigateToRecord(recordNavigation.next)"
>
<font-awesome-icon :icon="['fas', 'angle-right']" />
</b-button>
@@ -175,6 +171,7 @@
<script>
import { compose, NoID } from '@cortezaproject/corteza-js'
import { throttle } from 'lodash'
export default {
i18nOptions: {
@@ -285,6 +282,12 @@ export default {
return this.isDeleted && this.record.canUndeleteRecord && !this.processing && this.record.recordID !== NoID
},
},
methods: {
navigateToRecord: throttle(function (recordID) {
this.$emit('update-navigation', recordID)
}, 500),
},
}
</script>
<style lang="scss" scoped>
client/web/compose/src/components/PageBlocks/RecordListBase.vue
+6 -17
View File
@@ -1217,31 +1217,20 @@ export default {
this.processing = false
},
handleRowClicked ({ r: { recordID } }) {
const { moduleID, namespaceID } = this.recordListModule
async handleRowClicked ({ r: { recordID } }) {
if ((this.options.editable && this.editing) || (!this.recordPageID && !this.options.rowViewUrl)) {
return
}
if (this.block.options.enableRecordPageNavigation) {
const { pageCursor, nextPage, prevPage } = this.filter
this.loadPaginationRecords({
recordListModule: this.recordListModule,
moduleID,
namespaceID,
filterCursors: [prevPage, pageCursor, nextPage],
if (this.options.enableRecordPageNavigation) {
await this.loadPaginationRecords({
filter: {
...this.filter,
limit: Math.min(this.pagination.count, 100),
},
options: {
showRecordNavigationTooltip: this.block.options.showRecordNavigationTooltip,
},
})
}
if ((this.options.editable && this.editing) || (!this.recordPageID && !this.options.rowViewUrl)) {
return
}
const pageID = this.recordPageID
const route = {
name: this.options.rowViewUrl || 'page.record',
client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
+6 -5
View File
@@ -252,10 +252,16 @@
breakpoint="md"
class="mt-4"
>
<b-form-checkbox
v-model="options.enableRecordPageNavigation"
>
{{ $t('recordList.enableRecordPageNavigation') }}
</b-form-checkbox>
<b-form-checkbox v-model="options.allowExport">
{{ $t('recordList.export.allow') }}
</b-form-checkbox>
</b-form-group>
<b-form-group
horizontal
:label-cols="3"
@@ -306,11 +312,6 @@
>
{{ $t('recordList.hideRecordPermissionsButton') }}
</b-form-checkbox>
<b-form-checkbox
v-model="options.enableRecordPageNavigation"
>
{{ $t('recordList.enableRecordPageNavigation') }}
</b-form-checkbox>
</b-form-group>
</b-tab>
client/web/compose/src/components/Public/Record/Modal.vue
+30 -14
View File
@@ -35,10 +35,10 @@
</template>
<script>
import record from 'corteza-webapp-compose/src/mixins/record'
import { compose } from '@cortezaproject/corteza-js'
import { mapGetters, mapActions } from 'vuex'
import record from 'corteza-webapp-compose/src/mixins/record'
import ViewRecord from 'corteza-webapp-compose/src/views/Public/Pages/Records/View'
import { mapGetters } from 'vuex'
export default {
i18nOptions: {
@@ -75,6 +75,7 @@ export default {
...mapGetters({
getModuleByID: 'module/getByID',
getPageByID: 'page/getByID',
recordPaginationUsable: 'ui/recordPaginationUsable',
}),
},
@@ -83,26 +84,36 @@ export default {
immediate: true,
handler (recordID, oldRecordID) {
const { recordPageID } = this.$route.query
const { pageID: oldrecordPageID } = this.page || {}
if (!recordID) {
this.showModal = false
return
}
if (this.showModal && (recordID !== oldRecordID)) {
this.showModal = false
if (recordPageID !== oldrecordPageID) {
// If the page changed we need to clear the record pagination since its not relevant anymore
if (this.recordPaginationUsable) {
this.setRecordPaginationUsable(false)
} else {
this.clearRecordIDs()
}
setTimeout(() => {
this.$router.push({
query: {
...this.$route.query,
recordID,
recordPageID,
},
})
}, 300)
if (this.showModal && (recordID !== oldRecordID)) {
this.showModal = false
return
setTimeout(() => {
this.$router.push({
query: {
...this.$route.query,
recordID,
recordPageID,
},
})
}, 300)
return
}
}
setTimeout(() => {
@@ -129,6 +140,11 @@ export default {
},
methods: {
...mapActions({
setRecordPaginationUsable: 'ui/setRecordPaginationUsable',
clearRecordIDs: 'ui/clearRecordIDs',
}),
loadModal ({ recordID, recordPageID }) {
if (recordID && recordPageID) {
this.recordID = recordID
client/web/compose/src/store/ui.js
+26 -44
View File
@@ -5,8 +5,8 @@ const types = {
completed: 'completed',
setRecordPagination: 'setRecordPagination',
clearRecordPagination: 'clearRecordPagination',
clearRecordPageNavigation: 'clearRecordPageNavigation',
setClearRecordPageNavigation: 'setClearRecordPageNavigation',
recordPaginationUsable: 'recordPaginationUsable',
setRecordPaginationUsable: 'setRecordPaginationUsable',
}
export default function (ComposeAPI) {
@@ -16,9 +16,8 @@ export default function (ComposeAPI) {
state: {
loading: false,
pending: false,
recordPaginationIds: [],
recordPageVisited: null,
clearRecordPageNavigation: true,
recordPaginationIDs: [],
recordPaginationUsable: false,
},
getters: {
@@ -26,59 +25,42 @@ export default function (ComposeAPI) {
pending: (state) => state.pending,
clearRecordPageNavigation: (state) => state.clearRecordPageNavigation,
recordPaginationUsable: (state) => state.recordPaginationUsable,
getRecordNavigationIndex: (state) => (recordID) => {
return state.recordPaginationIds.indexOf(recordID)
},
getNextAndPrevRecord: ({ recordPaginationIDs }) => (recordID) => {
const recordIndex = recordPaginationIDs.indexOf(recordID)
const prev = recordIndex >= 0 ? recordPaginationIDs[recordIndex - 1] : undefined
const next = recordIndex >= 0 ? recordPaginationIDs[recordIndex + 1] : undefined
nextRecordNavigation: ({ recordPaginationIds }, { getRecordNavigationIndex }) => (recordID) => {
const recordIndex = getRecordNavigationIndex(recordID)
const index = recordIndex !== undefined ? recordIndex : 1
return recordPaginationIds[index - 1]
},
prevRecordNavigation: ({ recordPaginationIds }, { getRecordNavigationIndex }) => (recordID) => {
const recordIndex = getRecordNavigationIndex(recordID)
const index = recordIndex !== undefined ? recordIndex : 1
return recordPaginationIds[index + 1]
},
getNextAndPrevRecord: (_, { nextRecordNavigation, prevRecordNavigation }) => (recordID) => {
return {
next: prevRecordNavigation(recordID),
prev: nextRecordNavigation(recordID),
}
return { next, prev }
},
},
actions: {
loadPaginationRecords ({ commit }, { filter, moduleID, namespaceID, filterCursors, incTotal, incPageNavigation, options } = {}) {
async loadPaginationRecords ({ commit }, { filter } = {}) {
commit(types.pending)
commit(types.setClearRecordPageNavigation, true)
commit(types.recordPaginationUsable, true)
return Promise.all(filterCursors.map((cursor) => {
filter.pageCursor = cursor
const { pageCursor, prevPage } = filter
return ComposeAPI.recordList({ ...filter, moduleID, namespaceID, incTotal, incPageNavigation })
return Promise.all([prevPage, pageCursor].map(pageCursor => {
return ComposeAPI.recordList({ ...filter, pageCursor })
.then(({ set }) => {
return set.map(({ recordID }) => recordID)
})
})).finally(() => {
commit(types.completed)
}).then(([prevRecords, nextRecords]) => {
})).then(([prevRecords, nextRecords]) => {
commit(types.setRecordPagination, [...new Set([...prevRecords, ...nextRecords])])
}).finally(() => {
commit(types.completed)
})
},
clearRecordIds ({ commit }) {
clearRecordIDs ({ commit }) {
commit(types.clearRecordPagination)
},
setClearRecordPageNavigation ({ commit }, value) {
commit(types.setClearRecordPageNavigation, value)
setRecordPaginationUsable ({ commit }, value) {
commit(types.recordPaginationUsable, value)
},
},
@@ -99,16 +81,16 @@ export default function (ComposeAPI) {
state.pending = false
},
[types.setRecordPagination] (state, recordIds) {
state.recordPaginationIds = recordIds
[types.setRecordPagination] (state, recordIDs) {
state.recordPaginationIDs = recordIDs
},
[types.clearRecordPagination] (state) {
state.recordPaginationIds = []
state.recordPaginationIDs = []
},
[types.setClearRecordPageNavigation] (state, value) {
state.clearRecordPageNavigation = value
[types.recordPaginationUsable] (state, value) {
state.recordPaginationUsable = value
},
},
}
client/web/compose/src/views/Admin/Modules/Records/List.vue
+11
View File
@@ -67,6 +67,7 @@ export default {
computed: {
...mapGetters({
getModuleByID: 'module/getByID',
recordPaginationUsable: 'ui/recordPaginationUsable',
}),
title () {
@@ -124,6 +125,7 @@ export default {
showTotalCount: true,
showDeletedRecordsOption: true,
presort: 'createdAt DESC',
enableRecordPageNavigation: true,
// Set allrecords configuration
allRecords: true,
hideConfigureFieldsButton: false,
@@ -132,11 +134,20 @@ export default {
rowCreateUrl: 'admin.modules.record.create',
},
})
// If the page changed we need to clear the record pagination since its not relevant anymore
if (this.recordPaginationUsable) {
this.setRecordPaginationUsable(false)
} else {
this.clearRecordIDs()
}
},
methods: {
...mapActions({
updateModule: 'module/update',
setRecordPaginationUsable: 'ui/setRecordPaginationUsable',
clearRecordIDs: 'ui/clearRecordIDs',
}),
handleFieldsSave (fields = []) {
client/web/compose/src/views/Admin/Modules/Records/View.vue
+7 -30
View File
@@ -93,7 +93,7 @@
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { mapGetters } from 'vuex'
import RecordToolbar from 'corteza-webapp-compose/src/components/Common/RecordToolbar'
import users from 'corteza-webapp-compose/src/mixins/users'
import record from 'corteza-webapp-compose/src/mixins/record'
@@ -136,7 +136,6 @@ export default {
computed: {
...mapGetters({
clearRecordPageNavigation: 'ui/clearRecordPageNavigation',
getNextAndPrevRecord: 'ui/getNextAndPrevRecord',
}),
@@ -198,9 +197,8 @@ export default {
},
recordNavigation () {
if (!this.record) return
return this.getNextAndPrevRecord(this.record.recordID)
const { recordID } = this.record || {}
return this.getNextAndPrevRecord(recordID)
},
},
@@ -215,21 +213,9 @@ export default {
created () {
this.createBlocks()
if (this.clearRecordPageNavigation) {
this.setClearRecordPageNavigation(false)
this.clearRecordIds()
} else {
this.clearRecordIds()
}
},
methods: {
...mapActions({
setClearRecordPageNavigation: 'ui/setClearRecordPageNavigation',
clearRecordIds: 'ui/clearRecordIds',
}),
createBlocks () {
this.fields.forEach(f => {
const block = new compose.PageBlockRecord()
@@ -273,21 +259,12 @@ export default {
this.$router.push({ name: 'admin.modules.record.edit', params: this.$route.params })
},
handleRedirectToPrevOrNext (value) {
const recordID = value
handleRedirectToPrevOrNext (recordID) {
if (!recordID) return
const route = {
name: 'admin.modules.record.view',
params: {
moduleID: this.$route.params.moduleID,
recordID,
},
query: null,
}
this.$router.push(route)
this.$router.push({
params: { ...this.$route.params, recordID },
})
},
},
}
client/web/compose/src/views/Public/Pages/Records/View.vue
+12 -31
View File
@@ -52,7 +52,7 @@
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { mapGetters } from 'vuex'
import Grid from 'corteza-webapp-compose/src/components/Public/Page/Grid'
import RecordToolbar from 'corteza-webapp-compose/src/components/Common/RecordToolbar'
import record from 'corteza-webapp-compose/src/mixins/record'
@@ -113,7 +113,6 @@ export default {
computed: {
...mapGetters({
clearRecordPageNavigation: 'ui/clearRecordPageNavigation',
getNextAndPrevRecord: 'ui/getNextAndPrevRecord',
}),
@@ -153,7 +152,8 @@ export default {
},
recordNavigation () {
return this.getNextAndPrevRecord(this.recordID)
const { recordID } = this.record || {}
return this.getNextAndPrevRecord(recordID)
},
},
@@ -178,13 +178,6 @@ export default {
this.loadRecord()
this.$root.$emit(`refetch-non-record-blocks:${this.page.pageID}`)
})
if (this.clearRecordPageNavigation) {
this.setClearRecordPageNavigation(false)
this.clearRecordIds()
} else {
this.clearRecordIds()
}
},
// Destroy event before route leave to ensure it doesn't destroy the newly created one
@@ -194,11 +187,6 @@ export default {
},
methods: {
...mapActions({
setClearRecordPageNavigation: 'ui/setClearRecordPageNavigation',
clearRecordIds: 'ui/clearRecordIds',
}),
async loadRecord () {
this.record = undefined
@@ -215,7 +203,9 @@ export default {
await this.$ComposeAPI
.recordRead({ namespaceID, moduleID, recordID: this.recordID })
.then(record => {
this.record = new compose.Record(module, record)
setTimeout(() => {
this.record = new compose.Record(module, record)
}, 300)
})
.catch(this.toastErrorHandler(this.$t('notification:record.loadFailed')))
} else {
@@ -267,26 +257,17 @@ export default {
}
},
handleRedirectToPrevOrNext (value) {
const recordID = value
handleRedirectToPrevOrNext (recordID) {
if (!recordID) return
if (this.showRecordModal) {
this.$router.replace({
query: { recordID, recordPageID: this.$route.query.recordPageID },
this.$router.push({
query: { ...this.$route.query, recordID },
})
} else {
const route = {
name: 'page.record',
params: {
pageID: this.page.pageID,
recordID,
},
query: null,
}
this.$router.push(route)
this.$router.push({
params: { ...this.$route.params, recordID },
})
}
},
},
client/web/compose/src/views/Public/Pages/View.vue
+19 -1
View File
@@ -76,7 +76,7 @@
</div>
</template>
<script>
import { mapActions } from 'vuex'
import { mapGetters, mapActions } from 'vuex'
import Grid from 'corteza-webapp-compose/src/components/Public/Page/Grid'
import RecordModal from 'corteza-webapp-compose/src/components/Public/Record/Modal'
import MagnificationModal from 'corteza-webapp-compose/src/components/Public/Page/Block/Modal'
@@ -114,6 +114,10 @@ export default {
},
computed: {
...mapGetters({
recordPaginationUsable: 'ui/recordPaginationUsable',
}),
isRecordCreatePage () {
return this.$route.name === 'page.record.create'
},
@@ -160,6 +164,18 @@ export default {
document.title = [title, this.namespace.name, this.$t('general:label.app-name.public')].filter(v => v).join(' | ')
},
},
'page.pageID': {
immediate: true,
handler () {
// If the page changed we need to clear the record pagination since its not relevant anymore
if (this.recordPaginationUsable) {
this.setRecordPaginationUsable(false)
} else {
this.clearRecordIDs()
}
},
},
},
created () {
@@ -176,6 +192,8 @@ export default {
methods: {
...mapActions({
updatePageSet: 'page/updateSet',
setRecordPaginationUsable: 'ui/setRecordPaginationUsable',
clearRecordIDs: 'ui/clearRecordIDs',
}),
},
}