migrate transaction category list page to composition API and typescript
This commit is contained in:
MaysWind
@@ -456,7 +456,7 @@ export const useTransactionCategoriesStore = defineStore('transactionCategories'
|
||||
});
|
||||
}
|
||||
|
||||
function deleteCategory({ category, beforeResolve }: { category: TransactionCategory, beforeResolve: BeforeResolveFunction }): Promise<boolean> {
|
||||
function deleteCategory({ category, beforeResolve }: { category: TransactionCategory, beforeResolve?: BeforeResolveFunction }): Promise<boolean> {
|
||||
return new Promise((resolve, reject) => {
|
||||
services.deleteTransactionCategory({
|
||||
id: category.id
|
||||
|
||||
@@ -6,16 +6,16 @@
|
||||
<v-navigation-drawer ref="navbar" :permanent="alwaysShowNav" v-model="showNav">
|
||||
<div class="mx-6 my-4">
|
||||
<btn-vertical-group :disabled="loading" :buttons="[
|
||||
{ name: $t('Expense'), value: allCategoryTypes.Expense },
|
||||
{ name: $t('Income'), value: allCategoryTypes.Income },
|
||||
{ name: $t('Transfer'), value: allCategoryTypes.Transfer }
|
||||
{ name: tt('Expense'), value: CategoryType.Expense },
|
||||
{ name: tt('Income'), value: CategoryType.Income },
|
||||
{ name: tt('Transfer'), value: CategoryType.Transfer }
|
||||
]" v-model="activeCategoryType" @update:model-value="switchAllPrimaryCategories" />
|
||||
</div>
|
||||
<v-divider />
|
||||
<v-tabs show-arrows class="my-4" direction="vertical"
|
||||
:disabled="loading" v-model="primaryCategoryId">
|
||||
<v-tab class="tab-text-truncate" value="0" @click="switchAllPrimaryCategories">
|
||||
<span class="text-truncate">{{ $t('Primary Categories') }}</span>
|
||||
<span class="text-truncate">{{ tt('Primary Categories') }}</span>
|
||||
</v-tab>
|
||||
<template :key="category.id" v-for="category in primaryCategories">
|
||||
<v-tab class="tab-text-truncate" :value="category.id" v-if="!category.hidden"
|
||||
@@ -39,19 +39,19 @@
|
||||
:ripple="false" :icon="true" @click="showNav = !showNav">
|
||||
<v-icon :icon="icons.menu" size="24" />
|
||||
</v-btn>
|
||||
<span>{{ $t('Transaction Categories') }}</span>
|
||||
<span>{{ tt('Transaction Categories') }}</span>
|
||||
<v-btn class="ml-3" color="default" variant="outlined"
|
||||
:disabled="loading || updating" @click="add">{{ $t('Add') }}</v-btn>
|
||||
:disabled="loading || updating" @click="add">{{ tt('Add') }}</v-btn>
|
||||
<v-btn class="ml-3" color="primary" variant="tonal"
|
||||
:disabled="loading || updating" @click="saveSortResult"
|
||||
v-if="displayOrderModified">{{ $t('Save Display Order') }}</v-btn>
|
||||
v-if="displayOrderModified">{{ tt('Save Display Order') }}</v-btn>
|
||||
<v-btn density="compact" color="default" variant="text" size="24"
|
||||
class="ml-2" :icon="true" :loading="loading || updating" @click="reload">
|
||||
class="ml-2" :icon="true" :loading="loading || updating" @click="reload(true)">
|
||||
<template #loader>
|
||||
<v-progress-circular indeterminate size="20"/>
|
||||
</template>
|
||||
<v-icon :icon="icons.refresh" size="24" />
|
||||
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
|
||||
<v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
|
||||
</v-btn>
|
||||
<v-spacer/>
|
||||
<v-btn density="comfortable" color="default" variant="text" class="ml-2"
|
||||
@@ -60,10 +60,10 @@
|
||||
<v-menu activator="parent">
|
||||
<v-list>
|
||||
<v-list-item :prepend-icon="icons.show"
|
||||
:title="$t('Show Hidden Transaction Categories')"
|
||||
:title="tt('Show Hidden Transaction Categories')"
|
||||
v-if="!showHidden" @click="showHidden = true"></v-list-item>
|
||||
<v-list-item :prepend-icon="icons.hide"
|
||||
:title="$t('Hide Hidden Transaction Categories')"
|
||||
:title="tt('Hide Hidden Transaction Categories')"
|
||||
v-if="showHidden" @click="showHidden = false"></v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
@@ -76,9 +76,9 @@
|
||||
<tr>
|
||||
<th>
|
||||
<div class="d-flex align-center">
|
||||
<span>{{ $t('Category Name') }}</span>
|
||||
<span>{{ tt('Category Name') }}</span>
|
||||
<v-spacer/>
|
||||
<span>{{ $t('Operation') }}</span>
|
||||
<span>{{ tt('Operation') }}</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
@@ -96,11 +96,11 @@
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<span>{{ $t('No available category') }}</span>
|
||||
<span>{{ tt('No available category') }}</span>
|
||||
<v-btn class="ml-3" color="default" variant="outlined"
|
||||
@click="showPresetDialog = true"
|
||||
v-if="hasSubCategories && noCategory">
|
||||
{{ $t('Add Default Categories') }}
|
||||
{{ tt('Add Default Categories') }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</td>
|
||||
@@ -141,7 +141,7 @@
|
||||
<template #loader>
|
||||
<v-progress-circular indeterminate size="20" width="2"/>
|
||||
</template>
|
||||
{{ element.hidden ? $t('Show') : $t('Hide') }}
|
||||
{{ element.hidden ? tt('Show') : tt('Hide') }}
|
||||
</v-btn>
|
||||
<v-btn class="px-2" color="default"
|
||||
density="comfortable" variant="text"
|
||||
@@ -149,7 +149,7 @@
|
||||
:prepend-icon="icons.edit"
|
||||
:disabled="loading || updating"
|
||||
@click="edit(element)">
|
||||
{{ $t('Edit') }}
|
||||
{{ tt('Edit') }}
|
||||
</v-btn>
|
||||
<v-btn class="px-2" color="default"
|
||||
density="comfortable" variant="text"
|
||||
@@ -161,12 +161,12 @@
|
||||
<template #loader>
|
||||
<v-progress-circular indeterminate size="20" width="2"/>
|
||||
</template>
|
||||
{{ $t('Delete') }}
|
||||
{{ tt('Delete') }}
|
||||
</v-btn>
|
||||
<span class="ml-2">
|
||||
<v-icon :class="!loading && !updating && availableCategoryCount > 1 ? 'drag-handle' : 'disabled'"
|
||||
:icon="icons.drag"/>
|
||||
<v-tooltip activator="parent" v-if="!loading && !updating && availableCategoryCount > 1">{{ $t('Drag to Reorder') }}</v-tooltip>
|
||||
<v-tooltip activator="parent" v-if="!loading && !updating && availableCategoryCount > 1">{{ tt('Drag to Reorder') }}</v-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
@@ -185,22 +185,30 @@
|
||||
|
||||
<edit-dialog ref="editDialog" :persistent="true" />
|
||||
<preset-dialog :category-type="activeCategoryType" v-model:show="showPresetDialog"
|
||||
@category:saved="presetCategorySaved" />
|
||||
@category:saved="onPresetCategorySaved" />
|
||||
|
||||
<confirm-dialog ref="confirmDialog"/>
|
||||
<snack-bar ref="snackbar" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import { VNavigationDrawer } from 'vuetify/components/VNavigationDrawer';
|
||||
|
||||
import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
|
||||
import SnackBar from '@/components/desktop/SnackBar.vue';
|
||||
import EditDialog from './list/dialogs/EditDialog.vue';
|
||||
import PresetDialog from './list/dialogs/PresetDialog.vue';
|
||||
|
||||
import { ref, computed, useTemplateRef, watch, nextTick } from 'vue';
|
||||
import { useDisplay } from 'vuetify';
|
||||
|
||||
import { mapStores } from 'pinia';
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
|
||||
|
||||
import { CategoryType } from '@/core/category.ts';
|
||||
import type { TransactionCategory } from '@/models/transaction_category.ts';
|
||||
|
||||
import {
|
||||
isNoAvailableCategory,
|
||||
getAvailableCategoryCount
|
||||
@@ -218,296 +226,278 @@ import {
|
||||
mdiDotsVertical
|
||||
} from '@mdi/js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditDialog,
|
||||
PresetDialog
|
||||
},
|
||||
data() {
|
||||
const { mdAndUp } = useDisplay();
|
||||
type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
|
||||
type SnackBarType = InstanceType<typeof SnackBar>;
|
||||
type EditDialogType = InstanceType<typeof EditDialog>;
|
||||
|
||||
return {
|
||||
activeCategoryType: CategoryType.Expense,
|
||||
activeTab: 'categoryPage',
|
||||
primaryCategoryId: '0',
|
||||
loading: true,
|
||||
updating: false,
|
||||
categoryHiding: {},
|
||||
categoryRemoving: {},
|
||||
displayOrderModified: false,
|
||||
cardMinHeight: 680,
|
||||
alwaysShowNav: mdAndUp.value,
|
||||
showNav: mdAndUp.value,
|
||||
showHidden: false,
|
||||
showPresetDialog: false,
|
||||
icons: {
|
||||
refresh: mdiRefresh,
|
||||
menu: mdiMenu,
|
||||
edit: mdiPencilOutline,
|
||||
show: mdiEyeOutline,
|
||||
hide: mdiEyeOffOutline,
|
||||
remove: mdiDeleteOutline,
|
||||
drag: mdiDrag,
|
||||
more: mdiDotsVertical
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useTransactionCategoriesStore),
|
||||
allCategoryTypes() {
|
||||
return CategoryType;
|
||||
},
|
||||
primaryCategories() {
|
||||
if (!this.transactionCategoriesStore.allTransactionCategories || !this.transactionCategoriesStore.allTransactionCategories[this.activeCategoryType]) {
|
||||
return [];
|
||||
}
|
||||
const display = useDisplay();
|
||||
const { tt } = useI18n();
|
||||
|
||||
return this.transactionCategoriesStore.allTransactionCategories[this.activeCategoryType];
|
||||
},
|
||||
secondaryCategories() {
|
||||
if (!this.transactionCategoriesStore.allTransactionCategoriesMap || !this.transactionCategoriesStore.allTransactionCategoriesMap[this.primaryCategoryId]) {
|
||||
return [];
|
||||
}
|
||||
const transactionCategoriesStore = useTransactionCategoriesStore();
|
||||
|
||||
return this.transactionCategoriesStore.allTransactionCategoriesMap[this.primaryCategoryId].subCategories;
|
||||
},
|
||||
hasSubCategories() {
|
||||
return !this.primaryCategoryId || this.primaryCategoryId === '' || this.primaryCategoryId === '0';
|
||||
},
|
||||
categories() {
|
||||
if (this.hasSubCategories) {
|
||||
return this.primaryCategories;
|
||||
} else {
|
||||
return this.secondaryCategories;
|
||||
}
|
||||
},
|
||||
noAvailableCategory() {
|
||||
return isNoAvailableCategory(this.categories, this.showHidden);
|
||||
},
|
||||
noCategory() {
|
||||
return this.categories.length < 1;
|
||||
},
|
||||
availableCategoryCount() {
|
||||
return getAvailableCategoryCount(this.categories, this.showHidden);
|
||||
const icons = {
|
||||
refresh: mdiRefresh,
|
||||
menu: mdiMenu,
|
||||
edit: mdiPencilOutline,
|
||||
show: mdiEyeOutline,
|
||||
hide: mdiEyeOffOutline,
|
||||
remove: mdiDeleteOutline,
|
||||
drag: mdiDrag,
|
||||
more: mdiDotsVertical
|
||||
};
|
||||
|
||||
const navbar = useTemplateRef<VNavigationDrawer>('navbar');
|
||||
const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
|
||||
const snackbar = useTemplateRef<SnackBarType>('snackbar');
|
||||
const editDialog = useTemplateRef<EditDialogType>('editDialog');
|
||||
|
||||
const activeCategoryType = ref<CategoryType>(CategoryType.Expense);
|
||||
const activeTab = ref<string>('categoryPage');
|
||||
const primaryCategoryId = ref<string>('0');
|
||||
const loading = ref<boolean>(true);
|
||||
const updating = ref<boolean>(false);
|
||||
const categoryHiding = ref<Record<string, boolean>>({});
|
||||
const categoryRemoving = ref<Record<string, boolean>>({});
|
||||
const displayOrderModified = ref<boolean>(false);
|
||||
const cardMinHeight = ref<number>(680);
|
||||
const alwaysShowNav = ref<boolean>(display.mdAndUp.value);
|
||||
const showNav = ref<boolean>(display.mdAndUp.value);
|
||||
const showHidden = ref<boolean>(false);
|
||||
const showPresetDialog = ref<boolean>(false);
|
||||
|
||||
const primaryCategories = computed<TransactionCategory[]>(() => {
|
||||
if (!transactionCategoriesStore.allTransactionCategories || !transactionCategoriesStore.allTransactionCategories[activeCategoryType.value]) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return transactionCategoriesStore.allTransactionCategories[activeCategoryType.value];
|
||||
});
|
||||
|
||||
const secondaryCategories = computed<TransactionCategory[]>(() => {
|
||||
if (!transactionCategoriesStore.allTransactionCategoriesMap || !transactionCategoriesStore.allTransactionCategoriesMap[primaryCategoryId.value]) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return transactionCategoriesStore.allTransactionCategoriesMap[primaryCategoryId.value].secondaryCategories || [];
|
||||
});
|
||||
|
||||
const hasSubCategories = computed<boolean>(() => {
|
||||
return !primaryCategoryId.value || primaryCategoryId.value === '' || primaryCategoryId.value === '0';
|
||||
});
|
||||
|
||||
const categories = computed<TransactionCategory[]>(() => {
|
||||
if (hasSubCategories.value) {
|
||||
return primaryCategories.value;
|
||||
} else {
|
||||
return secondaryCategories.value;
|
||||
}
|
||||
});
|
||||
|
||||
const noAvailableCategory = computed<boolean>(() => isNoAvailableCategory(categories.value, showHidden.value));
|
||||
const noCategory = computed<boolean>(() => categories.value.length < 1);
|
||||
const availableCategoryCount = computed<number>(() => getAvailableCategoryCount(categories.value, showHidden.value));
|
||||
|
||||
function updateCardMinHeight(): void {
|
||||
nextTick(() => {
|
||||
if (navbar.value && navbar.value.$el && navbar.value.$el.nextElementSibling) {
|
||||
const navbarHeight = getNavSideBarOuterHeight(navbar.value.$el.nextElementSibling);
|
||||
cardMinHeight.value = Math.max(navbarHeight, 680);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.reload(false);
|
||||
},
|
||||
setup() {
|
||||
const display = useDisplay();
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
display: display
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'display.mdAndUp.value': function (newValue) {
|
||||
this.alwaysShowNav = newValue;
|
||||
function isCategorySupportSwitch(category: TransactionCategory): boolean {
|
||||
if (!category || category.hidden) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!this.showNav) {
|
||||
this.showNav = newValue;
|
||||
}
|
||||
return !category.parentId || category.parentId === '' || category.parentId === '0';
|
||||
}
|
||||
|
||||
function switchAllPrimaryCategories(): void {
|
||||
primaryCategoryId.value = '0';
|
||||
updateCardMinHeight();
|
||||
}
|
||||
|
||||
function switchPrimaryCategory(category: TransactionCategory): void {
|
||||
if (!category || category.hidden) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!category.parentId || category.parentId === '' || category.parentId === '0') {
|
||||
primaryCategoryId.value = category.id;
|
||||
}
|
||||
|
||||
updateCardMinHeight();
|
||||
}
|
||||
|
||||
function reload(force: boolean): void {
|
||||
loading.value = true;
|
||||
|
||||
transactionCategoriesStore.loadAllCategories({
|
||||
force: force
|
||||
}).then(() => {
|
||||
loading.value = false;
|
||||
displayOrderModified.value = false;
|
||||
|
||||
if (force) {
|
||||
snackbar.value?.showMessage('Category list has been updated');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reload(force) {
|
||||
const self = this;
|
||||
|
||||
self.loading = true;
|
||||
updateCardMinHeight();
|
||||
}).catch(error => {
|
||||
loading.value = false;
|
||||
|
||||
self.transactionCategoriesStore.loadAllCategories({
|
||||
force: force
|
||||
}).then(() => {
|
||||
self.loading = false;
|
||||
self.displayOrderModified = false;
|
||||
|
||||
if (force) {
|
||||
self.$refs.snackbar.showMessage('Category list has been updated');
|
||||
}
|
||||
|
||||
self.updateCardMinHeight();
|
||||
}).catch(error => {
|
||||
self.loading = false;
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
onMove(event) {
|
||||
if (!event || !event.moved) {
|
||||
return;
|
||||
}
|
||||
|
||||
const self = this;
|
||||
const moveEvent = event.moved;
|
||||
|
||||
if (!moveEvent.element || !moveEvent.element.id) {
|
||||
self.$refs.snackbar.showMessage('Unable to move category');
|
||||
return;
|
||||
}
|
||||
|
||||
self.transactionCategoriesStore.changeCategoryDisplayOrder({
|
||||
categoryId: moveEvent.element.id,
|
||||
from: moveEvent.oldIndex,
|
||||
to: moveEvent.newIndex
|
||||
}).then(() => {
|
||||
self.displayOrderModified = true;
|
||||
}).catch(error => {
|
||||
self.$refs.snackbar.showError(error);
|
||||
});
|
||||
},
|
||||
saveSortResult() {
|
||||
const self = this;
|
||||
|
||||
if (!self.displayOrderModified) {
|
||||
return;
|
||||
}
|
||||
|
||||
self.loading = true;
|
||||
|
||||
self.transactionCategoriesStore.updateCategoryDisplayOrders({
|
||||
type: self.activeCategoryType,
|
||||
parentId: self.primaryCategoryId,
|
||||
}).then(() => {
|
||||
self.loading = false;
|
||||
self.displayOrderModified = false;
|
||||
}).catch(error => {
|
||||
self.loading = false;
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
add() {
|
||||
const self = this;
|
||||
|
||||
self.$refs.editDialog.open({
|
||||
type: self.activeCategoryType,
|
||||
parentId: self.primaryCategoryId
|
||||
}).then(result => {
|
||||
if (result && result.message) {
|
||||
self.$refs.snackbar.showMessage(result.message);
|
||||
}
|
||||
|
||||
self.updateCardMinHeight();
|
||||
}).catch(error => {
|
||||
if (error) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
edit(category) {
|
||||
const self = this;
|
||||
|
||||
self.$refs.editDialog.open({
|
||||
id: category.id,
|
||||
currentCategory: category
|
||||
}).then(result => {
|
||||
if (result && result.message) {
|
||||
self.$refs.snackbar.showMessage(result.message);
|
||||
}
|
||||
|
||||
if (self.transactionCategoriesStore.transactionCategoryListStateInvalid) {
|
||||
self.reload(true);
|
||||
}
|
||||
|
||||
self.updateCardMinHeight();
|
||||
}).catch(error => {
|
||||
if (error) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
hide(category, hidden) {
|
||||
const self = this;
|
||||
|
||||
self.updating = true;
|
||||
self.categoryHiding[category.id] = true;
|
||||
|
||||
self.transactionCategoriesStore.hideCategory({
|
||||
category: category,
|
||||
hidden: hidden
|
||||
}).then(() => {
|
||||
self.updating = false;
|
||||
self.categoryHiding[category.id] = false;
|
||||
|
||||
self.updateCardMinHeight();
|
||||
}).catch(error => {
|
||||
self.updating = false;
|
||||
self.categoryHiding[category.id] = false;
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
remove(category) {
|
||||
const self = this;
|
||||
|
||||
self.$refs.confirmDialog.open('Are you sure you want to delete this category?').then(() => {
|
||||
self.updating = true;
|
||||
self.categoryRemoving[category.id] = true;
|
||||
|
||||
self.transactionCategoriesStore.deleteCategory({
|
||||
category: category
|
||||
}).then(() => {
|
||||
self.updating = false;
|
||||
self.categoryRemoving[category.id] = false;
|
||||
|
||||
self.updateCardMinHeight();
|
||||
}).catch(error => {
|
||||
self.updating = false;
|
||||
self.categoryRemoving[category.id] = false;
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
presetCategorySaved(e) {
|
||||
if (e && e.message) {
|
||||
this.$refs.snackbar.showMessage(e.message);
|
||||
this.reload(false);
|
||||
}
|
||||
},
|
||||
isCategorySupportSwitch(category) {
|
||||
if (!category || category.hidden) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return !category.parentId || category.parentId === '' || category.parentId === '0';
|
||||
},
|
||||
switchAllPrimaryCategories() {
|
||||
this.primaryCategoryId = '0';
|
||||
this.updateCardMinHeight();
|
||||
},
|
||||
switchPrimaryCategory(category) {
|
||||
if (!category || category.hidden) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!category.parentId || category.parentId === '' || category.parentId === '0') {
|
||||
this.primaryCategoryId = category.id;
|
||||
}
|
||||
|
||||
this.updateCardMinHeight();
|
||||
},
|
||||
updateCardMinHeight() {
|
||||
const self = this
|
||||
|
||||
self.$nextTick(() => {
|
||||
if (self.$refs.navbar && self.$refs.navbar.$el && self.$refs.navbar.$el.nextElementSibling) {
|
||||
const navbarHeight = getNavSideBarOuterHeight(self.$refs.navbar.$el.nextElementSibling);
|
||||
self.cardMinHeight = Math.max(navbarHeight, 680);
|
||||
}
|
||||
});
|
||||
if (!error.processed) {
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function add(): void {
|
||||
editDialog.value?.open({
|
||||
type: activeCategoryType.value,
|
||||
parentId: primaryCategoryId.value
|
||||
}).then(result => {
|
||||
if (result && result.message) {
|
||||
snackbar.value?.showMessage(result.message);
|
||||
}
|
||||
|
||||
updateCardMinHeight();
|
||||
}).catch(error => {
|
||||
if (error) {
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function edit(category: TransactionCategory): void {
|
||||
editDialog.value?.open({
|
||||
id: category.id,
|
||||
currentCategory: category
|
||||
}).then(result => {
|
||||
if (result && result.message) {
|
||||
snackbar.value?.showMessage(result.message);
|
||||
}
|
||||
|
||||
if (transactionCategoriesStore.transactionCategoryListStateInvalid) {
|
||||
reload(true);
|
||||
}
|
||||
|
||||
updateCardMinHeight();
|
||||
}).catch(error => {
|
||||
if (error) {
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function hide(category: TransactionCategory, hidden: boolean): void {
|
||||
updating.value = true;
|
||||
categoryHiding.value[category.id] = true;
|
||||
|
||||
transactionCategoriesStore.hideCategory({
|
||||
category: category,
|
||||
hidden: hidden
|
||||
}).then(() => {
|
||||
updating.value = false;
|
||||
categoryHiding.value[category.id] = false;
|
||||
|
||||
updateCardMinHeight();
|
||||
}).catch(error => {
|
||||
updating.value = false;
|
||||
categoryHiding.value[category.id] = false;
|
||||
|
||||
if (!error.processed) {
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function remove(category: TransactionCategory): void {
|
||||
confirmDialog.value?.open('Are you sure you want to delete this category?').then(() => {
|
||||
updating.value = true;
|
||||
categoryRemoving.value[category.id] = true;
|
||||
|
||||
transactionCategoriesStore.deleteCategory({
|
||||
category: category
|
||||
}).then(() => {
|
||||
updating.value = false;
|
||||
categoryRemoving.value[category.id] = false;
|
||||
|
||||
updateCardMinHeight();
|
||||
}).catch(error => {
|
||||
updating.value = false;
|
||||
categoryRemoving.value[category.id] = false;
|
||||
|
||||
if (!error.processed) {
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function saveSortResult(): void {
|
||||
if (!displayOrderModified.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
|
||||
transactionCategoriesStore.updateCategoryDisplayOrders({
|
||||
type: activeCategoryType.value,
|
||||
parentId: primaryCategoryId.value
|
||||
}).then(() => {
|
||||
loading.value = false;
|
||||
displayOrderModified.value = false;
|
||||
}).catch(error => {
|
||||
loading.value = false;
|
||||
|
||||
if (!error.processed) {
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onMove(event: { moved: { element: { id: string }, oldIndex: number, newIndex: number } }): void {
|
||||
if (!event || !event.moved) {
|
||||
return;
|
||||
}
|
||||
|
||||
const moveEvent = event.moved;
|
||||
|
||||
if (!moveEvent.element || !moveEvent.element.id) {
|
||||
snackbar.value?.showMessage('Unable to move category');
|
||||
return;
|
||||
}
|
||||
|
||||
transactionCategoriesStore.changeCategoryDisplayOrder({
|
||||
categoryId: moveEvent.element.id,
|
||||
from: moveEvent.oldIndex,
|
||||
to: moveEvent.newIndex
|
||||
}).then(() => {
|
||||
displayOrderModified.value = true;
|
||||
}).catch(error => {
|
||||
snackbar.value?.showError(error);
|
||||
});
|
||||
}
|
||||
|
||||
function onPresetCategorySaved(e: { message: string }): void {
|
||||
if (e && e.message) {
|
||||
snackbar.value?.showMessage(e.message);
|
||||
reload(false);
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => display.mdAndUp.value, (newValue) => {
|
||||
alwaysShowNav.value = newValue;
|
||||
|
||||
if (!showNav.value) {
|
||||
showNav.value = newValue;
|
||||
}
|
||||
});
|
||||
|
||||
reload(false);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<f7-page :ptr="!sortable" @ptr:refresh="reload" @page:afterin="onPageAfterIn">
|
||||
<f7-navbar>
|
||||
<f7-nav-left :back-link="$t('Back')"></f7-nav-left>
|
||||
<f7-nav-title :title="$t(title)"></f7-nav-title>
|
||||
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
|
||||
<f7-nav-title :title="tt(title)"></f7-nav-title>
|
||||
<f7-nav-right class="navbar-compact-icons">
|
||||
<f7-link icon-f7="ellipsis" :class="{ 'disabled': !categories.length }" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
|
||||
<f7-link :href="'/category/add?type=' + categoryType + '&parentId=' + primaryCategoryId" icon-f7="plus" v-if="!sortable"></f7-link>
|
||||
<f7-link :text="$t('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
|
||||
<f7-link :text="tt('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
|
||||
</f7-nav-right>
|
||||
</f7-navbar>
|
||||
|
||||
@@ -21,9 +21,9 @@
|
||||
</f7-list>
|
||||
|
||||
<f7-list strong inset dividers class="margin-top" v-if="!loading && noAvailableCategory">
|
||||
<f7-list-item :title="$t('No available category')"></f7-list-item>
|
||||
<f7-list-item :title="tt('No available category')"></f7-list-item>
|
||||
<f7-list-button v-if="hasSubCategories && noCategory"
|
||||
:title="$t('Add Default Categories')"
|
||||
:title="tt('Add Default Categories')"
|
||||
:href="'/category/preset?type=' + categoryType"></f7-list-button>
|
||||
</f7-list>
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
</f7-swipeout-button>
|
||||
</f7-swipeout-actions>
|
||||
<f7-swipeout-actions right v-if="!sortable">
|
||||
<f7-swipeout-button color="orange" close :text="$t('Edit')" @click="edit(category)"></f7-swipeout-button>
|
||||
<f7-swipeout-button color="orange" close :text="tt('Edit')" @click="edit(category)"></f7-swipeout-button>
|
||||
<f7-swipeout-button color="red" class="padding-left padding-right" @click="remove(category, false)">
|
||||
<f7-icon f7="trash"></f7-icon>
|
||||
</f7-swipeout-button>
|
||||
@@ -65,326 +65,321 @@
|
||||
|
||||
<f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
|
||||
<f7-actions-group>
|
||||
<f7-actions-button @click="setSortable()">{{ $t('Sort') }}</f7-actions-button>
|
||||
<f7-actions-button v-if="!showHidden" @click="showHidden = true">{{ $t('Show Hidden Transaction Categories') }}</f7-actions-button>
|
||||
<f7-actions-button v-if="showHidden" @click="showHidden = false">{{ $t('Hide Hidden Transaction Categories') }}</f7-actions-button>
|
||||
<f7-actions-button @click="setSortable()">{{ tt('Sort') }}</f7-actions-button>
|
||||
<f7-actions-button v-if="!showHidden" @click="showHidden = true">{{ tt('Show Hidden Transaction Categories') }}</f7-actions-button>
|
||||
<f7-actions-button v-if="showHidden" @click="showHidden = false">{{ tt('Hide Hidden Transaction Categories') }}</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>
|
||||
|
||||
<f7-actions close-by-outside-click close-on-escape :opened="showDeleteActionSheet" @actions:closed="showDeleteActionSheet = false">
|
||||
<f7-actions-group>
|
||||
<f7-actions-label>{{ $t('Are you sure you want to delete this category?') }}</f7-actions-label>
|
||||
<f7-actions-button color="red" @click="remove(categoryToDelete, true)">{{ $t('Delete') }}</f7-actions-button>
|
||||
<f7-actions-label>{{ tt('Are you sure you want to delete this category?') }}</f7-actions-label>
|
||||
<f7-actions-button color="red" @click="remove(categoryToDelete, true)">{{ tt('Delete') }}</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>
|
||||
</f7-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import type { Router } from 'framework7/types';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
import { useI18nUIComponents, showLoading, hideLoading, onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
|
||||
|
||||
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
|
||||
|
||||
import { CategoryType } from '@/core/category.ts';
|
||||
import type { TransactionCategory } from '@/models/transaction_category.ts';
|
||||
|
||||
import {
|
||||
isNoAvailableCategory,
|
||||
getFirstShowingId,
|
||||
getLastShowingId
|
||||
} from '@/lib/category.ts';
|
||||
import { onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7route',
|
||||
'f7router'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
hasSubCategories: false,
|
||||
categoryType: 0,
|
||||
primaryCategoryId: '',
|
||||
loading: true,
|
||||
loadingError: null,
|
||||
showHidden: false,
|
||||
sortable: false,
|
||||
categoryToDelete: null,
|
||||
showMoreActionSheet: false,
|
||||
showDeleteActionSheet: false,
|
||||
displayOrderModified: false,
|
||||
displayOrderSaving: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useTransactionCategoriesStore),
|
||||
categories() {
|
||||
if (!this.primaryCategoryId || this.primaryCategoryId === '' || this.primaryCategoryId === '0') {
|
||||
if (!this.transactionCategoriesStore.allTransactionCategories || !this.transactionCategoriesStore.allTransactionCategories[this.categoryType]) {
|
||||
return [];
|
||||
}
|
||||
const props = defineProps<{
|
||||
f7route: Router.Route;
|
||||
f7router: Router.Router;
|
||||
}>();
|
||||
|
||||
return this.transactionCategoriesStore.allTransactionCategories[this.categoryType];
|
||||
} else if (this.primaryCategoryId && this.primaryCategoryId !== '' && this.primaryCategoryId !== '0') {
|
||||
if (!this.transactionCategoriesStore.allTransactionCategoriesMap || !this.transactionCategoriesStore.allTransactionCategoriesMap[this.primaryCategoryId]) {
|
||||
return [];
|
||||
}
|
||||
const { tt } = useI18n();
|
||||
const { showAlert, showToast, routeBackOnError } = useI18nUIComponents();
|
||||
|
||||
return this.transactionCategoriesStore.allTransactionCategoriesMap[this.primaryCategoryId].subCategories;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
title() {
|
||||
let title = '';
|
||||
const transactionCategoriesStore = useTransactionCategoriesStore();
|
||||
|
||||
switch (this.categoryType) {
|
||||
case CategoryType.Income:
|
||||
title = 'Income';
|
||||
break;
|
||||
case CategoryType.Expense:
|
||||
title = 'Expense';
|
||||
break;
|
||||
case CategoryType.Transfer:
|
||||
title = 'Transfer';
|
||||
break;
|
||||
default:
|
||||
title = 'Transaction';
|
||||
break;
|
||||
}
|
||||
const hasSubCategories = ref<boolean>(false);
|
||||
const categoryType = ref<CategoryType | 0>(0);
|
||||
const primaryCategoryId = ref<string>('0');
|
||||
const loading = ref<boolean>(true);
|
||||
const loadingError = ref<unknown | null>(null);
|
||||
const showHidden = ref<boolean>(false);
|
||||
const sortable = ref<boolean>(false);
|
||||
const categoryToDelete = ref<TransactionCategory | null>(null);
|
||||
const showMoreActionSheet = ref<boolean>(false);
|
||||
const showDeleteActionSheet = ref<boolean>(false);
|
||||
const displayOrderModified = ref<boolean>(false);
|
||||
const displayOrderSaving = ref<boolean>(false);
|
||||
|
||||
switch (this.hasSubCategories) {
|
||||
case true:
|
||||
title += ' Primary';
|
||||
break;
|
||||
case false:
|
||||
title += ' Secondary';
|
||||
break;
|
||||
}
|
||||
|
||||
return title + ' Categories';
|
||||
},
|
||||
firstShowingId() {
|
||||
return getFirstShowingId(this.categories, this.showHidden);
|
||||
},
|
||||
lastShowingId() {
|
||||
return getLastShowingId(this.categories, this.showHidden);
|
||||
},
|
||||
noAvailableCategory() {
|
||||
return isNoAvailableCategory(this.categories, this.showHidden);
|
||||
},
|
||||
noCategory() {
|
||||
return this.categories.length < 1;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const self = this;
|
||||
const query = self.f7route.query;
|
||||
|
||||
self.categoryType = parseInt(query.type);
|
||||
|
||||
if (self.categoryType !== CategoryType.Income &&
|
||||
self.categoryType !== CategoryType.Expense &&
|
||||
self.categoryType !== CategoryType.Transfer) {
|
||||
self.$toast('Parameter Invalid');
|
||||
self.loadingError = 'Parameter Invalid';
|
||||
return;
|
||||
const categories = computed<TransactionCategory[]>(() => {
|
||||
if (!primaryCategoryId.value || primaryCategoryId.value === '' || primaryCategoryId.value === '0') {
|
||||
if (!transactionCategoriesStore.allTransactionCategories || !transactionCategoriesStore.allTransactionCategories[categoryType.value]) {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (query.id && query.id !== '0') {
|
||||
self.primaryCategoryId = query.id;
|
||||
self.hasSubCategories = false;
|
||||
} else {
|
||||
self.primaryCategoryId = '0';
|
||||
self.hasSubCategories = true;
|
||||
return transactionCategoriesStore.allTransactionCategories[categoryType.value];
|
||||
} else if (primaryCategoryId.value && primaryCategoryId.value !== '' && primaryCategoryId.value !== '0') {
|
||||
if (!transactionCategoriesStore.allTransactionCategoriesMap || !transactionCategoriesStore.allTransactionCategoriesMap[primaryCategoryId.value]) {
|
||||
return [];
|
||||
}
|
||||
|
||||
self.loading = true;
|
||||
|
||||
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() {
|
||||
if (this.transactionCategoriesStore.transactionCategoryListStateInvalid && !this.loading) {
|
||||
this.reload(null);
|
||||
}
|
||||
|
||||
this.$routeBackOnError(this.f7router, 'loadingError');
|
||||
},
|
||||
reload(done) {
|
||||
if (this.sortable) {
|
||||
done();
|
||||
return;
|
||||
}
|
||||
|
||||
const self = this;
|
||||
const force = !!done;
|
||||
|
||||
self.transactionCategoriesStore.loadAllCategories({
|
||||
force: force
|
||||
}).then(() => {
|
||||
if (done) {
|
||||
done();
|
||||
}
|
||||
|
||||
if (force) {
|
||||
self.$toast('Category list has been updated');
|
||||
}
|
||||
}).catch(error => {
|
||||
if (done) {
|
||||
done();
|
||||
}
|
||||
|
||||
if (!error.processed) {
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
},
|
||||
setSortable() {
|
||||
if (this.sortable) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.showHidden = true;
|
||||
this.sortable = true;
|
||||
this.displayOrderModified = false;
|
||||
},
|
||||
onSort(event) {
|
||||
const self = this;
|
||||
|
||||
if (!event || !event.el || !event.el.id) {
|
||||
self.$toast('Unable to move category');
|
||||
return;
|
||||
}
|
||||
|
||||
const id = self.parseCategoryIdFromDomId(event.el.id);
|
||||
|
||||
if (!id) {
|
||||
self.$toast('Unable to move category');
|
||||
return;
|
||||
}
|
||||
|
||||
self.transactionCategoriesStore.changeCategoryDisplayOrder({
|
||||
categoryId: id,
|
||||
from: event.from,
|
||||
to: event.to
|
||||
}).then(() => {
|
||||
self.displayOrderModified = true;
|
||||
}).catch(error => {
|
||||
self.$toast(error.message || error);
|
||||
});
|
||||
},
|
||||
saveSortResult() {
|
||||
const self = this;
|
||||
|
||||
if (!self.displayOrderModified) {
|
||||
self.showHidden = false;
|
||||
self.sortable = false;
|
||||
return;
|
||||
}
|
||||
|
||||
self.displayOrderSaving = true;
|
||||
self.$showLoading();
|
||||
|
||||
self.transactionCategoriesStore.updateCategoryDisplayOrders({
|
||||
type: self.categoryType,
|
||||
parentId: self.primaryCategoryId,
|
||||
}).then(() => {
|
||||
self.displayOrderSaving = false;
|
||||
self.$hideLoading();
|
||||
|
||||
self.showHidden = false;
|
||||
self.sortable = false;
|
||||
self.displayOrderModified = false;
|
||||
}).catch(error => {
|
||||
self.displayOrderSaving = false;
|
||||
self.$hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
},
|
||||
edit(category) {
|
||||
this.f7router.navigate('/category/edit?id=' + category.id);
|
||||
},
|
||||
hide(category, hidden) {
|
||||
const self = this;
|
||||
|
||||
self.$showLoading();
|
||||
|
||||
self.transactionCategoriesStore.hideCategory({
|
||||
category: category,
|
||||
hidden: hidden
|
||||
}).then(() => {
|
||||
self.$hideLoading();
|
||||
}).catch(error => {
|
||||
self.$hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
},
|
||||
remove(category, confirm) {
|
||||
const self = this;
|
||||
|
||||
if (!category) {
|
||||
self.$alert('An error occurred');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm) {
|
||||
self.categoryToDelete = category;
|
||||
self.showDeleteActionSheet = true;
|
||||
return;
|
||||
}
|
||||
|
||||
self.showDeleteActionSheet = false;
|
||||
self.categoryToDelete = null;
|
||||
self.$showLoading();
|
||||
|
||||
self.transactionCategoriesStore.deleteCategory({
|
||||
category: category,
|
||||
beforeResolve: (done) => {
|
||||
onSwipeoutDeleted(self.getCategoryDomId(category), done);
|
||||
}
|
||||
}).then(() => {
|
||||
self.$hideLoading();
|
||||
}).catch(error => {
|
||||
self.$hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
},
|
||||
getCategoryDomId(category) {
|
||||
return 'category_' + category.id;
|
||||
},
|
||||
parseCategoryIdFromDomId(domId) {
|
||||
if (!domId || domId.indexOf('category_') !== 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return domId.substring(9); // category_
|
||||
}
|
||||
return transactionCategoriesStore.allTransactionCategoriesMap[primaryCategoryId.value].secondaryCategories || [];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const title = computed<string>(() => {
|
||||
let title = '';
|
||||
|
||||
switch (categoryType.value) {
|
||||
case CategoryType.Income:
|
||||
title = 'Income';
|
||||
break;
|
||||
case CategoryType.Expense:
|
||||
title = 'Expense';
|
||||
break;
|
||||
case CategoryType.Transfer:
|
||||
title = 'Transfer';
|
||||
break;
|
||||
default:
|
||||
title = 'Transaction';
|
||||
break;
|
||||
}
|
||||
|
||||
switch (hasSubCategories.value) {
|
||||
case true:
|
||||
title += ' Primary';
|
||||
break;
|
||||
case false:
|
||||
title += ' Secondary';
|
||||
break;
|
||||
}
|
||||
|
||||
return title + ' Categories';
|
||||
});
|
||||
|
||||
const firstShowingId = computed<string | null>(() => getFirstShowingId(categories.value, showHidden.value));
|
||||
const lastShowingId = computed<string | null>(() => getLastShowingId(categories.value, showHidden.value));
|
||||
const noAvailableCategory = computed<boolean>(() => isNoAvailableCategory(categories.value, showHidden.value));
|
||||
const noCategory = computed<boolean>(() => categories.value.length < 1);
|
||||
|
||||
function getCategoryDomId(category: TransactionCategory): string {
|
||||
return 'category_' + category.id;
|
||||
}
|
||||
|
||||
function parseCategoryIdFromDomId(domId: string): string | null {
|
||||
if (!domId || domId.indexOf('category_') !== 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return domId.substring(9); // category_
|
||||
}
|
||||
|
||||
function init(): void {
|
||||
const query = props.f7route.query;
|
||||
|
||||
categoryType.value = parseInt(query['type'] || '0');
|
||||
|
||||
if (categoryType.value !== CategoryType.Income &&
|
||||
categoryType.value !== CategoryType.Expense &&
|
||||
categoryType.value !== CategoryType.Transfer) {
|
||||
showToast('Parameter Invalid');
|
||||
loadingError.value = 'Parameter Invalid';
|
||||
return;
|
||||
}
|
||||
|
||||
if (query['id'] && query['id'] !== '0') {
|
||||
primaryCategoryId.value = query['id'];
|
||||
hasSubCategories.value = false;
|
||||
} else {
|
||||
primaryCategoryId.value = '0';
|
||||
hasSubCategories.value = true;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
|
||||
transactionCategoriesStore.loadAllCategories({
|
||||
force: false
|
||||
}).then(() => {
|
||||
loading.value = false;
|
||||
}).catch(error => {
|
||||
if (error.processed) {
|
||||
loading.value = false;
|
||||
} else {
|
||||
loadingError.value = error;
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function reload(done: (() => void) | null): void {
|
||||
if (sortable.value) {
|
||||
done?.();
|
||||
return;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function edit(category: TransactionCategory): void {
|
||||
props.f7router.navigate('/category/edit?id=' + category.id);
|
||||
}
|
||||
|
||||
function hide(category: TransactionCategory, hidden: boolean): void {
|
||||
showLoading();
|
||||
|
||||
transactionCategoriesStore.hideCategory({
|
||||
category: category,
|
||||
hidden: hidden
|
||||
}).then(() => {
|
||||
hideLoading();
|
||||
}).catch(error => {
|
||||
hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function remove(category: TransactionCategory | null, confirm: boolean): void {
|
||||
if (!category) {
|
||||
showAlert('An error occurred');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm) {
|
||||
categoryToDelete.value = category;
|
||||
showDeleteActionSheet.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
showDeleteActionSheet.value = false;
|
||||
categoryToDelete.value = null;
|
||||
showLoading();
|
||||
|
||||
transactionCategoriesStore.deleteCategory({
|
||||
category: category,
|
||||
beforeResolve: (done) => {
|
||||
onSwipeoutDeleted(getCategoryDomId(category), done);
|
||||
}
|
||||
}).then(() => {
|
||||
hideLoading();
|
||||
}).catch(error => {
|
||||
hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setSortable(): void {
|
||||
if (sortable.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
showHidden.value = true;
|
||||
sortable.value = true;
|
||||
displayOrderModified.value = false;
|
||||
}
|
||||
|
||||
function saveSortResult(): void {
|
||||
if (!displayOrderModified.value) {
|
||||
showHidden.value = false;
|
||||
sortable.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
displayOrderSaving.value = true;
|
||||
showLoading();
|
||||
|
||||
transactionCategoriesStore.updateCategoryDisplayOrders({
|
||||
type: categoryType.value as CategoryType,
|
||||
parentId: primaryCategoryId.value
|
||||
}).then(() => {
|
||||
displayOrderSaving.value = false;
|
||||
hideLoading();
|
||||
|
||||
showHidden.value = false;
|
||||
sortable.value = false;
|
||||
displayOrderModified.value = false;
|
||||
}).catch(error => {
|
||||
displayOrderSaving.value = false;
|
||||
hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onPageAfterIn(): void {
|
||||
if (transactionCategoriesStore.transactionCategoryListStateInvalid && !loading.value) {
|
||||
reload(null);
|
||||
}
|
||||
|
||||
routeBackOnError(props.f7router, loadingError);
|
||||
}
|
||||
|
||||
function onSort(event: { el: { id: string }; from: number; to: number }): void {
|
||||
if (!event || !event.el || !event.el.id) {
|
||||
showToast('Unable to move category');
|
||||
return;
|
||||
}
|
||||
|
||||
const id = parseCategoryIdFromDomId(event.el.id);
|
||||
|
||||
if (!id) {
|
||||
showToast('Unable to move category');
|
||||
return;
|
||||
}
|
||||
|
||||
transactionCategoriesStore.changeCategoryDisplayOrder({
|
||||
categoryId: id,
|
||||
from: event.from,
|
||||
to: event.to
|
||||
}).then(() => {
|
||||
displayOrderModified.value = true;
|
||||
}).catch(error => {
|
||||
showToast(error.message || error);
|
||||
});
|
||||
}
|
||||
|
||||
init();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
Reference in New Issue
Block a user