74 lines
1.9 KiB
Vue
74 lines
1.9 KiB
Vue
<template>
|
|
<div v-if="!edit" class="flex items-center flex-1 todo">
|
|
<span v-bind:class="{ 'line-through' : checked }" class="border border-transparent flex-1 pl-1">{{ 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">
|
|
<input type="text"
|
|
v-model="name"
|
|
@keypress.enter="updateToDo"
|
|
class="flex-1 rounded-sm border border-orange-600 pl-1">
|
|
<span @click="edit = !edit">
|
|
<svg-vue icon="close" class="inline w-4 fill-current cursor-pointer mx-2" />
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ToDo',
|
|
props: {
|
|
name: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
checked: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
idList: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
idToDo: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
edit: false,
|
|
}
|
|
},
|
|
methods: {
|
|
updateToDo: function () {
|
|
// eslint-disable-next-line no-undef
|
|
axios.patch('/api/to-do-lists/' + this.idList + '/to-do/' + this.idToDo, {name: this.name })
|
|
.then(() => {
|
|
this.edit = false
|
|
//this.toDoList.data.attributes.data.name = this.listName
|
|
})
|
|
.catch(errorRes => {
|
|
console.log('Internal Error, Unable to delete list.' + errorRes)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.edit-icon {
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.todo:hover .edit-icon {
|
|
opacity: 1;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
</style>
|