src/components/ui/CardDescriptor.vue

@@ -1,8 +1,9 @@
 <script setup>
-import { onMounted, useSlots, ref, watch } from 'vue';
+import { onMounted, useSlots, ref, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
+import { useArrayData } from 'composables/useArrayData';
 
 const $props = defineProps({
     url: {
@@ -25,33 +26,40 @@ const $props = defineProps({
         type: Number,
         default: 0,
     },
+    dataKey: {
+        type: String,
+        default: '',
+    },
 });
 
 const slots = useSlots();
 const { t } = useI18n();
-const entity = ref();
-
+defineExpose({ fetch });
+const entity = computed(() => useArrayData($props.dataKey).store.data);
 onMounted(async () => {
-    await fetch();
+    await getData();
+    watch(
+        () => $props.url,
+        async (newUrl, lastUrl) => {
+            if (newUrl == lastUrl) return;
+            entity.value = null;
+            await getData();
+        }
+    );
 });
 
-const emit = defineEmits(['onFetch']);
-
-async function fetch() {
-    const params = {};
-
-    if ($props.filter) params.filter = JSON.stringify($props.filter);
-
-    const { data } = await axios.get($props.url, { params });
-    entity.value = data;
-
+async function getData() {
+    const arrayData = useArrayData($props.dataKey, {
+        url: $props.url,
+        filter: $props.filter,
+        skip: 0,
+    });
+    const { data } = await arrayData.fetch({ append: false });
     emit('onFetch', data);
 }
+const emit = defineEmits(['onFetch']);
 
-watch($props, async () => {
-    entity.value = null;
-    await fetch();
-});
+async function fetch() {}
 </script>
 
 <template>

src/composables/useArrayData.js

@@ -29,6 +29,10 @@ export function useArrayData(key, userOptions) {
         }
     });
 
+    if (key && userOptions) {
+        setOptions();
+    }
+
     function setOptions() {
         const allowedOptions = [
             'url',
@@ -97,6 +101,7 @@ export function useArrayData(key, userOptions) {
         store.isLoading = false;
 
         canceller = null;
+        return response;
     }
 
     function destroy() {
@@ -147,10 +152,11 @@ export function useArrayData(key, userOptions) {
         if (store.userParams && Object.keys(store.userParams).length !== 0)
             query.params = JSON.stringify(store.userParams);
 
-        router.replace({
-            path: route.path,
-            query: query,
-        });
+        if (router)
+            router.replace({
+                path: route.path,
+                query: query,
+            });
     }
 
     const totalRows = computed(() => (store.data && store.data.length) || 0);

src/pages/Claim/Card/ClaimAction.vue

@@ -2,7 +2,7 @@
 import { ref, computed, onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { useStateStore } from 'src/stores/useStateStore';
 import { toDate, toPercentage, toCurrency } from 'filters/index';
@@ -17,6 +17,7 @@ import { useArrayData } from 'composables/useArrayData';
 const { t } = useI18n();
 const quasar = useQuasar();
 const route = useRoute();
+const router = useRouter();
 const stateStore = computed(() => useStateStore());
 const claim = ref(null);
 const claimRef = ref();
@@ -30,6 +31,7 @@ const selectedRows = ref([]);
 const destinationTypes = ref([]);
 const totalClaimed = ref(null);
 const DEFAULT_MAX_RESPONSABILITY = 5;
+const arrayData = useArrayData('claimData');
 
 const columns = computed(() => [
     {
@@ -140,9 +142,7 @@ async function regularizeClaim() {
             type: 'positive',
         });
     }
-    claimActionsForm.value.reload();
-    const arrayData = useArrayData('Claim');
-    await arrayData.refresh();
+    await arrayData.fetch({ append: false });
 }
 
 async function updateGreuge(greuges) {

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -64,11 +64,10 @@ const filter = {
 
 const STATE_COLOR = {
     pending: 'positive',
-
     managed: 'warning',
-
     resolved: 'negative',
 };
+
 function stateColor(code) {
     return STATE_COLOR[code];
 }