refactor: refs #6977 use VnImg

src/components/UserPanel.vue

@@ -11,6 +11,7 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import { useClipboard } from 'src/composables/useClipboard';
+import VnImg from 'src/components/ui/VnImg.vue';
 
 const state = useState();
 const session = useSession();
@@ -47,7 +48,6 @@ const darkMode = computed({
 });
 
 const user = state.getUser();
-const token = session.getTokenMultimedia();
 const warehousesData = ref();
 const companiesData = ref();
 const accountBankData = ref();
@@ -149,10 +149,7 @@ function saveUserData(param, value) {
 
             <div class="col column items-center q-mb-sm">
                 <QAvatar size="80px">
-                    <QImg
+                    <VnImg :id="user.id" collection="user" size="160x160" />
-                        :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
-                        spinner-color="white"
-                    />
                 </QAvatar>
 
                 <div class="text-subtitle1 q-mt-md">

src/components/ui/VnImg.vue

@@ -3,10 +3,14 @@ import { ref, computed, onMounted } from 'vue';
 import { useSession } from 'src/composables/useSession';
 
 const $props = defineProps({
-    collection: {
+    storage: {
         type: [String, Number],
         default: 'Images',
     },
+    collection: {
+        type: String,
+        default: 'catalog',
+    },
     size: {
         type: String,
         default: '200x200',
@@ -26,9 +30,8 @@ const token = useSession().getTokenMultimedia();
 const timeStamp = ref(`timestamp=${Date.now()}`);
 const url = computed(
     () =>
-        `/api/${$props.collection}/catalog/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
+        `/api/${$props.storage}/${$props.collection}/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
 );
-const emits = defineEmits(['refresh']);
 const reload = (emit = false) => {
     timeStamp.value = `timestamp=${Date.now()}`;
 };

src/pages/Account/Card/AccountDescriptor.vue

@@ -6,8 +6,8 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
-import { useSession } from 'src/composables/useSession';
 import FetchData from 'src/components/FetchData.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
 
 const $props = defineProps({
     id: {
@@ -19,7 +19,6 @@ const $props = defineProps({
 
 const route = useRoute();
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
@@ -31,10 +30,6 @@ const filter = {
     fields: ['id', 'nickname', 'name', 'role'],
     include: { relation: 'role', scope: { fields: ['id', 'name'] } },
 };
-function getAccountAvatar() {
-    const token = getTokenMultimedia();
-    return `/api/Images/user/160x160/${entityId.value}/download?access_token=${token}`;
-}
 const hasAccount = ref(false);
 </script>
 
@@ -72,7 +67,8 @@ const hasAccount = ref(false);
             <AccountDescriptorMenu :has-account="hasAccount" />
         </template>
         <template #before>
-            <QImg :src="getAccountAvatar()" class="photo">
+            <!-- falla id :id="entityId.value" collection="user" size="160x160" -->
+            <VnImg :id="entityId" collection="user" size="160x160" class="photo">
                 <template #error>
                     <div
                         class="absolute-full picture text-center q-pa-md flex flex-center"
@@ -87,7 +83,7 @@ const hasAccount = ref(false);
                         </div>
                     </div>
                 </template>
-            </QImg>
+            </VnImg>
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('account.card.nickname')" :value="entity.nickname" />

src/pages/Claim/Card/ClaimBasicData.vue

@@ -10,12 +10,13 @@ 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 { useSession } from 'src/composables/useSession';
+import VnImg from 'src/components/ui/VnImg.vue';
 
 const route = useRoute();
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
+// const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
+// const token = getTokenMultimedia();
 
 const claimFilter = {
     fields: [
@@ -118,9 +119,11 @@ const statesFilter = {
                 >
                     <template #before>
                         <QAvatar color="orange">
-                            <QImg
+                            <VnImg
                                 v-if="data.workerFk"
-                                :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
+                                :size="'160x160'"
+                                :id="data.workerFk"
+                                collection="user"
                                 spinner-color="white"
                             />
                         </QAvatar>

src/pages/Customer/Card/CustomerBasicData.vue

@@ -3,16 +3,14 @@ import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
-import { useSession } from 'src/composables/useSession';
 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';
 
 const route = useRoute();
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
 
 const workers = ref([]);
 const workersCopy = ref([]);
@@ -143,10 +141,11 @@ const filterOptions = {
                 >
                     <template #prepend>
                         <QAvatar color="orange">
-                            <QImg
+                            <VnImg
-                                :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
-                                spinner-color="white"
                                 v-if="data.salesPersonFk"
+                                :id="user.id"
+                                collection="user"
+                                spinner-color="white"
                             />
                         </QAvatar>
                     </template>

src/pages/Entry/EntryLatestBuys.vue

@@ -16,14 +16,15 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toDate, toCurrency } from 'src/filters';
-import { useSession } from 'composables/useSession';
+// import { useSession } from 'composables/useSession';
 import { dashIfEmpty } from 'src/filters';
 import { useArrayData } from 'composables/useArrayData';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
 
 const router = useRouter();
-const { getTokenMultimedia } = useSession();
+// const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
+// const token = getTokenMultimedia();
 const stateStore = useStateStore();
 const { t } = useI18n();
 
@@ -695,14 +696,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </template>
             <template #body-cell-picture="{ row }">
                 <QTd>
-                    <QImg
+                    <VnImg :id="row.itemFk" size="50x50" class="image" />
-                        :src="`/api/Images/catalog/50x50/${row.itemFk}/download?access_token=${token}`"
-                        spinner-color="primary"
-                        :ratio="1"
-                        height="50px"
-                        width="50px"
-                        class="image"
-                    />
                 </QTd>
             </template>
             <template #body-cell-itemFk="{ row }">

src/pages/Item/Card/ItemDescriptor.vue

@@ -13,7 +13,6 @@ import ItemDescriptorImage from 'src/pages/Item/Card/ItemDescriptorImage.vue';
 
 import { useState } from 'src/composables/useState';
 import useCardDescription from 'src/composables/useCardDescription';
-import { useSession } from 'src/composables/useSession';
 import { getUrl } from 'src/composables/getUrl';
 import axios from 'axios';
 import { dashIfEmpty } from 'src/filters';
@@ -42,14 +41,12 @@ const quasar = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
 const state = useState();
 const user = state.getUser();
 
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
-const image = ref(null);
 const regularizeStockFormDialog = ref(null);
 const item = ref(null);
 const available = ref(null);
@@ -67,17 +64,10 @@ const warehouseFk = computed({
 });
 
 onMounted(async () => {
-    await getItemAvatar();
     warehouseFk.value = user.value.warehouseFk;
     salixUrl.value = await getUrl('');
 });
 
-const getItemAvatar = async () => {
-    const token = getTokenMultimedia();
-    const timeStamp = `timestamp=${Date.now()}`;
-    image.value = `/api/Images/catalog/200x200/${entityId.value}/download?access_token=${token}&${timeStamp}`;
-};
-
 const data = ref(useCardDescription());
 const setData = (entity) => {
     if (!entity) return;

src/pages/Item/ItemList.vue

@@ -16,17 +16,15 @@ import ItemListFilter from './ItemListFilter.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toDateFormat } from 'src/filters/date.js';
-import { useSession } from 'composables/useSession';
 import { dashIfEmpty } from 'src/filters';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import axios from 'axios';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
 
 const router = useRouter();
-const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -491,10 +489,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     </template>
                     <template #body-cell-picture="{ row }">
                         <QTd>
-                            <QImg
+                            <VnImg
-                                :src="`/api/Images/catalog/50x50/${row.id}/download?access_token=${token}`"
+                                size="50x50"
-                                spinner-color="primary"
+                                :id="row.id"
-                                :ratio="1"
                                 height="50px"
                                 width="50px"
                                 class="image"

src/pages/Wagon/WagonCounter.vue

@@ -1,14 +1,12 @@
 <script setup>
 import { ref, onMounted } from 'vue';
-import { useSession } from 'src/composables/useSession';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import VnConfirm from 'components/ui/VnConfirm.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
 
 const quasar = useQuasar();
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
 
 const counters = ref({
     alquilerBandeja: { count: 0, id: 96001, title: 'CC Bandeja', isTray: true },
@@ -35,10 +33,6 @@ onMounted(() => {
     }
 });
 
-function getUrl(id) {
-    return `/api/Images/catalog/200x200/${id}/download?access_token=${token}`;
-}
-
 async function handleEvent(type, action, amount) {
     const counter = counters.value[type].count;
     let isOk = true;
@@ -70,11 +64,7 @@ function confirm() {
     <QList class="row q-mx-auto q-mt-xl">
         <QItem v-for="(props, name) in counters" :key="name" class="col-6">
             <QItemSection>
-                <QImg
+                <VnImg :id="props.id" width="130px" @click="handleEvent(name, 'add')" />
-                    :src="getUrl(props.id)"
-                    width="130px"
-                    @click="handleEvent(name, 'add')"
-                />
                 <p class="title">{{ props.title }}</p>
             </QItemSection>
             <QItemSection class="q-ma-none">

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -2,7 +2,6 @@
 import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 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';
@@ -10,6 +9,7 @@ import WorkerChangePasswordForm from 'src/pages/Worker/Card/WorkerChangePassword
 import useCardDescription from 'src/composables/useCardDescription';
 import { useState } from 'src/composables/useState';
 import axios from 'axios';
+import VnImg from 'src/components/ui/VnImg.vue';
 
 const $props = defineProps({
     id: {
@@ -25,7 +25,6 @@ const $props = defineProps({
 
 const route = useRoute();
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
 const state = useState();
 const user = state.getUser();
 const changePasswordFormDialog = ref(null);
@@ -73,11 +72,6 @@ watch(
     }
 );
 
-function getWorkerAvatar() {
-    const token = getTokenMultimedia();
-    return `/api/Images/user/160x160/${entityId.value}/download?access_token=${token}`;
-}
-
 const data = ref(useCardDescription());
 const setData = (entity) => {
     if (!entity) return;
@@ -155,7 +149,7 @@ const refetch = async () => await cardDescriptorRef.value.getData();
             </QItem>
         </template>
         <template #before>
-            <QImg :src="getWorkerAvatar()" class="photo">
+            <VnImg :id="entityId" collection="user" size="160x160" class="photo">
                 <template #error>
                     <div
                         class="absolute-full picture text-center q-pa-md flex flex-center"
@@ -170,7 +164,7 @@ const refetch = async () => await cardDescriptorRef.value.getData();
                         </div>
                     </div>
                 </template>
-            </QImg>
+            </VnImg>
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('worker.card.name')" :value="entity.user?.nickname" />