From 9c74166a287ef7110883f900e729ca774ca740bc Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 7 Feb 2025 17:04:10 +0100 Subject: [PATCH] :bug: Fix sort column on query relation table when pagination is set (#721) (#722) * :bug: Fix issue in case of no legend layout is set by admin * :bug: Fix sort in case of pagination on relation table * jsdoc * Update src/components/Relation.vue Reafctor order datatable attribute Co-authored-by: Raruto * comments * jsdoc * jsdoc * :bug: Fix sort in case of tools (first column) * cast to number --------- Co-authored-by: Raruto (cherry picked from commit faf6571bbf6f97096b8ec0ed00f4b4aae9313526) Co-authored-by: Francesco Boccacci --- src/components/Catalog.vue | 2 +- src/components/Relation.vue | 110 ++++++++++++++++++++++++-------- src/utils/createRelationsUrl.js | 3 +- 3 files changed, 87 insertions(+), 28 deletions(-) diff --git a/src/components/Catalog.vue b/src/components/Catalog.vue index 92ba6f699..1a086c16b 100644 --- a/src/components/Catalog.vue +++ b/src/components/Catalog.vue @@ -321,7 +321,7 @@ export default { legend_position: ApplicationState.project.state.legend_position || 'tab', iframe: ApplicationState.iframe, showlegend: false, - backgroundLegend: ApplicationState.gui.layout.app.legend.transparent ? 'transparent' : '#FFFFFF', //@since 3.11.3 set transparent or white background + backgroundLegend: ApplicationState.gui.layout.app.legend && ApplicationState.gui.layout.app.legend.transparent ? 'transparent' : '#FFFFFF', //@since 3.11.3 set transparent or white background currentBaseLayer: null, activeTab: 'layers', loading: false, diff --git a/src/components/Relation.vue b/src/components/Relation.vue index 18c9d127c..b4ad7d820 100644 --- a/src/components/Relation.vue +++ b/src/components/Relation.vue @@ -253,12 +253,55 @@ state: null, config: { downloads: [] }, }, - //@since 3.11.2 - page: 1, - page_size: PAGELENGTHS[0], - start: 0, - table: { rows: [] }, - nmRelation: ApplicationState.project.getRelationById(this.relation.nmRelationId), + + /** + * @since 3.11.2 + */ + page: 1, + + /** + * @since 3.11.2 + */ + page_size: PAGELENGTHS[0], + + /** + * @since 3.11.2 + */ + start: 0, + + /** + * @since 3.11.2 + */ + table: { + rows: [], + }, + + /** + * @type { string | null } parameter sent to server + * @since 3.11.3 + */ + ordering: null, + + /** + * @type { "desc" | "asc" | "current" } column order + * @since 3.11.3 + */ + sort: 'asc', + + /** + * @type { number } current column index + * @since 3.11.3 + */ + sort_column: 0, + + /** + * @since 3.11.2 + */ + nmRelation: ApplicationState.project.getRelationById(this.relation.nmRelationId), + + /** + * @since 3.11.2 + */ showChartButton: !!this.chartRelationIds.find(id => id === this.relation.referencingLayer), }; }, @@ -347,6 +390,7 @@ async getRelationDataTable({ page, page_size, + ordering } = {}) { GUI.setLoadingContent(true); let table = { rows: [] }; @@ -360,15 +404,16 @@ relation: this.relation, page, page_size, + ordering, }) }); // get relations features = response.result ? (response.vector.data.features || []).map(f => { - f.properties[G3W_FID] = f.id; - return { - geometry: f.geometry, - attributes: f.properties, - id: f.id, - }; + f.properties[G3W_FID] = f.id; + return { + geometry: f.geometry, + attributes: f.properties, + id: f.id, + }; }) : null; const count = features && response.vector.count; if (this.nmRelation) { @@ -454,7 +499,7 @@ bLengthChange: true, dom: 'ltip', columnDefs: [ this.showTools ? { orderable: false, targets: 0, width: '1%' } : { orderable: true, targets: 0 }], - order: [ this.showTools ? 1 : 0, 'asc' ], + order: [ this.sort_column + !!this.showTools, this.sort], lengthMenu: PAGELENGTHS, pageLength: this.page_size, displayStart: this.start, @@ -465,20 +510,27 @@ deferLoading: data_from_server && this.table.count, ajax: data_from_server ? async (opts) => { try { - //Need to destroy table + // Destroy table this.relationDataTable.destroy(true); this.relationDataTable = null; - //need to change table row to empty this.table.rows = []; - //wait next tick await this.$nextTick(); - //set len start - this.page_size = opts.length; - this.start = opts.start; - this.table = await this.getRelationDataTable({ - page: 0 === opts.start ? 1 : (opts.start/opts.length) + 1, + // check if there is a change (page or number of rows) + const changed = opts.length !== this.page_size || opts.start !== this.start; + // set len start + this.page_size = opts.length; + this.start = opts.start; + const column = opts.order[0].column - !!this.showTools; + const sort = column === this.sort_column ? (changed ? this.sort : ('desc' === this.sort ? 'asc' : 'desc') ) : 'asc'; + this.sort_column = column; + this.sort = sort; + // send parameter to server ("-" = descending ) + this.ordering = `${'desc' === sort ? '-' : ''}${this.table.fields[opts.order[0].column - !!this.showTools].name}`; + this.table = await this.getRelationDataTable({ + page: 1 + (0 !== opts.start ? (opts.start/opts.length) : 0), page_size: opts.length, - }) + ordering: this.ordering + }); } catch(e) { console.warn(e); } @@ -734,10 +786,16 @@ }, async created() { - this.table = await this.getRelationDataTable({ - page: this.page, - page_size: this.page_size, - }); + try { + this.table = await this.getRelationDataTable({ + page: this.page, + page_size: this.page_size, + ordering: this.ordering, + }); + } catch(e) { + console.warn(e); + } + }, /** diff --git a/src/utils/createRelationsUrl.js b/src/utils/createRelationsUrl.js index 9c0edf093..090eafd8d 100644 --- a/src/utils/createRelationsUrl.js +++ b/src/utils/createRelationsUrl.js @@ -12,10 +12,11 @@ export function createRelationsUrl({ formatter = 1, page , //@since 3.11.2 page_size, //@since 3.11.2 + ordering, //@since 3.11.3 }) { return `${ApplicationState.project.getLayerById( undefined === relation.father ? (layer.id === relation.referencedLayer ? relation.referencingLayer : relation.referencedLayer) : (layer.id === relation.father ? relation.child : relation.father) - ).getUrl(type)}?relationonetomany=${relation.id}|${sanitizeFidFeature(fid)}&formatter=${formatter}${page ? '&page=' + page: ''}${page_size ? '&page_size=' + page_size: ''}`; + ).getUrl(type)}?relationonetomany=${relation.id}|${sanitizeFidFeature(fid)}&formatter=${formatter}${page ? '&page=' + page: ''}${page_size ? '&page_size=' + page_size: ''} ${ordering ? '&ordering=' + ordering: ''}`; } \ No newline at end of file