diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue index ac46caa44..d30629a80 100644 --- a/src/pages/Travel/ExtraCommunity.vue +++ b/src/pages/Travel/ExtraCommunity.vue @@ -141,7 +141,6 @@ const columns = computed(() => [ label: 'id', field: 'id', name: 'id', - align: 'center', showValue: true, sortable: true, }, @@ -165,7 +164,7 @@ const columns = computed(() => [ label: t('globals.amount'), name: 'invoiceAmount', field: 'entries', - align: 'left', + align: 'right', showValue: true, sortable: true, format: (value) => @@ -190,7 +189,7 @@ const columns = computed(() => [ label: t('globals.packages'), field: 'stickers', name: 'stickers', - align: 'left', + align: 'right', showValue: true, sortable: true, }, @@ -198,7 +197,7 @@ const columns = computed(() => [ label: '%', field: '', name: 'percentage', - align: 'center', + align: 'right', showValue: false, sortable: true, }, @@ -214,7 +213,7 @@ const columns = computed(() => [ label: t('extraCommunity.physicKg'), field: 'loadedKg', name: 'loadedKg', - align: 'left', + align: 'right', showValue: true, sortable: true, }, @@ -222,7 +221,7 @@ const columns = computed(() => [ label: 'KG Vol.', field: 'volumeKg', name: 'volumeKg', - align: 'left', + align: 'right', showValue: true, sortable: true, }, @@ -277,7 +276,6 @@ async function getData() { const onStoreDataChange = () => { const newData = JSON.parse(JSON.stringify(arrayData.store.data)) || []; rows.value = newData; - // el objetivo de esto es guardar una copia de los valores iniciales de todas las rows para corroborar si la data cambio antes de guardar los cambios originalRowDataCopy.value = JSON.parse(JSON.stringify(newData)); }; @@ -300,20 +298,17 @@ const openReportPdf = () => { }; const saveFieldValue = async (val, field, index) => { - // Evitar la solicitud de guardado si el valor no ha cambiado if (originalRowDataCopy.value[index][field] == val) return; const id = rows.value[index].id; const params = { [field]: val }; 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 }); }; const stopEventPropagation = (event, col) => { - // Detener la propagación del evento de los siguientes elementos para evitar el click sobre la row que dispararía la función navigateToTravelId if (!['ref', 'id', 'cargoSupplierNickname', 'kg'].includes(col.name)) return; event.preventDefault(); event.stopPropagation(); @@ -335,14 +330,12 @@ onMounted(async () => { await getData(); }); -// Handler del evento @dragstart (inicio del drag) y guarda información inicial const handleDragStart = (event, rowIndex, entryIndex) => { draggedRowIndex.value = rowIndex; entryRowIndex.value = entryIndex; event.dataTransfer.effectAllowed = 'move'; }; -// Handler del evento @dragenter (cuando haces drag sobre une elemento y lo arrastras sobre un posible target de drop) y actualiza el targetIndex const handleDragEnter = (_, targetIndex) => { targetRowIndex.value = targetIndex; }; @@ -356,11 +349,8 @@ const saveRowDrop = async (targetRowIndex) => { const moveRow = async (draggedRowIndex, targetRowIndex, entryIndex) => { try { if (draggedRowIndex === targetRowIndex) return; - // Remover entry de la row original draggedEntry.value = rows.value[draggedRowIndex].entries.splice(entryIndex, 1)[0]; - //Si la row de destino por alguna razón no tiene la propiedad entry la creamos if (!rows.value[targetRowIndex].entries) rows.value[targetRowIndex].entries = []; - // Añadir entry a la row de destino rows.value[targetRowIndex].entries.push(draggedEntry.value); await saveRowDrop(targetRowIndex); @@ -370,13 +360,11 @@ const moveRow = async (draggedRowIndex, targetRowIndex, entryIndex) => { } }; -// Handler de cuando haces un drop tanto dentro como fuera de la tabla para limpiar acciones y data const handleDragEnd = () => { stopScroll(); cleanDragAndDropData(); }; -// Handler del evento @drop (cuando soltas el elemento draggeado sobre un target) const handleDrop = () => { if ( !draggedRowIndex.value && @@ -399,7 +387,6 @@ const cleanDragAndDropData = () => { const scrollInterval = ref(null); const startScroll = (direction) => { - // Iniciar el scroll en la dirección especificada if (!scrollInterval.value) { scrollInterval.value = requestAnimationFrame(() => scroll(direction)); } @@ -413,14 +400,12 @@ const stopScroll = () => { }; const scroll = (direction) => { - // Controlar el desplazamiento en la dirección especificada const yOffset = direction === 'up' ? -2 : 2; window.scrollBy(0, yOffset); const windowHeight = window.innerHeight; const documentHeight = document.body.offsetHeight; - // Verificar si se alcanzaron los límites de la ventana para detener el desplazamiento if ( (direction === 'up' && window.scrollY > 0) || (direction === 'down' && windowHeight + window.scrollY < documentHeight) @@ -431,13 +416,10 @@ const scroll = (direction) => { } }; -// Handler del scroll mientras se hace el drag de una row const handleDragScroll = (event) => { - // Obtener la posición y dimensiones del cursor const y = event.clientY; const windowHeight = window.innerHeight; - // Verificar si el cursor está cerca del borde superior o inferior de la ventana const nearTop = y < 150; const nearBottom = y > windowHeight - 100; @@ -547,7 +529,7 @@ watch(route, () => { ? `${props.row.percentageKg}%` : '-' " - class="text-left q-py-xs q-px-sm" + class="text-right q-py-xs q-px-sm" :color="getColor(props.row.percentageKg)" /> { ]" v-text="col.value" /> - { index === props.row.entries.length - 1, }" > - + {{ entry.id }} @@ -605,7 +586,7 @@ watch(route, () => { {{ entry.supplierName }} - + { > - + {{ toCurrency(entry.invoiceAmount) }} {{ entry.reference }} - + {{ entry.stickers }} - + {{ entry.loadedkg }} - + {{ entry.volumeKg }} @@ -664,9 +645,6 @@ watch(route, () => { :deep(.q-table) { border-collapse: collapse; - th { - padding: 0; - } tbody tr td { &:nth-child(1) { max-width: 65px; @@ -675,6 +653,10 @@ watch(route, () => { padding: 0; } } + thead > tr > th { + padding: 3px; + color: var(--vn-label-color); + } } .q-td :deep(input) {