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

fix: refs #7283 use vnAvatar & add optional zoom
gitea/salix-front/pipeline/pr-dev This commit looks good Details

This commit is contained in:
Jorge Penadés 2024-08-05 17:13:15 +02:00
parent 5bd0bbb3ac
commit b8d38f15e4
11 changed files with 72 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/NavBar.vue
View File

@ -77,7 +77,7 @@ const pinnedModulesRef = ref();
:worker-id="user.id"
:title="user.name"
size="lg"
:color="false"
color="transparent"
/>
<QTooltip bottom>
{{ t('globals.userPanel') }}

2
src/components/UserPanel.vue
View File

@ -157,7 +157,7 @@ const isEmployee = computed(() => useRole().isEmployee());
:worker-id="user.id"
:title="user.name"
size="80px"
:color="false"
color="transparent"
/>
<div class="text-subtitle1 q-mt-md">
<strong>{{ user.nickname }}</strong>

2
src/components/ui/CatalogItem.vue
View File

@ -31,7 +31,7 @@ const dialog = ref(null);
<div class="container order-catalog-item overflow-hidden">
<QCard class="card shadow-6">
<div class="img-wrapper">
<VnImg :id="item.id" zoom-size="lg" class="image" />
<VnImg :id="item.id" class="image" />
<div v-if="item.hex && isCatalog" class="item-color-container">
<div
class="item-color"

42
src/components/ui/VnAvatar.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { computed, ref } from 'vue';
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useSession } from 'src/composables/useSession';
import { useColor } from 'src/composables/useColor';
@ -7,39 +7,39 @@ import { useColor } from 'src/composables/useColor';
const $props = defineProps({
workerId: { type: Number, required: true },
description: { type: String, default: null },
size: { type: String, default: null },
title: { type: String, default: null },
color: { type: Boolean, default: true },
title: { type: [String, Boolean], default: null },
color: { type: String, default: null },
});
const { getTokenMultimedia } = useSession();
const token = getTokenMultimedia();
const { t } = useI18n();
const title = computed(() => $props.title ?? t('globals.system'));
const src = computed(
() => `/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`
);
const title = computed(() =>
$props.title !== false ? $props.title || t('globals.system') : false
);
const showLetter = ref(false);
watch(src, () => (showLetter.value = false));
</script>
<template>
<div class="avatar-picture column items-center">
<div class="column items-center">
<QAvatar
:style="{
backgroundColor: color ? useColor(title) : 'transparent',
backgroundColor: color ? color : useColor(title),
}"
:size="$props.size"
:title="title"
v-bind="$attrs"
:title="title !== false ? title : undefined"
>
<template v-if="showLetter">{{ title.charAt(0) }}</template>
<QImg
v-else
:src="`/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`"
spinner-color="white"
@error="showLetter = true"
/>
<template v-if="showLetter && title !== false">
{{ title.charAt(0) }}
</template>
<QImg v-else :src="src" spinner-color="white" @error="showLetter = true" />
</QAvatar>
<div class="description">
<slot name="description" v-if="$props.description">
<p>
{{ $props.description }}
</p>
<slot name="description" v-if="description">
<p v-text="description" />
</slot>
</div>
</div>

37
src/components/ui/VnImg.vue
View File

