zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

account list page supports dragging to change display order

Browse Source
This commit is contained in:
MaysWind
2023-07-19 02:28:50 +08:00
parent 107c9fce94
commit 2cbd8684cf
10 changed files with 231 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+17
View File
@@ -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
+1
View File
@@ -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
+3
View File
@@ -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
+2 -1
View File
@@ -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
+2 -1
View File
@@ -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
+17 -6
View File
@@ -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
+9
View File
@@ -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
+173 -82
View File
@@ -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"
v-for="account in categorizedAccounts[activeAccountCategory.id].accounts"
v-show="showHidden || !account.hidden">
<template #title>
<div class="account-title d-flex align-baseline">
<ItemIcon icon-type="account" :icon-id="account.icon"
:color="account.color" :hidden-status="account.hidden" />
<span class="ml-3">{{ account.name }}</span>
<small class="account-currency ml-3">
{{ accountCurrency(account) }}
</small>
<v-spacer/>
<v-btn density="comfortable" color="default" variant="text" class="ml-2"
:disabled="loading" :icon="true">
<v-icon :icon="icons.more" />
<v-menu activator="parent">
<v-list>
<v-list-item :to="`/transactions?accountId=${accountOrSubAccountId(account)}`"
:prepend-icon="icons.transactions"
:title="$t('View Transactions')"></v-list-item>
</v-list>
</v-menu>
</v-btn>
</div>
<draggable
class="list-group"
item-key="id"
handle=".drag-handle"
ghost-class="dragging-item"
:disabled="activeAccountCategoryVisibleAccountCount <= 1"
:list="categorizedAccounts[activeAccountCategory.id].accounts"
@change="onMove"
>
<template #item="{ element }">
<div class="list-group-item">
<v-card border class="card-title-with-bg account-card mb-8 h-auto" v-if="showHidden || !element.hidden">
<template #title>
<div class="account-title d-flex align-baseline">
<ItemIcon icon-type="account" :icon-id="element.icon"
:color="element.color" :hidden-status="element.hidden" />
<span class="account-name ml-3">{{ element.name }}</span>
<small class="account-currency ml-3">
{{ accountCurrency(element) }}
</small>
<v-spacer/>
<span class="align-self-center">
<v-icon :class="activeAccountCategoryVisibleAccountCount > 1 ? 'drag-handle' : 'disabled'"
: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">
<v-btn-toggle
class="account-subaccounts"
variant="outlined"
color="primary"
density="compact"
mandatory="force"
divided rounded="xl"
:disabled="loading"
v-model="activeSubAccount[account.id]"
>
<v-btn :value="undefined">
<span>{{ $t('All') }}</span>
</v-btn>
<v-btn :key="subAccount.id" :value="subAccount.id"
v-for="subAccount in account.subAccounts"
v-show="showHidden || !subAccount.hidden">
<ItemIcon icon-type="account" :icon-id="subAccount.icon"
:color="subAccount.color" :hidden-status="subAccount.hidden" />
<span class="ml-3">{{ subAccount.name }}</span>
</v-btn>
</v-btn-toggle>
<div class="mt-4" v-if="element.type === allAccountTypes.MultiSubAccounts">
<v-btn-toggle
class="account-subaccounts"
variant="outlined"
color="primary"
density="compact"
mandatory="force"
divided rounded="xl"
:disabled="loading"
v-model="activeSubAccount[element.id]"
>
<v-btn :value="undefined">
<span>{{ $t('All') }}</span>
</v-btn>
<v-btn :key="subAccount.id" :value="subAccount.id"
v-for="subAccount in element.subAccounts"
v-show="showHidden || !subAccount.hidden">
<ItemIcon icon-type="account" :icon-id="subAccount.icon"
:color="subAccount.color" :hidden-status="subAccount.hidden" />
<span class="ml-3">{{ subAccount.name }}</span>
</v-btn>
</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>
<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>
</draggable>
</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
+6
View File
@@ -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
+1 -1
View File
@@ -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';