diff --git a/src/components/base/TransactionTagSelectionBase.ts b/src/components/base/TransactionTagSelectionBase.ts
index f51eccb3..14e07615 100644
--- a/src/components/base/TransactionTagSelectionBase.ts
+++ b/src/components/base/TransactionTagSelectionBase.ts
@@ -12,6 +12,8 @@ import { TransactionTag } from '@/models/transaction_tag.ts';
export type TransactionTagWithGroupHeader = TransactionTag | {
type: 'subheader';
title: string;
+} | {
+ type: 'addbutton';
}
export interface CommonTransactionTagSelectionProps {
@@ -19,7 +21,7 @@ export interface CommonTransactionTagSelectionProps {
allowAddNewTag?: boolean;
}
-export function useTransactionTagSelectionBase(props: CommonTransactionTagSelectionProps, useClonedModelValue?: boolean) {
+export function useTransactionTagSelectionBase(props: CommonTransactionTagSelectionProps, supportAddButtonInList: boolean, useClonedModelValue?: boolean) {
const { tt } = useI18n();
const transactionTagsStore = useTransactionTagsStore();
@@ -93,6 +95,7 @@ export function useTransactionTagSelectionBase(props: CommonTransactionTagSelect
function getTagsWithGroupHeader(tagFilterFn: (tag: TransactionTag) => boolean): TransactionTagWithGroupHeader[] {
const result: TransactionTagWithGroupHeader[] = [];
const tagsInDefaultGroup = transactionTagsStore.allTransactionTagsByGroupMap[DEFAULT_TAG_GROUP_ID];
+ let addButtonAdded = false;
if (tagsInDefaultGroup && tagsInDefaultGroup.length > 0) {
const visibleTags = tagsInDefaultGroup.filter(tag => tagFilterFn(tag));
@@ -104,6 +107,13 @@ export function useTransactionTagSelectionBase(props: CommonTransactionTagSelect
});
result.push(...visibleTags);
+
+ if (supportAddButtonInList && props.allowAddNewTag && !addButtonAdded) {
+ result.push({
+ type: 'addbutton'
+ });
+ addButtonAdded = true;
+ }
}
}
@@ -126,6 +136,12 @@ export function useTransactionTagSelectionBase(props: CommonTransactionTagSelect
}
}
+ if (supportAddButtonInList && props.allowAddNewTag && !addButtonAdded) {
+ result.push({
+ type: 'addbutton'
+ });
+ }
+
return result;
}
diff --git a/src/components/desktop/TransactionTagAutoComplete.vue b/src/components/desktop/TransactionTagAutoComplete.vue
index 60393b4d..16d4883e 100644
--- a/src/components/desktop/TransactionTagAutoComplete.vue
+++ b/src/components/desktop/TransactionTagAutoComplete.vue
@@ -100,7 +100,7 @@ const { tt } = useI18n();
const {
tagSearchContent,
allTagsWithGroupHeader
-} = useTransactionTagSelectionBase(props);
+} = useTransactionTagSelectionBase(props, false);
const transactionTagsStore = useTransactionTagsStore();
diff --git a/src/components/mobile/TransactionTagSelectionSheet.vue b/src/components/mobile/TransactionTagSelectionSheet.vue
index 7c3b67b2..06b71f06 100644
--- a/src/components/mobile/TransactionTagSelectionSheet.vue
+++ b/src/components/mobile/TransactionTagSelectionSheet.vue
@@ -27,13 +27,49 @@
-
-
+
{{ tag.title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -104,9 +106,10 @@ import { useI18n } from '@/locales/helpers.ts';
import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
import { type CommonTransactionTagSelectionProps, useTransactionTagSelectionBase } from '@/components/base/TransactionTagSelectionBase.ts';
-import { TransactionTag } from '@/models/transaction_tag.ts';
import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
+import { TransactionTag } from '@/models/transaction_tag.ts';
+
import { scrollToSelectedItem } from '@/lib/ui/common.ts';
import { type Framework7Dom, scrollSheetToTop } from '@/lib/ui/mobile.ts';
@@ -130,7 +133,7 @@ const {
tagSearchContent,
selectedTagIds,
filteredTagsWithGroupHeader
-} = useTransactionTagSelectionBase(props, true);
+} = useTransactionTagSelectionBase(props, true, true);
const transactionTagsStore = useTransactionTagsStore();