mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-16 16:07:33 +08:00
migrate transaction category preset page to composition API and typescript
This commit is contained in:
MaysWind
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<f7-page @page:afterin="onPageAfterIn">
|
||||
<f7-navbar>
|
||||
<f7-nav-left :back-link="$t('Back')"></f7-nav-left>
|
||||
<f7-nav-title :title="$t('Default Categories')"></f7-nav-title>
|
||||
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
|
||||
<f7-nav-title :title="tt('Default Categories')"></f7-nav-title>
|
||||
<f7-nav-right>
|
||||
<f7-link icon-f7="ellipsis" v-if="isPresetHasCategories" @click="showMoreActionSheet = true"></f7-link>
|
||||
<f7-link :text="$t('Save')" :class="{ 'disabled': submitting }" v-if="isPresetHasCategories" @click="save"></f7-link>
|
||||
<f7-link :text="tt('Save')" :class="{ 'disabled': submitting }" v-if="isPresetHasCategories" @click="save"></f7-link>
|
||||
</f7-nav-right>
|
||||
</f7-navbar>
|
||||
|
||||
@@ -38,10 +38,10 @@
|
||||
|
||||
<f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
|
||||
<f7-actions-group>
|
||||
<f7-actions-button @click="showChangeLocaleSheet = true">{{ $t('Change Language') }}</f7-actions-button>
|
||||
<f7-actions-button @click="showChangeLocaleSheet = true">{{ tt('Change Language') }}</f7-actions-button>
|
||||
</f7-actions-group>
|
||||
<f7-actions-group>
|
||||
<f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
|
||||
<f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
|
||||
</f7-actions-group>
|
||||
</f7-actions>
|
||||
|
||||
@@ -55,98 +55,92 @@
|
||||
</f7-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
<script setup lang="ts">
|
||||
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
|
||||
|
||||
import { CategoryType } from '@/core/category.ts';
|
||||
import { ref, computed } from 'vue';
|
||||
import type { Router } from 'framework7/types';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
|
||||
|
||||
import type { PartialRecord } from '@/core/base.ts';
|
||||
import type { LanguageOption } from '@/locales/index.ts';
|
||||
import { type LocalizedPresetCategory, CategoryType } from '@/core/category.ts';
|
||||
import { getObjectOwnFieldCount, categorizedArrayToPlainArray } from '@/lib/common.ts';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7route',
|
||||
'f7router'
|
||||
],
|
||||
data() {
|
||||
const self = this;
|
||||
const props = defineProps<{
|
||||
f7route: Router.Route;
|
||||
f7router: Router.Router;
|
||||
}>();
|
||||
|
||||
return {
|
||||
loadingError: null,
|
||||
currentLocale: self.$locale.getCurrentLanguageTag(),
|
||||
categoryType: 0,
|
||||
submitting: false,
|
||||
showMoreActionSheet: false,
|
||||
showChangeLocaleSheet: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useTransactionCategoriesStore),
|
||||
allLanguages() {
|
||||
return this.$locale.getAllLanguageInfoArray(false);
|
||||
},
|
||||
allPresetCategories() {
|
||||
return this.$locale.getAllTransactionDefaultCategories(this.categoryType, this.currentLocale);
|
||||
},
|
||||
isPresetHasCategories() {
|
||||
return getObjectOwnFieldCount(this.allPresetCategories);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const self = this;
|
||||
const query = self.f7route.query;
|
||||
const { tt, getCurrentLanguageTag, getAllLanguageOptions, getAllTransactionDefaultCategories } = useI18n();
|
||||
const { showToast, routeBackOnError } = useI18nUIComponents();
|
||||
|
||||
self.categoryType = parseInt(query.type);
|
||||
const transactionCategoriesStore = useTransactionCategoriesStore();
|
||||
|
||||
if (self.categoryType !== 0 &&
|
||||
self.categoryType !== CategoryType.Income &&
|
||||
self.categoryType !== CategoryType.Expense &&
|
||||
self.categoryType !== CategoryType.Transfer) {
|
||||
self.$toast('Parameter Invalid');
|
||||
self.loadingError = 'Parameter Invalid';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onPageAfterIn() {
|
||||
this.$routeBackOnError(this.f7router, 'loadingError');
|
||||
},
|
||||
save() {
|
||||
const self = this;
|
||||
const router = self.f7router;
|
||||
const loadingError = ref<unknown | null>(null);
|
||||
const currentLocale = ref<string>(getCurrentLanguageTag());
|
||||
const categoryType = ref<number>(0);
|
||||
const submitting = ref<boolean>(false);
|
||||
const showMoreActionSheet = ref<boolean>(false);
|
||||
const showChangeLocaleSheet = ref<boolean>(false);
|
||||
|
||||
self.submitting = true;
|
||||
self.$showLoading(() => self.submitting);
|
||||
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
|
||||
const allPresetCategories = computed<PartialRecord<CategoryType, LocalizedPresetCategory[]>>(() => getAllTransactionDefaultCategories(categoryType.value, currentLocale.value));
|
||||
const isPresetHasCategories = computed<boolean>(() => getObjectOwnFieldCount(allPresetCategories.value) > 0);
|
||||
|
||||
const submitCategories = categorizedArrayToPlainArray(self.allPresetCategories);
|
||||
|
||||
self.transactionCategoriesStore.addCategories({
|
||||
categories: submitCategories
|
||||
}).then(() => {
|
||||
self.submitting = false;
|
||||
self.$hideLoading();
|
||||
|
||||
self.$toast('You have added preset categories');
|
||||
router.back();
|
||||
}).catch(error => {
|
||||
self.submitting = false;
|
||||
self.$hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
},
|
||||
getCategoryTypeName(categoryType) {
|
||||
switch (categoryType) {
|
||||
case CategoryType.Income.toString():
|
||||
return this.$t('Income Categories');
|
||||
case CategoryType.Expense.toString():
|
||||
return this.$t('Expense Categories');
|
||||
case CategoryType.Transfer.toString():
|
||||
return this.$t('Transfer Categories');
|
||||
default:
|
||||
return this.$t('Transaction Categories');
|
||||
}
|
||||
}
|
||||
function getCategoryTypeName(categoryType: CategoryType): string {
|
||||
switch (categoryType) {
|
||||
case CategoryType.Income:
|
||||
return tt('Income Categories');
|
||||
case CategoryType.Expense:
|
||||
return tt('Expense Categories');
|
||||
case CategoryType.Transfer:
|
||||
return tt('Transfer Categories');
|
||||
default:
|
||||
return tt('Transaction Categories');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function save(): void {
|
||||
const router = props.f7router;
|
||||
|
||||
submitting.value = true;
|
||||
showLoading(() => submitting.value);
|
||||
|
||||
const submitCategories = categorizedArrayToPlainArray(allPresetCategories.value);
|
||||
|
||||
transactionCategoriesStore.addCategories({
|
||||
categories: submitCategories
|
||||
}).then(() => {
|
||||
submitting.value = false;
|
||||
hideLoading();
|
||||
|
||||
showToast('You have added preset categories');
|
||||
router.back();
|
||||
}).catch(error => {
|
||||
submitting.value = false;
|
||||
hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onPageAfterIn(): void {
|
||||
routeBackOnError(props.f7router, loadingError);
|
||||
}
|
||||
|
||||
const query = props.f7route.query;
|
||||
categoryType.value = parseInt(query['type'] || '0');
|
||||
|
||||
if (categoryType.value !== 0 &&
|
||||
categoryType.value !== CategoryType.Income &&
|
||||
categoryType.value !== CategoryType.Expense &&
|
||||
categoryType.value !== CategoryType.Transfer) {
|
||||
showToast('Parameter Invalid');
|
||||
loadingError.value = 'Parameter Invalid';
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user