feat : word edition

components/word.vue

@@ -1,48 +1,68 @@
 <script setup lang="ts">
-import type { WordResponseDTO } from '~/netcode/events/dto/wordresponse.dto';
-import { useWordStore } from '~/store/word.store';
+import type { WordResponseDTO } from "~/netcode/events/dto/wordresponse.dto";
+import { useUserStore } from "~/store/user.store";
+import { useWordStore } from "~/store/word.store";
 
 export interface Props {
-    word: WordResponseDTO;
+  id: number;
 }
 
-const props = defineProps<Props>()
+const props = defineProps<Props>();
 
-const loading = ref(false)
 const wordStore = useWordStore();
+const userStore = useUserStore();
+
+const word = wordStore.words[props.id];
 
 async function changeWordState() {
-    if (loading.value) {
-        return
+  if (word.loading) {
+    return;
   }
-    loading.value = true
-    let data
-    if (props.word.enabled) {
-        data = await wordStore.disableWord(props.word.id)
+  word.loading = true;
+  if (word.enabled) {
+    await wordStore.disableWord(word);
   } else {
-        data = await wordStore.enableWord(props.word.id)
+    await wordStore.enableWord(word);
+  }
+  word.loading = false;
 }
-    loading.value = false
-    props.word.enabled = data.enabled
 
+async function deleteWord() {
+  if (word.loading) {
+    return;
+  }
+  word.loading = true;
+  try {
+    await wordStore.deleteWord(word);
+  } finally {
+    word.loading = false;
+  }
 }
 </script>
 
 <template>
   <div class="word">
     <span>{{ word.value }}</span>
-        <input type="checkbox" :class="{ loading }" :checked="word.enabled" :disabled="loading"
-            @click.prevent="changeWordState" />
+    <input
+      type="checkbox"
+      :checked="word.enabled"
+      :disabled="word.loading || !userStore.self"
+      @click.prevent="changeWordState"
+    />
+    <input
+      :disabled="word.loading || !userStore.self"
+      type="button"
+      @click="deleteWord"
+      value="Delete"
+    />
     <User :id="word.ownerId"></User>
-
   </div>
-
 </template>
 
 <style lang="css" scoped>
 div.word {
   display: grid;
-    grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   align-items: center;
 }
 
@@ -50,7 +70,7 @@ input {
   min-height: 28px;
 }
 
-input.loading {
-    cursor: wait
+input:disabled {
+  cursor: wait;
 }
 </style>

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>

store/word.store.ts

@@ -19,21 +19,42 @@ export const useWordStore = defineStore("word", {
             }
             return data
         },
-        async enableWord(id: number) {
+        async enableWord(word: WordResponseDTO) {
             const config = useRuntimeConfig();
-            const data = await $fetch<WordResponseDTO>(config.public.endpoint + `/words/` + id + "/enable", {
+            const data = await $fetch<WordResponseDTO>(config.public.endpoint + `/words/` + word.id + "/enable", {
                 credentials: "include",
                 method: "PUT"
             })
+            word.enabled = true
             return data
         },
-        async disableWord(id: number) {
+        async disableWord(word: WordResponseDTO) {
             const config = useRuntimeConfig();
-            const data = await $fetch<WordResponseDTO>(config.public.endpoint + `/words/` + id + "/disable", {
+            const data = await $fetch<WordResponseDTO>(config.public.endpoint + `/words/` + word.id + "/disable", {
                 credentials: "include",
                 method: "PUT"
             })
+            word.enabled = false
             return data
+        },
+
+        async createWord(value: string) {
+            const config = useRuntimeConfig();
+            const data = await $fetch<WordResponseDTO>(config.public.endpoint + `/words/`, {
+                credentials: "include",
+                body: { value },
+                method: "POST"
+            })
+            this.words[data.id] = data
+            return data
+        },
+        async deleteWord(word: WordResponseDTO){
+            const config = useRuntimeConfig();
+            const data = await $fetch<WordResponseDTO>(config.public.endpoint + `/words/`+word.id, {
+                credentials: "include",
+                method: "DELETE"
+            })
+            delete this.words[word.id]
         }
     },
 });