feat: refs #8115 add new filter options

src/pages/Shelving/Parking/ParkingFilter.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref} from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
 import VnInput from 'components/common/VnInput.vue';
@@ -16,6 +16,11 @@ defineProps({
 
 const sectors = ref([]);
 const emit = defineEmits(['search']);
+
+const updateParams = () => {
+    emit('search');
+};
+
 </script>
 
 <template>
@@ -26,7 +31,11 @@ const emit = defineEmits(['search']);
         @on-fetch="(data) => (sectors = data)"
         auto-load
     />
-    <VnFilterPanel :data-key="dataKey" :search-button="true" @search="emit('search')">
+    <VnFilterPanel 
+        :data-key="dataKey" 
+        :search-button="true" 
+        @search="updateParams"
+    >
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>
@@ -36,9 +45,56 @@ const emit = defineEmits(['search']);
         <template #body="{ params }">
             <QItem>
                 <QItemSection>
-                    <VnInput :label="t('params.code')" v-model="params.code" filled />
+                    <VnInput 
+                        :label="t('params.block')"
+                        v-model="params.block"
+                        filled 
+                    />
                 </QItemSection>
             </QItem>
+
+            <QItem>
+                <QItemSection>
+                    <div class="row q-gutter-sm">
+                        <VnInput
+                            :label="t('params.streetFrom')"
+                            v-model.number="params.streetFrom"
+                            type="number"
+                            filled
+                            class="col"
+                        />
+                        <VnInput
+                            :label="t('params.streetTo')"
+                            v-model.number="params.streetTo"
+                            type="number"
+                            filled
+                            class="col"
+                        />
+                    </div>
+                </QItemSection>
+            </QItem>
+            
+            <QItem>
+                <QItemSection>
+                    <div class="row q-gutter-sm">
+                        <VnInput
+                            :label="t('params.numberFrom')"
+                            v-model="params.numberFrom"
+                            type="number"
+                            filled
+                            class="col"
+                        />
+                        <VnInput
+                            :label="t('params.numberTo')"
+                            v-model="params.numberTo"
+                            type="number"
+                            filled
+                            class="col"
+                        />
+                    </div>
+                </QItemSection>
+            </QItem>
+            
             <QItem>
                 <QItemSection>
                     <VnSelect
@@ -64,9 +120,19 @@ en:
         code: Code
         sectorFk: Sector
         search: General Search
+        block: Block
+        streetFrom: Street (From)
+        streetTo: Street (To)
+        numberFrom: Number (From)
+        numeroTo: Number (To)
 es:
     params:
         code: Código
         search: Búsqueda general
-
+        sectorFk: Sector
-</i18n>
+        block: Bloque
+        streetFrom: Calle (Desde)
+        streetTo: Calle (Hasta)
+        numberFrom: Número (Desde)
+        numberTo: Número (Hasta)
+</i18n>

src/pages/Shelving/Parking/ParkingList.vue

@@ -24,10 +24,6 @@ const hasSelectedCards = computed(() => selectedRows.value.length > 0);
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
 
-const filter = {
-    fields: ['id', 'sectorFk', 'code', 'pickingOrder'],
-};
-
 const columns = computed(() => [
     {
         align: 'left',
@@ -42,7 +38,7 @@ const columns = computed(() => [
         align: 'left',
         name: 'sector',
         label: t('parking.sector'),
-        format: (val) => val.sector.description ?? '',
+        format: (val) => val.sector_description ?? '',
         sortable: true,
         cardVisible: true,
     },
@@ -79,10 +75,10 @@ function openPdf(id) {
 }
 
 function downloadPdf() {
-    if (selectedRows.value.size === 0) return;
+    if (selectedRows.value.length === 0) return;
-    const selectedCardsArray = Array.from(selectedRows.value.values());
+    const selectedCardsArray = selectedRows.value;
 
-    if (selectedRows.value.size === 1) {
+    if (selectedRows.value.length === 1) {
         const [parking] = selectedCardsArray;
         openPdf(parking.id);
     } else {
@@ -102,46 +98,38 @@ function downloadPdf() {
     <VnSection
         :data-key="dataKey"
         prefix="parking"
+        :columns="columns"
         :array-data-props="{
-            url: 'Parkings',
+            url: 'Parkings/filter',
             order: ['code'],
-            userFilter: filter,
-            exprBuilder,
         }"
     >
         <template #advanced-menu>
             <ParkingFilter data-key="ParkingList" />
         </template>
         <template #body>
+                    <QBtn
+                        color="primary"
+                        icon-right="cloud_download"
+                        @click="downloadPdf()"
+                        :disable="!hasSelectedCards"
+                        data-cy="ParkingDownloadPdfBtn"
+                    >
+                        <QTooltip>{{ t('globals.downloadPdf') }}</QTooltip>
+                    </QBtn>
             <VnTable
                 ref="tableRef"
                 :data-key="dataKey"
                 :columns="columns"
                 is-editable="false"
                 :right-search="false"
-                :use-model="true"
                 redirect="shelving/parking"
-                default-mode="table"
                 v-model:selected="selectedRows"
                 :table="{
                     'row-key': 'id',
                     selection: 'multiple',
                 }"
             >
-                <template #actions="{ row }">
-                    <QBtn
-                        :label="t('components.smartCard.openSummary')"
-                        @click.stop="viewSummary(row.id, ParkingSummary)"
-                        color="primary"
-                    />
-                    <QBtn
-                        :label="t('globals.downloadPdf')"
-                        @click.stop="openPdf(row.id)"
-                        color="primary"
-                        class="q-ml-sm"
-                        icon-right="cloud_download"
-                    />
-                </template>
             </VnTable>
         </template>
     </VnSection>