src/pages/Zone/Card/ZoneEventExclusionForm.vue

@@ -95,7 +95,6 @@ const onSubmit = async () => {
 const deleteEvent = async () => {
     try {
         if (!props.event) return;
-        console.log('props.event: ', props.event);
         await axios.delete(`Zones/${route.params.id}/exclusions`);
         await refetchEvents();
     } catch (err) {

src/pages/Zone/ZoneList.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import axios from 'axios';
 
 import { toCurrency } from 'src/filters';
@@ -9,18 +9,22 @@ import { toTimeFormat } from 'src/filters/date';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import useNotify from 'src/composables/useNotify.js';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { useStateStore } from 'stores/useStateStore';
 import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputTime from 'src/components/common/VnInputTime.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import ZoneFilterPanel from './ZoneFilterPanel.vue';
 
 const { t } = useI18n();
 const router = useRouter();
 const { notify } = useNotify();
 const { viewSummary } = useSummaryDialog();
 const { openConfirmationModal } = useVnConfirm();
+const stateStore = useStateStore();
 const tableRef = ref();
 const warehouseOptions = ref([]);
 
@@ -35,6 +39,17 @@ const tableFilter = {
     ],
 };
 
+function exprBuilder(param, value) {
+    switch (param) {
+        case 'search':
+            return /^\d+$/.test(value) ? { id: value } : { name: { like: `%${value}%` } };
+        case 'name':
+            return { [param]: { like: `%${value}%` } };
+        case 'agencyModeFk':
+            return { [param]: value };
+    }
+}
+
 const columns = computed(() => [
     {
         align: 'left',
@@ -48,22 +63,19 @@ const columns = computed(() => [
             inWhere: true,
         },
     },
+    //TODO: acabar filtro name porque muestra [object Object]
     {
         align: 'left',
         name: 'name',
         label: t('list.name'),
         isTitle: true,
         create: true,
-        columnFilter: {
-            inWhere: true,
-        },
     },
     {
         align: 'left',
         name: 'agencyModeFk',
         label: t('list.agency'),
         cardVisible: true,
-        create: true,
         columnFilter: {
             component: 'select',
             inWhere: true,
@@ -125,6 +137,9 @@ const handleClone = (id) => {
         () => clone(id)
     );
 };
+
+//TODO: la tabla no tiene en cuenta el menú de la izquierda, arreglar
+onMounted(() => (stateStore.rightDrawer = true));
 </script>
 
 <template>
@@ -132,12 +147,13 @@ const handleClone = (id) => {
         data-key="Zones"
         :label="t('Search zone')"
         :info="t('You can search zones by id or name')"
-        :where-filter="
-            (text) => {
-                return { name: { like: `%${text}%` } };
-            }
-        "
+        :expr-builder="exprBuilder"
     />
+    <RightMenu>
+        <template #right-panel>
+            <ZoneFilterPanel data-key="Zones" :expr-builder="exprBuilder" />
+        </template>
+    </RightMenu>
     <VnTable
         ref="tableRef"
         data-key="Zones"
@@ -145,16 +161,24 @@ const handleClone = (id) => {
         :create="{
             urlCreate: 'Zones',
             title: t('list.createZone'),
-            onDataSaved: ({ id }) => tableRef.redirect(id),
+            onDataSaved: ({ id }) => tableRef.redirect(`${id}/location`),
             formInitialData: {},
         }"
         :user-filter="tableFilter"
         :columns="columns"
-        default-mode="table"
         redirect="zone"
+        :right-search="false"
+        :expr-builder="exprBuilder"
         auto-load
     >
         <template #more-create-dialog="{ data }">
+            <VnSelect
+                url="AgencyModes"
+                v-model="data.agencyModeFk"
+                option-value="id"
+                option-label="name"
+                :label="t('list.agency')"
+            />
             <VnInput v-model="data.price" :label="t('list.price')" min="0" />
             <VnInput v-model="data.bonus" :label="t('list.bonus')" min="0" />
             <VnInput