forked from verdnatura/salix-front
fix: refs #7283 itemTags & VnImg
This commit is contained in:
parent
6f771c7ae6
commit
16cfd84fab
|
|
@ -1,6 +1,8 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import noImage from '/no-user.png';
|
||||
import { useRole } from 'src/composables/useRole';
|
||||
|
||||
const $props = defineProps({
|
||||
storage: {
|
||||
|
|
@ -17,8 +19,7 @@ const $props = defineProps({
|
|||
},
|
||||
zoomSize: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'lg',
|
||||
default: '520x520',
|
||||
},
|
||||
id: {
|
||||
type: Number,
|
||||
|
|
@ -28,14 +29,15 @@ const $props = defineProps({
|
|||
const show = ref(false);
|
||||
const token = useSession().getTokenMultimedia();
|
||||
const timeStamp = ref(`timestamp=${Date.now()}`);
|
||||
import noImage from '/no-user.png';
|
||||
import { useRole } from 'src/composables/useRole';
|
||||
const url = computed(() => {
|
||||
|
||||
const isEmployee = useRole().isEmployee();
|
||||
|
||||
const getUrl = (zoom = false) => {
|
||||
const size = zoom ? $props.zoomSize : $props.size;
|
||||
return isEmployee
|
||||
? `/api/${$props.storage}/${$props.collection}/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
|
||||
? `/api/${$props.storage}/${$props.collection}/${size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
|
||||
: noImage;
|
||||
});
|
||||
};
|
||||
const reload = () => {
|
||||
timeStamp.value = `timestamp=${Date.now()}`;
|
||||
};
|
||||
|
|
@ -46,19 +48,13 @@ defineExpose({
|
|||
<template>
|
||||
<QImg
|
||||
:class="{ zoomIn: $props.zoomSize }"
|
||||
:src="url"
|
||||
:src="getUrl()"
|
||||
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"
|
||||
/>
|
||||
<QImg :src="getUrl(true)" size="full" v-bind="$attrs" spinner-color="primary" />
|
||||
</QDialog>
|
||||
</template>
|
||||
|
||||
|
|
@ -67,12 +63,5 @@ defineExpose({
|
|||
&.zoomIn {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
min-width: 50px;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.img_zoom {
|
||||
border-radius: 0%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
<script setup>
|
||||
defineProps({ wrap: { type: Boolean, default: false } });
|
||||
</script>
|
||||
<script setup></script>
|
||||
<template>
|
||||
<div class="vn-row q-gutter-md q-mb-md" :class="{ wrap }">
|
||||
<slot></slot>
|
||||
<div class="vn-row q-gutter-md q-mb-md">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scopped>
|
||||
<style lang="scss" scoped>
|
||||
.vn-row {
|
||||
display: flex;
|
||||
> * {
|
||||
> :deep(*) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,15 +36,6 @@ const onIntrastatCreated = (response, formData) => {
|
|||
@on-fetch="(data) => (itemTypesOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Items/withName"
|
||||
:filter="{
|
||||
fields: ['id', 'name'],
|
||||
order: 'id DESC',
|
||||
}"
|
||||
@on-fetch="(data) => (itemsWithNameOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Intrastats"
|
||||
:filter="{
|
||||
|
|
@ -104,7 +95,9 @@ const onIntrastatCreated = (response, formData) => {
|
|||
<VnSelectDialog
|
||||
:label="t('itemBasicData.generic')"
|
||||
v-model="data.genericFk"
|
||||
:options="itemsWithNameOptions"
|
||||
url="Items/withName"
|
||||
:fields="['id', 'name']"
|
||||
sort-by="id DESC"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
map-options
|
||||
|
|
|
|||
|
|
@ -64,7 +64,12 @@ const handlePhotoUpdated = (evt = false) => {
|
|||
|
||||
<template>
|
||||
<div class="relative-position">
|
||||
<VnImg ref="image" :id="$props.entityId" @refresh="handlePhotoUpdated(true)">
|
||||
<VnImg
|
||||
ref="image"
|
||||
:id="$props.entityId"
|
||||
@refresh="handlePhotoUpdated(true)"
|
||||
zoom-size="1600x900"
|
||||
>
|
||||
<template #error>
|
||||
<div class="absolute-full picture text-center q-pa-md flex flex-center">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -42,9 +42,10 @@ const onItemTagsFetched = async (itemTags) => {
|
|||
});
|
||||
};
|
||||
|
||||
const handleTagSelected = (rows, index, tag) => {
|
||||
const handleTagSelected = (rows, index, tagId) => {
|
||||
const tag = tagOptions.value.find((t) => t.id === tagId);
|
||||
rows[index].tag = tag;
|
||||
rows[index].tagFk = tag.id;
|
||||
rows[index].tagFk = tagId;
|
||||
rows[index].value = null;
|
||||
getSelectedTagValues(rows[index]);
|
||||
};
|
||||
|
|
@ -94,7 +95,6 @@ const insertTag = (rows) => {
|
|||
:filter="{
|
||||
fields: ['id', 'itemFk', 'tagFk', 'value', 'priority'],
|
||||
where: { itemFk: route.params.id },
|
||||
order: 'priority ASC',
|
||||
include: {
|
||||
relation: 'tag',
|
||||
scope: {
|
||||
|
|
@ -102,16 +102,13 @@ const insertTag = (rows) => {
|
|||
},
|
||||
},
|
||||
}"
|
||||
order="priority"
|
||||
auto-load
|
||||
@on-fetch="onItemTagsFetched"
|
||||
>
|
||||
<template #body="{ rows, validate }">
|
||||
<QCard class="q-pl-lg q-py-md">
|
||||
<VnRow
|
||||
v-for="(row, index) in rows"
|
||||
:key="index"
|
||||
class="row q-gutter-md q-mb-md"
|
||||
>
|
||||
<QCard class="q-px-lg q-pt-md q-pb-sm">
|
||||
<VnRow v-for="(row, index) in rows" :key="index">
|
||||
<VnSelect
|
||||
:label="t('itemTags.tag')"
|
||||
:options="tagOptions"
|
||||
|
|
@ -119,7 +116,7 @@ const insertTag = (rows) => {
|
|||
option-label="name"
|
||||
hide-selected
|
||||
@update:model-value="
|
||||
($event) => handleTagSelected(rows, index, $event)
|
||||
(val) => handleTagSelected(rows, index, val)
|
||||
"
|
||||
:required="true"
|
||||
:rules="validate('itemTag.tagFk')"
|
||||
|
|
@ -146,7 +143,6 @@ const insertTag = (rows) => {
|
|||
v-model="row.value"
|
||||
:label="t('itemTags.value')"
|
||||
:is-clearable="false"
|
||||
style="width: 100%"
|
||||
/>
|
||||
<VnInput
|
||||
:label="t('itemTags.relevancy')"
|
||||
|
|
@ -155,7 +151,7 @@ const insertTag = (rows) => {
|
|||
:required="true"
|
||||
:rules="validate('itemTag.priority')"
|
||||
/>
|
||||
<div class="col-1 row justify-center items-center">
|
||||
<div class="row justify-center items-center" style="flex: 0">
|
||||
<QIcon
|
||||
@click="itemTagsRef.remove([row])"
|
||||
class="fill-icon-on-hover"
|
||||
|
|
@ -169,7 +165,7 @@ const insertTag = (rows) => {
|
|||
</QIcon>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnRow class="justify-center items-center">
|
||||
<QIcon
|
||||
@click="insertTag(rows)"
|
||||
class="cursor-pointer"
|
||||
|
|
@ -177,6 +173,7 @@ const insertTag = (rows) => {
|
|||
color="primary"
|
||||
name="add"
|
||||
size="sm"
|
||||
style="flex: 0"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('itemTags.addTag') }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue