194 lines
7.8 KiB
Vue
194 lines
7.8 KiB
Vue
<template>
|
|
<div class="mx-2 p-2">
|
|
<div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
|
|
<div v-if="modal" class="modal">
|
|
<p class="m-2 text-center">Are you sure you want to delete this list ?</p>
|
|
<div class="flex justify-center mx-2 my-4">
|
|
<button class="btn mr-2" @click="modal = ! modal">Cancel</button>
|
|
<button class="btn-alert" @click="destroy"> Delete</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between pb-2">
|
|
<router-link to="/to-do-lists/" class="btn">Back</router-link>
|
|
<a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
|
|
</div>
|
|
<div v-if="!loading" class="bg-marine-medium rounded p-1">
|
|
<h1 class="mb-2 ml-2 h-10 todo text-white flex items-center" >
|
|
<span v-if="!listNameEdit" class="text-2xl font-bold flex items-center">{{ toDoList.data.attributes.data.name }}
|
|
<span @click="listNameEdit = !listNameEdit">
|
|
<svg-vue icon="edit" class="edit-icon inline w-4 fill-current cursor-pointer ml-2" />
|
|
</span>
|
|
</span>
|
|
<span v-else class="flex items-center">
|
|
<input type="text"
|
|
class="px-1 py-0 text-2xl text-white font-bold bg-marine-medium rounded-sm -ml-1"
|
|
v-model="listName"
|
|
@keydown.enter="updateList">
|
|
<span @click="listNameEdit = !listNameEdit">
|
|
<svg-vue icon="close" class="inline w-4 fill-current cursor-pointer ml-2" />
|
|
</span>
|
|
</span>
|
|
</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 items-center flex-1 todo">
|
|
<svg-vue icon="draggable" class="w-4 block mr-2 cursor-move" />
|
|
<ToDo :to-do="toDo"
|
|
:id-list="toDoList.data.to_do_list_id"
|
|
ref="toDo"
|
|
class="flex-1 bg-blue" />
|
|
<span @click="deleteToDo(toDo, index)" class="cursor-pointer ml-2 font-bold edit-icon flex items-center">
|
|
<svg-vue icon="close" class="w-4" />
|
|
</span>
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
<div class="flex items-center m-2">
|
|
<input type="text" v-model="toDoName" @keydown.enter="addToDo" class="p-1 rounded-sm -ml-1">
|
|
<button class="btn-primary ml-1 py-1" @click="addToDo">ADD</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ToDo from './ToDo'
|
|
//https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/
|
|
//https://jsfiddle.net/jf9nrtds/
|
|
|
|
export default {
|
|
name: 'ToDoListShow',
|
|
components: {
|
|
ToDo
|
|
},
|
|
data () {
|
|
return {
|
|
toDoList: null,
|
|
loading: true,
|
|
toDoName: '',
|
|
errors: null,
|
|
modal: false,
|
|
listName: '',
|
|
listNameEdit: false,
|
|
}
|
|
},
|
|
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.listName = res.data.data.attributes.data.name
|
|
this.sortList()
|
|
})
|
|
.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)
|
|
})
|
|
},
|
|
sortList() {
|
|
this.toDoList.data.attributes.data.to_dos.data.sort(function(a, b) {
|
|
return a.data.attributes.data.order - b.data.attributes.data.order
|
|
})
|
|
},
|
|
reorderList() {
|
|
this.sortList()
|
|
},
|
|
addToDo: function () {
|
|
if(this.toDoName.length >= 3) {
|
|
// eslint-disable-next-line no-undef
|
|
axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.toDoName})
|
|
.then(res => {
|
|
this.toDoName = ''
|
|
this.toDoList.data.attributes.data.to_dos.data.push(res.data)
|
|
})
|
|
.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)
|
|
})
|
|
},
|
|
destroy: function () {
|
|
// eslint-disable-next-line no-undef
|
|
axios.delete('/api/to-do-lists/' + this.$route.params.id)
|
|
.then(() => {
|
|
this.$router.push('/to-do-lists')
|
|
})
|
|
.catch(errorRes => {
|
|
console.log('Internal Error, Unable to delete list.' + errorRes)
|
|
})
|
|
},
|
|
updateList: function () {
|
|
// eslint-disable-next-line no-undef
|
|
axios.patch('/api/to-do-lists/' + this.$route.params.id, {name: this.listName })
|
|
.then(() => {
|
|
this.listNameEdit = 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>
|