general improvements

src/pages/Travel/ExtraCommunity.vue

@@ -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,
+        component: VnInput,
-        attrs: { readonly: true, dense: true, class: 'cursor-pointer' },
+        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,
+        component: VnInput,
-        attrs: { readonly: true, dense: true, class: 'cursor-pointer' },
+        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>