0
0
Fork 0

Merge pull request '5987-fixCardListActions' (!84) from 5987-fixCardListActions into dev

Reviewed-on: verdnatura/salix-front#84
Reviewed-by: Alex Moreno <alexm@verdnatura.es>
This commit is contained in:
Alex Moreno 2023-08-18 06:58:50 +00:00
commit c2b10ba271
9 changed files with 37 additions and 47 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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') }}

View File

@ -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">

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -6,18 +6,21 @@ 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', 'JessicaJones');
cy.get('.list-items > .vn-label-value:nth-child(2) > .value')
.eq(1)
.should('have.text', 'BruceBanner');
cy.get('.list-items > .vn-label-value:nth-child(2) > .value')
.eq(2)
.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');
});
});