wip: basic crud supabase and indexedDB for collection

.env.example

@@ -0,0 +1,2 @@
+VITE_SUPABASE_URL=
+VITE_SUPABASE_KEY=

.gitignore

@@ -22,3 +22,6 @@ dev-dist
 *.njsproj
 *.sln
 *.sw?
+
+
+.env

README.md

@@ -27,3 +27,33 @@ Create todo right now, let's do great today, don't busy be productive.
    Start at  09:31:41
    Duration  418ms
 ```
+
+
+## Supabase Setup
+
+```sql
+create table
+  public.collections (
+    id bigint generated by default as identity not null,
+    uid character varying not null,
+    created_at timestamp with time zone not null default now(),
+    name character varying not null,
+    description text null,
+    constraint collections_pkey primary key (id),
+    constraint collections_uid_key unique (uid)
+  ) tablespace pg_default;
+```
+
+```sql
+create table
+  public.todos (
+    id bigint generated by default as identity not null,
+    name character varying null,
+    priority character varying null,
+    is_done boolean not null default false,
+    created_at timestamp with time zone not null default now(),
+    collection_id bigint not null,
+    constraint todos_pkey primary key (id),
+    constraint todos_collection_id_fkey foreign key (collection_id) references collections (id) on update cascade on delete cascade
+  ) tablespace pg_default;
+```

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
+    "@supabase/supabase-js": "^2.46.1",
     "highlight.js": "^11.10.0",
     "idb": "^8.0.0",
     "nanoid": "^5.0.6",

src/App.vue

@@ -1,15 +1,21 @@
 <script setup>
-import { onMounted } from "vue";
+import { onMounted, Suspense } from "vue";
 import useCollection from "@/composables/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());
 </script>
 
 <template>
   <div class="px-5 mx-auto py-9 max-w-4xl">
     <TitleApp title="Tomodo" />
-    <router-view></router-view>
+    <Suspense>
+      <router-view></router-view>
+    </Suspense>
   </div>
 </template>

src/composables/useCollection.js

@@ -31,7 +31,7 @@ const useCollection = () => {
   const addCollection = (collection) => {
     collections.value.push(collection);
 
-    dbCollection.add(collection);
+    store.create(collection);
   };
   const getCollections = async () => {
     collections.value = await store.all();
@@ -41,8 +41,11 @@ const useCollection = () => {
    * @param {string} id
    * @returns {Collection}
    */
-  const getDetailCollection = (id) => {
-    return collections.value.find((collection) => collection.id == id);
+  const getDetailCollection = async (id) => {
+    const collection = (await model()).find(id);
+
+    return collection;
+    // return collections.value.find((collection) => collection.id == id);
   };
 
   /** @param {string} id */

src/composables/useFormCollection.js

@@ -33,7 +33,7 @@ const useFormCollection = () => {
   async function editCurrentCollection() {
     form.value.id = collection.value.id;
     const updatedCollection = updateCollection(form.value);
-    console.log(updatedCollection);
+
     return updatedCollection;
   }
   function addNewCollection() {
@@ -44,9 +44,11 @@ const useFormCollection = () => {
       id: nanoid(),
       name: form.value.name,
       description: form.value.description,
-      todos: [],
+      // todos: [],
     };
 
+    // Validation if collection more than 10 just throw error
+
     addCollection(collection);
     resetForm();
     return collection;

src/pages/collection/create.vue

@@ -15,7 +15,7 @@ const schema = yup.object({
 /** @param {import('@/types').Collection} values */
 const onSubmit = (values) => {
   form.value = values;
-  form.value.todos = [];
+  // form.value.todos = [];
 
   const collection = addNewCollection();
   router.push(`/collection/${collection.id}`);

src/pages/collection/edit.vue

@@ -4,37 +4,42 @@ import { onMounted, toRaw } from "vue";
 import { Form } from "vee-validate";
 import * as yup from "yup";
 import useFormCollection from "@/composables/useFormCollection";
-import dbCollection from "@/repositories/db-collection";
+import model from "@/repositories/adapter";
 
 const router = useRouter();
 const route = useRoute();
-const { editCurrentCollection, form, collection } = useFormCollection();
+const { form, collection } = useFormCollection();
+
 const schema = yup.object({
   name: yup.string().required(),
   description: yup.string(),
 });
 const isEdit = route.fullPath.includes("edit");
+const store = await model();
 
 /** @param {import('@/types').Collection} values */
 const onSubmit = async (values) => {
   form.value = {
     ...values,
     todos: toRaw(collection.value.todos),
   };
-  const updatedCollection = await editCurrentCollection();
 
-  router.push(`/collection/${updatedCollection.id}`);
+  await store.update(route.params.id, {
+    name: values.name,
+    description: values.description,
+  });
+
+  router.push(`/collection/${route.params.id}`);
 };
 
 onMounted(async () => {
+  collection.value = await store.find(route.params.id);
   if (isEdit) {
-    const dataCollection = await dbCollection.show(route.params.id);
-    collection.value = dataCollection;
-    if (!!dataCollection) {
+    if (!!collection.value) {
       form.value = {
-        name: dataCollection.name,
-        description: dataCollection.description,
-        todos: dataCollection.todos,
+        name: collection.value.name,
+        description: collection.value.description,
+        todos: collection.value.todos,
       };
       return;
     }