This commit is contained in:
Javier Segarra 2024-06-26 11:42:20 +02:00
parent cabc47c123
commit 610aacb010
4 changed files with 23 additions and 97 deletions

View File

@ -1,7 +1,6 @@
<script setup>
import { onMounted } from 'vue';
import axios from 'axios';
import { useFetchData } from 'src/composables/useFetchData';
const $props = defineProps({
autoLoad: {
@ -36,7 +35,6 @@ const $props = defineProps({
const emit = defineEmits(['onFetch']);
defineExpose({ fetch });
// const fetchData = useFetchData({ ...$props });
onMounted(async () => {
if ($props.autoLoad) {
await fetch();

View File

@ -1,9 +1,8 @@
<script setup>
import { ref, toRefs, computed, watch, h, onMounted } from 'vue';
import { ref, toRefs, computed, watch, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
const emit = defineEmits(['update:modelValue', 'update:options']);
import { useArrayData } from 'src/composables/useArrayData';
import { useFetchData } from 'src/composables/useFetchData';
const $props = defineProps({
modelValue: {
@ -86,19 +85,18 @@ function setOptions(data, append = true) {
myOptions.value = JSON.parse(JSON.stringify(data));
if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
}
const useURL = computed(() => $props.url?.length > 0);
const useURL = computed(() => $props.url);
import { useAttrs } from 'vue';
const $attrs = useAttrs();
const arrayDataKey = $props.url !== '' ? $props.url : $attrs.label;
const arrayDataOptions =
{
url: $props.url,
where: $props.where,
limit: $props.limit,
sortBy: $props.sortBy,
fields: $props.fields,
} ?? {};
const arrayDataOptions = {
url: $props.url,
where: $props.where,
limit: $props.limit,
sortBy: $props.sortBy,
fields: $props.fields,
};
const arrayData = useArrayData(arrayDataKey, arrayDataOptions);
onMounted(async () => {
setOptions(options.value);
@ -106,7 +104,7 @@ onMounted(async () => {
if (useURL.value) {
arrayData.store.userFilter = $props.where;
arrayData.store.filter.where = $props.where;
const { data } = await arrayData.fetch({ append: true });
const { data } = await arrayData.fetch({ append: true, updateRouter: false });
setOptions(data);
}
});

View File

@ -1,30 +0,0 @@
// import { ref } from 'vue';
import axios from 'axios';
export function useFetchData(props) {
// const data = ref(null);
async function fetch(fetchFilter = {}) {
try {
const filter = Object.assign(fetchFilter, props.filter);
if (props.where && !fetchFilter.where) filter.where = props.where;
if (props.sortBy) filter.order = props.sortBy;
if (props.limit) filter.limit = props.limit;
const response = await axios.get(props.url, {
params: { filter: JSON.stringify(filter), ...props.params },
});
// data.value = response.data;
return response.data;
} catch (e) {
// Manejo de errores
console.error(e);
}
}
return {
// data,
fetch,
};
}

View File

@ -1,7 +1,7 @@
<script setup>
import { ref } from 'vue';
// import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
// import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
@ -15,26 +15,15 @@ const props = defineProps({
},
});
const salespersons = ref();
const countries = ref();
const authors = ref();
const departments = ref();
// const salespersons = ref();
// const countries = ref();
// const authors = ref();
// const departments = ref();
</script>
<template>
<FetchData
:filter="{ where: { role: 'salesPerson' } }"
@on-fetch="(data) => (salespersons = data)"
auto-load
url="Workers/activeWithInheritedRole"
/>
<FetchData @on-fetch="(data) => (countries = data)" auto-load url="Countries" />
<FetchData
@on-fetch="(data) => (authors = data)"
auto-load
url="Workers/activeWithInheritedRole"
/>
<FetchData @on-fetch="(data) => (departments = data)" auto-load url="Departments" />
<!-- <FetchData @on-fetch="(data) => (countries = data)" auto-load url="Countries" /> -->
<!-- <FetchData @on-fetch="(data) => (departments = data)" auto-load /> -->
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<template #tags="{ tag, formatFn }">
@ -64,6 +53,7 @@ const departments = ref();
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnSelect
@ -87,11 +77,11 @@ const departments = ref();
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="departments">
<QItemSection>
<VnSelect
:input-debounce="0"
:label="t('Departments')"
:options="departments"
url="Departments"
dense
emit-value
hide-selected
@ -105,40 +95,13 @@ const departments = ref();
@update:model-value="searchFn()"
/>
</QItemSection>
<QItemSection v-else>
<QSkeleton class="full-width" type="QInput" />
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="departments">
<VnSelect
:input-debounce="0"
:label="t('Departments')"
:options="departments"
dense
emit-value
hide-selected
map-options
option-label="name"
option-value="id"
outlined
rounded
use-input
v-model="params.departmentFk"
@update:model-value="searchFn()"
/>
</QItemSection>
<QItemSection v-else>
<QSkeleton class="full-width" type="QInput" />
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="countries">
<QItemSection>
<VnSelect
:input-debounce="0"
:label="t('Country')"
:options="countries"
url="Countries"
dense
emit-value
hide-selected
@ -152,9 +115,6 @@ const departments = ref();
@update:model-value="searchFn()"
/>
</QItemSection>
<QItemSection v-else>
<QSkeleton class="full-width" type="QInput" />
</QItemSection>
</QItem>
<QItem class="q-mb-sm">