mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-16 07:57:33 +08:00
use pinia to replace vuex, code refactor
This commit is contained in:
@@ -10,10 +10,10 @@
|
||||
</f7-list>
|
||||
|
||||
<f7-list strong inset dividers class="margin-vertical" v-else-if="!loading">
|
||||
<f7-list-item :title="$t('Accounts')" :after="$utilities.appendThousandsSeparator(dataStatistics.totalAccountCount)"></f7-list-item>
|
||||
<f7-list-item :title="$t('Transaction Categories')" :after="$utilities.appendThousandsSeparator(dataStatistics.totalTransactionCategoryCount)"></f7-list-item>
|
||||
<f7-list-item :title="$t('Transaction Tags')" :after="$utilities.appendThousandsSeparator(dataStatistics.totalTransactionTagCount)"></f7-list-item>
|
||||
<f7-list-item :title="$t('Transactions')" :after="$utilities.appendThousandsSeparator(dataStatistics.totalTransactionCount)"></f7-list-item>
|
||||
<f7-list-item :title="$t('Accounts')" :after="displayDataStatistics.totalAccountCount"></f7-list-item>
|
||||
<f7-list-item :title="$t('Transaction Categories')" :after="displayDataStatistics.totalTransactionCategoryCount"></f7-list-item>
|
||||
<f7-list-item :title="$t('Transaction Tags')" :after="displayDataStatistics.totalTransactionTagCount"></f7-list-item>
|
||||
<f7-list-item :title="$t('Transactions')" :after="displayDataStatistics.totalTransactionCount"></f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-list strong inset dividers class="margin-vertical" :class="{ 'disabled': loading }">
|
||||
@@ -56,6 +56,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
import { useRootStore } from '@/stores/index.js';
|
||||
import { useUserStore } from '@/stores/user.js';
|
||||
|
||||
import { appendThousandsSeparator } from '@/lib/common.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7router'
|
||||
@@ -74,11 +80,26 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useRootStore, useUserStore),
|
||||
displayDataStatistics() {
|
||||
const self = this;
|
||||
|
||||
if (!self.dataStatistics) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
totalAccountCount: appendThousandsSeparator(self.dataStatistics.totalAccountCount),
|
||||
totalTransactionCategoryCount: appendThousandsSeparator(self.dataStatistics.totalTransactionCategoryCount),
|
||||
totalTransactionTagCount: appendThousandsSeparator(self.dataStatistics.totalTransactionTagCount),
|
||||
totalTransactionCount: appendThousandsSeparator(self.dataStatistics.totalTransactionCount)
|
||||
};
|
||||
},
|
||||
isDataExportingEnabled() {
|
||||
return this.$settings.isDataExportingEnabled();
|
||||
},
|
||||
exportFileName() {
|
||||
const nickname = this.$store.getters.currentUserNickname;
|
||||
const nickname = this.userStore.currentUserNickname;
|
||||
|
||||
if (nickname) {
|
||||
return this.$t('dataExport.exportFilename', {
|
||||
@@ -94,7 +115,7 @@ export default {
|
||||
|
||||
self.loading = true;
|
||||
|
||||
self.$store.dispatch('getUserDataStatistics').then(dataStatistics => {
|
||||
self.userStore.getUserDataStatistics().then(dataStatistics => {
|
||||
self.dataStatistics = dataStatistics;
|
||||
self.loading = false;
|
||||
}).catch(error => {
|
||||
@@ -116,7 +137,7 @@ export default {
|
||||
self.$showLoading();
|
||||
self.exportingData = true;
|
||||
|
||||
self.$store.dispatch('getExportedUserData').then(data => {
|
||||
self.userStore.getExportedUserData().then(data => {
|
||||
self.exportedData = URL.createObjectURL(data);
|
||||
self.exportingData = false;
|
||||
self.$hideLoading();
|
||||
@@ -142,7 +163,7 @@ export default {
|
||||
self.clearingData = true;
|
||||
self.$showLoading(() => self.clearingData);
|
||||
|
||||
self.$store.dispatch('clearUserData', {
|
||||
self.rootStore.clearUserData({
|
||||
password: password
|
||||
}).then(() => {
|
||||
self.clearingData = false;
|
||||
@@ -153,7 +174,7 @@ export default {
|
||||
|
||||
self.loading = true;
|
||||
|
||||
self.$store.dispatch('getUserDataStatistics').then(dataStatistics => {
|
||||
self.userStore.getUserDataStatistics().then(dataStatistics => {
|
||||
self.dataStatistics = dataStatistics;
|
||||
self.loading = false;
|
||||
}).catch(error => {
|
||||
|
||||
@@ -43,6 +43,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
import { useUserStore } from '@/stores/user.js';
|
||||
import { useTokensStore } from '@/stores/token.js';
|
||||
|
||||
import iconConstants from '@/consts/icon.js';
|
||||
import { parseDeviceInfo, parseUserAgent } from '@/lib/misc.js';
|
||||
|
||||
import { onSwipeoutDeleted } from '@/lib/ui.mobile.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7router'
|
||||
@@ -55,6 +64,7 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useUserStore, useTokensStore),
|
||||
sessions() {
|
||||
if (!this.tokens) {
|
||||
return this.tokens;
|
||||
@@ -70,9 +80,9 @@ export default {
|
||||
domId: this.getTokenDomId(token.tokenId),
|
||||
isCurrent: token.isCurrent,
|
||||
deviceType: this.$t(token.isCurrent ? 'Current' : 'Other Device'),
|
||||
deviceInfo: this.$utilities.parseDeviceInfo(token.userAgent),
|
||||
deviceInfo: parseDeviceInfo(token.userAgent),
|
||||
icon: this.getTokenIcon(token),
|
||||
createdAt: this.$utilities.formatUnixTime(token.createdAt, this.$locale.getLongDateTimeFormat())
|
||||
createdAt: this.$locale.formatUnixTimeToLongDateTime(this.userStore, token.createdAt)
|
||||
});
|
||||
}
|
||||
|
||||
@@ -84,7 +94,7 @@ export default {
|
||||
|
||||
self.loading = true;
|
||||
|
||||
self.$store.dispatch('getAllTokens').then(tokens => {
|
||||
self.tokensStore.getAllTokens().then(tokens => {
|
||||
self.tokens = tokens;
|
||||
self.loading = false;
|
||||
}).catch(error => {
|
||||
@@ -103,7 +113,7 @@ export default {
|
||||
reload(done) {
|
||||
const self = this;
|
||||
|
||||
self.$store.dispatch('getAllTokens').then(tokens => {
|
||||
self.tokensStore.getAllTokens().then(tokens => {
|
||||
if (done) {
|
||||
done();
|
||||
}
|
||||
@@ -125,12 +135,12 @@ export default {
|
||||
self.$confirm('Are you sure you want to logout from this session?', () => {
|
||||
self.$showLoading();
|
||||
|
||||
self.$store.dispatch('revokeToken', {
|
||||
self.tokensStore.revokeToken({
|
||||
tokenId: session.tokenId
|
||||
}).then(() => {
|
||||
self.$hideLoading();
|
||||
|
||||
self.$ui.onSwipeoutDeleted(self.getTokenDomId(session.tokenId), () => {
|
||||
onSwipeoutDeleted(self.getTokenDomId(session.tokenId), () => {
|
||||
for (let i = 0; i < self.tokens.length; i++) {
|
||||
if (self.tokens[i].tokenId === session.tokenId) {
|
||||
self.tokens.splice(i, 1);
|
||||
@@ -156,7 +166,7 @@ export default {
|
||||
self.$confirm('Are you sure you want to logout all other sessions?', () => {
|
||||
self.$showLoading();
|
||||
|
||||
self.$store.dispatch('revokeAllTokens').then(() => {
|
||||
self.tokensStore.revokeAllTokens().then(() => {
|
||||
self.$hideLoading();
|
||||
|
||||
for (let i = self.tokens.length - 1; i >= 0; i--) {
|
||||
@@ -176,22 +186,22 @@ export default {
|
||||
});
|
||||
},
|
||||
getTokenIcon(token) {
|
||||
const ua = this.$utilities.parseUserAgent(token.userAgent);
|
||||
const ua = parseUserAgent(token.userAgent);
|
||||
|
||||
if (!ua || !ua.device) {
|
||||
return this.$constants.icons.deviceIcons.desktop.f7Icon;
|
||||
return iconConstants.deviceIcons.desktop.f7Icon;
|
||||
}
|
||||
|
||||
if (ua.device.type === 'mobile') {
|
||||
return this.$constants.icons.deviceIcons.mobile.f7Icon;
|
||||
return iconConstants.deviceIcons.mobile.f7Icon;
|
||||
} else if (ua.device.type === 'wearable') {
|
||||
return this.$constants.icons.deviceIcons.wearable.f7Icon;
|
||||
return iconConstants.deviceIcons.wearable.f7Icon;
|
||||
} else if (ua.device.type === 'tablet') {
|
||||
return this.$constants.icons.deviceIcons.tablet.f7Icon;
|
||||
return iconConstants.deviceIcons.tablet.f7Icon;
|
||||
} else if (ua.device.type === 'smarttv') {
|
||||
return this.$constants.icons.deviceIcons.tv.f7Icon;
|
||||
return iconConstants.deviceIcons.tv.f7Icon;
|
||||
} else {
|
||||
return this.$constants.icons.deviceIcons.desktop.f7Icon;
|
||||
return iconConstants.deviceIcons.desktop.f7Icon;
|
||||
}
|
||||
},
|
||||
getTokenDomId(tokenId) {
|
||||
|
||||
@@ -57,6 +57,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
import { useTwoFactorAuthStore } from '@/stores/twoFactorAuth.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7router'
|
||||
@@ -82,12 +85,15 @@ export default {
|
||||
showBackupCodeSheet: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useTwoFactorAuthStore),
|
||||
},
|
||||
created() {
|
||||
const self = this;
|
||||
|
||||
self.loading = true;
|
||||
|
||||
self.$store.dispatch('get2FAStatus').then(response => {
|
||||
self.twoFactorAuthStore.get2FAStatus().then(response => {
|
||||
self.status = response.enable;
|
||||
self.loading = false;
|
||||
}).catch(error => {
|
||||
@@ -112,7 +118,7 @@ export default {
|
||||
self.enabling = true;
|
||||
self.$showLoading(() => self.enabling);
|
||||
|
||||
self.$store.dispatch('enable2FA').then(response => {
|
||||
self.twoFactorAuthStore.enable2FA().then(response => {
|
||||
self.enabling = false;
|
||||
self.$hideLoading();
|
||||
|
||||
@@ -135,7 +141,7 @@ export default {
|
||||
self.enableConfirming = true;
|
||||
self.$showLoading(() => self.enableConfirming);
|
||||
|
||||
self.$store.dispatch('confirmEnable2FA', {
|
||||
self.twoFactorAuthStore.confirmEnable2FA({
|
||||
secret: self.new2FASecret,
|
||||
passcode: self.currentPasscodeForEnable
|
||||
}).then(response => {
|
||||
@@ -173,7 +179,7 @@ export default {
|
||||
self.disabling = true;
|
||||
self.$showLoading(() => self.disabling);
|
||||
|
||||
self.$store.dispatch('disable2FA', {
|
||||
self.twoFactorAuthStore.disable2FA({
|
||||
password: password
|
||||
}).then(() => {
|
||||
self.disabling = false;
|
||||
@@ -203,7 +209,7 @@ export default {
|
||||
self.regenerating = true;
|
||||
self.$showLoading(() => self.regenerating);
|
||||
|
||||
self.$store.dispatch('regenerate2FARecoveryCode', {
|
||||
self.twoFactorAuthStore.regenerate2FARecoveryCode({
|
||||
password: password
|
||||
}).then(response => {
|
||||
self.regenerating = false;
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
link="#" no-chevron
|
||||
:class="{ 'disabled': !allVisibleAccounts.length }"
|
||||
:header="$t('Default Account')"
|
||||
:title="$utilities.getNameByKeyValue(allAccounts, newProfile.defaultAccountId, 'id', 'name', $t('Not Specified'))"
|
||||
:title="getNameByKeyValue(allAccounts, newProfile.defaultAccountId, 'id', 'name', $t('Not Specified'))"
|
||||
@click="showAccountSheet = true"
|
||||
>
|
||||
<two-column-list-item-selection-sheet primary-key-field="id" primary-value-field="category"
|
||||
@@ -96,7 +96,7 @@
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Editable Transaction Scope')"
|
||||
:title="$t($utilities.getNameByKeyValue(allTransactionEditScopeTypes, newProfile.transactionEditScope, 'value', 'name'))"
|
||||
:title="$t(getNameByKeyValue(allTransactionEditScopeTypes, newProfile.transactionEditScope, 'value', 'name'))"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Date Range'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Editable Transaction Scope'), popupCloseLinkText: $t('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.transactionEditScope">
|
||||
@@ -156,7 +156,7 @@
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Long Date Format')"
|
||||
:title="$utilities.getNameByKeyValue(allLongDateFormats, newProfile.longDateFormat, 'type', 'displayName')"
|
||||
:title="getNameByKeyValue(allLongDateFormats, newProfile.longDateFormat, 'type', 'displayName')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Long Date Format'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Long Date Format'), popupCloseLinkText: $t('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.longDateFormat">
|
||||
@@ -169,7 +169,7 @@
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Short Date Format')"
|
||||
:title="$utilities.getNameByKeyValue(allShortDateFormats, newProfile.shortDateFormat, 'type', 'displayName')"
|
||||
:title="getNameByKeyValue(allShortDateFormats, newProfile.shortDateFormat, 'type', 'displayName')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Short Date Format'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Short Date Format'), popupCloseLinkText: $t('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.shortDateFormat">
|
||||
@@ -182,7 +182,7 @@
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Long Time Format')"
|
||||
:title="$utilities.getNameByKeyValue(allLongTimeFormats, newProfile.longTimeFormat, 'type', 'displayName')"
|
||||
:title="getNameByKeyValue(allLongTimeFormats, newProfile.longTimeFormat, 'type', 'displayName')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Long Time Format'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Long Time Format'), popupCloseLinkText: $t('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.longTimeFormat">
|
||||
@@ -195,7 +195,7 @@
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Short Time Format')"
|
||||
:title="$utilities.getNameByKeyValue(allShortTimeFormats, newProfile.shortTimeFormat, 'type', 'displayName')"
|
||||
:title="getNameByKeyValue(allShortTimeFormats, newProfile.shortTimeFormat, 'type', 'displayName')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Long Time Format'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Short Time Format'), popupCloseLinkText: $t('Done') }"
|
||||
>
|
||||
<select v-model="newProfile.shortTimeFormat">
|
||||
@@ -220,6 +220,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
import { useRootStore } from '@/stores/index.js';
|
||||
import { useUserStore } from '@/stores/user.js';
|
||||
import { useAccountsStore } from '@/stores/account.js';
|
||||
|
||||
import datetimeConstants from '@/consts/datetime.js';
|
||||
import { getNameByKeyValue } from '@/lib/common.js';
|
||||
import { getCategorizedAccounts } from '@/lib/account.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7router'
|
||||
@@ -263,6 +272,7 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useRootStore, useUserStore, useAccountsStore),
|
||||
allLanguages() {
|
||||
const ret = [];
|
||||
const allLanguageInfo = this.$locale.getAllLanguageInfos();
|
||||
@@ -291,16 +301,16 @@ export default {
|
||||
return this.$locale.getAllCurrencies();
|
||||
},
|
||||
allAccounts() {
|
||||
return this.$store.getters.allPlainAccounts;
|
||||
return this.accountsStore.allPlainAccounts;
|
||||
},
|
||||
allVisibleAccounts() {
|
||||
return this.$store.getters.allVisiblePlainAccounts;
|
||||
return this.accountsStore.allVisiblePlainAccounts;
|
||||
},
|
||||
allCategorizedAccounts() {
|
||||
return this.$utilities.getCategorizedAccounts(this.allVisibleAccounts);
|
||||
return getCategorizedAccounts(this.allVisibleAccounts);
|
||||
},
|
||||
allWeekDays() {
|
||||
return this.$constants.datetime.allWeekDays;
|
||||
return datetimeConstants.allWeekDays;
|
||||
},
|
||||
allLongDateFormats() {
|
||||
return this.$locale.getAllLongDateFormats();
|
||||
@@ -348,7 +358,7 @@ export default {
|
||||
return this.$t('Unknown');
|
||||
},
|
||||
currentDayOfWeekName() {
|
||||
const weekName = this.$utilities.getNameByKeyValue(this.$constants.datetime.allWeekDays, this.newProfile.firstDayOfWeek, 'type', 'name');
|
||||
const weekName = getNameByKeyValue(datetimeConstants.allWeekDays, this.newProfile.firstDayOfWeek, 'type', 'name');
|
||||
const i18nWeekNameKey = `datetime.${weekName}.long`;
|
||||
return this.$t(i18nWeekNameKey);
|
||||
},
|
||||
@@ -418,8 +428,8 @@ export default {
|
||||
self.loading = true;
|
||||
|
||||
const promises = [
|
||||
self.$store.dispatch('loadAllAccounts', { force: false }),
|
||||
self.$store.dispatch('getCurrentUserProfile')
|
||||
self.accountsStore.loadAllAccounts({ force: false }),
|
||||
self.userStore.getCurrentUserProfile()
|
||||
];
|
||||
|
||||
Promise.all(promises).then(responses => {
|
||||
@@ -460,7 +470,7 @@ export default {
|
||||
self.saving = true;
|
||||
self.$showLoading(() => self.saving);
|
||||
|
||||
self.$store.dispatch('updateUserProfile', {
|
||||
self.rootStore.updateUserProfile({
|
||||
profile: self.newProfile,
|
||||
currentPassword: self.currentPassword
|
||||
}).then(response => {
|
||||
@@ -485,6 +495,9 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
getNameByKeyValue(src, value, keyField, nameField, defaultName) {
|
||||
return getNameByKeyValue(src, value, keyField, nameField, defaultName);
|
||||
},
|
||||
setCurrentUserProfile(profile) {
|
||||
this.oldProfile.email = profile.email;
|
||||
this.oldProfile.nickname = profile.nickname;
|
||||
|
||||
Reference in New Issue
Block a user