fix: refs #8004 more list style issues

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;

src/components/common/RightMenu.vue

@@ -4,6 +4,8 @@ import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import isMobile from 'src/composables/isMobile';
 
+const { t } = useI18n();
+const stateStore = useStateStore();
 const slots = useSlots();
 const hasContent = ref(false);
 const rightPanel = ref(null);
@@ -21,13 +23,9 @@ onMounted(() => {
         childList: true,
         attributes: true,
     });
-
     if ((!slots['right-panel'] && !hasContent.value) || isMobile)
         stateStore.rightDrawer = false;
 });
-
-const { t } = useI18n();
-const stateStore = useStateStore();
 </script>
 <template>
     <Teleport to="#actions-append" v-if="stateStore.isHeaderMounted()">
@@ -46,12 +44,7 @@ const stateStore = useStateStore();
             </QBtn>
         </div>
     </Teleport>
-    <QDrawer
-        v-model="stateStore.rightDrawer"
-        side="right"
-        :width="256"
-        :show-if-above="!isMobile"
-    >
+    <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/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.rightMenu = 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/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,10 +415,9 @@ function handleLocation(data, location) {
                 isEqualizated: false,
             },
         }"
-        order="id DESC"
         :columns="columns"
-        redirect="customer"
         :right-search="false"
+        redirect="customer"
     >
         <template #more-create-dialog="{ data }">
             <VnSelect
@@ -453,7 +452,6 @@ function handleLocation(data, location) {
                     </QItem>
                 </template>
             </VnSelect>
-
             <VnLocation
                 :acls="[{ model: 'Province', props: '*', accessType: 'WRITE' }]"
                 v-model="data.location"
@@ -474,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/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/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/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/Travel/Card/TravelCard.vue

@@ -36,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/TravelList.vue

@@ -10,6 +10,7 @@ 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();

src/pages/Wagon/WagonList.vue

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

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', () => {