feat : word edition

pages/words.vue

@@ -1,10 +1,38 @@
 <script setup lang="ts">
+import { useWordStore } from "~/store/word.store";
 
-import { useWordStore } from '~/store/word.store';
-
+const newWord = ref("");
 const wordStore = useWordStore();
 
-await wordStore.fetchWordList()
+await wordStore.fetchWordList();
+
+const loading = ref(false);
+const wordInput = ref<HTMLInputElement | null>(null);
+
+async function createWord(e: Event) {
+  if (loading.value) {
+    return;
+  }
+  loading.value = true;
+  try {
+    await wordStore.createWord(newWord.value);
+    newWord.value = "";
+  } finally {
+    nextTick(() => {
+      loading.value = false;
+      nextTick(() => {
+        wordInput.value?.focus();
+      });
+    });
+  }
+}
+
+// watch(wordInput, (e) =>
+//   setInterval(() => {
+//     // e.focus();
+//     console.log(wordInput.value);
+//   }, 1000)
+// );
 </script>
 
 <template>
@@ -12,11 +40,23 @@ await wordStore.fetchWordList()
     <div class="header">
       <span>Word</span>
       <span>Status</span>
+      <span></span>
       <span>Submitter</span>
     </div>
-    <Word v-for="word in wordStore.words" :word="word" />
+    <Word v-for="word in wordStore.words" :id="word.id" :key="word.id" />
+    <div class="new-word">
+      <span>
+        <input
+          ref="wordInput"
+          type="text"
+          :disabled="loading"
+          @keypress.enter="createWord"
+          v-model="newWord"
+        />
+        <button :disabled="loading" @click="createWord">Submit</button>
+      </span>
+    </div>
   </div>
-
 </template>
 
 <style lang="css" scoped>
@@ -27,7 +67,7 @@ div#words {
 
 div.header {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   align-items: center;
 }
-</style>
+</style>