modify style

This commit is contained in:
MaysWind
2024-09-10 01:04:17 +08:00
parent e1ac3732bd
commit 9db4a2430a
2 changed files with 162 additions and 154 deletions
@@ -1,6 +1,8 @@
<template>
<v-select
persistent-placeholder
:density="density"
:variant="variant"
:readonly="readonly"
:disabled="disabled"
:label="label"
@@ -87,6 +89,8 @@ import {
export default {
props: [
'modelValue',
'density',
'variant',
'disabled',
'readonly',
'label',
@@ -49,7 +49,6 @@
fixed-header
fixed-footer
show-select
show-expand
class="import-transaction-table"
density="compact"
item-value="index"
@@ -59,7 +58,6 @@
:no-data-text="$t('No data to import')"
v-model:items-per-page="countPerPage"
v-model:page="currentPage"
v-model:expanded="expandedTransactions"
>
<template #header.data-table-select>
<v-checkbox readonly class="cursor-pointer"
@@ -104,10 +102,11 @@
:disabled="loading || submitting || !item.valid"
v-model="item.selected"></v-checkbox>
</template>
<template #item.data-table-expand="{ item, internalItem, toggleExpand }">
<template #item.valid="{ item }">
<v-icon size="small" :class="{ 'text-error': !item.valid }"
:disabled="loading || submitting"
:icon="icons.edit" @click="toggleExpand(internalItem)">
:icon="editingTransaction === item ? icons.complete : icons.edit"
@click="editTransaction(item)">
</v-icon>
<v-tooltip activator="parent" v-if="!loading && !submitting">{{ $t('Edit') }}</v-tooltip>
</template>
@@ -124,7 +123,7 @@
<v-chip label color="default" variant="outlined" size="x-small" v-else>{{ $t('Unknown') }}</v-chip>
</template>
<template #item.categoryId="{ item }">
<div class="d-flex align-center">
<div class="d-flex align-center" v-if="editingTransaction !== item || item.type === allTransactionTypes.ModifyBalance">
<span v-if="item.type === allTransactionTypes.ModifyBalance">-</span>
<ItemIcon size="24px" icon-type="category"
:icon-id="allCategoriesMap[item.categoryId].icon"
@@ -138,6 +137,60 @@
<span>{{ item.originalCategoryName }}</span>
</div>
</div>
<div style="width: 360px" v-if="editingTransaction === item && item.type === allTransactionTypes.Expense">
<two-column-select density="compact" variant="underlined"
primary-key-field="id" primary-value-field="id" primary-title-field="name"
primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
primary-hidden-field="hidden" primary-sub-items-field="subCategories"
secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
secondary-hidden-field="hidden"
:disabled="loading || submitting || !hasAvailableExpenseCategories"
:show-selection-primary-text="true"
:custom-selection-primary-text="getPrimaryCategoryName(item.categoryId, allCategories[allCategoryTypes.Expense])"
:custom-selection-secondary-text="getSecondaryCategoryName(item.categoryId, allCategories[allCategoryTypes.Expense])"
:placeholder="$t('Category')"
:items="allCategories[allCategoryTypes.Expense]"
v-model="item.categoryId"
@update:model-value="updateTransactionData(item)">
</two-column-select>
</div>
<div style="width: 360px" v-if="editingTransaction === item && item.type === allTransactionTypes.Income">
<two-column-select density="compact" variant="underlined"
primary-key-field="id" primary-value-field="id" primary-title-field="name"
primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
primary-hidden-field="hidden" primary-sub-items-field="subCategories"
secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
secondary-hidden-field="hidden"
:disabled="loading || submitting || !hasAvailableIncomeCategories"
:show-selection-primary-text="true"
:custom-selection-primary-text="getPrimaryCategoryName(item.categoryId, allCategories[allCategoryTypes.Income])"
:custom-selection-secondary-text="getSecondaryCategoryName(item.categoryId, allCategories[allCategoryTypes.Income])"
:placeholder="$t('Category')"
:items="allCategories[allCategoryTypes.Income]"
v-model="item.categoryId"
@update:model-value="updateTransactionData(item)">
</two-column-select>
</div>
<div style="width: 360px" v-if="editingTransaction === item && item.type === allTransactionTypes.Transfer">
<two-column-select density="compact" variant="underlined"
primary-key-field="id" primary-value-field="id" primary-title-field="name"
primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
primary-hidden-field="hidden" primary-sub-items-field="subCategories"
secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
secondary-hidden-field="hidden"
:disabled="loading || submitting || !hasAvailableTransferCategories"
:show-selection-primary-text="true"
:custom-selection-primary-text="getPrimaryCategoryName(item.categoryId, allCategories[allCategoryTypes.Transfer])"
:custom-selection-secondary-text="getSecondaryCategoryName(item.categoryId, allCategories[allCategoryTypes.Transfer])"
:placeholder="$t('Category')"
:items="allCategories[allCategoryTypes.Transfer]"
v-model="item.categoryId"
@update:model-value="updateTransactionData(item)">
</two-column-select>
</div>
</template>
<template #item.sourceAmount="{ item }">
<span>{{ getTransactionDisplayAmount(item) }}</span>
@@ -145,7 +198,7 @@
<span v-if="item.type === allTransactionTypes.Transfer && item.sourceAccountId !== item.destinationAccountId">{{ getTransactionDisplayDestinationAmount(item) }}</span>
</template>
<template #item.sourceAccountId="{ item }">
<div class="d-flex align-center">
<div class="d-flex align-center" v-if="editingTransaction !== item">
<span v-if="item.sourceAccountId && item.sourceAccountId !== '0' && allAccountsMap[item.sourceAccountId]">{{ allAccountsMap[item.sourceAccountId].name }}</span>
<div class="text-error font-italic" v-else>
<v-icon class="mr-1" :icon="icons.alert"/>
@@ -158,156 +211,99 @@
<span>{{ item.originalDestinationAccountName }}</span>
</div>
</div>
<div style="width: 360px" v-if="editingTransaction === item">
<two-column-select density="compact" variant="underlined"
primary-key-field="id" primary-value-field="category"
primary-title-field="name" primary-footer-field="displayBalance"
primary-icon-field="icon" primary-icon-type="account"
primary-sub-items-field="accounts"
:primary-title-i18n="true"
secondary-key-field="id" secondary-value-field="id"
secondary-title-field="name" secondary-footer-field="displayBalance"
secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
:disabled="loading || submitting || !allVisibleAccounts.length"
:custom-selection-primary-text="getSourceAccountDisplayName(item)"
:placeholder="getSourceAccountTitle(item)"
:items="categorizedAccounts"
v-model="item.sourceAccountId"
@update:model-value="updateTransactionData(item)">
</two-column-select>
</div>
<div style="width: 360px" v-if="editingTransaction === item && item.type === allTransactionTypes.Transfer">
<two-column-select density="compact" variant="underlined"
primary-key-field="id" primary-value-field="category"
primary-title-field="name" primary-footer-field="displayBalance"
primary-icon-field="icon" primary-icon-type="account"
primary-sub-items-field="accounts"
:primary-title-i18n="true"
secondary-key-field="id" secondary-value-field="id"
secondary-title-field="name" secondary-footer-field="displayBalance"
secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
:disabled="loading || submitting || !allVisibleAccounts.length"
:custom-selection-primary-text="getDestinationAccountDisplayName(item)"
:placeholder="$t('Destination Account')"
:items="categorizedAccounts"
v-model="item.destinationAccountId"
@update:model-value="updateTransactionData(item)">
</two-column-select>
</div>
</template>
<template #item.geoLocation="{ item }">
<span class="cursor-pointer" v-if="item.geoLocation">{{ `(${item.geoLocation.longitude}, ${item.geoLocation.latitude})` }}</span>
<span class="cursor-pointer" v-else-if="!item.geoLocation">{{ $t('None') }}</span>
</template>
<template #item.tagIds="{ item }">
<v-chip class="transaction-tag" size="small"
:class="{ 'font-italic': !tagId || tagId === '0' || !allTagsMap[tagId] }"
:prepend-icon="tagId && tagId !== '0' && allTagsMap[tagId] ? icons.tag : icons.alert"
:color="tagId && tagId !== '0' && allTagsMap[tagId] ? 'default' : 'error'"
:text="tagId && tagId !== '0' && allTagsMap[tagId] ? allTagsMap[tagId].name : item.originalTagNames[index]"
:key="tagId"
v-for="(tagId, index) in item.tagIds"/>
<v-chip class="transaction-tag" size="small"
:text="$t('None')"
v-if="!item.tagIds || !item.tagIds.length"/>
</template>
<template #expanded-row="{ columns, item }">
<tr>
<td :colspan="columns.length">
<v-row class="py-4" style="width: 400px">
<v-col cols="12" v-if="item.type === allTransactionTypes.Expense">
<two-column-select primary-key-field="id" primary-value-field="id" primary-title-field="name"
primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
primary-hidden-field="hidden" primary-sub-items-field="subCategories"
secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
secondary-hidden-field="hidden"
:disabled="loading || submitting || !hasAvailableExpenseCategories"
:show-selection-primary-text="true"
:custom-selection-primary-text="getPrimaryCategoryName(item.categoryId, allCategories[allCategoryTypes.Expense])"
:custom-selection-secondary-text="getSecondaryCategoryName(item.categoryId, allCategories[allCategoryTypes.Expense])"
:label="$t('Category')" :placeholder="$t('Category')"
:items="allCategories[allCategoryTypes.Expense]"
v-model="item.categoryId"
@update:model-value="updateTransactionData(item)">
</two-column-select>
</v-col>
<v-col cols="12" v-if="item.type === allTransactionTypes.Income">
<two-column-select primary-key-field="id" primary-value-field="id" primary-title-field="name"
primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
primary-hidden-field="hidden" primary-sub-items-field="subCategories"
secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
secondary-hidden-field="hidden"
:disabled="loading || submitting || !hasAvailableIncomeCategories"
:show-selection-primary-text="true"
:custom-selection-primary-text="getPrimaryCategoryName(item.categoryId, allCategories[allCategoryTypes.Income])"
:custom-selection-secondary-text="getSecondaryCategoryName(item.categoryId, allCategories[allCategoryTypes.Income])"
:label="$t('Category')" :placeholder="$t('Category')"
:items="allCategories[allCategoryTypes.Income]"
v-model="item.categoryId"
@update:model-value="updateTransactionData(item)">
</two-column-select>
</v-col>
<v-col cols="12" v-if="item.type === allTransactionTypes.Transfer">
<two-column-select primary-key-field="id" primary-value-field="id" primary-title-field="name"
primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
primary-hidden-field="hidden" primary-sub-items-field="subCategories"
secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
secondary-hidden-field="hidden"
:disabled="loading || submitting || !hasAvailableTransferCategories"
:show-selection-primary-text="true"
:custom-selection-primary-text="getPrimaryCategoryName(item.categoryId, allCategories[allCategoryTypes.Transfer])"
:custom-selection-secondary-text="getSecondaryCategoryName(item.categoryId, allCategories[allCategoryTypes.Transfer])"
:label="$t('Category')" :placeholder="$t('Category')"
:items="allCategories[allCategoryTypes.Transfer]"
v-model="item.categoryId"
@update:model-value="updateTransactionData(item)">
</two-column-select>
</v-col>
<v-col cols="12">
<two-column-select primary-key-field="id" primary-value-field="category"
primary-title-field="name" primary-footer-field="displayBalance"
primary-icon-field="icon" primary-icon-type="account"
primary-sub-items-field="accounts"
:primary-title-i18n="true"
secondary-key-field="id" secondary-value-field="id"
secondary-title-field="name" secondary-footer-field="displayBalance"
secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
:disabled="loading || submitting || !allVisibleAccounts.length"
:custom-selection-primary-text="getSourceAccountDisplayName(item)"
:label="getSourceAccountTitle(item)"
:placeholder="getSourceAccountTitle(item)"
:items="categorizedAccounts"
v-model="item.sourceAccountId"
@update:model-value="updateTransactionData(item)">
</two-column-select>
</v-col>
<v-col cols="12" v-if="item.type === allTransactionTypes.Transfer">
<two-column-select primary-key-field="id" primary-value-field="category"
primary-title-field="name" primary-footer-field="displayBalance"
primary-icon-field="icon" primary-icon-type="account"
primary-sub-items-field="accounts"
:primary-title-i18n="true"
secondary-key-field="id" secondary-value-field="id"
secondary-title-field="name" secondary-footer-field="displayBalance"
secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
:disabled="loading || submitting || !allVisibleAccounts.length"
:custom-selection-primary-text="getDestinationAccountDisplayName(item)"
:label="$t('Destination Account')"
:placeholder="$t('Destination Account')"
:items="categorizedAccounts"
v-model="item.destinationAccountId"
@update:model-value="updateTransactionData(item)">
</two-column-select>
</v-col>
<v-col cols="12">
<v-autocomplete
item-title="name"
item-value="id"
auto-select-first
persistent-placeholder
multiple
chips
closable-chips
:disabled="loading || submitting"
:label="$t('Tags')"
:placeholder="$t('None')"
:items="allTags"
:no-data-text="$t('No available tag')"
v-model="item.tagIds"
@update:model-value="updateTransactionData(item)"
>
<template #chip="{ props, index }">
<v-chip :class="{ 'font-italic': !isTagValid(item, index) }"
:prepend-icon="isTagValid(item, index) ? icons.tag : icons.alert"
:color="isTagValid(item, index) ? 'default' : 'error'"
:text="isTagValid(item, index) ? allTagsMap[item.tagIds[index]].name : item.originalTagNames[index]"
v-bind="props"/>
</template>
<div v-if="editingTransaction !== item">
<v-chip class="transaction-tag" size="small"
:class="{ 'font-italic': !tagId || tagId === '0' || !allTagsMap[tagId] }"
:prepend-icon="tagId && tagId !== '0' && allTagsMap[tagId] ? icons.tag : icons.alert"
:color="tagId && tagId !== '0' && allTagsMap[tagId] ? 'default' : 'error'"
:text="tagId && tagId !== '0' && allTagsMap[tagId] ? allTagsMap[tagId].name : item.originalTagNames[index]"
:key="tagId"
v-for="(tagId, index) in item.tagIds"/>
<v-chip class="transaction-tag" size="small"
:text="$t('None')"
v-if="!item.tagIds || !item.tagIds.length"/>
</div>
<div style="width: 360px" v-if="editingTransaction === item">
<v-autocomplete
item-title="name"
item-value="id"
auto-select-first
persistent-placeholder
multiple
chips
closable-chips
density="compact" variant="underlined"
:disabled="loading || submitting"
:placeholder="$t('None')"
:items="allTags"
:no-data-text="$t('No available tag')"
v-model="item.tagIds"
@update:model-value="updateTransactionData(item)"
>
<template #chip="{ props, index }">
<v-chip :class="{ 'font-italic': !isTagValid(item, index) }"
:prepend-icon="isTagValid(item, index) ? icons.tag : icons.alert"
:color="isTagValid(item, index) ? 'default' : 'error'"
:text="isTagValid(item, index) ? allTagsMap[item.tagIds[index]].name : item.originalTagNames[index]"
v-bind="props"/>
</template>
<template #item="{ props, item }">
<v-list-item :value="item.value" v-bind="props" v-if="!item.raw.hidden">
<template #title>
<v-list-item-title>
<div class="d-flex align-center">
<v-icon size="20" start :icon="icons.tag"/>
<span>{{ item.title }}</span>
</div>
</v-list-item-title>
</template>
</v-list-item>
</template>
</v-autocomplete>
</v-col>
</v-row>
</td>
</tr>
<template #item="{ props, item }">
<v-list-item :value="item.value" v-bind="props" v-if="!item.raw.hidden">
<template #title>
<v-list-item-title>
<div class="d-flex align-center">
<v-icon size="20" start :icon="icons.tag"/>
<span>{{ item.title }}</span>
</div>
</v-list-item-title>
</template>
</v-list-item>
</template>
</v-autocomplete>
</div>
</template>
<template #bottom>
<div class="title-and-toolbar d-flex align-center text-no-wrap mt-2"
@@ -422,7 +418,7 @@ export default {
fileType: 'ezbookkeeping_csv',
importFile: null,
importTransactions: null,
expandedTransactions: [],
editingTransaction: null,
currentPage: 1,
countPerPage: 10,
importedCount: null,
@@ -553,7 +549,7 @@ export default {
},
importTransactionHeaders() {
return [
{ value: 'valid', key: 'data-table-expand', sortable: true, nowrap: true },
{ value: 'valid', sortable: true, nowrap: true },
{ value: 'time', title: this.$t('Transaction Time'), sortable: true, nowrap: true },
{ value: 'type', title: this.$t('Type'), sortable: true, nowrap: true },
{ value: 'categoryId', title: this.$t('Category'), sortable: true, nowrap: true },
@@ -621,7 +617,7 @@ export default {
fileType: function () {
this.importFile = null;
this.importTransactions = null;
this.expandedTransactions = [];
this.editingTransaction = null;
this.currentPage = 1;
this.countPerPage = 10;
}
@@ -633,7 +629,7 @@ export default {
self.currentStep = 'uploadFile';
self.importFile = null;
self.importTransactions = null;
self.expandedTransactions = [];
self.editingTransaction = null;
self.currentPage = 1;
self.countPerPage = 10;
self.showState = true;
@@ -700,7 +696,7 @@ export default {
}
self.importTransactions = parsedTransactions;
self.expandedTransactions = [];
self.editingTransaction = null;
self.currentPage = 1;
if (self.importTransactions && self.importTransactions.length >= 0 && self.importTransactions.length < 10) {
@@ -739,6 +735,7 @@ export default {
self.$refs.confirmDialog.open('format.misc.confirmImportTransactions', {
count: transactions.length
}).then(() => {
self.editingTransaction = null;
self.submitting = true;
self.transactionsStore.importTransactions({
@@ -816,6 +813,13 @@ export default {
}
}
},
editTransaction(transaction) {
if (this.editingTransaction === transaction) {
this.editingTransaction = null;
} else {
this.editingTransaction = transaction;
}
},
updateTransactionData(transaction) {
transaction.valid = this.isTransactionValid(transaction);
},