Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 6891-showRightSideFilterPanel

src/components/CrudModel.vue

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

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"

src/pages/Item/Card/ItemTags.vue

@@ -1 +1,191 @@
-<template>Item tags (CREAR CUANDO SE DESARROLLE EL MODULO DE ITEMS)</template>
+<script setup>
+import { ref } 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 VnSelect from 'src/components/common/VnSelect.vue';
+
+import axios from 'axios';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const itemTagsRef = ref(null);
+const tagOptions = ref([]);
+const valueOptionsMap = ref(new Map());
+
+const getSelectedTagValues = async (tag) => {
+    try {
+        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.tagFk}/filterValue`, {
+            params,
+        });
+        valueOptionsMap.value.set(tag.tagFk, data);
+    } catch (err) {
+        console.error('Error getting selected tag values');
+    }
+};
+
+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>
+    <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-key="ItemTags"
+                model="ItemTags"
+                url="ItemTags"
+                update-url="Tags/onSubmit"
+                :data-required="{
+                    $index: undefined,
+                    itemFk: route.params.id,
+                    priority: undefined,
+                    tag: {
+                        isFree: undefined,
+                        value: undefined,
+                        name: undefined,
+                    },
+                    tagFk: 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'],
+                        },
+                    },
+                }"
+                auto-load
+                @on-fetch="onItemTagsFetched"
+            >
+                <template #body="{ rows, validate }">
+                    <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"
+                        >
+                            <VnSelect
+                                :label="t('itemTags.tag')"
+                                :options="tagOptions"
+                                :model-value="row.tag"
+                                option-label="name"
+                                hide-selected
+                                @update:model-value="
+                                    ($event) => handleTagSelected(rows, index, $event)
+                                "
+                                :required="true"
+                                :rules="validate('itemTag.tagFk')"
+                            />
+                            <VnSelect
+                                v-if="row.tag?.isFree === false"
+                                :key="row.tagFk"
+                                :label="t('Value')"
+                                v-model="row.value"
+                                :options="valueOptionsMap.get(row.tagFk)"
+                                option-label="value"
+                                option-value="value"
+                                emit-value
+                                use-input
+                                class="col"
+                                :is-clearable="false"
+                                :required="false"
+                                :rules="validate('itemTag.tagFk')"
+                            />
+                            <VnInput
+                                v-else-if="
+                                    row.tag?.isFree || row.tag?.isFree == undefined
+                                "
+                                v-model="row.value"
+                                :label="t('itemTags.value')"
+                                :is-clearable="false"
+                                style="width: 100%"
+                            />
+                            <VnInput
+                                :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
+                                    @click="itemTagsRef.remove([row])"
+                                    class="fill-icon-on-hover"
+                                    color="primary"
+                                    name="delete"
+                                    size="sm"
+                                >
+                                    <QTooltip>
+                                        {{ t('itemTags.removeTag') }}
+                                    </QTooltip>
+                                </QIcon>
+                            </div>
+                        </VnRow>
+                        <VnRow>
+                            <QIcon
+                                @click="insertTag(rows)"
+                                class="cursor-pointer"
+                                :disable="!validRow"
+                                color="primary"
+                                name="add"
+                                size="sm"
+                            >
+                                <QTooltip>
+                                    {{ t('itemTags.addTag') }}
+                                </QTooltip>
+                            </QIcon>
+                        </VnRow>
+                    </QCard>
+                </template>
+            </CrudModel>
+        </QPage>
+    </div>
+</template>

src/pages/Item/locale/en.yml

@@ -72,3 +72,9 @@ lastEntries:
     package: Package
     freight: Freight
     comission: Comission
+itemTags:
+    removeTag: Remove tag
+    addTag: Add tag
+    tag: Tag
+    value: Value
+    relevancy: Relevancy

src/pages/Item/locale/es.yml

@@ -72,3 +72,9 @@ lastEntries:
     package: Embalaje
     freight: Porte
     comission: Comisión
+itemTags:
+    removeTag: Quitar etiqueta
+    addTag: Añadir etiqueta
+    tag: Etiqueta
+    value: Valor
+    relevancy: Relevancia

src/router/modules/item.js

@@ -28,6 +28,7 @@ export default {
             'ItemBarcode',
             'ItemShelving',
             'ItemLastEntries',
+            'ItemTags',
         ],
     },
     children: [