From ca7ee3205251c27525b2a588157518517561f032 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=B5=20Ho=C3=A0ng?=
 <92570598+hoangneeee@users.noreply.github.com>
Date: Sat, 17 Aug 2024 00:40:24 +0700
Subject: [PATCH] feat(www): add sort clients by name (#1227)

Co-authored-by: Philip H. <47042125+pheiduck@users.noreply.github.com>
---
 README.md          |  1 +
 docker-compose.yml |  1 +
 src/config.js      |  1 +
 src/lib/Server.js  |  8 +++++++-
 src/www/index.html |  9 +++++++++
 src/www/js/api.js  |  7 +++++++
 src/www/js/app.js  | 25 +++++++++++++++++++++++++
 src/www/js/i18n.js | 10 +++++++++-
 8 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 913de64..199ae82 100644
--- a/README.md
+++ b/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.
 
diff --git a/docker-compose.yml b/docker-compose.yml
index dd135fd..379c0d5 100644
--- a/docker-compose.yml
+++ b/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
diff --git a/src/config.js b/src/config.js
index 7941845..d7a7831 100644
--- a/src/config.js
+++ b/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';
diff --git a/src/lib/Server.js b/src/lib/Server.js
index 3bee349..aeaff6c 100644
--- a/src/lib/Server.js
+++ b/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
diff --git a/src/www/index.html b/src/www/index.html
index 2867a59..3dd7030 100644
--- a/src/www/index.html
+++ b/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">
diff --git a/src/www/js/api.js b/src/www/js/api.js
index 8461f53..1c863cf 100644
--- a/src/www/js/api.js
+++ b/src/www/js/api.js
@@ -160,4 +160,11 @@ class API {
     });
   }
 
+  async getUiSortClients() {
+    return this.call({
+      method: 'get',
+      path: '/ui-sort-clients',
+    });
+  }
+
 }
diff --git a/src/www/js/app.js b/src/www/js/app.js
index fe1ba96..68cb2bf 100644
--- a/src/www/js/app.js
+++ b/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())
diff --git a/src/www/js/i18n.js b/src/www/js/i18n.js
index 7ee9589..1639fd9 100644
--- a/src/www/js/i18n.js
+++ b/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',