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');