forked from verdnatura/salix-front
general improvements
This commit is contained in:
parent
de7d2b4e72
commit
c322bfb46c
|
|
@ -1,6 +1,6 @@
|
|||
<script setup>
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { QBtn, QField, QPopupEdit } from 'quasar';
|
||||
import { QBtn } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
|
|
@ -47,6 +47,7 @@ const arrayData = useArrayData('ExtraCommunity', {
|
|||
});
|
||||
|
||||
const rows = computed(() => arrayData.store.data || []);
|
||||
const originalRowDataCopy = ref(null);
|
||||
const draggedRowIndex = ref(null);
|
||||
const targetRowIndex = ref(null);
|
||||
const entryRowIndex = ref(null);
|
||||
|
|
@ -59,7 +60,12 @@ const tableColumnComponents = {
|
|||
},
|
||||
cargoSupplierNickname: {
|
||||
component: QBtn,
|
||||
attrs: { flat: true, color: 'primary', dense: true },
|
||||
attrs: {
|
||||
flat: true,
|
||||
color: 'primary',
|
||||
dense: true,
|
||||
class: 'supplier-name-button',
|
||||
},
|
||||
},
|
||||
agencyModeName: {
|
||||
component: 'span',
|
||||
|
|
@ -70,16 +76,24 @@ const tableColumnComponents = {
|
|||
attrs: {},
|
||||
},
|
||||
ref: {
|
||||
component: QField,
|
||||
attrs: { readonly: true, dense: true, class: 'cursor-pointer' },
|
||||
component: VnInput,
|
||||
attrs: { dense: true },
|
||||
event: (val, field, rowIndex) => ({
|
||||
'keyup.enter': () => saveFieldValue(val, field, rowIndex),
|
||||
blur: () => saveFieldValue(val, field, rowIndex),
|
||||
}),
|
||||
},
|
||||
stickers: {
|
||||
component: 'span',
|
||||
attrs: {},
|
||||
},
|
||||
kg: {
|
||||
component: QField,
|
||||
attrs: { readonly: true, dense: true, class: 'cursor-pointer' },
|
||||
component: VnInput,
|
||||
attrs: { dense: true },
|
||||
event: (val, field, rowIndex) => ({
|
||||
'keyup.enter': () => saveFieldValue(val, field, rowIndex),
|
||||
blur: () => saveFieldValue(val, field, rowIndex),
|
||||
}),
|
||||
},
|
||||
loadedKg: {
|
||||
component: 'span',
|
||||
|
|
@ -203,7 +217,7 @@ const columns = computed(() => [
|
|||
align: 'left',
|
||||
showValue: true,
|
||||
sortable: true,
|
||||
format: (value) => toDate(value.substring(0, 10)),
|
||||
format: (value) => toDate(value),
|
||||
},
|
||||
{
|
||||
label: t('globals.wareHouseIn'),
|
||||
|
|
@ -220,7 +234,7 @@ const columns = computed(() => [
|
|||
align: 'left',
|
||||
showValue: true,
|
||||
sortable: true,
|
||||
format: (value) => toDate(value.substring(0, 10)),
|
||||
format: (value) => toDate(value),
|
||||
},
|
||||
]);
|
||||
|
||||
|
|
@ -239,9 +253,12 @@ const openReportPdf = () => {
|
|||
|
||||
const saveFieldValue = async (val, field, index) => {
|
||||
try {
|
||||
if (originalRowDataCopy.value[index][field] == val) return;
|
||||
|
||||
const id = rows.value[index].id;
|
||||
const params = { [field]: val };
|
||||
await axios.patch(`Travels/${id}`, params);
|
||||
originalRowDataCopy.value[index][field] = val;
|
||||
} catch (err) {
|
||||
console.error('Error updating travel');
|
||||
}
|
||||
|
|
@ -266,6 +283,9 @@ onMounted(async () => {
|
|||
landedTo.value.setDate(landedTo.value.getDate() + 7);
|
||||
landedTo.value.setHours(23, 59, 59, 59);
|
||||
await getData();
|
||||
|
||||
// el objetivo de esto es guardar una copia de los valores iniciales de todas las rows para evitar guardar cambios si la data no cambió al disparar los eventos
|
||||
originalRowDataCopy.value = JSON.parse(JSON.stringify(rows.value));
|
||||
});
|
||||
|
||||
const handleDragStart = (event, rowIndex, entryIndex) => {
|
||||
|
|
@ -380,47 +400,34 @@ const cleanDragAndDropData = () => {
|
|||
:props="props"
|
||||
@click="stopEventPropagation($event, col)"
|
||||
:class="{ 'dashed-border': targetRowIndex === props.rowIndex }"
|
||||
auto-width
|
||||
>
|
||||
<component
|
||||
:is="tableColumnComponents[col.name].component"
|
||||
v-bind="tableColumnComponents[col.name].attrs"
|
||||
v-model="rows[props.rowIndex][col.field]"
|
||||
v-on="
|
||||
tableColumnComponents[col.name].event
|
||||
? tableColumnComponents[col.name].event(
|
||||
rows[props.rowIndex][col.field],
|
||||
col.field,
|
||||
props.rowIndex
|
||||
)
|
||||
: {}
|
||||
"
|
||||
>
|
||||
<!-- Editable 'ref' and 'kg' QField slot -->
|
||||
<template
|
||||
v-if="col.name === 'ref' || col.name === 'kg'"
|
||||
#control
|
||||
>
|
||||
<div
|
||||
class="self-center full-width no-outline"
|
||||
tabindex="0"
|
||||
>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
<QPopupEdit
|
||||
:key="col.name"
|
||||
v-model="col.value"
|
||||
label-set="Save"
|
||||
label-cancel="Close"
|
||||
>
|
||||
<VnInput
|
||||
v-model="rows[props.pageIndex][col.field]"
|
||||
dense
|
||||
autofocus
|
||||
@keyup.enter="
|
||||
saveFieldValue(
|
||||
rows[props.pageIndex][col.field],
|
||||
col.field,
|
||||
props.rowIndex
|
||||
)
|
||||
"
|
||||
/>
|
||||
</QPopupEdit>
|
||||
</template>
|
||||
|
||||
<template v-if="col.showValue">
|
||||
{{ col.value }}
|
||||
<span
|
||||
:class="[
|
||||
'text-left',
|
||||
{
|
||||
'supplier-name':
|
||||
col.name === 'cargoSupplierNickname',
|
||||
},
|
||||
]"
|
||||
>{{ col.value }}</span
|
||||
>
|
||||
</template>
|
||||
|
||||
<!-- Main Row Descriptors -->
|
||||
<TravelDescriptorProxy
|
||||
v-if="col.name === 'id'"
|
||||
|
|
@ -501,6 +508,20 @@ const cleanDragAndDropData = () => {
|
|||
.dragged-row {
|
||||
background-color: $primary-light;
|
||||
}
|
||||
|
||||
.supplier-name {
|
||||
display: flex;
|
||||
max-width: 150px;
|
||||
|
||||
@media (max-width: $breakpoint-md-max) {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.supplier-name-button {
|
||||
white-space: normal;
|
||||
width: max-content;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
|
|
|
|||
Loading…
Reference in New Issue