#7283 finish item card sections #588
|
@ -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 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">
|
||||
jorgep
commented
wrap no hace nada, se deshicieron los cambios. wrap no hace nada, se deshicieron los cambios.
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scopped>
|
||||
<style lang="scss" scoped>
|
||||
jorgep
commented
scopped lleva solo una p, antes era un style global. Con :deep y scoped funciona correctamente scopped lleva solo una p, antes era un style global. Con **:deep** y **scoped** funciona correctamente
|
||||
.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) => {
|
||||
jorgep
commented
Ahora se recoge correctamente el tag Ahora se recoge correctamente el tag
|
||||
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"
|
||||
jorgep
commented
No hacía nada. No hacía nada.
|
||||
>
|
||||
<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)
|
||||
jorgep
commented
más descriptivo, es un evt/fn personalizado. más descriptivo, es un evt/fn personalizado.
|
||||
"
|
||||
: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">
|
||||
jorgep
commented
El basurero se alinea a la derecha y ocupa el mínimo espacio posible. El basurero se alinea a la derecha y ocupa el mínimo espacio posible.
|
||||
<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"
|
||||
jorgep
commented
El area "clicable" era bastante más ancha que el propio icono. ahora ocupa solo el espacio del icono. El area "clicable" era bastante más ancha que el propio icono. ahora ocupa solo el espacio del icono.
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('itemTags.addTag') }}
|
||||
|
|
Loading…
Reference in New Issue
No siempre se quiere hacer zoom, ej. contador de carros.