Merge pull request 'feat: #8612 changed shelving to VnTable & created e2e tests' (!1432) from 8612-shelvinge2e into dev

Reviewed-on: #1432
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>

src/pages/Shelving/ShelvingList.vue

@@ -1,14 +1,17 @@
 <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 ShelvingSummary from './Card/ShelvingSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import exprBuilder from './ShelvingExprBuilder.js';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnCheckbox from 'src/components/common/VnCheckbox.vue';
 
+const { t } = useI18n();
 const router = useRouter();
 const { viewSummary } = useSummaryDialog();
 const dataKey = 'ShelvingList';
@@ -17,9 +20,56 @@ 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,
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('components.smartCard.viewSummary'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, ShelvingSummary),
+                isPrimary: true,
+            },
+        ],
+    },
+]);
+
+const onDataSaved = ({ id }) => {
+    router.push({ name: 'ShelvingBasicData', params: { id } });
+};
 </script>
 
 <template>
@@ -37,48 +87,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>
+                    <VnCheckbox
-                </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/parking/parkingList.spec.js

@@ -1,7 +1,7 @@
 /// <reference types="cypress" />
 describe('ParkingList', () => {
     const searchbar = '#searchbar input';
-    const firstCard = ':nth-child(1) > .q-card > .no-margin > .q-py-none';   
+    const firstCard = ':nth-child(1) > .q-card > .no-margin > .q-py-none';
     const summaryHeader = '.summaryBody .header';
 
     beforeEach(() => {

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

@@ -0,0 +1,24 @@
+/// <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 give an error if the code aldready exists', () => {
+        cy.dataCy('Code_input').should('exist').clear().type('AA7');
+        cy.saveCard();
+        cy.get('.q-notification__message').should('have.text', 'The code already exists');
+    });
+    it('should edit the data and save', () => {
+        cy.selectOption(parking, 'P-01-1');
+        cy.dataCy('Code_input').clear().type('AA1');
+        cy.dataCy('Priority_input').clear().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,41 @@
+/// <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.typeSearchbar('{enter}');
+        cy.dataCy('cardBtn').eq(0).click();
+        cy.get('.summaryHeader > .header > .q-icon').click();
+        cy.url().should('include', '/shelving/1/summary');
+    });
+
+    it('should redirect from preview to basic-data', () => {
+        cy.typeSearchbar('{enter}');
+        cy.dataCy('cardBtn').eq(0).click();
+        cy.get('.q-card > .header').click();
+        cy.url().should('include', '/shelving/1/basic-data');
+    });
+
+    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/);
+    });
+});