TravelSummary improvements

src/pages/Travel/Card/TravelSummary.vue

@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
 import { QCheckbox, QIcon } from 'quasar';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
 
 import travelService from 'src/services/travel.service';
 import { toDate, toCurrency } from 'src/filters';
@@ -55,60 +56,6 @@ const headerMenuOptions = [
     { name: t('travel.summary.AddEntry'), action: null },
 ];
 
-const tableColumnComponents = {
-    isConfirmed: {
-        component: () => QCheckbox,
-        props: (prop) => ({
-            disable: true,
-            'model-value': Boolean(prop.value),
-        }),
-    },
-    id: {
-        component: () => 'span',
-        props: () => {},
-        event: () => openEntryDescriptor(),
-    },
-    supplierName: {
-        component: () => 'span',
-        props: () => {},
-        event: () => {},
-    },
-    reference: {
-        component: () => 'span',
-        props: () => {},
-        event: () => {},
-    },
-    freightValue: {
-        component: () => 'span',
-        props: () => {},
-        event: () => {},
-    },
-    packageValue: {
-        component: () => 'span',
-        props: () => {},
-        event: () => {},
-    },
-    cc: {
-        component: () => 'span',
-        props: () => {},
-        event: () => {},
-    },
-    pallet: {
-        component: () => 'span',
-        props: () => {},
-        event: () => {},
-    },
-    m3: {
-        component: () => 'span',
-        props: () => {},
-        event: () => {},
-    },
-    observation: {
-        component: (props) => (props.value ? QIcon : null),
-        props: () => ({ name: 'insert_drive_file', color: 'primary', size: '25px' }),
-    },
-};
-
 const entriesTableColumns = computed(() => {
     return [
         {
@@ -182,8 +129,6 @@ async function setTravelData(data) {
 const redirectToCreateView = (queryParams) => {
     router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
 };
-
-const openEntryDescriptor = () => {};
 </script>
 
 <template>
@@ -269,31 +214,31 @@ const openEntryDescriptor = () => {};
                     row-key="id"
                     class="full-width q-mt-md"
                 >
-                    <template #body-cell="props">
-                        <QTd :props="props">
-                            <component
-                                :is="
-                                    tableColumnComponents[props.col.name].component(props)
-                                "
-                                v-bind="
-                                    tableColumnComponents[props.col.name].props(props)
-                                "
-                                @click="
-                                    tableColumnComponents[props.col.name].event(props)
-                                "
-                                class="col-content"
-                            >
-                                <template
-                                    v-if="
-                                        props.col.name !== 'observation' &&
-                                        props.col.name !== 'isConfirmed'
-                                    "
-                                    >{{ props.value }}</template
-                                >
-                                <QTooltip v-if="props.col.toolTip">{{
-                                    props.col.toolTip
-                                }}</QTooltip>
-                            </component>
+                    <template #body-cell-isConfirmed="{ row }">
+                        <QTd auto-width>
+                            <QIcon
+                                :name="row.isConfirmed ? 'check' : 'close'"
+                                :color="row.isConfirmed ? 'positive' : 'negative'"
+                                size="sm"
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-id="{ row }">
+                        <QTd auto-width>
+                            <QBtn flat color="blue">
+                                {{ row.id }}
+                                <EntryDescriptorProxy :id="row.id" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-observation="{ row }">
+                        <QTd auto-width>
+                            <QIcon
+                                v-if="row.observation"
+                                name="insert_drive_file"
+                                color="primary"
+                                size="sm"
+                            />
                         </QTd>
                     </template>
                 </QTable>

src/pages/Travel/TravelCreate.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { reactive, ref, onBeforeMount } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
@@ -13,6 +13,7 @@ import { toDate } from 'src/filters';
 
 const { t } = useI18n();
 const route = useRoute();
+const router = useRouter();
 
 const newTravelForm = reactive({
     ref: null,
@@ -43,6 +44,10 @@ onBeforeMount(() => {
         }
     }
 });
+
+const redirectToTravelBasicData = (_, { id }) => {
+    router.push({ name: 'TravelBasicData', params: { id } });
+};
 </script>
 
 <template>
@@ -63,6 +68,7 @@ onBeforeMount(() => {
             model="travel"
             :form-initial-data="newTravelForm"
             :observe-form-changes="viewAction === 'create'"
+            @on-data-saved="redirectToTravelBasicData"
         >
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">