Initial commit

pages/words.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useWordStore } from "~/store/word.store";
+
+const newWord = ref("");
+const wordStore = useWordStore();
+
+await wordStore.fetchWordList();
+
+const loading = ref(false);
+const wordInput = ref<HTMLInputElement | null>(null);
+
+async function createWord() {
+  if (loading.value) {
+    return;
+  }
+  loading.value = true;
+  try {
+    await wordStore.createWord(newWord.value);
+    newWord.value = "";
+  } finally {
+    nextTick(() => {
+      loading.value = false;
+      nextTick(() => {
+        wordInput.value?.focus();
+      });
+    });
+  }
+}
+
+onBeforeMount(() => {
+  wordStore.subscribe();
+});
+
+onUnmounted(() => {
+  wordStore.close();
+});
+</script>
+
+<template>
+  <main id="words">
+    <div class="header">
+      <span>Word</span>
+      <span>Status</span>
+      <span></span>
+      <span>Submitter</span>
+    </div>
+    <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>
+  </main>
+</template>
+
+<style lang="css" scoped>
+main#words {
+  display: flex;
+  flex-direction: column;
+}
+
+div.header {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  align-items: center;
+}
+</style>