modify style
This commit is contained in:
MaysWind
@@ -2,178 +2,170 @@
|
||||
<v-row class="match-height">
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<div class="d-flex flex-column flex-md-row">
|
||||
<div>
|
||||
<v-layout>
|
||||
<v-navigation-drawer ref="navbar" :permanent="alwaysShowNav" v-model="showNav">
|
||||
<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>
|
||||
<btn-vertical-group :disabled="loading" :buttons="[
|
||||
{ name: $t('Expense'), value: allCategoryTypes.Expense },
|
||||
{ name: $t('Income'), value: allCategoryTypes.Income },
|
||||
{ name: $t('Transfer'), value: allCategoryTypes.Transfer }
|
||||
]" v-model="activeCategoryType" @update:modelValue="switchActiveCategoryType" />
|
||||
</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 class="tab-text-truncate" value="0" @click="primaryCategoryId = '0'">
|
||||
<span class="text-truncate">{{ $t('Primary Categories') }}</span>
|
||||
</v-tab>
|
||||
<template :key="category.id" v-for="category in primaryCategories">
|
||||
<v-tab :value="category.id" v-if="!category.hidden"
|
||||
<v-tab class="tab-text-truncate" :value="category.id" v-if="!category.hidden"
|
||||
@click="switchPrimaryCategory(category)">
|
||||
<div class="d-flex align-center">
|
||||
<span>{{ category.name }}</span>
|
||||
</div>
|
||||
<span class="text-truncate">{{ category.name }}</span>
|
||||
</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"
|
||||
<v-skeleton-loader class="skeleton-no-margin 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-navigation-drawer>
|
||||
<v-main>
|
||||
<v-window class="d-flex flex-grow-1 disable-tab-transition w-100-window-container" v-model="activeTab">
|
||||
<v-window-item value="categoryPage">
|
||||
<v-card variant="flat" :min-height="cardMinHeight">
|
||||
<template #title>
|
||||
<div class="title-and-toolbar d-flex align-center">
|
||||
<v-btn class="mr-3 d-md-none" density="compact" color="default" variant="plain"
|
||||
:ripple="false" :icon="true" @click="showNav = !showNav">
|
||||
<v-icon :icon="icons.menu" size="24" />
|
||||
</v-btn>
|
||||
<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>
|
||||
<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 :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="showPresetDialog = true"
|
||||
v-if="hasSubCategories && noCategory">
|
||||
{{ $t('Add Default Categories') }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</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="showPresetDialog = true"
|
||||
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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</draggable-list>
|
||||
</v-table>
|
||||
</v-card>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</v-main>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@@ -188,13 +180,17 @@
|
||||
<script>
|
||||
import PresetCategoryDialog from './list/dialogs/PresetCategoryDialog.vue';
|
||||
|
||||
import { useDisplay } from 'vuetify';
|
||||
|
||||
import { mapStores } from 'pinia';
|
||||
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
|
||||
|
||||
import categoryConstants from '@/consts/category.js';
|
||||
import { getOuterHeight } from '@/lib/ui.desktop.js';
|
||||
|
||||
import {
|
||||
mdiRefresh,
|
||||
mdiMenu,
|
||||
mdiPencilOutline,
|
||||
mdiEyeOffOutline,
|
||||
mdiEyeOutline,
|
||||
@@ -208,6 +204,8 @@ export default {
|
||||
PresetCategoryDialog
|
||||
},
|
||||
data() {
|
||||
const { mdAndUp } = useDisplay();
|
||||
|
||||
return {
|
||||
activeCategoryType: categoryConstants.allCategoryTypes.Expense,
|
||||
activeTab: 'categoryPage',
|
||||
@@ -217,10 +215,14 @@ export default {
|
||||
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,
|
||||
@@ -286,6 +288,22 @@ export default {
|
||||
created() {
|
||||
this.reload(false);
|
||||
},
|
||||
setup() {
|
||||
const display = useDisplay();
|
||||
|
||||
return {
|
||||
display: display
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'display.mdAndUp.value': function (newValue) {
|
||||
this.alwaysShowNav = newValue;
|
||||
|
||||
if (!this.showNav) {
|
||||
this.showNav = newValue;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reload(force) {
|
||||
const self = this;
|
||||
@@ -301,6 +319,8 @@ export default {
|
||||
if (force) {
|
||||
self.$refs.snackbar.showMessage('Category list has been updated');
|
||||
}
|
||||
|
||||
self.updateCardMinHeight();
|
||||
}).catch(error => {
|
||||
self.loading = false;
|
||||
|
||||
@@ -410,13 +430,9 @@ export default {
|
||||
this.reload(false);
|
||||
}
|
||||
},
|
||||
switchActiveCategoryType(activeCategoryType) {
|
||||
if (this.activeCategoryType === activeCategoryType) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.activeCategoryType = activeCategoryType;
|
||||
switchActiveCategoryType() {
|
||||
this.primaryCategoryId = '0';
|
||||
this.updateCardMinHeight();
|
||||
},
|
||||
isCategorySupportSwitch(category) {
|
||||
if (!category || category.hidden) {
|
||||
@@ -433,16 +449,25 @@ export default {
|
||||
if (!category.parentId || category.parentId === '' || category.parentId === '0') {
|
||||
this.primaryCategoryId = category.id;
|
||||
}
|
||||
},
|
||||
updateCardMinHeight() {
|
||||
const self = this
|
||||
|
||||
self.$nextTick(() => {
|
||||
if (self.$refs.navbar && self.$refs.navbar.$el && self.$refs.navbar.$el.nextElementSibling) {
|
||||
let navbarHeight = getOuterHeight(self.$refs.navbar.$el.nextElementSibling);
|
||||
|
||||
if (navbarHeight > self.cardMinHeight) {
|
||||
self.cardMinHeight = navbarHeight;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.transaction-primary-category-skeleton .v-skeleton-loader__text {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.transaction-category-table tr.transaction-category-table-row .hover-display {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user