@ -13,13 +13,17 @@ const $props = defineProps({
type: String,
default: 'catalog',
},
size: {
resolution: {
type: String,
default: '200x200',
},
zoomSize: {
zoomResolution: {
type: String,
default: '520x520',
default: null,
},
zoom: {
type: Boolean,
default: true,
},
id: {
type: Number,
@ -29,13 +33,14 @@ const $props = defineProps({
const show = ref(false);
const token = useSession().getTokenMultimedia();
const timeStamp = ref(`timestamp=${Date.now()}`);
const isEmployee = useRole().isEmployee();
const getUrl = (zoom = false) => {
const size = zoom ? $props.zoomSize : $props.size;
const curResolution = zoom
? $props.zoomResolution || $props.resolution
: $props.resolution;
return isEmployee
? `/api/${$props.storage}/${$props.collection}/${size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
? `/api/${$props.storage}/${$props.collection}/${curResolution}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
: noImage;
};
const reload = () => {
@ -47,21 +52,31 @@ defineExpose({
</script>
<template>
<QImg
:class="{ zoomIn: $props.zoomSize }"
:class="{ zoomIn: zoom }"
:src="getUrl()"
v-bind="$attrs"
@click="show = !show"
@click.stop="show = $props.zoom ? true : false"
spinner-color="primary"
/>
<QDialog v-model="show" v-if="$props.zoomSize">
<QImg :src="getUrl(true)" size="full" v-bind="$attrs" spinner-color="primary" />
<QDialog v-if="$props.zoom" v-model="show">
<QImg
:src="getUrl(true)"
v-bind="$attrs"
spinner-color="primary"
class="img_zoom"
/>
</QDialog>
</template>
<style lang="scss" scoped>
.q-img {
&.zoomIn {
cursor: zoom-in;
}
}
.rounded {
border-radius: 50%;
}
.img_zoom {
border-radius: 0%;
}
</style>

2
src/pages/Account/Card/AccountDescriptor.vue
View File

@ -54,7 +54,7 @@ const hasAccount = ref(false);
</template>
<template #before>
<!-- falla id :id="entityId.value" collection="user" size="160x160" -->
<VnImg :id="entityId" collection="user" size="160x160" class="photo">
<VnImg :id="entityId" collection="user" resolution="160x160" class="photo">
<template #error>
<div
class="absolute-full picture text-center q-pa-md flex flex-center"

20
src/pages/Claim/Card/ClaimBasicData.vue
View File

@ -10,13 +10,10 @@ import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import axios from 'axios';
// import { useSession } from 'src/composables/useSession';
import VnImg from 'src/components/ui/VnImg.vue';
import VnAvatar from 'src/components/ui/VnAvatar.vue';
const route = useRoute();
const { t } = useI18n();
// const { getTokenMultimedia } = useSession();
// const token = getTokenMultimedia();
const claimStates = ref([]);
const claimStatesCopy = ref([]);
@ -94,15 +91,12 @@ const statesFilter = {
:rules="validate('claim.claimStateFk')"
>
<template #before>
<QAvatar color="orange">
<VnImg
v-if="data.workerFk"
:size="'160x160'"
:id="data.workerFk"
collection="user"
spinner-color="white"
/>
</QAvatar>
<VnAvatar
:worker-id="data.workerFk"
size="160x160"
:title="false"
color="orange"
/>
</template>
</VnSelect>
<QSelect

15
src/pages/Customer/Card/CustomerBasicData.vue
View File

@ -7,8 +7,8 @@ import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnImg from 'src/components/ui/VnImg.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnAvatar from 'src/components/ui/VnAvatar.vue';
const route = useRoute();
const { t } = useI18n();
@ -97,14 +97,11 @@ const contactChannels = ref([]);
:use-like="false"
>
<template #prepend>
<QAvatar color="orange">
<VnImg
v-if="data.salesPersonFk"
:id="data.salesPersonFk"
collection="user"
spinner-color="white"
/>
</QAvatar>
<VnAvatar
:worker-id="data.salesPersonFk"
color="orange"
:title="false"
/>
</template>
</VnSelect>
<QSelect

7
src/pages/Item/Card/ItemDescriptorImage.vue
View File

@ -64,12 +64,7 @@ const handlePhotoUpdated = (evt = false) => {
<template>
<div class="relative-position">
<VnImg
ref="image"
:id="$props.entityId"
@refresh="handlePhotoUpdated(true)"
zoom-size="1600x900"
>
<VnImg ref="image" :id="$props.entityId" zoom-resolution="1600x900">
<template #error>
<div class="absolute-full picture text-center q-pa-md flex flex-center">
<div>

7
src/pages/Wagon/WagonCounter.vue
View File

@ -64,7 +64,12 @@ function confirm() {
<QList class="row q-mx-auto q-mt-xl">
<QItem v-for="(props, name) in counters" :key="name" class="col-6">
<QItemSection>
<VnImg :id="props.id" width="130px" @click="handleEvent(name, 'add')" />
<VnImg
:id="props.id"
width="130px"
@click="handleEvent(name, 'add')"
:zoom="false"
/>
<p class="title">{{ props.title }}</p>
</QItemSection>
<QItemSection class="q-ma-none">

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

@ -147,7 +147,7 @@ const refetch = async () => await cardDescriptorRef.value.getData();
<VnImg
:id="parseInt(entityId)"
collection="user"
size="520x520"
resolution="520x520"
class="photo"
>
<template #error>