support changing primary category for transaction category

This commit is contained in:
MaysWind
2024-06-23 23:37:58 +08:00
parent 9627e65d6d
commit 0e391bee50
12 changed files with 166 additions and 28 deletions
@@ -414,6 +414,10 @@ export default {
self.$refs.snackbar.showMessage(result.message);
}
if (self.transactionCategoriesStore.transactionCategoryListStateInvalid) {
self.reload(true);
}
self.updateCardMinHeight();
}).catch(error => {
if (error) {
@@ -21,6 +21,31 @@
v-model="category.name"
/>
</v-col>
<v-col cols="12" md="12" v-if="editCategoryId && category.parentId && category.parentId !== '0'">
<v-select
item-title="name"
item-value="id"
persistent-placeholder
:disabled="loading || submitting"
:label="$t('Primary Category')"
:placeholder="$t('Primary Category')"
:items="allAvailableCategories"
:no-data-text="$t('No available primary category')"
v-model="category.parentId"
>
<template #item="{ props, item }">
<v-list-item v-bind="props">
<template #prepend>
<ItemIcon class="mr-2" icon-type="category"
:icon-id="item.raw.icon" :color="item.raw.color"></ItemIcon>
</template>
<template #title>
<div class="text-truncate">{{ item.raw.name }}</div>
</template>
</v-list-item>
</template>
</v-select>
</v-col>
<v-col cols="12" md="6">
<icon-select icon-type="category"
:all-icon-infos="allCategoryIcons"
@@ -76,7 +101,10 @@ import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
import categoryConstants from '@/consts/category.js';
import iconConstants from '@/consts/icon.js';
import colorConstants from '@/consts/color.js';
import { setCategoryModelByAnotherCategory } from '@/lib/category.js';
import {
setCategoryModelByAnotherCategory,
allVisiblePrimaryTransactionCategoriesByType
} from '@/lib/category.js';
export default {
props: [
@@ -102,6 +130,9 @@ export default {
},
computed: {
...mapStores(useTransactionCategoriesStore),
allAvailableCategories() {
return allVisiblePrimaryTransactionCategoriesByType(this.transactionCategoriesStore.allTransactionCategories, this.category.type);
},
title() {
if (!this.editCategoryId) {
if (this.category.parentId === '0') {
+30 -1
View File
@@ -10,6 +10,7 @@
<f7-list strong inset dividers class="margin-top skeleton-text" v-if="loading">
<f7-list-input label="Category Name" placeholder="Your category name"></f7-list-input>
<f7-list-item class="list-item-with-header-and-title" header="Primary Category" title="Primary Category"></f7-list-item>
<f7-list-item class="list-item-with-header-and-title list-item-with-multi-item">
<template #default>
<div class="grid grid-cols-2">
@@ -61,6 +62,23 @@
v-model:value="category.name"
></f7-list-input>
<f7-list-item
link="#" no-chevron
class="list-item-with-header-and-title"
:header="$t('Primary Category')"
:title="getPrimaryCategoryName(category.parentId)"
@click="showPrimaryCategorySheet = true"
v-if="editCategoryId && category.parentId && category.parentId !== '0'"
>
<list-item-selection-sheet value-type="item"
key-field="id" value-field="id" title-field="name"
icon-field="icon" icon-type="category" color-field="color"
:items="allAvailableCategories"
v-model:show="showPrimaryCategorySheet"
v-model="category.parentId">
</list-item-selection-sheet>
</f7-list-item>
<f7-list-item class="list-item-with-header-and-title list-item-with-multi-item">
<template #default>
<div class="grid grid-cols-2">
@@ -134,7 +152,11 @@ import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
import categoryConstants from '@/consts/category.js';
import iconConstants from '@/consts/icon.js';
import colorConstants from '@/consts/color.js';
import { setCategoryModelByAnotherCategory } from '@/lib/category.js';
import {
setCategoryModelByAnotherCategory,
allVisiblePrimaryTransactionCategoriesByType
} from '@/lib/category.js';
import {getNameByKeyValue} from "@/lib/common";
export default {
props: [
@@ -153,11 +175,15 @@ export default {
loading: false,
loadingError: null,
category: newTransactionCategory,
showPrimaryCategorySheet: false,
submitting: false
};
},
computed: {
...mapStores(useTransactionCategoriesStore),
allAvailableCategories() {
return allVisiblePrimaryTransactionCategoriesByType(this.transactionCategoriesStore.allTransactionCategories, this.category.type);
},
title() {
if (!this.editCategoryId) {
if (this.category.parentId === '0') {
@@ -274,6 +300,9 @@ export default {
self.$toast(error.message || error);
}
});
},
getPrimaryCategoryName(parentId) {
return getNameByKeyValue(this.allAvailableCategories, parentId, 'id', 'name');
}
}
}