fix: refs #8004 fix conflict

src/components/NavBar.vue

@@ -15,12 +15,10 @@ const quasar = useQuasar();
 const state = useState();
 const user = state.getUser();
 const appName = 'Lilium';
+const pinnedModulesRef = ref();
 
 onMounted(() => stateStore.setMounted());
-
-const pinnedModulesRef = ref();
 </script>
-
 <template>
     <QHeader color="white" elevated>
         <QToolbar class="q-py-sm q-px-md">
@@ -55,16 +53,6 @@ const pinnedModulesRef = ref();
             <QSpace />
             <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
                 <div id="actions-prepend"></div>
-                <QBtn
-                    flat
-                    v-if="!quasar.platform.is.mobile"
-                    @click="pinnedModulesRef.redirect($route.params.id)"
-                    icon="more_up"
-                >
-                    <QTooltip>
-                        {{ t('Go to Salix') }}
-                    </QTooltip>
-                </QBtn>
                 <QBtn
                     :class="{ 'q-pa-none': quasar.platform.is.mobile }"
                     id="pinnedModules"
@@ -96,7 +84,6 @@ const pinnedModulesRef = ref();
         <VnBreadcrumbs v-if="$q.screen.lt.md" class="q-ml-md" />
     </QHeader>
 </template>
-
 <style lang="scss" scoped>
 .searchbar {
     width: max-content;
@@ -105,9 +92,3 @@ const pinnedModulesRef = ref();
     background-color: var(--vn-section-color);
 }
 </style>
-<i18n>
-en:
-    Go to Salix: Go to Salix
-es:
-    Go to Salix: Ir a Salix
-</i18n>

src/components/VnTable/VnTable.vue

@@ -149,6 +149,7 @@ const tableModes = [
         disable: $props.disableOption?.card,
     },
 ];
