Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 6772_reload_sections

Dockerfile

@@ -2,4 +2,4 @@ FROM node:stretch-slim
 RUN npm install -g @quasar/cli
 WORKDIR /app
 COPY dist/spa ./
-CMD ["quasar", "serve", "./", "--history", "--hostname", "0.0.0.0"]	
+CMD ["quasar", "serve", "./", "--history", "--hostname", "0.0.0.0"]

Jenkinsfile

@@ -1,99 +1,123 @@
 #!/usr/bin/env groovy
+
+def PROTECTED_BRANCH
+
+def BRANCH_ENV = [
+    test: 'test',
+    master: 'production'
+]
+
+node {
+    stage('Setup') {
+        env.FRONT_REPLICAS = 1
+        env.NODE_ENV = BRANCH_ENV[env.BRANCH_NAME] ?: 'dev'
+
+        PROTECTED_BRANCH = [
+            'dev',
+            'test',
+            'master'
+        ].contains(env.BRANCH_NAME)
+
+        // https://www.jenkins.io/doc/book/pipeline/jenkinsfile/#using-environment-variables
+        echo "NODE_NAME: ${env.NODE_NAME}"
+        echo "WORKSPACE: ${env.WORKSPACE}"
+
+        configFileProvider([
+            configFile(fileId: 'salix-front.properties',
+            variable: 'PROPS_FILE')
+        ]) {
+            def props = readProperties file: PROPS_FILE
+            props.each {key, value -> env."${key}" = value }
+            props.each {key, value -> echo "${key}: ${value}" }
+        }
+
+        if (PROTECTED_BRANCH) {
+            configFileProvider([
+                configFile(fileId: "salix-front.branch.${env.BRANCH_NAME}",
+                variable: 'BRANCH_PROPS_FILE')
+            ]) {
+                def props = readProperties file: BRANCH_PROPS_FILE
+                props.each {key, value -> env."${key}" = value }
+                props.each {key, value -> echo "${key}: ${value}" }
+            }
+        }
+    }
+}
+
 pipeline {
     agent any
     options {
         disableConcurrentBuilds()
     }
+    tools {
+        nodejs 'node-v18'
+    }
     environment {
         PROJECT_NAME = 'lilium'
         STACK_NAME   = "${env.PROJECT_NAME}-${env.BRANCH_NAME}"
     }
     stages {
-        stage('Checkout') {
-            steps {
-                script {
-                    switch (env.BRANCH_NAME) {
-                        case 'master':
-                            env.NODE_ENV = 'production'
-                            env.FRONT_REPLICAS = 2
-                            break
-                        case 'test':
-                            env.NODE_ENV = 'test'
-                            env.FRONT_REPLICAS = 1
-                            break
-                    }
-                }
-                setEnv()
-            }
-        }
         stage('Install') {
             environment {
                 NODE_ENV = ""
             }
             steps {
-                nodejs('node-v18') {
-                    sh 'npm install --no-audit --prefer-offline'
-                }
+                sh 'npm install --prefer-offline'
             }
         }
         stage('Test') {
-            when { not { anyOf {
-                branch 'test'
-                branch 'master'
-            }}}
+            when {
+                expression { !PROTECTED_BRANCH }
+            }
             environment {
                 NODE_ENV = ""
             }
-            parallel {
-                stage('Frontend') {
-                    steps {
-                        nodejs('node-v18') {
-                            sh 'npm run test:unit:ci'
+            steps {
+                sh 'npm run test:unit:ci'
+            }
+            post {
+                always {
+                    script {
+                        try {
+                            junit 'junitresults.xml'
+                            junit 'junit.xml'
+                        } catch (e) {
+                            echo e.toString()
                         }
                     }
                 }
             }
         }
         stage('Build') {
-            when { anyOf {
-                branch 'test'
-                branch 'master'
-            }}
+            when {
+                expression { PROTECTED_BRANCH }
+            }
             environment {
                 CREDENTIALS = credentials('docker-registry')
             }
             steps {
-                nodejs('node-v18') {
-                    sh 'quasar build'
+                sh 'quasar build'
+                script {
+                    def packageJson = readJSON file: 'package.json'
+                    env.VERSION = packageJson.version
                 }
                 dockerBuild()
             }
         }
         stage('Deploy') {
-            when { anyOf {
-                branch 'test'
-                branch 'master'
-            }}
+            when {
+                expression { PROTECTED_BRANCH }
+            }
             environment {
                 DOCKER_HOST = "${env.SWARM_HOST}"
             }
             steps {
+                script {
+                    def packageJson = readJSON file: 'package.json'
+                    env.VERSION = packageJson.version
+                }
                 sh "docker stack deploy --with-registry-auth --compose-file docker-compose.yml ${env.STACK_NAME}"
             }
         }
     }
-    post {
-        always {
-            script {
-                if (!['master', 'test'].contains(env.BRANCH_NAME)) {
-                    try {
-                        junit 'junitresults.xml'
-                        junit 'junit.xml'
-                    } catch (e) {
-                        echo e.toString()
-                    }
-                }
-            }
-        }
-    }
 }

README.md

@@ -5,13 +5,13 @@ Lilium frontend
 ## Install the dependencies
 
 ```bash
-npm install
+bun install
 ```
 
 ### Install quasar cli
 
 ```bash
-sudo npm install -g @quasar/cli
+sudo bun install -g @quasar/cli
 ```
 
 ### Start the app in development mode (hot-code reloading, error reporting, etc.)
@@ -23,7 +23,7 @@ quasar dev
 ### Run unit tests
 
 ```bash
-npm run test:unit
+bun run test:unit
 ```
 
 ### Run e2e tests

package.json

@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "24.8.0",
+    "version": "24.10.0",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",
@@ -46,7 +46,8 @@
     "engines": {
         "node": "^20 || ^18 || ^16",
         "npm": ">= 8.1.2",
-        "yarn": ">= 1.21.1"
+        "yarn": ">= 1.21.1",
+        "bun": ">= 1.0.25"
     },
     "overrides": {
         "@vitejs/plugin-vue": "^4.0.0",

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) {
+    if (!$props.defaultFilter) return update();
+    let newOptions;
+    if ($props.url) {
+        newOptions = await fetchFilter(val);
+    } else newOptions = filter(val, myOptionsOriginal.value);
     update(
-        async () => {
-            if (!$props.defaultFilter) return;
-            if ($props.url) {
-                myOptions.value = await fetchFilter(val);
-                return;
-            }
-            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,
     });
-    const { data } = await arrayData.fetch({ append: false, updateRouter: false });
-    emit('onFetch', data);
+    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">
@@ -177,16 +188,18 @@ const emit = defineEmits(['onFetch']);
         .label {
             color: var(--vn-label);
             font-size: 12px;
-            width: 47%;
+            ::after {
+                content: ':';
+            }
         }
         .value {
             color: var(--vn-text);
             font-size: 14px;
             margin-left: 12px;
-            width: 47%;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            text-align: left;
         }
         .info {
             margin-left: 5px;
@@ -210,11 +223,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">
-            <QSkeleton type="text" square height="45px" />
-            <QSkeleton type="text" square height="18px" />
-            <QSkeleton type="text" square height="18px" />
-            <QSkeleton type="text" square height="18px" />
+        <div class="row justify-between q-pa-sm">
+            <QSkeleton square size="40px" />
+            <QSkeleton square size="40px" />
+            <QSkeleton square height="40px" width="20px" />
+        </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/VnFilterPanel.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
+import { useRoute } from 'vue-router';
 import toDate from 'filters/toDate';
 
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
@@ -52,6 +53,7 @@ const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']);
 const arrayData = useArrayData(props.dataKey, {
     exprBuilder: props.exprBuilder,
 });
+const route = useRoute();
 const store = arrayData.store;
 const userParams = ref({});
 
@@ -63,6 +65,18 @@ onMounted(() => {
     emit('init', { params: userParams.value });
 });
 
+watch(
+    () => route.query.params,
+    (val) => {
+        if (!val) {
+            userParams.value = {};
+        } else {
+            const parsedParams = JSON.parse(val);
+            userParams.value = { ...parsedParams };
+        }
+    }
+);
+
 const isLoading = ref(false);
 async function search() {
     isLoading.value = true;

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]">
-            <QBtn
-                v-if="addNote"
-                color="primary"
-                icon="add"
-                size="lg"
-                round
-                @click="noteModal = true"
-            />
+        <QPageSticky position="bottom-right" :offset="[25, 25]" v-if="addNote">
+            <QBtn color="primary" icon="add" size="lg" round @click="noteModal = true" />
         </QPageSticky>
         <QDialog v-model="noteModal" @hide="newNote = ''">
             <QCard>

src/components/ui/VnTree.vue

@@ -1,20 +1,21 @@
 <script setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useState } from 'src/composables/useState';
 import { useQuasar } from 'quasar';
-
+import DepartmentDescriptorProxy from 'src/pages/Department/Card/DepartmentDescriptorProxy.vue';
 import CreateDepartmentChild from '../CreateDepartmentChild.vue';
-
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
+import { useRouter } from 'vue-router';
 
 const quasar = useQuasar();
 const { t } = useI18n();
-const router = useRouter();
 const { notify } = useNotify();
+const state = useState();
+const router = useRouter();
 
-const treeRef = ref(null);
+const treeRef = ref();
 const showCreateNodeFormVal = ref(false);
 const creationNodeSelectedId = ref(null);
 const expanded = ref([]);
@@ -24,30 +25,35 @@ const nodes = ref([{ id: null, name: t('Departments'), sons: true, children: [{}
 const fetchedChildrensSet = ref(new Set());
 
 const onNodeExpanded = (nodeKeysArray) => {
-    // Verificar si el nodo ya fue expandido
     if (!fetchedChildrensSet.value.has(nodeKeysArray.at(-1))) {
         fetchedChildrensSet.value.add(nodeKeysArray.at(-1));
-        fetchNodeLeaves(nodeKeysArray.at(-1)); // Llamar a la función para obtener los nodos hijos
+        fetchNodeLeaves(nodeKeysArray.at(-1));
     }
+
+    state.set('Tree', nodeKeysArray);
 };
 
 const fetchNodeLeaves = async (nodeKey) => {
     try {
-        const node = treeRef.value.getNodeByKey(nodeKey);
+        const node = treeRef.value?.getNodeByKey(nodeKey);
+
         if (!node || node.sons === 0) return;
 
         const params = { parentId: node.id };
         const response = await axios.get('/departments/getLeaves', { params });
-
-        // Si hay datos en la respuesta y tiene hijos, agregarlos al nodo actual
         if (response.data) {
-            node.children = response.data;
-            node.children.forEach((node) => {
-                if (node.sons) node.children = [{}];
+            node.children = response.data.map((n) => {
+                const hasChildrens = n.sons > 0;
+
+                n.children = hasChildrens ? [{}] : null;
+                n.clickable = true;
+                return n;
             });
         }
+
+        state.set('Tree', node);
     } catch (err) {
-        console.error('Error fetching department leaves');
+        console.error('Error fetching department leaves', err);
         throw new Error();
     }
 };
@@ -84,10 +90,49 @@ const onNodeCreated = async () => {
     await fetchNodeLeaves(creationNodeSelectedId.value);
 };
 
-const redirectToDepartmentSummary = (id) => {
-    if (!id) return;
-    router.push({ name: 'DepartmentSummary', params: { id } });
-};
+onMounted(async (n) => {
+    const tree = [...state.get('Tree'), 1];
+    const lastStateTree = state.get('TreeState');
+    if (tree) {
+        for (let n of tree) {
+            await fetchNodeLeaves(n);
+        }
+        expanded.value = tree;
+
+        if (lastStateTree) {
+            tree.push(lastStateTree);
+            await fetchNodeLeaves(lastStateTree);
+        }
+    }
+    setTimeout(() => {
+        if (lastStateTree) {
+            document.getElementById(lastStateTree).scrollIntoView();
+        }
+    }, 1000);
+});
+
+function handleEvent(type, event, node) {
+    const isParent = node.sons > 0;
+    const lastId = isParent ? node.id : node.parentFk;
+
+    switch (type) {
+        case 'path':
+            state.set('TreeState', lastId);
+            node.id && router.push({ path: `/department/department/${node.id}/summary` });
+            break;
+
+        case 'tab':
+            state.set('TreeState', lastId);
+            node.id &&
+                window.open(`#/department/department/${node.id}/summary`, '_blank');
+            break;
+
+        default:
+            node.id &&
+                router.push({ path: `#/department/department/${node.id}/summary` });
+            break;
+    }
+}
 </script>
 
 <template>
@@ -99,15 +144,27 @@ const redirectToDepartmentSummary = (id) => {
             label-key="name"
             v-model:expanded="expanded"
             @update:expanded="onNodeExpanded($event)"
+            :default-expand-all="true"
         >
             <template #default-header="{ node }">
                 <div
-                    class="row justify-between full-width q-pr-md cursor-pointer"
-                    @click.stop="redirectToDepartmentSummary(node.id)"
+                    :id="node.id"
+                    class="qtr row justify-between full-width q-pr-md cursor-pointer"
                 >
-                    <span class="text-uppercase">
-                        {{ node.name }}
-                    </span>
+                    <div>
+                        <span
+                            @click="handleEvent('row', $event, node)"
+                            class="cursor-pointer"
+                        >
+                            {{ node.name }}
+                            <DepartmentDescriptorProxy :id="node.id" />
+                        </span>
+                    </div>
+                    <div
+                        @click.stop.exact="handleEvent('path', $event, node)"
+                        @click.ctrl.stop="handleEvent('tab', $event, node)"
+                        style="flex-grow: 1; width: 10px"
+                    ></div>
                     <div class="row justify-between" style="max-width: max-content">
                         <QIcon
                             v-if="node.id"
@@ -149,6 +206,11 @@ const redirectToDepartmentSummary = (id) => {
     </QCard>
 </template>
 
+<style lang="scss" scoped>
+span {
+    color: $primary;
+}
+</style>
 <i18n>
     es:
         Departments: Departamentos

src/composables/useArrayData.js

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

src/css/quasar.variables.scss

@@ -13,6 +13,7 @@
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
 $primary: #ec8916;
+$primary-light: lighten($primary, 35%);
 $secondary: #26a69a;
 $accent: #9c27b0;
 $white: #fff;

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',
-    managed: 'warning',
-    resolved: 'negative',
+    pending: 'warning',
+    managed: 'info',
+    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();
@@ -34,7 +35,6 @@ const claimDmsFilter = ref({
             relation: 'dms',
         },
     ],
-    where: { claimFk: entityId.value },
 });
 
 onMounted(async () => {
@@ -42,11 +42,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 +96,9 @@ const detailsColumns = ref([
 ]);
 
 const STATE_COLOR = {
-    pending: 'positive',
-
-    managed: 'warning',
-
-    resolved: 'negative',
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
 };
 function stateColor(code) {
     return STATE_COLOR[code];
@@ -147,6 +140,11 @@ const claimDms = ref([]);
 const multimediaDialog = ref();
 const multimediaSlide = ref();
 
+async function getClaimDms() {
+    claimDmsFilter.value.where = { claimFk: entityId.value };
+    await claimDmsRef.value.fetch();
+}
+
 function setClaimDms(data) {
     claimDms.value = [];
     data.forEach((media) => {
@@ -169,11 +167,13 @@ function openDialog(dmsId) {
         url="ClaimDms"
         :filter="claimDmsFilter"
         @on-fetch="(data) => setClaimDms(data)"
-        limit="20"
-        auto-load
         ref="claimDmsRef"
     />
-    <CardSummary ref="summary" :url="`Claims/${entityId}/getSummary`">
+    <CardSummary
+        ref="summary"
+        :url="`Claims/${entityId}/getSummary`"
+        @on-fetch="getClaimDms"
+    >
         <template #header="{ entity: { claim } }">
             {{ claim.id }} - {{ claim.client.name }}
         </template>
@@ -210,15 +210,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,6 +245,41 @@ 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="props.row.id"
+                                    :sale-fk="props.row.saleFk"
+                                ></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">
@@ -275,22 +324,8 @@ function openDialog(dmsId) {
                     </div>
                 </div>
             </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="developments.length > 0">
+
+            <QCard class="vn-max">
                 <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',
-    managed: 'warning',
-    resolved: 'negative',
+    pending: 'warning',
+    managed: 'info',
+    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/Department/Card/DepartmentDescriptorProxy.vue

@@ -0,0 +1,21 @@
+<script setup>
+import DepartmentDescriptor from './DepartmentDescriptor.vue';
+import DepartmentSummaryDialog from './DepartmentSummaryDialog.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <DepartmentDescriptor
+            v-if="$props.id"
+            :id="$props.id"
+            :summary="DepartmentSummaryDialog"
+        />
+    </QPopupProxy>
+</template>

src/pages/Department/Card/DepartmentSummaryDialog.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import DepartmentSummary from './DepartmentSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <DepartmentSummary v-if="$props.id" :id="$props.id" />
+    </QDialog>
+</template>
+
+<style lang="scss">
+.q-dialog .summary .header {
+    position: sticky;
+    z-index: $z-max;
+    top: 0;
+}
+</style>

src/pages/Entry/Card/EntryDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 

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/Item/Card/ItemDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, onMounted, onUnmounted } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
@@ -14,6 +14,7 @@ import EditPictureForm from 'components/EditPictureForm.vue';
 import { useState } from 'src/composables/useState';
 import useCardDescription from 'src/composables/useCardDescription';
 import { useSession } from 'src/composables/useSession';
+import { getUrl } from 'src/composables/getUrl';
 import axios from 'axios';
 
 const $props = defineProps({
@@ -30,6 +31,10 @@ const $props = defineProps({
         type: String,
         default: null,
     },
+    saleFk: {
+        type: Number,
+        default: null,
+    },
 });
 
 const quasar = useQuasar();
@@ -51,6 +56,7 @@ const available = ref(null);
 const visible = ref(null);
 const _warehouseFk = ref(null);
 const warehouseText = ref(null);
+const salixUrl = ref();
 const warehouseFk = computed({
     get() {
         return _warehouseFk.value;
@@ -69,6 +75,7 @@ const showEditPhotoForm = ref(false);
 onMounted(async () => {
     await getItemAvatar();
     warehouseFk.value = user.value.warehouseFk;
+    salixUrl.value = await getUrl('');
 });
 
 const getItemAvatar = async () => {
@@ -276,7 +283,16 @@ const openCloneDialog = async () => {
         <template #actions="{}">
             <QCardActions class="row justify-center">
                 <QBtn
-                    :to="{ name: 'ItemDiary' }"
+                    :href="
+                        salixUrl +
+                        'item/' +
+                        entityId +
+                        '/diary?' +
+                        'warehouseFk=' +
+                        warehouseFk +
+                        '&lineFk=' +
+                        $props.saleFk
+                    "
                     size="md"
                     icon="vn:transaction"
                     color="primary"

src/pages/Item/Card/ItemDescriptorProxy.vue

@@ -11,6 +11,10 @@ const $props = defineProps({
         type: String,
         default: null,
     },
+    saleFk: {
+        type: Number,
+        default: null,
+    },
 });
 </script>
 
@@ -21,6 +25,7 @@ const $props = defineProps({
             :id="$props.id"
             :summary="ItemSummary"
             :dated="dated"
+            :sale-fk="saleFk"
         />
     </QPopupProxy>
 </template>

src/pages/Travel/ExtraCommunity.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
-import { QBtn, QField, QPopupEdit } from 'quasar';
+import { onMounted, ref, computed, watch } from 'vue';
+import { QBtn } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -46,7 +46,12 @@ const arrayData = useArrayData('ExtraCommunity', {
     },
 });
 
-const rows = computed(() => arrayData.store.data || []);
+const rows = ref([]);
+const originalRowDataCopy = ref([]);
+const draggedRowIndex = ref(null);
+const targetRowIndex = ref(null);
+const entryRowIndex = ref(null);
+const draggedEntry = ref(null);
 
 const tableColumnComponents = {
     id: {
@@ -55,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',
@@ -66,16 +76,24 @@ const tableColumnComponents = {
         attrs: {},
     },
     ref: {
-        component: QField,
-        attrs: { readonly: true, dense: true, class: 'cursor-pointer' },
+        component: VnInput,
+        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,
-        attrs: { readonly: true, dense: true, class: 'cursor-pointer' },
+        component: VnInput,
+        attrs: { dense: true, type: 'number', min: 0, class: 'input-number' },
+        event: (val, field, rowIndex) => ({
+            'keyup.enter': () => saveFieldValue(val, field, rowIndex),
+            blur: () => saveFieldValue(val, field, rowIndex),
+        }),
     },
     loadedKg: {
         component: 'span',
@@ -199,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'),
@@ -216,7 +234,7 @@ const columns = computed(() => [
         align: 'left',
         showValue: true,
         sortable: true,
-        format: (value) => toDate(value.substring(0, 10)),
+        format: (value) => toDate(value),
     },
 ]);
 
@@ -224,6 +242,22 @@ async function getData() {
     await arrayData.fetch({ append: false });
 }
 
+const onStoreDataChange = () => {
+    const newData = JSON.parse(JSON.stringify(arrayData.store.data)) || [];
+    rows.value = newData;
+    // el objetivo de esto es guardar una copia de los valores iniciales de todas las rows para corroborar si la data cambio antes de guardar los cambios
+    originalRowDataCopy.value = JSON.parse(JSON.stringify(newData));
+};
+
+watch(
+    arrayData.store,
+    () => {
+        if (!arrayData.store.data) return;
+        onStoreDataChange();
+    },
+    { deep: true, immediate: true }
+);
+
 const openReportPdf = () => {
     const params = {
         ...arrayData.store.userParams,
@@ -235,9 +269,14 @@ const openReportPdf = () => {
 
 const saveFieldValue = async (val, field, index) => {
     try {
+        // Evitar la solicitud de guardado si el valor no ha cambiado
+        if (originalRowDataCopy.value[index][field] == val) return;
+
         const id = rows.value[index].id;
         const params = { [field]: val };
         await axios.patch(`Travels/${id}`, params);
+        // Actualizar la copia de los datos originales con el nuevo valor
+        originalRowDataCopy.value[index][field] = val;
     } catch (err) {
         console.error('Error updating travel');
     }
@@ -248,6 +287,7 @@ const navigateToTravelId = (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;
     event.preventDefault();
     event.stopPropagation();
@@ -263,6 +303,121 @@ onMounted(async () => {
     landedTo.value.setHours(23, 59, 59, 59);
     await getData();
 });
+
+// Handler del evento @dragstart (inicio del drag) y guarda información inicial
+const handleDragStart = (event, rowIndex, entryIndex) => {
+    draggedRowIndex.value = rowIndex;
+    entryRowIndex.value = entryIndex;
+    event.dataTransfer.effectAllowed = 'move';
+};
+
+// Handler del evento @dragenter (cuando haces drag sobre une elemento y lo arrastras sobre un posible target de drop) y actualiza el targetIndex
+const handleDragEnter = (_, targetIndex) => {
+    targetRowIndex.value = targetIndex;
+};
+
+const saveRowDrop = async (targetRowIndex) => {
+    const entryId = draggedEntry.value.id;
+    const travelId = rows.value[targetRowIndex].id;
+    await axios.patch(`Entries/${entryId}`, { travelFk: travelId });
+};
+
+const moveRow = async (draggedRowIndex, targetRowIndex, entryIndex) => {
+    try {
+        if (draggedRowIndex === targetRowIndex) return;
+        // Remover entry de la row original
+        draggedEntry.value = rows.value[draggedRowIndex].entries.splice(entryIndex, 1)[0];
+        //Si la row de destino por alguna razón no tiene la propiedad entry la creamos
+        if (!rows.value[targetRowIndex].entries) rows.value[targetRowIndex].entries = [];
+        // Añadir entry a la row de destino
+        rows.value[targetRowIndex].entries.push(draggedEntry.value);
+
+        await saveRowDrop(targetRowIndex);
+    } catch (err) {
+        cleanDragAndDropData();
+        console.error('Error moving row', err);
+    }
+};
+
+// Handler de cuando haces un drop tanto dentro como fuera de la tabla para limpiar acciones y data
+const handleDragEnd = () => {
+    stopScroll();
+    cleanDragAndDropData();
+};
+
+// Handler del evento @drop (cuando soltas el elemento draggeado sobre un target)
+const handleDrop = () => {
+    if (
+        !draggedRowIndex.value &&
+        draggedRowIndex.value !== 0 &&
+        !targetRowIndex.value &&
+        draggedRowIndex.value !== 0
+    )
+        return;
+    moveRow(draggedRowIndex.value, targetRowIndex.value, entryRowIndex.value);
+    handleDragEnd();
+};
+
+const cleanDragAndDropData = () => {
+    draggedRowIndex.value = null;
+    targetRowIndex.value = null;
+    entryRowIndex.value = null;
+    draggedEntry.value = null;
+};
+
+const scrollInterval = ref(null);
+
+const startScroll = (direction) => {
+    // Iniciar el scroll en la dirección especificada
+    if (!scrollInterval.value) {
+        scrollInterval.value = requestAnimationFrame(() => scroll(direction));
+    }
+};
+
+const stopScroll = () => {
+    if (scrollInterval.value) {
+        cancelAnimationFrame(scrollInterval.value);
+        scrollInterval.value = null;
+    }
+};
+
+const scroll = (direction) => {
+    // Controlar el desplazamiento en la dirección especificada
+    const yOffset = direction === 'up' ? -2 : 2;
+    window.scrollBy(0, yOffset);
+
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.body.offsetHeight;
+
+    // Verificar si se alcanzaron los límites de la ventana para detener el desplazamiento
+    if (
+        (direction === 'up' && window.scrollY > 0) ||
+        (direction === 'down' && windowHeight + window.scrollY < documentHeight)
+    ) {
+        scrollInterval.value = requestAnimationFrame(() => scroll(direction));
+    } else {
+        stopScroll();
+    }
+};
+
+// Handler del scroll mientras se hace el drag de una row
+const handleDragScroll = (event) => {
+    // Obtener la posición y dimensiones del cursor
+    const y = event.clientY;
+    const windowHeight = window.innerHeight;
+
+    // Verificar si el cursor está cerca del borde superior o inferior de la ventana
+    const nearTop = y < 150;
+    const nearBottom = y > windowHeight - 100;
+
+    if (nearTop) {
+        startScroll('up');
+    } else if (nearBottom) {
+        startScroll('down');
+    } else {
+        stopScroll();
+    }
+};
 </script>
 
 <template>
@@ -302,59 +457,60 @@ onMounted(async () => {
             row-key="clientId"
             :pagination="{ rowsPerPage: 0 }"
             class="full-width"
+            table-style="user-select: none;"
+            @drag="handleDragScroll($event)"
+            @dragend="handleDragEnd($event)"
+            :separator="!targetRowIndex && targetRowIndex !== 0 ? 'horizontal' : 'none'"
         >
             <template #body="props">
                 <QTr
                     :props="props"
-                    @click="navigateToTravelId(props.row.id)"
                     class="cursor-pointer bg-vn-primary-row"
+                    @click="navigateToTravelId(props.row.id)"
+                    @dragenter="handleDragEnter($event, props.rowIndex)"
+                    @dragover.prevent
+                    @drop="handleDrop()"
+                    :class="{
+                        'dashed-border --top --left --right':
+                            targetRowIndex === props.rowIndex,
+                        '--bottom':
+                            targetRowIndex === props.rowIndex &&
+                            (!props.row.entries || props.row.entries.length === 0),
+                    }"
                 >
                     <QTd
                         v-for="col in props.cols"
                         :key="col.name"
                         :props="props"
                         @click="stopEventPropagation($event, col)"
+                        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'"
@@ -367,13 +523,27 @@ onMounted(async () => {
                         </component>
                     </QTd>
                 </QTr>
+
                 <QTr
-                    v-for="entry in props.row.entries"
-                    :key="entry.id"
+                    v-for="(entry, index) in props.row.entries"
+                    :key="index"
                     :props="props"
-                    class="bg-vn-secondary-row"
+                    class="bg-vn-secondary-row cursor-pointer"
+                    @dragstart="handleDragStart($event, props.rowIndex, index)"
+                    @dragenter="handleDragEnter($event, props.rowIndex)"
+                    @dragover.prevent
+                    @drop="handleDrop()"
+                    :draggable="true"
+                    :class="{
+                        'dragged-row':
+                            entryRowIndex === index && props.rowIndex === draggedRowIndex,
+                        'dashed-border --left --right': targetRowIndex === props.rowIndex,
+                        '--bottom':
+                            targetRowIndex === props.rowIndex &&
+                            index === props.row.entries.length - 1,
+                    }"
                 >
-                    <QTd class="row justify-center">
+                    <QTd>
                         <QBtn flat color="primary">{{ entry.id }} </QBtn>
                         <EntryDescriptorProxy :id="entry.id" />
                     </QTd>
@@ -381,33 +551,75 @@ onMounted(async () => {
                         <QBtn flat color="primary" dense>{{ entry.supplierName }}</QBtn>
                         <SupplierDescriptorProxy :id="entry.supplierFk" />
                     </QTd>
+                    <QTd />
+                    <QTd>
+                        <span>{{ toCurrency(entry.invoiceAmount) }}</span>
+                    </QTd>
+                    <QTd>
+                        <span>{{ entry.reference }}</span>
+                    </QTd>
+                    <QTd>
+                        <span>{{ entry.stickers }}</span>
+                    </QTd>
                     <QTd></QTd>
-                    <QTd
-                        ><span>{{ toCurrency(entry.invoiceAmount) }}</span></QTd
-                    >
-                    <QTd
-                        ><span>{{ entry.reference }}</span></QTd
-                    >
-                    <QTd
-                        ><span>{{ entry.stickers }}</span></QTd
-                    >
-                    <QTd></QTd>
-                    <QTd
-                        ><span>{{ entry.loadedkg }}</span></QTd
-                    >
-                    <QTd
-                        ><span>{{ entry.volumeKg }}</span></QTd
-                    >
-                    <QTd></QTd>
-                    <QTd></QTd>
-                    <QTd></QTd>
-                    <QTd></QTd>
+                    <QTd>
+                        <span>{{ entry.loadedkg }}</span>
+                    </QTd>
+                    <QTd>
+                        <span>{{ entry.volumeKg }}</span>
+                    </QTd>
+                    <QTd />
+                    <QTd />
+                    <QTd />
+                    <QTd />
                 </QTr>
             </template>
         </QTable>
     </QPage>
 </template>
 
+<style scoped lang="scss">
+:deep(.q-table) {
+    border-collapse: collapse;
+}
+
+.dashed-border {
+    &.--left {
+        border-left: 1px dashed #ccc;
+    }
+
+    &.--right {
+        border-right: 1px dashed #ccc;
+    }
+
+    &.--top {
+        border-top: 1px dashed #ccc;
+    }
+
+    &.--bottom {
+        border-bottom: 1px dashed #ccc;
+    }
+}
+
+.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>
 en:
     searchExtraCommunity: Search for extra community shipping

src/pages/Travel/ExtraCommunityFilter.vue

@@ -65,7 +65,7 @@ const decrement = (paramsObj, key) => {
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #body="{ params }">
+        <template #body="{ params, searchFn }">
             <QItem>
                 <QItemSection>
                     <VnInput label="id" v-model="params.id" is-outlined />
@@ -116,6 +116,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('params.agencyModeFk')"
                         v-model="params.agencyModeFk"
+                        @update:model-value="searchFn()"
                         :options="agenciesOptions"
                         option-value="agencyFk"
                         option-label="name"
@@ -129,8 +130,9 @@ const decrement = (paramsObj, key) => {
             <QItem>
                 <QItemSection>
                     <VnInputDate
-                        v-model="params.shippedFrom"
                         :label="t('params.shippedFrom')"
+                        v-model="params.shippedFrom"
+                        @update:model-value="searchFn()"
                         is-outlined
                     />
                 </QItemSection>
@@ -138,8 +140,9 @@ const decrement = (paramsObj, key) => {
             <QItem>
                 <QItemSection>
                     <VnInputDate
-                        v-model="params.landedTo"
                         :label="t('params.landedTo')"
+                        v-model="params.landedTo"
+                        @update:model-value="searchFn()"
                         is-outlined
                     />
                 </QItemSection>
@@ -149,6 +152,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('params.warehouseOutFk')"
                         v-model="params.warehouseOutFk"
+                        @update:model-value="searchFn()"
                         :options="warehousesOptions"
                         option-value="id"
                         option-label="name"
@@ -164,6 +168,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('params.warehouseInFk')"
                         v-model="params.warehouseInFk"
+                        @update:model-value="searchFn()"
                         :options="warehousesOptions"
                         option-value="id"
                         option-label="name"
@@ -179,6 +184,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('supplier.pageTitles.supplier')"
                         v-model="params.cargoSupplierFk"
+                        @update:model-value="searchFn()"
                         :options="suppliersOptions"
                         option-value="id"
                         option-label="name"
@@ -194,6 +200,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('params.continent')"
                         v-model="params.continent"
+                        @update:model-value="searchFn()"
                         :options="continentsOptions"
                         option-value="code"
                         option-label="name"
@@ -208,19 +215,6 @@ const decrement = (paramsObj, key) => {
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.input-number >>> input[type='number'] {
-    -moz-appearance: textfield;
-}
-
-.input-number >>> input::-webkit-outer-spin-button,
-.input-number >>> input::-webkit-inner-spin-button {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-}
-</style>
-
 <i18n>
 en:
     params:

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.get(selects).eq(0).type('Bros');
-        cy.get(selects).eq(0).type('{enter}');
+        cy.selectOption(selects, 'Bros');
 
         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;