Refactoring stores and templates pages to comp. api

client/composables/lib/vForm/Form.js

@@ -1,6 +1,7 @@
 import {serialize} from 'object-to-formdata';
 import Errors from './Errors';
 import cloneDeep from 'clone-deep';
+import {opnFetch} from "~/composables/useOpnApi.js";
 function hasFiles(data) {
   return data instanceof File ||
     data instanceof Blob ||
@@ -120,18 +121,14 @@ class Form {
         config.transformRequest = [data => serialize(data)];
       }
     }
-
     return new Promise((resolve, reject) => {
-      useOpnApi(config.url, config)
-        .then(({data, error}) => {
-          if (error.value) {
-            this.handleErrors(error);
-            reject(error);
-            return;
-          }
-
+      opnFetch(config.url, config)
+        .then((data) => {
           this.finishProcessing();
-          resolve(data.value);
+          resolve(data);
+        }).catch((error) => {
+          this.handleErrors(error);
+          resolve(error)
         })
     });
   }
@@ -139,8 +136,8 @@ class Form {
   handleErrors(error) {
     this.busy = false;
 
-    if (error.value) {
-      this.errors.set(this.extractErrors(error.value.data));
+    if (error) {
+      this.errors.set(this.extractErrors(error.data));
     }
   }
 

client/composables/stores/useContentStore.js

@@ -0,0 +1,64 @@
+
+// Composable with all the logic to encapsulate a default content store
+
+export const useContentStore = (mapKey = 'id') => {
+
+  const content = ref(new Map())
+  const loading = ref(false)
+
+  // Computed
+  const getAll = computed(() => {
+    return [...content.value.values()]
+  })
+  const getByKey = (key) => {
+    if (Array.isArray(key)) {
+      return key.map((k) => content.value.get(k)).filter((item) => item !== undefined)
+    }
+    return content.value.get(key)
+  }
+
+  // Actions
+  function set(items) {
+    content.value = new Map
+    items.forEach((item) => {
+      content.value.set(item[mapKey], item)
+    })
+  }
+
+  function save(items) {
+    if (!Array.isArray(items)) items = [items]
+    items.forEach((item) => {
+      content.value.set(item[mapKey], item)
+    })
+  }
+
+  function remove(item) {
+    content.value.remove(item[mapKey])
+  }
+
+  function startLoading() {
+    loading.value = true
+  }
+
+  function stopLoading() {
+    loading.value = false
+  }
+
+  function resetState() {
+    set([])
+    stopLoading()
+  }
+
+  return {
+    content,
+    loading,
+    getAll,
+    getByKey,
+    set,
+    save,
+    remove,
+    startLoading,
+    stopLoading,
+    resetState
+  }
+}

client/composables/useOpnApi.js

@@ -44,6 +44,10 @@ export function getOpnRequestsOptions(request, opts) {
   }
 }
 
+export const opnFetch = (request, opts = {}) => {
+  return $fetch(request, getOpnRequestsOptions(request, opts))
+}
+
 export const useOpnApi = (request, opts = {}) => {
   return useFetch(request, getOpnRequestsOptions(request, opts))
 }