wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

refactor: refs #6238 get percentage from back

This commit is contained in:
Jorge Penadés 2024-06-14 14:52:39 +02:00
parent fc54b44c7b
commit bd6e45d260
1 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/Travel/ExtraCommunity.vue
View File

@ -53,6 +53,7 @@ const draggedRowIndex = ref(null);
const targetRowIndex = ref(null); const targetRowIndex = ref(null);
const entryRowIndex = ref(null); const entryRowIndex = ref(null);
const draggedEntry = ref(null); const draggedEntry = ref(null);
const travelKgPercentages = ref([]);
const tableColumnComponents = { const tableColumnComponents = {
id: { id: {
@ -290,6 +291,8 @@ const saveFieldValue = async (val, field, index) => {
await axios.patch(`Travels/${id}`, params); await axios.patch(`Travels/${id}`, params);
// Actualizar la copia de los datos originales con el nuevo valor // Actualizar la copia de los datos originales con el nuevo valor
originalRowDataCopy.value[index][field] = val; originalRowDataCopy.value[index][field] = val;
await arrayData.fetch({ append: false });
} catch (err) { } catch (err) {
console.error('Error updating travel'); console.error('Error updating travel');
} }
@ -314,6 +317,11 @@ onMounted(async () => {
landedTo.value.setDate(landedTo.value.getDate() + 7); landedTo.value.setDate(landedTo.value.getDate() + 7);
landedTo.value.setHours(23, 59, 59, 59); 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(); 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) => { const getColor = (percentage) => {
if (percentage >= 100) return 'red-10'; for (const { value, className } of travelKgPercentages.value)
else if (percentage >= 80 && percentage < 100) return 'deep-orange-10'; if (percentage > value) return className;
}; };
</script> </script>
@ -481,7 +485,7 @@ const getColor = (percentage) => {
<template #body="props"> <template #body="props">
<QTr <QTr
:props="props" :props="props"
class="cursor-pointer bg-vn-primary-row" class="cursor-pointer bg-travel"
@click="navigateToTravelId(props.row.id)" @click="navigateToTravelId(props.row.id)"
@dragenter="handleDragEnter($event, props.rowIndex)" @dragenter="handleDragEnter($event, props.rowIndex)"
@dragover.prevent @dragover.prevent
@ -517,9 +521,13 @@ const getColor = (percentage) => {
> >
<QChip <QChip
v-if="col.name === 'percentage'" 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" class="text-left q-py-xs q-px-sm"
:color="getColor(getRate(props.row))" :color="getColor(props.row.percentageKg)"
/> />
<span <span
v-else-if="col.showValue" v-else-if="col.showValue"
@ -613,6 +621,11 @@ const getColor = (percentage) => {
font-weight: bold; font-weight: bold;
} }
.bg-travel {
background-color: var(--vn-page-color);
border-bottom: 1.6px solid orange;
}
.dashed-border { .dashed-border {
&.--left { &.--left {
border-left: 1px dashed #ccc; border-left: 1px dashed #ccc;