Unify sorts across the app lists

fix #462
SUPLA · Aug 8, 2021 · dbfe3a8 · dbfe3a8
1 parent b38b25a
commit dbfe3a8
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 28 deletions.
diff --git a/src/frontend/src/access-ids/access-id-filters.vue b/src/frontend/src/access-ids/access-id-filters.vue
@@ -2,8 +2,9 @@
     <div class="grid-filters"
         v-if="items.length">
         <btn-filters v-model="sort"
+            id="accessIdsSort"
             @input="$emit('filter')"
-            :filters="[{label: $t('ID'), value: 'id'}, {label: $t('A-Z'), value: 'caption'}, {label: $t('No of client apps'), value: 'noOfClientApps'}]"></btn-filters>
+            :filters="[{label: $t('A-Z'), value: 'caption'}, {label: $t('ID'), value: 'id'}, {label: $t('No of client apps'), value: 'noOfClientApps'}]"></btn-filters>
         <btn-filters v-model="enabled"
             @input="$emit('filter')"
             :filters="[{label: $t('All'), value: undefined}, {label: $t('Enabled'), value: true}, {label: $t('Disabled'), value: false}]"></btn-filters>
@@ -26,7 +27,7 @@
             return {
                 enabled: undefined,
                 search: '',
-                sort: 'id',
+                sort: 'caption',
             };
         },
         mounted() {
@@ -48,11 +49,14 @@
                 if (this.sort === 'noOfClientApps') {
                     return b.relationsCount.clientApps - a.relationsCount.clientApps;
                 } else if (this.sort === 'caption') {
-                    return a.caption.toLowerCase() < b.caption.toLowerCase() ? -1 : 1;
+                    return this.captionForSort(a) < this.captionForSort(b) ? -1 : 1;
                 } else {
-                    return b.id - a.id;
+                    return +a.id - +b.id;
                 }
             },
+            captionForSort(model) {
+                return latinize(model.caption).toLowerCase();
+            },
         }
     };
 </script>
diff --git a/src/frontend/src/channel-groups/channel-group-filters.vue b/src/frontend/src/channel-groups/channel-group-filters.vue
@@ -1,6 +1,10 @@
 <template>
     <div class="grid-filters"
         v-if="items.length">
+        <btn-filters v-model="sort"
+            id="channelGroupsSort"
+            @input="$emit('filter')"
+            :filters="[{label: $t('A-Z'), value: 'caption'},{label: $t('ID'), value: 'id'}, {label: $t('No of channels'), value: 'noOfChannels'}]"></btn-filters>
         <btn-filters v-model="hidden"
             @input="$emit('filter')"
             :filters="[{label: $t('All'), value: undefined}, {label: $t('Invisible'), value: true}, {label: $t('Visible'), value: false}]"></btn-filters>
@@ -23,10 +27,12 @@
             return {
                 hidden: undefined,
                 search: '',
+                sort: 'caption',
             };
         },
         mounted() {
             this.$emit('filter-function', (channelGroup) => this.matches(channelGroup));
+            this.$emit('compare-function', (a, b) => this.compare(a, b));
         },
         methods: {
             matches(channelGroup) {
@@ -38,7 +44,19 @@
                     return searchString.indexOf(latinize(this.search).toLowerCase()) >= 0;
                 }
                 return true;
-            }
+            },
+            compare(a, b) {
+                if (this.sort === 'noOfChannels') {
+                    return b.relationsCount.channels - a.relationsCount.channels;
+                } else if (this.sort === 'caption') {
+                    return this.captionForSort(a) < this.captionForSort(b) ? -1 : 1;
+                } else {
+                    return +a.id - +b.id;
+                }
+            },
+            captionForSort(model) {
+                return latinize(model.caption).toLowerCase();
+            },
         }
     };
 </script>
diff --git a/src/frontend/src/channels/channel-filters.vue b/src/frontend/src/channels/channel-filters.vue
@@ -3,7 +3,7 @@
         <btn-filters v-model="sort"
             id="channelsFiltersSort"
             @input="$emit('filter')"
