feat: refs 6238 show notes & create vnPopup

src/components/common/VnPopup.vue

@@ -0,0 +1,23 @@
+<script setup>
+defineProps({
+    title: { type: String, default: null },
+    content: { type: [String, Number], default: null },
+});
+</script>
+<template>
+    <QPopupProxy>
+        <QCard>
+            <slot name="title">
+                <div
+                    class="header q-px-sm q-py-xs q-ma-none text-white text-bold bg-primary"
+                    v-text="title"
+                />
+            </slot>
+            <slot name="content">
+                <QCardSection class="change-detail q-pa-sm">
+                    {{ content }}
+                </QCardSection>
+            </slot>
+        </QCard>
+    </QPopupProxy>
+</template>

src/components/ui/CardDescriptor.vue

@@ -39,6 +39,7 @@ const $props = defineProps({
 });
 
 const state = useState();
+const route = useRoute();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 let arrayData;
@@ -57,7 +58,7 @@ onBeforeMount(async () => {
     store = arrayData.store;
     entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
     // It enables to load data only once if the module is the same as the dataKey
-    if ($props.dataKey !== useRoute().meta.moduleName) await getData();
+    if ($props.dataKey !== route.meta.moduleName || !route.params.id) await getData();
     watch(
         () => [$props.url, $props.filter],
         async () => await getData()

src/i18n/locale/en.yml

@@ -113,6 +113,7 @@ globals:
     name: Name
     new: New
     comment: Comment
+    observations: Observations
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred

src/i18n/locale/es.yml

@@ -113,6 +113,7 @@ globals:
     name: Nombre
     new: Nuevo
     comment: Comentario
+    observations: Observaciones
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor

src/pages/Travel/ExtraCommunity.vue

@@ -2,7 +2,6 @@
 import { onMounted, ref, computed, watch } from 'vue';
 import { QBtn } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
 
 import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
@@ -19,8 +18,8 @@ import { usePrintService } from 'composables/usePrintService';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import axios from 'axios';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import VnPopup from 'src/components/common/VnPopup.vue';
 
-const router = useRouter();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { openReport } = usePrintService();
@@ -125,6 +124,10 @@ const tableColumnComponents = {
         component: 'span',
         attrs: {},
     },
+    notes: {
+        component: 'span',
+        attrs: {},
+    },
 };
 
 const columns = computed(() => [
@@ -250,6 +253,14 @@ const columns = computed(() => [
         sortable: true,
         format: (value) => toDate(value),
     },
+    {
+        label: t('notes'),
+        field: '',
+        name: 'notes',
+        align: 'center',
+        showValue: false,
+        sortable: true,
+    },
 ]);
 
 async function getData() {
@@ -298,10 +309,6 @@ const saveFieldValue = async (val, field, index) => {
     }
 };
 
-const navigateToTravelId = (id) => {
-    router.push({ path: `/travel/${id}` });
-};
-
 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;
@@ -486,7 +493,7 @@ const getColor = (percentage) => {
                 <QTr
                     :props="props"
                     class="cursor-pointer bg-travel"
-                    @click="navigateToTravelId(props.row.id)"
+                    @click="$router.push({ path: `/travel/${props.row.id}` })"
                     @dragenter="handleDragEnter($event, props.rowIndex)"
                     @dragover.prevent
                     @drop="handleDrop()"
@@ -607,6 +614,14 @@ const getColor = (percentage) => {
                     <QTd />
                     <QTd />
                     <QTd />
+                    <QTd>
+                        <QBtn icon="comment" size="sm" color="primary">
+                            <VnPopup
+                                :title="t('globals.observations')"
+                                :content="entry.evaNotes"
+                            />
+                        </QBtn>
+                    </QTd>
                 </QTr>
             </template>
         </QTable>
@@ -675,6 +690,7 @@ en:
     physicKg: Phy. KG
     shipped: W. shipped
     landed: W. landed
+    observations: Observations
 
 es:
     searchExtraCommunity: Buscar por envío extra comunitario