Merge pull request 'ref #6175 VnLinkPhone and MicroSIP icon created' (!87) from 6175-addMicrosipLink into dev

Reviewed-on: #87
Reviewed-by: Javi Gallego <jgallego@verdnatura.es>

src/components/ui/CardList.vue

@@ -32,7 +32,7 @@ const $props = defineProps({
         gap: 2%;
         width: 50%;
         .label {
-            width: 30%;
+            width: 35%;
             color: var(--vn-label);
             overflow: hidden;
             text-overflow: ellipsis;

src/components/ui/VnLinkPhone.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+const props = defineProps({
+    phoneNumber: { type: [String, Number], default: null },
+});
+const { t } = useI18n();
+</script>
+<template>
+    <QBtn
+        v-if="props.phoneNumber"
+        flat
+        round
+        icon="phone"
+        size="sm"
+        color="primary"
+        padding="none"
+        :href="`sip:${props.phoneNumber}`"
+        :title="t('globals.microsip')"
+        @click.stop
+    />
+</template>
+<style scoped></style>

src/i18n/en/index.js

@@ -36,6 +36,7 @@ export default {
         summary: {
             basicData: 'Basic data',
         },
+        microsip: 'Open in MicroSIP',
         noSelectedRows: `You don't have any line selected`,
     },
     errors: {

src/i18n/es/index.js

@@ -37,6 +37,7 @@ export default {
             basicData: 'Datos básicos',
         },
         noSelectedRows: `No tienes ninguna línea seleccionada`,
+        microsip: 'Abrir en MicroSIP',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',

src/pages/Customer/Card/CustomerSummary.vue

@@ -6,6 +6,7 @@ import { toCurrency, toPercentage, toDate } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
 import { getUrl } from 'src/composables/getUrl';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -68,8 +69,18 @@ const creditWarning = computed(() => {
                 <VnLv :label="t('customer.summary.customerId')" :value="entity.id" />
                 <VnLv :label="t('customer.summary.name')" :value="entity.name" />
                 <VnLv :label="t('customer.summary.contact')" :value="entity.contact" />
-                <VnLv :label="t('customer.summary.phone')" :value="entity.phone" />
-                <VnLv :label="t('customer.summary.mobile')" :value="entity.mobile" />
+                <VnLv :value="entity.phone">
+                    <template #label>
+                        {{ t('customer.summary.phone') }}
+                        <VnLinkPhone :phone-number="entity.phone" />
+                    </template>
+                </VnLv>
+                <VnLv :value="entity.mobile">
+                    <template #label>
+                        {{ t('customer.summary.mobile') }}
+                        <VnLinkPhone :phone-number="entity.mobile" />
+                    </template>
+                </VnLv>
                 <VnLv :label="t('customer.summary.email')" :value="entity.email" />
                 <VnLv
                     :label="t('customer.summary.salesPerson')"

src/pages/Customer/CustomerList.vue

@@ -9,6 +9,7 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import CustomerFilter from './CustomerFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -77,7 +78,12 @@ function viewSummary(id) {
                         <template #list-items>
                             <VnLv label="ID" :value="row.id" />
                             <VnLv :label="t('customer.list.email')" :value="row.email" />
-                            <VnLv :label="t('customer.list.phone')" :value="row.phone" />
+                            <VnLv :value="row.phone">
+                                <template #label>
+                                    {{ t('customer.list.phone') }}
+                                    <VnLinkPhone :phone-number="row.phone" />
+                                </template>
+                            </VnLv>
                         </template>
                         <template #actions>
                             <QBtn

src/pages/Ticket/Card/TicketSummary.vue

@@ -10,6 +10,7 @@ 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';
 
 onUpdated(() => summaryRef.value.fetch());
@@ -180,7 +181,7 @@ async function changeState(value) {
                 <VnLv :label="t('ticket.summary.route')" :value="ticket.routeFk" />
                 <VnLv :label="t('ticket.summary.invoice')">
                     <template #value>
-                        <span class="link">
+                        <span :class="{ link: ticket.refFk }">
                             {{ dashIfEmpty(ticket.refFk) }}
                             <InvoiceOutDescriptorProxy
                                 :id="ticket.id"
@@ -208,22 +209,30 @@ async function changeState(value) {
                     :value="toDate(ticket.landed)"
                 />
                 <VnLv :label="t('ticket.summary.packages')" :value="ticket.packages" />
-                <VnLv
-                    :label="t('ticket.summary.consigneePhone')"
-                    :value="ticket.address.phone"
-                />
-                <VnLv
-                    :label="t('ticket.summary.consigneeMobile')"
-                    :value="ticket.address.mobile"
-                />
-                <VnLv
-                    :label="t('ticket.summary.clientPhone')"
-                    :value="ticket.client.phone"
-                />
-                <VnLv
-                    :label="t('ticket.summary.clientMobile')"
-                    :value="ticket.client.mobile"
-                />
+                <VnLv :value="ticket.address.phone">
+                    <template #label>
+                        {{ t('ticket.summary.consigneePhone') }}
+                        <VnLinkPhone :phone-number="ticket.address.phone" />
+                    </template>
+                </VnLv>
+                <VnLv :value="ticket.address.mobile">
+                    <template #label>
+                        {{ t('ticket.summary.consigneeMobile') }}
+                        <VnLinkPhone :phone-number="ticket.address.mobile" />
+                    </template>
+                </VnLv>
+                <VnLv :value="ticket.client.phone">
+                    <template #label>
+                        {{ t('ticket.summary.clientPhone') }}
+                        <VnLinkPhone :phone-number="ticket.client.phone" />
+                    </template>
+                </VnLv>
+                <VnLv :value="ticket.client.mobile">
+                    <template #label>
+                        {{ t('ticket.summary.clientMobile') }}
+                        <VnLinkPhone :phone-number="ticket.client.mobile" />
+                    </template>
+                </VnLv>
                 <VnLv
                     :label="t('ticket.summary.consignee')"
                     :value="formattedAddress()"

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -5,7 +5,9 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import useCardDescription from 'src/composables/useCardDescription';
+
 const $props = defineProps({
     id: {
         type: Number,
@@ -99,8 +101,18 @@ const setData = (entity) => {
                 :label="t('worker.list.department')"
                 :value="entity.department ? entity.department.department.name : null"
             />
-            <VnLv :label="t('worker.card.phone')" :value="entity.phone" />
-            <VnLv :label="t('worker.summary.sipExtension')" :value="sip" />
+            <VnLv :value="entity.phone">
+                <template #label>
+                    {{ t('worker.card.phone') }}
+                    <VnLinkPhone :phone-number="entity.phone" />
+                </template>
+            </VnLv>
+            <VnLv :value="sip">
+                <template #label>
+                    {{ t('worker.summary.sipExtension') }}
+                    <VnLinkPhone v-if="sip" :phone-number="sip" />
+                </template>
+            </VnLv>
         </template>
     </CardDescriptor>
 </template>

src/pages/Worker/Card/WorkerSummary.vue

@@ -7,6 +7,7 @@ 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';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -91,15 +92,24 @@ const filter = {
                         </span>
                     </template>
                 </VnLv>
-                <VnLv
-                    :label="t('worker.summary.phoneExtension')"
-                    :value="worker.mobileExtension"
-                />
-                <VnLv :label="t('worker.summary.entPhone')" :value="worker.phone" />
-                <VnLv
-                    :label="t('worker.summary.personalPhone')"
-                    :value="worker.client.phone"
-                />
+                <VnLv :value="worker.mobileExtension">
+                    <template #label>
+                        {{ t('worker.summary.phoneExtension') }}
+                        <VnLinkPhone :phone-number="worker.mobileExtension" />
+                    </template>
+                </VnLv>
+                <VnLv :value="worker.phone">
+                    <template #label>
+                        {{ t('worker.summary.entPhone') }}
+                        <VnLinkPhone :phone-number="worker.phone" />
+                    </template>
+                </VnLv>
+                <VnLv :value="worker.client.phone">
+                    <template #label>
+                        {{ t('worker.summary.personalPhone') }}
+                        <VnLinkPhone :phone-number="worker.client.phone" />
+                    </template>
+                </VnLv>
                 <VnLv :label="t('worker.summary.locker')" :value="worker.locker" />
             </QCard>
             <QCard class="vn-one">
@@ -109,10 +119,12 @@ const filter = {
                 <VnLv :label="t('worker.summary.userId')" :value="worker.user.id" />
                 <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
                 <VnLv :label="t('worker.summary.role')" :value="worker.user.role.name" />
-                <VnLv
-                    :label="t('worker.summary.sipExtension')"
-                    :value="worker?.sip?.extension"
-                />
+                <VnLv :value="worker?.sip?.extension">
+                    <template #label>
+                        {{ t('worker.summary.sipExtension') }}
+                        <VnLinkPhone :phone-number="worker?.sip?.extension" />
+                    </template>
+                </VnLv>
             </QCard>
         </template>
     </CardSummary>

test/cypress/integration/claimNotes.spec.js

@@ -7,7 +7,7 @@ describe('ClaimNotes', () => {
 
     it('should add a new note', () => {
         const message = 'This is a new message.';
-        cy.get('.q-page-sticky button').click();
+        cy.get('.q-page-sticky > div > button').click();
         cy.get('.q-dialog .q-card__section:nth-child(2)').type(message);
         cy.get('.q-card__actions button:nth-child(2)').click();
         cy.get('.q-card .q-card__section:nth-child(2)')