verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 82 Releases Wiki Activity

#6896 end orders migration #400

Merged
jon merged 17 commits from 6896-EndOrderMigration into dev 2024-06-20 12:31:45 +00:00
Conversation 0 Commits 17 Files Changed 7 +82 -15
4 changed files with 82 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 42008ef74b - Show all commits

52
src/components/ui/VnImg.vue Normal file
View File

@ -0,0 +1,52 @@
<script setup>
import { ref } from 'vue';
const $props = defineProps({
jon marked this conversation as resolved
jsegarra commented 2024-06-17 11:53:46 +00:00
Review
Copy Link

Lo ideal de este componente seria montar la url en este componente pasandole la coleccion(user/Images, etc), el tamaño(200x200, 50x50, etc), el id.
Así podemos reemplazar QImg y la propiedad src por VnImg y las props de antes

Lo ideal de este componente seria montar la url en este componente pasandole la coleccion(user/Images, etc), el tamaño(200x200, 50x50, etc), el id. Así podemos reemplazar QImg y la propiedad src por VnImg y las props de antes
collection: {
jon marked this conversation as resolved
jsegarra commented 2024-06-17 11:48:32 +00:00
Review
Copy Link

Esta prop no se usa para nada, no?

Esta prop no se usa para nada, no?
type: [String, Number],
default: null,
},
size: {
type: Boolean,
default: false,
},
zoomSize: {
jsegarra marked this conversation as resolved
jsegarra commented 2024-06-17 11:09:58 +00:00
Review
Copy Link

La defines como String pero el valor no lo usas en ningún lado.
En la 32, compruebas si está o no

La defines como String pero el valor no lo usas en ningún lado. En la 32, compruebas si está o no
type: String,
required: true,
},
id: {
jon marked this conversation as resolved Outdated
jsegarra commented 2024-06-17 11:48:42 +00:00
Outdated
Review
Copy Link

Esta tampoco

Esta tampoco
type: Boolean,
default: false,
},
});
const show = ref(false);
</script>
<template>
<QImg
class="img"
v-bind="$attrs"
@click="show = !show"
spinner-color="primary"
:ratio="1"
/>
<QDialog v-model="show" v-if="$props.zoomSize">
<QImg
class="img_zoom"
v-bind="$attrs"
spinner-color="primary"
:ratio="1"
style="border-radius: 0%"
/>
</QDialog>
</template>
<style lang="scss" scoped>
.img {
cursor: pointer;
jsegarra marked this conversation as resolved
jsegarra commented 2024-06-17 11:12:57 +00:00
Review
Copy Link

La acción es de zoom, así que pondría zoom-in

La acción es de zoom, así que pondría zoom-in
border-radius: 0%;
}
.img_zoom {
width: 12%;
jon marked this conversation as resolved Outdated
jsegarra commented 2024-06-17 11:10:25 +00:00
Outdated
Review
Copy Link

Aquí es donde modificando el valor, consigues mas o menos zoom

Aquí es donde modificando el valor, consigues mas o menos zoom
jsegarra commented 2024-06-17 11:10:52 +00:00
Outdated
Review
Copy Link

Te diria de mirarte la propiedad v-bind ya que puedes vincular propiedades al apartado de style

Te diria de mirarte la propiedad v-bind ya que puedes vincular propiedades al apartado de style
jsegarra commented 2024-06-17 11:12:16 +00:00
Outdated
Review
Copy Link

Te paso un ejemplo https://play.vuejs.org/#eNp9ks1u2zAQhF9lyx6UBInVoD25ioHWCNAWRVvUBXrhhaHWMmOKJPjj2BD07llScRIgQXTS7oyW36w4sC/OzXYJ2Zw1QXrlIgSMyS24Ub2zPsIAHtcwwtrbHiqyVtxwI60JEfrQwVXWT6pvqLWF/9br9l11ejRIq60/Wt5/KE91+hnqGpZFanEtko6wEzohN009QdDxVETsnRYRqQJoNpcgtQjhirM7L5xDz9liGArEODb15nLyKeMSDbzobYuazIWBM6hJbupnM5sQDxohSOuwpXr2MBaGPOdGyG3nbTLtRZkwp5E3yrQnpcoZzuCnMtuHjJQQPRqJEC3EDb74HparFThPZ/l4ILuQUe1QH+Cs5mYs0TPOgp2zSEhmrbrZbbCG/kzhyUF6pzT63y4q2i5n84k0a4K2f/ej9KJPeH7syw3K7Sv927DPPc7+eAzod8jZoxaF7zBO8vXqF+7p/VGkrSZN7jfEvxisTplxsn2lHRD2M1+h/V7ulzLdv3C9j2jCMVQGzc6x+DmjO7d8I/oT7sfZp/Id7ZON92vW9Yo=

Te paso un ejemplo https://play.vuejs.org/#eNp9ks1u2zAQhF9lyx6UBInVoD25ioHWCNAWRVvUBXrhhaHWMmOKJPjj2BD07llScRIgQXTS7oyW36w4sC/OzXYJ2Zw1QXrlIgSMyS24Ub2zPsIAHtcwwtrbHiqyVtxwI60JEfrQwVXWT6pvqLWF/9br9l11ejRIq60/Wt5/KE91+hnqGpZFanEtko6wEzohN009QdDxVETsnRYRqQJoNpcgtQjhirM7L5xDz9liGArEODb15nLyKeMSDbzobYuazIWBM6hJbupnM5sQDxohSOuwpXr2MBaGPOdGyG3nbTLtRZkwp5E3yrQnpcoZzuCnMtuHjJQQPRqJEC3EDb74HparFThPZ/l4ILuQUe1QH+Cs5mYs0TPOgp2zSEhmrbrZbbCG/kzhyUF6pzT63y4q2i5n84k0a4K2f/ej9KJPeH7syw3K7Sv927DPPc7+eAzod8jZoxaF7zBO8vXqF+7p/VGkrSZN7jfEvxisTplxsn2lHRD2M1+h/V7ulzLdv3C9j2jCMVQGzc6x+DmjO7d8I/oT7sfZp/Id7ZON92vW9Yo=
height: auto;
}
</style>

