front toDos almost position, checked, delete

2020-05-02 10:27:47 +02:00
parent 6d29dbc9bd
commit 2c0536a864
7 changed files with 161 additions and 158 deletions
--- a/resources/js/views/ToDoLists/ToDo.vue
+++ b/resources/js/views/ToDoLists/ToDo.vue
@@ -1,53 +0,0 @@
-<template>
-    <li class="todo flex justify-between items-center bg-white rounded mb-1 px-2 py-1"
-        >
-        <div class="flex flex-1">
-            <svg-vue icon="draggable" class="w-4 block mr-2 cursor-move" />
-            {{ toDo.data.attributes.data.name }}
-        </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" v-model="checked">
-            <span v-if="edit" @click="deleteToDo(toDo, position)">X</span>
-        </div>
-    </li>
-</template>
-
-<script>
-export default {
-    name: 'ToDo',
-    data: function () {
-        return {
-            name: this.toDo.data.attributes.data.name,
-            errors: null,
-            edit: false,
-            checked: false,
-        }
-    },
-    props: {
-        toDo: {
-            type: Object,
-            require: true
-        },
-        position: {
-            type: Number,
-            require: true
-        }
-    },
-    mounted() {
-        console.log(this.$key)
-    }
-}
-</script>
-
-<style scoped>
-    .edit-icon {
-        opacity: 0;
-        transition: opacity 0.2s;
-    }
-
-    .todo:hover .edit-icon {
-        opacity: 1;
-        transition: opacity 0.2s;
-    }
-</style>