wip: storage adapater

src/composables/useCollection.js

@@ -1,5 +1,6 @@
 import { ref, toRaw, computed } from "vue";
 import dbCollection from "@/repositories/db-collection";
+import model from "@/repositories/adapter";
 /**
  * @typedef {import('@/types').Collection} Collection
  * @typedef {import('vue').Ref<Collection>} CollectionRef
@@ -15,8 +16,15 @@ const collection = ref({
   todos: [],
 });
 
+/**
+ * Work on
+ * 1. Memory
+ * 2. DB
+ */
+
 /** @type {CollectionsRef} */
 const collections = ref([]);
+const store = await model();
 
 const useCollection = () => {
   /** @param {Collection} collection */
@@ -26,7 +34,7 @@ const useCollection = () => {
     dbCollection.add(collection);
   };
   const getCollections = async () => {
-    collections.value = await dbCollection.index();
+    collections.value = await store.all();
   };
 
   /**
@@ -51,15 +59,16 @@ const useCollection = () => {
    * @param {Collection} collection
    * @returns {Collection}
    */
-  const updateCollection = (collection) => {
+  const updateCollection = async (collection) => {
     const index = collections.value.findIndex(
       (coll) => coll.id === collection.id
     );
 
     collections.value.splice(index, 1, collection);
-    const rawCollection = toRaw(collection);
 
+    const rawCollection = toRaw(collection);
     dbCollection.update(rawCollection);
+
     return rawCollection;
   };
 

src/composables/useFormCollection.js

@@ -30,9 +30,10 @@ const useFormCollection = () => {
     };
   };
 
-  function editCurrentCollection() {
+  async function editCurrentCollection() {
     form.value.id = collection.value.id;
     const updatedCollection = updateCollection(form.value);
+    console.log(updatedCollection);
     return updatedCollection;
   }
   function addNewCollection() {

src/pages/collection/edit.vue

@@ -16,12 +16,12 @@ const schema = yup.object({
 const isEdit = route.fullPath.includes("edit");
 
 /** @param {import('@/types').Collection} values */
-const onSubmit = (values) => {
+const onSubmit = async (values) => {
   form.value = {
     ...values,
     todos: toRaw(collection.value.todos),
   };
-  const updatedCollection = editCurrentCollection();
+  const updatedCollection = await editCurrentCollection();
 
   router.push(`/collection/${updatedCollection.id}`);
 };

src/repositories/adapter.js

@@ -0,0 +1,33 @@
+import indexedDB from "@/repositories/indexedDB";
+
+const model = async (connection = "indexedDB") => {
+  let store = null;
+  if (connection === "indexedDB") {
+    store = indexedDB;
+  }
+
+  // Check if store is set
+  if (!store) {
+    throw new Error("Store not found.");
+  }
+
+  return {
+    all: async () => {
+      return await store.index();
+    },
+    find: (id) => {
+      return store.find(id);
+    },
+    create: (collection) => {
+      store.create(collection);
+    },
+    update: async (id, collection) => {
+      await store.update(collection);
+    },
+    delete: (id) => {
+      store.delete(id);
+    },
+  };
+};
+
+export default model;

src/repositories/indexedDB.js

@@ -0,0 +1,50 @@
+import { openDB } from "idb";
+/**
+ * @typedef {import('@/types').Collection} Collection
+ */
+export const dbPromise = openDB("collection-db", 1, {
+  upgrade(database) {
+    database.createObjectStore("collections", {
+      keyPath: "id",
+    });
+  },
+});
+
+const indexedDB = {
+  async index() {
+    return (await dbPromise).getAll("collections");
+  },
+  /**
+   * @param {Collection} collection
+   * @returns {Promise<Collection>}
+   */
+  async create(collection) {
+    return (await dbPromise).add("collections", collection);
+  },
+
+  /**
+   * @param {Collection} collection
+   * @returns {Promise<Collection>}
+   */
+  async update(collection) {
+    return (await dbPromise).put("collections", collection);
+  },
+
+  /**
+   * @param {string} id
+   * @returns {Promise<Collection>}
+   */
+  async delete(id) {
+    return (await dbPromise).delete("collections", id);
+  },
+
+  /**
+   * @param {string} id
+   * @returns {Promise<Collection>}
+   */
+  async find(id) {
+    return (await dbPromise).get("collections", id);
+  },
+};
+
+export default indexedDB;