improve: UI (#1152)

* improve: UI (#1033)

* fix: instance activity chart not displaying properly

* fix

src/app.js

@@ -42,6 +42,7 @@ import ChartsTab from './views/tabs/Charts.vue';
 // components
 import SimpleSwitch from './components/settings/SimpleSwitch.vue';
 import GroupsSidebar from './components/sidebar/GroupsSidebar.vue';
+import PreviousInstanceInfo from './views/dialogs/PreviousInstanceInfo.vue';
 
 // main app classes
 import _sharedFeed from './classes/sharedFeed.js';
@@ -114,13 +115,6 @@ console.log(`isLinux: ${LINUX}`);
     });
     // #endregion
 
-    // #region | date utility library
-    // - dayjs plugin init
-    dayjs.extend(duration);
-    dayjs.extend(utc);
-    dayjs.extend(timezone);
-    // #endregion
-
     // everything in this program is global stored in $app, I hate it, it is what it is
     let $app = {};
     const API = new _apiInit($app);
@@ -184,12 +178,15 @@ console.log(`isLinux: ${LINUX}`);
 
             // components
             // - sidebar(friendsListSidebar)
-            GroupsSidebar
+            GroupsSidebar,
+            // - dialogs
+            PreviousInstanceInfo
         },
         provide() {
             return {
                 API,
-                showUserDialog: this.showUserDialog
+                showUserDialog: this.showUserDialog,
+                adjustDialogZ: this.adjustDialogZ
             };
         },
         el: '#x-app',
@@ -224,9 +221,6 @@ console.log(`isLinux: ${LINUX}`);
             API.$on('SHOW_GROUP_DIALOG', (groupId) =>
                 this.showGroupDialog(groupId)
             );
-            API.$on('SHOW_LAUNCH_DIALOG', (tag, shortName) =>
-                this.showLaunchDialog(tag, shortName)
-            );
             this.updateLoop();
             this.getGameLogTable();
             this.refreshCustomCss();
@@ -338,7 +332,7 @@ console.log(`isLinux: ${LINUX}`);
 
     // #endregion
 
-    // #region | Init: Noty, Vue, Vue-Markdown, ElementUI, VueI18n, VueLazyLoad, Vue filters, dark stylesheet
+    // #region | Init: Noty, Vue, Vue-Markdown, ElementUI, VueI18n, VueLazyLoad, Vue filters, dark stylesheet, dayjs
 
     Noty.overrideDefaults({
         animation: {
@@ -365,6 +359,10 @@ console.log(`isLinux: ${LINUX}`);
 
     Vue.use(DataTables);
 
+    dayjs.extend(duration);
+    dayjs.extend(utc);
+    dayjs.extend(timezone);
+
     // #endregion
 
     // #endregion
@@ -485,23 +483,24 @@ console.log(`isLinux: ${LINUX}`);
         }
     };
 
-    // FIXME: it may performance issue. review here
     API.applyUserLanguage = function (ref) {
+        if (!ref || !ref.tags || !$app.subsetOfLanguages) {
+            return;
+        }
+
         ref.$languages = [];
-        var { tags } = ref;
-        for (var tag of tags) {
-            if (tag.startsWith('language_') === false) {
-                continue;
+        const languagePrefix = 'language_';
+        const prefixLength = languagePrefix.length;
+
+        for (const tag of ref.tags) {
+            if (tag.startsWith(languagePrefix)) {
+                const key = tag.substring(prefixLength);
+                const value = $app.subsetOfLanguages[key];
+
+                if (value !== undefined) {
+                    ref.$languages.push({ key, value });
+                }
             }
-            var key = tag.substr(9);
-            var value = $app.subsetOfLanguages[key];
-            if (typeof value === 'undefined') {
-                continue;
-            }
-            ref.$languages.push({
-                key,
-                value
-            });
         }
     };
 
@@ -3891,12 +3890,6 @@ console.log(`isLinux: ${LINUX}`);
     };
 
     $app.methods.selectMenu = function (index) {
-        // NOTE
-        // 툴팁이 쌓여서 느려지기 때문에 날려줌.
-        // 근데 이 방법이 안전한지는 모르겠음
-        document.querySelectorAll('[role="tooltip"]').forEach((node) => {
-            node.remove();
-        });
         var item = this.$refs.menu.items[index];
         if (item) {
             item.$el.classList.remove('notify');
@@ -3906,27 +3899,6 @@ console.log(`isLinux: ${LINUX}`);
         } else if (index === 'friendsList') {
             this.friendsListSearchChange();
         }
-
-        workerTimers.setTimeout(() => {
-            // fix some weird sorting bug when disabling data tables
-
-            // looks like it's not needed anymore
-            // if (
-            //     typeof this.$refs.playerModerationTableRef?.sortData !==
-            //     'undefined'
-            // ) {
-            //     this.$refs.playerModerationTableRef.sortData.prop = 'created';
-            // }
-
-            if (
-                typeof this.$refs.notificationTableRef?.sortData !== 'undefined'
-            ) {
-                this.$refs.notificationTableRef.sortData.prop = 'created_at';
-            }
-            if (typeof this.$refs.friendLogTableRef?.sortData !== 'undefined') {
-                this.$refs.friendLogTableRef.sortData.prop = 'created_at';
-            }
-        }, 100);
     };
 
     $app.data.twoFactorAuthDialogVisible = false;
@@ -4933,25 +4905,6 @@ console.log(`isLinux: ${LINUX}`);
         return 0;
     };
 
-    // descending
-    var compareByCreatedAt = function (a, b) {
-        if (
-            typeof a.created_at !== 'string' ||
-            typeof b.created_at !== 'string'
-        ) {
-            return 0;
-        }
-        var A = a.created_at.toUpperCase();
-        var B = b.created_at.toUpperCase();
-        if (A < B) {
-            return 1;
-        }
-        if (A > B) {
-            return -1;
-        }
-        return 0;
-    };
-
     var compareByMemberCount = function (a, b) {
         if (
             typeof a.memberCount !== 'number' ||
@@ -6894,7 +6847,7 @@ console.log(`isLinux: ${LINUX}`);
                     avatarsArray.sort(compareByUpdatedAt);
                     break;
                 case 'created':
-                    avatarsArray.sort(compareByCreatedAt);
+                    avatarsArray.sort($utils.compareByCreatedAt);
                     break;
                 case 'name':
                     avatarsArray.sort(compareByName);
@@ -8236,18 +8189,6 @@ console.log(`isLinux: ${LINUX}`);
         'VRCX_sidePanelWidth',
         300
     );
-    if (await configRepository.getInt('VRCX_asidewidth')) {
-        // migrate to new defaults
-        $app.data.asideWidth = await configRepository.getInt('VRCX_asidewidth');
-        if ($app.data.asideWidth < 300) {
-            $app.data.asideWidth = 300;
-        }
-        await configRepository.setInt(
-            'VRCX_sidePanelWidth',
-            $app.data.asideWidth
-        );
-        await configRepository.remove('VRCX_asidewidth');
-    }
     $app.data.autoUpdateVRCX = await configRepository.getString(
         'VRCX_autoUpdateVRCX',
         'Auto Download'
@@ -11442,8 +11383,9 @@ console.log(`isLinux: ${LINUX}`);
         D.treeData = $utils.buildTreeData(D.ref);
     };
 
-    $app.methods.changeUserDialogAvatarSorting = function () {
-        var D = this.userDialog;
+    $app.methods.changeUserDialogAvatarSorting = function (sortOption) {
+        const D = this.userDialog;
+        D.avatarSorting = sortOption;
         this.sortUserDialogAvatars(D.avatars);
     };
 
@@ -15396,18 +15338,20 @@ console.log(`isLinux: ${LINUX}`);
     // };
 
     $app.methods.friendsListSearchChange = function () {
+        let query;
+        let cleanedQuery;
         this.friendsListTable.data = [];
-        var filters = [...this.friendsListSearchFilters];
+        let filters = [...this.friendsListSearchFilters];
         if (filters.length === 0) {
             filters = ['Display Name', 'Rank', 'Status', 'Bio', 'Memo'];
         }
-        var results = [];
+        const results = [];
         if (this.friendsListSearch) {
-            var query = this.friendsListSearch;
-            var cleanedQuery = removeWhitespace(query);
+            query = this.friendsListSearch;
+            cleanedQuery = removeWhitespace(query);
         }
 
-        for (var ctx of this.friends.values()) {
+        for (const ctx of this.friends.values()) {
             if (typeof ctx.ref === 'undefined') {
                 continue;
             }
@@ -15418,7 +15362,7 @@ console.log(`isLinux: ${LINUX}`);
                 continue;
             }
             if (query && filters) {
-                var match = false;
+                let match = false;
                 if (
                     !match &&
                     filters.includes('Display Name') &&
@@ -15473,7 +15417,9 @@ console.log(`isLinux: ${LINUX}`);
             results.push(ctx.ref);
         }
         this.getAllUserStats();
-        this.friendsListTable.data = results;
+        requestAnimationFrame(() => {
+            this.friendsListTable.data = results;
+        });
     };
 
     $app.methods.getAllUserStats = async function () {
@@ -19016,7 +18962,6 @@ console.log(`isLinux: ${LINUX}`);
     };
 
     $app.methods.setAsideWidth = async function () {
-        document.getElementById('aside').style.width = `${this.asideWidth}px`;
         await configRepository.setInt('VRCX_sidePanelWidth', this.asideWidth);
     };
 
@@ -19574,7 +19519,7 @@ console.log(`isLinux: ${LINUX}`);
                 }
                 array.push(ref);
             }
-            array.sort(compareByCreatedAt);
+            array.sort($utils.compareByCreatedAt);
             this.previousInstancesUserDialogTable.data = array;
             D.loading = false;
             workerTimers.setTimeout(() => D.forceUpdate++, 150);
@@ -19677,7 +19622,7 @@ console.log(`isLinux: ${LINUX}`);
                 }
                 array.push(ref);
             }
-            array.sort(compareByCreatedAt);
+            array.sort($utils.compareByCreatedAt);
             this.previousInstancesWorldDialogTable.data = array;
             D.loading = false;
             workerTimers.setTimeout(() => D.forceUpdate++, 150);
@@ -19707,61 +19652,12 @@ console.log(`isLinux: ${LINUX}`);
     // #endregion
     // #region | App: Previous Instance Info Dialog
 
-    $app.data.previousInstanceInfoDialogTable = {
-        data: [],
-        filters: [
-            {
-                prop: 'displayName',
-                value: ''
-            }
-        ],
-        tableProps: {
-            stripe: true,
-            size: 'mini',
-            defaultSort: {
-                prop: 'created_at',
-                order: 'descending'
-            }
-        },
-        pageSize: 10,
-        paginationProps: {
-            small: true,
-            layout: 'sizes,prev,pager,next,total',
-            pageSizes: [10, 25, 50, 100]
-        }
-    };
-
-    $app.data.previousInstanceInfoDialog = {
-        visible: false,
-        loading: false,
-        forceUpdate: 0,
-        $location: {}
-    };
+    $app.data.previousInstanceInfoDialogVisible = false;
+    $app.data.previousInstanceInfoDialogInstanceId = '';
 
     $app.methods.showPreviousInstanceInfoDialog = function (instanceId) {
-        this.$nextTick(() =>
-            $app.adjustDialogZ(this.$refs.previousInstanceInfoDialog.$el)
-        );
-        var D = this.previousInstanceInfoDialog;
-        D.$location = $utils.parseLocation(instanceId);
-        D.visible = true;
-        D.loading = true;
-        this.refreshPreviousInstanceInfoTable();
-    };
-
-    $app.methods.refreshPreviousInstanceInfoTable = function () {
-        var D = this.previousInstanceInfoDialog;
-        database.getPlayersFromInstance(D.$location.tag).then((data) => {
-            var array = [];
-            for (var entry of Array.from(data.values())) {
-                entry.timer = $app.timeToText(entry.time);
-                array.push(entry);
-            }
-            array.sort(compareByCreatedAt);
-            this.previousInstanceInfoDialogTable.data = array;
-            D.loading = false;
-            workerTimers.setTimeout(() => D.forceUpdate++, 150);
-        });
+        this.previousInstanceInfoDialogVisible = true;
+        this.previousInstanceInfoDialogInstanceId = instanceId;
     };
 
     $app.data.dtHour12 = await configRepository.getBool('VRCX_dtHour12', false);
@@ -22231,7 +22127,7 @@ console.log(`isLinux: ${LINUX}`);
     $app.methods.updateLocalFavoriteFriends = function () {
         this.localFavoriteFriends.clear();
         this.localFavoriteFriendsDivideByGroup.clear();
-        for (var ref of API.cachedFavorites.values()) {
+        for (const ref of API.cachedFavorites.values()) {
             if (
                 !ref.$isDeleted &&
                 ref.type === 'friend' &&
@@ -23471,7 +23367,9 @@ console.log(`isLinux: ${LINUX}`);
                     }
                 }
             }
-            if (!locationTag) return;
+            if (!locationTag) {
+                return;
+            }
 
             if (!friendsList[locationTag]) {
                 friendsList[locationTag] = [];