WIP

src/css/app.scss

@@ -67,6 +67,14 @@ body.body--dark {
     max-width: 60em;
 }
 
+.bg-vn-primary-row {
+    background-color: var(--vn-dark);
+}
+
+.bg-vn-secondary-row {
+    background-color: var(--vn-light-gray);
+}
+
 /* Estilo para el asterisco en campos requeridos */
 .q-field.required .q-field__label:after {
     content: ' *';

src/pages/Travel/ExtraCommunity.vue

@@ -51,57 +51,55 @@ const rows = computed(() => arrayData.store.data || []);
 const tableColumnComponents = {
     id: {
         component: QBtn,
-        attrs: () => ({ flat: true, color: 'blue', class: 'col-content' }),
+        attrs: { flat: true, color: 'primary' },
     },
     cargoSupplierNickname: {
         component: QBtn,
-        attrs: () => ({ flat: true, color: 'blue', class: 'col-content' }),
+        attrs: { flat: true, color: 'primary', dense: true },
     },
     agencyModeName: {
         component: 'span',
-        attrs: () => ({ class: 'col-content' }),
+        attrs: {},
     },
     invoiceAmount: {
         component: 'span',
-        attrs: () => ({
+        attrs: {},
-            class: 'col-content',
-        }),
     },
     ref: {
         component: QField,
-        attrs: () => ({ readonly: true, dense: true }),
+        attrs: { readonly: true, dense: true, class: 'cursor-pointer' },
     },
     stickers: {
         component: 'span',
-        attrs: () => ({ class: 'col-content' }),
+        attrs: {},
     },
     kg: {
-        component: 'span',
+        component: QField,
-        attrs: () => ({ class: 'col-content' }),
+        attrs: { readonly: true, dense: true, class: 'cursor-pointer' },
     },
     loadedKg: {
         component: 'span',
-        attrs: () => ({ class: 'col-content' }),
+        attrs: {},
     },
     volumeKg: {
         component: 'span',
-        attrs: () => ({ class: 'col-content' }),
+        attrs: {},
     },
     warehouseOutName: {
         component: 'span',
-        attrs: () => ({ class: 'col-content' }),
+        attrs: {},
     },
     shipped: {
         component: 'span',
-        attrs: () => ({ class: 'col-content' }),
+        attrs: {},
     },
     warehouseInName: {
         component: 'span',
-        attrs: () => ({ class: 'col-content' }),
+        attrs: {},
     },
     landed: {
         component: 'span',
-        attrs: () => ({ class: 'col-content' }),
+        attrs: {},
     },
 };
 
@@ -110,7 +108,7 @@ const columns = computed(() => [
         label: 'id',
         field: 'id',
         name: 'id',
-        align: 'left',
+        align: 'center',
         showValue: true,
     },
     {
@@ -161,7 +159,7 @@ const columns = computed(() => [
         field: 'kg',
         name: 'kg',
         align: 'left',
-        showValue: true,
+        showValue: false,
     },
     {
         label: t('physicKg'),
@@ -237,7 +235,7 @@ const navigateToTravelId = (id) => {
 };
 
 const stopEventPropagation = (event, col) => {
-    if (!['ref', 'id', 'cargoSupplierNickname'].includes(col.name)) return;
+    if (!['ref', 'id', 'cargoSupplierNickname', 'kg'].includes(col.name)) return;
     event.preventDefault();
     event.stopPropagation();
 };
@@ -290,13 +288,13 @@ onMounted(async () => {
             hide-bottom
             row-key="clientId"
             :pagination="{ rowsPerPage: 0 }"
-            class="full-width q-mt-md"
+            class="full-width"
         >
             <template #body="props">
                 <QTr
                     :props="props"
                     @click="navigateToTravelId(props.row.id)"
-                    class="cursor-pointer"
+                    class="cursor-pointer bg-vn-primary-row"
                 >
                     <QTd
                         v-for="col in props.cols"
@@ -306,8 +304,7 @@ onMounted(async () => {
                     >
                         <component
                             :is="tableColumnComponents[col.name].component"
-                            class="col-content"
+                            v-bind="tableColumnComponents[col.name].attrs"
-                            v-bind="tableColumnComponents[col.name].attrs(props)"
                         >
                             <!-- Editable 'ref' and 'kg' QField slot -->
                             <template
@@ -361,36 +358,32 @@ onMounted(async () => {
                     v-for="entry in props.row.entries"
                     :key="entry.id"
                     :props="props"
-                    class="secondary-row"
+                    class="bg-vn-secondary-row"
                 >
-                    <QTd>
+                    <QTd class="row justify-center">
-                        <QBtn flat color="blue" class="col-content">{{ entry.id }} </QBtn>
+                        <QBtn flat color="primary">{{ entry.id }} </QBtn>
                         <EntryDescriptorProxy :id="entry.id" />
                     </QTd>
-                    <QTd
+                    <QTd>
-                        ><QBtn flat color="blue" class="col-content">{{
+                        <QBtn flat color="primary" dense>{{ entry.supplierName }}</QBtn>
-                            entry.supplierName
-                        }}</QBtn>
                         <SupplierDescriptorProxy :id="entry.supplierFk" />
                     </QTd>
                     <QTd></QTd>
                     <QTd
-                        ><span class="col-content">{{
+                        ><span>{{ toCurrency(entry.invoiceAmount) }}</span></QTd
-                            toCurrency(entry.invoiceAmount)
-                        }}</span></QTd
                     >
                     <QTd
-                        ><span class="col-content">{{ entry.reference }}</span></QTd
+                        ><span>{{ entry.reference }}</span></QTd
                     >
                     <QTd
-                        ><span class="col-content">{{ entry.stickers }}</span></QTd
+                        ><span>{{ entry.stickers }}</span></QTd
                     >
                     <QTd></QTd>
                     <QTd
-                        ><span class="col-content">{{ entry.loadedkg }}</span></QTd
+                        ><span>{{ entry.loadedkg }}</span></QTd
                     >
                     <QTd
-                        ><span class="col-content">{{ entry.volumeKg }}</span></QTd
+                        ><span>{{ entry.volumeKg }}</span></QTd
                     >
                     <QTd></QTd>
                     <QTd></QTd>
@@ -402,17 +395,6 @@ onMounted(async () => {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.col-content {
-    border-radius: 4px;
-    padding: 6px;
-}
-
-.secondary-row {
-    background-color: var(--vn-gray);
-}
-</style>
-
 <i18n>
 en:
     searchExtraCommunity: Search for extra community shipping