portal/resources/js/views/ToDoLists/ToDoListShow.vue

<template>
    <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',
    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>