From 5417c1691ab2d8b73711a4023fb0629fc82662fe Mon Sep 17 00:00:00 2001 From: alexm Date: Wed, 9 Aug 2023 15:16:00 +0200 Subject: [PATCH 01/17] refs #5990 refactor: cardSummary --- src/components/ui/CardSummary.vue | 93 ++++++++++++++++--------------- 1 file changed, 48 insertions(+), 45 deletions(-) diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue index b3fb9746b..d1b346c5c 100644 --- a/src/components/ui/CardSummary.vue +++ b/src/components/ui/CardSummary.vue @@ -2,6 +2,8 @@ import { onMounted, ref, watch } from 'vue'; import axios from 'axios'; import SkeletonSummary from 'components/ui/SkeletonSummary.vue'; +import VnLv from 'src/components/ui/VnLv.vue'; + onMounted(() => fetch()); const entity = ref(); @@ -44,9 +46,9 @@ watch(props, async () => { From a194ec745b51bacad70058d9a07f44f24d5ea10e Mon Sep 17 00:00:00 2001 From: jorgep Date: Thu, 10 Aug 2023 13:20:32 +0200 Subject: [PATCH 02/17] 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/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue index 7fc4802c6..05ccdc373 100644 --- a/src/pages/Worker/Card/WorkerSummary.vue +++ b/src/pages/Worker/Card/WorkerSummary.vue @@ -3,11 +3,11 @@ import axios from 'axios'; import { ref, onMounted, computed, onUpdated } from 'vue'; import { useRoute } from 'vue-router'; import { useI18n } from 'vue-i18n'; -import SkeletonSummary from 'components/ui/SkeletonSummary.vue'; +import CardSummary from 'components/ui/CardSummary.vue'; +import { getUrl } from 'src/composables/getUrl'; +import VnLv from 'src/components/ui/VnLv.vue'; import WorkerDescriptorProxy from './WorkerDescriptorProxy.vue'; - -onMounted(() => fetch()); -onUpdated(() => fetch()); +import { dashIfEmpty } from 'src/filters'; const route = useRoute(); const { t } = useI18n(); @@ -20,8 +20,11 @@ const $props = defineProps({ }); const entityId = computed(() => $props.id || route.params.id); +const workerUrl = ref(); -const worker = ref(null); +onMounted(async () => { + workerUrl.value = (await getUrl('')) + `worker/${entityId.value}/`; +}); const filter = { include: [ @@ -59,230 +62,59 @@ const filter = { }, ], }; - -function fetch() { - const id = entityId.value; - axios.get(`/Workers/${id}`, { params: { filter } }).then((response) => { - worker.value = response.data; - }); -} - -function sipExtension() { - if (worker.value.sip) return worker.value.sip.extension; - return '-'; -} - diff --git a/test/cypress/integration/workerSummary.spec.js b/test/cypress/integration/workerSummary.spec.js index cef26d061..7228b4b31 100644 --- a/test/cypress/integration/workerSummary.spec.js +++ b/test/cypress/integration/workerSummary.spec.js @@ -1,15 +1,15 @@ describe('WorkerSummary', () => { beforeEach(() => { - cy.viewport(1280, 720) - cy.login('developer') + cy.viewport(1280, 720); + cy.login('developer'); cy.visit('/#/worker/19/summary'); }); it('should load worker summary', () => { - cy.get('div[class="header bg-primary q-pa-sm q-mb-md"').should('have.text', '19 - salesBoss salesBoss'); - 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('div[class="q-item__section column q-item__section--main justify-center"]').eq(0).should('have.text', 'NamesalesBossNick'); + cy.get('.summaryHeader > div').should('have.text', '19 - salesBoss salesBoss'); + cy.get(':nth-child(1) > :nth-child(2) > .value > span').should( + 'have.text', + 'salesBossNick' + ); }); - }); From 96d0ba3e0abf650e27840a3a21a526a3da47f17b Mon Sep 17 00:00:00 2001 From: jorgep Date: Mon, 14 Aug 2023 15:18:59 +0200 Subject: [PATCH 09/17] refs 5987 fix media queries --- src/components/ui/CardDescriptor.vue | 3 +-- src/components/ui/CardList.vue | 11 +++++++---- src/pages/Ticket/Card/TicketDescriptor.vue | 2 +- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue index dfc92344b..d5dd9b371 100644 --- a/src/components/ui/CardDescriptor.vue +++ b/src/components/ui/CardDescriptor.vue @@ -193,14 +193,13 @@ body.body--light { diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue index 1a603ec73..b54e44398 100644 --- a/src/components/ui/CardSummary.vue +++ b/src/components/ui/CardSummary.vue @@ -66,14 +66,6 @@ watch(props, async () => { 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 16/17] 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'); }); }); From afddb8f9900fe7ae8c66a19b39c2d1b7b362ed0a Mon Sep 17 00:00:00 2001 From: alexm Date: Fri, 18 Aug 2023 14:03:39 +0200 Subject: [PATCH 17/17] refs #5987 fix button color --- src/components/ui/CardList.vue | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/ui/CardList.vue b/src/components/ui/CardList.vue index c70c7b1df..ed1df7668 100644 --- a/src/components/ui/CardList.vue +++ b/src/components/ui/CardList.vue @@ -45,16 +45,17 @@ const $props = defineProps({ white-space: nowrap; } } -} -.actions { - .q-btn { - width: 30px; - } - .q-icon { - color: $primary; - font-size: 25px; + .actions { + .q-btn { + width: 30px; + } + .q-icon { + color: $primary; + font-size: 25px; + } } } + @media (max-width: $breakpoint-xs) { .card-list-body { .vn-label-value {