From 51d497a1de0c6ab867bb9dcd97e9b0292753c044 Mon Sep 17 00:00:00 2001 From: jorgep <jorgep@verdnatura.es> Date: Wed, 12 Jun 2024 12:17:52 +0200 Subject: [PATCH 1/9] feat: refs #6238 add percentage & summary btn --- src/components/ui/CardDescriptor.vue | 2 +- .../Supplier/Card/SupplierDescriptor.vue | 5 ++ .../Supplier/Card/SupplierDescriptorProxy.vue | 3 +- src/pages/Travel/ExtraCommunity.vue | 65 ++++++++++++++----- 4 files changed, 58 insertions(+), 17 deletions(-) diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue index b83cca3f4..b2084479d 100644 --- a/src/components/ui/CardDescriptor.vue +++ b/src/components/ui/CardDescriptor.vue @@ -115,13 +115,13 @@ const emit = defineEmits(['onFetch']); </QBtn> </RouterLink> <QBtn + v-if="$slots.menu" color="white" dense flat icon="more_vert" round size="md" - :class="{ invisible: !$slots.menu }" > <QTooltip> {{ t('components.cardDescriptor.moreOptions') }} diff --git a/src/pages/Supplier/Card/SupplierDescriptor.vue b/src/pages/Supplier/Card/SupplierDescriptor.vue index b8479d8f6..4ef76c2f8 100644 --- a/src/pages/Supplier/Card/SupplierDescriptor.vue +++ b/src/pages/Supplier/Card/SupplierDescriptor.vue @@ -17,6 +17,10 @@ const $props = defineProps({ required: false, default: null, }, + summary: { + type: Object, + default: null, + }, }); const route = useRoute(); @@ -106,6 +110,7 @@ const getEntryQueryParams = (supplier) => { :filter="filter" @on-fetch="setData" data-key="supplier" + :summary="$props.summary" > <template #header-extra-action> <QBtn diff --git a/src/pages/Supplier/Card/SupplierDescriptorProxy.vue b/src/pages/Supplier/Card/SupplierDescriptorProxy.vue index b730a39dd..6311939b8 100644 --- a/src/pages/Supplier/Card/SupplierDescriptorProxy.vue +++ b/src/pages/Supplier/Card/SupplierDescriptorProxy.vue @@ -1,5 +1,6 @@ <script setup> import SupplierDescriptor from './SupplierDescriptor.vue'; +import SupplierSummary from './SupplierSummary.vue'; const $props = defineProps({ id: { @@ -11,6 +12,6 @@ const $props = defineProps({ <template> <QPopupProxy> - <SupplierDescriptor v-if="$props.id" :id="$props.id" /> + <SupplierDescriptor v-if="$props.id" :id="$props.id" :summary="SupplierSummary" /> </QPopupProxy> </template> diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue index 607ecb560..1dc6acb17 100644 --- a/src/pages/Travel/ExtraCommunity.vue +++ b/src/pages/Travel/ExtraCommunity.vue @@ -78,7 +78,7 @@ const tableColumnComponents = { }, ref: { component: VnInput, - attrs: { dense: true }, + attrs: { dense: true, class: 'bold' }, event: (val, field, rowIndex) => ({ 'keyup.enter': () => saveFieldValue(val, field, rowIndex), blur: () => saveFieldValue(val, field, rowIndex), @@ -88,9 +88,13 @@ const tableColumnComponents = { component: 'span', attrs: {}, }, + percentage: { + component: 'span', + attrs: {}, + }, kg: { component: VnInput, - attrs: { dense: true, type: 'number', min: 0, class: 'input-number' }, + attrs: { dense: true, type: 'number', min: 0, class: 'input-number bold' }, event: (val, field, rowIndex) => ({ 'keyup.enter': () => saveFieldValue(val, field, rowIndex), blur: () => saveFieldValue(val, field, rowIndex), @@ -179,6 +183,14 @@ const columns = computed(() => [ showValue: true, sortable: true, }, + { + label: '%', + field: '', + name: 'percentage', + align: 'center', + showValue: false, + sortable: true, + }, { label: t('kg'), field: 'kg', @@ -419,6 +431,10 @@ const handleDragScroll = (event) => { stopScroll(); } }; + +const getKgPercentage = ({ kg, loadedKg, volumeKg }) => { + return Math.round((Math.max(loadedKg || 0, volumeKg || 0) / kg) * 100); +}; </script> <template> @@ -494,18 +510,28 @@ const handleDragScroll = (event) => { : {} " > - <template v-if="col.showValue"> - <span - :class="[ - 'text-left', - { - 'supplier-name': - col.name === 'cargoSupplierNickname', - }, - ]" - >{{ col.value }}</span - > - </template> + <QChip + v-if="col.name === 'percentage'" + :label="getKgPercentage(props.row) + '%'" + class="text-left q-py-xs q-px-sm" + :class="{ + 'bg-red-10': getKgPercentage(props.row) >= 100, + 'bg-deep-orange-10': + getKgPercentage(props.row) >= 80 && + getKgPercentage(props.row) < 100, + }" + /> + <span + v-else-if="col.showValue" + :class="[ + 'text-left', + { + 'supplier-name': + col.name === 'cargoSupplierNickname', + }, + ]" + v-text="col.value" + /> <!-- Main Row Descriptors --> <TravelDescriptorProxy v-if="col.name === 'id'" @@ -556,6 +582,7 @@ const handleDragScroll = (event) => { <QTd> <span>{{ entry.stickers }}</span> </QTd> + <QTd /> <QTd></QTd> <QTd> <span>{{ entry.loadedkg }}</span> @@ -572,8 +599,16 @@ const handleDragScroll = (event) => { </QTable> </QPage> </template> - +<style lang="scss"> +.bold input { + font-weight: bold; +} +</style> <style scoped lang="scss"> +.q-chip { + color: var(--vn-text-color); +} + :deep(.q-table) { border-collapse: collapse; } From 1052e9eb21dde0848e57efe6fad9e7b044ac90c2 Mon Sep 17 00:00:00 2001 From: jorgep <jorgep@verdnatura.es> Date: Wed, 12 Jun 2024 13:14:02 +0200 Subject: [PATCH 2/9] fix: refs #6238 use :deep --- src/pages/Travel/ExtraCommunity.vue | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue index 1dc6acb17..37fe27717 100644 --- a/src/pages/Travel/ExtraCommunity.vue +++ b/src/pages/Travel/ExtraCommunity.vue @@ -78,7 +78,7 @@ const tableColumnComponents = { }, ref: { component: VnInput, - attrs: { dense: true, class: 'bold' }, + attrs: { dense: true }, event: (val, field, rowIndex) => ({ 'keyup.enter': () => saveFieldValue(val, field, rowIndex), blur: () => saveFieldValue(val, field, rowIndex), @@ -94,7 +94,7 @@ const tableColumnComponents = { }, kg: { component: VnInput, - attrs: { dense: true, type: 'number', min: 0, class: 'input-number bold' }, + attrs: { dense: true, type: 'number', min: 0, class: 'input-number' }, event: (val, field, rowIndex) => ({ 'keyup.enter': () => saveFieldValue(val, field, rowIndex), blur: () => saveFieldValue(val, field, rowIndex), @@ -599,11 +599,6 @@ const getKgPercentage = ({ kg, loadedKg, volumeKg }) => { </QTable> </QPage> </template> -<style lang="scss"> -.bold input { - font-weight: bold; -} -</style> <style scoped lang="scss"> .q-chip { color: var(--vn-text-color); @@ -613,6 +608,10 @@ const getKgPercentage = ({ kg, loadedKg, volumeKg }) => { border-collapse: collapse; } +.q-td :deep(input) { + font-weight: bold; +} + .dashed-border { &.--left { border-left: 1px dashed #ccc; From 2641489d832bb0536aa0f2d7f9dd4de7aa639273 Mon Sep 17 00:00:00 2001 From: jorgep <jorgep@verdnatura.es> Date: Wed, 12 Jun 2024 13:45:17 +0200 Subject: [PATCH 3/9] fix: refs #6238 use .value prop --- src/components/FormModel.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue index 426d99b9a..1487b0d76 100644 --- a/src/components/FormModel.vue +++ b/src/components/FormModel.vue @@ -89,7 +89,7 @@ const modelValue = computed( () => $props.model ?? `formModel_${route?.meta?.title ?? route.name}` ); const componentIsRendered = ref(false); -const arrayData = useArrayData(modelValue); +const arrayData = useArrayData(modelValue.value); const isLoading = ref(false); // Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas const isResetting = ref(false); From 19aa1bf01dac45545b8ba9656f61682518e5b53f Mon Sep 17 00:00:00 2001 From: jorgep <jorgep@verdnatura.es> Date: Wed, 12 Jun 2024 14:48:31 +0200 Subject: [PATCH 4/9] fix; refs #6238 fix test --- test/cypress/integration/VnLocation.spec.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/test/cypress/integration/VnLocation.spec.js b/test/cypress/integration/VnLocation.spec.js index 84b2086cc..6d6e15ff2 100644 --- a/test/cypress/integration/VnLocation.spec.js +++ b/test/cypress/integration/VnLocation.spec.js @@ -2,8 +2,7 @@ const locationOptions = '[role="listbox"] > div.q-virtual-scroll__content > .q-i describe('VnLocation', () => { const dialogInputs = '.q-dialog label input'; describe('Worker Create', () => { - const inputLocation = - '.q-form .q-card > :nth-child(3) > .q-field > .q-field__inner > .q-field__control > .q-field__control-container'; + const inputLocation = '.q-form input[aria-label="Location"]'; beforeEach(() => { cy.viewport(1280, 720); cy.login('developer'); @@ -25,9 +24,6 @@ describe('VnLocation', () => { cy.get(inputLocation).clear(); cy.get(inputLocation).type('ecuador'); cy.get(locationOptions).should('have.length.at.least', 1); - cy.get( - '.q-form .q-card > :nth-child(3) > .q-field > .q-field__inner > .q-field__control > :nth-child(3) > .q-icon' - ).click(); }); }); describe('Fiscal-data', () => { @@ -39,7 +35,7 @@ describe('VnLocation', () => { }); it('Create postCode', function () { cy.get( - ':nth-child(6) > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon' + ':nth-child(6) > .q-field > .q-field__inner > .q-field__control > :nth-child(3) > .q-icon' ).click(); cy.get('.q-card > h1').should('have.text', 'New postcode'); cy.get(dialogInputs).eq(0).clear('12'); From 7393b82008b448db5953349acb49fb301d106ad1 Mon Sep 17 00:00:00 2001 From: jorgep <jorgep@verdnatura.es> Date: Wed, 12 Jun 2024 16:46:14 +0200 Subject: [PATCH 5/9] refactor: refs #6238 update getRate function and color logic --- src/pages/Travel/ExtraCommunity.vue | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue index 37fe27717..d6669260f 100644 --- a/src/pages/Travel/ExtraCommunity.vue +++ b/src/pages/Travel/ExtraCommunity.vue @@ -432,9 +432,14 @@ const handleDragScroll = (event) => { } }; -const getKgPercentage = ({ kg, loadedKg, volumeKg }) => { +const getRate = ({ kg, loadedKg, volumeKg }) => { return Math.round((Math.max(loadedKg || 0, volumeKg || 0) / kg) * 100); }; + +const getColor = (percentage) => { + if (percentage >= 100) return 'red-10'; + else if (percentage >= 80 && percentage < 100) return 'deep-orange-10'; +}; </script> <template> @@ -512,14 +517,9 @@ const getKgPercentage = ({ kg, loadedKg, volumeKg }) => { > <QChip v-if="col.name === 'percentage'" - :label="getKgPercentage(props.row) + '%'" + :label="getRate(props.row) + '%'" class="text-left q-py-xs q-px-sm" - :class="{ - 'bg-red-10': getKgPercentage(props.row) >= 100, - 'bg-deep-orange-10': - getKgPercentage(props.row) >= 80 && - getKgPercentage(props.row) < 100, - }" + :color="getColor(getRate(props.row))" /> <span v-else-if="col.showValue" @@ -599,6 +599,7 @@ const getKgPercentage = ({ kg, loadedKg, volumeKg }) => { </QTable> </QPage> </template> + <style scoped lang="scss"> .q-chip { color: var(--vn-text-color); From bd6e45d2601879c8c29e8fcd05382b97dfa29af0 Mon Sep 17 00:00:00 2001 From: jorgep <jorgep@verdnatura.es> Date: Fri, 14 Jun 2024 14:52:39 +0200 Subject: [PATCH 6/9] refactor: refs #6238 get percentage from back --- src/pages/Travel/ExtraCommunity.vue | 31 ++++++++++++++++++++--------- 1 file changed, 22 insertions(+), 9 deletions(-) diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue index d6669260f..6ea34fa2e 100644 --- a/src/pages/Travel/ExtraCommunity.vue +++ b/src/pages/Travel/ExtraCommunity.vue @@ -53,6 +53,7 @@ const draggedRowIndex = ref(null); const targetRowIndex = ref(null); const entryRowIndex = ref(null); const draggedEntry = ref(null); +const travelKgPercentages = ref([]); const tableColumnComponents = { id: { @@ -290,6 +291,8 @@ const saveFieldValue = async (val, field, index) => { await axios.patch(`Travels/${id}`, params); // Actualizar la copia de los datos originales con el nuevo valor originalRowDataCopy.value[index][field] = val; + + await arrayData.fetch({ append: false }); } catch (err) { console.error('Error updating travel'); } @@ -314,6 +317,11 @@ onMounted(async () => { landedTo.value.setDate(landedTo.value.getDate() + 7); landedTo.value.setHours(23, 59, 59, 59); + const { data } = await axios.get('TravelKgPercentages', { + params: { filter: JSON.stringify({ order: 'value DESC' }) }, + }); + + travelKgPercentages.value = data; await getData(); }); @@ -432,13 +440,9 @@ const handleDragScroll = (event) => { } }; -const getRate = ({ kg, loadedKg, volumeKg }) => { - return Math.round((Math.max(loadedKg || 0, volumeKg || 0) / kg) * 100); -}; - const getColor = (percentage) => { - if (percentage >= 100) return 'red-10'; - else if (percentage >= 80 && percentage < 100) return 'deep-orange-10'; + for (const { value, className } of travelKgPercentages.value) + if (percentage > value) return className; }; </script> @@ -481,7 +485,7 @@ const getColor = (percentage) => { <template #body="props"> <QTr :props="props" - class="cursor-pointer bg-vn-primary-row" + class="cursor-pointer bg-travel" @click="navigateToTravelId(props.row.id)" @dragenter="handleDragEnter($event, props.rowIndex)" @dragover.prevent @@ -517,9 +521,13 @@ const getColor = (percentage) => { > <QChip v-if="col.name === 'percentage'" - :label="getRate(props.row) + '%'" + :label=" + props.row.percentageKg + ? `${props.row.percentageKg}%` + : '-' + " class="text-left q-py-xs q-px-sm" - :color="getColor(getRate(props.row))" + :color="getColor(props.row.percentageKg)" /> <span v-else-if="col.showValue" @@ -613,6 +621,11 @@ const getColor = (percentage) => { font-weight: bold; } +.bg-travel { + background-color: var(--vn-page-color); + border-bottom: 1.6px solid orange; +} + .dashed-border { &.--left { border-left: 1px dashed #ccc; From 94f4e154b037e286bf6f26be4a78c9aaafd60f75 Mon Sep 17 00:00:00 2001 From: jorgep <jorgep@verdnatura.es> Date: Mon, 17 Jun 2024 10:39:36 +0200 Subject: [PATCH 7/9] refactor: refs #6238 use variable & link class --- src/pages/Travel/ExtraCommunity.vue | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue index 6ea34fa2e..639c7d894 100644 --- a/src/pages/Travel/ExtraCommunity.vue +++ b/src/pages/Travel/ExtraCommunity.vue @@ -537,6 +537,11 @@ const getColor = (percentage) => { 'supplier-name': col.name === 'cargoSupplierNickname', }, + { + link: ['id', 'cargoSupplierNickname'].includes( + col.name + ), + }, ]" v-text="col.value" /> @@ -573,11 +578,11 @@ const getColor = (percentage) => { }" > <QTd> - <QBtn flat color="primary">{{ entry.id }} </QBtn> + <QBtn flat class="link">{{ entry.id }} </QBtn> <EntryDescriptorProxy :id="entry.id" /> </QTd> <QTd> - <QBtn flat color="primary" dense>{{ entry.supplierName }}</QBtn> + <QBtn flat class="link" dense>{{ entry.supplierName }}</QBtn> <SupplierDescriptorProxy :id="entry.supplierFk" /> </QTd> <QTd /> @@ -623,7 +628,7 @@ const getColor = (percentage) => { .bg-travel { background-color: var(--vn-page-color); - border-bottom: 1.6px solid orange; + border-bottom: 2px solid $primary; } .dashed-border { From 3f2779600ae39803f0011db8393a07e0bf7a37dc Mon Sep 17 00:00:00 2001 From: jorgep <jorgep@verdnatura.es> Date: Tue, 18 Jun 2024 10:13:43 +0200 Subject: [PATCH 8/9] fix: refs #6238 drop old fix --- src/components/FormModel.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue index daf350c86..336ea281e 100644 --- a/src/components/FormModel.vue +++ b/src/components/FormModel.vue @@ -89,7 +89,7 @@ const modelValue = computed( () => $props.model ?? `formModel_${route?.meta?.title ?? route.name}` ).value; const componentIsRendered = ref(false); -const arrayData = useArrayData(modelValue.value); +const arrayData = useArrayData(modelValue); const isLoading = ref(false); // Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas const isResetting = ref(false); From 14ef5ccefde6b263dfc3c465d3a781addc0d6656 Mon Sep 17 00:00:00 2001 From: jorgep <jorgep@verdnatura.es> Date: Tue, 18 Jun 2024 10:14:55 +0200 Subject: [PATCH 9/9] fix: refs #6238 rollback --- test/cypress/integration/VnLocation.spec.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/test/cypress/integration/VnLocation.spec.js b/test/cypress/integration/VnLocation.spec.js index 6d6e15ff2..84b2086cc 100644 --- a/test/cypress/integration/VnLocation.spec.js +++ b/test/cypress/integration/VnLocation.spec.js @@ -2,7 +2,8 @@ const locationOptions = '[role="listbox"] > div.q-virtual-scroll__content > .q-i describe('VnLocation', () => { const dialogInputs = '.q-dialog label input'; describe('Worker Create', () => { - const inputLocation = '.q-form input[aria-label="Location"]'; + const inputLocation = + '.q-form .q-card > :nth-child(3) > .q-field > .q-field__inner > .q-field__control > .q-field__control-container'; beforeEach(() => { cy.viewport(1280, 720); cy.login('developer'); @@ -24,6 +25,9 @@ describe('VnLocation', () => { cy.get(inputLocation).clear(); cy.get(inputLocation).type('ecuador'); cy.get(locationOptions).should('have.length.at.least', 1); + cy.get( + '.q-form .q-card > :nth-child(3) > .q-field > .q-field__inner > .q-field__control > :nth-child(3) > .q-icon' + ).click(); }); }); describe('Fiscal-data', () => { @@ -35,7 +39,7 @@ describe('VnLocation', () => { }); it('Create postCode', function () { cy.get( - ':nth-child(6) > .q-field > .q-field__inner > .q-field__control > :nth-child(3) > .q-icon' + ':nth-child(6) > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon' ).click(); cy.get('.q-card > h1').should('have.text', 'New postcode'); cy.get(dialogInputs).eq(0).clear('12');