Template
79 lines
1.4 KiB
Vue
79 lines
1.4 KiB
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>
|