refs #5673 feat: create VnSelectFilter

src/components/common/VnSelectFilter.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { ref, watch, toRefs } from 'vue';
+const emit = defineEmits(['update:modelValue', 'update:options']);
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number],
+        default: null,
+    },
+    options: {
+        type: Array,
+        default: () => [],
+    },
+    optionLabel: {
+        type: String,
+        default: '',
+    },
+});
+
+const updateValue = (newValue) => emit('update:modelValue', newValue);
+const updateOptions = (newValue) => emit('update:options', newValue);
+const { modelValue } = toRefs($props);
+
+function filterFn(val, update) {
+    update(
+        () => {
+            const needle = val.toLowerCase();
+            console.log($props.options);
+            // $props.options.value = options.value.filter(
+            //     (v) => v[$props.optionLabel.value].toLowerCase().indexOf(needle) > -1
+            // );
+            updateOptions(
+                $props.options.filter(
+                    (v) => v[$props.optionLabel].toLowerCase().indexOf(needle) > -1
+                )
+            );
+        },
+        (ref) => {
+            ref.setOptionIndex(-1);
+            ref.moveOptionSelection(1, true);
+        }
+    );
+}
+</script>
+
+<template>
+    <QSelect
+        v-model="modelValue"
+        @update:model-value="updateValue"
+        :options="options"
+        :option-label="optionLabel"
+        v-bind="$attrs"
+        emit-value
+        map-options
+        use-input
+        @filter="(value, update) => filterFn(value, update)"
+    />
+</template>

src/pages/Claim/Card/ClaimCard.vue

@@ -64,6 +64,7 @@ onMounted(async () => {
         </QScrollArea>
     </QDrawer>
     <QPageContainer>
+        <div id="sub-toolbar"></div>
         <QPage class="q-pa-md">
             <RouterView></RouterView>
         </QPage>

src/pages/Claim/Card/ClaimDevelopment.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import FormModel from 'components/FormModel.vue';
 import FetchData from 'components/FetchData.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -87,66 +88,6 @@ const columns = computed(() => [
         optionLabel: 'description',
     },
 ]);
-
-// function filterFn(val, update) {
-//     if (val === '') {
-//         update(() => {
-//             options.value = stringOptions;
-//         });
-//         return;
-//     }
-
-//     update(() => {
-//         const needle = val.toLowerCase();
-//         options.value = stringOptions.filter((v) => v.toLowerCase().indexOf(needle) > -1);
-//     });
-// }
-
-// const basicFilter = () => {
-//     return {
-//         options: claimReasons,
-//         filterFn: (options, value) => {
-//             console.log('ENTRY', value);
-//             const search = value.toLowerCase();
-//             if (value === '') return claimReasons.value;
-
-//             const arr = options.value.filter((row) => {
-//                 const id = row.id;
-//                 const name = row.description.toLowerCase();
-//                 console.log('SEARCH', search, id);
-//                 const idMatches = id == search;
-//                 const nameMatches = name.indexOf(search) > -1;
-//                 return idMatches || nameMatches;
-//             });
-//             console.log(arr);
-//             return arr;
-//         },
-//     };
-// };
-
-const basicFilter = (options, field) => {
-    console.log(options, field);
-    return {
-        options,
-        field,
-        filterFn: (options, value, field) => {
-            const search = value.toLowerCase();
-
-            if (value === '') return options;
-
-            return options.value.filter((row) => {
-                console.log(row);
-                const id = row.id;
-                const name = row[field ?? 'name'].toLowerCase();
-
-                const idMatches = id == search;
-                const nameMatches = name.indexOf(search) > -1;
-
-                return idMatches || nameMatches;
-            });
-        },
-    };
-};
 </script>
 <template>
     <FetchData
@@ -189,7 +130,7 @@ const basicFilter = (options, field) => {
                 ref="claimDevelopmentForm"
                 :data-required="{ claimFk: route.params.id }"
             >
-                <template #form="{ data, filter }">
+                <template #form="{ data }">
                     <QTable
                         :columns="columns"
                         :rows="data"
@@ -202,23 +143,12 @@ const basicFilter = (options, field) => {
                     >
                         <template #body-cell="{ row, col }">
                             <QTd auto-width>
-                                <QSelect
+                                <VnSelectFilter
                                     :label="col.label"
                                     v-model="row[col.model]"
                                     :options="col.options"
                                     :option-value="col.optionValue"
                                     :option-label="col.optionLabel"
-                                    emit-value
-                                    map-options
-                                    use-input
-                                    @filter="
-                                        (value, update) =>
-                                            filter(
-                                                value,
-                                                update,
-                                                basicFilter(col.options, col.optionLabel)
-                                            )
-                                    "
                                 />
                             </QTd>
                         </template>
@@ -232,27 +162,13 @@ const basicFilter = (options, field) => {
                                     <QList dense>
                                         <QItem v-for="col in props.cols" :key="col.name">
                                             <QItemSection>
-                                                <QSelect
+                                                <VnSelectFilter
                                                     :label="col.label"
                                                     v-model="props.row[col.model]"
                                                     :options="col.options"
                                                     :option-value="col.optionValue"
                                                     :option-label="col.optionLabel"
-                                                    emit-value
-                                                    map-options
-                                                    use-input
                                                     dense
-                                                    @filter="
-                                                        (value, update) =>
-                                                            filter(
-                                                                value,
-                                                                update,
-                                                                basicFilter(
-                                                                    col.options,
-                                                                    col.optionLabel
-                                                                )
-                                                            )
-                                                    "
                                                 />
                                             </QItemSection>
                                         </QItem>
@@ -265,14 +181,17 @@ const basicFilter = (options, field) => {
             </FormModel>
         </div>
     </div>
-    <QPageSticky position="bottom-right" :offset="[25, 100]">
+    <Teleport to="#sub-toolbar">
+        <QToolbar class="bg-dark text-white justify-end">
+            <div class="row q-gutter-x-sm">
                 <QBtn
-            fab
                     color="primary"
                     icon="delete"
                     @click="claimDevelopmentForm.remove(selected)"
                 />
-    </QPageSticky>
+            </div>
+        </QToolbar>
+    </Teleport>
     <QPageSticky position="bottom-right" :offset="[25, 25]">
         <QBtn fab color="primary" icon="add" @click="claimDevelopmentForm.insert()" />
     </QPageSticky>