cosette/components/toggleTaken.vue

25 lines
710 B
Vue

<script setup>
const { cosetta } = defineProps({
cosetta: {
type: Object,
required: true
}
})
watch(cosetta, () => { deep: true });
let toggleTaken = async () => {
const ret = await $fetch(`/api/cosetta/${cosetta.uuid}/taken`, { method: 'POST' })
const q = await $fetch(`/api/cosetta/${cosetta.uuid}`)
cosetta.taken = q.cosetta.taken
}
</script>
<template>
<div class="form-control">
<label class="label cursor-pointer flex justify-end">
<span class="label-text px-4" v-html="cosetta.taken && 'Cosetta disponibile' || 'Cosetta assegnata'">
</span>
<input type="checkbox" class="toggle toggle-lg" @click='toggleTaken' :checked='cosetta.taken' />
</label>
</div>
</template>