-            :filters="[{label: $t('Registered'), value: 'regDate'}, {label: $t('Last access'), value: 'lastAccess'}, {label: $t('Location'), value: 'location'}]"></btn-filters>
+            :filters="[{label: $t('A-Z'), value: 'caption'}, {label: $t('Registered'), value: 'regDate'}, {label: $t('Last access'), value: 'lastAccess'}, {label: $t('Location'), value: 'location'}]"></btn-filters>
         <btn-filters v-model="functionality"
             class="always-dropdown"
             @input="$emit('filter')"
@@ -36,7 +36,7 @@
             return {
                 functionality: '*',
                 search: '',
-                sort: 'regDate'
+                sort: 'caption'
             };
         },
         mounted() {
@@ -65,12 +65,17 @@
             compare(a, b) {
                 if (this.sort === 'lastAccess') {
                     return moment(b.iodevice.lastConnected).diff(moment(a.iodevice.lastConnected));
+                } else if (this.sort === 'caption') {
+                    return this.captionForSort(a) < this.captionForSort(b) ? -1 : 1;
                 } else if (this.sort === 'regDate') {
                     return moment(b.iodevice.regDate).diff(moment(a.iodevice.regDate));
                 } else {
-                    return a.location.caption.toLowerCase() < b.location.caption.toLowerCase() ? -1 : 1;
+                    return this.captionForSort(a.location) < this.captionForSort(b.location) ? -1 : 1;
                 }
-            }
+            },
+            captionForSort(channel) {
+                return latinize(channel.caption || (channel.function && this.$t(channel.function.caption)) || '').toLowerCase();
+            },
         }
     };
 </script>
diff --git a/src/frontend/src/client-apps/client-app-filters.vue b/src/frontend/src/client-apps/client-app-filters.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="grid-filters">
         <btn-filters v-model="sort"
+            id="clientAppsSort"
             @input="$emit('filter')"
             :filters="[{label: 'A-Z', value: 'az'}, {label: $t('Last access'), value: 'lastAccess'}]"></btn-filters>
         <btn-filters v-model="enabled"
@@ -61,11 +62,14 @@
             },
             compare(a1, a2) {
                 if (this.sort == 'az') {
-                    return latinize(a1.name).toLowerCase() < latinize(a2.name).toLowerCase() ? -1 : 1;
+                    return this.captionForSort(a1) < this.captionForSort(a2) ? -1 : 1;
                 } else {
                     return moment(a2.lastAccessDate).diff(moment(a1.lastAccessDate));
                 }
-            }
+            },
+            captionForSort(model) {
+                return latinize(model.caption || model.name).toLowerCase();
+            },
         }
     };
 </script>
diff --git a/src/frontend/src/common/pages/list-page.vue b/src/frontend/src/common/pages/list-page.vue
@@ -17,8 +17,8 @@
             <component v-if="filters && filteredItems"
                 :is="filters"
                 :items="items"
-                @filter-function="filterFunction = $event"
-                @compare-function="compareFunction = $event"
+                @filter-function="filterFunction = $event; filter()"
+                @compare-function="compareFunction = $event; filter()"
                 @filter="filter()"></component>
         </div>
         <loading-cover :loading="!items">
@@ -78,6 +78,6 @@
                     this.filteredItems = this.filteredItems.sort(this.compareFunction);
                 }
             },
-        }
+        },
     };
 </script>
diff --git a/src/frontend/src/devices/list/device-filters.vue b/src/frontend/src/devices/list/device-filters.vue
@@ -57,13 +57,15 @@
                     return moment(b.lastConnected).diff(moment(a.lastConnected));
                 } else if (this.sort === 'regDate') {
                     return moment(b.regDate).diff(moment(a.regDate));
-                }
-                else if (this.sort === 'location') {
-                    return a.location.caption.toLowerCase() < b.location.caption.toLowerCase() ? -1 : 1;
+                } else if (this.sort === 'location') {
+                    return this.captionForSort(a.location) < this.captionForSort(b.location) ? -1 : 1;
                 } else {
-                    return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
+                    return this.captionForSort(a) < this.captionForSort(b) ? -1 : 1;
                 }
-            }
+            },
+            captionForSort(model) {
+                return latinize(model.comment || model.caption || model.name).toLowerCase();
+            },
         }
     };
 </script>
diff --git a/src/frontend/src/direct-links/direct-link-filters.vue b/src/frontend/src/direct-links/direct-link-filters.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="grid-filters">
         <btn-filters v-model="sort"
-            id="channelsFiltersSort"
+            id="directLinksSort"
             @input="$emit('filter')"
-            :filters="[{label: $t('ID'), value: 'id'}, {label: $t('A-Z'), value: 'caption'}, {label: $t('Last used'), value: 'lastUsed'}]"></btn-filters>
+            :filters="[{label: $t('A-Z'), value: 'caption'}, {label: $t('ID'), value: 'id'}, {label: $t('Last used'), value: 'lastUsed'}]"></btn-filters>
         <btn-filters v-model="active"
             @input="$emit('filter')"
             :filters="[{label: $t('All'), value: undefined}, {label: $t('Active'), value: true}, {label: $t('Inactive'), value: false}]"></btn-filters>
@@ -26,7 +26,7 @@
             return {
                 active: undefined,
                 search: '',
-                sort: 'id',
+                sort: 'caption',
             };
         },
         mounted() {
@@ -51,11 +51,14 @@
                 if (this.sort === 'lastUsed') {
                     return moment(b.lastUsed || '2000-01-01T00:00:00').diff(moment(a.lastUsed || '2000-01-01T00:00:00'));
                 } else if (this.sort === 'caption') {
-                    return a.caption.toLowerCase() < b.caption.toLowerCase() ? -1 : 1;
+                    return this.captionForSort(a) < this.captionForSort(b) ? -1 : 1;
                 } else {
-                    return b.id - a.id;
+                    return +a.id - +b.id;
                 }
             },
+            captionForSort(model) {
+                return latinize(model.caption).toLowerCase();
+            },
         }
     };
 </script>
diff --git a/src/frontend/src/locations/location-filters.vue b/src/frontend/src/locations/location-filters.vue
@@ -2,8 +2,9 @@
     <div class="grid-filters"
         v-if="items.length">
         <btn-filters v-model="sort"
+            id="locationsSort"
             @input="$emit('filter')"
-            :filters="[{label: $t('ID'), value: 'id'}, {label: $t('A-Z'), value: 'caption'}, {label: $t('No of devices'), value: 'noOfDevices'}]"></btn-filters>
+            :filters="[{label: $t('A-Z'), value: 'caption'},{label: $t('ID'), value: 'id'}, {label: $t('No of devices'), value: 'noOfDevices'}]"></btn-filters>
         <btn-filters v-model="enabled"
             @input="$emit('filter')"
             :filters="[{label: $t('All'), value: undefined}, {label: $t('Enabled'), value: true}, {label: $t('Disabled'), value: false}]"></btn-filters>
@@ -26,7 +27,7 @@
             return {
                 enabled: undefined,
                 search: '',
-                sort: 'id',
+                sort: 'caption',
             };
         },
         mounted() {
@@ -48,11 +49,14 @@
                 if (this.sort === 'noOfDevices') {
                     return b.relationsCount.ioDevices - a.relationsCount.ioDevices;
                 } else if (this.sort === 'caption') {
-                    return a.caption.toLowerCase() < b.caption.toLowerCase() ? -1 : 1;
+                    return this.captionForSort(a) < this.captionForSort(b) ? -1 : 1;
                 } else {
-                    return b.id - a.id;
+                    return +a.id - +b.id;
                 }
             },
+            captionForSort(model) {
+                return latinize(model.caption).toLowerCase();
+            },
         }
     };
 </script>
diff --git a/src/frontend/src/schedules/schedule-list/schedule-filters.vue b/src/frontend/src/schedules/schedule-list/schedule-filters.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="grid-filters">
         <btn-filters v-model="sort"
+            id="schedulesSort"
             @input="$emit('filter')"
             :filters="[{label: 'A-Z', value: 'az'}, {label: $t('Next run date'), value: 'nextRunDate'}]"></btn-filters>
         <btn-filters v-model="enabled"