ref #6175 simplify the component

src/components/ui/VnLinkPhone.vue

@@ -2,34 +2,21 @@
 import { useI18n } from 'vue-i18n';
 const props = defineProps({
     phoneNumber: { type: [String, Number], default: null },
-    icon: { type: Boolean, default: true },
-    showNumber: { type: Boolean, default: true },
 });
 const { t } = useI18n();
 </script>
 <template>
-    <div v-if="props.phoneNumber">
+    <QBtn
-        <span v-if="props.icon">
+        v-if="props.phoneNumber"
-            <span v-if="props.showNumber">
+        flat
-                {{ props.phoneNumber }}
+        round
-            </span>
+        icon="phone"
-            <QBtn
+        size="sm"
-                flat
+        color="primary"
-                round
+        padding="xs"
-                :icon="'phone'"
+        :href="`sip:${props.phoneNumber}`"
-                size="sm"
+        :title="t('globals.microsip')"
-                class="q-ml-xs"
+        @click.stop
-                color="primary"
+    />
-                padding="none"
-                :href="`sip:${props.phoneNumber}`"
-                :title="t('globals.microsip')"
-                @click.stop
-            />
-        </span>
-        <a v-else :href="`tel:${props.phoneNumber}`" class="link">
-            {{ props.phoneNumber }}
-        </a>
-    </div>
-    <span v-else>-</span>
 </template>
 <style scoped></style>

src/pages/Customer/Card/CustomerSummary.vue

@@ -72,13 +72,13 @@ const creditWarning = computed(() => {
                 <VnLv :value="entity.phone">
                     <template #label>
                         {{ t('customer.summary.phone') }}
-                        <VnLinkPhone :phone-number="entity.phone" :show-number="false" />
+                        <VnLinkPhone :phone-number="entity.phone" />
                     </template>
                 </VnLv>
                 <VnLv :value="entity.mobile">
                     <template #label>
                         {{ t('customer.summary.mobile') }}
-                        <VnLinkPhone :phone-number="entity.mobile" :show-number="false" />
+                        <VnLinkPhone :phone-number="entity.mobile" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('customer.summary.email')" :value="entity.email" />

src/pages/Customer/CustomerList.vue

@@ -10,6 +10,7 @@ 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';
+import { dashIfEmpty } from 'src/filters';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -80,6 +81,7 @@ function viewSummary(id) {
                             <VnLv :label="t('customer.list.email')" :value="row.email" />
                             <VnLv :label="t('customer.list.phone')">
                                 <template #value>
+                                    {{ dashIfEmpty(row.phone) }}
                                     <VnLinkPhone :phone-number="row.phone" />
                                 </template>
                             </VnLv>

src/pages/Ticket/Card/TicketSummary.vue

@@ -181,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"
@@ -211,21 +211,25 @@ async function changeState(value) {
                 <VnLv :label="t('ticket.summary.packages')" :value="ticket.packages" />
                 <VnLv :label="t('ticket.summary.consigneePhone')">
                     <template #value>
+                        {{ dashIfEmpty(ticket.address.phone) }}
                         <VnLinkPhone :phone-number="ticket.address.phone" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('ticket.summary.consigneeMobile')">
                     <template #value>
+                        {{ dashIfEmpty(ticket.address.mobile) }}
                         <VnLinkPhone :phone-number="ticket.address.mobile" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('ticket.summary.clientPhone')">
                     <template #value>
+                        {{ dashIfEmpty(ticket.client.phone) }}
                         <VnLinkPhone :phone-number="ticket.client.phone" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('ticket.summary.clientMobile')">
                     <template #value>
+                        {{ dashIfEmpty(ticket.client.mobile) }}
                         <VnLinkPhone :phone-number="ticket.client.mobile" />
                     </template>
                 </VnLv>

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -101,13 +101,13 @@ const setData = (entity) =>
             <VnLv :value="entity.phone">
                 <template #label>
                     {{ t('worker.card.phone') }}
-                    <VnLinkPhone :phone-number="entity.phone" :show-number="false" />
+                    <VnLinkPhone :phone-number="entity.phone" />
                 </template>
             </VnLv>
             <VnLv :value="sip">
                 <template #label>
                     {{ t('worker.summary.sipExtension') }}
-                    <VnLinkPhone v-if="sip" :phone-number="sip" :show-number="false" />
+                    <VnLinkPhone v-if="sip" :phone-number="sip" />
                 </template>
             </VnLv>
         </template>

src/pages/Worker/Card/WorkerSummary.vue

@@ -95,16 +95,19 @@ const filter = {
                 </VnLv>
                 <VnLv :label="t('worker.summary.phoneExtension')">
                     <template #value>
+                        {{ dashIfEmpty(worker.mobileExtension) }}
                         <VnLinkPhone :phone-number="worker.mobileExtension" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('worker.summary.entPhone')">
                     <template #value>
+                        {{ dashIfEmpty(worker.phone) }}
                         <VnLinkPhone :phone-number="worker.phone" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('worker.summary.personalPhone')">
                     <template #value>
+                        {{ dashIfEmpty(worker.client.phone) }}
                         <VnLinkPhone :phone-number="worker.client.phone" />
                     </template>
                 </VnLv>
@@ -119,6 +122,7 @@ const filter = {
                 <VnLv :label="t('worker.summary.role')" :value="worker.user.role.name" />
                 <VnLv :label="t('worker.summary.sipExtension')">
                     <template #value>
+                        {{ dashIfEmpty(worker?.sip?.extension) }}
                         <VnLinkPhone :phone-number="worker?.sip?.extension" />
                     </template>
                 </VnLv>