79 lines
1.7 KiB
Vue
79 lines
1.7 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useSession } from 'src/composables/useSession';
|
|
|
|
const $props = defineProps({
|
|
storage: {
|
|
type: [String, Number],
|
|
default: 'Images',
|
|
},
|
|
collection: {
|
|
type: String,
|
|
default: 'catalog',
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: '200x200',
|
|
},
|
|
zoomSize: {
|
|
type: String,
|
|
required: false,
|
|
default: 'lg',
|
|
},
|
|
id: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
});
|
|
const show = ref(false);
|
|
const token = useSession().getTokenMultimedia();
|
|
const timeStamp = ref(`timestamp=${Date.now()}`);
|
|
import noImage from '/public/no-user.png';
|
|
import { useRole } from 'src/composables/useRole';
|
|
const url = computed(() => {
|
|
const isEmployee = useRole().isEmployee();
|
|
return isEmployee
|
|
? `/api/${$props.storage}/${$props.collection}/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
|
|
: noImage;
|
|
});
|
|
const reload = () => {
|
|
timeStamp.value = `timestamp=${Date.now()}`;
|
|
};
|
|
defineExpose({
|
|
reload,
|
|
});
|
|
</script>
|
|
<template>
|
|
<QImg
|
|
:class="{ zoomIn: $props.zoomSize }"
|
|
:src="url"
|
|
v-bind="$attrs"
|
|
@click="show = !show"
|
|
spinner-color="primary"
|
|
/>
|
|
<QDialog v-model="show" v-if="$props.zoomSize">
|
|
<QImg
|
|
:src="url"
|
|
size="full"
|
|
class="img_zoom"
|
|
v-bind="$attrs"
|
|
spinner-color="primary"
|
|
/>
|
|
</QDialog>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.q-img {
|
|
&.zoomIn {
|
|
cursor: zoom-in;
|
|
}
|
|
min-width: 50px;
|
|
}
|
|
.rounded {
|
|
border-radius: 50%;
|
|
}
|
|
.img_zoom {
|
|
border-radius: 0%;
|
|
}
|
|
</style>
|