🐛 Fix sort column on query relation table when pagination is set (#721)…

… (#722) * 🐛 Fix issue in case of no legend layout is set by admin * 🐛 Fix sort in case of pagination on relation table * jsdoc * Update src/components/Relation.vue Reafctor order datatable attribute Co-authored-by: Raruto <[email protected]> * comments * jsdoc * jsdoc * 🐛 Fix sort in case of tools (first column) * cast to number --------- Co-authored-by: Raruto <[email protected]> (cherry picked from commit faf6571) Co-authored-by: Francesco Boccacci <[email protected]>
g3w-suite · Feb 7, 2025 · 9c74166 · 9c74166
1 parent 1d4d78c
commit 9c74166
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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: ''}`;
 }