front toDos almost position, checked, delete
This commit is contained in:
@@ -1,9 +1,145 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div class="p-4">
|
||||
<div v-if="!loading" class="bg-orange-400 rounded p-1">
|
||||
<h1 class="text-2xl font-bold mb-2 ml-2">{{ toDoList.data.attributes.data.name }}</h1>
|
||||
<ul class='p-1'
|
||||
v-for="(toDo, index) in toDoList.data.attributes.data.to_dos.data"
|
||||
:key="index"
|
||||
@drop='onDrop($event, toDo)'
|
||||
@dragover.prevent
|
||||
@dragenter.prevent >
|
||||
<li
|
||||
draggable
|
||||
@dragstart='startDrag($event, toDo)'
|
||||
class='drag-el todo flex justify-between items-center bg-white rounded-sm mb-1 px-2 py-1' >
|
||||
<div class="flex flex-1">
|
||||
<svg-vue icon="draggable" class="w-4 block mr-2 cursor-move" />
|
||||
<span v-bind:class="{ 'line-through' : toDo.data.attributes.data.checked_at }">{{ toDo.data.attributes.data.name }}</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<svg-vue icon="edit" @click="edit = !edit" class="edit-icon z-10 w-4 block cursor-pointer mr-1" />
|
||||
<input type="checkbox" :checked="toDo.data.attributes.data.checked_at" @click="checked(toDo, index)">
|
||||
<span @click="deleteToDo(toDo, index)" class="cursor-pointer ml-2 font-bold">X</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="flex items-center mt-2 ml-2">
|
||||
<InputField name="name" classes="py-1" placeholder="New To Do" required @update:field="name = $event" :errors="errors" @keyup.enter="addToDo" />
|
||||
<button class="btn-primary ml-1 mb-2 py-1" @click="addToDo">ADD</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InputField from '../../components/InputField'
|
||||
//https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/
|
||||
//https://jsfiddle.net/jf9nrtds/
|
||||
|
||||
export default {
|
||||
name: 'ToDoListShow'
|
||||
name: 'ToDoListShow',
|
||||
components: {
|
||||
InputField
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
toDoList: null,
|
||||
loading: true,
|
||||
name: '',
|
||||
errors: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// eslint-disable-next-line no-undef
|
||||
axios.get('/api/to-do-lists/' + this.$route.params.id)
|
||||
.then(res => {
|
||||
this.toDoList = res.data
|
||||
this.loading = false
|
||||
|
||||
this.reorderList()
|
||||
})
|
||||
.catch(errorRes => {
|
||||
this.loading = false
|
||||
if (errorRes.response.status === 404) {
|
||||
this.$router.push('/')
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
startDrag: (evt, item) => {
|
||||
evt.dataTransfer.dropEffect = 'move'
|
||||
evt.dataTransfer.effectAllowed = 'move'
|
||||
evt.dataTransfer.setData('toDoID', item.data.to_do_id)
|
||||
evt.dataTransfer.setData('toDoOrder', item.data.attributes.data.order)
|
||||
},
|
||||
onDrop (evt, toDoEnd) {
|
||||
const toDoID = parseInt(evt.dataTransfer.getData('toDoID'), 10)
|
||||
const toDoOrder = parseInt(evt.dataTransfer.getData('toDoOrder'), 10)
|
||||
let toDoMove = this.toDoList.data.attributes.data.to_dos.data.find(toDo => toDo.data.to_do_id === toDoID)
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
axios.patch('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDoMove.data.to_do_id + '/change', { 'new-order': toDoEnd.data.attributes.data.order })
|
||||
.then(() => {
|
||||
toDoMove.data.attributes.data.order = toDoEnd.data.attributes.data.order
|
||||
toDoEnd.data.attributes.data.order = toDoOrder
|
||||
this.reorderList()
|
||||
})
|
||||
.catch(errorRes => {
|
||||
console.log('Internal Error, Unable to delete contact.' + errorRes)
|
||||
})
|
||||
},
|
||||
reorderList() {
|
||||
this.toDoList.data.attributes.data.to_dos.data.sort(function(a, b) {
|
||||
return a.data.attributes.data.order - b.data.attributes.data.order
|
||||
})
|
||||
},
|
||||
addToDo: function () {
|
||||
// eslint-disable-next-line no-undef
|
||||
axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.name})
|
||||
.then(res => {
|
||||
this.toDoList.data.attributes.data.to_dos.data.push(res.data)
|
||||
this.name = ''
|
||||
})
|
||||
.catch(errorRes => {
|
||||
console.log('Internal Error, Unable to delete contact.' + errorRes)
|
||||
})
|
||||
},
|
||||
deleteToDo: function (toDo, position) {
|
||||
// eslint-disable-next-line no-undef
|
||||
axios.delete('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDo.data.to_do_id)
|
||||
.then(() => {
|
||||
this.toDoList.data.attributes.data.to_dos.data.splice(position, 1)
|
||||
})
|
||||
.catch(errorRes => {
|
||||
console.log('Internal Error, Unable to delete contact.' + errorRes)
|
||||
})
|
||||
},
|
||||
checked: function (toDo, position) {
|
||||
// eslint-disable-next-line no-undef
|
||||
axios.patch('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDo.data.to_do_id + '/check')
|
||||
.then(res => {
|
||||
this.toDoList.data.attributes.data.to_dos.data[position].data.attributes.data.checked_at = res.data.data.attributes.data.checked_at
|
||||
})
|
||||
.catch(errorRes => {
|
||||
console.log('Internal Error, Unable to delete contact.' + errorRes)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.edit-icon {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.todo:hover .edit-icon {
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user