Merge pull request 'refactor: refs #8699 adjust column alignment in ExtraCommunity.vue for better readability' (!1647) from 8699-align-correctly-extra-comunity-columns into dev
gitea/salix-front/pipeline/head This commit looks good
Details
gitea/salix-front/pipeline/head This commit looks good
Details
Reviewed-on: #1647 Reviewed-by: Alex Moreno <alexm@verdnatura.es>
This commit is contained in:
commit
3caa4abe9e
|
|
@ -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)"
|
||||
/>
|
||||
<span
|
||||
|
|
@ -566,7 +548,6 @@ watch(route, () => {
|
|||
]"
|
||||
v-text="col.value"
|
||||
/>
|
||||
<!-- Main Row Descriptors -->
|
||||
<TravelDescriptorProxy
|
||||
v-if="col.name === 'id'"
|
||||
:id="props.row.id"
|
||||
|
|
@ -597,7 +578,7 @@ watch(route, () => {
|
|||
index === props.row.entries.length - 1,
|
||||
}"
|
||||
>
|
||||
<QTd>
|
||||
<QTd class="text-right">
|
||||
<QBtn dense flat class="link">{{ entry.id }} </QBtn>
|
||||
<EntryDescriptorProxy :id="entry.id" />
|
||||
</QTd>
|
||||
|
|
@ -605,7 +586,7 @@ watch(route, () => {
|
|||
<QBtn flat class="link" dense>{{ entry.supplierName }}</QBtn>
|
||||
<SupplierDescriptorProxy :id="entry.supplierFk" />
|
||||
</QTd>
|
||||
<QTd>
|
||||
<QTd class="text-center">
|
||||
<QIcon
|
||||
v-if="entry.isCustomInspectionRequired"
|
||||
name="warning"
|
||||
|
|
@ -615,21 +596,21 @@ watch(route, () => {
|
|||
>
|
||||
</QIcon>
|
||||
</QTd>
|
||||
<QTd>
|
||||
<QTd class="text-right">
|
||||
<span>{{ toCurrency(entry.invoiceAmount) }}</span>
|
||||
</QTd>
|
||||
<QTd>
|
||||
<span>{{ entry.reference }}</span>
|
||||
</QTd>
|
||||
<QTd>
|
||||
<QTd class="text-right">
|
||||
<span>{{ entry.stickers }}</span>
|
||||
</QTd>
|
||||
<QTd />
|
||||
<QTd></QTd>
|
||||
<QTd>
|
||||
<QTd class="text-right">
|
||||
<span>{{ entry.loadedkg }}</span>
|
||||
</QTd>
|
||||
<QTd>
|
||||
<QTd class="text-right">
|
||||
<span>{{ entry.volumeKg }}</span>
|
||||
</QTd>
|
||||
<QTd />
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue