feat(www): add sort clients by name (#1227)

Co-authored-by: Philip H. <47042125+pheiduck@users.noreply.github.com>

README.md

@@ -123,6 +123,7 @@ These options can be configured by setting environment variables using `-e KEY="
 | `UI_CHART_TYPE` | `0` | `1` | UI_CHART_TYPE=0 # Charts disabled, UI_CHART_TYPE=1 # Line chart, UI_CHART_TYPE=2 # Area chart, UI_CHART_TYPE=3 # Bar chart                           |
 | `UI_SHOW_LINKS` | `false` | `true` | Enable display of a short download link in Web UI                                                                                                       |
 | `MAX_AGE` | `0` | `1440` | The maximum age of Web UI sessions in minutes. `0` means that the session will exist until the browser is closed.                                  |
+| `UI_ENABLE_SORT_CLIENTS` | `false` | `true`                         | Enable UI sort clients by name                                                                                                                                                                         |
 
 > If you change `WG_PORT`, make sure to also change the exposed port.
 

docker-compose.yml

@@ -28,6 +28,7 @@ services:
       # - UI_TRAFFIC_STATS=true
       # - UI_CHART_TYPE=0 # (0 Charts disabled, 1 # Line chart, 2 # Area chart, 3 # Bar chart)
       # - UI_SHOW_LINKS=true
+      # - UI_ENABLE_SORT_CLIENTS=true
 
     image: ghcr.io/wg-easy/wg-easy
     container_name: wg-easy

src/config.js

@@ -39,3 +39,4 @@ module.exports.LANG = process.env.LANG || 'en';
 module.exports.UI_TRAFFIC_STATS = process.env.UI_TRAFFIC_STATS || 'false';
 module.exports.UI_CHART_TYPE = process.env.UI_CHART_TYPE || 0;
 module.exports.UI_SHOW_LINKS = process.env.UI_SHOW_LINKS || 'false';
+module.exports.UI_ENABLE_SORT_CLIENTS = process.env.UI_ENABLE_SORT_CLIENTS || 'false';

src/lib/Server.js

@@ -34,6 +34,7 @@ const {
   UI_TRAFFIC_STATS,
   UI_CHART_TYPE,
   UI_SHOW_LINKS,
+  UI_ENABLE_SORT_CLIENTS,
 } = require('../config');
 
 const requiresPassword = !!PASSWORD_HASH;
@@ -101,7 +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}"`;
       }))
 
       // Authentication

src/www/index.html

@@ -112,6 +112,15 @@
                 </svg>
                 <span class="max-md:hidden text-sm">{{$t("backup")}}</span>
               </a>
+              <!-- Sort client -->
+              <div v-if="enableSortClient === true">
+                  <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-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">
+                      <span v-if="sortClient === false" class="max-md:hidden text-sm">{{$t("sort")}} ↑</span>
+                      <span v-if="sortClient === true" class="max-md:hidden text-sm">{{$t("sort")}} ↓</span>
+                  </button>
+              </div>
+
               <!-- New client -->
               <button @click="clientCreate = true; clientCreateName = '';"
                 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">

src/www/js/api.js

@@ -160,4 +160,11 @@ class API {
     });
   }
 
+  async getUiSortClients() {
+    return this.call({
+      method: 'get',
+      path: '/ui-sort-clients',
+    });
+  }
+
 }

src/www/js/app.js

@@ -23,6 +23,22 @@ function bytes(bytes, decimals, kib, maxunit) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 
+/**
+ * Sorts an array of objects by a specified property in ascending or descending order.
+ *
+ * @param {Array} array - The array of objects to be sorted.
+ * @param {string} property - The property to sort the array by.
+ * @param {boolean} [sort=true] - Whether to sort the array in ascending (default) or descending order.
+ * @return {Array} - The sorted array of objects.
+ */
+function sortByProperty(array, property, sort = true) {
+  if (sort) {
+    return array.sort((a, b) => (typeof a[property] === 'string' ? a[property].localeCompare(b[property]) : a[property] - b[property]));
+  }
+
+  return array.sort((a, b) => (typeof a[property] === 'string' ? b[property].localeCompare(a[property]) : b[property] - a[property]));
+}
+
 const i18n = new VueI18n({
   locale: localStorage.getItem('lang') || 'en',
   fallbackLocale: 'en',
@@ -158,6 +174,9 @@ new Vue({
         },
       },
     },
+
+    enableSortClient: true,
+    sortClient: true, // Sort clients by name, true = asc, false = desc
   },
   methods: {
     dateTime: (value) => {
@@ -232,6 +251,10 @@ new Vue({
 
         return client;
       });
+
+      if (enableSortClient) {
+        this.clients = sortByProperty(this.clients, 'name', this.sortClient);
+      }
     },
     login(e) {
       e.preventDefault();
@@ -408,6 +431,8 @@ 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())

src/www/js/i18n.js

@@ -36,6 +36,7 @@ const messages = { // eslint-disable-line no-unused-vars
     titleBackupConfig: 'Backup your configuration',
     rememberMe: 'Remember me',
     titleRememberMe: 'Stay logged after closing the browser',
+    sort: 'Sort',
   },
   ua: {
     name: 'Ім`я',
@@ -349,7 +350,7 @@ const messages = { // eslint-disable-line no-unused-vars
     titleRestoreConfig: '구성 파일 복원',
     titleBackupConfig: '구성 파일 백업',
   },
-  vi: {
+  vi: { // https://github.com/hoangneeee
     name: 'Tên',
     password: 'Mật khẩu',
     signIn: 'Đăng nhập',
@@ -375,6 +376,13 @@ const messages = { // eslint-disable-line no-unused-vars
     downloadConfig: 'Tải xuống cấu hình',
     madeBy: 'Được tạo bởi',
     donate: 'Ủng hộ',
+    toggleCharts: 'Mở/Ẩn Biểu đồ',
+    theme: { dark: 'Dark theme', light: 'Light theme', auto: 'Auto theme' },
+    restore: 'Khôi phục',
+    backup: 'Sao lưu',
+    titleRestoreConfig: 'Khôi phục cấu hình của bạn',
+    titleBackupConfig: 'Sao lưu cấu hình của bạn',
+    sort: 'Sắp xếp',
   },
   nl: {
     name: 'Naam',