From 59f2f1a414445d78204dfa8e392a88a3a20e270e Mon Sep 17 00:00:00 2001 From: jorgep <jorgep@verdnatura.es> Date: Thu, 17 Aug 2023 13:38:21 +0200 Subject: [PATCH 1/3] ref 5987 cardLists actions click propagation fixed --- src/pages/Claim/ClaimList.vue | 6 +++--- src/pages/Customer/CustomerList.vue | 4 ++-- src/pages/InvoiceOut/Card/InvoiceOutSummary.vue | 2 +- src/pages/InvoiceOut/InvoiceOutList.vue | 4 ++-- src/pages/Ticket/Card/TicketDescriptor.vue | 6 +++--- src/pages/Ticket/TicketList.vue | 2 +- src/pages/Worker/WorkerList.vue | 4 ++-- 7 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue index ee9550472..79afc7e91 100644 --- a/src/pages/Claim/ClaimList.vue +++ b/src/pages/Claim/ClaimList.vue @@ -112,18 +112,18 @@ function viewSummary(id) { <QBtn flat icon="arrow_circle_right" - @click="navigate(row.id)" + @click.stop="navigate(row.id)" > <QTooltip> {{ t('components.smartCard.openCard') }} </QTooltip> </QBtn> - <QBtn flat icon="preview" @click="viewSummary(row.id)"> + <QBtn flat icon="preview" @click.stop="viewSummary(row.id)"> <QTooltip> {{ t('components.smartCard.openSummary') }} </QTooltip> </QBtn> - <QBtn flat icon="vn:client"> + <QBtn flat icon="vn:client" @click.stop> <QTooltip> {{ t('components.smartCard.viewDescription') }} </QTooltip> diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue index ff6cf7d04..219ef0be3 100644 --- a/src/pages/Customer/CustomerList.vue +++ b/src/pages/Customer/CustomerList.vue @@ -84,7 +84,7 @@ function viewSummary(id) { flat color="primary" icon="arrow_circle_right" - @click="navigate(row.id)" + @click.stop="navigate(row.id)" > <QTooltip> {{ t('components.smartCard.openCard') }} @@ -94,7 +94,7 @@ function viewSummary(id) { flat color="grey-7" icon="preview" - @click="viewSummary(row.id)" + @click.stop="viewSummary(row.id)" > <QTooltip> {{ t('components.smartCard.openSummary') }} diff --git a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue index 75a1676aa..5a56a3957 100644 --- a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue +++ b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue @@ -143,7 +143,7 @@ const ticketsColumns = ref([ <div class="header"> {{ t('invoiceOut.summary.tickets') }} </div> - <QTable :columns="ticketsColumns" :rows="tickets" flat> + <QTable v-if="tickets" :columns="ticketsColumns" :rows="tickets" flat> <template #header="props"> <QTr :props="props"> <QTh v-for="col in props.cols" :key="col.name" :props="props"> diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue index 5ed7cdf9b..137dedba8 100644 --- a/src/pages/InvoiceOut/InvoiceOutList.vue +++ b/src/pages/InvoiceOut/InvoiceOutList.vue @@ -113,13 +113,13 @@ function viewSummary(id) { <QBtn flat icon="arrow_circle_right" - @click="navigate(row.id)" + @click.stop="navigate(row.id)" > <QTooltip> {{ t('components.smartCard.openCard') }} </QTooltip> </QBtn> - <QBtn flat icon="preview" @click="viewSummary(row.id)"> + <QBtn flat icon="preview" @click.stop="viewSummary(row.id)"> <QTooltip> {{ t('components.smartCard.openSummary') }} </QTooltip> diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue index bd06f5655..25c9dfb1c 100644 --- a/src/pages/Ticket/Card/TicketDescriptor.vue +++ b/src/pages/Ticket/Card/TicketDescriptor.vue @@ -105,10 +105,10 @@ const setData = (entity) => <VnLv :label="t('ticket.summary.salesPerson')"> <template #value> <span class="link"> - {{ ticket.client?.salesPersonUser?.name }} + {{ entity.client.salesPersonUser.name }} <WorkerDescriptorProxy - :id="ticket.client.salesPersonFk" - v-if="ticket.client.salesPersonFk" + :id="entity.client.salesPersonFk" + v-if="entity.client.salesPersonFk" /> </span> </template> diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue index 30462d299..b9f0f57e7 100644 --- a/src/pages/Ticket/TicketList.vue +++ b/src/pages/Ticket/TicketList.vue @@ -120,7 +120,7 @@ function viewSummary(id) { /> </template> <template #actions> - <QBtn flat icon="preview" @click="viewSummary(row.id)"> + <QBtn flat icon="preview" @click.stop="viewSummary(row.id)"> <QTooltip> {{ t('components.smartCard.openSummary') }} </QTooltip> diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue index f09049f4b..cb75cdee3 100644 --- a/src/pages/Worker/WorkerList.vue +++ b/src/pages/Worker/WorkerList.vue @@ -87,13 +87,13 @@ function viewSummary(id) { <QBtn flat icon="arrow_circle_right" - @click="navigate(row.id)" + @click.stop="navigate(row.id)" > <QTooltip> {{ t('components.smartCard.openCard') }} </QTooltip> </QBtn> - <QBtn flat icon="preview" @click="viewSummary(row.id)"> + <QBtn flat icon="preview" @click.stop="viewSummary(row.id)"> <QTooltip> {{ t('components.smartCard.openSummary') }} </QTooltip> From 10efafaad88cb2786316ceb3f328f8e2b0d02621 Mon Sep 17 00:00:00 2001 From: jorgep <jorgep@verdnatura.es> Date: Thu, 17 Aug 2023 14:48:05 +0200 Subject: [PATCH 2/3] refs 5987 cardList css refactored --- src/components/ui/CardList.vue | 33 +++++++-------------- test/cypress/integration/workerList.spec.js | 29 +++++++++++++----- 2 files changed, 32 insertions(+), 30 deletions(-) diff --git a/src/components/ui/CardList.vue b/src/components/ui/CardList.vue index 48a1c82a6..c70c7b1df 100644 --- a/src/components/ui/CardList.vue +++ b/src/components/ui/CardList.vue @@ -5,19 +5,19 @@ const $props = defineProps({ }); </script> <template> - <QCard class="card q-mb-md cursor-pointer q-hoverable bg-white-7"> + <QCard class="card q-mb-md cursor-pointer q-hoverable bg-white-7 q-pa-lg"> <div> <slot name="title"> - <div class="title"> + <div class="title text-primary text-weight-bold text-h5"> {{ $props.title ?? `#${$props.id}` }} </div> </slot> - <div class="card-list-body"> - <div class="list-items"> + <div class="card-list-body row"> + <div class="list-items row flex-wrap-wrap q-mt-md"> <slot name="list-items" /> </div> - <div class="actions"> + <div class="actions column justify-center"> <slot name="actions" /> </div> </div> @@ -66,30 +66,17 @@ const $props = defineProps({ <style lang="scss" scoped> .card { - padding: 30px; transition: background-color 0.2s; } -.card-list-body { - display: flex; - justify-content: space-between; -} .card:hover { background-color: var(--vn-gray); } -.title { - color: $primary; - font-size: 22px; - font-weight: bold; -} .list-items { - width: 100%; - margin-top: 20px; - display: flex; - flex-wrap: wrap; + width: 90%; } -.actions { - display: flex; - flex-direction: column; - justify-content: center; +@media (max-width: $breakpoint-xs) { + .list-items { + width: 85%; + } } </style> diff --git a/test/cypress/integration/workerList.spec.js b/test/cypress/integration/workerList.spec.js index 79f2400bf..b24568f9f 100644 --- a/test/cypress/integration/workerList.spec.js +++ b/test/cypress/integration/workerList.spec.js @@ -6,18 +6,33 @@ describe('WorkerList', () => { }); it('should load workers', () => { - cy.get('div[class="q-item__label text-h6"]').eq(0).should('have.text', 'Jessica Jones'); - cy.get('div[class="q-item__label text-h6"]').eq(1).should('have.text', 'Bruce Banner'); - cy.get('div[class="q-item__label text-h6"]').eq(2).should('have.text', 'Charles Xavier'); + cy.get('.list-items > .vn-label-value:nth-child(2) > .value') + .eq(0) + .should('have.text', 'Jessica Jones'); + cy.get('.list-items > .vn-label-value:nth-child(2) > .value') + .eq(1) + .should('have.text', 'Bruce Banner'); + cy.get('.list-items > .vn-label-value:nth-child(2) > .value') + .eq(2) + .should('have.text', 'Charles Xavier'); }); it('should open the worker summary', () => { cy.get('div.text-h6') .parentsUntil('div.q-card') .find('div.q-card__actions') - .find('button').first().click(); - cy.get('div[class="header bg-primary q-pa-sm q-mb-md"').should('have.text', '1110 - Jessica Jones'); - cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(0).should('have.text', 'Basic data'); - cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(1).should('have.text', 'User data'); + .find('button') + .first() + .click(); + cy.get('div[class="header bg-primary q-pa-sm q-mb-md"').should( + 'have.text', + '1110 - Jessica Jones' + ); + cy.get('div[class="q-item__label q-item__label--header text-h6"]') + .eq(0) + .should('have.text', 'Basic data'); + cy.get('div[class="q-item__label q-item__label--header text-h6"]') + .eq(1) + .should('have.text', 'User data'); }); }); From 746bb8962d4420196c54ab6aec1a2e7706678b04 Mon Sep 17 00:00:00 2001 From: jorgep <jorgep@verdnatura.es> Date: Thu, 17 Aug 2023 15:36:06 +0200 Subject: [PATCH 3/3] refs 5987 workerList test fixed --- test/cypress/integration/workerList.spec.js | 26 ++++++--------------- 1 file changed, 7 insertions(+), 19 deletions(-) diff --git a/test/cypress/integration/workerList.spec.js b/test/cypress/integration/workerList.spec.js index b24568f9f..7a6c1d84d 100644 --- a/test/cypress/integration/workerList.spec.js +++ b/test/cypress/integration/workerList.spec.js @@ -8,31 +8,19 @@ describe('WorkerList', () => { it('should load workers', () => { cy.get('.list-items > .vn-label-value:nth-child(2) > .value') .eq(0) - .should('have.text', 'Jessica Jones'); + .should('have.text', 'JessicaJones'); cy.get('.list-items > .vn-label-value:nth-child(2) > .value') .eq(1) - .should('have.text', 'Bruce Banner'); + .should('have.text', 'BruceBanner'); cy.get('.list-items > .vn-label-value:nth-child(2) > .value') .eq(2) - .should('have.text', 'Charles Xavier'); + .should('have.text', 'CharlesXavier'); }); it('should open the worker summary', () => { - cy.get('div.text-h6') - .parentsUntil('div.q-card') - .find('div.q-card__actions') - .find('button') - .first() - .click(); - cy.get('div[class="header bg-primary q-pa-sm q-mb-md"').should( - 'have.text', - '1110 - Jessica Jones' - ); - cy.get('div[class="q-item__label q-item__label--header text-h6"]') - .eq(0) - .should('have.text', 'Basic data'); - cy.get('div[class="q-item__label q-item__label--header text-h6"]') - .eq(1) - .should('have.text', 'User data'); + cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(0).click(); + cy.get('.summaryHeader div').should('have.text', '1110 - Jessica Jones'); + cy.get('.summary .header').eq(0).invoke('text').should('include', 'Basic data'); + cy.get('.summary .header').eq(1).should('have.text', 'User data'); }); });