feat: model collection

src/App.vue

@@ -2,13 +2,9 @@
 import { onMounted, Suspense } from "vue";
 import useCollection from "@/composables/useCollection";
 
-const { getCollections } = useCollection();
+// const { getCollections } = useCollection();
 
-const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
-const supabaseKey = import.meta.env.VITE_SUPABASE_KEY;
-console.log({ supabaseUrl, supabaseKey });
-
-onMounted(async () => await getCollections());
+// onMounted(async () => await getCollections());
 </script>
 
 <template>

src/composables/useCollection.js

@@ -1,6 +1,7 @@
 import { ref, toRaw, computed } from "vue";
+import { customAlphabet } from "nanoid";
 import dbCollection from "@/repositories/db-collection";
-import model from "@/repositories/adapter";
+import model from "@/models/collection";
 /**
  * @typedef {import('@/types').Collection} Collection
  * @typedef {import('vue').Ref<Collection>} CollectionRef
@@ -24,7 +25,7 @@ const collection = ref({
 
 /** @type {CollectionsRef} */
 const collections = ref([]);
-const store = await model();
+const store = await model;
 
 const useCollection = () => {
   /** @param {Collection} collection */

src/configs/database.js

@@ -0,0 +1,7 @@
+const currentConnection = localStorage.getItem("connection");
+
+const config = {
+  connection: currentConnection ?? "indexedDB",
+};
+
+export default config;

src/models/collection.js

@@ -0,0 +1,9 @@
+import model from "@/repositories/model";
+import config from "@/configs/database";
+
+const collection = model({
+  connection: config.connection,
+  table: "collections",
+});
+
+export default collection;

src/pages/collection/create.vue

@@ -1,9 +1,11 @@
 <script setup>
 import { useRouter } from "vue-router";
+import { customAlphabet } from "nanoid";
 import { onMounted } from "vue";
 import { Form } from "vee-validate";
 import * as yup from "yup";
 import useFormCollection from "@/composables/useFormCollection";
+import collection from "@/models/collection";
 
 const router = useRouter();
 const { addNewCollection, form, resetForm } = useFormCollection();
@@ -13,12 +15,19 @@ const schema = yup.object({
 });
 
 /** @param {import('@/types').Collection} values */
-const onSubmit = (values) => {
-  form.value = values;
-  // form.value.todos = [];
+const onSubmit = async (values) => {
+  const nanoid = customAlphabet("1234567890abcdef", 10);
 
-  const collection = addNewCollection();
-  router.push(`/collection/${collection.id}`);
+  const data = {
+    id: nanoid(),
+    ...values,
+  };
+
+  const response = await collection;
+  response.create(data);
+
+  // const collection = addNewCollection();
+  router.push(`/collection/${data.id}`);
 };
 
 onMounted(() => {

src/pages/collection/edit.vue

@@ -4,7 +4,7 @@ import { onMounted, toRaw } from "vue";
 import { Form } from "vee-validate";
 import * as yup from "yup";
 import useFormCollection from "@/composables/useFormCollection";
-import model from "@/repositories/adapter";
+import { default as model } from "@/models/collection";
 
 const router = useRouter();
 const route = useRoute();
@@ -15,15 +15,10 @@ const schema = yup.object({
   description: yup.string(),
 });
 const isEdit = route.fullPath.includes("edit");
-const store = await model();
+const store = await model;
 
 /** @param {import('@/types').Collection} values */
 const onSubmit = async (values) => {
-  form.value = {
-    ...values,
-    todos: toRaw(collection.value.todos),
-  };
-
   await store.update(route.params.id, {
     name: values.name,
     description: values.description,

src/pages/collection/id.vue

@@ -2,22 +2,19 @@
 import { useRoute, useRouter } from "vue-router";
 import { ref, toRaw, onMounted } from "vue";
 import { useForm } from "vee-validate";
-import model from "@/repositories/adapter";
-
 import * as yup from "yup";
-
-import useCollection from "@/composables/useCollection";
 import useTodo from "@/composables/useTodo";
 import useFormTodo from "@/composables/useFormTodo";
-import dbCollections from "@/repositories/db-collection";
 import exportCollection from "@/utils/export-collection";
+import { default as model } from "@/models/collection";
 
-const store = await model();
+const store = await model;
 const route = useRoute();
 const router = useRouter();
-const { collection, collections } = useCollection();
 
-collection.value = await store.find(route.params.id);
+// const { collection, collections } = useCollection();
+
+const collection = await store.find(route.params.id);
 
 const { addTodo, markTodo, editTodo, deleteTodo, doneTodos, todos } = useTodo();
 const { formTodo, isEditing, resetForm: resetFormTodo } = useFormTodo();
@@ -113,15 +110,10 @@ const handleDeleteCollection = async (id) => {
   if (question) {
     store.delete(id);
 
-    const index = collections.value.findIndex((coll) => coll.id === id);
-    if (index > 0) {
-      collections.value.splice(index, 1);
-    }
-
-    router.push("/");
-    return;
+    setTimeout(async () => {
+      await router.push("/");
+    }, 1000);
   }
-  return;
 };
 
 onMounted(async () => {

src/pages/index.vue

@@ -1,7 +1,8 @@
 <script setup>
-import useCollection from "@/composables/useCollection";
+import collection from "@/models/collection";
 
-const { collections } = useCollection();
+const model = await collection;
+const collections = await model.all();
 </script>
 <template>
   <main class="relative grid grid-cols-2 gap-2">

src/pages/settings/index.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { ref } from "vue";
+import config from "@/configs/database";
+
+const form = ref({
+  connection: config.connection,
+});
+
+const submit = () => {
+  localStorage.setItem("connection", form.value.connection);
+};
+</script>
+<template>
+  <div>
+    <form @submit.prevent="submit" class="flex gap-2 flex-col">
+      <h1>Settings</h1>
+
+      <select class="py-2 px-2 rounded-lg" v-model="form.connection">
+        <option value="indexedDB">IndexedDB</option>
+        <option value="supabase">Supabase</option>
+      </select>
+      <button class="bg-dark-one text-white py-3 rounded-lg">
+        Save Changes
+      </button>
+    </form>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

src/repositories/indexedDB.js

@@ -2,51 +2,52 @@ 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 = (table) => {
+  const dbPromise = openDB(table, 1, {
+    upgrade(database) {
+      database.createObjectStore(table, {
+        keyPath: "id",
+      });
+    },
+  });
+  return {
+    async index() {
+      return (await dbPromise).getAll(table);
+    },
+    /**
+     * @param {Collection} collection
+     * @returns {Promise<Collection>}
+     */
+    async create(collection) {
+      return (await dbPromise).add(table, collection);
+    },
 
-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(key, collection) {
+      const values = { id: key, ...collection };
+      const db = await dbPromise;
+      db.put(table, values);
+    },
 
-  /**
-   * @param {Collection} collection
-   * @returns {Promise<Collection>}
-   */
-  async update(key, collection) {
-    const values = { id: key, ...collection };
-    const db = await dbPromise;
-    db.put("collections", values);
-  },
+    /**
+     * @param {string} id
+     * @returns {Promise<Collection>}
+     */
+    async delete(id) {
+      return (await dbPromise).delete(table, id);
+    },
 
-  /**
-   * @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);
-  },
+    /**
+     * @param {string} id
+     * @returns {Promise<Collection>}
+     */
+    async find(id) {
+      return (await dbPromise).get(table, id);
+    },
+  };
 };
 
 export default indexedDB;

src/repositories/model.js

@@ -0,0 +1,47 @@
+import indexedDB from "./indexedDB";
+import supabase from "./supabase";
+import config from "@/configs/database";
+/**
+ *
+ * @param {'indexedDB' | 'supabase'} connection
+ * @param {string} table
+ * @returns
+ */
+const model = async ({ connection, table }) => {
+  let store = null;
+
+  console.log(connection, table);
+
+  if (connection === "indexedDB") {
+    store = indexedDB(table);
+  }
+  if (connection === "supabase") {
+    store = supabase(table);
+  }
+
+  // Check if store is set
+  if (!store) {
+    throw new Error("Store not found.");
+  }
+
+  return {
+    all: async () => {
+      return await store.index();
+    },
+    find: (key) => {
+      return store.find(key);
+    },
+    create: (values) => {
+      const data = store.create(values);
+      return data;
+    },
+    update: async (key, values) => {
+      await store.update(key, values);
+    },
+    delete: (key) => {
+      store.delete(key);
+    },
+  };
+};
+
+export default model;