Merge branch 'dev' into removeId

src/App.vue

@@ -1,10 +1,11 @@
 <script setup>
 import { onMounted } from 'vue';
-import { useQuasar } from 'quasar';
+import { useQuasar, Dark } from 'quasar';
 import { useI18n } from 'vue-i18n';
 
 const quasar = useQuasar();
 const { availableLocales, locale, fallbackLocale } = useI18n();
+Dark.set(true);
 
 onMounted(() => {
     let userLang = window.navigator.language;

src/components/common/VnLog.vue

@@ -12,8 +12,8 @@ import { useValidator } from 'src/composables/useValidator';
 import VnAvatar from '../ui/VnAvatar.vue';
 import VnJsonValue from '../common/VnJsonValue.vue';
 import FetchData from '../FetchData.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnSelectFilter from './VnSelectFilter.vue';
+import VnUserLink from '../ui/VnUserLink.vue';
 
 const stateStore = useStateStore();
 const validationsStore = useValidator();
@@ -421,15 +421,15 @@ setLogTree();
         >
             <div class="timeline">
                 <div class="user-avatar">
-                    <VnAvatar
+                    <VnUserLink v-if="userLog.user.image" :worker-id="userLog.user.id">
-                        class="cursor-pointer"
+                        <template #link>
-                        :worker="userLog.user.id"
+                            <VnAvatar
-                        :title="userLog.user.nickname"
+                                :class="{ 'cursor-pointer': userLog.user.id }"
-                    />
+                                :worker-id="userLog.user.id"
-                    <WorkerDescriptorProxy
+                                :title="userLog.user.nickname"
-                        v-if="userLog.user.image"
+                            />
-                        :id="userLog.user.id"
+                        </template>
-                    />
+                    </VnUserLink>
                 </div>
                 <div class="arrow bg-panel" v-if="byRecord"></div>
                 <div class="line"></div>
@@ -704,7 +704,7 @@ setLogTree();
                                     class="q-pa-xs row items-center"
                                 >
                                     <QItemSection class="col-3 items-center">
-                                        <VnAvatar :worker="opt.id" />
+                                        <VnAvatar :worker-id="opt.id" />
                                     </QItemSection>
                                     <QItemSection class="col-9 justify-center">
                                         <span>{{ opt.name }}</span>

src/components/ui/CardDescriptor.vue

@@ -62,7 +62,7 @@ async function getData() {
         filter: $props.filter,
         skip: 0,
     });
-    const { data } = await arrayData.fetch({ append: false });
+    const { data } = await arrayData.fetch({ append: false, updateRouter: false });
     entity.value = data;
     emit('onFetch', data);
 }

src/components/ui/VnAvatar.vue

@@ -1,10 +1,9 @@
 <script setup>
 import { useSession } from 'src/composables/useSession';
-import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
+
 const $props = defineProps({
-    worker: { type: Number, required: true },
+    workerId: { type: Number, required: true },
     description: { type: String, default: null },
-    clickable: { type: Boolean, default: false },
 });
 const session = useSession();
 const token = session.getToken();
@@ -13,7 +12,7 @@ const token = session.getToken();
     <div class="avatar-picture column items-center">
         <QAvatar color="orange">
             <QImg
-                :src="`/api/Images/user/160x160/${$props.worker}/download?access_token=${token}`"
+                :src="`/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`"
                 spinner-color="white"
             />
         </QAvatar>
@@ -24,6 +23,5 @@ const token = session.getToken();
                 </p>
             </slot>
         </div>
-        <WorkerDescriptorProxy :v-if="$props.clickable" :id="$props.worker" />
     </div>
 </template>

src/components/ui/VnNotes.vue

@@ -1,11 +1,11 @@
 <script setup>
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnAvatar from 'src/components/ui/VnAvatar.vue';
 import { toDateHour } from 'src/filters';
 import { ref } from 'vue';
 import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from './VnPaginate.vue';
