fix modal, logout & start todo front

database/migrations/2020_04_19_144900_create_to_do_lists_table.php

@@ -17,6 +17,7 @@ class CreateToDoListsTable extends Migration
             $table->id();
             $table->unsignedBigInteger('user_id');
             $table->string('name');
+            $table->integer('order')->default(1);
             $table->timestamps();
         });
     }

resources/js/components/Nav.vue

@@ -8,6 +8,10 @@
             <svg-vue icon="memos" />
             <span v-bind:class="{ navhidden: !toggleNav }">Memos</span>
         </router-link>
+        <router-link to="/to-do-lists" class="nav-item">
+            <svg-vue icon="memos" />
+            <span v-bind:class="{ navhidden: !toggleNav }">To Do Lists</span>
+        </router-link>
         <router-link to="/jeux" class="nav-item">
             <svg-vue icon="games" />
             <span v-bind:class="{ navhidden: !toggleNav }">Jeux</span>

resources/js/components/TopBar.vue

@@ -37,18 +37,6 @@
             ...mapGetters({
                 authUser: 'authUser',
             })
-        },
-        methods: {
-            logout: function () {
-                axios.post('logout')
-                    .then(res => {
-                        if(res.status ===302 || 401) {
-                            window.location.href = '/login'
-                        }
-                    }).catch(error => {
-
-                })
-            }
         }
     }
 </script>

resources/js/router.js

@@ -9,6 +9,8 @@ import MemoIndex from "./views/Memo/MemoIndex";
 import MemoCreate from "./views/Memo/MemoCreate";
 import MemoShow from "./views/Memo/MemoShow";
 import MemoEdit from "./views/Memo/MemoEdit";
+import ToDoListIndex from "./views/ToDoLists/ToDoListIndex";
+import ToDoListShow from "./views/ToDoLists/ToDoListShow";
 import GameIndex from "./views/Games/GameIndex";
 import Hangman from "./views/Games/HangMan/Hangman";
 
@@ -54,6 +56,14 @@ export default new VueRouter({
             meta: {title: 'Edit Memo'}
         },
 
+        {
+            path: '/to-do-lists', component: ToDoListIndex,
+            meta: {title: 'To Do Lists'}
+        }, {
+            path: '/to-do-lists/:id', component: ToDoListShow,
+            meta: {title: 'Details of List'}
+        },
+
         {
             path: '/jeux', component: GameIndex,
             meta: {title: 'Liste des jeux'}

resources/js/views/DashBoard.vue

@@ -17,6 +17,18 @@
         name: "DashBoard",
         components: {
             UserAdmin
+        },
+        methods: {
+            logout: function () {
+                axios.post('logout')
+                    .then(res => {
+                        if(res.status ===302 || 401) {
+                            window.location.href = '/login'
+                        }
+                    }).catch(error => {
+
+                })
+            }
         }
     }
 </script>

resources/js/views/Memo/MemoShow.vue

@@ -2,6 +2,14 @@
     <div>
         <Loader v-if="loading" />
         <div v-else>
+            <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
+            <div v-if="modal" class="modal">
+                <p class="m-1 text-center">Are you sure you want to delete this record ?</p>
+                <div class="flex-center m-1 mt-2">
+                    <button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
+                    <button class="btn-alert" @click="destroy"> Delete</button>
+                </div>
+            </div>
             <div class="relative">
                 <img
                     v-if="!loading"
@@ -11,15 +19,7 @@
                 <div class="flex-col flex-between absolute memo-cover">
                     <div class="flex-between px-2 py-1">
                         <router-link to="/memos/" class="btn-secondary">< Back</router-link>
-                        <div v-if="modal" class="modal-container" @click="modal = ! modal">
+
-                            <div class="modal">
-                                <p class="m-1 text-center">Are you sure you want to delete this record ?</p>
-                                <div class="flex-center m-1 mt-2">
-                                    <button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
-                                    <button class="btn-alert" @click="destroy"> Delete</button>
-                                </div>
-                            </div>
-                        </div>
                         <div class="flex-middle">
                             <router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
                             <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>

resources/js/views/ToDoLists/ToDoListIndex.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="p-2">
+        <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
+        <div v-if="modal" class="modal px-2">
+            <p class="m-1 text-center">Add a new to-do list ?</p>
+            <InputField name="name" label="Title" placeholder="Your Title" required @update:field="name = $event" :errors="errors" />
+            <div class="flex-center m-1 mt-2">
+                <button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
+                <button class="btn-primary" @click="create">Create</button>
+            </div>
+        </div>
+        <div class="flex-between flex-center mb-1">
+            <a href="#" class="btn" @click="$router.back()">< Back</a>
+
+            <a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a>
+        </div>
+        <Loader v-if="loading" />
+    </div>
+</template>
+
+<script>
+    import Loader from "../../components/Loader";
+    import InputField from "../../components/InputField";
+
+    export default {
+        name: "ToDoListIndex",
+        components: {
+            Loader, InputField
+        },
+        data: function () {
+            return {
+                loading: true,
+                modal: false,
+                toDoLists: null,
+                name: '',
+                errors: null,
+            }
+        },
+        mounted() {
+            axios.get('/api/to-do-lists')
+                .then(response => {
+                    this.toDoLists = response.data.data
+                    this.loading = false
+                })
+                .catch(errorRes => {
+                    this.loading = false
+                    if (errorRes.response.status === 404) {
+                        this.$router.push('/')
+                    }
+                })
+        },
+        methods: {
+            create: function () {
+                axios.post('/api/to-do-lists', {name: this.name})
+                    .then(res => {
+                        console.log(res)
+                        this.modal = false
+                        this.name = ''
+                        // this.$router.push('/memos')
+                    })
+                    .catch(errorRes => {
+                        console.log('Internal Error, Unable to delete contact.' + errorRes)
+                    })
+            }
+        }
+    }
+</script>

resources/js/views/ToDoLists/ToDoListShow.vue

@@ -0,0 +1,9 @@
+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "ToDoListShow"
+    }
+</script>

resources/sass/components/modal.scss

@@ -3,24 +3,28 @@ $modal-duration: 1s;
 .modal-container {
     background-color: rgba(0,0,0,0.6);
     //display: none;
-    position: fixed;
+    z-index: 10;
+    position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
 
-    .modal {
+
-        background-color: #fff;
+}
-        border-radius: 5px;
+
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+.modal {
-        position: absolute;
+    background-color: #fff;
-        overflow: hidden;
+    border-radius: 5px;
-        top: 50%;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-        left: 50%;
+    position: absolute;
-        transform: translate(-50%, -50%);
+    z-index: 20;
-        max-width: 100%;
+    //overflow: hidden;
-        width: 400px;
+    top: 50%;
-        animation-name: modalopen;
+    left: 50%;
-        animation-duration: $modal-duration;
+    transform: translate(-50%, -50%);
-    }
+    max-width: 100%;
+    width: 400px;
+    animation-name: modalopen;
+    animation-duration: $modal-duration;
 }