forked from verdnatura/salix-front
WIP
This commit is contained in:
parent
42fe189e9f
commit
934db32973
|
|
@ -81,6 +81,7 @@ defineExpose({
|
|||
hasChanges,
|
||||
saveChanges,
|
||||
getChanges,
|
||||
formData,
|
||||
});
|
||||
|
||||
async function fetch(data) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
|
|
|
|||
Loading…
Reference in New Issue