two column list item selection supports filtering content (#38)

This commit is contained in:
MaysWind
2025-02-06 22:37:02 +08:00
parent 29d7ee09c8
commit b6efa91879
14 changed files with 177 additions and 36 deletions
@@ -1,4 +1,6 @@
import { type Ref } from 'vue';
import { type Ref, ref, computed } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { getItemByKeyValue, getPrimaryValueBySecondaryValue } from '@/lib/common.ts';
@@ -29,12 +31,94 @@ export interface CommonTwoColumnListItemSelectionProps {
secondaryIconType?: string;
secondaryColorField?: string;
secondaryHiddenField?: string;
items: unknown[];
enableFilter?: boolean;
filterPlaceholder?: string;
filterNoItemsText?: string;
items: Record<string, unknown>[];
}
export function useTwoColumnListItemSelectionBase(props: CommonTwoColumnListItemSelectionProps) {
const { ti } = useI18n();
const filterContent = ref<string>('');
const filteredItems = computed<Record<string, unknown>[]>(() => {
const finalItems: Record<string, unknown>[] = [];
const items = props.items;
for (const item of items) {
if (props.primaryHiddenField && item[props.primaryHiddenField]) {
continue;
}
if (!props.enableFilter || !filterContent.value) {
finalItems.push(item);
continue;
}
if (props.primaryTitleField) {
const title = ti(item[props.primaryTitleField] as string, !!props.primaryTitleI18n);
if (title.toLowerCase().indexOf(filterContent.value.toLowerCase()) >= 0) {
finalItems.push(item);
continue;
}
}
if (props.primarySubItemsField) {
if (getFilteredSubItems(item).length > 0) {
finalItems.push(item);
}
}
}
return finalItems;
});
function getFilteredSubItems(selectedPrimaryItem: unknown): Record<string, unknown>[] {
const finalItems: Record<string, unknown>[] = [];
if (!selectedPrimaryItem || !props.primarySubItemsField) {
return finalItems;
}
const subItems = (selectedPrimaryItem as Record<string, unknown>)[props.primarySubItemsField] as Record<string, unknown>[];
let primaryTitleHasFilterContent = false;
if (props.primaryTitleField) {
const title = ti((selectedPrimaryItem as Record<string, unknown>)[props.primaryTitleField] as string, !!props.primaryTitleI18n);
primaryTitleHasFilterContent = title.toLowerCase().indexOf(filterContent.value.toLowerCase()) >= 0;
}
for (const subItem of subItems) {
if (props.secondaryHiddenField && subItem[props.secondaryHiddenField]) {
continue;
}
if (!props.enableFilter || !filterContent.value) {
finalItems.push(subItem);
continue;
}
if (primaryTitleHasFilterContent) {
finalItems.push(subItem);
continue;
}
if (props.secondaryTitleField && filterContent.value) {
const title = ti(subItem[props.secondaryTitleField] as string, !!props.secondaryTitleI18n);
if (title.toLowerCase().indexOf(filterContent.value.toLowerCase()) >= 0) {
finalItems.push(subItem);
}
}
}
return finalItems;
}
function getCurrentPrimaryValueBySecondaryValue(secondaryValue: unknown): unknown {
return getPrimaryValueBySecondaryValue(props.items as Record<string, Record<string, unknown>[]>[] | Record<string, Record<string, Record<string, unknown>[]>>, props.primarySubItemsField, props.primaryValueField, props.primaryHiddenField, props.secondaryValueField, props.secondaryHiddenField, secondaryValue);
return getPrimaryValueBySecondaryValue(props.items as Record<string, Record<string, unknown>[]>[], props.primarySubItemsField, props.primaryValueField, props.primaryHiddenField, props.secondaryValueField, props.secondaryHiddenField, secondaryValue);
}
function isSecondaryValueSelected(currentSecondaryValue: unknown, subItem: unknown): boolean {
@@ -45,17 +129,17 @@ export function useTwoColumnListItemSelectionBase(props: CommonTwoColumnListItem
}
}
function getSelectedPrimaryItem(currentPrimaryValue: unknown) {
function getSelectedPrimaryItem(currentPrimaryValue: unknown): unknown {
if (props.primaryValueField) {
return getItemByKeyValue(props.items as Record<string, unknown>[] | Record<string, Record<string, unknown>>, currentPrimaryValue, props.primaryValueField);
return getItemByKeyValue(props.items, currentPrimaryValue, props.primaryValueField);
} else {
return currentPrimaryValue;
}
}
function getSelectedSecondaryItem(currentSecondaryValue: unknown, selectedPrimaryItem: unknown) {
function getSelectedSecondaryItem(currentSecondaryValue: unknown, selectedPrimaryItem: unknown): unknown {
if (currentSecondaryValue && selectedPrimaryItem && (selectedPrimaryItem as Record<string, unknown>)[props.primarySubItemsField]) {
return getItemByKeyValue((selectedPrimaryItem as Record<string, unknown>)[props.primarySubItemsField] as Record<string, unknown>[] | Record<string, Record<string, unknown>>, currentSecondaryValue, props.secondaryValueField as string);
return getItemByKeyValue((selectedPrimaryItem as Record<string, unknown>)[props.primarySubItemsField] as Record<string, unknown>[], currentSecondaryValue, props.secondaryValueField as string);
} else {
return null;
}
@@ -78,7 +162,12 @@ export function useTwoColumnListItemSelectionBase(props: CommonTwoColumnListItem
}
return {
// states
filterContent,
// computed states
filteredItems,
// functions
getFilteredSubItems,
getCurrentPrimaryValueBySecondaryValue,
isSecondaryValueSelected,
getSelectedPrimaryItem,
+25 -16
View File
@@ -14,11 +14,11 @@
<template #selection>
<div class="d-flex align-center text-truncate cursor-pointer">
<span class="text-truncate" v-if="customSelectionPrimaryText">{{ customSelectionPrimaryText }}</span>
<v-icon class="disabled" :icon="icons.chevronRight" size="23" v-if="customSelectionPrimaryText && customSelectionSecondaryText" />
<v-icon class="disabled" :icon="mdiChevronRight" size="23" v-if="customSelectionPrimaryText && customSelectionSecondaryText" />
<span class="text-truncate" v-if="customSelectionPrimaryText && customSelectionSecondaryText">{{ customSelectionSecondaryText }}</span>
<span class="text-truncate" v-if="!customSelectionPrimaryText && !selectedPrimaryItem && !selectedSecondaryItem">{{ noSelectionText }}</span>
<span class="text-truncate" v-if="!customSelectionPrimaryText && showSelectionPrimaryText && selectedPrimaryItem">{{ selectionPrimaryItemText }}</span>
<v-icon class="disabled" :icon="icons.chevronRight" size="23" v-if="!customSelectionPrimaryText && showSelectionPrimaryText && selectedPrimaryItem && selectedSecondaryItem" />
<v-icon class="disabled" :icon="mdiChevronRight" size="23" v-if="!customSelectionPrimaryText && showSelectionPrimaryText && selectedPrimaryItem && selectedSecondaryItem" />
<ItemIcon class="mr-2" icon-type="account" size="21.5px"
:icon-id="selectedSecondaryItem && secondaryIconField ? (selectedSecondaryItem as Record<string, unknown>)[secondaryIconField] : null"
:color="selectedSecondaryItem && secondaryColorField ? (selectedSecondaryItem as Record<string, unknown>)[secondaryColorField] : null"
@@ -28,13 +28,21 @@
</template>
<template #no-data>
<div ref="dropdownMenu" class="two-column-list-container">
<div class="mx-2 mt-2" v-if="enableFilter">
<v-text-field density="compact"
:prepend-inner-icon="mdiMagnify"
:placeholder="filterPlaceholder"
v-model="filterContent"></v-text-field>
</div>
<div class="mx-4 my-3" v-show="!filteredItems || !filteredItems.length">
{{ filterNoItemsText }}
</div>
<div ref="dropdownMenu" class="two-column-list-container" v-show="filteredItems && filteredItems.length">
<div class="primary-list-container">
<v-list :class="{ 'list-item-with-header': !!primaryHeaderField, 'list-item-with-footer': !!primaryFooterField }">
<v-list-item :class="{ 'primary-list-item-selected v-list-item--active text-primary': item === selectedPrimaryItem }"
:key="primaryKeyField ? (item as Record<string, unknown>)[primaryKeyField] : item"
v-for="item in items"
v-show="item && (!primaryHiddenField || !(item as Record<string, unknown>)[primaryHiddenField])"
v-for="item in filteredItems"
@click="onPrimaryItemClicked(item)">
<template #prepend>
<ItemIcon class="mr-2" :icon-type="primaryIconType"
@@ -53,8 +61,7 @@
v-if="selectedPrimaryItem && primarySubItemsField && (selectedPrimaryItem as Record<string, unknown>)[primarySubItemsField]">
<v-list-item :class="{ 'secondary-list-item-selected v-list-item--active text-primary': isSecondarySelected(subItem) }"
:key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
v-for="subItem in (selectedPrimaryItem as Record<string, unknown>)[primarySubItemsField]"
v-show="subItem && (!secondaryHiddenField || !subItem[secondaryHiddenField])"
v-for="subItem in filteredSubItems"
@click="onSecondaryItemClicked(subItem)">
<template #prepend>
<ItemIcon class="mr-2" :icon-type="secondaryIconType"
@@ -87,7 +94,8 @@ import {
import { scrollToSelectedItem } from '@/lib/ui/desktop.ts';
import {
mdiChevronRight
mdiChevronRight,
mdiMagnify
} from '@mdi/js';
interface DesktopTwoColumnListItemSelectionProps extends CommonTwoColumnListItemSelectionProps {
@@ -112,6 +120,9 @@ const emit = defineEmits<{
const { tt, ti } = useI18n();
const {
filterContent,
filteredItems,
getFilteredSubItems,
getCurrentPrimaryValueBySecondaryValue,
isSecondaryValueSelected,
getSelectedPrimaryItem,
@@ -120,26 +131,24 @@ const {
updateCurrentSecondaryValue
} = useTwoColumnListItemSelectionBase(props);
const icons = {
chevronRight: mdiChevronRight
};
const dropdownMenu = useTemplateRef<HTMLElement>('dropdownMenu');
const menuState = ref<boolean>(false);
const filteredSubItems = computed<Record<string, unknown>[]>(() => getFilteredSubItems(selectedPrimaryItem.value));
const currentPrimaryValue = computed<unknown>({
get: () => {
return getCurrentPrimaryValueBySecondaryValue(props.modelValue);
},
set: (value) => {
const primaryItem = getItemByKeyValue(props.items as Record<string, unknown>[] | Record<string, Record<string, unknown>>, value, props.primaryValueField as string);
const primaryItem = getItemByKeyValue(filteredItems.value, value, props.primaryValueField as string);
if (!primaryItem) {
return;
}
const secondaryItem = getFirstVisibleItem(primaryItem[props.primarySubItemsField] as Record<string, unknown>[] | Record<string, Record<string, unknown>>, props.primaryHiddenField as string);
const secondaryItem = getFirstVisibleItem(getFilteredSubItems(primaryItem), props.primaryHiddenField as string);
if (secondaryItem) {
if (props.secondaryValueField) {
@@ -167,7 +176,7 @@ const noSelectionText = computed<string>(() => props.noItemText ? props.noItemTe
const selectionPrimaryItemText = computed<string>(() => {
if (props.primaryValueField && props.primaryTitleField) {
if (currentPrimaryValue.value) {
return getNameByKeyValue(props.items as Record<string, string>[] | Record<string, Record<string, string>>, currentPrimaryValue.value, props.primaryValueField, props.primaryTitleField, noSelectionText.value) as string;
return getNameByKeyValue(props.items as Record<string, string>[], currentPrimaryValue.value, props.primaryValueField, props.primaryTitleField, noSelectionText.value) as string;
} else {
return noSelectionText.value;
}
@@ -179,7 +188,7 @@ const selectionPrimaryItemText = computed<string>(() => {
const selectionSecondaryItemText = computed<string>(() => {
if (props.secondaryValueField && props.secondaryTitleField) {
if (currentSecondaryValue.value && selectedPrimaryItem.value && (selectedPrimaryItem.value as Record<string, unknown>)[props.primarySubItemsField]) {
return getNameByKeyValue((selectedPrimaryItem.value as Record<string, unknown>)[props.primarySubItemsField] as Record<string, string>[] | Record<string, Record<string, string>>, currentSecondaryValue.value, props.secondaryValueField, props.secondaryTitleField, noSelectionText.value) as string;
return getNameByKeyValue((selectedPrimaryItem.value as Record<string, unknown>)[props.primarySubItemsField] as Record<string, string>[], currentSecondaryValue.value, props.secondaryValueField, props.secondaryTitleField, noSelectionText.value) as string;
} else {
return noSelectionText.value;
}
@@ -9,31 +9,39 @@
</div>
</f7-toolbar>
<f7-page-content>
<div class="grid grid-cols-2 grid-gap">
<div v-if="enableFilter">
<f7-searchbar ref="searchbar" custom-searchs
:value="filterContent"
:placeholder="filterPlaceholder"
:disable-button="false"
@input="filterContent = $event.target.value"></f7-searchbar>
</div>
<div class="grid grid-gap" :class="{ 'grid-cols-2': filteredItems && filteredItems.length }">
<div>
<div class="primary-list-container">
<f7-list dividers class="primary-list no-margin-vertical">
<f7-list-item link="#" no-chevron
:class="{ 'primary-list-item-selected': item === selectedPrimaryItem }"
:value="primaryValueField ? (item as Record<string, unknown>)[primaryValueField] : item"
:title="primaryTitleField ? ti((item as Record<string, unknown>)[primaryTitleField] as string, !!primaryTitleI18n) : ''"
:header="primaryHeaderField ? ti((item as Record<string, unknown>)[primaryHeaderField] as string, !!primaryHeaderI18n) : ''"
:footer="primaryFooterField ? ti((item as Record<string, unknown>)[primaryFooterField] as string, !!primaryFooterI18n) : ''"
:key="primaryKeyField ? (item as Record<string, unknown>)[primaryKeyField] : item"
v-for="item in items"
v-show="item && (!primaryHiddenField || !(item as Record<string, unknown>)[primaryHiddenField])"
:value="primaryValueField ? item[primaryValueField] : item"
:title="primaryTitleField ? ti(item[primaryTitleField] as string, !!primaryTitleI18n) : ''"
:header="primaryHeaderField ? ti(item[primaryHeaderField] as string, !!primaryHeaderI18n) : ''"
:footer="primaryFooterField ? ti(item[primaryFooterField] as string, !!primaryFooterI18n) : ''"
:key="primaryKeyField ? item[primaryKeyField] : item"
v-for="item in filteredItems"
@click="onPrimaryItemClicked(item)">
<template #media>
<ItemIcon :icon-type="primaryIconType" :icon-id="primaryIconField ? (item as Record<string, unknown>)[primaryIconField] : undefined" :color="primaryColorField ? (item as Record<string, unknown>)[primaryColorField] : undefined"></ItemIcon>
<ItemIcon :icon-type="primaryIconType" :icon-id="primaryIconField ? item[primaryIconField] : undefined" :color="primaryColorField ? item[primaryColorField] : undefined"></ItemIcon>
</template>
<template #after>
<f7-icon class="list-item-showing" f7="chevron_right" v-if="item === selectedPrimaryItem"></f7-icon>
</template>
</f7-list-item>
<f7-list-item v-if="!filteredItems || !filteredItems.length"
:title="filterNoItemsText"></f7-list-item>
</f7-list>
</div>
</div>
<div>
<div v-show="filteredItems && filteredItems.length">
<div class="secondary-list-container">
<f7-list dividers class="secondary-list no-margin-vertical" v-if="selectedPrimaryItem && primarySubItemsField && (selectedPrimaryItem as Record<string, unknown>)[primarySubItemsField]">
<f7-list-item link="#" no-chevron
@@ -43,8 +51,7 @@
:header="secondaryHeaderField ? ti(subItem[secondaryHeaderField] as string, !!secondaryHeaderI18n) : ''"
:footer="secondaryFooterField ? ti(subItem[secondaryFooterField] as string, !!secondaryFooterI18n) : ''"
:key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
v-for="subItem in (selectedPrimaryItem as Record<string, unknown>)[primarySubItemsField]"
v-show="subItem && (!secondaryHiddenField || !subItem[secondaryHiddenField])"
v-for="subItem in filteredSubItems"
@click="onSecondaryItemClicked(subItem)">
<template #media>
<ItemIcon :icon-type="secondaryIconType" :icon-id="secondaryIconField ? subItem[secondaryIconField] : undefined" :color="secondaryColorField ? subItem[secondaryColorField] : undefined"></ItemIcon>
@@ -62,7 +69,8 @@
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { ref, computed, useTemplateRef } from 'vue';
import type { Searchbar } from 'framework7/types';
import { useI18n } from '@/locales/helpers.ts';
import { type CommonTwoColumnListItemSelectionProps, useTwoColumnListItemSelectionBase } from '@/components/base/TwoColumnListItemSelectionBase.ts';
@@ -83,6 +91,9 @@ const emit = defineEmits<{
const { tt, ti } = useI18n();
const {
filterContent,
filteredItems,
getFilteredSubItems,
getCurrentPrimaryValueBySecondaryValue,
isSecondaryValueSelected,
getSelectedPrimaryItem,
@@ -90,10 +101,12 @@ const {
updateCurrentSecondaryValue
} = useTwoColumnListItemSelectionBase(props);
const searchbar = useTemplateRef<Searchbar.Searchbar>('searchbar');
const currentPrimaryValue = ref<unknown>(getCurrentPrimaryValueBySecondaryValue(props.modelValue));
const currentSecondaryValue = ref<unknown>(props.modelValue);
const filteredSubItems = computed<Record<string, unknown>[]>(() => getFilteredSubItems(selectedPrimaryItem.value));
const selectedPrimaryItem = computed<unknown>(() => getSelectedPrimaryItem(currentPrimaryValue.value));
function isSecondarySelected(subItem: unknown): boolean {
@@ -123,6 +136,8 @@ function onSheetOpen(event: { $el: Framework7Dom }): void {
function onSheetClosed(): void {
close();
filterContent.value = '';
searchbar.value?.clear();
}
</script>
+2
View File
@@ -1455,6 +1455,7 @@
"Account list has been updated": "Account list has been updated",
"All Accounts": "All Accounts",
"No available account": "No available account",
"Find account": "Find account",
"Add Account": "Add Account",
"Edit Account": "Edit Account",
"Account Category": "Account Category",
@@ -1784,6 +1785,7 @@
"Transaction Secondary Categories": "Transaction Secondary Categories",
"All Categories": "All Categories",
"No available category": "No available category",
"Find category": "Find category",
"Add Default Categories": "Add Default Categories",
"Default Categories": "Default Categories",
"Unable to retrieve category list": "Unable to retrieve category list",
+2
View File
@@ -1455,6 +1455,7 @@
"Account list has been updated": "La lista de cuentas ha sido actualizada.",
"All Accounts": "Todas las cuentas",
"No available account": "No hay cuenta disponible",
"Find account": "Find account",
"Add Account": "Agregar cuenta",
"Edit Account": "Editar cuenta",
"Account Category": "Categoría de cuenta",
@@ -1784,6 +1785,7 @@
"Transaction Secondary Categories": "Categorías secundarias de transacciones",
"All Categories": "Todas las categorías",
"No available category": "Ninguna categoría disponible",
"Find category": "Find category",
"Add Default Categories": "Agregar categorías predeterminadas",
"Default Categories": "Categorías predeterminadas",
"Unable to retrieve category list": "No se puede recuperar la lista de categorías",
+2
View File
@@ -1455,6 +1455,7 @@
"Account list has been updated": "Список счетов обновлен",
"All Accounts": "Все счета",
"No available account": "Нет доступных счетов",
"Find account": "Find account",
"Add Account": "Добавить счет",
"Edit Account": "Редактировать счет",
"Account Category": "Категория счета",
@@ -1784,6 +1785,7 @@
"Transaction Secondary Categories": "Вторичные категории транзакций",
"All Categories": "Все категории",
"No available category": "Нет доступных категорий",
"Find category": "Find category",
"Add Default Categories": "Добавить категории по умолчанию",
"Default Categories": "Категории по умолчанию",
"Unable to retrieve category list": "Не удалось получить список категорий",
+2
View File
@@ -1455,6 +1455,7 @@
"Account list has been updated": "Danh sách tài khoản đã được cập nhật",
"All Accounts": "Tất cả tài khoản",
"No available account": "Không có tài khoản khả dụng",
"Find account": "Find account",
"Add Account": "Thêm tài khoản",
"Edit Account": "Sửa tài khoản",
"Account Category": "Danh mục tài khoản",
@@ -1784,6 +1785,7 @@
"Transaction Secondary Categories": "Danh mục giao dịch phụ",
"All Categories": "Tất cả danh mục",
"No available category": "Không có danh mục nào khả dụng",
"Find category": "Find category",
"Add Default Categories": "Thêm danh mục mặc định",
"Default Categories": "Danh mục mặc định",
"Unable to retrieve category list": "Không thể truy xuất danh sách danh mục",
+2
View File
@@ -1455,6 +1455,7 @@
"Account list has been updated": "账户列表已更新",
"All Accounts": "全部账户",
"No available account": "没有可用的账户",
"Find account": "查找账户",
"Add Account": "添加账户",
"Edit Account": "编辑账户",
"Account Category": "账户分类",
@@ -1784,6 +1785,7 @@
"Transaction Secondary Categories": "交易二级分类",
"All Categories": "全部分类",
"No available category": "没有可用的分类",
"Find category": "查找分类",
"Add Default Categories": "添加默认分类",
"Default Categories": "默认分类",
"Unable to retrieve category list": "无法获取分类列表",
@@ -37,6 +37,7 @@
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
secondary-hidden-field="hidden"
:disabled="!hasAvailableExpenseCategories"
:enable-filter="true" :filter-placeholder="tt('Find category')" :filter-no-items-text="tt('No available category')"
:show-selection-primary-text="true"
:custom-selection-primary-text="getTransactionPrimaryCategoryName(targetItem, allCategories[CategoryType.Expense])"
:custom-selection-secondary-text="getTransactionSecondaryCategoryName(targetItem, allCategories[CategoryType.Expense])"
@@ -53,6 +54,7 @@
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
secondary-hidden-field="hidden"
:disabled="!hasAvailableIncomeCategories"
:enable-filter="true" :filter-placeholder="tt('Find category')" :filter-no-items-text="tt('No available category')"
:show-selection-primary-text="true"
:custom-selection-primary-text="getTransactionPrimaryCategoryName(targetItem, allCategories[CategoryType.Income])"
:custom-selection-secondary-text="getTransactionSecondaryCategoryName(targetItem, allCategories[CategoryType.Income])"
@@ -69,6 +71,7 @@
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
secondary-hidden-field="hidden"
:disabled="!hasAvailableTransferCategories"
:enable-filter="true" :filter-placeholder="tt('Find category')" :filter-no-items-text="tt('No available category')"
:show-selection-primary-text="true"
:custom-selection-primary-text="getTransactionPrimaryCategoryName(targetItem, allCategories[CategoryType.Transfer])"
:custom-selection-secondary-text="getTransactionSecondaryCategoryName(targetItem, allCategories[CategoryType.Transfer])"
@@ -105,6 +108,7 @@
secondary-title-field="name" secondary-footer-field="displayBalance"
secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
:disabled="!allVisibleAccounts.length"
:enable-filter="true" :filter-placeholder="tt('Find account')" :filter-no-items-text="tt('No available account')"
:custom-selection-primary-text="getAccountDisplayName(targetItem)"
:label="tt('Target Account')"
:placeholder="tt('Target Account')"
@@ -114,6 +114,7 @@
secondary-hidden-field="hidden"
:readonly="mode === TransactionEditPageMode.View"
:disabled="loading || submitting || !hasAvailableExpenseCategories"
:enable-filter="true" :filter-placeholder="tt('Find category')" :filter-no-items-text="tt('No available category')"
:show-selection-primary-text="true"
:custom-selection-primary-text="getTransactionPrimaryCategoryName(transaction.expenseCategoryId, allCategories[CategoryType.Expense])"
:custom-selection-secondary-text="getTransactionSecondaryCategoryName(transaction.expenseCategoryId, allCategories[CategoryType.Expense])"
@@ -131,6 +132,7 @@
secondary-hidden-field="hidden"
:readonly="mode === TransactionEditPageMode.View"
:disabled="loading || submitting || !hasAvailableIncomeCategories"
:enable-filter="true" :filter-placeholder="tt('Find category')" :filter-no-items-text="tt('No available category')"
:show-selection-primary-text="true"
:custom-selection-primary-text="getTransactionPrimaryCategoryName(transaction.incomeCategoryId, allCategories[CategoryType.Income])"
:custom-selection-secondary-text="getTransactionSecondaryCategoryName(transaction.incomeCategoryId, allCategories[CategoryType.Income])"
@@ -148,6 +150,7 @@
secondary-hidden-field="hidden"
:readonly="mode === TransactionEditPageMode.View"
:disabled="loading || submitting || !hasAvailableTransferCategories"
:enable-filter="true" :filter-placeholder="tt('Find category')" :filter-no-items-text="tt('No available category')"
:show-selection-primary-text="true"
:custom-selection-primary-text="getTransactionPrimaryCategoryName(transaction.transferCategoryId, allCategories[CategoryType.Transfer])"
:custom-selection-secondary-text="getTransactionSecondaryCategoryName(transaction.transferCategoryId, allCategories[CategoryType.Transfer])"
@@ -167,6 +170,7 @@
secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
:readonly="mode === TransactionEditPageMode.View"
:disabled="loading || submitting || !allVisibleAccounts.length"
:enable-filter="true" :filter-placeholder="tt('Find account')" :filter-no-items-text="tt('No available account')"
:custom-selection-primary-text="sourceAccountName"
:label="tt(sourceAccountTitle)"
:placeholder="tt(sourceAccountTitle)"
@@ -185,6 +189,7 @@
secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
:readonly="mode === TransactionEditPageMode.View"
:disabled="loading || submitting || !allVisibleAccounts.length"
:enable-filter="true" :filter-placeholder="tt('Find account')" :filter-no-items-text="tt('No available account')"
:custom-selection-primary-text="destinationAccountName"
:label="tt('Destination Account')"
:placeholder="tt('Destination Account')"
@@ -317,6 +317,7 @@
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
secondary-hidden-field="hidden"
:disabled="loading || submitting || !hasAvailableExpenseCategories"
:enable-filter="true" :filter-placeholder="tt('Find category')" :filter-no-items-text="tt('No available category')"
:show-selection-primary-text="true"
:custom-selection-primary-text="getTransactionPrimaryCategoryName(item.categoryId, allCategories[CategoryType.Expense])"
:custom-selection-secondary-text="getTransactionSecondaryCategoryName(item.categoryId, allCategories[CategoryType.Expense])"
@@ -334,6 +335,7 @@
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
secondary-hidden-field="hidden"
:disabled="loading || submitting || !hasAvailableIncomeCategories"
:enable-filter="true" :filter-placeholder="tt('Find category')" :filter-no-items-text="tt('No available category')"
:show-selection-primary-text="true"
:custom-selection-primary-text="getTransactionPrimaryCategoryName(item.categoryId, allCategories[CategoryType.Income])"
:custom-selection-secondary-text="getTransactionSecondaryCategoryName(item.categoryId, allCategories[CategoryType.Income])"
@@ -351,6 +353,7 @@
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
secondary-hidden-field="hidden"
:disabled="loading || submitting || !hasAvailableTransferCategories"
:enable-filter="true" :filter-placeholder="tt('Find category')" :filter-no-items-text="tt('No available category')"
:show-selection-primary-text="true"
:custom-selection-primary-text="getTransactionPrimaryCategoryName(item.categoryId, allCategories[CategoryType.Transfer])"
:custom-selection-secondary-text="getTransactionSecondaryCategoryName(item.categoryId, allCategories[CategoryType.Transfer])"
@@ -390,6 +393,7 @@
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"
:enable-filter="true" :filter-placeholder="tt('Find account')" :filter-no-items-text="tt('No available account')"
:custom-selection-primary-text="getSourceAccountDisplayName(item)"
:placeholder="getSourceAccountTitle(item)"
:items="allVisibleCategorizedAccounts"
@@ -406,6 +410,7 @@
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"
:enable-filter="true" :filter-placeholder="tt('Find account')" :filter-no-items-text="tt('No available account')"
:custom-selection-primary-text="getDestinationAccountDisplayName(item)"
:placeholder="tt('Destination Account')"
:items="allVisibleCategorizedAccounts"
@@ -87,6 +87,7 @@
secondary-title-field="name"
secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
:disabled="loading || saving || !allVisibleAccounts.length"
:enable-filter="true" :filter-placeholder="tt('Find account')" :filter-no-items-text="tt('No available account')"
:label="tt('Default Account')"
:placeholder="tt('Default Account')"
:items="allVisibleCategorizedAccounts"
@@ -202,6 +202,7 @@
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"
:enable-filter="true" :filter-placeholder="tt('Find account')" :filter-no-items-text="tt('No available account')"
:items="allVisibleCategorizedAccounts"
v-model:show="showSourceAccountSheet"
v-model="transaction.sourceAccountId">
@@ -225,6 +226,7 @@
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"
:enable-filter="true" :filter-placeholder="tt('Find account')" :filter-no-items-text="tt('No available account')"
:items="allVisibleCategorizedAccounts"
v-model:show="showDestinationAccountSheet"
v-model="transaction.destinationAccountId">
@@ -103,6 +103,7 @@
secondary-key-field="id" secondary-value-field="id"
secondary-title-field="name"
secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
:enable-filter="true" :filter-placeholder="tt('Find account')" :filter-no-items-text="tt('No available account')"
:items="allVisibleCategorizedAccounts"
v-model:show="showAccountSheet"
v-model="newProfile.defaultAccountId">