zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions 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
+53 -62
View File
@@ -1,6 +1,6 @@
<template>
<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-item title="Expense" link="#"></f7-list-item>
@@ -9,77 +9,68 @@
</f7-list>
<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="$t('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('Expense')" link="/category/list?type=2"></f7-list-item>
<f7-list-item :title="tt('Income')" link="/category/list?type=1"></f7-list-item>
<f7-list-item :title="tt('Transfer')" link="/category/list?type=3"></f7-list-item>
</f7-list>
</f7-page>
</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';
export default {
props: [
'f7router'
],
data() {
return {
loading: true,
loadingError: null
};
},
computed: {
...mapStores(useTransactionCategoriesStore)
},
created() {
const self = this;
const { tt } = useI18n();
const { showToast, routeBackOnError } = useI18nUIComponents();
self.loading = true;
const transactionCategoriesStore = useTransactionCategoriesStore();
self.transactionCategoriesStore.loadAllCategories({
force: false
}).then(() => {
self.loading = false;
}).catch(error => {
if (error.processed) {
self.loading = false;
} else {
self.loadingError = error;
self.$toast(error.message || error);
}
});
},
methods: {
onPageAfterIn() {
this.$routeBackOnError(this.f7router, 'loadingError');
},
reload(done) {
const self = this;
const force = !!done;
const props = defineProps<{
f7router: Router.Router;
}>();
self.transactionCategoriesStore.loadAllCategories({
force: force
}).then(() => {
if (done) {
done();
}
const loading = ref<boolean>(true);
const loadingError = ref<unknown | null>(null);
if (force) {
self.$toast('Category list has been updated');
}
}).catch(error => {
if (done) {
done();
}
if (!error.processed) {
self.$toast(error.message || error);
}
});
}
}
function onPageAfterIn(): void {
routeBackOnError(props.f7router, loadingError);
}
function reload(done?: () => void): void {
const force = !!done;
transactionCategoriesStore.loadAllCategories({
force: force
}).then(() => {
done?.();
if (force) {
showToast('Category list has been updated');
}
}).catch(error => {
done?.();
if (!error.processed) {
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>