show add button in default group

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;
     }
 

src/components/desktop/TransactionTagAutoComplete.vue

@@ -100,7 +100,7 @@ const { tt } = useI18n();
 const {
     tagSearchContent,
     allTagsWithGroupHeader
-} = useTransactionTagSelectionBase(props);
+} = useTransactionTagSelectionBase(props, false);
 
 const transactionTagsStore = useTransactionTagsStore();
 

src/components/mobile/TransactionTagSelectionSheet.vue

@@ -27,13 +27,49 @@
                 <f7-list-item :title="tt('No available tag')"></f7-list-item>
             </f7-list>
             <f7-list dividers class="no-margin-top no-margin-bottom tag-selection-list" v-else-if="(filteredTagsWithGroupHeader && filteredTagsWithGroupHeader.length > 0) || newTag">
-                <template :key="(tag instanceof TransactionTag) ? tag.id : `${tag.type}-${index}-${tag.title}`"
+                <template :key="(tag instanceof TransactionTag) ? tag.id : (tag.type === 'subheader' ? `${tag.type}-${index}-${tag.title}` : `${tag.type}-${index}`)"
                           v-for="(tag, index) in filteredTagsWithGroupHeader">
-                    <f7-list-item group-title v-if="!(tag instanceof TransactionTag)">
+                    <f7-list-item group-title v-if="!(tag instanceof TransactionTag) && tag.type === 'subheader'">
                         <div class="tag-selection-list-item">
                             {{ tag.title }}
                         </div>
                     </f7-list-item>
+                    <template v-if="!(tag instanceof TransactionTag) && tag.type === 'addbutton'">
+                        <f7-list-item link="#" no-chevron
+                                      :title="tt('Add new tag')"
+                                      v-if="allowAddNewTag && !newTag"
+                                      @click="addNewTag()">
+                        </f7-list-item>
+                        <f7-list-item class="editing-list-item" checkbox indeterminate disabled v-if="allowAddNewTag && newTag">
+                            <template #media>
+                                <f7-icon class="transaction-tag-icon" f7="number"></f7-icon>
+                            </template>
+                            <template #title>
+                                <div class="display-flex">
+                                    <f7-input class="list-title-input padding-inline-start-half"
+                                              type="text"
+                                              :placeholder="tt('Tag Title')"
+                                              v-model:value="newTag.name"
+                                              @keyup.enter="saveNewTag()">
+                                    </f7-input>
+                                </div>
+                            </template>
+                            <template #after>
+                                <f7-button :class="{ 'no-padding': true, 'disabled': !newTag || !newTag.name }"
+                                           raised fill
+                                           icon-f7="checkmark_alt"
+                                           color="blue"
+                                           @click="saveNewTag()">
+                                </f7-button>
+                                <f7-button class="no-padding margin-inline-start-half"
+                                           raised fill
+                                           icon-f7="xmark"
+                                           color="gray"
+                                           @click="cancelSaveNewTag()">
+                                </f7-button>
+                            </template>
+                        </f7-list-item>
+                    </template>
                     <f7-list-item checkbox
                                   :class="{ 'list-item-selected': selectedTagIds[tag.id], 'disabled': tag.hidden && !selectedTagIds[tag.id] }"
                                   :value="tag.id"
@@ -57,40 +93,6 @@
                         </template>
                     </f7-list-item>
                 </template>
-                <f7-list-item link="#" no-chevron
-                              :title="tt('Add new tag')"
-                              v-if="allowAddNewTag && !newTag"
-                              @click="addNewTag()">
-                </f7-list-item>
-                <f7-list-item class="editing-list-item" checkbox indeterminate disabled v-if="allowAddNewTag && newTag">
-                    <template #media>
-                        <f7-icon class="transaction-tag-icon" f7="number"></f7-icon>
-                    </template>
-                    <template #title>
-                        <div class="display-flex">
-                            <f7-input class="list-title-input padding-inline-start-half"
-                                      type="text"
-                                      :placeholder="tt('Tag Title')"
-                                      v-model:value="newTag.name"
-                                      @keyup.enter="saveNewTag()">
-                            </f7-input>
-                        </div>
-                    </template>
-                    <template #after>
-                        <f7-button :class="{ 'no-padding': true, 'disabled': !newTag || !newTag.name }"
-                                   raised fill
-                                   icon-f7="checkmark_alt"
-                                   color="blue"
-                                   @click="saveNewTag()">
-                        </f7-button>
-                        <f7-button class="no-padding margin-inline-start-half"
-                                   raised fill
-                                   icon-f7="xmark"
-                                   color="gray"
-                                   @click="cancelSaveNewTag()">
-                        </f7-button>
-                    </template>
-                </f7-list-item>
             </f7-list>
         </f7-page-content>
     </f7-sheet>
@@ -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();