feat : word edition

components/word.vue

@@ -1,56 +1,76 @@
 <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
-    }
-    loading.value = true
-    let data
-    if (props.word.enabled) {
-        data = await wordStore.disableWord(props.word.id)
-    } else {
-        data = await wordStore.enableWord(props.word.id)
-    }
-    loading.value = false
-    props.word.enabled = data.enabled
+  if (word.loading) {
+    return;
+  }
+  word.loading = true;
+  if (word.enabled) {
+    await wordStore.disableWord(word);
+  } else {
+    await wordStore.enableWord(word);
+  }
+  word.loading = false;
+}
 
+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" />
-        <User :id="word.ownerId"></User>
-
-    </div>
-
+  <div class="word">
+    <span>{{ word.value }}</span>
+    <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);
-    align-items: center;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  align-items: center;
 }
 
 input {
-    min-height: 28px;
+  min-height: 28px;
 }
 
-input.loading {
-    cursor: wait
+input:disabled {
+  cursor: wait;
 }
-</style>
+</style>