ref #6104 vnSelectFilter added

src/components/common/VnLog.vue

@@ -13,6 +13,7 @@ import VnAvatar from '../ui/VnAvatar.vue';
 import VnJsonValue from '../common/VnJsonValue.vue';
 import FetchData from '../FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnSelectFilter from './VnSelectFilter.vue';
 
 const stateStore = useStateStore();
 const validationsStore = useValidator();
@@ -120,7 +121,6 @@ const validDate = new RegExp(
         /T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(.[0-9]+)?(Z)?$/.source
 );
 
-const filteredActions = ref([]);
 const filteredWorkers = ref([]);
 
 function castJsonValue(value) {
@@ -361,40 +361,13 @@ async function clearFilter() {
     changeInput.value = undefined;
     dateFrom.value = undefined;
     dateTo.value = undefined;
+    userRadio.value = undefined;
     Object.keys(checkboxOptions.value).forEach(
         (opt) => (checkboxOptions.value[opt].selected = false)
     );
     await applyFilter();
 }
 
-function filterFn(val, update, abortFn, type) {
-    if (!val) {
-        update(() => {
-            if (type === 'actions') filteredActions.value = actions.value;
-            if (type === 'workers') filteredWorkers.value = workers.value;
-        });
-        return;
-    }
-
-    update(() => {
-        const needle = val.toLowerCase();
-        if (type === 'actions')
-            filteredActions.value = actions.value.filter((item) =>
-                validations[item].locale.name.includes(needle)
-            );
-        if (type === 'workers') {
-            if (isNaN(needle))
-                filteredWorkers.value = workers.value.filter(
-                    (item) =>
-                        item.name.toLowerCase().includes(needle) ||
-                        item.nickname.toLowerCase().includes(needle)
-                );
-            else
-                filteredWorkers.value = workers.value.filter((item) => item.id == needle);
-        }
-    });
-}
-
 setLogTree();
 </script>
 <template>
@@ -411,7 +384,15 @@ setLogTree();
     <FetchData
         :url="`${props.model}Logs/${route.params.id}/models`"
         :filter="{ order: ['changedModel'] }"
-        @on-fetch="(data) => (actions = data.map((item) => item.changedModel))"
+        @on-fetch="
+            (data) =>
+                (actions = data.map((item) => {
+                    return {
+                        locale: useFirstUpper(validations[item.changedModel].locale.name),
+                        value: item.changedModel,
+                    };
+                }))
+        "
         auto-load
     />
     <div
@@ -669,31 +650,16 @@ setLogTree();
                         </template>
                     </QInput>
                 </QItem>
-                <QItem class="q-mt-sm">
+                <QItem>
-                    <QSelect
+                    <VnSelectFilter
                         class="full-width"
-                        v-model="selectedFilters.changedModel"
-                        @update:model-value="selectFilter('action')"
-                        :options="filteredActions"
                         :label="t('globals.entity')"
-                        use-input
+                        v-model="selectedFilters.changedModel"
-                        clearable
+                        option-label="locale"
-                        clear-icon="close"
+                        :options="actions"
-                        @filter="
+                        @update:model-value="selectFilter('action')"
-                            (val, update, abortFn) =>
-                                filterFn(val, update, abortFn, 'actions')
-                        "
                         @clear="() => selectFilter('action')"
-                    >
+                    />
-                        <template #option="{ opt, index, itemProps }">
-                            <QItem :index="index" v-bind="itemProps">
-                                {{ useFirstUpper(validations[opt].locale.name) }}
-                            </QItem>
-                        </template>
-                        <template #selected-item="{ opt }">
-                            {{ useFirstUpper(validations[opt].locale.name) }}
-                        </template>
-                    </QSelect>
                 </QItem>
                 <QItem class="q-mt-sm">
                     <QOptionGroup
@@ -713,23 +679,15 @@ setLogTree();
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
-                    <QItemSection v-if="workers">
+                    <QItemSection v-if="workers && userRadio !== null">
-                        <QSelect
+                        <VnSelectFilter
+                            class="full-width"
                             :label="t('globals.user')"
                             v-model="userSelect"
-                            @update:model-value="selectFilter('userSelect')"
-                            :options="filteredWorkers"
-                            option-value="id"
                             option-label="name"
-                            emit-value
+                            option-value="id"
-                            map-options
+                            :options="workers"
-                            use-input
+                            @update:model-value="selectFilter('userSelect')"
-                            clearable
-                            clear-icon="close"
-                            @filter="
-                                (val, update, abortFn) =>
-                                    filterFn(val, update, abortFn, 'workers')
-                            "
                         >
                             <template #option="{ opt, itemProps }">
                                 <QItem
@@ -745,7 +703,7 @@ setLogTree();
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </QSelect>
+                        </VnSelectFilter>
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mt-sm">

src/components/common/VnSelectFilter.vue

@@ -83,11 +83,10 @@ const value = computed({
         @filter="filterHandler"
         hide-selected
         fill-input
+        clearable
+        clear-icon="close"
         ref="vnSelectRef"
     >
-        <template #append>
-            <QIcon name="close" @click.stop="value = null" class="cursor-pointer" />
-        </template>
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData">
             <slot :name="slotName" v-bind="slotData" />
         </template>

test/cypress/integration/vnLog.spec.js

@@ -16,6 +16,8 @@ describe('VnLog', () => {
     it('should filter by entity', () => {
         cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).click();
         cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).type('cla');
-        cy.get('[role="listbox"] .q-item').should('have.text', 'Claim');
+        cy.get('.q-virtual-scroll__content .q-item').eq(0).click();
+        cy.get('.q-page').click();
+        cy.get('.model-info .q-chip__content').eq(0).should('have.text', 'Claim');
     });
 });