WIP

src/components/CrudModel.vue

@@ -81,6 +81,7 @@ defineExpose({
     hasChanges,
     saveChanges,
     getChanges,
+    formData,
 });
 
 async function fetch(data) {

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;

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>

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