From a23eb0a5ad06dd578a48496908c102c5e45ae912 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 7 Jun 2024 23:08:15 +0200
Subject: [PATCH] approach

---
 src/components/FetchData.vue       |  4 ++--
 src/components/common/VnSelect.vue | 17 ++---------------
 src/composables/useAxios.js        | 21 +++++++++++++++++++++
 3 files changed, 25 insertions(+), 17 deletions(-)
 create mode 100644 src/composables/useAxios.js

diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index cb5aed894..cc87af653 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -36,10 +36,10 @@ const $props = defineProps({
 
 const emit = defineEmits(['onFetch']);
 defineExpose({ fetch });
-
+const fetchData = useFetchData({ ...$props });
 onMounted(async () => {
     if ($props.autoLoad) {
-        await useFetchData(...$props).fetch();
+        await fetchData.fetch();
     }
 });
 
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 2ca001d8c..86b9f1a26 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -2,7 +2,6 @@
 import { ref, toRefs, computed, watch, h } from 'vue';
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import FetchData from 'src/components/FetchData.vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 import { useArrayData } from 'src/composables/useArrayData';
 import { useFetchData } from 'src/composables/useFetchData';
@@ -78,18 +77,6 @@ const dataRef = ref(
         fields: $props.fields,
     })
 );
-// const fetchDataComponent = ref(null);
-// fetchDataComponent.value = h(FetchData, {
-//     url: $props.url,
-//     where: $props.where,
-//     limit: $props.limit,
-//     sortBy: $props.sortBy,
-//     fields: $props.fields,
-//     onFetch: (data) => {
-//         setOptions(data); // Tu función para manejar los datos
-//     },
-// });
-//   const dataRef = ref(null);
 const selectValue = computed({
     get() {
         return $props.modelValue;
@@ -108,10 +95,10 @@ const useURL = computed(() => $props.url?.length > 0);
 const arrayData = useURL.value
     ? useArrayData($props.url, {
           url: $props.url,
-          fields: $props.fields,
           where: $props.where,
-          sortBy: $props.sortBy,
           limit: $props.limit,
+          sortBy: $props.sortBy,
+          fields: $props.fields,
       })
     : ref(null);
 onMounted(async () => {
diff --git a/src/composables/useAxios.js b/src/composables/useAxios.js
new file mode 100644
index 000000000..ebe969473
--- /dev/null
+++ b/src/composables/useAxios.js
@@ -0,0 +1,21 @@
+import axios from 'axios';
+
+export function useAxios() {
+    const fetch = async (url, filter, params) => {
+        axios.get(url, { params: { ...params, ...filter } });
+    };
+
+    const push = async (url, method = 'PUT', filter, params) => {
+        axios({ url, method, params: { ...params, ...filter } });
+    };
+
+    const pop = async (url, filter, params) => {
+        axios.delete(url, { params: { ...params, ...filter } });
+    };
+
+    return {
+        fetch,
+        push,
+        pop,
+    };
+}