use pinia to replace vuex, code refactor
This commit is contained in:
@@ -18,6 +18,9 @@
|
||||
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7router'
|
||||
@@ -28,12 +31,15 @@ export default {
|
||||
loadingError: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useTransactionCategoriesStore)
|
||||
},
|
||||
created() {
|
||||
const self = this;
|
||||
|
||||
self.loading = true;
|
||||
|
||||
self.$store.dispatch('loadAllCategories', {
|
||||
self.transactionCategoriesStore.loadAllCategories({
|
||||
force: false
|
||||
}).then(() => {
|
||||
self.loading = false;
|
||||
@@ -53,7 +59,7 @@ export default {
|
||||
reload(done) {
|
||||
const self = this;
|
||||
|
||||
self.$store.dispatch('loadAllCategories', {
|
||||
self.transactionCategoriesStore.loadAllCategories({
|
||||
force: true
|
||||
}).then(() => {
|
||||
if (done) {
|
||||
|
||||
@@ -128,6 +128,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
|
||||
|
||||
import categoryConstants from '@/consts/category.js';
|
||||
import iconConstants from '@/consts/icon.js';
|
||||
import colorConstants from '@/consts/color.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7route',
|
||||
@@ -145,8 +152,8 @@ export default {
|
||||
type: parseInt(query.type),
|
||||
name: '',
|
||||
parentId: query.parentId,
|
||||
icon: self.$constants.icons.defaultCategoryIconId,
|
||||
color: self.$constants.colors.defaultCategoryColor,
|
||||
icon: iconConstants.defaultCategoryIconId,
|
||||
color: colorConstants.defaultCategoryColor,
|
||||
comment: '',
|
||||
visible: true,
|
||||
showIconSelectionSheet: false,
|
||||
@@ -156,6 +163,7 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useTransactionCategoriesStore),
|
||||
title() {
|
||||
if (!this.editCategoryId) {
|
||||
if (this.category.parentId === '0') {
|
||||
@@ -175,10 +183,10 @@ export default {
|
||||
}
|
||||
},
|
||||
allCategoryIcons() {
|
||||
return this.$constants.icons.allCategoryIcons;
|
||||
return iconConstants.allCategoryIcons;
|
||||
},
|
||||
allCategoryColors() {
|
||||
return this.$constants.colors.allCategoryColors;
|
||||
return colorConstants.allCategoryColors;
|
||||
},
|
||||
inputIsEmpty() {
|
||||
return !!this.inputEmptyProblemMessage;
|
||||
@@ -205,7 +213,7 @@ export default {
|
||||
self.loading = true;
|
||||
|
||||
self.editCategoryId = query.id;
|
||||
self.$store.dispatch('getCategory', {
|
||||
self.transactionCategoriesStore.getCategory({
|
||||
categoryId: self.editCategoryId
|
||||
}).then(category => {
|
||||
self.category.id = category.id;
|
||||
@@ -229,9 +237,9 @@ export default {
|
||||
} else if (query.parentId) {
|
||||
const categoryType = parseInt(query.type);
|
||||
|
||||
if (categoryType !== this.$constants.category.allCategoryTypes.Income &&
|
||||
categoryType !== this.$constants.category.allCategoryTypes.Expense &&
|
||||
categoryType !== this.$constants.category.allCategoryTypes.Transfer) {
|
||||
if (categoryType !== categoryConstants.allCategoryTypes.Income &&
|
||||
categoryType !== categoryConstants.allCategoryTypes.Expense &&
|
||||
categoryType !== categoryConstants.allCategoryTypes.Transfer) {
|
||||
self.$toast('Parameter Invalid');
|
||||
self.loadingError = 'Parameter Invalid';
|
||||
return;
|
||||
@@ -272,7 +280,7 @@ export default {
|
||||
submitCategory.hidden = !self.category.visible;
|
||||
}
|
||||
|
||||
self.$store.dispatch('saveCategory', {
|
||||
self.transactionCategoriesStore.saveCategory({
|
||||
category: submitCategory
|
||||
}).then(() => {
|
||||
self.submitting = false;
|
||||
|
||||
@@ -87,6 +87,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
|
||||
|
||||
import categoryConstants from '@/consts/category.js';
|
||||
import { onSwipeoutDeleted } from '@/lib/ui.mobile.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7route',
|
||||
@@ -109,19 +115,20 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useTransactionCategoriesStore),
|
||||
categories() {
|
||||
if (!this.categoryId || this.categoryId === '' || this.categoryId === '0') {
|
||||
if (!this.$store.state.allTransactionCategories || !this.$store.state.allTransactionCategories[this.categoryType]) {
|
||||
if (!this.transactionCategoriesStore.allTransactionCategories || !this.transactionCategoriesStore.allTransactionCategories[this.categoryType]) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return this.$store.state.allTransactionCategories[this.categoryType];
|
||||
return this.transactionCategoriesStore.allTransactionCategories[this.categoryType];
|
||||
} else if (this.categoryId && this.categoryId !== '' && this.categoryId !== '0') {
|
||||
if (!this.$store.state.allTransactionCategoriesMap || !this.$store.state.allTransactionCategoriesMap[this.categoryId]) {
|
||||
if (!this.transactionCategoriesStore.allTransactionCategoriesMap || !this.transactionCategoriesStore.allTransactionCategoriesMap[this.categoryId]) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return this.$store.state.allTransactionCategoriesMap[this.categoryId].subCategories;
|
||||
return this.transactionCategoriesStore.allTransactionCategoriesMap[this.categoryId].subCategories;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
@@ -130,13 +137,13 @@ export default {
|
||||
let title = '';
|
||||
|
||||
switch (this.categoryType) {
|
||||
case this.$constants.category.allCategoryTypes.Income:
|
||||
case categoryConstants.allCategoryTypes.Income:
|
||||
title = 'Income';
|
||||
break;
|
||||
case this.$constants.category.allCategoryTypes.Expense:
|
||||
case categoryConstants.allCategoryTypes.Expense:
|
||||
title = 'Expense';
|
||||
break;
|
||||
case this.$constants.category.allCategoryTypes.Transfer:
|
||||
case categoryConstants.allCategoryTypes.Transfer:
|
||||
title = 'Transfer';
|
||||
break;
|
||||
default:
|
||||
@@ -189,9 +196,9 @@ export default {
|
||||
|
||||
self.categoryType = parseInt(query.type);
|
||||
|
||||
if (self.categoryType !== this.$constants.category.allCategoryTypes.Income &&
|
||||
self.categoryType !== this.$constants.category.allCategoryTypes.Expense &&
|
||||
self.categoryType !== this.$constants.category.allCategoryTypes.Transfer) {
|
||||
if (self.categoryType !== categoryConstants.allCategoryTypes.Income &&
|
||||
self.categoryType !== categoryConstants.allCategoryTypes.Expense &&
|
||||
self.categoryType !== categoryConstants.allCategoryTypes.Transfer) {
|
||||
self.$toast('Parameter Invalid');
|
||||
self.loadingError = 'Parameter Invalid';
|
||||
return;
|
||||
@@ -207,7 +214,7 @@ export default {
|
||||
|
||||
self.loading = true;
|
||||
|
||||
self.$store.dispatch('loadAllCategories', {
|
||||
self.transactionCategoriesStore.loadAllCategories({
|
||||
force: false
|
||||
}).then(() => {
|
||||
self.loading = false;
|
||||
@@ -222,7 +229,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
onPageAfterIn() {
|
||||
if (this.$store.state.transactionCategoryListStateInvalid && !this.loading) {
|
||||
if (this.transactionCategoriesStore.transactionCategoryListStateInvalid && !this.loading) {
|
||||
this.reload(null);
|
||||
}
|
||||
|
||||
@@ -236,7 +243,7 @@ export default {
|
||||
|
||||
const self = this;
|
||||
|
||||
self.$store.dispatch('loadAllCategories', {
|
||||
self.transactionCategoriesStore.loadAllCategories({
|
||||
force: true
|
||||
}).then(() => {
|
||||
if (done) {
|
||||
@@ -276,7 +283,7 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
self.$store.dispatch('changeCategoryDisplayOrder', {
|
||||
self.transactionCategoriesStore.changeCategoryDisplayOrder({
|
||||
categoryId: id,
|
||||
from: event.from,
|
||||
to: event.to
|
||||
@@ -298,7 +305,7 @@ export default {
|
||||
self.displayOrderSaving = true;
|
||||
self.$showLoading();
|
||||
|
||||
self.$store.dispatch('updateCategoryDisplayOrders', {
|
||||
self.transactionCategoriesStore.updateCategoryDisplayOrders({
|
||||
type: self.categoryType,
|
||||
parentId: self.categoryId,
|
||||
}).then(() => {
|
||||
@@ -325,7 +332,7 @@ export default {
|
||||
|
||||
self.$showLoading();
|
||||
|
||||
self.$store.dispatch('hideCategory', {
|
||||
self.transactionCategoriesStore.hideCategory({
|
||||
category: category,
|
||||
hidden: hidden
|
||||
}).then(() => {
|
||||
@@ -356,10 +363,10 @@ export default {
|
||||
self.categoryToDelete = null;
|
||||
self.$showLoading();
|
||||
|
||||
self.$store.dispatch('deleteCategory', {
|
||||
self.transactionCategoriesStore.deleteCategory({
|
||||
category: category,
|
||||
beforeResolve: (done) => {
|
||||
self.$ui.onSwipeoutDeleted(self.getCategoryDomId(category), done);
|
||||
onSwipeoutDeleted(self.getCategoryDomId(category), done);
|
||||
}
|
||||
}).then(() => {
|
||||
self.$hideLoading();
|
||||
|
||||
@@ -55,6 +55,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
|
||||
|
||||
import categoryConstants from '@/consts/category.js';
|
||||
import { copyArrayTo } from '@/lib/common.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7route',
|
||||
@@ -74,6 +80,7 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useTransactionCategoriesStore),
|
||||
allLanguages() {
|
||||
return this.$locale.getAllLanguageInfos();
|
||||
}
|
||||
@@ -85,9 +92,9 @@ export default {
|
||||
self.categoryType = parseInt(query.type);
|
||||
|
||||
if (self.categoryType !== 0 &&
|
||||
self.categoryType !== this.$constants.category.allCategoryTypes.Income &&
|
||||
self.categoryType !== this.$constants.category.allCategoryTypes.Expense &&
|
||||
self.categoryType !== this.$constants.category.allCategoryTypes.Transfer) {
|
||||
self.categoryType !== categoryConstants.allCategoryTypes.Income &&
|
||||
self.categoryType !== categoryConstants.allCategoryTypes.Expense &&
|
||||
self.categoryType !== categoryConstants.allCategoryTypes.Transfer) {
|
||||
self.$toast('Parameter Invalid');
|
||||
self.loadingError = 'Parameter Invalid';
|
||||
return;
|
||||
@@ -97,13 +104,13 @@ export default {
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
self.allCategories.push({
|
||||
type: i,
|
||||
categories: self.$utilities.copyArrayTo(self.getDefaultCategories(i), [])
|
||||
categories: copyArrayTo(self.getDefaultCategories(i), [])
|
||||
});
|
||||
}
|
||||
} else {
|
||||
self.allCategories.push({
|
||||
type: self.categoryType,
|
||||
categories: self.$utilities.copyArrayTo(self.getDefaultCategories(self.categoryType), [])
|
||||
categories: copyArrayTo(self.getDefaultCategories(self.categoryType), [])
|
||||
});
|
||||
}
|
||||
},
|
||||
@@ -113,12 +120,12 @@ export default {
|
||||
},
|
||||
getDefaultCategories(categoryType) {
|
||||
switch (categoryType) {
|
||||
case this.$constants.category.allCategoryTypes.Income:
|
||||
return this.$constants.category.defaultIncomeCategories;
|
||||
case this.$constants.category.allCategoryTypes.Expense:
|
||||
return this.$constants.category.defaultExpenseCategories;
|
||||
case this.$constants.category.allCategoryTypes.Transfer:
|
||||
return this.$constants.category.defaultTransferCategories;
|
||||
case categoryConstants.allCategoryTypes.Income:
|
||||
return categoryConstants.defaultIncomeCategories;
|
||||
case categoryConstants.allCategoryTypes.Expense:
|
||||
return categoryConstants.defaultExpenseCategories;
|
||||
case categoryConstants.allCategoryTypes.Transfer:
|
||||
return categoryConstants.defaultTransferCategories;
|
||||
default:
|
||||
return [];
|
||||
}
|
||||
@@ -159,7 +166,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
self.$store.dispatch('addCategories', {
|
||||
self.transactionCategoriesStore.addCategories({
|
||||
categories: categories
|
||||
}).then(() => {
|
||||
self.submitting = false;
|
||||
@@ -178,11 +185,11 @@ export default {
|
||||
},
|
||||
getCategoryTypeName(categoryType) {
|
||||
switch (categoryType) {
|
||||
case this.$constants.category.allCategoryTypes.Income:
|
||||
case categoryConstants.allCategoryTypes.Income:
|
||||
return this.$t('Income Categories');
|
||||
case this.$constants.category.allCategoryTypes.Expense:
|
||||
case categoryConstants.allCategoryTypes.Expense:
|
||||
return this.$t('Expense Categories');
|
||||
case this.$constants.category.allCategoryTypes.Transfer:
|
||||
case categoryConstants.allCategoryTypes.Transfer:
|
||||
return this.$t('Transfer Categories');
|
||||
default:
|
||||
return this.$t('Transaction Categories');
|
||||
|
||||
Reference in New Issue
Block a user