forked from verdnatura/salix-front
Add drag and drop do Travel Extra Community table
This commit is contained in:
parent
cd2eb71efd
commit
2693f259d4
|
|
@ -47,6 +47,10 @@ const arrayData = useArrayData('ExtraCommunity', {
|
|||
});
|
||||
|
||||
const rows = computed(() => arrayData.store.data || []);
|
||||
const draggedRowIndex = ref(null);
|
||||
const targetRowIndex = ref(null);
|
||||
const entryRowIndex = ref(null);
|
||||
const draggedEntry = ref(null);
|
||||
|
||||
const tableColumnComponents = {
|
||||
id: {
|
||||
|
|
@ -263,6 +267,56 @@ onMounted(async () => {
|
|||
landedTo.value.setHours(23, 59, 59, 59);
|
||||
await getData();
|
||||
});
|
||||
|
||||
const handleDragStart = (event, rowIndex, entryIndex) => {
|
||||
draggedRowIndex.value = rowIndex;
|
||||
entryRowIndex.value = entryIndex;
|
||||
event.dataTransfer.effectAllowed = 'move';
|
||||
};
|
||||
|
||||
const handleDragEnter = (_, targetIndex) => {
|
||||
targetRowIndex.value = targetIndex;
|
||||
};
|
||||
|
||||
const handleDragOver = (e) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const saveRowDrop = async (targetRowIndex) => {
|
||||
const entryId = draggedEntry.value.id;
|
||||
const travelId = rows.value[targetRowIndex].id;
|
||||
await axios.patch(`Entries/${entryId}`, { travelFk: travelId });
|
||||
};
|
||||
|
||||
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);
|
||||
} catch (err) {
|
||||
cleanDragAndDropData();
|
||||
console.error('Error moving row', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDrop = () => {
|
||||
if (!draggedRowIndex.value && !targetRowIndex.value) return;
|
||||
moveRow(draggedRowIndex.value, targetRowIndex.value, entryRowIndex.value);
|
||||
cleanDragAndDropData();
|
||||
};
|
||||
|
||||
const cleanDragAndDropData = () => {
|
||||
draggedRowIndex.value = null;
|
||||
targetRowIndex.value = null;
|
||||
entryRowIndex.value = null;
|
||||
draggedEntry.value = null;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -302,18 +356,23 @@ onMounted(async () => {
|
|||
row-key="clientId"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
class="full-width"
|
||||
table-style="user-select: none;"
|
||||
>
|
||||
<template #body="props">
|
||||
<QTr
|
||||
:props="props"
|
||||
@click="navigateToTravelId(props.row.id)"
|
||||
class="cursor-pointer bg-vn-primary-row"
|
||||
@click="navigateToTravelId(props.row.id)"
|
||||
@dragenter="handleDragEnter($event, props.rowIndex)"
|
||||
@dragover="handleDragOver($event)"
|
||||
@drop="handleDrop()"
|
||||
>
|
||||
<QTd
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click="stopEventPropagation($event, col)"
|
||||
:class="{ 'dashed-border': targetRowIndex === props.rowIndex }"
|
||||
>
|
||||
<component
|
||||
:is="tableColumnComponents[col.name].component"
|
||||
|
|
@ -367,47 +426,72 @@ onMounted(async () => {
|
|||
</component>
|
||||
</QTd>
|
||||
</QTr>
|
||||
|
||||
<QTr
|
||||
v-for="entry in props.row.entries"
|
||||
:key="entry.id"
|
||||
v-for="(entry, index) in props.row.entries"
|
||||
:key="index"
|
||||
:props="props"
|
||||
class="bg-vn-secondary-row"
|
||||
class="bg-vn-secondary-row cursor-pointer"
|
||||
@dragstart="handleDragStart($event, props.rowIndex, index)"
|
||||
@dragenter="handleDragEnter($event, props.rowIndex)"
|
||||
@dragover="handleDragOver($event)"
|
||||
@drop="handleDrop()"
|
||||
:draggable="true"
|
||||
:class="{
|
||||
'dragged-row':
|
||||
entryRowIndex === index && props.rowIndex === draggedRowIndex,
|
||||
}"
|
||||
>
|
||||
<QTd class="row justify-center">
|
||||
<QBtn flat color="primary">{{ entry.id }} </QBtn>
|
||||
<EntryDescriptorProxy :id="entry.id" />
|
||||
</QTd>
|
||||
<QTd>
|
||||
<QBtn flat color="primary" dense>{{ entry.supplierName }}</QBtn>
|
||||
<SupplierDescriptorProxy :id="entry.supplierFk" />
|
||||
</QTd>
|
||||
<QTd></QTd>
|
||||
<QTd
|
||||
><span>{{ toCurrency(entry.invoiceAmount) }}</span></QTd
|
||||
>
|
||||
<QTd
|
||||
><span>{{ entry.reference }}</span></QTd
|
||||
>
|
||||
<QTd
|
||||
><span>{{ entry.stickers }}</span></QTd
|
||||
>
|
||||
<QTd></QTd>
|
||||
<QTd
|
||||
><span>{{ entry.loadedkg }}</span></QTd
|
||||
>
|
||||
<QTd
|
||||
><span>{{ entry.volumeKg }}</span></QTd
|
||||
>
|
||||
<QTd></QTd>
|
||||
<QTd></QTd>
|
||||
<QTd></QTd>
|
||||
<QTd></QTd>
|
||||
<template v-if="entry">
|
||||
<QTd class="row justify-center">
|
||||
<QBtn flat color="primary">{{ entry.id }} </QBtn>
|
||||
<EntryDescriptorProxy :id="entry.id" />
|
||||
</QTd>
|
||||
<QTd>
|
||||
<QBtn flat color="primary" dense>{{
|
||||
entry.supplierName
|
||||
}}</QBtn>
|
||||
<SupplierDescriptorProxy :id="entry.supplierFk" />
|
||||
</QTd>
|
||||
<QTd></QTd>
|
||||
<QTd
|
||||
><span>{{ toCurrency(entry.invoiceAmount) }}</span></QTd
|
||||
>
|
||||
<QTd
|
||||
><span>{{ entry.reference }}</span></QTd
|
||||
>
|
||||
<QTd
|
||||
><span>{{ entry.stickers }}</span></QTd
|
||||
>
|
||||
<QTd></QTd>
|
||||
<QTd
|
||||
><span>{{ entry.loadedkg }}</span></QTd
|
||||
>
|
||||
<QTd
|
||||
><span>{{ entry.volumeKg }}</span></QTd
|
||||
>
|
||||
<QTd></QTd>
|
||||
<QTd></QTd>
|
||||
<QTd></QTd>
|
||||
<QTd></QTd>
|
||||
</template>
|
||||
</QTr>
|
||||
</template>
|
||||
</QTable>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dashed-border {
|
||||
border-bottom: 1px dashed #ccc !important;
|
||||
border-top: 1px dashed #ccc !important;
|
||||
}
|
||||
|
||||
.dragged-row {
|
||||
background-color: $secondary;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
en:
|
||||
searchExtraCommunity: Search for extra community shipping
|
||||
|
|
|
|||
Loading…
Reference in New Issue