account list page supports dragging to change display order

package-lock.json

@@ -35,6 +35,7 @@
         "vue-i18n": "^9.2.2",
         "vue-router": "^4.2.4",
         "vue3-perfect-scrollbar": "^1.6.1",
+        "vuedraggable": "^4.1.0",
         "vuetify": "^3.3.8"
       },
       "devDependencies": {
@@ -7618,6 +7619,11 @@
       "resolved": "https://registry.npmjs.org/skeleton-elements/-/skeleton-elements-4.0.1.tgz",
       "integrity": "sha512-T7YSF/Vu/raUcM6v3HiE4VSY/OvrNflg8Dur3Zza6VVJkq4slxm4pJRpGLNhoOfblIPZLQKh1cu7ADKveyqm/Q=="
     },
+    "node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -8372,6 +8378,17 @@
         "postcss-import": "^12.0.0"
       }
     },
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "dependencies": {
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
+      }
+    },
     "node_modules/vuetify": {
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.8.tgz",

package.json

@@ -44,6 +44,7 @@
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.2.4",
     "vue3-perfect-scrollbar": "^1.6.1",
+    "vuedraggable": "^4.1.0",
     "vuetify": "^3.3.8"
   },
   "devDependencies": {

src/desktop-main.js

@@ -60,6 +60,8 @@ import { PerfectScrollbar } from 'vue3-perfect-scrollbar';
 import VueDatePicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 
+import draggable from 'vuedraggable';
+
 import router from '@/router/desktop.js';
 
 import { getVersion, getBuildTime } from '@/lib/version.js';
@@ -371,6 +373,7 @@ app.use(router);
 app.component('VChart', VChart);
 app.component('PerfectScrollbar', PerfectScrollbar);
 app.component('VueDatePicker', VueDatePicker);
+app.component('draggable', draggable);
 
 app.component('PinCodeInput', PinCodeInput);
 

src/locales/en.js

@@ -769,6 +769,8 @@ export default {
     'No data': 'No data',
     'Zoom in': 'Zoom in',
     'Zoom out': 'Zoom out',
+    'Drag and Drop to Change Order': 'Drag and Drop to Change Order',
+    'Save Display Order': 'Save Display Order',
     'Change Language': 'Change Language',
     'Date is too early': 'Date is too early',
     'Welcome to ezBookkeeping': 'Welcome to ezBookkeeping',
@@ -857,7 +859,6 @@ export default {
     'Receivables': 'Receivables',
     'Investment Account': 'Investment Account',
     'Balance': 'Balance',
-    'View Transactions': 'View Transactions',
     'Unable to get account list': 'Unable to get account list',
     'Account list is up to date': 'Account list is up to date',
     'Account list has been updated': 'Account list has been updated',

src/locales/zh_Hans.js

@@ -769,6 +769,8 @@ export default {
     'No data': '没有数据',
     'Zoom in': '放大',
     'Zoom out': '缩小',
+    'Drag and Drop to Change Order': '拖拽改变顺序',
+    'Save Display Order': '保存显示顺序',
     'Change Language': '修改语言',
     'Date is too early': '日期过早',
     'Welcome to ezBookkeeping': '欢迎使用 ezBookkeeping',
@@ -857,7 +859,6 @@ export default {
     'Receivables': '应收款项',
     'Investment Account': '投资账户',
     'Balance': '余额',
-    'View Transactions': '查看交易',
     'Unable to get account list': '无法获取账户列表',
     'Account list is up to date': '账户列表已是最新',
     'Account list has been updated': '账户列表已更新',

src/stores/account.js

@@ -86,16 +86,26 @@ function updateAccountToAccountList(state, account) {
     }
 }
 
-function updateAccountDisplayOrderInAccountList(state, { account, from, to }) {
+function updateAccountDisplayOrderInAccountList(state, { account, from, to, onlyUpdateGlobalList }) {
     let fromAccount = null;
     let toAccount = null;
 
     if (state.allCategorizedAccounts[account.category]) {
         const accountList = state.allCategorizedAccounts[account.category].accounts;
-        fromAccount = accountList[from];
-        toAccount = accountList[to];
 
-        accountList.splice(to, 0, accountList.splice(from, 1)[0]);
+        if (!onlyUpdateGlobalList) {
+            fromAccount = accountList[from];
+            toAccount = accountList[to];
+            accountList.splice(to, 0, accountList.splice(from, 1)[0]);
+        } else {
+            fromAccount = accountList[to];
+
+            if (from < to) {
+                toAccount = accountList[to - 1];
+            } else if (from > to) {
+                toAccount = accountList[to + 1];
+            }
+        }
     }
 
     if (fromAccount && toAccount) {
@@ -746,7 +756,7 @@ export const useAccountsStore = defineStore('accounts', {
                 });
             });
         },
-        changeAccountDisplayOrder({ accountId, from, to }) {
+        changeAccountDisplayOrder({ accountId, from, to, onlyUpdateGlobalList }) {
             const self = this;
             const account = self.allAccountsMap[accountId];
 
@@ -766,7 +776,8 @@ export const useAccountsStore = defineStore('accounts', {
                 updateAccountDisplayOrderInAccountList(self, {
                     account: account,
                     from: from,
-                    to: to
+                    to: to,
+                    onlyUpdateGlobalList: onlyUpdateGlobalList
                 });
 
                 resolve();

src/styles/desktop/global.scss

@@ -22,6 +22,15 @@ input[type=number] {
     pointer-events: none !important;
 }
 
+.drag-handle {
+    cursor: grab;
+}
+
+.dragging-item {
+    opacity: 0.5;
+    background: #c8ebfb;
+}
+
 @media (min-width: 600px) {
     .text-right-sm {
         text-align: right !important;

src/views/desktop/AccountsPage.vue

@@ -48,6 +48,9 @@
                                         <span>{{ $t('Account List') }}</span>
                                         <v-btn class="ml-3" color="default" variant="outlined"
                                                :disabled="loading" @click="add">{{ $t('Add') }}</v-btn>
+                                        <v-btn class="ml-3" color="primary" variant="tonal"
+                                               :disabled="loading" @click="saveSortResult"
+                                               v-if="displayOrderModified">{{ $t('Save Display Order') }}</v-btn>
                                         <v-btn density="compact" color="default" variant="text"
                                                class="ml-2" :icon="true" :disabled="loading"
                                                v-if="!loading" @click="reload">
@@ -99,91 +102,102 @@
 
                                 <v-row class="pl-4 pr-8" v-if="categorizedAccounts[activeAccountCategory.id] && categorizedAccounts[activeAccountCategory.id].accounts && categorizedAccounts[activeAccountCategory.id].accounts.length">
                                     <v-col cols="12">
-                                        <v-card border class="card-title-with-bg account-card mb-8 h-auto" :key="account.id"
+                                        <draggable
-                                                v-for="account in categorizedAccounts[activeAccountCategory.id].accounts"
+                                            class="list-group"
-                                                v-show="showHidden || !account.hidden">
+                                            item-key="id"
-                                            <template #title>
+                                            handle=".drag-handle"
-                                                <div class="account-title d-flex align-baseline">
+                                            ghost-class="dragging-item"
-                                                    <ItemIcon icon-type="account" :icon-id="account.icon"
+                                            :disabled="activeAccountCategoryVisibleAccountCount <= 1"
-                                                              :color="account.color" :hidden-status="account.hidden" />
+                                            :list="categorizedAccounts[activeAccountCategory.id].accounts"
-                                                    <span class="ml-3">{{ account.name }}</span>
+                                            @change="onMove"
-                                                    <small class="account-currency ml-3">
+                                        >
-                                                        {{ accountCurrency(account) }}
+                                            <template #item="{ element }">
-                                                    </small>
+                                                <div class="list-group-item">
-                                                    <v-spacer/>
+                                                    <v-card border class="card-title-with-bg account-card mb-8 h-auto" v-if="showHidden || !element.hidden">
-                                                    <v-btn density="comfortable" color="default" variant="text" class="ml-2"
+                                                        <template #title>
-                                                           :disabled="loading" :icon="true">
+                                                            <div class="account-title d-flex align-baseline">
-                                                        <v-icon :icon="icons.more" />
+                                                                <ItemIcon icon-type="account" :icon-id="element.icon"
-                                                        <v-menu activator="parent">
+                                                                          :color="element.color" :hidden-status="element.hidden" />
-                                                            <v-list>
+                                                                <span class="account-name ml-3">{{ element.name }}</span>
-                                                                <v-list-item :to="`/transactions?accountId=${accountOrSubAccountId(account)}`"
+                                                                <small class="account-currency ml-3">
-                                                                             :prepend-icon="icons.transactions"
+                                                                    {{ accountCurrency(element) }}
-                                                                             :title="$t('View Transactions')"></v-list-item>
+                                                                </small>
-                                                            </v-list>
+                                                                <v-spacer/>
-                                                        </v-menu>
+                                                                <span class="align-self-center">
-                                                    </v-btn>
+                                                                    <v-icon :class="activeAccountCategoryVisibleAccountCount > 1 ? 'drag-handle' : 'disabled'"
-                                                </div>
+                                                                            :icon="icons.drag"/>
+                                                                    <v-tooltip activator="parent" v-if="activeAccountCategoryVisibleAccountCount > 1">{{ $t('Drag and Drop to Change Order') }}</v-tooltip>
+                                                                </span>
+                                                            </div>
 
-                                                <div class="mt-4" v-if="account.type === allAccountTypes.MultiSubAccounts">
+                                                            <div class="mt-4" v-if="element.type === allAccountTypes.MultiSubAccounts">
-                                                    <v-btn-toggle
+                                                                <v-btn-toggle
-                                                        class="account-subaccounts"
+                                                                    class="account-subaccounts"
-                                                        variant="outlined"
+                                                                    variant="outlined"
-                                                        color="primary"
+                                                                    color="primary"
-                                                        density="compact"
+                                                                    density="compact"
-                                                        mandatory="force"
+                                                                    mandatory="force"
-                                                        divided rounded="xl"
+                                                                    divided rounded="xl"
-                                                        :disabled="loading"
+                                                                    :disabled="loading"
-                                                        v-model="activeSubAccount[account.id]"
+                                                                    v-model="activeSubAccount[element.id]"
-                                                    >
+                                                                >
-                                                        <v-btn :value="undefined">
+                                                                    <v-btn :value="undefined">
-                                                            <span>{{ $t('All') }}</span>
+                                                                        <span>{{ $t('All') }}</span>
-                                                        </v-btn>
+                                                                    </v-btn>
-                                                        <v-btn :key="subAccount.id" :value="subAccount.id"
+                                                                    <v-btn :key="subAccount.id" :value="subAccount.id"
-                                                               v-for="subAccount in account.subAccounts"
+                                                                           v-for="subAccount in element.subAccounts"
-                                                               v-show="showHidden || !subAccount.hidden">
+                                                                           v-show="showHidden || !subAccount.hidden">
-                                                            <ItemIcon icon-type="account" :icon-id="subAccount.icon"
+                                                                        <ItemIcon icon-type="account" :icon-id="subAccount.icon"
-                                                                      :color="subAccount.color" :hidden-status="subAccount.hidden" />
+                                                                                  :color="subAccount.color" :hidden-status="subAccount.hidden" />
-                                                            <span class="ml-3">{{ subAccount.name }}</span>
+                                                                        <span class="ml-3">{{ subAccount.name }}</span>
-                                                        </v-btn>
+                                                                    </v-btn>
-                                                    </v-btn-toggle>
+                                                                </v-btn-toggle>
+                                                            </div>
+                                                        </template>
+
+                                                        <v-divider/>
+
+                                                        <v-card-text v-if="accountComment(element)">
+                                                            {{ accountComment(element) }}
+                                                        </v-card-text>
+
+                                                        <v-card-text>
+                                                            <div class="d-flex account-toolbar align-center">
+                                                                <v-btn class="px-2" density="comfortable" color="default" variant="text"
+                                                                       :disabled="loading" :prepend-icon="icons.transactions"
+                                                                       :to="`/transactions?accountId=${accountOrSubAccountId(element)}`">
+                                                                    {{ $t('Transaction List') }}
+                                                                </v-btn>
+                                                                <v-btn class="px-2 ml-2" density="comfortable" color="default" variant="text"
+                                                                       :disabled="loading" :prepend-icon="icons.edit"
+                                                                       @click="edit(element)">
+                                                                    {{ $t('Edit') }}
+                                                                </v-btn>
+                                                                <v-btn class="px-2 ml-2" density="comfortable" color="default" variant="text"
+                                                                       :disabled="loading" :prepend-icon="icons.hide"
+                                                                       v-if="!element.hidden"
+                                                                       @click="hide(element, true)">
+                                                                    {{ $t('Hide') }}
+                                                                </v-btn>
+                                                                <v-btn class="px-2 ml-2" density="comfortable" color="default" variant="text"
+                                                                       :disabled="loading" :prepend-icon="icons.show"
+                                                                       v-if="element.hidden"
+                                                                       @click="hide(element, false)">
+                                                                    {{ $t('Show') }}
+                                                                </v-btn>
+                                                                <v-btn class="px-2 ml-2" density="comfortable" color="default" variant="text"
+                                                                       :disabled="loading" :prepend-icon="icons.remove"
+                                                                       @click="remove(element)">
+                                                                    {{ $t('Delete') }}
+                                                                </v-btn>
+                                                                <v-spacer/>
+                                                                <span class="account-balance">{{ accountBalance(element) }}</span>
+                                                            </div>
+                                                        </v-card-text>
+                                                    </v-card>
                                                 </div>
                                             </template>
-
+                                        </draggable>
-                                            <v-divider/>
-
-                                            <v-card-text v-if="accountComment(account)">
-                                                {{ accountComment(account) }}
-                                            </v-card-text>
-
-                                            <v-card-text>
-                                                <div class="d-flex account-toolbar align-center">
-                                                    <v-btn class="px-2" density="comfortable" color="default" variant="text"
-                                                           :disabled="loading" :prepend-icon="icons.edit"
-                                                           @click="edit(account)">
-                                                        {{ $t('Edit') }}
-                                                    </v-btn>
-                                                    <v-btn class="px-2 ml-2" density="comfortable" color="default" variant="text"
-                                                           :disabled="loading" :prepend-icon="icons.hide"
-                                                           v-if="!account.hidden"
-                                                           @click="hide(account, true)">
-                                                        {{ $t('Hide') }}
-                                                    </v-btn>
-                                                    <v-btn class="px-2 ml-2" density="comfortable" color="default" variant="text"
-                                                           :disabled="loading" :prepend-icon="icons.show"
-                                                           v-if="account.hidden"
-                                                           @click="hide(account, false)">
-                                                        {{ $t('Show') }}
-                                                    </v-btn>
-                                                    <v-btn class="px-2 ml-2" density="comfortable" color="default" variant="text"
-                                                           :disabled="loading" :prepend-icon="icons.remove"
-                                                           @click="remove(account)">
-                                                        {{ $t('Delete') }}
-                                                    </v-btn>
-                                                    <v-spacer/>
-                                                    <span class="account-balance">{{ accountBalance(account) }}</span>
-                                                </div>
-                                            </v-card-text>
-                                        </v-card>
                                     </v-col>
                                 </v-row>
                             </v-card>
@@ -221,6 +235,7 @@ import {
     mdiPencilOutline,
     mdiDeleteOutline,
     mdiListBoxOutline,
+    mdiDrag,
     mdiDotsVertical,
 } from '@mdi/js';
 
@@ -231,6 +246,7 @@ export default {
             activeTab: 'accountPage',
             activeSubAccount: {},
             loading: true,
+            displayOrderModified: false,
             showHidden: false,
             icons: {
                 eye: mdiEyeOutline,
@@ -241,6 +257,7 @@ export default {
                 hide: mdiEyeOffOutline,
                 remove: mdiDeleteOutline,
                 transactions: mdiListBoxOutline,
+                drag: mdiDrag,
                 more: mdiDotsVertical
             }
         };
@@ -277,6 +294,27 @@ export default {
         activeAccountCategoryTotalBalance() {
             return this.accountCategoryTotalBalance(this.activeAccountCategory);
         },
+        activeAccountCategoryVisibleAccountCount() {
+            if (!this.categorizedAccounts[this.activeAccountCategory.id] || !this.categorizedAccounts[this.activeAccountCategory.id].accounts) {
+                return 0;
+            }
+
+            const accounts = this.categorizedAccounts[this.activeAccountCategory.id].accounts;
+
+            if (this.showHidden) {
+                return accounts.length;
+            }
+
+            let visibleCount = 0;
+
+            for (let i = 0; i < accounts.length; i++) {
+                if (!accounts[i].hidden) {
+                    visibleCount++;
+                }
+            }
+
+            return visibleCount;
+        },
         showAccountBalance: {
             get: function () {
                 return this.settingsStore.appSettings.showAccountBalance;
@@ -299,6 +337,7 @@ export default {
                 force: force
             }).then(() => {
                 self.loading = false;
+                self.displayOrderModified = false;
 
                 if (force) {
                     self.$refs.snackbar.showMessage('Account list has been updated');
@@ -306,6 +345,10 @@ export default {
             }).catch(error => {
                 self.loading = false;
 
+                if (error && error.message === 'Account list is up to date') {
+                    self.displayOrderModified = false;
+                }
+
                 if (!error.processed) {
                     self.$refs.snackbar.showError(error);
                 }
@@ -357,6 +400,50 @@ export default {
             const totalBalance = this.accountsStore.getAccountCategoryTotalBalance(this.showAccountBalance, accountCategory);
             return this.getDisplayCurrency(totalBalance, this.defaultCurrency);
         },
+        onMove(event) {
+            if (!event || !event.moved) {
+                return;
+            }
+
+            const self = this;
+            const moveEvent = event.moved;
+
+            if (!moveEvent.element || !moveEvent.element.id) {
+                self.$refs.snackbar.showMessage('Unable to move account');
+                return;
+            }
+
+            self.accountsStore.changeAccountDisplayOrder({
+                accountId: moveEvent.element.id,
+                from: moveEvent.oldIndex,
+                to: moveEvent.newIndex,
+                onlyUpdateGlobalList: true
+            }).then(() => {
+                self.displayOrderModified = true;
+            }).catch(error => {
+                self.$refs.snackbar.showError(error);
+            });
+        },
+        saveSortResult() {
+            const self = this;
+
+            if (!self.displayOrderModified) {
+                return;
+            }
+
+            self.loading = true;
+
+            self.accountsStore.updateAccountDisplayOrders().then(() => {
+                self.loading = false;
+                self.displayOrderModified = false;
+            }).catch(error => {
+                self.loading = false;
+
+                if (!error.processed) {
+                    self.$toast(error.message || error);
+                }
+            });
+        },
         add() {
 
         },
@@ -437,6 +524,10 @@ export default {
     line-height: 1.5rem !important;
 }
 
+.account-card .account-title .account-name {
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+}
+
 .account-card .account-currency {
     font-size: 0.8rem;
     color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));

third-patry-dependencies.json

@@ -224,6 +224,12 @@
         "url": "https://github.com/brix/crypto-js",
         "licenseUrl": "https://github.com/brix/crypto-js/blob/4.1.1/LICENSE"
     },
+    {
+        "name": "vuedraggable",
+        "copyright": "Copyright (c) 2016-2019 David Desmaisons",
+        "url": "https://github.com/SortableJS/vue.draggable.next",
+        "licenseUrl": "https://github.com/SortableJS/vue.draggable.next/blob/fae4944e7227f8f0ca06e19be01b14b584cfa973/LICENSE"
+    },
     {
         "name": "cbor-js",
         "copyright": "Copyright (c) 2014 Patrick Gansterer <paroga@paroga.com>",

vite.config.js

@@ -150,7 +150,7 @@ export default defineConfig(async () => {
                             return 'moment';
                         } else if (/[\\/]node_modules[\\/](dom7|framework7.*|skeleton-elements|swiper)[\\/]/i.test(id)) {
                             return 'vendor-mobile';
-                        } else if (/[\\/]node_modules[\\/](vuetify|vue-router|vue3-perfect-scrollbar|perfect-scrollbar|@mdi.*)[\\/]/i.test(id)) {
+                        } else if (/[\\/]node_modules[\\/](vuetify|vue-router|vue3-perfect-scrollbar|perfect-scrollbar|vuedraggable|sortablejs|@mdi.*)[\\/]/i.test(id)) {
                             return 'vendor-desktop';
                         } else if (/[\\/]node_modules[\\/](echarts|zrender|tslib|resize-detector|vue-echarts)[\\/]/i.test(id)) {
                             return 'vendor-desktop';