work on todos front

public/js/app.js.LICENSE.txt

@@ -0,0 +1,22 @@
+/*!
+ * Vue.js v2.6.11
+ * (c) 2014-2019 Evan You
+ * Released under the MIT License.
+ */
+
+/*! https://mths.be/punycode v1.4.1 by @mathias */
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/**
+ * vuex v3.1.3
+ * (c) 2020 Evan You
+ * @license MIT
+ */

resources/js/components/InputField.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="relative mb-2">
-        <label :for="name" class="pb-2 font-bold text-xl ml-1">{{ label }}</label>
-        <input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="errorClassObject()" class="w-full rounded p-2">
+        <label v-if="label" :for="name" class="pb-2 font-bold text-xl ml-1">{{ label }}</label>
+        <input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="'w-full rounded p-2 ' + classes + ' ' + errorClassObject()">
         <p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
     </div>
 </template>

resources/js/components/Nav.vue

@@ -9,7 +9,7 @@
                 <svg-vue icon="memos" />
                 <span>Memos</span>
             </router-link>
-            <router-link to="/to-do-lists" class="nav-item">
+            <router-link to="/to-do-lists" class="nav-item p-2">
                 <svg-vue icon="list" />
                 <span>ToDo Lists</span>
             </router-link>

resources/js/views/ToDoLists/ToDo.vue

@@ -0,0 +1,53 @@
+<template>
+    <li class="todo flex justify-between items-center bg-white rounded mb-1 px-2 py-1"
+        >
+        <div class="flex flex-1" draggable="true">
+            <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>

resources/js/views/ToDoLists/ToDoList.vue

@@ -1,37 +1,42 @@
 <template>
     <div>
-        <h1>{{ toDoList.data.attributes.data.name }}</h1>
+        <div class="m-2 px-2 pt-2 bg-orange-400 rounded flex flex-col justify-between shadow">
+            <div>
+                <h1 class="text-2xl font-bold mb-2">{{ toDoList.data.attributes.data.name }}</h1>
                 <ul class="draggable-list">
                     <div v-if="toDoList.data.attributes.data.to_dos.to_dos_count < 1">
                         ------- no to Do -------
                     </div>
-            <li v-else v-for="(toDo, index) in toDoList.data.attributes.data.to_dos.data" draggable="true">
-                <span>=</span>
-                {{ toDo.data.attributes.data.name }}
-                <input type="checkbox" name="do" id="do">
-                <span @click="deleteToDo(toDo, index)">X</span>
-            </li>
+                    <ToDo v-else
+                          v-for="(toDo, indexToDo) in toDoList.data.attributes.data.to_dos.data"
+                          key="indexToDo"
+                          :toDo="toDo"
+                          :position="indexToDo" />
                 </ul>
-        <div>
-            <InputField name="name" classes="inline" placeholder="New To Do" required @update:field="name = $event" :errors="errors" />
-            <button class="btn-primary" @click="addToDo">ADD</button>
+            </div>
+            <div class="flex items-center mt-2">
+                <InputField name="name" classes="py-1" placeholder="New To Do" required @update:field="name = $event" :errors="errors" />
+                <button class="btn-primary ml-1 mb-2 py-1" @click="addToDo">ADD</button>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
     import InputField from "../../components/InputField";
+    import ToDo from "./ToDo";
 
     export default {
         name: "ToDoList",
         components: {
-            InputField
+            InputField, ToDo
         },
         data: function () {
             return {
                 name: '',
                 errors: null,
                 list: null,
+                edit: false,
             }
         },
         props: {
@@ -67,3 +72,5 @@
         }
     }
 </script>
+
+

resources/js/views/ToDoLists/ToDoListIndex.vue

@@ -15,11 +15,13 @@
             <a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a>
         </div>
         <Loader v-if="loading" />
-        <div v-else>
+        <div v-else class="flex flex-wrap -m-2 mt-2">
             <div v-if="toDoLists.length < 1">No List Yet</div>
-            <div v-else v-for="toDoList in toDoLists">
-                <ToDoList :to-do-list="toDoList" />
-            </div>
+                <ToDoList v-else
+                          v-for="(toDoList, index) in toDoLists"
+                          :key="index"
+                          :to-do-list="toDoList"
+                          class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" />
         </div>
     </div>
 </template>

resources/sass/components/nav.scss

@@ -129,7 +129,7 @@ nav {
 
 
         span {
-            @apply font-bold text-xl ml-2 overflow-hidden;
+            @apply font-bold text-xl ml-2 overflow-hidden truncate;
             transition: width 0.3s;
 
             &:hover {

resources/svg/draggable.svg

@@ -0,0 +1,7 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;" xml:space="preserve">
+<g>
+	<rect x="0" y="106.667" width="384" height="42.667"/>
+	<rect x="0" y="234.667" width="384" height="42.667"/>
+</g>
+</svg>

resources/svg/edit.svg

@@ -0,0 +1,6 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 383.947 383.947" style="enable-background:new 0 0 383.947 383.947;" xml:space="preserve">
+<g>
+	<polygon points="0,303.947 0,383.947 80,383.947 316.053,147.893 236.053,67.893"/>
+	<path d="M377.707,56.053L327.893,6.24c-8.32-8.32-21.867-8.32-30.187,0l-39.04,39.04l80,80l39.04-39.04C386.027,77.92,386.027,64.373,377.707,56.053z"/>
+</g>
+</svg>

resources/views/auth/login.blade.php

@@ -1,14 +1,15 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="auth p-2">
-    <div class="title-page mb-2">{{ __('Login') }}</div>
+<div class="bg-orange-200 mx-auto h-screen flex justify-center items-center">
+    <div class="w-96 m-auto bg-orange-400 rounded p-4 mt-10 shadow-xl">
+        <div class="text-3xl font-bold text-center mb-4">{{ __('Login') }}</div>
         <form method="POST" action="{{ route('login') }}">
             @csrf
 
-        <label for="email" class="mb-1">{{ __('E-Mail') }}</label>
-        <div class="mb-2">
-            <input id="email" type="email" class="@error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
+            <label for="email" class="mb-2 font-bold uppercase">{{ __('E-Mail') }}</label>
+            <div class="mb-4">
+                <input id="email" type="email" class="w-full border-2 border-orange-500 focus:border-orange-700 rounded p-2 @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
                 @error('email')
                 <span class="invalid-feedback" role="alert">
                     <strong>{{ $message }}</strong>
@@ -16,9 +17,9 @@
                 @enderror
             </div>
 
-        <label for="password" class="mb-1">{{ __('Password') }}</label>
-        <div class="mb-2">
-            <input id="password" type="password" class="@error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
+            <label for="password" class="mb-2 font-bold uppercase">{{ __('Password') }}</label>
+            <div class="mb-4">
+                <input id="password" type="password" class="w-full border-2 border-orange-500 focus:border-orange-700 rounded p-2 @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
 
                 @error('password')
                 <span class="invalid-feedback" role="alert">
@@ -27,7 +28,7 @@
                 @enderror
             </div>
 
-        <div class="mb-2">
+            <div class="mb-4">
                 <input type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
 
                 <label for="remember" class="inline">
@@ -35,8 +36,8 @@
                 </label>
             </div>
 
-        <div class="flex-between">
-            <button type="submit" class="btn-primary px-3">
+            <div class="flex justify-between">
+                <button type="submit" class="btn-primary">
                     {{ __('Login') }}
                 </button>
                 @if (Route::has('password.request'))
@@ -46,6 +47,6 @@
                 @endif
             </div>
         </form>
-
+    </div>
 </div>
 @endsection