transaction tag selection sheet supports filtering content (#38)

src/components/mobile/TransactionTagSelectionSheet.vue

@@ -1,6 +1,6 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler"
-              :class="heightClass" :opened="show"
+              style="height: auto" :opened="show"
               @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
@@ -13,7 +13,14 @@
                          :text="tt('Add')" v-if="!allTags || !allTags.length || noAvailableTag" @click="addNewTag"></f7-link>
             </div>
         </f7-toolbar>
-        <f7-page-content>
+        <f7-searchbar ref="searchbar" custom-searchs
+                      :value="filterContent"
+                      :placeholder="tt('Find tag')"
+                      :disable-button="false"
+                      v-if="enableFilter"
+                      @input="filterContent = $event.target.value">
+        </f7-searchbar>
+        <f7-page-content :class="'no-padding-top ' + heightClass">
             <f7-list class="no-margin-top no-margin-bottom" v-if="(!allTags || !allTags.length || noAvailableTag) && !newTag">
                 <f7-list-item :title="tt('No available tag')"></f7-list-item>
             </f7-list>
@@ -24,7 +31,6 @@
                               :checked="isChecked(tag.id)"
                               :key="tag.id"
                               v-for="tag in allTags"
-                              v-show="!tag.hidden || isChecked(tag.id)"
                               @change="changeTagSelection">
                     <template #title>
                         <f7-block class="no-padding no-margin">
@@ -77,7 +83,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 { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
@@ -91,6 +98,7 @@ import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
 const props = defineProps<{
     modelValue: string[];
     allowAddNewTag?: boolean;
+    enableFilter?: boolean;
     show: boolean;
 }>();
 
@@ -104,11 +112,33 @@ const { showToast } = useI18nUIComponents();
 
 const transactionTagsStore = useTransactionTagsStore();
 
+const searchbar = useTemplateRef<Searchbar.Searchbar>('searchbar');
+
+const filterContent = ref<string>('');
 const selectedItemIds = ref<string[]>(copyArrayTo(props.modelValue, []));
 const newTag = ref<TransactionTag | null>(null);
 const heightClass = ref<string>(getHeightClass());
 
-const allTags = computed<TransactionTag[]>(() => transactionTagsStore.allTransactionTags);
+const allTags = computed<TransactionTag[]>(() => {
+    const finalTags: TransactionTag[] = [];
+
+    for (const tag of transactionTagsStore.allTransactionTags) {
+        if (tag.hidden && !isChecked(tag.id)) {
+            continue;
+        }
+
+        if (!props.enableFilter || !filterContent.value) {
+            finalTags.push(tag);
+            continue;
+        }
+
+        if (tag.name.toLowerCase().indexOf(filterContent.value.toLowerCase()) >= 0) {
+            finalTags.push(tag);
+        }
+    }
+
+    return finalTags;
+});
 
 const noAvailableTag = computed<boolean>(() => {
     if (transactionTagsStore.allTransactionTags) {
@@ -123,12 +153,12 @@ const noAvailableTag = computed<boolean>(() => {
 });
 
 function getHeightClass(): string {
-    if (transactionTagsStore.allTransactionTags && transactionTagsStore.allTransactionTags.length > 8) {
+    if (transactionTagsStore.allTransactionTags && transactionTagsStore.allVisibleTagsCount > 8) {
         return 'tag-selection-huge-sheet';
-    } else if (transactionTagsStore.allTransactionTags && transactionTagsStore.allTransactionTags.length > 4) {
+    } else if (transactionTagsStore.allTransactionTags && transactionTagsStore.allVisibleTagsCount > 4) {
         return 'tag-selection-large-sheet';
     } else {
-        return '';
+        return 'tag-selection-default-sheet';
     }
 }
 
@@ -198,17 +228,23 @@ function onSheetOpen(event: { $el: Framework7Dom }): void {
 
 function onSheetClosed(): void {
     emit('update:show', false);
+    filterContent.value = '';
+    searchbar.value?.clear();
 }
 </script>
 
 <style>
 @media (min-height: 630px) {
+    .tag-selection-default-sheet {
+        height: 200px;
+    }
+
     .tag-selection-large-sheet {
-        height: 310px;
+        height: 250px;
     }
 
     .tag-selection-huge-sheet {
-        height: 400px;
+        height: 340px;
     }
 }
 

src/locales/en.json

@@ -1819,6 +1819,7 @@
     "Transaction Tags": "Transaction Tags",
     "Tag Title": "Tag Title",
     "No available tag": "No available tag",
+    "Find tag": "Find tag",
     "Unable to retrieve tag list": "Unable to retrieve tag list",
     "Tag list is up to date": "Tag list is up to date",
     "Tag list has been updated": "Tag list has been updated",

src/locales/es.json

@@ -1819,6 +1819,7 @@
     "Transaction Tags": "Etiquetas de transacción",
     "Tag Title": "Título de la etiqueta",
     "No available tag": "No hay etiqueta disponible",
+    "Find tag": "Find tag",
     "Unable to retrieve tag list": "No se puede recuperar la lista de etiquetas",
     "Tag list is up to date": "La lista de etiquetas está actualizada.",
     "Tag list has been updated": "La lista de etiquetas ha sido actualizada.",

src/locales/ru.json

@@ -1819,6 +1819,7 @@
     "Transaction Tags": "Теги транзакций",
     "Tag Title": "Название тега",
     "No available tag": "Нет доступных тегов",
+    "Find tag": "Find tag",
     "Unable to retrieve tag list": "Не удалось получить список тегов",
     "Tag list is up to date": "Список тегов актуален",
     "Tag list has been updated": "Список тегов обновлен",

src/locales/vi.json

@@ -1819,6 +1819,7 @@
     "Transaction Tags": "Thẻ giao dịch",
     "Tag Title": "Tiêu đề thẻ",
     "No available tag": "Không có thẻ nào khả dụng",
+    "Find tag": "Find tag",
     "Unable to retrieve tag list": "Không thể truy xuất danh sách thẻ",
     "Tag list is up to date": "Danh sách thẻ đã được cập nhật",
     "Tag list has been updated": "Danh sách thẻ đã được cập nhật",

src/locales/zh_Hans.json

@@ -1819,6 +1819,7 @@
     "Transaction Tags": "交易标签",
     "Tag Title": "标签标题",
     "No available tag": "没有可用的标签",
+    "Find tag": "查找标签",
     "Unable to retrieve tag list": "无法获取标签列表",
     "Tag list is up to date": "标签列表已是最新",
     "Tag list has been updated": "标签列表已更新",

src/views/mobile/transactions/EditPage.vue

@@ -315,7 +315,7 @@
                 :header="tt('Tags')"
                 @click="showTransactionTagSheet = true"
             >
-                <transaction-tag-selection-sheet :allow-add-new-tag="true"
+                <transaction-tag-selection-sheet :allow-add-new-tag="true" :enable-filter="true"
                                                  v-model:show="showTransactionTagSheet"
                                                  v-model="transaction.tagIds">
                 </transaction-tag-selection-sheet>