98 lines
3.2 KiB
Vue
98 lines
3.2 KiB
Vue
<template>
|
|
<div v-if="!edit" class="flex items-center flex-1 todo">
|
|
<CheckBoxField :check-it="!!(checked)"
|
|
@update:field="checked = $event"
|
|
class="block mr-1" />
|
|
<span v-bind:class="{ 'line-through' : toDo.data.attributes.data.checked_at }" class="border border-transparent flex-1 pl-1">{{ toDo.data.attributes.data.name }}</span>
|
|
<span @click="edit = !edit" >
|
|
<svg-vue icon="edit" class="edit-icon w-4 block cursor-pointer mx-2" />
|
|
</span>
|
|
</div>
|
|
<div v-else class="flex items-center flex-1">
|
|
<CheckBoxField :check-it="!!(checked)"
|
|
@update:field="checked = $event"
|
|
class="block mr-1" />
|
|
<input type="text"
|
|
v-model="toDo.data.attributes.data.name"
|
|
@keypress.enter="updateToDo"
|
|
class="flex-1 rounded-sm border border-primary-600 p-0 pl-1">
|
|
<span @click="edit = !edit">
|
|
<svg-vue icon="close" class="inline w-4 fill-current cursor-pointer mx-2" />
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CheckBoxField from '../../components/CheckBoxField'
|
|
|
|
export default {
|
|
name: 'ToDo',
|
|
components: {
|
|
CheckBoxField
|
|
},
|
|
props: {
|
|
toDo: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
idList: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
},
|
|
data () {
|
|
return {
|
|
id: this.toDo.data.to_do_id,
|
|
edit: false,
|
|
checked: !!(this.toDo.data.attributes.data.checked_at),
|
|
}
|
|
},
|
|
methods: {
|
|
updateToDo: function () {
|
|
// eslint-disable-next-line no-undef
|
|
axios.patch('/api/to-do-lists/' + this.idList + '/to-do/' + this.toDo.data.to_do_id, {name: this.toDo.data.attributes.data.name })
|
|
.then(() => {
|
|
this.edit = false
|
|
})
|
|
.catch(errorRes => {
|
|
console.log('Internal Error, Unable to delete list.' + errorRes)
|
|
})
|
|
},
|
|
},
|
|
watch: {
|
|
checked: function () {
|
|
if(event && event.type === 'click') {
|
|
// eslint-disable-next-line no-undef
|
|
axios.patch('/api/to-do-lists/' + this.idList + '/to-do/' + this.toDo.data.to_do_id + '/check')
|
|
.then(res => {
|
|
this.toDo.data.attributes.data.checked_at = res.data.data.attributes.data.checked_at
|
|
this.checked = !!(res.data.data.attributes.data.checked_at)
|
|
})
|
|
.catch(errorRes => {
|
|
console.log('Internal Error, Unable to delete contact.' + errorRes)
|
|
})
|
|
}
|
|
},
|
|
toDo: function () {
|
|
if(this.checked !== !!(this.toDo.data.attributes.data.checked_at)) {
|
|
this.checked = !!(this.toDo.data.attributes.data.checked_at)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.edit-icon {
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.todo:hover .edit-icon {
|
|
opacity: 1;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
</style>
|