#7283 finish item card sections #588

Merged
jorgep merged 24 commits from 7283-itemSectionsMigration into dev 2024-08-12 12:08:46 +00:00
5 changed files with 37 additions and 55 deletions
Showing only changes of commit 16cfd84fab - Show all commits

View File

@ -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: {
Review

No siempre se quiere hacer zoom, ej. contador de carros.

No siempre se quiere hacer zoom, ej. contador de carros.
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>

View File

@ -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">
Review

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>

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;
}
}

View File

@ -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

View File

@ -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>

View File

@ -42,9 +42,10 @@ const onItemTagsFetched = async (itemTags) => {
});
};
const handleTagSelected = (rows, index, tag) => {
const handleTagSelected = (rows, index, tagId) => {
Review

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"

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)
Review

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">
Review

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"
Review

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') }}