Fix sort clients (#1290)

Co-authored-by: Vadim Babadzhanyan <[email protected]>

src/lib/Server.js

@@ -92,7 +92,7 @@ module.exports = class Server {
 
       .get('/api/ui-traffic-stats', defineEventHandler((event) => {
         setHeader(event, 'Content-Type', 'application/json');
-        return `"${UI_TRAFFIC_STATS}"`;
+        return `${UI_TRAFFIC_STATS}`;
       }))
 
       .get('/api/ui-chart-type', defineEventHandler((event) => {
@@ -102,12 +102,12 @@ module.exports = class Server {
 
       .get('/api/ui-show-links', defineEventHandler((event) => {
         setHeader(event, 'Content-Type', 'application/json');
-        return `"${UI_SHOW_LINKS}"`;
+        return `${UI_SHOW_LINKS}`;
       }))
 
       .get('/api/ui-sort-clients', defineEventHandler((event) => {
         setHeader(event, 'Content-Type', 'application/json');
-        return `"${UI_ENABLE_SORT_CLIENTS}"`;
+        return `${UI_ENABLE_SORT_CLIENTS}`;
       }))
 
       // Authentication

src/www/index.html

@@ -113,13 +113,18 @@
                 <span class="max-md:hidden text-sm">{{$t("backup")}}</span>
               </a>
               <!-- Sort client -->
-              <div v-if="enableSortClient === true">
+              <button v-if="enableSortClient" @click="sortClient = !sortClient;"
-                  <button @click="sortClient = !sortClient;"
+                      class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 max-md:border-x-0 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 md:rounded inline-flex items-center transition">
-                          class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 max-md:border-l-0 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded-r-full md:rounded inline-flex items-center transition">
+                  <svg v-if="sortClient === true" inline class="w-4 md:mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-                      <span v-if="sortClient === false" class="max-md:hidden text-sm">{{$t("sort")}} ↑</span>
+                    <path d="M12 19.75C11.9015 19.7504 11.8038 19.7312 11.7128 19.6934C11.6218 19.6557 11.5392 19.6001 11.47 19.53L5.47 13.53C5.33752 13.3878 5.2654 13.1997 5.26882 13.0054C5.27225 12.8111 5.35096 12.6258 5.48838 12.4883C5.62579 12.3509 5.81118 12.2722 6.00548 12.2688C6.19978 12.2654 6.38782 12.3375 6.53 12.47L12 17.94L17.47 12.47C17.6122 12.3375 17.8002 12.2654 17.9945 12.2688C18.1888 12.2722 18.3742 12.3509 18.5116 12.4883C18.649 12.6258 18.7277 12.8111 18.7312 13.0054C18.7346 13.1997 18.6625 13.3878 18.53 13.53L12.53 19.53C12.4608 19.6001 12.3782 19.6557 12.2872 19.6934C12.1962 19.7312 12.0985 19.7504 12 19.75Z" fill="#000000"/>
-                      <span v-if="sortClient === true" class="max-md:hidden text-sm">{{$t("sort")}} ↓</span>
+                    <path d="M12 19.75C11.8019 19.7474 11.6126 19.6676 11.4725 19.5275C11.3324 19.3874 11.2526 19.1981 11.25 19V5C11.25 4.80109 11.329 4.61032 11.4697 4.46967C11.6103 4.32902 11.8011 4.25 12 4.25C12.1989 4.25 12.3897 4.32902 12.5303 4.46967C12.671 4.61032 12.75 4.80109 12.75 5V19C12.7474 19.1981 12.6676 19.3874 12.5275 19.5275C12.3874 19.6676 12.1981 19.7474 12 19.75Z" fill="#000000"/>
-                  </button>
+                  </svg>
-              </div>
+                  <svg v-if="sortClient === false" inline class="w-4 md:mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                    <path d="M18 11.75C17.9015 11.7505 17.8038 11.7313 17.7128 11.6935C17.6218 11.6557 17.5392 11.6001 17.47 11.53L12 6.06001L6.53 11.53C6.38782 11.6625 6.19978 11.7346 6.00548 11.7312C5.81118 11.7278 5.62579 11.649 5.48838 11.5116C5.35096 11.3742 5.27225 11.1888 5.26882 10.9945C5.2654 10.8002 5.33752 10.6122 5.47 10.47L11.47 4.47001C11.6106 4.32956 11.8012 4.25067 12 4.25067C12.1987 4.25067 12.3894 4.32956 12.53 4.47001L18.53 10.47C18.6705 10.6106 18.7493 10.8013 18.7493 11C18.7493 11.1988 18.6705 11.3894 18.53 11.53C18.4608 11.6001 18.3782 11.6557 18.2872 11.6935C18.1962 11.7313 18.0985 11.7505 18 11.75Z" fill="#000000"/>
+                    <path d="M12 19.75C11.8019 19.7474 11.6126 19.6676 11.4725 19.5275C11.3324 19.3874 11.2526 19.1981 11.25 19V5C11.25 4.80109 11.329 4.61032 11.4697 4.46967C11.6103 4.32902 11.8011 4.25 12 4.25C12.1989 4.25 12.3897 4.32902 12.5303 4.46967C12.671 4.61032 12.75 4.80109 12.75 5V19C12.7474 19.1981 12.6676 19.3874 12.5275 19.5275C12.3874 19.6676 12.1981 19.7474 12 19.75Z" fill="#000000"/>
+                  </svg>
+                  <span class="max-md:hidden text-sm">{{$t("sort")}}</span>
+              </button>
 
               <!-- New client -->
               <button @click="clientCreate = true; clientCreateName = '';"

src/www/js/app.js

@@ -90,6 +90,9 @@ new Vue({
 
     uiChartType: 0,
     uiShowLinks: false,
+    enableSortClient: false,
+    sortClient: true, // Sort clients by name, true = asc, false = desc
+
     uiShowCharts: localStorage.getItem('uiShowCharts') === '1',
     uiTheme: localStorage.theme || 'auto',
     prefersDarkScheme: window.matchMedia('(prefers-color-scheme: dark)'),
@@ -175,8 +178,6 @@ new Vue({
       },
     },
 
-    enableSortClient: true,
-    sortClient: true, // Sort clients by name, true = asc, false = desc
   },
   methods: {
     dateTime: (value) => {
@@ -252,7 +253,7 @@ new Vue({
         return client;
       });
 
-      if (enableSortClient) {
+      if (this.enableSortClient) {
         this.clients = sortByProperty(this.clients, 'name', this.sortClient);
       }
     },
@@ -424,6 +425,14 @@ new Vue({
         this.uiShowLinks = false;
       });
 
+    this.api.getUiSortClients()
+      .then((res) => {
+        this.enableSortClient = res;
+      })
+      .catch(() => {
+        this.enableSortClient = false;
+      });
+
     Promise.resolve().then(async () => {
       const lang = await this.api.getLang();
       if (lang !== localStorage.getItem('lang') && i18n.availableLocales.includes(lang)) {
@@ -431,8 +440,6 @@ new Vue({
         i18n.locale = lang;
       }
 
-      this.enableSortClient = await this.api.getUiSortClients();
-
       const currentRelease = await this.api.getRelease();
       const latestRelease = await fetch('https://wg-easy.github.io/wg-easy/changelog.json')
         .then((res) => res.json())