From a194ec745b51bacad70058d9a07f44f24d5ea10e Mon Sep 17 00:00:00 2001 From: jorgep Date: Thu, 10 Aug 2023 13:20:32 +0200 Subject: [PATCH 01/11] refs 5987 index cards and light mode --- src/components/LeftMenu.vue | 2 +- src/components/ui/CardDescriptor.vue | 5 +- src/components/ui/CardList.vue | 114 ++++++++++++++ src/components/ui/VnLv.vue | 11 +- src/css/app.scss | 26 +++- src/css/quasar.variables.scss | 8 + src/i18n/en/index.js | 3 + src/i18n/es/index.js | 3 + src/pages/Claim/ClaimList.vue | 166 +++++++-------------- src/pages/Customer/CustomerList.vue | 115 +++++--------- src/pages/InvoiceOut/InvoiceOutList.vue | 146 +++++++----------- src/pages/Ticket/Card/TicketDescriptor.vue | 2 +- src/pages/Ticket/TicketList.vue | 48 +++++- src/pages/Worker/Card/WorkerDescriptor.vue | 3 +- src/pages/Worker/WorkerList.vue | 101 +++++-------- 15 files changed, 393 insertions(+), 360 deletions(-) create mode 100644 src/components/ui/CardList.vue diff --git a/src/components/LeftMenu.vue b/src/components/LeftMenu.vue index 6196c636a..1aabe1b6b 100644 --- a/src/components/LeftMenu.vue +++ b/src/components/LeftMenu.vue @@ -31,7 +31,7 @@ function findMatches(search, item) { const matches = []; function findRoute(search, item) { for (const child of item.children) { - if (search.indexOf(child.name) > -1) { + if (search?.indexOf(child.name) > -1) { matches.push(child); } else if (child.children) { findRoute(search, child); diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue index 025a8a2e2..1ecc031de 100644 --- a/src/components/ui/CardDescriptor.vue +++ b/src/components/ui/CardDescriptor.vue @@ -124,7 +124,7 @@ watch($props, async () => { - + #{{ $props.subtitle ?? entity.id }} @@ -191,10 +191,11 @@ watch($props, async () => { } .subtitle { font-size: 16px; + color: $white; } .list-box { width: 90%; - background-color: rgba(87, 86, 86, 0.2); + background-color: $descriptor-items-box; margin: 20px 10px 0 10px; padding: 10px 5px 10px 0px; border-radius: 8px; diff --git a/src/components/ui/CardList.vue b/src/components/ui/CardList.vue new file mode 100644 index 000000000..410e681c3 --- /dev/null +++ b/src/components/ui/CardList.vue @@ -0,0 +1,114 @@ + + + + + diff --git a/src/components/ui/VnLv.vue b/src/components/ui/VnLv.vue index 1eea26252..4686b97ec 100644 --- a/src/components/ui/VnLv.vue +++ b/src/components/ui/VnLv.vue @@ -2,10 +2,9 @@ import { computed } from 'vue'; const $props = defineProps({ label: { type: String, default: null }, - value: { - type: [String, Boolean], - default: null, - }, + value: { type: [Number, String, Boolean], default: null }, + titleLabel: { type: String, default: null }, + titleValue: { type: [Number, String, Boolean], default: null }, info: { type: String, default: null }, }); const isBooleanValue = computed(() => typeof $props.value === 'boolean'); @@ -14,7 +13,7 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
- {{ $props.label }} + {{ $props.label }}
@@ -25,7 +24,7 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean'); /> - {{ $props.value }} + {{ $props.value }}
diff --git a/src/css/app.scss b/src/css/app.scss index 466219906..18c9b4455 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -26,13 +26,35 @@ select:-webkit-autofill { body.body--light { .q-header .q-toolbar { - background-color: white; + background-color: $white; color: #555; } + .descriptor { + .picture { + background-color: $descriptor--light; + } + } + + .vn-label-value { + .label { + color: $gray; + } + .value { + color: $light-black; + } + } + .descriptor { + .subtitle { + color: $gray; + } + .list-box { + background-color: $descriptor--light; + } + } .summary { .header { - color: white; + color: $white; } } } diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss index 5d20efe73..7a6432156 100644 --- a/src/css/quasar.variables.scss +++ b/src/css/quasar.variables.scss @@ -15,6 +15,12 @@ $primary: #ec8916; $secondary: #26a69a; $accent: #9c27b0; +$white: #fff; +$black: #000; +$light-black: #4e4c4c; +$gray: gray; +$light-gray: #57565633; +$lighter-gray: #5756560f; $positive: #21ba45; $negative: #c10015; @@ -48,3 +54,5 @@ $layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0 $spacing-md: 16px; $label-color: rgba(255, 255, 255, 0.6); +$descriptor-items-box: rgba(87, 86, 86, 0.2); +$descriptor--light: rgb(87 86 86 / 6%); diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js index fafba4b09..046f8154b 100644 --- a/src/i18n/en/index.js +++ b/src/i18n/en/index.js @@ -340,11 +340,14 @@ export default { list: { ref: 'Reference', issued: 'Issued', + shortIssued: 'Issued', amount: 'Amount', client: 'Client', created: 'Created', + shortCreated: 'Created', company: 'Company', dued: 'Due date', + shortDued: 'Due date', }, card: { issued: 'Issued', diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js index 5b0983031..45f9fb0f9 100644 --- a/src/i18n/es/index.js +++ b/src/i18n/es/index.js @@ -340,11 +340,14 @@ export default { list: { ref: 'Referencia', issued: 'Fecha emisión', + shortIssued: 'F. emisión', amount: 'Importe', client: 'Cliente', created: 'Fecha creación', + shortCreated: 'F. creación', company: 'Empresa', dued: 'Fecha vencimineto', + shortDued: 'F. vencimiento', }, card: { issued: 'Fecha emisión', diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue index f9afa7177..ee9550472 100644 --- a/src/pages/Claim/ClaimList.vue +++ b/src/pages/Claim/ClaimList.vue @@ -9,6 +9,8 @@ import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue'; import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue'; import VnSearchbar from 'components/ui/VnSearchbar.vue'; import ClaimFilter from './ClaimFilter.vue'; +import VnLv from 'src/components/ui/VnLv.vue'; +import CardList from 'src/components/ui/CardList.vue'; const stateStore = useStateStore(); const router = useRouter(); @@ -74,116 +76,62 @@ function viewSummary(id) { auto-load >
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue index acd5e3bdf..ff6cf7d04 100644 --- a/src/pages/Customer/CustomerList.vue +++ b/src/pages/Customer/CustomerList.vue @@ -7,6 +7,8 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue'; import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import CustomerFilter from './CustomerFilter.vue'; +import VnLv from 'src/components/ui/VnLv.vue'; +import CardList from 'src/components/ui/CardList.vue'; const stateStore = useStateStore(); const router = useRouter(); @@ -66,85 +68,40 @@ function viewSummary(id) { auto-load >
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue index 00bed322e..5ed7cdf9b 100644 --- a/src/pages/InvoiceOut/InvoiceOutList.vue +++ b/src/pages/InvoiceOut/InvoiceOutList.vue @@ -9,6 +9,8 @@ import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue'; import { toDate, toCurrency } from 'src/filters/index'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import InvoiceOutFilter from './InvoiceOutFilter.vue'; +import VnLv from 'src/components/ui/VnLv.vue'; +import CardList from 'src/components/ui/CardList.vue'; const stateStore = useStateStore(); const router = useRouter(); @@ -71,97 +73,59 @@ function viewSummary(id) { auto-load > diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue index 9cd62d621..8681915ea 100644 --- a/src/pages/Ticket/Card/TicketDescriptor.vue +++ b/src/pages/Ticket/Card/TicketDescriptor.vue @@ -88,7 +88,7 @@ const setData = (entity) => 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 Date: Thu, 17 Aug 2023 15:36:06 +0200 Subject: [PATCH 11/11] 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'); }); });