refactor: refs #6238 get percentage from back

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;