forked from verdnatura/salix-front
refactor: refs #6977 use VnImg
This commit is contained in:
parent
b60fa62c99
commit
f41161a28e
|
@ -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
|
||||
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
|
||||
spinner-color="white"
|
||||
/>
|
||||
<VnImg :id="user.id" collection="user" size="160x160" />
|
||||
</QAvatar>
|
||||
|
||||
<div class="text-subtitle1 q-mt-md">
|
||||
|
|
|
@ -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()}`;
|
||||
};
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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 token = getTokenMultimedia();
|
||||
// const { getTokenMultimedia } = useSession();
|
||||
// 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>
|
||||
|
|
|
@ -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
|
||||
:src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
|
||||
spinner-color="white"
|
||||
<VnImg
|
||||
v-if="data.salesPersonFk"
|
||||
:id="user.id"
|
||||
collection="user"
|
||||
spinner-color="white"
|
||||
/>
|
||||
</QAvatar>
|
||||
</template>
|
||||
|
|
|
@ -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 token = getTokenMultimedia();
|
||||
// const { getTokenMultimedia } = useSession();
|
||||
// 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
|
||||
:src="`/api/Images/catalog/50x50/${row.itemFk}/download?access_token=${token}`"
|
||||
spinner-color="primary"
|
||||
:ratio="1"
|
||||
height="50px"
|
||||
width="50px"
|
||||
class="image"
|
||||
/>
|
||||
<VnImg :id="row.itemFk" size="50x50" class="image" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-itemFk="{ row }">
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
:src="`/api/Images/catalog/50x50/${row.id}/download?access_token=${token}`"
|
||||
spinner-color="primary"
|
||||
:ratio="1"
|
||||
<VnImg
|
||||
size="50x50"
|
||||
:id="row.id"
|
||||
height="50px"
|
||||
width="50px"
|
||||
class="image"
|
||||
|
|
|
@ -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
|
||||
:src="getUrl(props.id)"
|
||||
width="130px"
|
||||
@click="handleEvent(name, 'add')"
|
||||
/>
|
||||
<VnImg :id="props.id" width="130px" @click="handleEvent(name, 'add')" />
|
||||
<p class="title">{{ props.title }}</p>
|
||||
</QItemSection>
|
||||
<QItemSection class="q-ma-none">
|
||||
|
|
|
@ -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" />
|
||||
|
|
Loading…
Reference in New Issue