use pinia to replace vuex, code refactor

This commit is contained in:
MaysWind
2023-06-10 23:13:31 +08:00
parent 0d84f2857f
commit 46d85e92cd
80 changed files with 4972 additions and 4859 deletions
+30 -9
View File
@@ -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 => {
+24 -14
View File
@@ -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) {
+11 -5
View File
@@ -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;
+27 -14
View File
@@ -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;