add supabase editor

docs/.vitepress/theme/components/VocabQuiz.vue

@@ -100,6 +100,7 @@ import {
   watch,
 } from "vue";
 import SentenceAudio, { IVoc } from "./SentenceAudio.vue";
+import { supabase } from "../supabase.ts";
 
 const { fmKey = "vocabulary" } = defineProps<{
   fmKey?: string;
@@ -131,7 +132,7 @@ const example = computed(() => {
 
 const MAX_VOC = 5;
 
-const { frontmatter } = useData();
+const { frontmatter, page } = useData();
 
 const vocabulary: Record<string, IVoc[]> = {};
 
@@ -148,7 +149,6 @@ for (const fk of fmKey.split(/[, ]+/g)) {
 }
 
 vChosenCats.value = [...vCats.value];
-makeVList();
 
 watch(isKoFirst, () => {
   makeVList();
@@ -238,8 +238,46 @@ function updateCats(cat: string) {
   makeVList();
 }
 
-function onVContentSave() {
-  const newV = { ko: v.value.ko, ...JSON.parse(vEditContent.value) };
+async function onVContentSave() {
+  const oldV = v.value;
+  const newV = { ko: oldV.ko, ...JSON.parse(vEditContent.value) };
+
+  let key = "";
+  let vKey = oldV.ko;
+
+  Object.entries(vocabulary).map(([k, vs]) => {
+    const vCount = new Map<string, number>();
+
+    vs.map((v, i_vs) => {
+      let vK = v.ko;
+      let i = vCount.get(v.ko) || 0;
+      if (i) {
+        vK = vK + `(${i})`;
+      }
+      vCount.set(v.ko, i + 1);
+
+      if (oldV.ko === v.ko && oldV.en === v.en) {
+        key = k;
+        vKey = vK;
+
+        vocabulary[k][i_vs] = newV;
+      }
+    });
+  });
+  if (supabase && key) {
+    const user_id = await supabase.auth.getUser().then((r) => r.data.user?.id);
+
+    await supabase.from("quiz").upsert(
+      {
+        url: page.value.filePath,
+        key,
+        v: vKey,
+        data: newV,
+        user_id,
+      },
+      { onConflict: "url,key,v,user_id" },
+    );
+  }
 
   const newVList = [...vList.value];
   newVList[vIndex.value] = newV;
@@ -259,8 +297,40 @@ function onModalClickOutside(ev: MouseEvent) {
   }
 }
 
-onMounted(() => {
+onMounted(async () => {
   document.addEventListener("click", onModalClickOutside);
+
+  if (supabase) {
+    await supabase
+      .from("quiz")
+      .select<any, { v: string; data: IVoc }>("v,data")
+      .eq("url", page.value.filePath)
+      .then((r) => {
+        if (!r.data?.length) return;
+
+        const replacement = new Map<string, IVoc>();
+        for (const { v, data } of r.data) {
+          replacement.set(v, data);
+        }
+
+        Object.entries(vocabulary).map(([k, vs]) => {
+          const vCount = new Map<string, number>();
+
+          vocabulary[k] = vs.map((v) => {
+            let vKey = v.ko;
+            let i = vCount.get(v.ko) || 0;
+            if (i) {
+              vKey = vKey + `(${i})`;
+            }
+            vCount.set(v.ko, i + 1);
+
+            return replacement.get(vKey) || v;
+          });
+        });
+      });
+  }
+
+  makeVList();
 });
 
 onBeforeUnmount(() => {