Merge branch 'dev' into 6797-deployDev-useBun

package.json

@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "24.8.0",
+    "version": "24.10.0",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",

src/components/common/VnLocation.vue

@@ -50,7 +50,10 @@ const value = computed({
         return $props.modelValue;
     },
     set(value) {
-        emit('update:modelValue', value);
+        emit(
+            'update:modelValue',
+            postcodesOptions.value.find((p) => p.code === value)
+        );
     },
 });
 
@@ -101,16 +104,11 @@ function handleFetch(data) {
         :label="t('Location')"
         :placeholder="t('search_by_postalcode')"
         @input-value="locationFilter"
-        :default-filter="true"
+        :default-filter="false"
         :input-debounce="300"
         :class="{ required: $attrs.required }"
         v-bind="$attrs"
-        emit-value
-        map-options
-        use-input
         clearable
-        hide-selected
-        fill-input
     >
         <template #form>
             <CreateNewPostcode @on-data-saved="locationFilter()" />

src/components/common/VnSelectFilter.vue

@@ -116,14 +116,14 @@ async function fetchFilter(val) {
 }
 
 async function filterHandler(val, update) {
-    update(
+    if (!$props.defaultFilter) return update();
-        async () => {
+    let newOptions;
-            if (!$props.defaultFilter) return;
     if ($props.url) {
-                myOptions.value = await fetchFilter(val);
+        newOptions = await fetchFilter(val);
-                return;
+    } else newOptions = filter(val, myOptionsOriginal.value);
-            }
+    update(
-            myOptions.value = filter(val, myOptionsOriginal.value);
+        () => {
+            myOptions.value = newOptions;
         },
         (ref) => {
             if (val !== '' && ref.options.length > 0) {

src/components/ui/CardDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, useSlots, watch, computed } from 'vue';
+import { onMounted, useSlots, watch, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
@@ -39,6 +39,7 @@ const slots = useSlots();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const entity = computed(() => useArrayData($props.dataKey).store.data);
+const isLoading = ref(false);
 
 defineExpose({
     getData,
@@ -60,15 +61,20 @@ async function getData() {
         filter: $props.filter,
         skip: 0,
     });
+    isLoading.value = true;
+    try {
         const { data } = await arrayData.fetch({ append: false, updateRouter: false });
         emit('onFetch', data);
+    } finally {
+        isLoading.value = false;
+    }
 }
 const emit = defineEmits(['onFetch']);
 </script>
 
 <template>
     <div class="descriptor">
-        <template v-if="entity">
+        <template v-if="entity && !isLoading">
             <div class="header bg-primary q-pa-sm justify-between">
                 <slot name="header-extra-action" />
                 <QBtn
@@ -154,8 +160,13 @@ const emit = defineEmits(['onFetch']);
             <slot name="after" />
         </template>
         <!-- Skeleton -->
-        <SkeletonDescriptor v-if="!entity" />
+        <SkeletonDescriptor v-if="!entity || isLoading" />
     </div>
+    <QInnerLoading
+        :label="t('globals.pleaseWait')"
+        :showing="isLoading"
+        color="primary"
+    />
 </template>
 
 <style lang="scss">
@@ -210,11 +221,8 @@ const emit = defineEmits(['onFetch']);
     margin-bottom: 15px;
 }
 .list-box {
-    width: 90%;
     background-color: var(--vn-gray);
-    margin: 10px auto;
+
-    padding: 10px 5px 10px 0px;
-    border-radius: 8px;
     .q-item__label {
         color: var(--vn-label);
     }

src/components/ui/CardSummary.vue

@@ -90,17 +90,16 @@ watch(props, async () => {
         background-color: var(--vn-gray);
 
         > .q-card.vn-one {
-            width: 350px;
             flex: 1;
         }
         > .q-card.vn-two {
-            flex: 2;
+            flex: 40%;
         }
         > .q-card.vn-three {
-            flex: 4;
+            flex: 75%;
         }
         > .q-card.vn-max {
-            width: 100%;
+            flex: 100%;
         }
 
         > .q-card {

src/components/ui/SkeletonDescriptor.vue

@@ -1,10 +1,39 @@
 <template>
     <div id="descriptor-skeleton">
-        <div class="col q-pl-sm q-pa-sm">
+        <div class="row justify-between q-pa-sm">
-            <QSkeleton type="text" square height="45px" />
+            <QSkeleton square size="40px" />
-            <QSkeleton type="text" square height="18px" />
+            <QSkeleton square size="40px" />
-            <QSkeleton type="text" square height="18px" />
+            <QSkeleton square height="40px" width="20px" />
-            <QSkeleton type="text" square height="18px" />
+        </div>
+        <div class="col justify-between q-pa-sm q-gutter-y-xs">
+            <QSkeleton square height="40px" width="150px" />
+            <QSkeleton square height="30px" width="70px" />
+        </div>
+        <div class="col q-pl-sm q-pa-sm q-mb-md">
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
         </div>
 
         <QCardActions>

src/components/ui/VnNotes.vue

@@ -39,14 +39,14 @@ async function insert() {
             ref="vnPaginateRef"
         >
             <template #body="{ rows }">
-                <QCard class="q-pa-md q-mb-md" v-for="(note, index) in rows" :key="index">
+                <QCard class="q-pa-xs q-mb-md" v-for="(note, index) in rows" :key="index">
                     <QCardSection horizontal>
                         <slot name="picture">
                             <VnAvatar :descriptor="false" :worker-id="note.workerFk" />
                         </slot>
                         <QItem class="full-width justify-between items-start">
                             <VnUserLink
-                                :name="`${note.worker.firstName} ${note.worker.lastName}`"
+                                :name="`${note.worker.user.nickname}`"
                                 :worker-id="note.worker.id"
                             />
 
@@ -55,7 +55,7 @@ async function insert() {
                             </slot>
                         </QItem>
                     </QCardSection>
-                    <QCardSection>
+                    <QCardSection class="q-pa-sm">
                         <slot name="text">
                             {{ note.text }}
                         </slot>
@@ -63,15 +63,8 @@ async function insert() {
                 </QCard>
             </template>
         </VnPaginate>
-        <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QPageSticky position="bottom-right" :offset="[25, 25]" v-if="addNote">
-            <QBtn
+            <QBtn color="primary" icon="add" size="lg" round @click="noteModal = true" />
-                v-if="addNote"
-                color="primary"
-                icon="add"
-                size="lg"
-                round
-                @click="noteModal = true"
-            />
         </QPageSticky>
         <QDialog v-model="noteModal" @hide="newNote = ''">
             <QCard>

src/composables/useArrayData.js

@@ -105,6 +105,7 @@ export function useArrayData(key, userOptions) {
             for (const row of response.data) store.data.push(row);
         } else {
             store.data = response.data;
+            if (!document.querySelectorAll('[role="dialog"]'))
                 updateRouter && updateStateParams();
         }
 

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/i18n/en/index.js

@@ -547,6 +547,7 @@ export default {
             responsible: 'Responsible',
             worker: 'Worker',
             redelivery: 'Redelivery',
+            returnOfMaterial: 'RMA',
         },
         basicData: {
             customer: 'Customer',

src/i18n/es/index.js

@@ -546,6 +546,7 @@ export default {
             responsible: 'Responsable',
             worker: 'Trabajador',
             redelivery: 'Devolución',
+            returnOfMaterial: 'RMA',
         },
         basicData: {
             customer: 'Cliente',

src/pages/Claim/Card/ClaimAction.vue

@@ -135,7 +135,7 @@ async function regularizeClaim() {
         message: t('globals.dataSaved'),
         type: 'positive',
     });
-    await onUpdateGreugeAccept();
+    if (multiplicatorValue.value) await onUpdateGreugeAccept();
 }
 
 async function onUpdateGreugeAccept() {

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate, toPercentage } from 'src/filters';
@@ -10,6 +10,7 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import { getUrl } from 'src/composables/getUrl';
 
 const $props = defineProps({
     id: {
@@ -22,7 +23,7 @@ const $props = defineProps({
 const route = useRoute();
 const state = useState();
 const { t } = useI18n();
-
+const salixUrl = ref();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
@@ -71,11 +72,10 @@ const filter = {
 };
 
 const STATE_COLOR = {
-    pending: 'positive',
+    pending: 'warning',
-    managed: 'warning',
+    managed: 'info',
-    resolved: 'negative',
+    resolved: 'positive',
 };
-
 function stateColor(code) {
     return STATE_COLOR[code];
 }
@@ -85,6 +85,9 @@ const setData = (entity) => {
     data.value = useCardDescription(entity.client.name, entity.id);
     state.set('ClaimDescriptor', entity);
 };
+onMounted(async () => {
+    salixUrl.value = await getUrl('');
+});
 </script>
 
 <template>
@@ -167,6 +170,20 @@ const setData = (entity) => {
                 >
                     <QTooltip>{{ t('claim.card.claimedTicket') }}</QTooltip>
                 </QBtn>
+                <QBtn
+                    size="md"
+                    icon="assignment"
+                    color="primary"
+                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
+                >
+                </QBtn>
+                <QBtn
+                    size="md"
+                    icon="visibility"
+                    color="primary"
+                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
+                >
+                </QBtn>
             </QCardActions>
         </template>
     </CardDescriptor>

src/pages/Claim/Card/ClaimLines.vue

@@ -11,6 +11,7 @@ import CrudModel from 'components/CrudModel.vue';
 import FetchData from 'components/FetchData.vue';
 import VnDiscount from 'components/common/vnDiscount.vue';
 import ClaimLinesImport from './ClaimLinesImport.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 const quasar = useQuasar();
 const route = useRoute();
@@ -229,7 +230,14 @@ function showImportDialog() {
                                 </QPopupEdit>
                             </QTd>
                         </template>
-
+                        <template #body-cell-description="{ row, value }">
+                            <QTd auto-width align="right" class="text-primary">
+                                {{ value }}
+                                <ItemDescriptorProxy
+                                    :id="row.sale.itemFk"
+                                ></ItemDescriptorProxy>
+                            </QTd>
+                        </template>
                         <template #body-cell-discount="{ row, value, rowIndex }">
                             <QTd auto-width align="right" class="text-primary">
                                 {{ value }}

src/pages/Claim/Card/ClaimNotes.vue

@@ -19,6 +19,12 @@ const claimFilter = {
         relation: 'worker',
         scope: {
             fields: ['id', 'firstName', 'lastName'],
+            include: {
+                relation: 'user',
+                scope: {
+                    fields: ['id', 'nickname'],
+                },
+            },
         },
     },
 };
@@ -30,7 +36,8 @@ const body = {
 </script>
 <template>
     <div class="column items-center">
-        <VnNotes style="overflow-y: scroll;"
+        <VnNotes
+            style="overflow-y: scroll"
             :add-note="$props.addNote"
             :id="id"
             url="claimObservations"

src/pages/Claim/Card/ClaimSummary.vue

@@ -10,6 +10,7 @@ import { useSession } from 'src/composables/useSession';
 import VnLv from 'src/components/ui/VnLv.vue';
 import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -42,11 +43,6 @@ onMounted(async () => {
     claimUrl.value = salixUrl.value + `claim/${entityId.value}/`;
 });
 
-watch(entityId, async (id) => {
-    claimDmsFilter.value.where = { claimFk: id };
-    await claimDmsRef.value.fetch();
-});
-
 const detailsColumns = ref([
     {
         name: 'item',
@@ -101,11 +97,9 @@ const detailsColumns = ref([
 ]);
 
 const STATE_COLOR = {
-    pending: 'positive',
+    pending: 'warning',
-
+    managed: 'info',
-    managed: 'warning',
+    resolved: 'positive',
-
-    resolved: 'negative',
 };
 function stateColor(code) {
     return STATE_COLOR[code];
@@ -170,7 +164,6 @@ function openDialog(dmsId) {
         :filter="claimDmsFilter"
         @on-fetch="(data) => setClaimDms(data)"
         limit="20"
-        auto-load
         ref="claimDmsRef"
     />
     <CardSummary ref="summary" :url="`Claims/${entityId}/getSummary`">
@@ -210,15 +203,29 @@ function openDialog(dmsId) {
                         />
                     </template>
                 </VnLv>
+                <VnLv :label="t('claim.summary.customer')">
+                    <template #value>
+                        <VnUserLink
+                            :name="claim.client?.name"
+                            :worker-id="claim.client?.id"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('claim.summary.returnOfMaterial')" :value="claim.rma" />
+                <QCheckbox
+                    :align-items="right"
+                    :label="t('claim.basicData.picked')"
+                    v-model="claim.hasToPickUp"
+                />
             </QCard>
-            <QCard class="vn-max claimVnNotes">
+            <QCard class="vn-three claimVnNotes full-height">
                 <a class="header" :href="`#/claim/${entityId}/notes`">
                     {{ t('claim.summary.notes') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
                 <ClaimNotes :add-note="false" style="height: 350px" order="created ASC" />
             </QCard>
-            <QCard class="vn-max" v-if="salesClaimed.length > 0">
+            <QCard class="vn-two" v-if="salesClaimed.length > 0">
                 <a class="header" :href="`#/claim/${entityId}/lines`">
                     {{ t('claim.summary.details') }}
                     <QIcon name="open_in_new" color="primary" />
@@ -231,8 +238,43 @@ function openDialog(dmsId) {
                             </QTh>
                         </QTr>
                     </template>
+                    <template #body="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                <span v-if="col.name != 'description'">{{
+                                    t(col.value)
+                                }}</span>
+                                <QBtn
+                                    v-if="col.name == 'description'"
+                                    flat
+                                    color="blue"
+                                    >{{ col.value }}</QBtn
+                                >
+                                <ItemDescriptorProxy
+                                    v-if="col.name == 'description'"
+                                    :id="2"
+                                ></ItemDescriptorProxy>
+                            </QTh>
+                        </QTr>
+                    </template>
                 </QTable>
             </QCard>
+            <QCard class="vn-two" v-if="developments.length > 0">
+                <a class="header" :href="claimUrl + 'development'">
+                    {{ t('claim.summary.development') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <QTable :columns="developmentColumns" :rows="developments" flat>
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
+
             <QCard class="vn-max" v-if="claimDms.length > 0">
                 <a class="header" :href="`#/claim/${entityId}/photos`">
                     {{ t('claim.summary.photos') }}
@@ -275,22 +317,8 @@ function openDialog(dmsId) {
                     </div>
                 </div>
             </QCard>
-            <QCard class="vn-two" v-if="developments.length > 0">
+
-                <a class="header" :href="claimUrl + 'development'">
+            <QCard class="vn-max">
-                    {{ t('claim.summary.development') }}
-                    <QIcon name="open_in_new" color="primary" />
-                </a>
-                <QTable :columns="developmentColumns" :rows="developments" flat>
-                    <template #header="props">
-                        <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                {{ t(col.label) }}
-                            </QTh>
-                        </QTr>
-                    </template>
-                </QTable>
-            </QCard>
-            <QCard class="vn-max" v-if="developments.length > 0">
                 <a class="header" :href="claimUrl + 'action'">
                     {{ t('claim.summary.actions') }}
                     <QIcon name="open_in_new" color="primary" />

src/pages/Claim/ClaimList.vue

@@ -12,6 +12,7 @@ import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorP
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import ClaimSummary from './Card/ClaimSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { getUrl } from 'src/composables/getUrl';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -19,14 +20,19 @@ const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 
 const STATE_COLOR = {
-    pending: 'positive',
+    pending: 'warning',
-    managed: 'warning',
+    managed: 'info',
-    resolved: 'negative',
+    resolved: 'positive',
 };
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
 function stateColor(code) {
     return STATE_COLOR[code];
 }
-function navigate(id) {
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/claim/${id}/summary`);
     router.push({ path: `/claim/${id}` });
 }
 </script>
@@ -66,7 +72,7 @@ function navigate(id) {
             <VnPaginate
                 data-key="ClaimList"
                 url="Claims/filter"
-                order="claimStateFk"
+                :order="['priority ASC', 'created DESC']"
                 auto-load
             >
                 <template #body="{ rows }">
@@ -74,7 +80,7 @@ function navigate(id) {
                         :id="row.id"
                         :key="row.id"
                         :title="row.clientName"
-                        @click="navigate(row.id)"
+                        @click="navigate($event, row.id)"
                         v-for="row of rows"
                     >
                         <template #list-items>
@@ -109,12 +115,6 @@ function navigate(id) {
                             </VnLv>
                         </template>
                         <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openCard')"
-                                @click.stop="navigate(row.id)"
-                                class="bg-vn-dark"
-                                outline
-                            />
                             <QBtn
                                 :label="t('components.smartCard.viewDescription')"
                                 @click.stop

src/pages/Customer/Card/CustomerDescriptor.vue

@@ -19,10 +19,8 @@ const $props = defineProps({
         default: null,
     },
 });
-
 const route = useRoute();
 const { t } = useI18n();
-
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });

src/pages/InvoiceIn/Card/InvoiceInBasicData.vue

@@ -186,6 +186,7 @@ async function upsert() {
                         url="Suppliers"
                         :fields="['id', 'nickname']"
                         sort-by="nickname"
+                        :is-clearable="false"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">

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,8 +108,9 @@ const columns = computed(() => [
         label: 'id',
         field: 'id',
         name: 'id',
-        align: 'left',
+        align: 'center',
         showValue: true,
+        sortable: true,
     },
     {
         label: t('supplier.pageTitles.supplier'),
@@ -119,6 +118,7 @@ const columns = computed(() => [
         name: 'cargoSupplierNickname',
         align: 'left',
         showValue: true,
+        sortable: true,
     },
     {
         label: t('globals.agency'),
@@ -126,6 +126,7 @@ const columns = computed(() => [
         name: 'agencyModeName',
         align: 'left',
         showValue: true,
+        sortable: true,
     },
     {
         label: t('globals.amount'),
@@ -133,6 +134,7 @@ const columns = computed(() => [
         field: 'entries',
         align: 'left',
         showValue: true,
+        sortable: true,
         format: (value) =>
             toCurrency(
                 value
@@ -148,6 +150,7 @@ const columns = computed(() => [
         name: 'ref',
         align: 'left',
         showValue: false,
+        sortable: true,
     },
     {
         label: t('globals.packages'),
@@ -155,13 +158,15 @@ const columns = computed(() => [
         name: 'stickers',
         align: 'left',
         showValue: true,
+        sortable: true,
     },
     {
         label: t('kg'),
         field: 'kg',
         name: 'kg',
         align: 'left',
-        showValue: true,
+        showValue: false,
+        sortable: true,
     },
     {
         label: t('physicKg'),
@@ -169,6 +174,7 @@ const columns = computed(() => [
         name: 'loadedKg',
         align: 'left',
         showValue: true,
+        sortable: true,
     },
     {
         label: 'KG Vol.',
@@ -176,6 +182,7 @@ const columns = computed(() => [
         name: 'volumeKg',
         align: 'left',
         showValue: true,
+        sortable: true,
     },
     {
         label: t('globals.wareHouseOut'),
@@ -183,14 +190,16 @@ const columns = computed(() => [
         name: 'warehouseOutName',
         align: 'left',
         showValue: true,
+        sortable: true,
     },
     {
         label: t('shipped'),
         field: 'shipped',
         name: 'shipped',
         align: 'left',
-        format: (value) => toDate(value.substring(0, 10)),
         showValue: true,
+        sortable: true,
+        format: (value) => toDate(value.substring(0, 10)),
     },
     {
         label: t('globals.wareHouseIn'),
@@ -198,14 +207,16 @@ const columns = computed(() => [
         name: 'warehouseInName',
         align: 'left',
         showValue: true,
+        sortable: true,
     },
     {
         label: t('landed'),
         field: 'landed',
         name: 'landed',
         align: 'left',
-        format: (value) => toDate(value.substring(0, 10)),
         showValue: true,
+        sortable: true,
+        format: (value) => toDate(value.substring(0, 10)),
     },
 ]);
 
@@ -237,7 +248,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 +301,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 +317,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 +371,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 +408,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

src/router/modules/travel.js

@@ -34,7 +34,7 @@ export default {
                     name: 'ExtraCommunity',
                     meta: {
                         title: 'extraCommunity',
-                        icon: 'vn:shipment-01',
+                        icon: 'vn:shipment',
                     },
                     component: () => import('src/pages/Travel/ExtraCommunity.vue'),
                 },

test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 describe('InvoiceInBasicData', () => {
-    const selects = '.q-form .q-select';
+    const selects = ':nth-child(1) > :nth-child(1) > .q-field';
     const appendBtns = 'label button';
     const dialogAppendBtns = '.q-dialog label button';
     const dialogInputs = '.q-dialog input';
@@ -12,9 +12,7 @@ describe('InvoiceInBasicData', () => {
     });
 
     it('should edit the provideer and supplier ref', () => {
-        cy.get(selects).eq(0).click();
+        cy.selectOption(selects, 'Bros');
-        cy.get(selects).eq(0).type('Bros');
-        cy.get(selects).eq(0).type('{enter}');
 
         cy.get('[title="Reset"]').click();
         cy.get(appendBtns).eq(0).click();

test/cypress/integration/invoiceIn/invoiceInList.spec.js

@@ -7,6 +7,7 @@ describe('InvoiceInList', () => {
     const summaryHeaders = '.summaryBody .header';
 
     beforeEach(() => {
+        cy.viewport(1920, 1080);
         cy.login('developer');
         cy.visit(`/#/invoice-in/list`);
     });

test/vitest/__tests__/pages/Claims/ClaimLines.spec.js

@@ -1,6 +1,6 @@
 import { vi, describe, expect, it, beforeAll, beforeEach, afterEach } from 'vitest';
 import { createWrapper, axios } from 'app/test/vitest/helper';
-import ClaimLines from 'pages/Claim/Card/ClaimLines.vue';
+import ClaimLines from '/src/pages/Claim/Card/ClaimLines.vue';
 
 describe('ClaimLines', () => {
     let vm;