11
src/pages/Item/Card/ItemDescriptorImage.vue
View File

@ -3,7 +3,7 @@ import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import EditPictureForm from 'components/EditPictureForm.vue';
import VnImg from 'src/components/ui/VnImg.vue';
import { useSession } from 'src/composables/useSession';
import axios from 'axios';
@ -69,7 +69,12 @@ onMounted(async () => {
<template>
<div class="relative-position">
<QImg :src="image" spinner-color="primary" style="min-height: 256px">
<VnImg
:src="image"
spinner-color="primary"
jon marked this conversation as resolved Outdated
jgallego commented 2024-06-17 10:41:33 +00:00
Outdated
Review
Copy Link

estos no pueden ir en el mismo componente?

estos no pueden ir en el mismo componente?
style="min-height: 256px"
jon marked this conversation as resolved Outdated
jsegarra commented 2024-06-17 11:03:02 +00:00
Outdated
Review
Copy Link

De echo, si pones esta prop modificas la imagen y no se ve entera.
Por ejemplo, http://localhost:9000/#/item/6/summary?limit=10

  1. Con el style, la imagen se corta en las letras, cuando realmente no es así
  2. Spinner-color no es una prop del component VnImg, asi que no haria falta definirla
  3. Te propondria definir un valor por defecto a la prop de zoomSize,por ejemplo "lg"
De echo, si pones esta prop modificas la imagen y no se ve entera. Por ejemplo, http://localhost:9000/#/item/6/summary?limit=10 1. Con el style, la imagen se corta en las letras, cuando realmente no es así 2. Spinner-color no es una prop del component VnImg, asi que no haria falta definirla 3. Te propondria definir un valor por defecto a la prop de zoomSize,por ejemplo "lg"
jsegarra commented 2024-06-17 11:28:26 +00:00
Outdated
Review
Copy Link

Veo que has puesto v-bind="$attrs, guay.
Sin embargo, con respecto a spinner-color, si lo pones en este component, todas las instancias usaran este color y no el que hayas puesto en las instancias

Veo que has puesto v-bind="$attrs, guay. Sin embargo, con respecto a spinner-color, si lo pones en este component, todas las instancias usaran este color y no el que hayas puesto en las instancias
zoom-size="lg"
>
<template #error>
<div class="absolute-full picture text-center q-pa-md flex flex-center">
<div>
@ -82,7 +87,7 @@ onMounted(async () => {
</div>
</div>
</template>
</QImg>
</VnImg>
<QBtn
v-if="showEditButton"
color="primary"

4
src/pages/Order/Card/OrderCatalogItem.vue
View File

@ -3,6 +3,7 @@ import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnLv from 'components/ui/VnLv.vue';
import VnImg from 'src/components/ui/VnImg.vue';
import OrderCatalogItemDialog from 'pages/Order/Card/OrderCatalogItemDialog.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
@ -29,10 +30,11 @@ const dialog = ref(null);
<div class="container order-catalog-item overflow-hidden">
<QCard class="card shadow-6">
<div class="img-wrapper">
<QImg
<VnImg
jon marked this conversation as resolved Outdated
jsegarra commented 2024-06-17 11:30:45 +00:00
Outdated
Review
Copy Link

Propuesta: dejar src y class. Si quieres darle otro estilo, lo comentamos

Propuesta: dejar src y class. Si quieres darle otro estilo, lo comentamos
:src="`/api/Images/catalog/200x200/${item.id}/download?access_token=${token}`"
spinner-color="primary"
jon marked this conversation as resolved
jsegarra commented 2024-06-17 11:28:43 +00:00
Review
Copy Link

Si le pongo red, se sigue viendo naranja

Si le pongo red, se sigue viendo naranja
:ratio="1"
jon marked this conversation as resolved
jsegarra commented 2024-06-17 11:29:40 +00:00
Review
Copy Link

Si le pongo 10, sigue aplicando 1

Si le pongo 10, sigue aplicando 1
zoom-size="lg"
height="192"
width="192"
class="image"

30
src/pages/Order/OrderLines.vue
View File

@ -9,6 +9,7 @@ import FetchData from 'components/FetchData.vue';
import VnLv from 'components/ui/VnLv.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
import VnImg from 'components/ui/VnImg.vue';
import { toCurrency, toDate } from 'src/filters';
import { useSession } from 'composables/useSession';
@ -183,16 +184,19 @@ const detailsColumns = ref([
<template #body="props">
<QTr :props="props">
<QTd>
{{ console.log('props: ', props.row.item.id) }}
<QImg
:src="`/api/Images/catalog/50x50/${props.row.item?.id}/download?access_token=${token}`"
spinner-color="primary"
:ratio="1"
height="50"
width="50"
class="image-wrapper"
style="cursor: pointer"
/>
<div class="image-wrapper">
<VnImg
:src="`/api/Images/catalog/200x200/${props.row.item?.id}/download?access_token=${token}`"
class="image"
height="50"
width="50"
style="
cursor: pointer;
border-radius: 50%;
"
zoom-size="lg"
/>
</div>
</QTd>
<QTd key="item" :props="props" class="item">
<span class="link">
@ -306,7 +310,11 @@ const detailsColumns = ref([
.image-wrapper {
height: 50px;
width: 50px;
border-radius: 50%;
margin-left: 30%;
.image {
border-radius: 50%;
}
}
.no-result {