feat: refs #8612 changed shelving to VnTable & created e2e tests

src/pages/Shelving/ShelvingList.vue

@@ -1,25 +1,60 @@
 <script setup>
-import VnPaginate from 'components/ui/VnPaginate.vue';
+import { computed } from 'vue';
-import CardList from 'components/ui/CardList.vue';
-import VnLv from 'components/ui/VnLv.vue';
 import { useRouter } from 'vue-router';
-import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
+import { useI18n } from 'vue-i18n';
-import ShelvingSummary from 'pages/Shelving/Card/ShelvingSummary.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import VnSection from 'src/components/common/VnSection.vue';
+import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import exprBuilder from './ShelvingExprBuilder.js';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import { QCheckbox } from 'quasar';
 
+const { t } = useI18n();
 const router = useRouter();
-const { viewSummary } = useSummaryDialog();
 const dataKey = 'ShelvingList';
 
 const filter = {
     include: [{ relation: 'parking' }],
 };
 
-function navigate(id) {
+const columns = computed(() => [
-    router.push({ path: `/shelving/${id}` });
+    {
-}
+        align: 'left',
+        name: 'code',
+        label: t('globals.code'),
+        isId: true,
+        isTitle: true,
+        columnFilter: false,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'parking',
+        label: t('shelving.list.parking'),
+        sortable: true,
+        format: (val) => val?.code ?? '',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'priority',
+        label: t('shelving.list.priority'),
+        sortable: true,
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'isRecyclable',
+        label: t('shelving.summary.recyclable'),
+        sortable: true,
+    },
+]);
+
+const onDataSaved = ({ id }) => {
+    router.push({ name: 'ShelvingBasicData', params: { id } });
+};
 </script>
 
 <template>
@@ -37,48 +72,75 @@ function navigate(id) {
             <ShelvingFilter data-key="ShelvingList" />
         </template>
         <template #body>
-            <QPage class="column items-center q-pa-md">
+            <VnTable
-                <div class="vn-card-list">
+                :data-key="dataKey"
-                    <VnPaginate :data-key="dataKey">
+                :columns="columns"
-                        <template #body="{ rows }">
+                is-editable="false"
-                            <CardList
+                :right-search="false"
-                                v-for="row of rows"
+                :use-model="true"
-                                :key="row.id"
+                :disable-option="{ table: true }"
-                                :id="row.id"
+                redirect="shelving"
-                                :title="row.code"
+                default-mode="card"
-                                @click="navigate(row.id)"
+                :create="{
-                            >
+                    urlCreate: 'Shelvings',
-                                <template #list-items>
+                    title: t('globals.pageTitles.shelvingCreate'),
-                                    <VnLv
+                    onDataSaved,
-                                        :label="$t('shelving.list.parking')"
+                    formInitialData: {
-                                        :title-label="$t('shelving.list.parking')"
+                        parkingFk: null,
-                                        :value="row.parking?.code"
+                        priority: null,
-                                    />
+                        code: '',
-                                    <VnLv
+                        isRecyclable: false,
-                                        :label="$t('shelving.list.priority')"
+                    },
-                                        :value="row?.priority"
+                }"
-                                    />
+            >
-                                </template>
+                <template #more-create-dialog="{ data }">
-                                <template #actions>
+                    <VnSelect
-                                    <QBtn
+                        v-model="data.parkingFk"
-                                        :label="$t('components.smartCard.openSummary')"
+                        url="Parkings"
-                                        @click.stop="viewSummary(row.id, ShelvingSummary)"
+                        option-value="id"
-                                        color="primary"
+                        option-label="code"
-                                    />
+                        :label="t('shelving.list.parking')"
-                                </template>
+                        :filter-options="['id', 'code']"
-                            </CardList>
+                        :fields="['id', 'code']"
-                        </template>
+                    />
-                    </VnPaginate>
+                    <QCheckbox
-                </div>
+                        v-model="data.isRecyclable"
-                <QPageSticky :offset="[20, 20]">
+                        :label="t('shelving.summary.recyclable')"
-                    <RouterLink :to="{ name: 'ShelvingCreate' }">
+                    />
-                        <QBtn fab icon="add" color="primary" v-shortcut="'+'" />
+                </template>
-                        <QTooltip>
+            </VnTable>
-                            {{ $t('shelving.list.newShelving') }}
-                        </QTooltip>
-                    </RouterLink>
-                </QPageSticky>
-            </QPage>
         </template>
     </VnSection>
 </template>
+
+<style lang="scss" scoped>
+.list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 55%;
+}
+.list-container {
+    display: flex;
+    justify-content: center;
+}
+</style>
+
+<i18n>
+    es:
+        shelving:
+            list:
+                parking: Estacionamiento
+                priority: Prioridad
+        
+            summary:
+                recyclable: Reciclable
+    en:
+        shelving:
+            list:
+                parking: Parking
+                priority: Priority
+        
+            summary:
+                recyclable: Recyclable
+</i18n>

src/router/modules/shelving.js

@@ -111,15 +111,6 @@ export default {
                         shelvingCard,
                     ],
                 },
-                {
-                    path: 'create',
-                    name: 'ShelvingCreate',
-                    meta: {
-                        title: 'shelvingCreate',
-                        icon: 'add',
-                    },
-                    component: () => import('src/pages/Shelving/Card/ShelvingForm.vue'),
-                },
                 {
                     path: 'parking',
                     name: 'ParkingMain',

test/cypress/integration/shelving/shelvingBasicData.spec.js

@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+describe('ShelvingList', () => {
+    
+    const parking = '.q-card > :nth-child(1) > .q-select > .q-field__inner > .q-field__control > .q-field__control-container';
+    beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.login('developer');
+        cy.visit(`/#/shelving/1/basic-data`);
+    });
+
+    it('should edit the data and save', () => {
+        cy.selectOption(parking, 'P-01-1');
+        cy.dataCy('Code_input').type('1');
+        cy.dataCy('Priority_input').type('10');
+        cy.get(':nth-child(2) > .q-checkbox > .q-checkbox__inner').click();
+        cy.saveCard();
+        cy.get('.q-notification__message').should('have.text', 'Data saved');
+
+    });
+});

test/cypress/integration/shelving/shelvingList.spec.js

@@ -0,0 +1,32 @@
+/// <reference types="cypress" />
+describe('ShelvingList', () => {
+    beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.login('developer');
+        cy.visit(`/#/shelving/list`);
+    });
+
+    it('should redirect on clicking a shelving', () => {
+        cy.get('#searchbar input').type('{enter}');
+        cy.get(':nth-child(2) > .q-card').click();
+        cy.url().should('include', '/shelving/2/summary');
+    });
+
+    it('should filter and redirect if only one result', () => {
+        cy.selectOption('[data-cy="Parking_select"]', 'P-02-2');
+        cy.dataCy('Parking_select').type('{enter}');
+        cy.url().should('match', /\/shelving\/\d+\/summary/);
+    });
+
+    it('should create a new shelving', () => {
+        cy.dataCy('vnTableCreateBtn').click();
+        cy.dataCy('code-create-popup').type('Test');
+        cy.dataCy('Priority_input').type('10');
+        cy.selectOption(
+            '.grid-create > .q-select > .q-field__inner > .q-field__control > .q-field__control-container', '100-01'
+        )
+        cy.dataCy('FormModelPopup_save').click();
+        cy.checkNotification('Data created');
+        cy.url().should('match', /\/shelving\/\d+\/basic-data/);
+    });
+});