mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-21 18:24:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

migrate transaction categories page to composition API and typescript

Browse Source
This commit is contained in:
MaysWind
2025-01-14 23:48:06 +08:00
parent 29c09cb10a
commit 081b270f04
1 changed files with 53 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/mobile/categories/AllPage.vue
+43 -52
View File
@@ -1,6 +1,6 @@
<template> <template>
<f7-page ptr @ptr:refresh="reload" @page:afterin="onPageAfterIn"> <f7-page ptr @ptr:refresh="reload" @page:afterin="onPageAfterIn">
<f7-navbar :title="$t('Transaction Categories')" :back-link="$t('Back')"></f7-navbar> <f7-navbar :title="tt('Transaction Categories')" :back-link="tt('Back')"></f7-navbar>
<f7-list strong inset dividers class="margin-top skeleton-text" v-if="loading"> <f7-list strong inset dividers class="margin-top skeleton-text" v-if="loading">
<f7-list-item title="Expense" link="#"></f7-list-item> <f7-list-item title="Expense" link="#"></f7-list-item>
@@ -9,77 +9,68 @@
</f7-list> </f7-list>
<f7-list strong inset dividers class="margin-top" v-else-if="!loading"> <f7-list strong inset dividers class="margin-top" v-else-if="!loading">
<f7-list-item :title="$t('Expense')" link="/category/list?type=2"></f7-list-item> <f7-list-item :title="tt('Expense')" link="/category/list?type=2"></f7-list-item>
<f7-list-item :title="$t('Income')" link="/category/list?type=1"></f7-list-item> <f7-list-item :title="tt('Income')" link="/category/list?type=1"></f7-list-item>
<f7-list-item :title="$t('Transfer')" link="/category/list?type=3"></f7-list-item> <f7-list-item :title="tt('Transfer')" link="/category/list?type=3"></f7-list-item>
</f7-list> </f7-list>
</f7-page> </f7-page>
</template> </template>
<script setup lang="ts">
import { ref } from 'vue';
import type { Router } from 'framework7/types';
import { useI18n } from '@/locales/helpers.ts';
import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
<script>
import { mapStores } from 'pinia';
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts'; import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
export default { const { tt } = useI18n();
props: [ const { showToast, routeBackOnError } = useI18nUIComponents();
'f7router'
],
data() {
return {
loading: true,
loadingError: null
};
},
computed: {
...mapStores(useTransactionCategoriesStore)
},
created() {
const self = this;
self.loading = true; const transactionCategoriesStore = useTransactionCategoriesStore();
self.transactionCategoriesStore.loadAllCategories({ const props = defineProps<{
force: false f7router: Router.Router;
}).then(() => { }>();
self.loading = false;
}).catch(error => { const loading = ref<boolean>(true);
if (error.processed) { const loadingError = ref<unknown | null>(null);
self.loading = false;
} else { function onPageAfterIn(): void {
self.loadingError = error; routeBackOnError(props.f7router, loadingError);
self.$toast(error.message || error); }
}
}); function reload(done?: () => void): void {
},
methods: {
onPageAfterIn() {
this.$routeBackOnError(this.f7router, 'loadingError');
},
reload(done) {
const self = this;
const force = !!done; const force = !!done;
self.transactionCategoriesStore.loadAllCategories({ transactionCategoriesStore.loadAllCategories({
force: force force: force
}).then(() => { }).then(() => {
if (done) { done?.();
done();
}
if (force) { if (force) {
self.$toast('Category list has been updated'); showToast('Category list has been updated');
} }
}).catch(error => { }).catch(error => {
if (done) { done?.();
done();
}
if (!error.processed) { if (!error.processed) {
self.$toast(error.message || error); showToast(error.message || error);
} }
}); });
}
}
} }
transactionCategoriesStore.loadAllCategories({
force: false
}).then(() => {
loading.value = false;
}).catch(error => {
if (error.processed) {
loading.value = false;
} else {
loadingError.value = error;
showToast(error.message || error);
}
});
</script> </script>