feat: refs #8224 exclude filter

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>

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 });

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(

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">

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>

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,17 +680,14 @@ 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>
                     </VnRow>
                     <VnRow>
-                        <div class="col">
                         <VnSelect
                             url="Warehouses"
                             :sort-by="['name']"
@@ -675,10 +698,8 @@ function setReference(data) {
                             required
                             @update:model-value="() => fetchAvailableAgencies(data)"
                         />
-                        </div>
                     </VnRow>
                     <VnRow>
-                        <div class="col">
                         <VnSelect
                             :label="t('globals.agency')"
                             v-model="data.agencyModeId"
@@ -687,7 +708,6 @@ function setReference(data) {
                             option-label="agencyMode"
                             hide-selected
                         />
-                        </div>
                     </VnRow>
                 </template>
             </VnTable>