Template
56 lines
1.1 KiB
Vue
56 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import type { WordResponseDTO } from '~/netcode/events/dto/wordresponse.dto';
|
|
import { useWordStore } from '~/store/word.store';
|
|
|
|
export interface Props {
|
|
word: WordResponseDTO;
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const loading = ref(false)
|
|
const wordStore = useWordStore();
|
|
|
|
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
|
|
|
|
}
|
|
</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>
|
|
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
div.word {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
align-items: center;
|
|
}
|
|
|
|
input {
|
|
min-height: 28px;
|
|
}
|
|
|
|
input.loading {
|
|
cursor: wait
|
|
}
|
|
</style> |