From 934db329733c81741074a22cdb39ea37446350d6 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 24 Apr 2024 10:31:33 -0300
Subject: [PATCH 1/3] WIP

---
 src/components/CrudModel.vue     |   1 +
 src/css/app.scss                 |   5 +
 src/pages/Item/Card/ItemTags.vue | 176 ++++++++++++++++++++++++++++++-
 src/router/modules/item.js       |   4 +-
 4 files changed, 183 insertions(+), 3 deletions(-)

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index fb3ac10c3..deec0e4fe 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -81,6 +81,7 @@ defineExpose({
     hasChanges,
     saveChanges,
     getChanges,
+    formData,
 });
 
 async function fetch(data) {
diff --git a/src/css/app.scss b/src/css/app.scss
index 25b484649..9037802ad 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -119,6 +119,11 @@ select:-webkit-autofill {
     font-variation-settings: 'FILL' 1;
 }
 
+.fill-icon-on-hover:hover {
+    font-variation-settings: 'FILL' 1;
+    cursor: pointer;
+}
+
 .vn-table-separation-row {
     height: 16px !important;
     background-color: var(--vn-section-color) !important;
diff --git a/src/pages/Item/Card/ItemTags.vue b/src/pages/Item/Card/ItemTags.vue
index 95f4380e4..bf18c682c 100644
--- a/src/pages/Item/Card/ItemTags.vue
+++ b/src/pages/Item/Card/ItemTags.vue
@@ -1 +1,175 @@
-<template>Item tags (CREAR CUANDO SE DESARROLLE EL MODULO DE ITEMS)</template>
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CrudModel from 'components/CrudModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FetchData from 'components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+import axios from 'axios';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const itemTagsRef = ref(null);
+const tagOptions = ref([]);
+
+// const getHighestPriority = () => {
+//     let max = 0;
+//     console.log('formData:: ', itemTagsRef.value.formData);
+//     itemTagsRef.value.formData.forEach((tag) => {
+//         if (tag.priority > max) max = tag.priority;
+//     });
+//     return max + 1;
+// };
+
+const getHighestPriority = computed(() => {
+    let max = 0;
+    if (!itemTagsRef.value || !itemTagsRef.value.length) return max;
+    console.log('formData:: ', itemTagsRef.value.formData);
+    itemTagsRef.value.formData.forEach((tag) => {
+        if (tag.priority > max) max = tag.priority;
+    });
+    return max + 1;
+});
+
+const getSelectedTagValues = async (tag) => {
+    try {
+        tag.value = null;
+        const filter = {
+            fields: ['value'],
+            order: 'value ASC',
+        };
+
+        const params = { filter: JSON.stringify(filter) };
+        const { data } = await axios.get(`Tags/${tag.selectedTag.id}/filterValue`, {
+            params,
+        });
+        tag.valueOptions = data;
+    } catch (err) {
+        console.error('Error getting selected tag values');
+    }
+};
+
+onMounted(() => {
+    if (itemTagsRef.value) itemTagsRef.value.reload();
+});
+</script>
+
+<template>
+    <FetchData
+        url="Tags"
+        :filter="{ fields: ['id', 'name', 'isFree', 'sourceTable'] }"
+        @on-fetch="(data) => (tagOptions = data)"
+        auto-load
+    />
+    <div class="full-width flex justify-center">
+        <QPage class="card-width q-pa-lg">
+            <CrudModel
+                ref="itemTagsRef"
+                :data-required="{
+                    itemFk: route.params.id,
+                    priority: getHighestPriority,
+                    tag: {
+                        isFree: undefined,
+                    },
+                }"
+                :default-remove="false"
+                :filter="{
+                    fields: ['id', 'itemFk', 'tagFk', 'value', 'priority'],
+                    where: { itemFk: route.params.id },
+                    order: 'priority ASC',
+                    include: {
+                        relation: 'tag',
+                        scope: {
+                            fields: ['id', 'name', 'isFree', 'sourceTable'],
+                        },
+                    },
+                }"
+                data-key="ItemTags"
+                model="ItemTags"
+                url="ItemTags"
+                save-url="Tags/onSubmit"
+            >
+                <template #body="{ rows }">
+                    <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"
+                        >
+                            <VnSelectFilter
+                                :label="t('Tag')"
+                                v-model="row.tagFk"
+                                :options="tagOptions"
+                                option-label="name"
+                                option-value="id"
+                                hide-selected
+                                @update:model-value="getSelectedTagValues(value)"
+                            />
+                            <VnSelectFilter
+                                v-if="row.tag?.isFree === false"
+                                :label="t('Value')"
+                                v-model="row.value"
+                                option-value="value"
+                                option-label="value"
+                                emit-value
+                                use-input
+                                :is-clearable="false"
+                            />
+                            <VnInput
+                                v-if="row.tag?.isFree || row.tag?.isFree == undefined"
+                                v-model="row.value"
+                                :label="t('Value')"
+                                :is-clearable="false"
+                            />
+                            <VnInput
+                                :label="t('Relevancy')"
+                                type="number"
+                                v-model="row.priority"
+                            />
+                            <div class="col-1 row justify-center items-center">
+                                <QIcon
+                                    @click="itemTagsRef.remove([row])"
+                                    class="fill-icon-on-hover"
+                                    color="primary"
+                                    name="delete"
+                                    size="sm"
+                                >
+                                    <QTooltip>
+                                        {{ t('Remove tag') }}
+                                    </QTooltip>
+                                </QIcon>
+                            </div>
+                        </VnRow>
+                        <VnRow>
+                            <QIcon
+                                @click="itemTagsRef.insert()"
+                                class="cursor-pointer"
+                                color="primary"
+                                name="add"
+                                size="sm"
+                            >
+                                <QTooltip>
+                                    {{ t('Add tag') }}
+                                </QTooltip>
+                            </QIcon>
+                        </VnRow>
+                    </QCard>
+                </template>
+            </CrudModel>
+        </QPage>
+    </div>
+</template>
+
+<i18n>
+es:
+    Remove tag: Quitar etiqueta
+    Add tag: Añadir etiqueta
+    Tag: Etiqueta
+    Value: Valor
+    Relevancy: Relevancia
+</i18n>
diff --git a/src/router/modules/item.js b/src/router/modules/item.js
index 70d49c56c..1b582d8e4 100644
--- a/src/router/modules/item.js
+++ b/src/router/modules/item.js
@@ -12,7 +12,7 @@ export default {
     redirect: { name: 'ItemMain' },
     menus: {
         main: ['ItemList', 'WasteBreakdown', 'ItemTypeList'],
-        card: ['ItemBasicData'],
+        card: ['ItemBasicData', 'ItemTags'],
     },
     children: [
         {
@@ -98,7 +98,7 @@ export default {
                     path: 'tags',
                     name: 'ItemTags',
                     meta: {
-                        title: 'Tags',
+                        title: 'tags',
                         icon: 'vn:tags',
                     },
                     component: () => import('src/pages/Item/Card/ItemTags.vue'),

From f3b1de1ee41777981e0bc7e6cbc654f075745693 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 3 May 2024 17:19:13 -0300
Subject: [PATCH 2/3] Item tags

---
 src/pages/Item/Card/ItemTags.vue | 119 +++++++++++++++----------------
 src/pages/Item/locale/en.yml     |   6 ++
 src/pages/Item/locale/es.yml     |   6 ++
 3 files changed, 69 insertions(+), 62 deletions(-)

diff --git a/src/pages/Item/Card/ItemTags.vue b/src/pages/Item/Card/ItemTags.vue
index 3067c9768..01df1009b 100644
--- a/src/pages/Item/Card/ItemTags.vue
+++ b/src/pages/Item/Card/ItemTags.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, computed } from 'vue';
+import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -10,65 +10,58 @@ import FetchData from 'components/FetchData.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 
 import axios from 'axios';
-import { useArrayData } from 'composables/useArrayData';
 
 const route = useRoute();
 const { t } = useI18n();
 
 const itemTagsRef = ref(null);
 const tagOptions = ref([]);
-
-const arrayData = useArrayData('ItemTags');
-const itemTags = computed(() => {
-    console.log('arrayData.store.data:: ', arrayData.store.data);
-    let map = new Map();
-    (arrayData.store.data || []).forEach((tag) => {
-        map.set(tag.id, tag);
-    });
-    return map;
-});
-// const getHighestPriority = () => {
-//     let max = 0;
-//     console.log('formData:: ', itemTagsRef.value.formData);
-//     itemTagsRef.value.formData.forEach((tag) => {
-//         if (tag.priority > max) max = tag.priority;
-//     });
-//     return max + 1;
-// };
-
-const getHighestPriority = computed(() => {
-    let max = 0;
-    if (!itemTagsRef.value || !itemTagsRef.value.length) return max;
-    console.log('formData:: ', itemTagsRef.value.formData);
-    itemTagsRef.value.formData.forEach((tag) => {
-        if (tag.priority > max) max = tag.priority;
-    });
-    return max + 1;
-});
+const valueOptionsMap = ref(new Map());
 
 const getSelectedTagValues = async (tag) => {
     try {
-        console.log('tag:: ', tag);
-        tag.value = null;
+        if (!tag.tagFk && tag.tag.isFree) return;
         const filter = {
             fields: ['value'],
             order: 'value ASC',
         };
 
         const params = { filter: JSON.stringify(filter) };
-        const { data } = await axios.get(`Tags/${tag.selectedTag.id}/filterValue`, {
+        const { data } = await axios.get(`Tags/${tag.tagFk}/filterValue`, {
             params,
         });
-        tag.valueOptions = data;
+        valueOptionsMap.value.set(tag.tagFk, data);
     } catch (err) {
         console.error('Error getting selected tag values');
     }
 };
 
-onMounted(() => {
-    // if (itemTagsRef.value) itemTagsRef.value.reload();
-    console.log('itemTagsRef:: ', itemTagsRef.value.formData);
-});
+const onItemTagsFetched = async (itemTags) => {
+    (itemTags || []).forEach((tag) => {
+        getSelectedTagValues(tag);
+    });
+};
+
+const handleTagSelected = (rows, index, tag) => {
+    rows[index].tag = tag;
+    rows[index].tagFk = tag.id;
+    rows[index].value = null;
+    getSelectedTagValues(rows[index]);
+};
+
+const getHighestPriority = (rows) => {
+    let max = 0;
+    rows.forEach((tag) => {
+        if (tag.priority > max) max = tag.priority;
+    });
+    return max + 1;
+};
+
+const insertTag = (rows) => {
+    itemTagsRef.value.insert();
+    itemTagsRef.value.formData[itemTagsRef.value.formData.length - 1].priority =
+        getHighestPriority(rows);
+};
 </script>
 
 <template>
@@ -85,14 +78,17 @@ onMounted(() => {
                 data-key="ItemTags"
                 model="ItemTags"
                 url="ItemTags"
-                save-url="Tags/onSubmit"
-                auto-load
+                update-url="Tags/onSubmit"
                 :data-required="{
+                    $index: undefined,
                     itemFk: route.params.id,
-                    priority: getHighestPriority,
+                    priority: undefined,
                     tag: {
                         isFree: undefined,
+                        value: undefined,
+                        name: undefined,
                     },
+                    tagFk: undefined,
                 }"
                 :default-remove="false"
                 :filter="{
@@ -106,6 +102,8 @@ onMounted(() => {
                         },
                     },
                 }"
+                auto-load
+                @on-fetch="onItemTagsFetched"
             >
                 <template #body="{ rows }">
                     <QCard class="q-pl-lg q-py-md">
@@ -115,32 +113,39 @@ onMounted(() => {
                             class="row q-gutter-md q-mb-md"
                         >
                             <VnSelect
-                                :label="t('Tag')"
-                                v-model="row.tagFk"
+                                :label="t('itemTags.tag')"
                                 :options="tagOptions"
+                                :model-value="row.tag"
                                 option-label="name"
-                                option-value="id"
                                 hide-selected
-                                @update:model-value="getSelectedTagValues(row)"
+                                @update:model-value="
+                                    ($event) => handleTagSelected(rows, index, $event)
+                                "
                             />
                             <VnSelect
                                 v-if="row.tag?.isFree === false"
+                                :key="row.tagFk"
                                 :label="t('Value')"
                                 v-model="row.value"
-                                option-value="value"
+                                :options="valueOptionsMap.get(row.tagFk)"
                                 option-label="value"
+                                option-value="value"
                                 emit-value
                                 use-input
+                                class="col"
                                 :is-clearable="false"
                             />
                             <VnInput
-                                v-if="row.tag?.isFree || row.tag?.isFree == undefined"
+                                v-else-if="
+                                    row.tag?.isFree || row.tag?.isFree == undefined
+                                "
                                 v-model="row.value"
-                                :label="t('Value')"
+                                :label="t('itemTags.value')"
                                 :is-clearable="false"
+                                style="width: 100%"
                             />
                             <VnInput
-                                :label="t('Relevancy')"
+                                :label="t('itemTags.relevancy')"
                                 type="number"
                                 v-model="row.priority"
                             />
@@ -153,37 +158,27 @@ onMounted(() => {
                                     size="sm"
                                 >
                                     <QTooltip>
-                                        {{ t('Remove tag') }}
+                                        {{ t('itemTags.removeTag') }}
                                     </QTooltip>
                                 </QIcon>
                             </div>
                         </VnRow>
                         <VnRow>
                             <QIcon
-                                @click="itemTagsRef.insert()"
+                                @click="insertTag(rows)"
                                 class="cursor-pointer"
                                 color="primary"
                                 name="add"
                                 size="sm"
                             >
                                 <QTooltip>
-                                    {{ t('Add tag') }}
+                                    {{ t('itemTags.addTag') }}
                                 </QTooltip>
                             </QIcon>
                         </VnRow>
                     </QCard>
                 </template>
             </CrudModel>
-            <pre>{{ itemTags }}</pre>
         </QPage>
     </div>
 </template>
-
-<i18n>
-es:
-    Remove tag: Quitar etiqueta
-    Add tag: Añadir etiqueta
-    Tag: Etiqueta
-    Value: Valor
-    Relevancy: Relevancia
-</i18n>
diff --git a/src/pages/Item/locale/en.yml b/src/pages/Item/locale/en.yml
index 9acd1de4d..2ffcd3661 100644
--- a/src/pages/Item/locale/en.yml
+++ b/src/pages/Item/locale/en.yml
@@ -34,3 +34,9 @@ lastEntries:
     package: Package
     freight: Freight
     comission: Comission
+itemTags:
+    removeTag: Remove tag
+    addTag: Add tag
+    tag: Tag
+    value: Value
+    relevancy: Relevancy
diff --git a/src/pages/Item/locale/es.yml b/src/pages/Item/locale/es.yml
index 46e0d9eb7..3047239f2 100644
--- a/src/pages/Item/locale/es.yml
+++ b/src/pages/Item/locale/es.yml
@@ -34,3 +34,9 @@ lastEntries:
     package: Embalaje
     freight: Porte
     comission: Comisión
+itemTags:
+    removeTag: Quitar etiqueta
+    addTag: Añadir etiqueta
+    tag: Etiqueta
+    value: Valor
+    relevancy: Relevancia

From c0dd140a3ab0a22d475be5216421e50186721128 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 7 May 2024 11:38:12 +0200
Subject: [PATCH 3/3] fix: validTag

---
 src/components/common/VnSelect.vue | 3 ++-
 src/pages/Item/Card/ItemTags.vue   | 9 ++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 05c74f00a..e8083dec2 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -57,7 +57,7 @@ const $props = defineProps({
 });
 
 const { t } = useI18n();
-const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
 
 const { optionLabel, optionValue, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
@@ -167,6 +167,7 @@ watch(modelValue, (newValue) => {
         hide-selected
         fill-input
         ref="vnSelectRef"
+        lazy-rules
         :class="{ required: $attrs.required }"
         :rules="$attrs.required ? [requiredFieldRule] : null"
         virtual-scroll-slice-size="options.length"
diff --git a/src/pages/Item/Card/ItemTags.vue b/src/pages/Item/Card/ItemTags.vue
index 01df1009b..b3cdfffb1 100644
--- a/src/pages/Item/Card/ItemTags.vue
+++ b/src/pages/Item/Card/ItemTags.vue
@@ -105,7 +105,7 @@ const insertTag = (rows) => {
                 auto-load
                 @on-fetch="onItemTagsFetched"
             >
-                <template #body="{ rows }">
+                <template #body="{ rows, validate }">
                     <QCard class="q-pl-lg q-py-md">
                         <VnRow
                             v-for="(row, index) in rows"
@@ -121,6 +121,8 @@ const insertTag = (rows) => {
                                 @update:model-value="
                                     ($event) => handleTagSelected(rows, index, $event)
                                 "
+                                :required="true"
+                                :rules="validate('itemTag.tagFk')"
                             />
                             <VnSelect
                                 v-if="row.tag?.isFree === false"
@@ -134,6 +136,8 @@ const insertTag = (rows) => {
                                 use-input
                                 class="col"
                                 :is-clearable="false"
+                                :required="false"
+                                :rules="validate('itemTag.tagFk')"
                             />
                             <VnInput
                                 v-else-if="
@@ -148,6 +152,8 @@ const insertTag = (rows) => {
                                 :label="t('itemTags.relevancy')"
                                 type="number"
                                 v-model="row.priority"
+                                :required="true"
+                                :rules="validate('itemTag.priority')"
                             />
                             <div class="col-1 row justify-center items-center">
                                 <QIcon
@@ -167,6 +173,7 @@ const insertTag = (rows) => {
                             <QIcon
                                 @click="insertTag(rows)"
                                 class="cursor-pointer"
+                                :disable="!validRow"
                                 color="primary"
                                 name="add"
                                 size="sm"