add transaction category list page
This commit is contained in:
MaysWind
@@ -1069,6 +1069,7 @@ export default {
|
||||
'Expense Categories': 'Expense Categories',
|
||||
'Income Categories': 'Income Categories',
|
||||
'Transfer Categories': 'Transfer Categories',
|
||||
'Primary Categories': 'Primary Categories',
|
||||
'Expense Primary Categories': 'Expense Primary Categories',
|
||||
'Income Primary Categories': 'Income Primary Categories',
|
||||
'Transfer Primary Categories': 'Transfer Primary Categories',
|
||||
|
||||
@@ -1069,6 +1069,7 @@ export default {
|
||||
'Expense Categories': '支出分类',
|
||||
'Income Categories': '收入分类',
|
||||
'Transfer Categories': '转账分类',
|
||||
'Primary Categories': '一级分类',
|
||||
'Expense Primary Categories': '支出一级分类',
|
||||
'Income Primary Categories': '收入一级分类',
|
||||
'Transfer Primary Categories': '转账一级分类',
|
||||
|
||||
@@ -1,13 +1,441 @@
|
||||
<template>
|
||||
<v-row class="match-height">
|
||||
categories
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<div class="d-flex flex-column flex-md-row">
|
||||
<div>
|
||||
<div class="mx-6 my-4">
|
||||
<div class="transaction-type-buttons d-flex flex-column">
|
||||
<v-btn border :color="activeCategoryType === allCategoryTypes.Expense ? 'primary' : 'default'"
|
||||
:variant="activeCategoryType === allCategoryTypes.Expense ? 'tonal' : 'outlined'" :disabled="loading"
|
||||
@click="switchActiveCategoryType(allCategoryTypes.Expense)">
|
||||
{{ $t('Expense') }}
|
||||
</v-btn>
|
||||
<v-btn border :color="activeCategoryType === allCategoryTypes.Income ? 'primary' : 'default'"
|
||||
:variant="activeCategoryType === allCategoryTypes.Income ? 'tonal' : 'outlined'" :disabled="loading"
|
||||
@click="switchActiveCategoryType(allCategoryTypes.Income)">
|
||||
{{ $t('Income') }}
|
||||
</v-btn>
|
||||
<v-btn border :color="activeCategoryType === allCategoryTypes.Transfer ? 'primary' : 'default'"
|
||||
:variant="activeCategoryType === allCategoryTypes.Transfer ? 'tonal' : 'outlined'" :disabled="loading"
|
||||
@click="switchActiveCategoryType(allCategoryTypes.Transfer)">
|
||||
{{ $t('Transfer') }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
<v-divider />
|
||||
<v-tabs show-arrows class="my-4" direction="vertical"
|
||||
:disabled="loading" v-model="primaryCategoryId">
|
||||
<v-tab value="0" @click="primaryCategoryId = '0'">
|
||||
{{ $t('Primary Categories') }}
|
||||
</v-tab>
|
||||
<template :key="category.id" v-for="category in primaryCategories">
|
||||
<v-tab :value="category.id" v-if="!category.hidden"
|
||||
@click="switchPrimaryCategory(category)">
|
||||
<div class="d-flex align-center">
|
||||
<span>{{ category.name }}</span>
|
||||
</div>
|
||||
</v-tab>
|
||||
</template>
|
||||
<template v-if="loading && (!primaryCategories || primaryCategories.length < 1)">
|
||||
<v-skeleton-loader class="transaction-primary-category-skeleton mx-5 mt-4 mb-3" type="text"
|
||||
:key="itemIdx" :loading="true" v-for="itemIdx in [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]"></v-skeleton-loader>
|
||||
</template>
|
||||
</v-tabs>
|
||||
</div>
|
||||
<v-window class="d-flex flex-grow-1 ml-md-5 disable-tab-transition w-100-window-container" v-model="activeTab">
|
||||
<v-window-item value="categoryPage">
|
||||
<v-card variant="flat">
|
||||
<template #title>
|
||||
<div class="d-flex align-center">
|
||||
<span>{{ $t('Transaction Categories') }}</span>
|
||||
<v-btn class="ml-3" color="default" variant="outlined"
|
||||
:disabled="loading || updating" @click="add">{{ $t('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-btn density="compact" color="default" variant="text"
|
||||
class="ml-2" :icon="true" :disabled="loading || updating"
|
||||
v-if="!loading" @click="reload">
|
||||
<v-icon :icon="icons.refresh" size="24" />
|
||||
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
|
||||
</v-btn>
|
||||
<v-progress-circular indeterminate size="24" class="ml-2" v-if="loading"></v-progress-circular>
|
||||
<v-spacer/>
|
||||
<v-btn density="comfortable" color="default" variant="text" class="ml-2"
|
||||
:disabled="loading || updating" :icon="true">
|
||||
<v-icon :icon="icons.more" />
|
||||
<v-menu activator="parent">
|
||||
<v-list>
|
||||
<v-list-item :prepend-icon="icons.show"
|
||||
:title="$t('Show Hidden Transaction Category')"
|
||||
v-if="!showHidden" @click="showHidden = true"></v-list-item>
|
||||
<v-list-item :prepend-icon="icons.hide"
|
||||
:title="$t('Hide Hidden Transaction Category')"
|
||||
v-if="showHidden" @click="showHidden = false"></v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<v-table class="transaction-category-table table-striped" :hover="!loading">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase">
|
||||
<div class="d-flex align-center">
|
||||
<span>{{ $t('Category Name') }}</span>
|
||||
<v-spacer/>
|
||||
<span>{{ $t('Operation') }}</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody v-if="loading && noAvailableCategory">
|
||||
<tr :key="itemIdx" v-for="itemIdx in [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]">
|
||||
<td class="px-0">
|
||||
<v-skeleton-loader type="text" :loading="true"></v-skeleton-loader>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody v-if="!loading && noAvailableCategory">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<span>{{ $t('No available category') }}</span>
|
||||
<v-btn class="ml-3" color="default" variant="outlined"
|
||||
@click="showPresetCategories"
|
||||
v-if="hasSubCategories && noCategory">
|
||||
{{ $t('Add Default Categories') }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<draggable-list tag="tbody"
|
||||
item-key="id"
|
||||
handle=".drag-handle"
|
||||
ghost-class="dragging-item"
|
||||
:disabled="noAvailableCategory"
|
||||
v-model="categories"
|
||||
@change="onMove">
|
||||
<template #item="{ element }">
|
||||
<tr class="transaction-category-table-row text-sm" v-if="showHidden || !element.hidden">
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<div class="d-flex align-center" :class="{ 'cursor-pointer': isCategorySupportSwitch(element) }"
|
||||
@click="switchPrimaryCategory(element)">
|
||||
<ItemIcon icon-type="category"
|
||||
:icon-id="element.icon" :color="element.color"
|
||||
:hidden-status="element.hidden" />
|
||||
<span class="ml-2">{{ element.name }}</span>
|
||||
</div>
|
||||
|
||||
<v-spacer/>
|
||||
|
||||
<v-btn class="hover-display px-2" color="default"
|
||||
density="comfortable" variant="text"
|
||||
:prepend-icon="icons.edit"
|
||||
:disabled="loading || updating"
|
||||
@click="edit(element)">
|
||||
{{ $t('Edit') }}
|
||||
</v-btn>
|
||||
<v-btn class="hover-display px-2 ml-2" color="default"
|
||||
density="comfortable" variant="text"
|
||||
:prepend-icon="element.hidden ? icons.show : icons.hide"
|
||||
:loading="categoryHiding[element.id]"
|
||||
:disabled="loading || updating"
|
||||
@click="hide(element, !element.hidden)">
|
||||
{{ element.hidden ? $t('Show') : $t('Hide') }}
|
||||
</v-btn>
|
||||
<v-btn class="hover-display px-2 ml-2" color="default"
|
||||
density="comfortable" variant="text"
|
||||
:prepend-icon="icons.remove"
|
||||
:loading="categoryRemoving[element.id]"
|
||||
:disabled="loading || updating"
|
||||
@click="remove(element)">
|
||||
{{ $t('Delete') }}
|
||||
</v-btn>
|
||||
<span>
|
||||
<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 and Drop to Change Order') }}</v-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</draggable-list>
|
||||
</v-table>
|
||||
</v-card>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<confirm-dialog ref="confirmDialog"/>
|
||||
<snack-bar ref="snackbar" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
created() {
|
||||
import { mapStores } from 'pinia';
|
||||
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
|
||||
|
||||
import categoryConstants from '@/consts/category.js';
|
||||
|
||||
import {
|
||||
mdiRefresh,
|
||||
mdiPencilOutline,
|
||||
mdiEyeOffOutline,
|
||||
mdiEyeOutline,
|
||||
mdiDeleteOutline,
|
||||
mdiDrag,
|
||||
mdiDotsVertical
|
||||
} from '@mdi/js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeCategoryType: categoryConstants.allCategoryTypes.Expense,
|
||||
activeTab: 'categoryPage',
|
||||
primaryCategoryId: '0',
|
||||
loading: true,
|
||||
updating: false,
|
||||
categoryHiding: {},
|
||||
categoryRemoving: {},
|
||||
displayOrderModified: false,
|
||||
showHidden: false,
|
||||
icons: {
|
||||
refresh: mdiRefresh,
|
||||
edit: mdiPencilOutline,
|
||||
show: mdiEyeOutline,
|
||||
hide: mdiEyeOffOutline,
|
||||
remove: mdiDeleteOutline,
|
||||
drag: mdiDrag,
|
||||
more: mdiDotsVertical
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useTransactionCategoriesStore),
|
||||
allCategoryTypes() {
|
||||
return categoryConstants.allCategoryTypes;
|
||||
},
|
||||
primaryCategories() {
|
||||
if (!this.transactionCategoriesStore.allTransactionCategories || !this.transactionCategoriesStore.allTransactionCategories[this.activeCategoryType]) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return this.transactionCategoriesStore.allTransactionCategories[this.activeCategoryType];
|
||||
},
|
||||
secondaryCategories() {
|
||||
if (!this.transactionCategoriesStore.allTransactionCategoriesMap || !this.transactionCategoriesStore.allTransactionCategoriesMap[this.primaryCategoryId]) {
|
||||
return [];
|
||||
}
|
||||
|
||||
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() {
|
||||
for (let i = 0; i < this.categories.length; i++) {
|
||||
if (this.showHidden || !this.categories[i].hidden) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
noCategory() {
|
||||
return this.categories.length < 1;
|
||||
},
|
||||
availableCategoryCount() {
|
||||
let count = 0;
|
||||
|
||||
for (let i = 0; i < this.categories.length; i++) {
|
||||
if (this.showHidden || !this.categories[i].hidden) {
|
||||
count++;
|
||||
}
|
||||
}
|
||||
|
||||
return count;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.reload(false);
|
||||
},
|
||||
methods: {
|
||||
reload(force) {
|
||||
const self = this;
|
||||
|
||||
self.loading = true;
|
||||
|
||||
self.transactionCategoriesStore.loadAllCategories({
|
||||
force: force
|
||||
}).then(() => {
|
||||
self.loading = false;
|
||||
self.displayOrderModified = false;
|
||||
|
||||
if (force) {
|
||||
self.$refs.snackbar.showMessage('Category list has been updated');
|
||||
}
|
||||
}).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() {
|
||||
|
||||
},
|
||||
edit() {
|
||||
|
||||
},
|
||||
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;
|
||||
}).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;
|
||||
}).catch(error => {
|
||||
self.updating = false;
|
||||
self.categoryRemoving[category.id] = false;
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
showPresetCategories() {
|
||||
|
||||
},
|
||||
switchActiveCategoryType(activeCategoryType) {
|
||||
if (this.activeCategoryType === activeCategoryType) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.activeCategoryType = activeCategoryType;
|
||||
this.primaryCategoryId = '0';
|
||||
},
|
||||
isCategorySupportSwitch(category) {
|
||||
if (!category || category.hidden) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return !category.parentId || category.parentId === '' || category.parentId === '0';
|
||||
},
|
||||
switchPrimaryCategory(category) {
|
||||
if (!category || category.hidden) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!category.parentId || category.parentId === '' || category.parentId === '0') {
|
||||
this.primaryCategoryId = category.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.transaction-primary-category-skeleton .v-skeleton-loader__text {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.transaction-category-table tr.transaction-category-table-row .hover-display {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.transaction-category-table tr.transaction-category-table-row:hover .hover-display {
|
||||
display: grid;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user