+import VnUserLink from '../ui/VnUserLink.vue';
 
 const $props = defineProps({
     id: { type: String, required: true },
@@ -28,7 +28,7 @@ async function insert() {
 }
 </script>
 <template>
-    <div class="column items-center">
+    <div class="column items-center full-height">
         <VnPaginate
             :data-key="$props.url"
             :url="$props.url"
@@ -42,13 +42,14 @@ async function insert() {
                 <QCard class="q-pa-md q-mb-md" v-for="(note, index) in rows" :key="index">
                     <QCardSection horizontal>
                         <slot name="picture">
-                            <VnAvatar :worker="note.workerFk" />
+                            <VnAvatar :descriptor="false" :worker-id="note.workerFk" />
                         </slot>
                         <QItem class="full-width justify-between items-start">
-                            <span class="link">
+                            <VnUserLink
-                                {{ `${note.worker.firstName} ${note.worker.lastName}` }}
+                                :name="`${note.worker.firstName} ${note.worker.lastName}`"
-                                <WorkerDescriptorProxy :id="note.worker.id" />
+                                :worker-id="note.worker.id"
-                            </span>
+                            />
+
                             <slot name="actions">
                                 {{ toDateHour(note.created) }}
                             </slot>
@@ -115,6 +116,10 @@ async function insert() {
 <style lang="scss" scoped>
 .q-card {
     max-width: 80em;
+
+    &__section {
+        word-wrap: break-word;
+    }
 }
 .q-dialog .q-card {
     width: 400px;

src/components/ui/VnPaginate.vue

@@ -168,7 +168,12 @@ async function onLoad(...params) {
             </QCard>
         </div>
     </div>
-    <QInfiniteScroll v-if="store.data" @load="onLoad" :offset="offset" class="full-width">
+    <QInfiniteScroll
+        v-if="store.data"
+        @load="onLoad"
+        :offset="offset"
+        class="full-width full-height overflow-auto"
+    >
         <slot name="body" :rows="store.data"></slot>
         <div v-if="isLoading" class="info-row q-pa-md text-center">
             <QSpinner color="orange" size="md" />

src/components/ui/VnSms.vue

@@ -3,6 +3,7 @@ import { onBeforeMount } from 'vue';
 import { date } from 'quasar';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnAvatar from '../ui/VnAvatar.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 const $props = defineProps({
     url: { type: String, default: null },
@@ -63,12 +64,15 @@ function formatNumber(number) {
                     >
                         <QItem>
                             <QItemSection side top>
-                                <VnAvatar
+                                <VnUserLink :worker-id="row.sms?.senderFk">
-                                    class="cursor-pointer"
+                                    <template #link>
-                                    :worker="row.sms.senderFk"
+                                        <VnAvatar
-                                    :title="row.sms.sender.name"
+                                            :worker-id="row.sms?.senderFk"
-                                    :clickable="true"
+                                            class="cursor-pointer"
-                                />
+                                            :title="row.sms?.sender?.name"
+                                        />
+                                    </template>
+                                </VnUserLink>
                             </QItemSection>
                             <QSeparator />
                             <QItemSection>

src/components/ui/VnUserLink.vue

@@ -0,0 +1,21 @@
+<script setup>
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import { useI18n } from 'vue-i18n';
+
+const $props = defineProps({
+    name: { type: String, default: null },
+    workerId: { type: Number, default: null },
+    defaultName: { type: Boolean, default: false },
+});
+
+const { t } = useI18n();
+</script>
+<template>
+    <slot name="link">
+        <span :class="{ link: $props.workerId }">
+            {{ $props.defaultName ? $props.name ?? t('globals.system') : $props.name }}
+        </span>
+    </slot>
+    <WorkerDescriptorProxy v-if="$props.workerId" :id="$props.workerId" />
+</template>
+<style scoped></style>

src/composables/useArrayData.js

@@ -58,7 +58,7 @@ export function useArrayData(key, userOptions) {
         }
     }
 
-    async function fetch({ append = false }) {
+    async function fetch({ append = false, updateRouter = true }) {
         if (!store.url) return;
 
         cancelRequest();
@@ -100,15 +100,12 @@ export function useArrayData(key, userOptions) {
 
         hasMoreData.value = response.data.length === limit;
 
-        if (append === true) {
+        if (append) {
             if (!store.data) store.data = [];
             for (const row of response.data) store.data.push(row);
-        }
+        } else {
-
-        if (append === false) {
             store.data = response.data;
-
+            updateRouter && updateStateParams();
-            updateStateParams();
         }
 
         store.isLoading = false;

src/i18n/en/index.js

@@ -63,6 +63,7 @@ export default {
         selectRows: 'Select all { numberRows } row(s)',
         allRows: 'All { numberRows } row(s)',
         markAll: 'Mark all',
+        system: 'System',
     },
     errors: {
         statusUnauthorized: 'Access denied',

src/i18n/es/index.js

@@ -62,6 +62,7 @@ export default {
         selectRows: 'Seleccionar las { numberRows } filas(s)',
         allRows: 'Todo { numberRows } filas(s)',
         markAll: 'Marcar todo',
+        system: 'Sistema',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',

src/layouts/MainLayout.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { useQuasar } from 'quasar';
 import Navbar from 'src/components/NavBar.vue';
-
 const quasar = useQuasar();
 </script>
 

src/layouts/OutLayout.vue

@@ -26,6 +26,7 @@ const userLocale = computed({
         }
     },
 });
+
 const darkMode = computed({
     get() {
         return Dark.isActive;

src/pages/Claim/Card/ClaimAction.vue

@@ -282,6 +282,8 @@ async function importToNewRefundTicket() {
                 selection="multiple"
                 v-model:selected="selectedRows"
                 :grid="$q.screen.lt.md"
+                :pagination="{ rowsPerPage: 0 }"
+                :hide-bottom="true"
             >
                 <template #body-cell-ticket="{ value }">
                     <QTd align="center">
@@ -335,7 +337,23 @@ async function importToNewRefundTicket() {
                                     </QItemSection>
                                     <QItemSection side>
                                         <QItemLabel v-if="column.name === 'destination'">
-                                            {{ column.value.description }}
+                                            <VnSelectFilter
+                                                v-model="props.row.claimDestinationFk"
+                                                :options="destinationTypes"
+                                                option-label="description"
+                                                option-value="id"
+                                                :autofocus="true"
+                                                dense
+                                                input-debounce="0"
+                                                hide-selected
+                                                @update:model-value="
+                                                    (value) =>
+                                                        updateDestination(
+                                                            value,
+                                                            props.row
+                                                        )
+                                                "
+                                            />
                                         </QItemLabel>
                                         <QItemLabel v-else>
                                             {{ column.value }}
@@ -417,25 +435,6 @@ async function importToNewRefundTicket() {
             </QCardActions>
         </QCard>
     </QDialog>
-    <!-- <QDialog v-model="dialogGreuge">
-        <QCardSection>
-            <QItem class="q-pa-sm">
-                <span class="q-pa-sm q-dialog__title text-white">
-                    {{ t('dialogGreuge title') }}
-                </span>
-                <QBtn class="q-pa-sm" icon="close" flat round dense v-close-popup />
-            </QItem>
-            <QCardActions class="justify-end q-mr-sm">
-                <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
-                <QBtn
-                    :label="t('globals.save')"
-                    color="primary"
-                    v-close-popup
-                    @click="onUpdateGreugeAccept"
-                />
-            </QCardActions>
-        </QCardSection>
-    </QDialog> -->
 </template>
 <style lang="scss" scoped>
 .slider-container {

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -4,14 +4,12 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate } from 'src/filters';
 import { useState } from 'src/composables/useState';
-
 import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
 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';
 
 const $props = defineProps({
     id: {
@@ -118,18 +116,18 @@ const setData = (entity) => {
                 :value="entity.worker.user.name"
             >
                 <template #value>
-                    <span class="link">
+                    <VnUserLink
-                        {{ entity.worker.user.name }}
+                        :name="entity.worker.user.name"
-                        <WorkerDescriptorProxy :id="entity.worker.user.id" />
+                        :worker-id="entity.worker.id"
-                    </span>
+                    />
                 </template>
             </VnLv>
             <VnLv :label="t('claim.card.commercial')">
                 <template #value>
-                    <span class="link">
+                    <VnUserLink
-                        {{ entity.client?.salesPersonUser?.name }}
+                        :name="entity.client?.salesPersonUser?.name"
-                        <WorkerDescriptorProxy :id="entity.client?.salesPersonFk" />
+                        :worker-id="entity.client?.salesPersonFk"
-                    </span>
+                    />
                 </template>
             </VnLv>
             <VnLv

src/pages/Claim/Card/ClaimDevelopment.vue

@@ -54,6 +54,7 @@ const columns = computed(() => [
         optionValue: 'id',
         optionLabel: 'description',
         tabIndex: 1,
+        align: 'left',
     },
     {
         name: 'claimResult',
@@ -66,6 +67,7 @@ const columns = computed(() => [
         optionValue: 'id',
         optionLabel: 'description',
         tabIndex: 2,
+        align: 'left',
     },
     {
         name: 'claimResponsible',
@@ -78,6 +80,7 @@ const columns = computed(() => [
         optionValue: 'id',
         optionLabel: 'description',
         tabIndex: 3,
+        align: 'left',
     },
     {
         name: 'worker',
@@ -89,6 +92,7 @@ const columns = computed(() => [
         optionValue: 'id',
         optionLabel: 'nickname',
         tabIndex: 4,
+        align: 'left',
     },
     {
         name: 'claimRedelivery',
@@ -101,6 +105,7 @@ const columns = computed(() => [
         optionValue: 'id',
         optionLabel: 'description',
         tabIndex: 5,
+        align: 'left',
     },
 ]);
 </script>
@@ -158,6 +163,7 @@ const columns = computed(() => [
                 hide-pagination
                 v-model:selected="selected"
                 :grid="$q.screen.lt.md"
+                table-header-class="text-left"
             >
                 <template #body-cell="{ row, col }">
                     <QTd
@@ -165,7 +171,6 @@ const columns = computed(() => [
                         @keyup.ctrl.enter.stop="claimDevelopmentForm.saveChanges()"
                     >
                         <VnSelectFilter
-                            :label="col.label"
                             v-model="row[col.model]"
                             :options="col.options"
                             :option-value="col.optionValue"

src/pages/Claim/Card/ClaimNotes.vue

@@ -8,6 +8,10 @@ const state = useState();
 const user = state.getUser();
 const id = route.params.id;
 
+const $props = defineProps({
+    addNote: { type: Boolean, default: true },
+});
+
 const claimFilter = {
     where: { claimFk: id },
     fields: ['created', 'workerFk', 'text'],
@@ -27,7 +31,7 @@ const body = {
 <template>
     <div class="column items-center">
         <VnNotes
-            :add-note="true"
+            :add-note="$props.addNote"
             :id="id"
             url="claimObservations"
             :filter="claimFilter"

src/pages/Claim/Card/ClaimSummary.vue

@@ -7,8 +7,9 @@ import CardSummary from 'components/ui/CardSummary.vue';
 import FetchData from 'components/FetchData.vue';
 import { getUrl } from 'src/composables/getUrl';
 import { useSession } from 'src/composables/useSession';
-import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 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';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -132,7 +133,7 @@ const developmentColumns = ref([
     {
         name: 'worker',
         label: 'claim.summary.worker',
-        field: (row) => row.worker.user.nickname,
+        field: (row) => row.worker?.user.nickname,
         sortable: true,
     },
     {
@@ -195,30 +196,30 @@ function openDialog(dmsId) {
                 </VnLv>
                 <VnLv :label="t('claim.summary.assignedTo')">
                     <template #value>
-                        <span class="link">
+                        <VnUserLink
-                            {{ claim.worker.user.nickname }}
+                            :name="claim.worker?.user?.nickname"
-                            <WorkerDescriptorProxy :id="claim.workerFk" />
+                            :worker-id="claim.workerFk"
-                        </span>
+                        />
                     </template>
                 </VnLv>
                 <VnLv :label="t('claim.summary.attendedBy')">
                     <template #value>
-                        <span class="link">
+                        <VnUserLink
-                            {{ claim.client.salesPersonUser.name }}
+                            :name="claim.client?.salesPersonUser?.name"
-                            <WorkerDescriptorProxy :id="claim.client.salesPersonFk" />
+                            :worker-id="claim.client?.salesPersonFk"
-                        </span>
+                        />
                     </template>
                 </VnLv>
             </QCard>
-            <QCard class="vn-one">
+            <QCard class="vn-max claimVnNotes">
-                <a class="header" :href="claimUrl + 'note/index'">
+                <a class="header" :href="`#/claim/${entityId}/notes`">
                     {{ t('claim.summary.notes') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
-                <!-- Use VnNotes and maybe VirtualScroll-->
+                <ClaimNotes :add-note="false" style="height: 350px" order="created ASC" />
             </QCard>
             <QCard class="vn-max" v-if="salesClaimed.length > 0">
-                <a class="header" :href="claimUrl + 'note/index'">
+                <a class="header" :href="`#/claim/${entityId}/lines`">
                     {{ t('claim.summary.details') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
@@ -312,20 +313,6 @@ function openDialog(dmsId) {
                     />
                 </div>
             </QCard>
-            <!-- <QCardSection class="q-pa-md" v-if="observations.length > 0">
-                <h6>{{ t('claim.summary.notes') }}</h6>
-                <div class="note-list" v-for="note in observations" :key="note.id">
-                    <div class="note-caption">
-                        <span
-                            >{{ note.worker.firstName }} {{ note.worker.lastName }}
-                        </span>
-                        <span>{{ toDate(note.created) }}</span>
-                    </div>
-                    <div class="note-text">
-                        <span>{{ note.text }}</span>
-                    </div>
-                </div>
-            </QCardSection> -->
             <QDialog
                 v-model="multimediaDialog"
                 transition-show="slide-up"
@@ -368,6 +355,13 @@ function openDialog(dmsId) {
         </template>
     </CardSummary>
 </template>
+<style lang="scss">
+.claimVnNotes {
+    .q-card {
+        max-width: 100%;
+    }
+}
+</style>
 <style lang="scss" scoped>
 .q-dialog__inner--minimized > div {
     max-width: 80%;

src/pages/Claim/ClaimList.vue

@@ -11,7 +11,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
-import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -98,10 +98,10 @@ function viewSummary(id) {
                             </VnLv>
                             <VnLv :label="t('claim.list.assignedTo')" @click.stop>
                                 <template #value>
-                                    <span class="link">
+                                    <VnUserLink
-                                        {{ row.workerName }}
+                                        :name="row.workerName"
-                                        <WorkerDescriptorProxy :id="row.workerFk" />
+                                        :worker-id="row.workerFk"
-                                    </span>
+                                    />
                                 </template>
                             </VnLv>
                             <VnLv

src/pages/Customer/Card/CustomerDescriptor.vue

@@ -4,9 +4,9 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toCurrency } from 'src/filters';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 const $props = defineProps({
     id: {
@@ -44,10 +44,10 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
         <template #body="{ entity }">
             <VnLv v-if="entity.salesPersonUser" :label="t('customer.card.salesPerson')">
                 <template #value>
-                    <span class="link">
+                    <VnUserLink
-                        {{ entity.salesPersonUser.name }}
+                        :name="entity.salesPersonUser?.name"
-                        <WorkerDescriptorProxy :id="entity.salesPersonFk" />
+                        :worker-id="entity.salesPersonFk"
-                    </span>
+                    />
                 </template>
             </VnLv>
             <VnLv :label="t('customer.card.credit')" :value="toCurrency(entity.credit)" />

src/pages/Customer/CustomerPayments.vue

@@ -123,8 +123,7 @@ function stateColor(row) {
     </QDrawer>
     <QPage class="column items-center q-pa-md customer-payments">
         <div class="card-list">
-            <QToolbar class="q-pa-none">
+            <QToolbar class="q-pa-none justify-end">
-                <QToolbarTitle>{{ t('Web Payments') }}</QToolbarTitle>
                 <QBtn
                     @click="arrayData.refresh()"
                     :loading="isLoading"
@@ -133,7 +132,7 @@ function stateColor(row) {
                     class="q-mr-sm"
                     round
                     dense
-                ></QBtn>
+                />
                 <QBtn @click="grid = !grid" icon="list" color="primary" round dense>
                     <QTooltip>{{ t('Change view') }}</QTooltip>
                 </QBtn>

src/pages/InvoiceIn/Card/InvoiceInCard.vue

@@ -7,6 +7,7 @@ import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { onMounted, watch } from 'vue';
 import { useRoute } from 'vue-router';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -74,11 +75,7 @@ onMounted(async () => {
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
+            <VnSubToolbar />
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -2,12 +2,12 @@
 import { onMounted, ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import invoiceOutService from 'src/services/invoiceOut.service';
 import { toCurrency } from 'src/filters';
 import { QCheckbox, QBtn } from 'quasar';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
 
@@ -345,9 +345,9 @@ onMounted(() => refresh());
                             v-if="props.col.name === 'clientId'"
                             :id="selectedCustomerId"
                         />
-                        <WorkerDescriptorProxy
+                        <VnUserLink
                             v-if="props.col.name === 'comercial'"
-                            :id="selectedWorkerId"
+                            :worker-id="selectedWorkerId"
                         />
                     </component>
                 </QTd>

src/pages/Shelving/Card/ShelvingDescriptor.vue

@@ -5,8 +5,8 @@ import { useI18n } from 'vue-i18n';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import useCardDescription from 'composables/useCardDescription';
-import WorkerDescriptorProxy from "pages/Worker/Card/WorkerDescriptorProxy.vue";
+import ShelvingDescriptorMenu from 'pages/Shelving/Card/ShelvingDescriptorMenu.vue';
-import ShelvingDescriptorMenu from "pages/Shelving/Card/ShelvingDescriptorMenu.vue";
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 const $props = defineProps({
     id: {
@@ -57,14 +57,14 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
             <VnLv :label="t('shelving.summary.parking')" :value="entity.parking?.code" />
             <VnLv v-if="entity.worker" :label="t('shelving.summary.worker')">
                 <template #value>
-                    <span class="link">
+                    <VnUserLink
-                        {{ entity.worker?.user?.nickname }}
+                        :name="entity.worker?.user?.nickname"
-                        <WorkerDescriptorProxy :id="entity.worker?.id" />
+                        :worker-id="entity.worker?.id"
-                    </span>
+                    />
                 </template>
             </VnLv>
         </template>
-        <template #menu="{entity}">
+        <template #menu="{ entity }">
             <ShelvingDescriptorMenu :shelving="entity" />
         </template>
     </CardDescriptor>

src/pages/Supplier/Card/SupplierSummary.vue

@@ -3,11 +3,11 @@ import { onMounted, ref, computed, onUpdated } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardSummary from 'components/ui/CardSummary.vue';
-import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import { getUrl } from 'src/composables/getUrl';
 import { useRole } from 'src/composables/useRole';
 import { dashIfEmpty } from 'src/filters';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 onUpdated(() => summaryRef.value.fetch());
 
@@ -71,13 +71,10 @@ const isAdministrative = computed(() => {
                 <VnLv label="Alias" :value="supplier.nickname" />
                 <VnLv :label="t('supplier.summary.responsible')">
                     <template #value>
-                        <span class="link">
+                        <VnUserLink
-                            {{ dashIfEmpty(supplier.worker?.user?.nickname) }}
+                            :name="dashIfEmpty(supplier.worker?.user?.nickname)"
-                            <WorkerDescriptorProxy
+                            :worker-id="supplier.worker?.user?.id"
-                                v-if="supplier.worker?.user?.id"
+                        />
-                                :id="supplier.worker?.user?.id"
-                            />
-                        </span>
                     </template>
                 </VnLv>
                 <VnLv :label="t('supplier.summary.notes')" class="q-mb-xs">

src/pages/Ticket/Card/TicketDescriptor.vue

@@ -8,7 +8,7 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import TicketDescriptorMenu from './TicketDescriptorMenu.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 const $props = defineProps({
     id: {
@@ -106,13 +106,10 @@ const setData = (entity) =>
             </VnLv>
             <VnLv :label="t('ticket.summary.salesPerson')">
                 <template #value>
-                    <span class="link">
+                    <VnUserLink
-                        {{ entity.client.salesPersonUser.name }}
+                        :name="entity.client.salesPersonUser?.name"
-                        <WorkerDescriptorProxy
+                        :worker-id="entity.client.salesPersonFk"
-                            :id="entity.client.salesPersonFk"
+                    />
-                            v-if="entity.client.salesPersonFk"
-                        />
-                    </span>
                 </template>
             </VnLv>
             <VnLv :label="t('ticket.card.warehouse')" :value="entity.warehouse?.name" />

src/pages/Ticket/Card/TicketSummary.vue

@@ -8,10 +8,10 @@ import CardSummary from 'components/ui/CardSummary.vue';
 import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import InvoiceOutDescriptorProxy from 'pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
-import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import { getUrl } from 'src/composables/getUrl';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 onUpdated(() => summaryRef.value.fetch());
 
@@ -160,13 +160,10 @@ async function changeState(value) {
                 </VnLv>
                 <VnLv :label="t('ticket.summary.salesPerson')">
                     <template #value>
-                        <span class="link">
+                        <VnUserLink
-                            {{ ticket.client?.salesPersonUser?.name }}
+                            :name="ticket.client?.salesPersonUser?.name"
-                            <WorkerDescriptorProxy
+                            :worker-id="ticket.client?.salesPersonFk"
-                                :id="ticket.client.salesPersonFk"
+                        />
-                                v-if="ticket.client.salesPersonFk"
-                            />
-                        </span>
                     </template>
                 </VnLv>
                 <VnLv

src/pages/Worker/Card/WorkerSummary.vue

@@ -2,12 +2,12 @@
 import { ref, onMounted, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import CardSummary from 'components/ui/CardSummary.vue';
+import { dashIfEmpty } from 'src/filters';
 import { getUrl } from 'src/composables/getUrl';
 import VnLv from 'src/components/ui/VnLv.vue';
-import WorkerDescriptorProxy from './WorkerDescriptorProxy.vue';
-import { dashIfEmpty } from 'src/filters';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
+import CardSummary from 'components/ui/CardSummary.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -83,13 +83,11 @@ const filter = {
                 <VnLv :label="t('worker.list.email')" :value="worker.user.email" />
                 <VnLv :label="t('worker.summary.boss')" link>
                     <template #value>
-                        <span class="link">
+                        <VnUserLink
-                            {{ dashIfEmpty(worker.boss?.name) }}
+                            v-if="worker.boss"
-                            <WorkerDescriptorProxy
+                            :name="dashIfEmpty(worker.boss?.name)"
-                                :id="worker.bossFk"
+                            :worker-id="worker.bossFk"
-                                v-if="worker.boss"
+                        />
-                            />
-                        </span>
                     </template>
                 </VnLv>
                 <VnLv :value="worker.mobileExtension">

test/cypress/support/commands.js

@@ -138,23 +138,20 @@ Cypress.Commands.add('validateRow', (rowSelector, expectedValues) => {
 
 Cypress.Commands.add('removeRow', (rowIndex) => {
     let rowsBefore;
-    let rowsAfter;
+    cy.get('tbody > tr:visible')
-
-    cy.get('tr')
         .its('length')
         .then((length) => {
-            rowsBefore = length;
             cy.get('.q-checkbox').eq(rowIndex).click();
             cy.removeCard();
             cy.get('.q-dialog button').eq(2).click();
+            rowsBefore = length;
         })
         .then(() => {
-            cy.get('tr')
+            // Check the existence of tbody before performing the second assertion.
-                .its('length')
+            cy.get('tbody').then(($tbody) => {
-                .then((length) => {
+                if ($tbody.length > 0)
-                    rowsAfter = length;
+                    cy.get('tbody > tr:visible').should('have.length', rowsBefore - 1);
-                    expect(rowsBefore).to.eq(rowsAfter + 1);
+            });
-                });
         });
 });
 Cypress.Commands.add('openListSummary', (row) => {