zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

transaction edit dialog supports transaction category

Browse Source
This commit is contained in:
MaysWind
2023-08-20 19:48:49 +08:00
parent f9643f8651
commit 0de65042b0
5 changed files with 364 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/desktop/TwoColumnSelect.vue
+221
View File
@@ -0,0 +1,221 @@
<template>
<v-select
persistent-placeholder
:readonly="readonly"
:disabled="disabled"
:label="label"
:menu-props="{ 'content-class': 'two-column-select-menu' }"
v-model="currentSecondaryValue"
@update:menu="onMenuStateChanged"
>
<template #selection>
<div class="d-flex align-center text-truncate cursor-pointer">
<span class="text-truncate" v-if="showPrimaryName">{{ primaryItemDisplayName }}</span>
<v-icon class="disabled" :icon="icons.chevronRight" size="23" v-if="showPrimaryName" />
<span class="text-truncate">{{ secondaryItemDisplayName }}</span>
</div>
</template>
<template #no-data>
<div ref="dropdownMenu" class="two-column-list-container">
<div class="primary-list-container">
<v-list>
<v-list-item :class="{ 'primary-list-item-selected v-list-item--active text-primary': item === selectedPrimaryItem }"
:title="$tIf(item[primaryTitleField], primaryTitleI18n)"
:key="primaryKeyField ? item[primaryKeyField] : item"
v-for="item in items"
@click="onPrimaryItemClicked(item)">
<template #prepend>
<ItemIcon class="mr-2" :icon-type="primaryIconType"
:icon-id="item[primaryIconField]" :color="item[primaryColorField]"></ItemIcon>
</template>
</v-list-item>
</v-list>
</div>
<div class="secondary-list-container">
<v-list>
<v-list-item :class="{ 'secondary-list-item-selected v-list-item--active text-primary': isSecondarySelected(subItem) }"
:title="$tIf(subItem[secondaryTitleField], secondaryTitleI18n)"
:key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
v-for="subItem in selectedPrimaryItem[primarySubItemsField]"
@click="onSecondaryItemClicked(subItem)">
<template #prepend>
<ItemIcon class="mr-2" :icon-type="secondaryIconType"
:icon-id="subItem[secondaryIconField]" :color="subItem[secondaryColorField]"></ItemIcon>
</template>
</v-list-item>
</v-list>
</div>
</div>
</template>
</v-select>
</template>
<script>
import {
getFirstItem,
getItemByKeyValue,
getNameByKeyValue,
getPrimaryValueBySecondaryValue
} from '@/lib/common.js';
import { scrollToSelectedItem } from '@/lib/ui.desktop.js';
import {
mdiChevronRight
} from '@mdi/js';
export default {
props: [
'modelValue',
'disabled',
'readonly',
'label',
'showPrimaryName',
'primaryKeyField',
'primaryValueField',
'primaryTitleField',
'primaryTitleI18n',
'primaryFooterField',
'primaryFooterI18n',
'primaryIconField',
'primaryIconType',
'primaryColorField',
'primarySubItemsField',
'secondaryKeyField',
'secondaryValueField',
'secondaryTitleField',
'secondaryTitleI18n',
'secondaryFooterField',
'secondaryFooterI18n',
'secondaryIconField',
'secondaryIconType',
'secondaryColorField',
'items'
],
emits: [
'update:modelValue'
],
data() {
return {
icons: {
chevronRight: mdiChevronRight
}
}
},
computed: {
currentPrimaryValue: {
get: function () {
return this.getPrimaryValueBySecondaryValue(this.modelValue);
},
set: function (value) {
const primaryItem = getItemByKeyValue(this.items, value, this.primaryValueField);
const secondaryItem = getFirstItem(primaryItem[this.primarySubItemsField]);
if (secondaryItem) {
if (this.secondaryValueField) {
this.$emit('update:modelValue', secondaryItem[this.secondaryValueField]);
}
}
}
},
currentSecondaryValue: {
get: function () {
return this.modelValue;
},
set: function (value) {
this.$emit('update:modelValue', value);
}
},
selectedPrimaryItem() {
if (this.primaryValueField) {
return getItemByKeyValue(this.items, this.currentPrimaryValue, this.primaryValueField);
} else {
return this.currentPrimaryValue;
}
},
primaryItemDisplayName() {
if (this.primaryValueField && this.primaryTitleField) {
if (this.currentPrimaryValue) {
return getNameByKeyValue(this.items, this.currentPrimaryValue, this.primaryValueField, this.primaryTitleField);
} else {
return this.$t('None');
}
} else {
return this.currentPrimaryValue;
}
},
secondaryItemDisplayName() {
if (this.secondaryValueField && this.secondaryTitleField) {
if (this.currentSecondaryValue) {
return getNameByKeyValue(this.selectedPrimaryItem[this.primarySubItemsField], this.currentSecondaryValue, this.secondaryValueField, this.secondaryTitleField);
} else {
return this.$t('None');
}
} else {
return this.currentSecondaryValue;
}
}
},
methods: {
onPrimaryItemClicked(item) {
if (this.primaryValueField) {
this.currentPrimaryValue = item[this.primaryValueField];
} else {
this.currentPrimaryValue = item;
}
},
onSecondaryItemClicked(subItem) {
if (this.secondaryValueField) {
this.currentSecondaryValue = subItem[this.secondaryValueField];
} else {
this.currentSecondaryValue = subItem;
}
},
isSecondarySelected(subItem) {
if (this.secondaryValueField) {
return this.currentSecondaryValue === subItem[this.secondaryValueField];
} else {
return this.currentSecondaryValue === subItem;
}
},
getPrimaryValueBySecondaryValue(secondaryValue) {
return getPrimaryValueBySecondaryValue(this.items, this.primarySubItemsField, this.primaryValueField, this.secondaryValueField, secondaryValue);
},
onMenuStateChanged(state) {
const self = this;
if (state) {
self.$nextTick(() => {
if (self.$refs.dropdownMenu && self.$refs.dropdownMenu.parentElement) {
scrollToSelectedItem(self.$refs.dropdownMenu.parentElement, '.primary-list-container', '.primary-list-item-selected');
scrollToSelectedItem(self.$refs.dropdownMenu.parentElement, '.secondary-list-container', '.secondary-list-item-selected');
}
});
}
}
}
}
</script>
<style>
.two-column-select-menu {
max-height: inherit !important;
}
.two-column-select-menu > .v-list {
padding: 0;
}
.two-column-select-menu .two-column-list-container {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.two-column-select-menu .primary-list-container,
.two-column-select-menu .secondary-list-container {
width: 100%;
height: 310px;
overflow-y: scroll;
}
</style>
src/components/mobile/TwoColumnListItemSelectionSheet.vue
+6 -70
View File
@@ -60,7 +60,10 @@
</template>
<script>
import { isArray } from '@/lib/common.js';
import {
getItemByKeyValue,
getPrimaryValueBySecondaryValue
} from '@/lib/common.js';
import { scrollToSelectedItem } from '@/lib/ui.mobile.js';
export default {
@@ -107,32 +110,10 @@ export default {
computed: {
selectedPrimaryItem() {
if (this.primaryValueField) {
if (isArray(this.items)) {
for (let i = 0; i < this.items.length; i++) {
const item = this.items[i];
if (this.currentPrimaryValue === item[this.primaryValueField]) {
return item;
}
}
} else {
for (let field in this.items) {
if (!Object.prototype.hasOwnProperty.call(this.items, field)) {
continue;
}
const item = this.items[field];
if (this.currentPrimaryValue === item[this.primaryValueField]) {
return item;
}
}
}
return getItemByKeyValue(this.items, this.currentPrimaryValue, this.primaryValueField);
} else {
return this.currentPrimaryValue;
}
return null;
}
},
methods: {
@@ -169,53 +150,8 @@ export default {
return this.currentSecondaryValue === subItem;
}
},
isPrimaryItemHasSecondaryValue(primaryItem, secondaryValue) {
for (let i = 0; i < primaryItem[this.primarySubItemsField].length; i++) {
const secondaryItem = primaryItem[this.primarySubItemsField][i];
if (this.secondaryValueField && secondaryItem[this.secondaryValueField] === secondaryValue) {
return true;
} else if (!this.secondaryValueField && secondaryItem === secondaryValue) {
return true;
}
}
return false;
},
getPrimaryValueBySecondaryValue(secondaryValue) {
if (this.primarySubItemsField) {
if (isArray(this.items)) {
for (let i = 0; i < this.items.length; i++) {
const primaryItem = this.items[i];
if (this.isPrimaryItemHasSecondaryValue(primaryItem, secondaryValue)) {
if (this.primaryValueField) {
return primaryItem[this.primaryValueField];
} else {
return primaryItem;
}
}
}
} else {
for (let field in this.items) {
if (!Object.prototype.hasOwnProperty.call(this.items, field)) {
continue;
}
const primaryItem = this.items[field];
if (this.isPrimaryItemHasSecondaryValue(primaryItem, secondaryValue)) {
if (this.primaryValueField) {
return primaryItem[this.primaryValueField];
} else {
return primaryItem;
}
}
}
}
}
return null;
return getPrimaryValueBySecondaryValue(this.items, this.primarySubItemsField, this.primaryValueField, this.secondaryValueField, secondaryValue);
},
close() {
this.$emit('update:show', false);
src/desktop-main.js
+2
View File
@@ -87,6 +87,7 @@ import AmountInput from '@/components/desktop/AmountInput.vue';
import DateTimeSelect from '@/components/desktop/DateTimeSelect.vue';
import ColorSelect from '@/components/desktop/ColorSelect.vue';
import IconSelect from '@/components/desktop/IconSelect.vue';
import TwoColumnSelect from '@/components/desktop/TwoColumnSelect.vue';
import StepsBar from '@/components/desktop/StepsBar.vue';
import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
import SnackBar from '@/components/desktop/SnackBar.vue';
@@ -402,6 +403,7 @@ app.component('AmountInput', AmountInput);
app.component('DateTimeSelect', DateTimeSelect);
app.component('ColorSelect', ColorSelect);
app.component('IconSelect', IconSelect);
app.component('TwoColumnSelect', TwoColumnSelect);
app.component('StepsBar', StepsBar);
app.component('ConfirmDialog', ConfirmDialog);
app.component('SnackBar', SnackBar);
src/lib/common.js
+94
View File
@@ -220,6 +220,50 @@ export function stringToArrayBuffer(str){
return Uint8Array.from(str, c => c.charCodeAt(0)).buffer;
}
export function getFirstItem(items) {
if (isArray(items)) {
if (items.length > 0) {
return items[0];
}
} else {
for (let field in items) {
if (!Object.prototype.hasOwnProperty.call(items, field)) {
continue;
}
return items[field];
}
}
return null;
}
export function getItemByKeyValue(src, value, keyField) {
if (isArray(src)) {
for (let i = 0; i < src.length; i++) {
const item = src[i];
if (item[keyField] === value) {
return item;
}
}
} else {
for (let field in src) {
if (!Object.prototype.hasOwnProperty.call(src, field)) {
continue;
}
const item = src[field];
if (item[keyField] === value) {
return item;
}
}
}
return null;
}
export function getNameByKeyValue(src, value, keyField, nameField, defaultName) {
if (isArray(src)) {
if (keyField) {
@@ -363,6 +407,56 @@ export function categorizedArrayToPlainArray(object) {
return ret;
}
export function isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryValue) {
for (let i = 0; i < primaryItem[primarySubItemsField].length; i++) {
const secondaryItem = primaryItem[primarySubItemsField][i];
if (secondaryValueField && secondaryItem[secondaryValueField] === secondaryValue) {
return true;
} else if (!secondaryValueField && secondaryItem === secondaryValue) {
return true;
}
}
return false;
}
export function getPrimaryValueBySecondaryValue(items, primarySubItemsField, primaryValueField, secondaryValueField, secondaryValue) {
if (primarySubItemsField) {
if (isArray(items)) {
for (let i = 0; i < items.length; i++) {
const primaryItem = items[i];
if (isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryValue)) {
if (primaryValueField) {
return primaryItem[primaryValueField];
} else {
return primaryItem;
}
}
}
} else {
for (let field in items) {
if (!Object.prototype.hasOwnProperty.call(items, field)) {
continue;
}
const primaryItem = items[field];
if (isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryValue)) {
if (primaryValueField) {
return primaryItem[primaryValueField];
} else {
return primaryItem;
}
}
}
}
}
return null;
}
export function arrangeArrayWithNewStartIndex(array, startIndex) {
if (startIndex <= 0 || startIndex >= array.length) {
return array;
src/views/desktop/transactions/list/dialogs/EditDialog.vue
+41 -6
View File
@@ -74,12 +74,47 @@
:placeholder="$t('Transfer In Amount')"
v-model="transaction.destinationAmount"/>
</v-col>
<v-col cols="12" md="12">
<v-text-field
disabled
persistent-placeholder
:label="$t('Category')"
:placeholder="$t('Category')" />
<v-col cols="12" md="12" v-if="transaction.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-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"
:readonly="mode === 'view'"
:disabled="loading || submitting"
:show-primary-name="true"
:label="$t('Category')" :placeholder="$t('Category')"
:items="allCategories[allCategoryTypes.Expense]"
v-model="transaction.expenseCategory">
</two-column-select>
</v-col>
<v-col cols="12" md="12" v-if="transaction.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-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"
:readonly="mode === 'view'"
:disabled="loading || submitting"
:show-primary-name="true"
:label="$t('Category')" :placeholder="$t('Category')"
:items="allCategories[allCategoryTypes.Income]"
v-model="transaction.incomeCategory">
</two-column-select>
</v-col>
<v-col cols="12" md="12" v-if="transaction.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-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"
:readonly="mode === 'view'"
:disabled="loading || submitting"
:show-primary-name="true"
:label="$t('Category')" :placeholder="$t('Category')"
:items="allCategories[allCategoryTypes.Transfer]"
v-model="transaction.transferCategory">
</two-column-select>
</v-col>
<v-col cols="12" :md="transaction.type === allTransactionTypes.Transfer ? 6 : 12">
<v-select