From 2cbd8684cf31bfcb73f3025ecea0906146db22ce Mon Sep 17 00:00:00 2001 From: MaysWind Date: Wed, 19 Jul 2023 02:28:50 +0800 Subject: [PATCH] account list page supports dragging to change display order --- package-lock.json | 17 ++ package.json | 1 + src/desktop-main.js | 3 + src/locales/en.js | 3 +- src/locales/zh_Hans.js | 3 +- src/stores/account.js | 23 ++- src/styles/desktop/global.scss | 9 + src/views/desktop/AccountsPage.vue | 255 +++++++++++++++++++---------- third-patry-dependencies.json | 6 + vite.config.js | 2 +- 10 files changed, 231 insertions(+), 91 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1e6b4065..c41487be 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 68bc62b2..f2524001 100644 --- a/package.json +++ b/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": { diff --git a/src/desktop-main.js b/src/desktop-main.js index 1c7dd2f7..3fb11456 100644 --- a/src/desktop-main.js +++ b/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); diff --git a/src/locales/en.js b/src/locales/en.js index 630cb300..7f17c5dc 100644 --- a/src/locales/en.js +++ b/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', diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js index c9f455ab..3ab41a5f 100644 --- a/src/locales/zh_Hans.js +++ b/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': '账户列表已更新', diff --git a/src/stores/account.js b/src/stores/account.js index 56b7cf5f..16c477f6 100644 --- a/src/stores/account.js +++ b/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(); diff --git a/src/styles/desktop/global.scss b/src/styles/desktop/global.scss index da4e4b82..567d499e 100644 --- a/src/styles/desktop/global.scss +++ b/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; diff --git a/src/views/desktop/AccountsPage.vue b/src/views/desktop/AccountsPage.vue index a817c05c..1d2d5da9 100644 --- a/src/views/desktop/AccountsPage.vue +++ b/src/views/desktop/AccountsPage.vue @@ -48,6 +48,9 @@ {{ $t('Account List') }} {{ $t('Add') }} + {{ $t('Save Display Order') }} @@ -99,91 +102,102 @@ -