WTP-front/components/word.vue

<script setup lang="ts">
import type { WordResponseDTO } from "~/netcode/events/dto/wordresponse.dto";
import { useUserStore } from "~/store/user.store";
import { useWordStore } from "~/store/word.store";

export interface Props {
  id: number;
}

const props = defineProps<Props>();

const wordStore = useWordStore();
const userStore = useUserStore();

const word = wordStore.words[props.id];

const disabled = computed(() => word.loading || !userStore.self);

async function changeWordState() {
  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"
      :checked="word.enabled"
      :disabled="disabled"
      @click.prevent="changeWordState"
    />
    <input
      :disabled="disabled"
      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(4, 1fr);
  align-items: center;
}

input {
  min-height: 28px;
}

input:disabled {
  cursor: wait;
}
</style>