+
 onBeforeMount(() => {
     setUserParams(route.query[$props.searchUrl]);
     hasParams.value = params.value && Object.keys(params.value).length !== 0;
@@ -453,7 +454,7 @@ function handleOnDataSaved(_) {
                 <template #header-cell="{ col }">
                     <QTh v-if="col.visible ?? true">
                         <div
-                            class="column self-start q-ml-xs ellipsis"
+                            class="column ellipsis"
                             :class="`text-${col?.align ?? 'left'}`"
                             :style="$props.columnSearch ? 'height: 75px' : ''"
                         >
@@ -495,7 +496,7 @@ function handleOnDataSaved(_) {
                     <!-- Columns -->
                     <QTd
                         auto-width
-                        class="no-margin q-px-xs"
+                        class="no-margin"
                         :class="[getColAlign(col), col.columnClass]"
                         :style="col.style"
                         v-if="col.visible ?? true"
@@ -629,13 +630,7 @@ function handleOnDataSaved(_) {
                                         :key="col.name"
                                         class="fields"
                                     >
-                                        <VnLv
-                                            :label="
-                                                !col.component && col.label
-                                                    ? `${col.label}:`
-                                                    : ''
-                                            "
-                                        >
+                                        <VnLv :label="col.label + ':'">
                                             <template #value>
                                                 <span
                                                     @click="stopEventPropagation($event)"
@@ -775,7 +770,7 @@ es:
 
 .grid-three {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(400px, max-content));
+    grid-template-columns: repeat(auto-fit, minmax(350px, max-content));
     max-width: 100%;
     grid-gap: 20px;
     margin: 0 auto;
@@ -823,21 +818,6 @@ es:
         top: 0;
         padding: 12px 0;
     }
-    tbody {
-        .q-checkbox {
-            display: flex;
-            margin-bottom: 9px;
-            & .q-checkbox__label {
-                margin-left: 31px;
-                color: var(--vn-text-color);
-            }
-            & .q-checkbox__inner {
-                position: absolute;
-                left: 0;
-                color: var(--vn-label-color);
-            }
-        }
-    }
     .sticky {
         position: sticky;
         right: 0;

src/components/common/RightMenu.vue

@@ -2,7 +2,11 @@
 import { ref, onMounted, useSlots } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
+import { useQuasar } from 'quasar';
 
+const { t } = useI18n();
+const quasar = useQuasar();
+const stateStore = useStateStore();
 const slots = useSlots();
 const hasContent = ref(false);
 const rightPanel = ref(null);
@@ -11,7 +15,6 @@ onMounted(() => {
     rightPanel.value = document.querySelector('#right-panel');
     if (!rightPanel.value) return;
 
-    // Check if there's content to display
     const observer = new MutationObserver(() => {
         hasContent.value = rightPanel.value.childNodes.length;
     });
@@ -21,12 +24,9 @@ onMounted(() => {
         childList: true,
         attributes: true,
     });
-
-    if (!slots['right-panel'] && !hasContent.value) stateStore.rightDrawer = false;
+    if ((!slots['right-panel'] && !hasContent.value) || quasar.platform.is.mobile)
+        stateStore.rightDrawer = false;
 });
-
-const { t } = useI18n();
-const stateStore = useStateStore();
 </script>
 <template>
     <Teleport to="#actions-append" v-if="stateStore.isHeaderMounted()">
@@ -45,7 +45,7 @@ const stateStore = useStateStore();
             </QBtn>
         </div>
     </Teleport>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256">
         <QScrollArea class="fit">
             <div id="right-panel"></div>
             <slot v-if="!hasContent" name="right-panel" />

src/components/common/VnInputDate.vue

@@ -107,7 +107,7 @@ const manageDate = (date) => {
             :class="{ required: $attrs.required }"
             :rules="mixinRules"
             :clearable="false"
-            @click="isPopupOpen = true"
+            @click="isPopupOpen = !isPopupOpen"
             hide-bottom-space
         >
             <template #append>
@@ -126,13 +126,6 @@ const manageDate = (date) => {
                         isPopupOpen = false;
                     "
                 />
-                <QIcon
-                    v-if="showEvent"
-                    name="event"
-                    class="cursor-pointer"
-                    @click="isPopupOpen = !isPopupOpen"
-                    :title="t('Open date')"
-                />
             </template>
             <QMenu
                 v-if="$q.screen.gt.xs"
@@ -152,15 +145,6 @@ const manageDate = (date) => {
         </QInput>
     </div>
 </template>
-<style lang="scss">
-.vn-input-date.q-field--standard.q-field--readonly .q-field__control:before {
-    border-bottom-style: solid;
-}
-
-.vn-input-date.q-field--outlined.q-field--readonly .q-field__control:before {
-    border-style: solid;
-}
-</style>
 <i18n>
     es:
         Open date: Abrir fecha

src/components/common/VnInputTime.vue

@@ -81,7 +81,7 @@ function dateToTime(newDate) {
             :class="{ required: $attrs.required }"
             style="min-width: 100px"
             :rules="mixinRules"
-            @click="isPopupOpen = false"
+            @click="isPopupOpen = !isPopupOpen"
             type="time"
             hide-bottom-space
         >
@@ -101,12 +101,6 @@ function dateToTime(newDate) {
                         isPopupOpen = false;
                     "
                 />
-                <QIcon
-                    name="Schedule"
-                    class="cursor-pointer"
-                    @click="isPopupOpen = !isPopupOpen"
-                    :title="t('Open time')"
-                />
             </template>
             <QMenu
                 v-if="$q.screen.gt.xs"

src/components/ui/CardSummary.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { ref, computed, watch, onBeforeMount } from 'vue';
+import { ref, computed, watch, onBeforeMount, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
 import { useArrayData } from 'src/composables/useArrayData';
+import { useStateStore } from 'src/stores/useStateStore';
 
 const props = defineProps({
     url: {
@@ -39,6 +39,7 @@ const { store } = arrayData;
 const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
 const isLoading = ref(false);
 
+const stateStore = useStateStore();
 defineExpose({
     entity,
     fetch,
@@ -50,6 +51,10 @@ onBeforeMount(async () => {
     watch(props, async () => await fetch());
 });
 
+onMounted(() => {
+    stateStore.rightDrawerChangeValue(false);
+    console.log('useStateStore: ', useStateStore.rightMenu);
+});
 async function fetch() {
     store.url = props.url;
     store.filter = props.filter ?? {};
@@ -75,7 +80,6 @@ function existSummary(routes) {
     }
 }
 </script>
-
 <template>
     <div class="summary container">
         <QCard class="cardSummary">
@@ -96,7 +100,7 @@ function existSummary(routes) {
                         <span v-else></span>
                     </slot>
                     <slot name="header" :entity="entity" dense>
-                        <VnLv :label="`${entity.id} -`" :value="entity.name" />
+                        {{ entity.id + ' - ' + entity.name }}
                     </slot>
                     <slot name="header-right">
                         <span></span>
@@ -109,7 +113,6 @@ function existSummary(routes) {
         </QCard>
     </div>
 </template>
-
 <style lang="scss">
 .summary.container {
     display: flex;

src/components/ui/VnLv.vue

@@ -39,7 +39,7 @@ const val = computed(() => $props.value);
         <template v-else>
             <div v-if="label || $slots.label" class="label">
                 <slot name="label">
-                    <span>{{ label }}</span>
+                    <span style="color: var(--vn-label-color)">{{ label }}</span>
                 </slot>
             </div>
             <div class="value">

src/css/app.scss

@@ -240,7 +240,7 @@ input::-webkit-inner-spin-button {
 .q-table {
     th,
     td {
-        padding: 1px 10px 1px 10px;
+        padding: 1px 3px 1px 3px;
         max-width: 100px;
         div span {
             overflow: hidden;
@@ -288,3 +288,20 @@ input::-webkit-inner-spin-button {
         color: $info;
     }
 }
+.q-field__inner {
+    .q-field__control {
+        min-height: auto !important;
+        display: flex;
+        align-items: flex-end;
+        padding-bottom: 2px;
+        .q-field__native.row {
+            min-height: auto !important;
+        }
+    }
+}
+
+.q-date__header-today {
+    border-radius: 12px;
+    border: 1px solid;
+    box-shadow: 0 4px 6px #00000000;
+}

src/i18n/locale/en.yml

@@ -118,7 +118,7 @@ globals:
         workCenters: Work centers
         modes: Modes
         zones: Zones
-        zonesList: Zones
+        zonesList: List
         deliveryDays: Delivery days
         upcomingDeliveries: Upcoming deliveries
         role: Role

src/i18n/locale/es.yml

@@ -120,7 +120,7 @@ globals:
         workCenters: Centros de trabajo
         modes: Modos
         zones: Zonas
-        zonesList: Zonas
+        zonesList: Listado
         deliveryDays: Días de entrega
         upcomingDeliveries: Próximos repartos
         role: Role

src/pages/Claim/ClaimList.vue

@@ -104,6 +104,7 @@ const columns = computed(() => [
                 title: t('components.smartCard.viewSummary'),
                 icon: 'preview',
                 action: (row) => viewSummary(row.id, ClaimSummary),
+                isPrimary: true,
             },
         ],
     },
@@ -134,7 +135,6 @@ const STATE_COLOR = {
         :columns="columns"
         redirect="claim"
         :right-search="false"
-        auto-load
     >
         <template #column-clientFk="{ row }">
             <span class="link" @click.stop>

src/pages/Customer/CustomerList.vue

@@ -2,22 +2,21 @@
 import { ref, computed, markRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { toDate } from 'src/filters';
+
+import RightMenu from 'src/components/common/RightMenu.vue';
+import CustomerSummary from './Card/CustomerSummary.vue';
+import CustomerFilter from './CustomerFilter.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import CustomerSummary from './Card/CustomerSummary.vue';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import RightMenu from 'src/components/common/RightMenu.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
-import { toDate } from 'src/filters';
-import CustomerFilter from './CustomerFilter.vue';
 
 const { t } = useI18n();
 const router = useRouter();
-
 const tableRef = ref();
-
 const columns = computed(() => [
     {
         align: 'left',
@@ -406,6 +405,7 @@ function handleLocation(data, location) {
         ref="tableRef"
         data-key="Customer"
         url="Clients/filter"
+        order="id DESC"
         :create="{
             urlCreate: 'Clients/createWithUser',
             title: t('globals.pageTitles.customerCreate'),
@@ -415,11 +415,9 @@ function handleLocation(data, location) {
                 isEqualizated: false,
             },
         }"
-        order="id DESC"
         :columns="columns"
-        redirect="customer"
         :right-search="false"
-        auto-load
+        redirect="customer"
     >
         <template #more-create-dialog="{ data }">
             <VnSelect
@@ -454,7 +452,6 @@ function handleLocation(data, location) {
                     </QItem>
                 </template>
             </VnSelect>
-
             <VnLocation
                 :acls="[{ model: 'Province', props: '*', accessType: 'WRITE' }]"
                 v-model="data.location"
@@ -475,7 +472,7 @@ function handleLocation(data, location) {
 </template>
 <i18n>
 es:
-    Web user: Usuario Web
+    Web user: Usuario web
 </i18n>
 <style lang="scss" scoped>
 .col-content {

src/pages/Entry/EntryFilter.vue

@@ -1,8 +1,6 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { onMounted } from 'vue';
-import { useStateStore } from 'stores/useStateStore';
 
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
@@ -20,11 +18,6 @@ const props = defineProps({
 
 const currenciesOptions = ref([]);
 const companiesOptions = ref([]);
-
-const stateStore = useStateStore();
-onMounted(async () => {
-    stateStore.rightDrawer = true;
-});
 </script>
 
 <template>

src/pages/Entry/EntryList.vue

@@ -45,8 +45,10 @@ const columns = computed(() => [
         align: 'left',
         label: t('entry.list.tableVisibleColumns.id'),
         name: 'id',
-        isTitle: true,
-        cardVisible: true,
+        isId: true,
+        chip: {
+            condition: () => true,
+        },
     },
     {
         align: 'left',
@@ -192,9 +194,6 @@ const columns = computed(() => [
         ],
     },
 ]);
-onMounted(async () => {
-    stateStore.rightDrawer = true;
-});
 </script>
 <template>
     <VnSearchbar
@@ -222,7 +221,6 @@ onMounted(async () => {
         order="id DESC"
         :columns="columns"
         redirect="entry"
-        auto-load
         :right-search="false"
     >
         <template #column-supplierFk="{ row }">

src/pages/InvoiceIn/InvoiceInList.vue

@@ -1,7 +1,6 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
 import { downloadFile } from 'src/composables/downloadFile';
 import { toDate, toCurrency } from 'src/filters/index';
 import InvoiceInFilter from './InvoiceInFilter.vue';
@@ -15,19 +14,19 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 
-const stateStore = useStateStore();
 const { viewSummary } = useSummaryDialog();
 const { t } = useI18n();
 
-onMounted(async () => (stateStore.rightDrawer = true));
-onUnmounted(() => (stateStore.rightDrawer = false));
-
 const tableRef = ref();
 const cols = computed(() => [
     {
         align: 'left',
         name: 'id',
         label: 'Id',
+        isId: true,
+        chip: {
+            condition: () => true,
+        },
     },
     {
         align: 'left',
@@ -41,6 +40,7 @@ const cols = computed(() => [
             },
         },
         columnClass: 'expand',
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -67,6 +67,7 @@ const cols = computed(() => [
         name: 'isBooked',
         label: t('invoiceIn.isBooked'),
         columnFilter: false,
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -78,6 +79,7 @@ const cols = computed(() => [
         name: 'amount',
         label: t('invoiceIn.list.amount'),
         format: ({ amount }) => toCurrency(amount),
+        cardVisible: true,
     },
     {
         align: 'right',
@@ -87,6 +89,7 @@ const cols = computed(() => [
                 title: t('components.smartCard.openSummary'),
                 icon: 'preview',
                 type: 'submit',
+                isPrimary: true,
                 action: (row) => viewSummary(row.id, InvoiceInSummary),
             },
             {
@@ -121,7 +124,6 @@ const cols = computed(() => [
         redirect="invoice-in"
         :columns="cols"
         :right-search="false"
-        :disable-option="{ card: true }"
         :auto-load="!!$route.query.params"
     >
         <template #column-supplierFk="{ row }">

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, onUnmounted, ref, computed, watchEffect } from 'vue';
+import { ref, computed, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
@@ -10,14 +10,12 @@ import { usePrintService } from 'composables/usePrintService';
 import VnTable from 'components/VnTable/VnTable.vue';
 import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
 import { toCurrency, toDate } from 'src/filters/index';
-import { useStateStore } from 'stores/useStateStore';
 import { QBtn } from 'quasar';
 import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import InvoiceOutFilter from './InvoiceOutFilter.vue';
 
 const { t } = useI18n();
-const stateStore = useStateStore();
 const { viewSummary } = useSummaryDialog();
 const tableRef = ref();
 const invoiceOutSerialsOptions = ref([]);
@@ -139,8 +137,6 @@ const columns = computed(() => [
         ],
     },
 ]);
-onMounted(() => (stateStore.rightDrawer = true));
-onUnmounted(() => (stateStore.rightDrawer = false));
 
 function openPdf(id) {
     try {
@@ -218,7 +214,6 @@ watchEffect(selectedRows);
         order="id DESC"
         :columns="columns"
         redirect="invoice-out"
-        auto-load
         :table="{
             'row-key': 'id',
             selection: 'multiple',

src/pages/Item/ItemList.vue

@@ -389,7 +389,6 @@ const cloneItem = async (itemFk) => {
 };
 
 onMounted(async () => {
-    stateStore.rightDrawer = true;
     const filteredColumns = columns.value.filter(
         (col) => col.name !== 'picture' && col.name !== 'actions'
     );

src/pages/Order/OrderList.vue

@@ -1,21 +1,22 @@
 <script setup>
-import axios from 'axios';
 import { useI18n } from 'vue-i18n';
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
-import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
+import { toDateTimeFormat } from 'src/filters/date';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { useRoute } from 'vue-router';
+
+import axios from 'axios';
+import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
+import OrderSearchbar from './Card/OrderSearchbar.vue';
+import OrderFilter from './Card/OrderFilter.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
+import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.vue';
+
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
-import OrderSearchbar from './Card/OrderSearchbar.vue';
-import RightMenu from 'src/components/common/RightMenu.vue';
-import OrderFilter from './Card/OrderFilter.vue';
-import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
-import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.vue';
-import { toDateTimeFormat } from 'src/filters/date';
-import { onMounted } from 'vue';
-import { useRoute } from 'vue-router';
 
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -166,9 +167,9 @@ const getDateColor = (date) => {
     today.setHours(0, 0, 0, 0);
     const timeTicket = new Date(date);
     timeTicket.setHours(0, 0, 0, 0);
-    const comparation = today - timeTicket;
-    if (comparation == 0) return 'bg-warning';
-    if (comparation < 0) return 'bg-success';
+    const difference = today - timeTicket;
+    if (difference == 0) return 'bg-warning';
+    if (difference < 0) return 'bg-success';
 };
 
 onMounted(() => {
@@ -203,8 +204,8 @@ onMounted(() => {
             },
         }"
         :user-params="{ showEmpty: false }"
-        :right-search="false"
         :columns="columns"
+        :right-search="false"
         redirect="order"
     >
         <template #column-clientFk="{ row }">

src/pages/Route/RouteExtendedList.vue

@@ -193,30 +193,6 @@ const columns = computed(() => [
         columnFilter: false,
         columnClass: 'shrink',
     },
-    {
-        align: 'right',
-        name: 'tableActions',
-        actions: [
-            {
-                title: t('route.Add tickets'),
-                icon: 'vn:ticketAdd',
-                action: (row) => openTicketsDialog(row?.id),
-                isPrimary: true,
-            },
-            {
-                title: t('route.components.smartCard.viewSummary'),
-                icon: 'preview',
-                action: (row) => viewSummary(row?.id, RouteSummary),
-                isPrimary: true,
-            },
-            {
-                title: t('route.Route summary'),
-                icon: 'arrow_forward',
-                action: (row) => navigate(row?.id),
-                isPrimary: true,
-            },
-        ],
-    },
 ]);
 
 function navigate(id) {

src/pages/Route/RouteList.vue

@@ -26,7 +26,7 @@ const routeFilter = {
 };
 const columns = computed(() => [
     {
-        align: 'left',
+        align: 'right',
         isId: true,
         name: 'id',
         label: 'Id',

src/pages/Shelving/Card/ShelvingSummary.vue

@@ -43,7 +43,7 @@ const filter = {
             data-key="ShelvingSummary"
         >
             <template #header="{ entity }">
-                <div>{{ entity.code }}</div>
+                <div>{{ entity.id }} - {{ entity.code }}</div>
             </template>
             <template #body="{ entity }">
                 <QCard class="vn-one">

src/pages/Shelving/ShelvingList.vue

@@ -1,8 +1,6 @@
 <script setup>
 import VnPaginate from 'components/ui/VnPaginate.vue';
-import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
-import { onMounted, onUnmounted } from 'vue';
 import CardList from 'components/ui/CardList.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import { useRouter } from 'vue-router';
@@ -12,7 +10,6 @@ import ShelvingSearchbar from 'pages/Shelving/Card/ShelvingSearchbar.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import RightMenu from 'src/components/common/RightMenu.vue';
 
-const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -20,9 +17,6 @@ const filter = {
     include: [{ relation: 'parking' }],
 };
 
-onMounted(() => (stateStore.rightDrawer = true));
-onUnmounted(() => (stateStore.rightDrawer = false));
-
 function navigate(id) {
     router.push({ path: `/shelving/${id}` });
 }

src/pages/Supplier/Card/SupplierAccounts.vue

@@ -14,10 +14,10 @@ import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 import { useQuasar } from 'quasar';
 
-const quasar = useQuasar();
-const { notify } = useNotify();
-const route = useRoute();
 const { t } = useI18n();
+const { notify } = useNotify();
+const quasar = useQuasar();
+const route = useRoute();
 
 const bankEntitiesRef = ref(null);
 const supplier = ref(null);

src/pages/Supplier/Card/SupplierSummary.vue

@@ -41,7 +41,7 @@ const getUrl = (section) => `#/supplier/${entityId.value}/${section}`;
         data-key="SupplierSummary"
     >
         <template #header>
-            <span>{{ supplier.name }} - {{ supplier.id }}</span>
+            <span>{{ supplier.id }} - {{ supplier.name }}</span>
         </template>
 
         <template #body>

src/pages/Supplier/SupplierList.vue

@@ -14,7 +14,10 @@ const columns = computed(() => [
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.id'),
         name: 'id',
-        isTitle: true,
+        isId: true,
+        chip: {
+            condition: () => true,
+        },
     },
     {
         align: 'left',
@@ -24,6 +27,7 @@ const columns = computed(() => [
         columnFilter: {
             name: 'search',
         },
+        isTitle: true,
     },
     {
         align: 'left',
@@ -32,6 +36,7 @@ const columns = computed(() => [
         columnFilter: {
             inWhere: true,
         },
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -40,6 +45,7 @@ const columns = computed(() => [
         columnFilter: {
             name: 'search',
         },
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -119,7 +125,6 @@ const columns = computed(() => [
         :right-search="false"
         order="id ASC"
         :columns="columns"
-        auto-load
     />
 </template>
 

src/pages/Ticket/TicketList.vue

@@ -95,6 +95,7 @@ const columns = computed(() => [
         columnField: {
             component: null,
         },
+        cardVisible: true,
         format: (row, dashIfEmpty) => dashIfEmpty(row.salesPerson),
     },
     {
@@ -126,12 +127,14 @@ const columns = computed(() => [
         name: 'nickname',
         label: t('ticketList.nickname'),
         columnClass: 'expand',
+        isTitle: true,
     },
     {
         align: 'left',
         name: 'addressNickname',
         label: t('ticketList.addressNickname'),
         columnClass: 'expand',
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -152,6 +155,7 @@ const columns = computed(() => [
             },
         },
         columnClass: 'expand',
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -302,7 +306,6 @@ const getDateColor = (date) => {
 
 onMounted(() => {
     initializeFromQuery();
-    stateStore.rightDrawer = true;
 });
 
 async function makeInvoice(ticket) {

src/pages/Travel/Card/TravelCard.vue

@@ -1,6 +1,7 @@
 <script setup>
 import VnCard from 'components/common/VnCard.vue';
 import TravelDescriptor from './TravelDescriptor.vue';
+import TravelFilter from '../TravelFilter.vue';
 
 const filter = {
     fields: [
@@ -35,8 +36,9 @@ const filter = {
         data-key="Travel"
         base-url="Travels"
         search-data-key="TravelList"
-        :filter="filter"
         :descriptor="TravelDescriptor"
+        :filter-panel="TravelFilter"
+        :filter="filter"
         :searchbar-props="{
             url: 'Travels',
             label: 'Search travel',

src/pages/Travel/Card/TravelSummary.vue

@@ -252,7 +252,7 @@ const getLink = (param) => `#/travel/${entityId.value}/${param}`;
         data-key="TravelSummary"
     >
         <template #header>
-            <span>{{ travel.ref }} - {{ travel.id }}</span>
+            <span>{{ travel.id }} - {{ travel.ref }}</span>
         </template>
 
         <template #body>

src/pages/Travel/TravelFilter.vue

@@ -27,7 +27,7 @@ defineExpose({ states });
     <VnFilterPanel :data-key="props.dataKey" :search-button="true" search-url="table">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
-                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <strong>{{ t(`travel.${tag.label}`) }}: </strong>
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>

src/pages/Travel/TravelList.vue

@@ -1,8 +1,7 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter, useRoute } from 'vue-router';
-import { useStateStore } from 'stores/useStateStore';
 import VnTable from 'components/VnTable/VnTable.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import TravelSummary from './Card/TravelSummary.vue';
@@ -11,11 +10,11 @@ import { toDate } from 'src/filters';
 import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import TravelFilter from './TravelFilter.vue';
+import VnInputNumber from 'src/components/common/VnInputNumber.vue';
 
 const { viewSummary } = useSummaryDialog();
 const router = useRouter();
 const { t } = useI18n();
-const stateStore = useStateStore();
 const route = useRoute();
 const tableRef = ref();
 const $props = defineProps({
@@ -27,9 +26,6 @@ const $props = defineProps({
 const entityId = computed(() => $props.id || route.params.id);
 
 const travelFilterRef = ref();
-onMounted(async () => {
-    stateStore.rightDrawer = true;
-});
 
 const cloneTravel = (travelData) => {
     const stringifiedTravelData = JSON.stringify(travelData);
@@ -48,9 +44,11 @@ const columns = computed(() => [
     {
         align: 'left',
         name: 'id',
-        label: t('travel.travelList.tableVisibleColumns.id'),
+        label: 'Id',
+        chip: {
+            condition: () => true,
+        },
         isId: true,
-        cardVisible: true,
     },
     {
         align: 'left',
@@ -60,7 +58,7 @@ const columns = computed(() => [
         columnField: {
             component: null,
         },
-        cardVisible: true,
+        isTitle: true,
         create: true,
     },
     {
@@ -139,7 +137,6 @@ const columns = computed(() => [
         columnField: {
             component: null,
         },
-        cardVisible: true,
         create: true,
         format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.landed)),
     },
@@ -216,7 +213,6 @@ const columns = computed(() => [
         :user-params="{ daysOnward: 7 }"
         order="landed DESC"
         :columns="columns"
-        auto-load
         redirect="travel"
         :is-editable="false"
         :use-model="true"
@@ -264,7 +260,6 @@ const columns = computed(() => [
         </template>
     </VnTable>
 </template>
-
 <i18n>
 en:
     Add entry: Add entry
@@ -278,7 +273,6 @@ es:
     Clone: Clonar
     Add entry: Añadir Entrada
 </i18n>
-
 <style lang="scss" scoped>
 .is-active {
     color: #c8e484;

src/pages/Wagon/WagonList.vue

@@ -98,9 +98,7 @@ async function remove(row) {
             url="Wagons"
             :filter="filter"
             :columns="columns"
-            auto-load
             order="id DESC"
-            :right-search="false"
             :column-search="false"
             :default-mode="'card'"
             :disable-option="{ table: true }"

src/pages/Worker/WorkerList.vue

@@ -106,6 +106,7 @@ const columns = computed(() => [
                 title: t('components.smartCard.viewSummary'),
                 icon: 'preview',
                 action: (row) => viewSummary(row.id, WorkerSummary),
+                isPrimary: true,
             },
         ],
     },

src/pages/Zone/ZoneList.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref } from 'vue';
 import axios from 'axios';
 
 import { toCurrency } from 'src/filters';
@@ -9,7 +9,6 @@ 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';
@@ -24,7 +23,6 @@ const router = useRouter();
 const { notify } = useNotify();
 const { viewSummary } = useSummaryDialog();
 const { openConfirmationModal } = useVnConfirm();
-const stateStore = useStateStore();
 const tableRef = ref();
 const warehouseOptions = ref([]);
 
@@ -130,8 +128,6 @@ const handleClone = (id) => {
         () => clone(id)
     );
 };
-
-onMounted(() => (stateStore.rightDrawer = true));
 </script>
 
 <template>
@@ -155,7 +151,6 @@ onMounted(() => (stateStore.rightDrawer = true));
         :columns="columns"
         redirect="zone"
         :right-search="false"
-        auto-load
     >
         <template #more-create-dialog="{ data }">
             <VnSelect

src/router/modules/shelving.js

@@ -25,7 +25,7 @@ export default {
                     path: 'list',
                     name: 'ShelvingList',
                     meta: {
-                        title: 'shelvingList',
+                        title: 'list',
                         icon: 'view_list',
                     },
                     component: () => import('src/pages/Shelving/ShelvingList.vue'),

src/router/modules/wagon.js

@@ -25,7 +25,7 @@ export default {
                     path: 'list',
                     name: 'WagonList',
                     meta: {
-                        title: 'wagonsList',
+                        title: 'list',
                         icon: 'vn:trolley',
                     },
                     component: () => import('src/pages/Wagon/WagonList.vue'),

src/router/modules/zone.js

@@ -38,7 +38,7 @@ export default {
                     name: 'ZoneList',
                     meta: {
                         title: 'zonesList',
-                        icon: 'vn:zone',
+                        icon: 'view_list',
                     },
                     component: () => import('src/pages/Zone/ZoneList.vue'),
                 },

src/stores/useStateStore.js

@@ -15,6 +15,10 @@ export const useStateStore = defineStore('stateStore', () => {
         rightDrawer.value = !rightDrawer.value;
     }
 
+    function rightDrawerChangeValue(value) {
+        rightDrawer.value = value;
+    }
+
     function toggleSubToolbar() {
         subToolbar.value = !subToolbar.value;
     }
@@ -50,5 +54,6 @@ export const useStateStore = defineStore('stateStore', () => {
         isRightDrawerShown,
         isSubToolbarShown,
         toggleSubToolbar,
+        rightDrawerChangeValue,
     };
 });

test/cypress/integration/vnComponent/vnBreadcrumbs.spec.js

@@ -1,6 +1,5 @@
 /// <reference types="cypress" />
 describe('VnBreadcrumbs', () => {
-    const firstCard = '.q-infinite-scroll > :nth-child(1)';
     const lastBreadcrumb = '.q-breadcrumbs--last > .q-breadcrumbs__el';
     beforeEach(() => {
         cy.login('developer');
@@ -12,10 +11,7 @@ describe('VnBreadcrumbs', () => {
     });
 
     it('should get the correct breadcrumbs', () => {
-        cy.visit('#/customer/list');
-        cy.get('.q-breadcrumbs__el').should('have.length', 2);
-
-        cy.get(firstCard).click();
+        cy.visit('#/customer/1/summary');
         cy.get(`${lastBreadcrumb} > .q-icon`).should('have.text', 'launch');
     });
 });

test/cypress/integration/vnComponent/vnSearchBar.spec.js

@@ -5,6 +5,7 @@ describe('VnSearchBar', () => {
     const idGap = '.q-item > .q-item__label';
     const vnTableRow = '.q-virtual-scroll__content';
     beforeEach(() => {
+        cy.viewport(1920, 1080);
         cy.login('developer');
         cy.visit('#/customer/list');
     });

test/cypress/integration/zone/zoneCreate.spec.js

@@ -22,6 +22,7 @@ describe('ZoneCreate', () => {
             ...data,
         });
         cy.get('input[aria-label="Close"]').type('10:00');
+        cy.get('body').click();
         cy.get('.q-mt-lg > .q-btn--standard').click();
         cy.get(notification).should('contains.text', 'Agency cannot be blank');
     });
@@ -32,6 +33,7 @@ describe('ZoneCreate', () => {
             Agency: { val: 'inhouse pickup', type: 'select' },
         });
         cy.get('input[aria-label="Close"]').type('10:00');
+        cy.get('body').click();
         cy.get('.q-mt-lg > .q-btn--standard').click();
         cy.get(notification).should('contains.text', 'Data created');
     });

test/cypress/integration/zone/zoneList.spec.js

@@ -6,9 +6,7 @@ describe('ZoneList', () => {
     });
 
     it('should filter by agency', () => {
-        cy.get(
-            ':nth-child(1) > .column > .q-field > .q-field__inner > .q-field__control > .q-field__control-container'
-        ).type('{downArrow}{enter}');
+        cy.get('input[aria-label="Agency"]').type('{downArrow}{enter}');
     });
 
     it('should open the zone summary', () => {