src/pages/Item/Card/ItemBarcode.vue

@@ -1 +1,94 @@
-<template>Item barcode</template>
+<script setup>
+import { ref, onMounted, nextTick } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CrudModel from 'src/components/CrudModel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const itemBarcodeRef = ref(null);
+
+const insertRow = () => {
+    itemBarcodeRef.value.insert();
+    focusLastInput();
+};
+
+const focusLastInput = () => {
+    nextTick(() => {
+        const inputs = document.querySelectorAll('[focusable-input]');
+        const lastInput = inputs[inputs.length - 1];
+        if (lastInput) lastInput.focus();
+    });
+};
+
+onMounted(async () => {
+    if (itemBarcodeRef.value) itemBarcodeRef.value.reload();
+});
+</script>
+<template>
+    <div class="full-width flex justify-center">
+        <QPage class="card-width q-pa-lg">
+            <CrudModel
+                :data-required="{ itemFk: route.params.id }"
+                :default-remove="false"
+                :filter="{
+                    fields: ['id', 'itemFk', 'code'],
+                    where: { itemFk: route.params.id },
+                }"
+                data-key="ItemBarcodes"
+                model="ItemBarcodes"
+                ref="itemBarcodeRef"
+                url="ItemBarcodes"
+            >
+                <template #body="{ rows }">
+                    <QCard class="q-px-lg q-py-md">
+                        <div
+                            v-for="(row, index) in rows"
+                            :key="index"
+                            class="q-mb-md full-width row items-center no-wrap"
+                        >
+                            <VnInput
+                                :label="t('Code')"
+                                v-model="row.code"
+                                class="full-width"
+                                focusable-input
+                            />
+                            <QIcon
+                                @click="itemBarcodeRef.remove([row])"
+                                class="cursor-pointer q-ml-md"
+                                color="primary"
+                                name="delete"
+                                size="sm"
+                            >
+                                <QTooltip class="text-no-wrap">
+                                    {{ t('Remove barcode') }}
+                                </QTooltip>
+                            </QIcon>
+                        </div>
+                        <QIcon
+                            @click="insertRow()"
+                            class="cursor-pointer fill-icon-on-hover"
+                            color="primary"
+                            name="add_circle"
+                            size="sm"
+                        >
+                            <QTooltip>
+                                {{ t('Add barcode') }}
+                            </QTooltip>
+                        </QIcon>
+                    </QCard>
+                </template>
+            </CrudModel>
+        </QPage>
+    </div>
+</template>
+
+<i18n>
+es:
+    Code: Código
+    Remove barcode: Quitar código de barras
+    Add barcode: Añadir código de barras
+</i18n>

src/pages/Item/Card/ItemDescriptor.vue

@@ -177,14 +177,27 @@ const openCloneDialog = async () => {
             <VnLv :label="t('item.descriptor.buyer')">
                 <template #value>
                     <span class="link">
-                        {{ t('item.descriptor.buyer') }}
+                        {{ entity.itemType?.worker?.user?.name }}
                         <WorkerDescriptorProxy :id="entity.itemType?.worker?.id" />
                     </span>
                 </template>
             </VnLv>
-            <VnLv :label="t('item.descriptor.color')" :value="entity.value5"> </VnLv>
-            <VnLv :label="t('item.descriptor.color')" :value="entity.value6" />
-            <VnLv :label="t('item.descriptor.stems')" :value="entity.value7" />
+            <VnLv
+                v-if="entity.value5"
+                :label="t('item.descriptor.color')"
+                :value="entity.value5"
+            >
+            </VnLv>
+            <VnLv
+                v-if="entity.value6"
+                :label="t('item.descriptor.category')"
+                :value="entity.value6"
+            />
+            <VnLv
+                v-if="entity.value7"
+                :label="t('item.descriptor.stems')"
+                :value="entity.value7"
+            />
         </template>
         <template #actions="{}">
             <QCardActions class="row justify-center">