tree view selection sheet supports filtering content (#38)

src/components/mobile/TreeViewSelectionSheet.vue

@@ -1,7 +1,6 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler"
-              :class="heightClass"
-              :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
+              style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
             <div class="left"></div>
@@ -9,25 +8,33 @@
                 <f7-link sheet-close :text="tt('Done')"></f7-link>
             </div>
         </f7-toolbar>
-        <f7-page-content>
+        <f7-searchbar ref="searchbar" custom-searchs
+                      :value="filterContent"
+                      :placeholder="filterPlaceholder"
+                      :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="!filteredItems || !filteredItems.length">
+                <f7-list-item :title="filterNoItemsText"></f7-list-item>
+            </f7-list>
             <f7-treeview>
                 <f7-treeview-item item-toggle
                                   :opened="isPrimaryItemHasSecondaryValue(item)"
                                   :label="ti((primaryTitleField ? item[primaryTitleField] : item) as string, !!primaryTitleI18n)"
                                   :key="primaryKeyField ? item[primaryKeyField] : item"
-                                  v-for="item in items"
-                                  v-show="item && (!primaryHiddenField || !item[primaryHiddenField])">
+                                  v-for="item in filteredItems">
                     <template #media>
                         <ItemIcon :icon-type="primaryIconType" :icon-id="item[primaryIconField]"
                                   :color="primaryColorField ? item[primaryColorField] : undefined" v-if="primaryIconField"></ItemIcon>
                     </template>
 
                     <f7-treeview-item selectable
-                                      :selected="isSecondarySelected(subItem)"
+                                      :selected="isSecondaryValueSelected(currentValue, subItem)"
                                       :label="ti((secondaryTitleField ? (subItem as Record<string, unknown>)[secondaryTitleField] : subItem) as string, !!secondaryTitleI18n)"
                                       :key="secondaryKeyField ? (subItem as Record<string, unknown>)[secondaryKeyField] : subItem"
-                                      v-for="subItem in item[primarySubItemsField]"
-                                      v-show="subItem && (!secondaryHiddenField || !(subItem as Record<string, unknown>)[secondaryHiddenField])"
+                                      v-for="subItem in getFilteredSubItems(item)"
                                       @click="onSecondaryItemClicked(subItem)">
                         <template #media>
                             <ItemIcon :icon-type="secondaryIconType" :icon-id="(subItem as Record<string, unknown>)[secondaryIconField]"
@@ -41,34 +48,19 @@
 </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 TwoLevelItemSelectionBaseProps, useTwoLevelItemSelectionBase } from '@/components/base/TwoLevelItemSelectionBase.ts';
 
-import { isArray } from '@/lib/common.ts';
 import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
 
-const props = defineProps<{
-    modelValue: unknown;
-    primaryKeyField?: string;
-    primaryTitleField?: string;
-    primaryTitleI18n?: boolean;
-    primaryIconField?: string;
-    primaryIconType?: string;
-    primaryColorField?: string;
-    primaryHiddenField?: string;
-    primarySubItemsField: string;
-    secondaryKeyField?: string;
-    secondaryValueField?: string;
-    secondaryTitleField?: string;
-    secondaryTitleI18n?: boolean;
-    secondaryIconField?: string;
-    secondaryIconType?: string;
-    secondaryColorField?: string;
-    secondaryHiddenField?: string;
-    items: Record<string, unknown>[];
+interface MobileTwoLevelItemSelectionBaseProps extends TwoLevelItemSelectionBaseProps {
     show: boolean;
-}>();
+}
+
+const props = defineProps<MobileTwoLevelItemSelectionBaseProps>();
 
 const emit = defineEmits<{
     (e: 'update:modelValue', value: unknown): void;
@@ -77,29 +69,26 @@ const emit = defineEmits<{
 
 const { tt, ti } = useI18n();
 
+const {
+    filterContent,
+    visibleItemsCount,
+    filteredItems,
+    getFilteredSubItems,
+    isSecondaryValueSelected,
+    updateCurrentSecondaryValue
+} = useTwoLevelItemSelectionBase(props);
+
+const searchbar = useTemplateRef<Searchbar.Searchbar>('searchbar');
+
 const currentValue = ref<unknown>(props.modelValue);
 
 const heightClass = computed<string>(() => {
-    let count = 0;
-
-    if (isArray(props.items)) {
-        count = props.items.length;
-    } else {
-        for (const field in props.items) {
-            if (!Object.prototype.hasOwnProperty.call(props.items, field)) {
-                continue;
-            }
-
-            count++;
-        }
-    }
-
-    if (count > 6) {
+    if (visibleItemsCount.value > 6) {
         return 'tree-view-selection-huge-sheet';
-    } else if (count > 2) {
+    } else if (visibleItemsCount.value > 2) {
         return 'tree-view-selection-large-sheet';
     } else {
-        return '';
+        return 'tree-view-selection-default-sheet';
     }
 });
 
@@ -110,6 +99,8 @@ function isPrimaryItemHasSecondaryValue(primaryItem: Record<string, unknown>): b
         return false;
     }
 
+    const lowerCaseFilterContent = filterContent.value?.toLowerCase() ?? '';
+
     for (let i = 0; i < subItems.length; i++) {
         const secondaryItem = subItems[i];
 
@@ -117,6 +108,14 @@ function isPrimaryItemHasSecondaryValue(primaryItem: Record<string, unknown>): b
             continue;
         }
 
+        if (props.primaryTitleField && lowerCaseFilterContent) {
+            const title = ti((secondaryItem as Record<string, unknown>)[props.primaryTitleField] as string, !!props.primaryTitleI18n);
+
+            if (title.toLowerCase().indexOf(lowerCaseFilterContent) >= 0) {
+                return true;
+            }
+        }
+
         if (props.secondaryValueField && (secondaryItem as Record<string, unknown>)[props.secondaryValueField] === currentValue.value) {
             return true;
         } else if (!props.secondaryValueField && secondaryItem === currentValue.value) {
@@ -127,21 +126,8 @@ function isPrimaryItemHasSecondaryValue(primaryItem: Record<string, unknown>): b
     return false;
 }
 
-function isSecondarySelected(subItem: unknown): boolean {
-    if (props.secondaryValueField) {
-        return currentValue.value === (subItem as Record<string, unknown>)[props.secondaryValueField];
-    } else {
-        return currentValue.value === subItem;
-    }
-}
-
 function onSecondaryItemClicked(subItem: unknown): void {
-    if (props.secondaryValueField) {
-        currentValue.value = (subItem as Record<string, unknown>)[props.secondaryValueField];
-    } else {
-        currentValue.value = subItem;
-    }
-
+    updateCurrentSecondaryValue(currentValue, subItem);
     emit('update:modelValue', currentValue.value);
     emit('update:show', false);
 }
@@ -153,17 +139,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) {
+    .tree-view-selection-default-sheet {
+        height: 200px;
+    }
+
     .tree-view-selection-large-sheet {
-        height: 310px;
+        height: 250px;
     }
 
     .tree-view-selection-huge-sheet {
-        height: 400px;
+        height: 340px;
     }
 }
 </style>