diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue index 38858aafe7d..dcfbf0d4330 100644 --- a/src/pages/Travel/ExtraCommunity.vue +++ b/src/pages/Travel/ExtraCommunity.vue @@ -140,7 +140,6 @@ const columns = computed(() => [ label: 'id', field: 'id', name: 'id', - align: 'center', showValue: true, sortable: true, }, @@ -164,7 +163,7 @@ const columns = computed(() => [ label: t('globals.amount'), name: 'invoiceAmount', field: 'entries', - align: 'left', + align: 'right', showValue: true, sortable: true, format: (value) => @@ -189,7 +188,7 @@ const columns = computed(() => [ label: t('globals.packages'), field: 'stickers', name: 'stickers', - align: 'left', + align: 'right', showValue: true, sortable: true, }, @@ -197,7 +196,7 @@ const columns = computed(() => [ label: '%', field: '', name: 'percentage', - align: 'center', + align: 'right', showValue: false, sortable: true, }, @@ -213,7 +212,7 @@ const columns = computed(() => [ label: t('extraCommunity.physicKg'), field: 'loadedKg', name: 'loadedKg', - align: 'left', + align: 'right', showValue: true, sortable: true, }, @@ -221,7 +220,7 @@ const columns = computed(() => [ label: 'KG Vol.', field: 'volumeKg', name: 'volumeKg', - align: 'left', + align: 'right', showValue: true, sortable: true, }, @@ -276,7 +275,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)); }; @@ -299,20 +297,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(); @@ -334,14 +329,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; }; @@ -355,11 +348,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); @@ -369,13 +359,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 && @@ -398,7 +386,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)); } @@ -412,14 +399,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) @@ -430,13 +415,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; @@ -546,7 +528,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 }} @@ -604,7 +585,7 @@ watch(route, () => { {{ entry.supplierName }} - + { > - + {{ toCurrency(entry.invoiceAmount) }} {{ entry.reference }} - + {{ entry.stickers }} - + {{ entry.loadedkg }} - + {{ entry.volumeKg }} @@ -652,9 +633,6 @@ watch(route, () => { :deep(.q-table) { border-collapse: collapse; - th { - padding: 0; - } tbody tr td { &:nth-child(1) { max-width: 65px; @@ -663,6 +641,10 @@ watch(route, () => { padding: 0; } } + thead > tr > th { + padding: 3px; + color: var(--vn-label-color); + } } .q-td :deep(input) {