verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 90 Releases Wiki Activity

fix_vnLinkPhone #1659

Merged
jsegarra merged 10 commits from fix_vnLinkPhone into dev 2025-04-02 07:53:16 +00:00
Conversation 6 Commits 10 Files Changed 7 +77 -63
7 changed files with 77 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/ui/CardSummary.vue
View File

@ -159,6 +159,7 @@ async function fetch() {
display: flex;
flex-direction: row;
margin-top: 2px;
align-items: start;
.label {
color: var(--vn-label-color);
width: 9em;
@ -169,6 +170,10 @@ async function fetch() {
flex-grow: 0;
flex-shrink: 0;
}
&.ellipsis > .value {
jsegarra commented 2025-04-01 12:59:00 +00:00
Review
Copy Link

He creado la clase ellipsis para que desde el summary se pueda poner a pupilaje
De esta manera mantenemos la direccion del consignatario totalmente visible

He creado la clase ellipsis para que desde el summary se pueda poner a pupilaje De esta manera mantenemos la direccion del consignatario totalmente visible
alexm commented 2025-04-02 05:25:35 +00:00
Review
Copy Link

Quasar tiene la clase ellipsis (no la he probado) pero seria lo mismo? https://quasar.dev/style/visibility/

Quasar tiene la clase ellipsis (no la he probado) pero seria lo mismo? https://quasar.dev/style/visibility/
jsegarra commented 2025-04-02 06:00:54 +00:00
Review
Copy Link

lo pruebo y te vuelvo a pedir revision

lo pruebo y te vuelvo a pedir revision
jsegarra commented 2025-04-02 07:48:33 +00:00
Review
Copy Link

Negativo para tu propuesta porque date cuenta que esa clase afecta al componente VnLv, no al value que es hijo de VnLv, es decir, no se hereda

Negativo para tu propuesta porque date cuenta que esa clase afecta al componente VnLv, no al value que es hijo de VnLv, es decir, no se hereda
text-overflow: ellipsis;
white-space: pre;
}
.value {
color: var(--vn-text-color);
overflow: hidden;

4
src/components/ui/VnLinkMail.vue
View File

@ -1,8 +1,11 @@
<script setup>
import { dashIfEmpty } from 'src/filters';
defineProps({ email: { type: [String], default: null } });
</script>
<template>
<QBtn
class="q-pr-xs"
jsegarra commented 2025-04-01 12:59:11 +00:00
Review
Copy Link

Le doy un espacio a la derecha al icono

Le doy un espacio a la derecha al icono
v-if="email"
flat
round
@ -13,4 +16,5 @@ defineProps({ email: { type: [String], default: null } });
:href="`mailto:${email}`"
@click.stop
/>
<span>{{ dashIfEmpty(email) }}</span>
jsegarra commented 2025-04-01 12:59:23 +00:00
Review
Copy Link

Delego la funcionalidad del componente de mostrar su valor

Delego la funcionalidad del componente de mostrar su valor
</template>

71
src/components/ui/VnLinkPhone.vue
View File

@ -1,7 +1,7 @@
<script setup>
import { ref, reactive, useAttrs, onBeforeMount, capitalize } from 'vue';
import axios from 'axios';
import { parsePhone } from 'src/filters';
import { dashIfEmpty, parsePhone } from 'src/filters';
jsegarra commented 2025-04-01 12:59:49 +00:00
Review
Copy Link

Con este cambio, evito depender del numero de instancias, ahora con atributos es suficiente

Con este cambio, evito depender del numero de instancias, ahora con atributos es suficiente
import useOpenURL from 'src/composables/useOpenURL';
const props = defineProps({
@ -12,50 +12,65 @@ const props = defineProps({
const phone = ref(props.phoneNumber);
const config = reactive({
sip: { icon: 'phone', href: `sip:${props.phoneNumber}` },
'say-simple': {
icon: 'vn:saysimple',
url: null,
channel: props.channel,
},
sip: { icon: 'phone', href: `sip:${props.phoneNumber}` },
});
const type = Object.keys(config).find((key) => key in useAttrs()) || 'sip';
const attrs = useAttrs();
const types = Object.keys(config)
.filter((key) => key in attrs)
.sort();
const activeTypes = types.length ? types : ['sip'];
onBeforeMount(async () => {
if (!phone.value) return;
let { channel } = config[type];
if (type === 'say-simple') {
const { url, defaultChannel } = (await axios.get('SaySimpleConfigs/findOne'))
.data;
if (!channel) channel = defaultChannel;
for (const type of activeTypes) {
if (type === 'say-simple') {
let { channel } = config[type];
const { url, defaultChannel } = (await axios.get('SaySimpleConfigs/findOne'))
.data;
if (!channel) channel = defaultChannel;
phone.value = await parsePhone(props.phoneNumber, props.country?.toLowerCase());
config[
type
].url = `${url}?customerIdentity=%2B${phone.value}&channelId=${channel}`;
phone.value = await parsePhone(
props.phoneNumber,
props.country?.toLowerCase(),
);
config[type].url =
`${url}?customerIdentity=%2B${phone.value}&channelId=${channel}`;
}
}
});
function handleClick() {
function handleClick(type) {
if (config[type].url) useOpenURL(config[type].url);
else if (config[type].href) window.location.href = config[type].href;
}
</script>
<template>
<QBtn
v-if="phone"
flat
round
:icon="config[type].icon"
size="sm"
color="primary"
padding="none"
@click.stop="handleClick"
>
<QTooltip>
{{ capitalize(type).replace('-', '') }}
</QTooltip>
</QBtn>
{{ phoneNumber }}
<div class="flex items-center gap-2">
<template v-for="type in activeTypes">
<QBtn
:key="type"
v-if="phone"
flat
round
:icon="config[type].icon"
size="sm"
color="primary"
padding="none"
@click.stop="() => handleClick(type)"
>
<QTooltip>
{{ capitalize(type).replace('-', '') }}
</QTooltip>
</QBtn></template
>
<span>{{ dashIfEmpty(phone) }}</span>
</div>
</template>

23
src/pages/Customer/Card/CustomerSummary.vue
View File

@ -84,28 +84,27 @@ const sumRisk = ({ clientRisks }) => {
<VnLv :label="t('customer.summary.customerId')" :value="entity.id" />
<VnLv :label="t('globals.name')" :value="entity.name" />
<VnLv :label="t('customer.summary.contact')" :value="entity.contact" />
<VnLv :value="entity.phone">
<template #label>
{{ t('customer.extendedList.tableVisibleColumns.phone') }}
<VnLv :label="t('customer.extendedList.tableVisibleColumns.phone')">
<template #value>
<VnLinkPhone :phone-number="entity.phone" />
</template>
</VnLv>
<VnLv :value="entity.mobile">
<template #label>
{{ t('customer.summary.mobile') }}
<VnLinkPhone :phone-number="entity.mobile" />
<VnLv :label="t('customer.summary.mobile')">
<template #value>
<VnLinkPhone
sip
say-simple
:phone-number="entity.mobile"
:channel="entity.country?.saySimpleCountry?.channel"
class="q-ml-xs"
/>
</template>
</VnLv>
<VnLv :value="entity.email" copy
><template #label>
{{ t('globals.params.email') }}
<VnLinkMail email="entity.email"></VnLinkMail> </template
<VnLv
:label="t('globals.params.email')"
:value="entity.email"
class="ellipsis"
copy
><template #value> <VnLinkMail :email="entity.email" /> </template
></VnLv>
<VnLv :label="t('globals.department')">
<template #value>

7
src/pages/Route/Roadmap/RoadmapSummary.vue
View File

@ -112,12 +112,9 @@ const filter = {
:label="t('Trailer Plate')"
:value="dashIfEmpty(entity?.trailerPlate)"
/>
<VnLv :label="t('Phone')" :value="dashIfEmpty(entity?.phone)">
<VnLv :label="t('Phone')">
<template #value>
<span>
{{ dashIfEmpty(entity?.phone) }}
<VnLinkPhone :phone-number="entity?.phone" />
</span>
<VnLinkPhone :phone-number="entity?.phone" />
</template>
</VnLv>
<VnLv

10
src/pages/Worker/Card/WorkerDescriptor.vue
View File

@ -128,15 +128,13 @@ const handlePhotoUpdated = (evt = false) => {
</template>
</VnLv>
<VnLv :value="entity.phone">
<template #label>
{{ t('globals.phone') }}
<VnLv :label="t('globals.phone')">
<template #value>
<VnLinkPhone :phone-number="entity.phone" />
</template>
</VnLv>
<VnLv :value="entity?.sip?.extension">
<template #label>
{{ t('worker.summary.sipExtension') }}
<VnLv :label="t('worker.summary.sipExtension')">
<template #value>
<VnLinkPhone :phone-number="entity?.sip?.extension" />
</template>
</VnLv>

20
src/pages/Worker/Card/WorkerSummary.vue
View File

@ -73,21 +73,18 @@ onBeforeMount(async () => {
/>
</template>
</VnLv>
<VnLv :value="worker.mobileExtension">
<template #label>
{{ t('worker.summary.phoneExtension') }}
<VnLv :label="t('worker.summary.phoneExtension')">
<template #value>
<VnLinkPhone :phone-number="worker.mobileExtension" />
</template>
</VnLv>
<VnLv :value="worker.phone">
<template #label>
{{ t('worker.summary.entPhone') }}
<VnLv :label="t('worker.summary.entPhone')">
<template #value>
<VnLinkPhone :phone-number="worker.phone" />
</template>
</VnLv>
<VnLv :value="advancedSummary?.client?.phone">
<template #label>
{{ t('worker.summary.personalPhone') }}
<VnLv :label="t('worker.summary.personalPhone')">
<template #value>
<VnLinkPhone
:phone-number="advancedSummary?.client?.phone"
/>
@ -147,9 +144,8 @@ onBeforeMount(async () => {
</span>
</template>
</VnLv>
<VnLv :value="worker?.sip?.extension">
<template #label>
{{ t('worker.summary.sipExtension') }}
<VnLv :label="t('worker.summary.sipExtension')">
<template #value>
<VnLinkPhone :phone-number="worker?.sip?.extension" />
</template>
</VnLv>