feat: refs #8224 exclude filter

2025-04-23 13:39:33 +02:00 · 2025-04-23 13:39:33 +02:00 · 4ad9a3e613
parent e8ba5761cc
commit 4ad9a3e613
6 changed files with 167 additions and 63 deletions
--- a/src/components/VnTable/VnContextMenu.vue
+++ b/src/components/VnTable/VnContextMenu.vue
@ -9,18 +9,18 @@ const colField = ref();
 let colValue = '';
 let textValue = '';

+defineExpose({ handler });
+
 const arrayData = defineModel({
    type: Array,
 });

-defineExpose({
-    handler,
-});
-
 function handler(event) {
+    const clickedElement = event.target.closest('td');
+    if (!clickedElement) return;
+
    target.value = event.target;
    qmenuRef.value.show();
-    const clickedElement = event.target.closest('td');
    colField.value = clickedElement.getAttribute('data-col-field');
    colValue = isNaN(+clickedElement.getAttribute('data-col-value'))
        ? clickedElement.getAttribute('data-col-value')
@ -45,22 +45,22 @@ function getDeepestText(node) {
    return lastText;
 }

-function selectionFilter() {
-    arrayData.value.addFilter({ params: { [colField.value]: colValue } });
+async function selectionFilter() {
+    await arrayData.value.addFilter({ params: { [colField.value]: colValue } });
 }

-function selectionExclude() {
-    arrayData.value.addFilter({
-        params: { [colField.value]: { neq: +colValue } },
+async function selectionExclude() {
+    await arrayData.value.addFilter({
+        params: { [colField.value]: { neq: colValue } },
    });
 }

-function selectionRemoveFilter() {
-    arrayData.value.addFilter({ params: { [colField.value]: undefined } });
+async function selectionRemoveFilter() {
+    await arrayData.value.addFilter({ params: { [colField.value]: undefined } });
 }

-function removeAllFilters() {
-    arrayData.value.applyFilter({ params: {} });
+async function removeAllFilters() {
+    await arrayData.value.applyFilter({ params: {} });
 }

 function copyValue() {
@ -72,12 +72,42 @@ function copyValue() {
 }
 </script>
 <template>
-    <QMenu ref="qmenuRef" :target class="column q-pa-sm" auto-close>
-        <QBtn flat @click="selectionFilter()">{{ $t('Filter by selection') }}</QBtn>
-        <!-- <QBtn flat @click="selectionExclude()">{{ $t('* Exclude selection') }}</QBtn> -->
-        <QBtn flat @click="selectionRemoveFilter()">{{ $t('Remove filter') }}</QBtn>
-        <QBtn flat @click="removeAllFilters()">{{ $t('Remove all filters') }}</QBtn>
-        <QBtn flat @click="copyValue()">{{ $t('Copy value') }}</QBtn>
+    <QMenu ref="qmenuRef" :target class="column q-pa-sm" auto-close no-parent-event>
+        <QBtn
+            flat
+            icon="filter_list"
+            @click="selectionFilter()"
+            align="left"
+            :label="$t('Filter by selection')"
+        />
+        <QBtn
+            flat
+            icon="dangerous"
+            @click="selectionExclude()"
+            align="left"
+            :label="$t('Exclude selection')"
+        />
+        <QBtn
+            flat
+            icon="filter_list_off"
+            @click="selectionRemoveFilter()"
+            align="left"
+            :label="$t('Remove filter')"
+        />
+        <QBtn
+            flat
+            icon="filter_list_off"
+            @click="removeAllFilters()"
+            align="left"
+            :label="$t('Remove all filters')"
+        />
+        <QBtn
+            flat
+            icon="file_copy"
+            @click="copyValue()"
+            align="left"
+            :label="$t('Copy value')"
+        />
    </QMenu>
 </template>
 <i18n>
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@ -136,6 +136,9 @@ async function addFilter(value, name) {
    value = value === '' ? undefined : value;
    let field = columnFilter.value?.name ?? $props.column.name ?? name;

+    delete arrayData.store?.userParams?.[field];
+    delete arrayData.store?.filter?.where?.[field];
+
    if (columnFilter.value?.inWhere) {
        if (columnFilter.value.alias) field = columnFilter.value.alias + '.' + field;
        return await arrayData.addFilterWhere({ [field]: value });
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@ -210,11 +210,11 @@ onBeforeMount(() => {
 });

 onMounted(async () => {
+    if ($props.isEditable) document.addEventListener('click', clickHandler);
    document.addEventListener('contextmenu', (event) => {
        event.preventDefault();
        contextMenuRef.value.handler(event);
    });
-    if ($props.isEditable) document.addEventListener('click', clickHandler);
    mode.value =
        quasar.platform.is.mobile && !$props.disableOption?.card
            ? CARD_MODE
@ -238,6 +238,7 @@ onMounted(async () => {

 onUnmounted(async () => {
    if ($props.isEditable) document.removeEventListener('click', clickHandler);
+    document.removeEventListener('contextmenu', {});
 });

 watch(
--- a/src/components/VnTable/VnTableFilter.vue
+++ b/src/components/VnTable/VnTableFilter.vue
@ -77,7 +77,12 @@ function columnName(col) {
        <template #tags="{ tag, formatFn, getLocale }">
            <div class="q-gutter-x-xs">
                <strong>{{ getLocale(`${tag.label}`) }}: </strong>
-                <span>{{ formatFn(tag.value) }}</span>
+                <span
+                    :class="{
+                        'text-decoration-line-through': typeof chip === 'object',
+                    }"
+                    >{{ formatFn(tag) }}</span
+                >
            </div>
        </template>
        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@ -124,6 +124,7 @@ const {
 } = toRefs($props);
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
+const myOptionsMap = ref(new Map());
 const vnSelectRef = ref();
 const lastVal = ref();
 const noOneText = t('globals.noOne');
@ -140,7 +141,7 @@ const styleAttrs = computed(() => {
          }
        : {};
 });
-const isLoading = ref(false);
+const hasFocus = ref(false);
 const useURL = computed(() => $props.url);
 const value = computed({
    get() {
@ -166,6 +167,10 @@ const computedSortBy = computed(() => {
    return $props.sortBy || $props.optionLabel + ' ASC';
 });

+const valueIsObject = computed(() => {
+    return modelValue.value && typeof modelValue.value == 'object';
+});
+
 const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);

 watch(options, (newValue) => {
@ -173,12 +178,22 @@ watch(options, (newValue) => {
 });

 watch(modelValue, async (newValue) => {
+    if (newValue?.neq) newValue = newValue.neq;
    if (!myOptions?.value?.some((option) => option[optionValue.value] == newValue))
        await fetchFilter(newValue);

    if ($props.noOne) myOptions.value.unshift(noOneOpt.value);
 });

+watch(
+    () => myOptionsOriginal.value,
+    (newValue) => {
+        for (const item of newValue) {
+            myOptionsMap.value.set(item[optionValue.value], item);
+        }
+    },
+);
+
 onMounted(() => {
    setOptions(options.value);
    if (useURL.value && $props.modelValue && !findKeyInOptions())
@ -186,7 +201,7 @@ onMounted(() => {
    if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
 });

-const someIsLoading = computed(() => isLoading.value || !!arrayData?.isLoading?.value);
+const isLoading = computed(() => !!arrayData?.isLoading?.value);
 function findKeyInOptions() {
    if (!$props.options) return;
    return filter($props.modelValue, $props.options)?.length;
@ -222,6 +237,9 @@ function filter(val, options) {

 async function fetchFilter(val) {
    if (!$props.url) return;
+    if (val && typeof val == 'object') {
+        val = val.neq;
+    }

    const { fields, include, limit } = $props;
    const sortBy = computedSortBy.value;
@ -296,13 +314,11 @@ async function onScroll({ to, direction, from, index }) {
    if (from === 0 && index === 0) return;
    if (!useURL.value && !$props.fetchRef) return;
    if (direction === 'decrease') return;
-    if (to === lastIndex && arrayData.store.hasMoreData && !isLoading.value) {
-        isLoading.value = true;
+    if (to === lastIndex && arrayData.store.hasMoreData) {
        await arrayData.loadMore();
        setOptions(arrayData.store.data);
        vnSelectRef.value.scrollTo(lastIndex);
        await nextTick();
-        isLoading.value = false;
    }
 }

@ -345,10 +361,20 @@ function getCaption(opt) {
    if (optionCaption.value === false) return;
    return opt[optionCaption.value] || opt[optionValue.value];
 }
+
+function getOptionLabel(property) {
+    if (!myOptionsMap.value.size) return;
+    let value = modelValue.value;
+    if (property) {
+        value = modelValue.value[property];
+    }
+    return myOptionsMap.value.get(value)?.[optionLabel.value];
+}
 </script>

 <template>
    <QSelect
+        ref="vnSelectRef"
        v-model="value"
        :options="myOptions"
        :option-label="optionLabel"
@ -357,22 +383,27 @@ function getCaption(opt) {
        @filter="filterHandler"
        :emit-value="nullishToTrue($attrs['emit-value'])"
        :map-options="nullishToTrue($attrs['map-options'])"
-        :use-input="nullishToTrue($attrs['use-input'])"
-        :hide-selected="nullishToTrue($attrs['hide-selected'])"
-        :fill-input="nullishToTrue($attrs['fill-input'])"
-        ref="vnSelectRef"
+        :use-input="hasFocus || !value"
+        :hide-selected="hasFocus"
+        :fill-input="false"
        lazy-rules
        :class="{ required: isRequired }"
        :rules="mixinRules"
        virtual-scroll-slice-size="options.length"
        hide-bottom-space
        :input-debounce="useURL ? '300' : '0'"
-        :loading="someIsLoading"
-        :disable="someIsLoading"
+        :loading="isLoading"
        @virtual-scroll="onScroll"
        @keydown="handleKeyDown"
        :data-cy="$attrs.dataCy ?? $attrs.label + '_select'"
        :data-url="url"
+        @focus="
+            async () => {
+                hasFocus = true;
+            }
+        "
+        @blur="() => (hasFocus = false)"
+        @update:model-value="vnSelectRef.blur()"
    >
        <template #append>
            <QIcon
@ -381,6 +412,7 @@ function getCaption(opt) {
                @click="
                    () => {
                        value = null;
+                        vnSelectRef.blur();
                        emit('remove');
                    }
                "
@ -422,6 +454,11 @@ function getCaption(opt) {
                </QItemSection>
            </QItem>
        </template>
+        <template #selected-item="scope" v-if="valueIsObject">
+            <span class="nowrap" @click="vnSelectRef.showPopup()">
+                <s class="nowrap" v-if="scope?.opt.neq" v-text="getOptionLabel('neq')" />
+            </span>
+        </template>
    </QSelect>
 </template>

@ -429,4 +466,12 @@ function getCaption(opt) {
 .q-field--outlined {
    max-width: 100%;
 }
+.q-field__native {
+    @extend .nowrap;
+}
+
+.nowrap {
+    display: flex;
+    flex-wrap: nowrap !important;
+}
 </style>
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@ -460,6 +460,32 @@ function setReference(data) {

    dialogData.value.value.description = newDescription;
 }
+
+function exprBuilder(param, value) {
+    switch (param) {
+        case 'stateFk':
+            return { 'ts.stateFk': value };
+        case 'provinceFk':
+            return { 'a.provinceFk': value };
+        case 'hour':
+            return { 'z.hour': value };
+        case 'shipped':
+            return {
+                't.shipped': {
+                    between: this.dateRange(value),
+                },
+            };
+        case 'departmentFk':
+            return { 'c.departmentFk': value };
+        case 'id':
+        case 'refFk':
+        case 'zoneFk':
+        case 'nickname':
+        case 'agencyModeFk':
+        case 'warehouseFk':
+            return { [`t.${param}`]: value };
+    }
+}
 </script>

 <template>
@ -654,40 +680,34 @@ function setReference(data) {
                        </VnSelect>
                    </VnRow>
                    <VnRow>
-                        <div class="col">
-                            <VnInputDate
-                                placeholder="dd-mm-aaa"
-                                :label="t('globals.landed')"
-                                v-model="data.landed"
-                                @update:model-value="() => fetchAvailableAgencies(data)"
-                            />
-                        </div>
+                        <VnInputDate
+                            placeholder="dd-mm-aaa"
+                            :label="t('globals.landed')"
+                            v-model="data.landed"
+                            @update:model-value="() => fetchAvailableAgencies(data)"
+                        />
                    </VnRow>
                    <VnRow>
-                        <div class="col">
-                            <VnSelect
-                                url="Warehouses"
-                                :sort-by="['name']"
-                                :label="t('globals.warehouse')"
-                                v-model="data.warehouseId"
-                                :options="warehousesOptions"
-                                hide-selected
-                                required
-                                @update:model-value="() => fetchAvailableAgencies(data)"
-                            />
-                        </div>
+                        <VnSelect
+                            url="Warehouses"
+                            :sort-by="['name']"
+                            :label="t('globals.warehouse')"
+                            v-model="data.warehouseId"
+                            :options="warehousesOptions"
+                            hide-selected
+                            required
+                            @update:model-value="() => fetchAvailableAgencies(data)"
+                        />
                    </VnRow>
                    <VnRow>
-                        <div class="col">
-                            <VnSelect
-                                :label="t('globals.agency')"
-                                v-model="data.agencyModeId"
-                                :options="agenciesOptions"
-                                option-value="agencyModeFk"
-                                option-label="agencyMode"
-                                hide-selected
-                            />
-                        </div>
+                        <VnSelect
+                            :label="t('globals.agency')"
+                            v-model="data.agencyModeId"
+                            :options="agenciesOptions"
+                            option-value="agencyModeFk"
+                            option-label="agencyMode"
+                            hide-selected
+                        />
                    </VnRow>
                </template>
            </VnTable>