Merge pull request 'Items summary' (!281) from hyervoni/salix-front-mindshore:feature/ItemsSummary into dev
gitea/salix-front/pipeline/head This commit looks good Details

Reviewed-on: #281
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>
Reviewed-by: Alex Moreno <alexm@verdnatura.es>
This commit is contained in:
Alex Moreno 2024-04-25 12:01:08 +00:00
commit da89f4d731
14 changed files with 522 additions and 129 deletions

View File

@ -54,6 +54,7 @@ const onDataSaved = (data) => {
<QInput
:label="t('Type the visible quantity')"
v-model.number="data.quantity"
autofocus
/>
</div>
</VnRow>

View File

@ -28,6 +28,7 @@ globals:
reset: Reset
close: Close
cancel: Cancel
clone: Clone
confirm: Confirm
assign: Assign
back: Back
@ -1165,6 +1166,36 @@ item:
type: Type
intrastat: Intrastat
origin: Origin
summary:
basicData: 'Basic data'
otherData: 'Other data'
description: 'Description'
tax: 'Tax'
tags: 'Tags'
botanical: 'Botanical'
barcode: 'Barcode'
name: 'Nombre'
completeName: 'Nombre completo'
family: 'Familia'
size: 'Medida'
origin: 'Origen'
stems: 'Tallos'
multiplier: 'Multiplicador'
buyer: 'Comprador'
doPhoto: 'Do photo'
intrastatCode: 'Código intrastat'
intrastat: 'Intrastat'
ref: 'Referencia'
relevance: 'Relevancia'
weight: 'Peso (gramos)/tallo'
units: 'Unidades/caja'
expense: 'Gasto'
generic: 'Genérico'
recycledPlastic: 'Plástico reciclado'
nonRecycledPlastic: 'Plástico no reciclado'
minSalesQuantity: 'Cantidad mínima de venta'
genus: 'Genus'
specie: 'Specie'
components:
topbar: {}
itemsFilterPanel:

View File

@ -28,6 +28,7 @@ globals:
reset: Restaurar
close: Cerrar
cancel: Cancelar
clone: Clonar
confirm: Confirmar
assign: Asignar
back: Volver
@ -1121,6 +1122,10 @@ item:
fixedPrice: Precios fijados
wasteBreakdown: Deglose de mermas
itemCreate: Nuevo artículo
basicData: 'Datos básicos'
tax: 'IVA'
botanical: 'Botánico'
barcode: 'Código de barras'
descriptor:
item: Artículo
buyer: Comprador
@ -1164,6 +1169,36 @@ item:
type: Tipo
intrastat: Intrastat
origin: Origen
summary:
basicData: 'Datos básicos'
otherData: 'Otros datos'
description: 'Descripción'
tax: 'IVA'
tags: 'Etiquetas'
botanical: 'Botánico'
barcode: 'Código de barras'
name: 'Nombre'
completeName: 'Nombre completo'
family: 'Familia'
size: 'Medida'
origin: 'Origen'
stems: 'Tallos'
multiplier: 'Multiplicador'
buyer: 'Comprador'
doPhoto: 'Hacer foto'
intrastatCode: 'Código intrastat'
intrastat: 'Intrastat'
ref: 'Referencia'
relevance: 'Relevancia'
weight: 'Peso (gramos)/tallo'
units: 'Unidades/caja'
expense: 'Gasto'
generic: 'Genérico'
recycledPlastic: 'Plástico reciclado'
nonRecycledPlastic: 'Plástico no reciclado'
minSalesQuantity: 'Cantidad mínima de venta'
genus: 'Genus'
specie: 'Specie'
components:
topbar: {}
itemsFilterPanel:

View File

@ -0,0 +1 @@
<template>Item barcode</template>

View File

@ -0,0 +1 @@
<template>Item Botanical</template>

View File

@ -9,7 +9,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
import RegularizeStockForm from 'components/RegularizeStockForm.vue';
import EditPictureForm from 'components/EditPictureForm.vue';
import ItemDescriptorImage from 'src/pages/Item/Card/ItemDescriptorImage.vue';
import { useState } from 'src/composables/useState';
import useCardDescription from 'src/composables/useCardDescription';
@ -50,12 +50,10 @@ const entityId = computed(() => {
});
const image = ref(null);
const regularizeStockFormDialog = ref(null);
const editPhotoFormDialog = ref(null);
const item = ref(null);
const available = ref(null);
const visible = ref(null);
const _warehouseFk = ref(null);
const warehouseText = ref(null);
const salixUrl = ref();
const warehouseFk = computed({
get() {
@ -63,14 +61,9 @@ const warehouseFk = computed({
},
set(val) {
_warehouseFk.value = val;
if (val) {
updateStock();
getWarehouseName(val);
}
if (val) updateStock();
},
});
const showWarehouseIconTooltip = ref(true);
const showEditPhotoForm = ref(false);
onMounted(async () => {
await getItemAvatar();
@ -90,26 +83,6 @@ const setData = (entity) => {
data.value = useCardDescription(entity.name, entity.id);
};
const getWarehouseName = async (warehouseFk) => {
try {
showWarehouseIconTooltip.value = false;
const filter = {
where: { id: warehouseFk },
};
const { data } = await axios.get('Warehouses/findOne', { filter });
warehouseText.value = t('item.descriptor.warehouseText', {
warehouseName: data.name,
});
showWarehouseIconTooltip.value = true;
} catch (err) {
console.error('Error finding warehouse');
}
};
const updateStock = async () => {
try {
available.value = null;
@ -135,10 +108,6 @@ const openRegularizeStockForm = () => {
regularizeStockFormDialog.value.show();
};
const toggleEditPictureForm = () => {
showEditPhotoForm.value = !showEditPhotoForm.value;
};
const cloneItem = async () => {
try {
const { data } = await axios.post(`Items/${entityId.value}/clone`);
@ -193,79 +162,16 @@ const openCloneDialog = async () => {
</QItem>
<QItem v-ripple clickable @click="openCloneDialog()">
<QItemSection>
{{ t('Clone') }}
{{ t('globals.clone') }}
</QItemSection>
</QItem>
</template>
<template #before>
<div class="relative-position">
<QImg :src="image" spinner-color="primary" class="photo">
<template #error>
<div
class="absolute-full picture text-center q-pa-md flex flex-center"
>
<div>
<div
class="text-grey-5"
style="opacity: 0.4; font-size: 5vh"
>
<QIcon name="vn:item" />
</div>
<div class="text-grey-5" style="opacity: 0.4">
{{ t('item.descriptor.item') }}
</div>
</div>
</div>
</template>
</QImg>
<QBtn
color="primary"
size="lg"
round
class="edit-photo-btn"
@click="toggleEditPictureForm()"
>
<QIcon name="edit" size="sm" />
<QDialog ref="editPhotoFormDialog" v-model="showEditPhotoForm">
<EditPictureForm
collection="catalog"
:id="entityId"
@close-form="toggleEditPictureForm()"
@on-photo-uploaded="getItemAvatar()"
<ItemDescriptorImage
:entity-id="entityId"
:visible="visible"
:available="available"
/>
</QDialog>
</QBtn>
</div>
<div
class="row justify-between items-center full-width bg-primary"
style="height: 54px"
>
<div class="col column items-center">
<span class="text-uppercase color-vn-white" style="font-size: 11px">
{{ t('item.descriptor.visible') }}
</span>
<span class="text-weight-bold text-h5 color-vn-white">{{
visible
}}</span>
</div>
<div
class="col column items-center separation-borders"
style="font-size: 11px"
>
<span class="text-uppercase color-vn-white">
{{ t('item.descriptor.available') }}
</span>
<span class="text-weight-bold text-h5 color-vn-white">{{
available
}}</span>
</div>
<div class="col column items-center justify-center">
<QIcon name="info" class="cursor-pointer color-vn-white" size="md">
<QTooltip>{{ warehouseText }}</QTooltip>
</QIcon>
</div>
</div>
</template>
<template #body="{ entity }">
<VnLv :label="t('item.descriptor.buyer')">
@ -307,7 +213,6 @@ const openCloneDialog = async () => {
<i18n>
es:
Regularize stock: Regularizar stock
Clone: Clonar
All it's properties will be copied: Todas sus propiedades serán copiadas
Do you want to clone this item?: ¿Desea clonar este artículo?
</i18n>

View File

@ -0,0 +1,158 @@
<script setup>
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import EditPictureForm from 'components/EditPictureForm.vue';
import { useSession } from 'src/composables/useSession';
import axios from 'axios';
const $props = defineProps({
visible: {
type: Number,
default: null,
},
available: {
type: Number,
default: null,
},
entityId: {
type: String,
default: null,
},
showEditButton: {
type: Boolean,
default: true,
},
});
const { t } = useI18n();
const { getTokenMultimedia } = useSession();
const image = ref(null);
const editPhotoFormDialog = ref(null);
const showEditPhotoForm = ref(false);
const warehouseName = ref(null);
const getItemAvatar = async () => {
const token = getTokenMultimedia();
const timeStamp = `timestamp=${Date.now()}`;
image.value = `/api/Images/catalog/200x200/${$props.entityId}/download?access_token=${token}&${timeStamp}`;
};
const toggleEditPictureForm = () => {
showEditPhotoForm.value = !showEditPhotoForm.value;
};
const getItemConfigs = async () => {
const { data } = await axios.get('ItemConfigs/findOne');
if (!data) return;
await getWarehouseName(data.warehouseFk);
return data;
};
const getWarehouseName = async (warehouseFk) => {
const filter = {
where: { id: warehouseFk },
};
const { data } = await axios.get('Warehouses/findOne', { filter });
if (!data) return;
warehouseName.value = data.name;
};
onMounted(async () => {
getItemAvatar();
getItemConfigs();
});
</script>
<template>
<div class="relative-position">
<QImg :src="image" spinner-color="primary" style="min-height: 256px">
<template #error>
<div class="absolute-full picture text-center q-pa-md flex flex-center">
<div>
<div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
<QIcon name="vn:item" />
</div>
<div class="text-grey-5" style="opacity: 0.4">
{{ t('item.descriptor.item') }}
</div>
</div>
</div>
</template>
</QImg>
<QBtn
v-if="showEditButton"
color="primary"
size="lg"
round
class="edit-photo-btn"
@click="toggleEditPictureForm()"
>
<QIcon name="edit" size="sm" />
<QDialog ref="editPhotoFormDialog" v-model="showEditPhotoForm">
<EditPictureForm
collection="catalog"
:id="entityId"
@close-form="toggleEditPictureForm()"
@on-photo-uploaded="getItemAvatar()"
/>
</QDialog>
</QBtn>
</div>
<div
class="row justify-between items-center full-width bg-primary"
style="height: 54px"
>
<div class="col column items-center">
<span class="text-uppercase color-vn-white" style="font-size: 11px">
{{ t('item.descriptor.visible') }}
</span>
<span class="text-weight-bold text-h5 color-vn-white">{{ visible }}</span>
</div>
<div class="col column items-center separation-borders" style="font-size: 11px">
<span class="text-uppercase color-vn-white">
{{ t('item.descriptor.available') }}
</span>
<span class="text-weight-bold text-h5 color-vn-white">{{ available }}</span>
</div>
<div class="col column items-center justify-center">
<QIcon name="info" class="cursor-pointer color-vn-white" size="md">
<QTooltip>{{
t('warehouseText', {
warehouseName: warehouseName,
})
}}</QTooltip>
</QIcon>
</div>
</div>
</template>
<i18n>
es:
Regularize stock: Regularizar stock
All it's properties will be copied: Todas sus propiedades serán copiadas
Do you want to clone this item?: ¿Desea clonar este artículo?
warehouseText: Calculated on the warehouse of { warehouseName }
en:
warehouseText: Calculado sobre el almacén de { warehouseName }
</i18n>
<style lang="scss" scoped>
.edit-photo-btn {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 1;
cursor: pointer;
}
.separation-borders {
border-left: 1px solid $white;
border-right: 1px solid $white;
}
</style>

View File

@ -1 +1,228 @@
<template>Item summary</template>
<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import ItemDescriptorImage from 'src/pages/Item/Card/ItemDescriptorImage.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue';
import { useRole } from 'src/composables/useRole';
const $props = defineProps({
id: {
type: Number,
default: 0,
},
});
const route = useRoute();
const { t } = useI18n();
const roleState = useRole();
const entityId = computed(() => $props.id || route.params.id);
const isBuyer = computed(() => {
return roleState.hasAny(['buyer']);
});
const isReplenisher = computed(() => {
return roleState.hasAny(['replenisher']);
});
const isAdministrative = computed(() => {
return roleState.hasAny(['administrative']);
});
</script>
<template>
<CardSummary
ref="summary"
:url="`Items/${entityId}/getSummary`"
:entity-id="entityId"
data-key="ItemSummary"
>
<template #header-left>
<router-link
v-if="route.name !== 'ItemSummary'"
:to="{ name: 'ItemSummary', params: { id: entityId } }"
class="header link"
>
<QIcon name="open_in_new" color="white" size="sm" />
</router-link>
</template>
<template #header="{ entity: { item } }">
{{ item.id }} - {{ item.name }}
</template>
<template #body="{ entity: { item, tags, visible, available, botanical } }">
<QCard class="vn-one photo">
<ItemDescriptorImage
:entity-id="entityId"
:visible="visible"
:available="available"
:show-edit-button="false"
/>
</QCard>
<QCard class="vn-one">
<component
:is="isBuyer ? 'router-link' : 'span'"
:to="{ name: 'ItemBasicData', params: { id: entityId } }"
class="header"
:class="{ 'header-link': isBuyer }"
>
{{ t('item.summary.basicData') }}
<QIcon v-if="isBuyer" name="open_in_new" />
</component>
<VnLv :label="t('item.summary.name')" :value="item.name" />
<VnLv :label="t('item.summary.completeName')" :value="item.longName" />
<VnLv :label="t('item.summary.family')" :value="item.itemType.name" />
<VnLv :label="t('item.summary.size')" :value="item.size" />
<VnLv :label="t('item.summary.origin')" :value="item.origin.name" />
<VnLv :label="t('item.summary.stems')" :value="item.stems" />
<VnLv
:label="t('item.summary.multiplier')"
:value="item.stemMultiplier"
/>
<VnLv :label="t('item.summary.buyer')">
<template #value>
<VnUserLink
:name="item.itemType.worker.user.name"
:worker-id="item.itemType.worker.id"
/>
</template>
</VnLv>
<VnLv :info="t('Este artículo necesita una foto')">
<template #value>
<QCheckbox
:label="t('item.summary.doPhoto')"
v-model="item.isPhotoRequested"
:disable="true"
/>
</template>
</VnLv>
</QCard>
<QCard class="vn-one">
<component
:is="isBuyer ? 'router-link' : 'span'"
:to="{ name: 'ItemBasicData', params: { id: entityId } }"
class="header"
:class="{ 'header-link': isBuyer }"
>
{{ t('item.summary.otherData') }}
<QIcon v-if="isBuyer" name="open_in_new" />
</component>
<VnLv
:label="t('item.summary.intrastatCode')"
:value="item.intrastat.id"
/>
<VnLv
:label="t('item.summary.intrastat')"
:value="item.intrastat.description"
/>
<VnLv :label="t('item.summary.ref')" :value="item.comment" />
<VnLv :label="t('item.summary.relevance')" :value="item.relevancy" />
<VnLv :label="t('item.summary.weight')" :value="item.weightByPiece" />
<VnLv :label="t('item.summary.units')" :value="item.packingOut" />
<VnLv :label="t('item.summary.expense')" :value="item.expense.name" />
<VnLv :label="t('item.summary.generic')" :value="item.genericFk" />
<VnLv
:label="t('item.summary.recycledPlastic')"
:value="item.recycledPlastic"
/>
<VnLv
:label="t('item.summary.nonRecycledPlastic')"
:value="item.nonRecycledPlastic"
/>
<VnLv
:label="t('item.summary.minSalesQuantity')"
:value="item.minQuantity"
/>
</QCard>
<QCard class="vn-one">
<component
:is="isBuyer || isReplenisher ? 'router-link' : 'span'"
:to="{ name: 'ItemTags', params: { id: entityId } }"
class="header"
:class="{ 'header-link': isBuyer || isReplenisher }"
>
{{ t('item.summary.tags') }}
<QIcon v-if="isBuyer || isReplenisher" name="open_in_new" />
</component>
<VnLv
v-for="(tag, index) in tags"
:key="index"
:label="`${tag.priority} ${tag.tag.name}`"
:value="tag.value"
/>
</QCard>
<QCard class="vn-one" v-if="item.description">
<component
:is="isBuyer ? 'router-link' : 'span'"
:to="{ name: 'ItemBasicData', params: { id: entityId } }"
class="header"
:class="{ 'header-link': isBuyer }"
>
{{ t('item.summary.description') }}
<QIcon v-if="isBuyer" name="open_in_new" />
</component>
<p>
{{ item.description }}
</p>
</QCard>
<QCard class="vn-one">
<component
:is="isBuyer || isAdministrative ? 'router-link' : 'span'"
:to="{ name: 'ItemTax', params: { id: entityId } }"
class="header"
:class="{ 'header-link': isBuyer || isAdministrative }"
>
{{ t('item.summary.tax') }}
<QIcon v-if="isBuyer || isAdministrative" name="open_in_new" />
</component>
<VnLv
v-for="(tax, index) in item.taxes"
:key="index"
:label="tax.country.country"
:value="tax.taxClass.description"
/>
</QCard>
<QCard class="vn-one">
<component
:is="isBuyer ? 'router-link' : 'span'"
:to="{ name: 'ItemBotanical', params: { id: entityId } }"
class="header"
:class="{ 'header-link': isBuyer }"
>
{{ t('item.summary.botanical') }}
<QIcon v-if="isBuyer" name="open_in_new" />
</component>
<VnLv :label="t('item.summary.genus')" :value="botanical?.genus?.name" />
<VnLv
:label="t('item.summary.specie')"
:value="botanical?.specie?.name"
/>
</QCard>
<QCard class="vn-one">
<component
:is="isBuyer || isReplenisher ? 'router-link' : 'span'"
:to="{ name: 'ItemBarcode', params: { id: entityId } }"
class="header"
:class="{ 'header-link': isBuyer || isReplenisher }"
>
{{ t('item.summary.barcode') }}
<QIcon v-if="isBuyer || isReplenisher" name="open_in_new" />
</component>
<p v-for="(barcode, index) in item.itemBarcode" :key="index">
{{ barcode.code }}
</p>
</QCard>
</template>
</CardSummary>
</template>
<i18n>
en:
Este artículo necesita una foto: Este artículo necesita una foto
</i18n>

View File

@ -0,0 +1 @@
<template>Item tax</template>

View File

@ -538,7 +538,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
size="sm"
>
<QTooltip>
{{ t('Clone') }}
{{ t('globals.clone') }}
</QTooltip>
</QIcon>
<QIcon
@ -572,6 +572,5 @@ es:
New item: Nuevo artículo
All it's properties will be copied: Todas sus propiedades serán copiadas
Do you want to clone this item?: ¿Desea clonar este artículo?
Clone: Clonar
Preview: Vista previa
</i18n>

View File

@ -213,7 +213,7 @@ const openTicketsDialog = (id) => {
<QCardActions align="right">
<QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
<QBtn color="primary" v-close-popup @click="cloneRoutes">
{{ t('Clone') }}
{{ t('globals.clone') }}
</QBtn>
</QCardActions>
</QCard>
@ -510,7 +510,6 @@ es:
Select the starting date: Seleccione la fecha de inicio
Stating date: Fecha de inicio
Cancel: Cancelar
Clone: Clonar
Mark as served: Marcar como servidas
Download selected routes as PDF: Descargar rutas seleccionadas como PDF
Add ticket: Añadir tickets

View File

@ -176,7 +176,7 @@ function navigateToRoadmapSummary(event, row) {
<QCardActions align="right">
<QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
<QBtn color="primary" v-close-popup @click="cloneSelection">
{{ t('Clone') }}
{{ t('globals.clone') }}
</QBtn>
</QCardActions>
</QCard>

View File

@ -251,7 +251,7 @@ const openSmsDialog = async () => {
<QCardActions align="right">
<QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
<QBtn color="primary" v-close-popup @click="cloneRoutes">
{{ t('Clone') }}
{{ t('globals.clone') }}
</QBtn>
</QCardActions>
</QCard>

View File

@ -11,7 +11,14 @@ export default {
redirect: { name: 'ItemMain' },
menus: {
main: ['ItemList', 'WasteBreakdown', 'ItemFixedPrice'],
card: ['ItemBasicData'],
card: [
'ItemBasicData',
'ItemDiary',
'ItemTags',
'ItemTax',
'ItemBotanical',
'ItemBarcode',
],
},
children: [
{
@ -76,24 +83,6 @@ export default {
},
component: () => import('src/pages/Item/Card/ItemSummary.vue'),
},
{
path: 'diary',
name: 'ItemDiary',
meta: {
title: 'diary',
icon: 'vn:transaction',
},
component: () => import('src/pages/Item/Card/ItemDiary.vue'),
},
{
path: 'tags',
name: 'ItemTags',
meta: {
title: 'Tags',
icon: 'vn:tags',
},
component: () => import('src/pages/Item/Card/ItemTags.vue'),
},
{
path: 'basic-data',
name: 'ItemBasicData',
@ -103,6 +92,52 @@ export default {
},
component: () => import('src/pages/Item/Card/ItemBasicData.vue'),
},
{
path: 'tags',
name: 'ItemTags',
meta: {
title: 'tags',
icon: 'vn:tags',
},
component: () => import('src/pages/Item/Card/ItemTags.vue'),
},
{
path: 'tax',
name: 'ItemTax',
meta: {
title: 'tax',
icon: 'vn:tax',
},
component: () => import('src/pages/Item/Card/ItemTax.vue'),
},
{
path: 'botanical',
name: 'ItemBotanical',
meta: {
title: 'botanical',
icon: 'vn:botanical',
},
component: () => import('src/pages/Item/Card/ItemBotanical.vue'),
},
{
path: 'barcode',
name: 'ItemBarcode',
meta: {
title: 'barcode',
icon: 'vn:barcode',
},
component: () => import('src/pages/Item/Card/ItemBarcode.vue'),
},
{
path: 'diary',
name: 'ItemDiary',
meta: {
title: 'diary',
icon: 'vn:transaction',
},
component: () => import('src/pages/Item/Card/ItemDiary.vue'),
},
],
},
],