Merge branch 'master' into 'production'

Master

See merge request Romulus21/portal!36

.eslintrc.json

@@ -6,26 +6,22 @@
     },
     "extends": [
         "eslint:recommended",
-        "plugin:vue/essential",
+        "plugin:vue/essential"
-        "plugin:vue/base",
-        "plugin:vue/strongly-recommended",
-        "plugin:vue/recommended"
     ],
     "globals": {
         "Atomics": "readonly",
         "SharedArrayBuffer": "readonly"
     },
     "parserOptions": {
-        "ecmaVersion": 2018,
+        "ecmaVersion": 2018
-        "sourceType": "module"
     },
     "plugins": [
         "vue"
     ],
     "rules": {
         "indent": [
-            "off",
+            "error",
-            2
+            4
         ],
         "linebreak-style": [
             "error",
@@ -36,10 +32,8 @@
             "single"
         ],
         "semi": [
-            "off",
+            "error",
-            "always"
+            "never"
-        ],
+        ]
-        "no-console": "off",
-        "strict": "off"
     }
 }

app/Http/Controllers/ToDoController.php

@@ -14,6 +14,10 @@ class ToDoController extends Controller
     {
         $this->authorize('create', ToDoList::class);
 
+        $lastToDo = $toDoList->toDos()->orderBy('order', 'desc')->first();
+
+        request()['order'] = ($lastToDo) ? $lastToDo->order + 1 : 1;
+
         $toDo = $toDoList->toDos()->create($this->validateData());
 
         return (new ToDoResource($toDo))
@@ -32,10 +36,34 @@ class ToDoController extends Controller
             ->setStatusCode(200);
     }
 
+    public function destroy(ToDoList $toDoList, ToDo $toDo)
+    {
+        $this->authorize('delete', $toDoList);
+
+        $toDo->delete();
+
+        return response([], 204);
+    }
+
+    public function changeOrder(ToDoList $toDoList, ToDo $toDo)
+    {
+        $this->authorize('update', $toDoList);
+
+        $toDoChanged = $toDoList->toDos()->where('order', (int) request()['new-order'])->first();
+
+        $toDoChanged->update(['order' => (int) $toDo->order]);
+        $toDo->update(['order' => (int) request()['new-order']]);
+
+        return (new ToDoResource($toDo))
+            ->response()
+            ->setStatusCode(200);
+    }
+
     private function validateData()
     {
         return request()->validate([
             'name' => 'required',
+            'order' => 'integer|min:1|max:1000000',
         ]);
     }
 }

app/Http/Controllers/ToDoListController.php

@@ -8,6 +8,13 @@ use Illuminate\Http\Request;
 
 class ToDoListController extends Controller
 {
+    public function index()
+    {
+        $this->authorize('viewAny', ToDoList::class);
+
+        return ToDoListResource::collection(request()->user()->toDoLists);
+    }
+
     public function store()
     {
         $this->authorize('create', ToDoList::class);

app/Http/Resources/ToDo.php

@@ -21,7 +21,7 @@ class ToDo extends JsonResource
                 'attributes' => [
                     'data' => [
                         'name' => $this->name,
-                        'order' => $this->order,
+                        'order' => (int) $this->order,
                         'checked_at' => optional($this->checked_at)->diffForHumans(),
                         'last_updated' => $this->updated_at->diffForHumans(),
                     ]

app/Http/Resources/ToDoList.php

@@ -23,7 +23,7 @@ class ToDoList extends JsonResource
                     'data' => [
                         'name' => $this->name,
                         'to_dos' => new ToDoCollection($this->toDos),
-                        'posted_by' => new UserResource($this->user),
+                        'posted_by' => new UserResource($this->author),
                         'last_updated' => $this->updated_at->diffForHumans(),
 //                    'cover_image' => new ImageResource($this->coverImage),
                     ]

app/Models/ToDoList.php

@@ -16,7 +16,7 @@ class ToDoList extends Model
         return '/to-do-lists/' . $this->id;
     }
 
-    public function users(): BelongsTo
+    public function author(): BelongsTo
     {
         return $this->belongsTo(User::class);
     }

app/Models/User.php

@@ -59,6 +59,11 @@ class User extends Authenticatable
         return $this->hasMany(Memo::class);
     }
 
+    public function toDoLists() : HasMany
+    {
+        return $this->hasMany(ToDoList::class);
+    }
+
     public function images(): MorphMany
     {
         return $this->morphMany(Image::class, 'imageable');
@@ -83,9 +88,4 @@ class User extends Authenticatable
                 $userImage->path = 'images/default-cover.jpg';
             });
     }
-
-    public function toDoLists(): HasMany
-    {
-        return $this->hasMany(ToDoList::class);
-    }
 }

database/factories/ToDoItemFactory.php

@@ -0,0 +1,16 @@
+<?php
+
+/** @var \Illuminate\Database\Eloquent\Factory $factory */
+
+use App\Models\ToDo;
+use Faker\Generator as Faker;
+
+$factory->define(ToDo::class, function (Faker $faker) {
+    $toDoList = factory(\App\Models\ToDoList::class);
+    return [
+        'to_do_list_id' => $toDoList,
+        'name' => $faker->words(3, [false]),
+       // 'order' => $toDoList->toDos->orderBy('id', 'desc')->first()->order + 1,
+//        'checket_at' => now(),
+    ];
+});

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();
         });
     }

database/migrations/2020_04_19_190733_create_to_dos_table.php

@@ -17,7 +17,7 @@ class CreateToDosTable extends Migration
             $table->id();
             $table->unsignedBigInteger('to_do_list_id');
             $table->string('name');
-            $table->integer('order')->default(0);
+            $table->integer('order')->default(1);
             $table->timestamp('checked_at')->nullable();
             $table->timestamps();
         });

package.json

@@ -8,14 +8,20 @@
         "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
         "prod": "npm run production",
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "eslint": "./node_modules/.bin/eslint resources/assets/js/ test/ --ext .js,.vue"
+        "eslint": "./node_modules/.bin/eslint resources/js/ --ext .js,.vue",
+        "lint": "eslint --ext .js,.vue resources/js/"
     },
     "devDependencies": {
         "axios": "^0.19",
         "babel-eslint": "^10.1.0",
         "cross-env": "^7.0",
         "eslint": "^6.8.0",
+        "eslint-config-standard": "^14.1.1",
         "eslint-loader": "^3.0.3",
+        "eslint-plugin-import": "^2.20.2",
+        "eslint-plugin-node": "^11.1.0",
+        "eslint-plugin-promise": "^4.2.1",
+        "eslint-plugin-standard": "^4.0.1",
         "eslint-plugin-vue": "^6.2.2",
         "laravel-mix": "^5.0.1",
         "laravel-mix-eslint": "^0.1.3",

resources/js/app.js

@@ -2,12 +2,13 @@ import Vue from 'vue'
 import router from './router'
 import App from './components/App'
 import store from './store'
-import SvgVue from 'svg-vue';
+import SvgVue from 'svg-vue'
 
-Vue.use(SvgVue);
+Vue.use(SvgVue)
 
-require('./bootstrap');
+require('./bootstrap')
 
+// eslint-disable-next-line no-unused-vars
 const app = new Vue({
     el: '#app',
 
@@ -15,4 +16,4 @@ const app = new Vue({
         App
     },
     router, store,
-});
+})

resources/js/bootstrap.js

@@ -1,7 +1,5 @@
-window._ = require('lodash');
+window._ = require('lodash')
-
-window.axios = require('axios');
-
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
+window.axios = require('axios')
 
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

resources/js/components/AlertBox.vue

@@ -9,7 +9,7 @@
 
 <script>
 export default {
-        name: "AlertBox",
+    name: 'AlertBox',
     props: {
         type: {
             type: String,

resources/js/components/App.vue

@@ -11,12 +11,12 @@
 </template>
 
 <script>
-    import Nav from "./Nav";
+import Nav from './Nav'
-    import TopBar from "./TopBar";
+import TopBar from './TopBar'
 import { mapGetters } from 'vuex'
 
 export default {
-        name: "App",
+    name: 'App',
     components : {
         Nav, TopBar
     },
@@ -32,6 +32,7 @@
         })
     },
     watch: {
+        // eslint-disable-next-line no-unused-vars
         $route(to, from) {
             this.$store.dispatch('setPageTitle', to.meta.title)
         }

resources/js/components/Avatar.vue

@@ -8,7 +8,7 @@
 
 <script>
 export default {
-        name: "Avatar",
+    name: 'Avatar',
     props: ['avatar', 'alt', 'size']
 }
 </script>

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>
+        <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="errorClassObject()" class="w-full rounded p-2">
+        <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>
@@ -9,7 +9,7 @@
 <script>
 
 export default {
-        name: "InputField",
+    name: 'InputField',
     props: {
         name: {
             type: String,
@@ -27,6 +27,7 @@
         },
         errors: Object,
         data: String,
+        classes: String,
     },
     data: function () {
         return {
@@ -40,7 +41,7 @@
     },
     methods: {
         updateField: function () {
-                this.clearErrors(this.name);
+            this.clearErrors(this.name)
             this.$emit('update:field', this.value)
         },
         errorMessage: function () {

resources/js/components/Loader.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-        name: "Loader",
+    name: 'Loader',
     data: function () {
         return {
             loading: false,

resources/js/components/Nav.vue

@@ -7,11 +7,15 @@
             <hr>
             <router-link to="/memos" class="nav-item p-2">
                 <svg-vue icon="memos" />
-                <span v-bind:class="{ navhidden: !toggleNav }">Memos</span>
+                <span>Memos</span>
+            </router-link>
+            <router-link to="/to-do-lists" class="nav-item p-2">
+                <svg-vue icon="list" />
+                <span>ToDo Lists</span>
             </router-link>
             <router-link to="/jeux" class="nav-item p-2">
                 <svg-vue icon="games" />
-                <span v-bind:class="{ navhidden: !toggleNav }">Jeux</span>
+                <span>Jeux</span>
             </router-link>
         </div>
         <div @click="toggleNavBar"  class="nav-toggle flex ml-2">
@@ -22,7 +26,7 @@
 
 <script>
 export default {
-        name: "Nav",
+    name: 'Nav',
     data: function () {
         return {
             toggleNav: true,
@@ -33,9 +37,9 @@
         (isTrueSet) ? this.toggleNav = true : this.toggleNav = false
     },
     methods: {
-            toggleNavBar() {
+        toggleNavBar(){
             this.toggleNav = !this.toggleNav
-                localStorage.setItem('navbar', JSON.stringify(this.toggleNav));
+            localStorage.setItem('navbar', JSON.stringify(this.toggleNav))
         }
     }
 }

resources/js/components/TextAreaField.vue

@@ -1,14 +1,21 @@
 <template>
     <div class="relative mb-2">
         <label v-if="label" :for="name" class="pb-1">{{ label }}</label>
-        <textarea :id="name" type="text" v-model="value" :placeholder="placeholder" @input="updateField()" :class="errorClassObject()" class="w-full h-64 rounded p-2">{{ data }}</textarea>
+        <textarea :id="name"
+                  type="text"
+                  v-model="value"
+                  :placeholder="placeholder"
+                  @input="updateField()"
+                  :class="errorClassObject()"
+                  class="w-full h-64 rounded p-2">
+        </textarea>
         <p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
     </div>
 </template>
 
 <script>
 export default {
-        name: "TextAreaField",
+    name: 'TextAreaField',
     props: {
         name: {
             type: String,
@@ -39,7 +46,7 @@
     },
     methods: {
         updateField: function () {
-                this.clearErrors(this.name);
+            this.clearErrors(this.name)
             this.$emit('update:field', this.value)
         },
         errorMessage: function () {

resources/js/components/TopBar.vue

@@ -21,10 +21,10 @@
 
 <script>
 import { mapGetters } from 'vuex'
-    import Avatar from "./Avatar";
+import Avatar from './Avatar'
 
 export default {
-        name: "TopBar",
+    name: 'TopBar',
     components: {
         Avatar
     },
@@ -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/components/UploadableImage.vue

@@ -12,7 +12,7 @@
 import { mapGetters } from 'vuex'
 
 export default {
-        name: "UploadableImage",
+    name: 'UploadableImage',
     props: {
         imageWidth: {
             type: Number,

resources/js/router.js

@@ -1,16 +1,18 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from "./views/Home"
+import Home from './views/Home'
-import Profile from "./views/User/ProfileUser";
+import Profile from './views/User/ProfileUser'
-import ShowUser from "./views/User/ShowUser";
+import ShowUser from './views/User/ShowUser'
-import DashBoard from "./views/DashBoard";
+import DashBoard from './views/DashBoard'
-import CssTesteur from "./views/CssTesteur";
+import CssTesteur from './views/CssTesteur'
-import MemoIndex from "./views/Memo/MemoIndex";
+import MemoIndex from './views/Memo/MemoIndex'
-import MemoCreate from "./views/Memo/MemoCreate";
+import MemoCreate from './views/Memo/MemoCreate'
-import MemoShow from "./views/Memo/MemoShow";
+import MemoShow from './views/Memo/MemoShow'
-import MemoEdit from "./views/Memo/MemoEdit";
+import MemoEdit from './views/Memo/MemoEdit'
-import GameIndex from "./views/Games/GameIndex";
+import ToDoListIndex from './views/ToDoLists/ToDoListIndex'
-import Hangman from "./views/Games/HangMan/Hangman";
+import ToDoListShow from './views/ToDoLists/ToDoListShow'
+import GameIndex from './views/Games/GameIndex'
+import Hangman from './views/Games/HangMan/Hangman'
 
 Vue.use(VueRouter)
 
@@ -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/store/modules/user.js

@@ -10,13 +10,15 @@ const getters = {
 }
 
 const actions = {
+    // eslint-disable-next-line no-unused-vars
     fetchAuthUser({commit, state}) {
+        // eslint-disable-next-line no-undef
         axios.get('/api/auth-user')
             .then(res => {
                 commit('setAuthUser', res.data)
             })
             .catch(error => {
-                console.log('Unable to fetch auth user')
+                console.log('Unable to fetch auth user' + error)
             })
     }
 }

resources/js/views/CssTesteur.vue

@@ -38,6 +38,6 @@
 
 <script>
 export default {
-        name: "CssTesteur"
+    name: 'CssTesteur'
 }
 </script>

resources/js/views/DashBoard.vue

@@ -11,12 +11,26 @@
 </template>
 
 <script>
-    import UserAdmin from "./User/UserAdmin";
+import UserAdmin from './User/UserAdmin'
 
 export default {
-        name: "DashBoard",
+    name: 'DashBoard',
     components: {
         UserAdmin
+    },
+    methods: {
+        logout: function () {
+            // eslint-disable-next-line no-undef
+            axios.post('logout')
+                .then(res => {
+                    // eslint-disable-next-line no-constant-condition
+                    if(res.status === 302 || 401) {
+                        window.location.href = '/login'
+                    }
+                }).catch(() => {
+
+                })
+        }
     }
 }
 </script>

resources/js/views/Games/GameIndex.vue

@@ -8,10 +8,10 @@
 </template>
 
 <script>
-    import HangmanIndex from "./HangMan/HangmanIndex";
+import HangmanIndex from './HangMan/HangmanIndex'
 
 export default {
-        name: "GameIndex",
+    name: 'GameIndex',
     components: {
         HangmanIndex
     }

resources/js/views/Games/HangMan/Hangman.vue

@@ -3,7 +3,7 @@
         <h1 class="text-3xl text-center text-orange-900 font-bold">Pendu</h1>
         <p class="text-center mb-4">Trouve le mot du pendu - Saisi les lettres</p>
         <div class="flex justify-center dic-select">
-            <div v-for="(dic, key) in dictionary">
+            <div v-for="(dic, key) in dictionary" :key="key">
                 <a v-if="!selectedWord" class="btn-primary mr-1" @click="selectWord">{{ key }}</a>
             </div>
         </div>
@@ -49,7 +49,7 @@
 import json from './dict.json'
 
 export default {
-        name: "Hangman",
+    name: 'Hangman',
     data: function () {
         return {
             dictionary: json,
@@ -89,7 +89,7 @@
                     }
                 } else {
                     if(!this.wrongLetters.includes(letter)) {
-                            this.wrongLetters.push(letter);
+                        this.wrongLetters.push(letter)
 
                         this.updateWrongLettersEl()
                     } else {
@@ -104,15 +104,15 @@
                     .split('')
                     .map(
                         letter => {
-                            let toggleLetter = this.correctLetters.includes(letter) ? letter : '';
+                            let toggleLetter = this.correctLetters.includes(letter) ? letter : ''
-                            return '<span class="letter">' + toggleLetter +"</span>"
+                            return '<span class="letter">' + toggleLetter + '</span>'
                         }
-                    ).join('');
+                    ).join('')
 
-                const innerWord = this.wordEl.replace(/<span class="letter">|<\/span>/g, '');
+            const innerWord = this.wordEl.replace(/<span class="letter">|<\/span>/g, '')
 
             if(innerWord === this.selectedWord) {
-                    this.finalMessage = 'Gagné! 😃';
+                this.finalMessage = 'Gagné! 😃'
                 this.popup = true
                 this.newGame()
             }
@@ -121,30 +121,30 @@
             this.wrongLettersEl =
                 !this.wrongLetters ? '<p>Wrong</p>' : ''
                     +
-                    this.wrongLetters.map(letter => `<span>${letter}</span>`);
+                this.wrongLetters.map(letter => `<span>${letter}</span>`)
 
             // Display parts
             this.figureParts.forEach((part, index) => {
-                    const errors = this.wrongLetters.length;
+                const errors = this.wrongLetters.length
 
                 if(index < errors) {
                     part.style.display = 'block'
                 } else {
                     part.style.display = 'none'
                 }
-                });
+            })
 
             // Check if lost
             if(this.wrongLetters.length === this.figureParts.length) {
-                    this.finalMessage = 'Perdu. 😕';
+                this.finalMessage = 'Perdu. 😕'
                 this.popup = true
                 this.newGame()
             }
         },
         newGame: function () {
             this.popup = true
-                this.correctLetters.splice(0);
+            this.correctLetters.splice(0)
-                this.wrongLetters.splice(0);
+            this.wrongLetters.splice(0)
             this.letterBox = ''
             this.selectedWord = ''
             this.wrongLettersEl = ''

resources/js/views/Games/HangMan/HangmanIndex.vue

@@ -7,7 +7,7 @@
 
 <script>
 export default {
-        name: "HangmanIndex",
+    name: 'HangmanIndex',
     props: {
         link: {
             type: String,

resources/js/views/Home.vue

@@ -6,10 +6,10 @@
 </template>
 
 <script>
-    import OpenWeatherCard from "./Meteo/OpenWeatherCard";
+import OpenWeatherCard from './Meteo/OpenWeatherCard'
 
 export default {
-        name: "Home",
+    name: 'Home',
     components: {
         OpenWeatherCard
     }

resources/js/views/Memo/MemoCreate.vue

@@ -1,26 +1,22 @@
 <template>
     <div class="p-4">
         <div class="flex justify-between flex-center mb-4">
-            <router-link to="/memos/" class="btn">< Back</router-link>
+            <router-link to="/memos/" class="btn">Back</router-link>
-            <button @click="$router.back()" class="btn-alert">Cancel</button>
+            <button class="btn-primary">Add New Memo</button>
         </div>
         <form @submit.prevent="submitForm">
             <InputField name="name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
             <TextAreaField class="" name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
-
-            <div class="flex justify-end mt-2">
-                <button class="btn-primary">Add New Memo</button>
-            </div>
         </form>
     </div>
 </template>
 
 <script>
-    import InputField from "../../components/InputField";
+import InputField from '../../components/InputField'
-    import TextAreaField from "../../components/TextAreaField";
+import TextAreaField from '../../components/TextAreaField'
 
 export default {
-        name: "MemoCreate",
+    name: 'MemoCreate',
     components: {
         InputField, TextAreaField
     },
@@ -35,6 +31,7 @@
     },
     methods: {
         submitForm: function () {
+            // eslint-disable-next-line no-undef
             axios.post('/api/memos', this.form)
                 .then(response => {
                     this.$router.push(response.data.links.self)

resources/js/views/Memo/MemoEdit.vue

@@ -14,16 +14,13 @@
                 :alt="form.name"/>
         </div>
         <div class="p-4">
-            <div class="flex justify-between mb-4">
-                <router-link :to="'/memos/' + this.$route.params.id" class="btn">< Back</router-link>
-            </div>
             <form @submit.prevent="submitForm">
-                <InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
+            <div class="flex justify-between mb-4">
-                <TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
+                <router-link :to="'/memos/' + this.$route.params.id" class="btn">Back</router-link>
-                <div class="flex justify-end mt-2">
                 <button class="btn-primary">Save</button>
             </div>
-
+                <InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
+                <TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
             </form>
         </div>
 
@@ -31,12 +28,12 @@
 </template>
 
 <script>
-    import InputField from "../../components/InputField";
+import InputField from '../../components/InputField'
-    import TextAreaField from "../../components/TextAreaField";
+import TextAreaField from '../../components/TextAreaField'
-    import UploadableImage from "../../components/UploadableImage";
+import UploadableImage from '../../components/UploadableImage'
 
 export default {
-        name: "MemoEdit",
+    name: 'MemoEdit',
     components: {
         InputField, TextAreaField, UploadableImage
     },
@@ -53,6 +50,7 @@
     },
     methods: {
         submitForm: function () {
+            // eslint-disable-next-line no-undef
             axios.patch('/api/memos/' + this.$route.params.id, this.form)
                 .then(response => {
                     this.$router.push(response.data.links.self)
@@ -63,6 +61,7 @@
         }
     },
     mounted() {
+        // eslint-disable-next-line no-undef
         axios.get('/api/memos/' + this.$route.params.id)
             .then(response => {
                 this.form = response.data.data

resources/js/views/Memo/MemoIndex.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="p-4">
         <div class="flex justify-between flex-center mb-4">
-            <a href="#" class="btn" @click="$router.back()">< Back</a>
+            <a href="#" class="btn" @click="$router.back()">Back</a>
             <router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
         </div>
         <Loader v-if="loading" />
@@ -25,10 +25,10 @@
 </template>
 
 <script>
-    import Loader from "../../components/Loader";
+import Loader from '../../components/Loader'
 
 export default {
-        name: "MemoIndex",
+    name: 'MemoIndex',
     components: {
         Loader
     },
@@ -39,12 +39,13 @@
         }
     },
     mounted() {
+        // eslint-disable-next-line no-undef
         axios.get('/api/memos')
             .then(response => {
                 this.memos = response.data.data
                 this.loading = false
             })
-                .catch(error => {
+            .catch(() => {
                 this.loading = false
                 console.log('Unable to fetch memos.')
             })

resources/js/views/Memo/MemoShow.vue

@@ -18,7 +18,7 @@
                 />
                 <div class="absolute flex flex-col justify-between w-full top-0 bottom-0">
                     <div class="flex items-center justify-between p-4">
-                        <router-link to="/memos/" class="btn-secondary">< Back</router-link>
+                        <router-link to="/memos/" class="btn-secondary">Back</router-link>
                         <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>
@@ -30,8 +30,8 @@
     <!--           <TagBox :memo="memo" />-->
             <div class="p-4">
 
-                <p class="pt-2" v-html="memoMarkdown"></p>
+                <div class="memo-style p-4 pb-3 -mb-1 bg-white" v-html="memoMarkdown"></div>
-                <div class="bg-orange-400 rounded mt-2 px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
+                <div class="bg-orange-400 px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
             </div>
         </div>
     </div>
@@ -39,10 +39,10 @@
 
 <script>
 // import TagBox from "../Tag/TagBox";
-    import Loader from "../../components/Loader";
+import Loader from '../../components/Loader'
 let MarkdownIt = require('markdown-it'),
     md = new MarkdownIt()
-            .use(require('markdown-it-checkbox'));
+        .use(require('markdown-it-checkbox'))
 
 export default {
     name: 'MemoShow',
@@ -63,6 +63,7 @@
         }
     },
     mounted() {
+        // eslint-disable-next-line no-undef
         axios.get('/api/memos/' + this.$route.params.id)
             .then(response => {
                 this.memo = response.data.data
@@ -77,8 +78,9 @@
     },
     methods: {
         destroy: function () {
+            // eslint-disable-next-line no-undef
             axios.delete('/api/memos/' + this.$route.params.id)
-                    .then(response => {
+                .then(() => {
                     this.$router.push('/memos')
                 })
                 .catch(errorRes => {

resources/js/views/Meteo/OpenWeatherCard.vue

@@ -23,7 +23,7 @@
 
 <script>
 export default {
-        name: "OpenWeatherCard",
+    name: 'OpenWeatherCard',
     data: function () {
         return {
             loading: true,
@@ -34,7 +34,7 @@
         dateFormat(date) {
             const d = new Date(date)
             const dtf = new Intl.DateTimeFormat('fr', { year: '2-digit', month: 'short', day: '2-digit', hour: 'numeric' })
-                const [{ value: mo },,{ value: da },,{ value: ye },,{value: ho }] = dtf.formatToParts(d)
+            const [{ value: mo },,{ value: da },,{value: ho }] = dtf.formatToParts(d)
             return `${mo}/${da} - ${ho}h`
         }
     },
@@ -54,14 +54,14 @@
         }
 
         if (refreshMeteo) {
-                console.log("refreshing meteo data")
+            // eslint-disable-next-line no-undef
             axios.get('/api/meteo')
                 .then(response => {
                     this.meteo = response.data
                     this.loading = false
-                        localStorage.setItem('meteo', JSON.stringify(response.data));
+                    localStorage.setItem('meteo', JSON.stringify(response.data))
                 })
-                    .catch(error => {
+                .catch(() => {
                     console.log('Unable to fetch meteo.')
                 })
         }

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">
+            <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

@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <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 drop-zone"
+                    @drop='onDrop($event, toDoList)'
+                    @dragover.prevent
+                    @dragenter.prevent
+                >
+                    <div v-if="toDoList.data.attributes.data.to_dos.to_dos_count < 1">
+                        ------- no to Do -------
+                    </div>
+                    <ToDo v-else
+                          v-for="(toDo, indexToDo) in toDoList.data.attributes.data.to_dos.data"
+                          :key="indexToDo"
+                          :toDo="toDo"
+                          :position="indexToDo"
+                          draggable
+                          @dragstart='startDrag($event, toDo)'
+                          class='drag-el'
+                          />
+                </ul>
+            </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'
+//https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/
+
+export default {
+    name: 'ToDoList',
+    components: {
+        InputField, ToDo
+    },
+    data: function () {
+        return {
+            name: '',
+            errors: null,
+            dragStartIndex: null,
+            edit: false,
+        }
+    },
+    props: {
+        toDoList: {
+            type: Object,
+            require: true
+        }
+    },
+    methods: {
+        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)
+                })
+        },
+        startDrag: (evt, item) => {
+            console.log('StartDrag', evt, item)
+            evt.dataTransfer.dropEffect = 'move'
+            evt.dataTransfer.effectAllowed = 'move'
+            evt.dataTransfer.setData('itemID', item.id)
+        },
+        onDrop (evt, list) {
+            console.log('onDrop', evt, list, this.toDoList)
+            const itemID = evt.dataTransfer.getData('itemID')
+            const item = this.toDoList.data.attributes.data.to_dos.data.find(item => item.id == itemID)
+            item.list = list
+        },
+    }
+}
+</script>
+
+

resources/js/views/ToDoLists/ToDoListIndex.vue

@@ -0,0 +1,78 @@
+<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 v-else class="flex flex-wrap -m-2 mt-2">
+            <div v-if="toDoLists.length < 1">No List Yet</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>
+
+<script>
+import Loader from '../../components/Loader'
+import InputField from '../../components/InputField'
+import ToDoList from './ToDoList'
+
+export default {
+    name: 'ToDoListIndex',
+    components: {
+        Loader, InputField, ToDoList
+    },
+    data: function () {
+        return {
+            loading: true,
+            modal: false,
+            toDoLists: null,
+            name: '',
+            errors: null,
+        }
+    },
+    mounted() {
+        // eslint-disable-next-line no-undef
+        axios.get('/api/to-do-lists')
+            .then(res => {
+                this.toDoLists = res.data.data
+                this.loading = false
+            })
+            .catch(errorRes => {
+                this.loading = false
+                if (errorRes.response.status === 404) {
+                    this.$router.push('/')
+                }
+            })
+    },
+    methods: {
+        create: function () {
+            // eslint-disable-next-line no-undef
+            axios.post('/api/to-do-lists', {name: this.name})
+                .then(res => {
+                    console.log(res)
+                    this.modal = false
+                    this.name = ''
+                    this.toDoLists.push(res.data)
+                })
+                .catch(errorRes => {
+                    console.log('Internal Error, Unable to delete contact.' + errorRes)
+                })
+        }
+    }
+}
+</script>

resources/js/views/ToDoLists/ToDoListShow.vue

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

resources/js/views/User/ProfileUser.vue

@@ -30,7 +30,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-    import UploadableImage from "../../components/UploadableImage";
+import UploadableImage from '../../components/UploadableImage'
 
 export default {
     name: 'Profil',

resources/js/views/User/ShowUser.vue

@@ -11,13 +11,9 @@
 </template>
 
 <script>
-    import UploadableImage from "../../components/UploadableImage";
 
 export default {
     name: 'Profile',
-        components: {
-            UploadableImage
-        },
     data: function () {
         return {
             loading: true,
@@ -25,7 +21,8 @@
         }
     },
     mounted() {
-            axios.get('/api/users/' + this.$route.params.id)
+        // eslint-disable-next-line no-undef
+        axios.get('/api/users/' + this.$route.params.id) // eslint-disable-line no-undef-init
             .then(response => {
                 this.user = response.data.data
                 this.loading = false

resources/js/views/User/UserAdmin.vue

@@ -36,7 +36,7 @@
                 <transition name="fade">
                 <ul v-if="userListToggle"  class="box-toggle-content">
                     <Loader v-if="loading" />
-                <li v-else v-for="user in users">
+                    <li v-else v-for="(user, index) in users" :key="index">
                         <router-link :to="'/users/' + user.data.user_id">{{ user.data.attributes.name }}</router-link> - {{ user.data.attributes.email }} - {{ user.data.attributes.last_login }} | {{ user.data.attributes.is_admin }}
                     </li>
                 </ul>
@@ -48,11 +48,11 @@
 </template>
 
 <script>
-    import {mapGetters} from 'vuex';
+import {mapGetters} from 'vuex'
-    import Avatar from '../../components/Avatar';
+import Avatar from '../../components/Avatar'
-    import AlertBox from '../../components/AlertBox';
+import AlertBox from '../../components/AlertBox'
-    import InputField from '../../components/InputField';
+import InputField from '../../components/InputField'
-    import Loader from "../../components/Loader";
+import Loader from '../../components/Loader'
 
 export default {
     name: 'UserAdmin',
@@ -80,6 +80,7 @@
         })
     },
     mounted() {
+        // eslint-disable-next-line no-undef
         axios.get('/api/users')
             .then(response => {
                 this.users = response.data.data
@@ -87,11 +88,12 @@
             })
             .catch(error => {
                 this.loading = false
-                    console.log('Unable to fetch users.')
+                console.log('Unable to fetch users.' + error)
             })
     },
     methods: {
         addMember: function () {
+            // eslint-disable-next-line no-undef
             axios.post('/api/users', {name: this.form.name, email: this.form.email})
                 .then(res => {
                     this.form.name = ''

resources/sass/app.scss

@@ -26,7 +26,7 @@
 //
 //@import "pages/auth";
 //@import "pages/users";
-//@import "pages/memos";
+@import "pages/memos";
 //@import "pages/meteo";
 //@import "pages/games";
 //

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/sass/pages/memos.scss

@@ -1,3 +1,4 @@
+/*
 .memo {
 
     &-list {
@@ -81,3 +82,57 @@
         width: 100%;
     }
 }
+
+*/
+
+.memo-style {
+
+    h1,
+    h2,
+    h3,
+    h4 {
+        @apply font-bold;
+    }
+
+    h1 {
+        @apply text-4xl;
+    }
+
+    h2 {
+        @apply text-3xl;
+    }
+
+    h3 {
+        @apply text-2xl;
+    }
+
+    h4 {
+        @apply text-xl;
+    }
+
+    p {
+        @apply mb-2 mt-1;
+        text-indent: 2rem;
+    }
+
+    pre,
+    code {
+        @apply bg-gray-700 text-white p-1;
+    }
+
+    pre {
+        @apply my-2;
+    }
+
+    blockquote {
+        @apply bg-gray-300 italic p-2 mx-4 my-2;
+    }
+
+    ul {
+        @apply list-disc ml-8;
+    }
+
+    ol {
+        @apply list-decimal ml-8;
+    }
+}

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/svg/list.svg

@@ -0,0 +1,11 @@
+<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="170.667" width="42.667" height="42.667"/>
+	<rect x="0" y="85.333" width="42.667" height="42.667"/>
+	<rect x="0" y="256" width="42.667" height="42.667"/>
+	<rect x="85.333" y="85.333" width="298.667" height="42.667"/>
+	<rect x="85.333" y="170.667" width="298.667" height="42.667"/>
+	<rect x="85.333" y="256" width="298.667" height="42.667"/>
+</g>
+</svg>

resources/views/auth/login.blade.php

@@ -1,14 +1,15 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="auth p-2">
+<div class="bg-orange-200 mx-auto h-screen flex justify-center items-center">
-    <div class="title-page mb-2">{{ __('Login') }}</div>
+    <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>
+            <label for="email" class="mb-2 font-bold uppercase">{{ __('E-Mail') }}</label>
-        <div class="mb-2">
+            <div class="mb-4">
-            <input id="email" type="email" class="@error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
+                <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>
+            <label for="password" class="mb-2 font-bold uppercase">{{ __('Password') }}</label>
-        <div class="mb-2">
+            <div class="mb-4">
-            <input id="password" type="password" class="@error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
+                <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">
+            <div class="flex justify-between">
-            <button type="submit" class="btn-primary px-3">
+                <button type="submit" class="btn-primary">
                     {{ __('Login') }}
                 </button>
                 @if (Route::has('password.request'))
@@ -46,6 +47,6 @@
                 @endif
             </div>
         </form>
-
+    </div>
 </div>
 @endsection

routes/api.php

@@ -31,5 +31,6 @@ Route::middleware('auth:api')->group(function () {
 
     Route::post('/images/users/{users}', 'ImageController@users');
     Route::post('/images/memos/{memo}', 'ImageController@memos');
+    Route::patch('/to-do-lists/{toDoList}/to-do/{toDo}/change', 'ToDoController@changeOrder');
 
 });

tests/Feature/ToDoItemsTest.php

@@ -34,7 +34,7 @@ class ToDoItemsTest extends TestCase
                 'attributes' => [
                     'data' => [
                         'name' => $toDo->name,
-                        'order' => 0,
+                        'order' => 1,
                     ]
                 ],
             ],
@@ -78,6 +78,11 @@ class ToDoItemsTest extends TestCase
                                 [
                                     'data' => [
                                         'to_do_id' => $toDoList->toDos[0]->id,
+                                        'attributes' => [
+                                            'data' => [
+                                                'name' => $toDoList->toDos[0]->name,
+                                            ]
+                                        ]
                                     ]
                                 ]
                             ],
@@ -89,6 +94,87 @@ class ToDoItemsTest extends TestCase
         ]);
     }
 
+    /** @test */
+    public function a_new_to_do_must_have_order_of_the_previous_to_do()
+    {
+        $this->actingAs($user = factory(User::class)->create(), 'api');
+        $toDoList = factory(ToDoList::class)->create(['id' => 123, 'user_id' => $user->id]);
+        $toDo = factory(ToDo::class)->create(['to_do_list_id' => 123]);
+
+        $response = $this->post('/api/to-do-lists/123/to-do', [
+            'name' => 'New To Do'
+        ])->assertStatus(201);
+
+        $toDo = ToDo::first();
+        $newToDo = ToDo::orderBy('id', 'desc')->first();
+
+        $this->assertEquals('New To Do', $newToDo->name);
+        $this->assertEquals($toDo->order + 1, $newToDo->order);
+    }
+
+    /** @test */
+    public function a_second_to_do_as_next_order_of_list()
+    {
+        $this->actingAs($user = factory(User::class)->create(), 'api');
+        $toDoList = factory(ToDoList::class)->create(['id' => 123, 'user_id' => $user->id]);
+        $this->post('/api/to-do-lists/123/to-do', ['name' => 'Test name to do']);
+        $this->post('/api/to-do-lists/123/to-do', ['name' => 'Test 2 name to do']);
+        $this->post('/api/to-do-lists/123/to-do', ['name' => 'Test 3 name to do']);
+
+        $response = $this->get('/api/to-do-lists/' . $toDoList->id );
+
+        $response->assertJson([
+            'data' => [
+                'to_do_list_id' => $toDoList->id,
+                'attributes' => [
+                    'data' => [
+                        'name' => $toDoList->name,
+                        'last_updated' => $toDoList->updated_at->diffForHumans(),
+                        'to_dos' => [
+                            'data' => [
+                                [
+                                    'data' => [
+                                        'to_do_id' => $toDoList->toDos[0]->id,
+                                        'attributes' => [
+                                            'data' => [
+                                                'name' => $toDoList->toDos[0]->name,
+                                                'order' => 1,
+                                            ]
+                                        ]
+                                    ],
+
+                                ],
+                                [
+                                    'data' => [
+                                        'to_do_id' => $toDoList->toDos[1]->id,
+                                        'attributes' => [
+                                            'data' => [
+                                                'name' => $toDoList->toDos[1]->name,
+                                                'order' => 2,
+                                            ]
+                                        ]
+                                    ]
+                                ],
+                                [
+                                    'data' => [
+                                        'to_do_id' => $toDoList->toDos[2]->id,
+                                        'attributes' => [
+                                            'data' => [
+                                                'name' => $toDoList->toDos[2]->name,
+                                                'order' => 3,
+                                            ]
+                                        ]
+                                    ]
+                                ]
+                            ],
+                            'to_dos_count' => 3,
+                        ]
+                    ]
+                ],
+            ]
+        ]);
+    }
+
     /** @test */
     public function a_to_do_can_be_patch()
     {
@@ -101,7 +187,6 @@ class ToDoItemsTest extends TestCase
         ]);
 
         $toDoList = $toDoList->fresh();
-//        $toDoList = ToDoList::first();
 
         $response = $this->patch('/api/to-do-lists/123/to-do/'. $toDoList->toDos[0]->id, [
             'name' => 'To Do update'
@@ -121,4 +206,77 @@ class ToDoItemsTest extends TestCase
             ]
         ]);
     }
+
+    /** @test */
+    public function only_the_owner_can_patch_the_to_do()
+    {
+        $user = factory(User::class)->create();
+        $toDoList = factory(ToDoList::class)->create(['id' => 123, 'user_id' => $user->id]);
+        $toDo = factory(ToDo::class)->create(['to_do_list_id' => 123, 'name' => 'Test name to do']);
+
+        $this->actingAs($anotherUser = factory(User::class)->create(), 'api');
+
+        $this->patch('/api/to-do-lists/'. $toDoList->id .'/to-do/'. $toDoList->toDos[0]->id, ['name' => 'Name changed'])
+            ->assertStatus(403);
+    }
+
+    /** @test */
+    public function a_to_do_can_changer_of_order()
+    {
+        $this->withoutExceptionHandling();
+        $this->actingAs($user = factory(User::class)->create(), 'api');
+        $toDoList = factory(ToDoList::class)->create(['id' => 123, 'user_id' => $user->id]);
+        $this->post('/api/to-do-lists/123/to-do', ['name' => 'Test name to do']);
+        $toDoReplaced = $this->post('/api/to-do-lists/123/to-do', ['name' => 'Test 2 name to do']);
+        $this->post('/api/to-do-lists/123/to-do', ['name' => 'Test 3 name to do']);
+        $this->post('/api/to-do-lists/123/to-do', ['name' => 'Test 4 name to do']);
+        $todoMove = $this->post('/api/to-do-lists/123/to-do', ['name' => 'Test 5 name to do']);
+
+
+        $response = $this->patch('/api/to-do-lists/'. $toDoList->id .'/to-do/'. $todoMove['data']['to_do_id'] .'/change', ['new-order' => $toDoReplaced['data']['attributes']['data']['order']])
+            ->assertStatus(200)
+            ->assertJson([
+                'data' => [
+                    'to_do_id' => $todoMove['data']['to_do_id'],
+                    'attributes' => [
+                        'data' => [
+                            'order' => $toDoReplaced['data']['attributes']['data']['order'],
+                        ]
+                    ]
+                ],
+                'links' => [
+                    'self' => url('/to-do-lists/'. $toDoList->id),
+                ]
+            ]);
+    }
+
+    /** @test */
+    public function a_to_do_list_can_be_delete()
+    {
+        $this->withoutExceptionHandling();
+        $this->actingAs($user = factory(User::class)->create(), 'api');
+
+        $toDoList = factory(ToDoList::class)->create(['user_id' => $user->id]);
+        $toDo = factory(ToDo::class)->create(['to_do_list_id' => $toDoList->id]);
+
+        $response = $this->delete('/api/to-do-lists/'. $toDoList->id . '/to-do/' . $toDo->id);
+
+        $this->assertCount(0, ToDo::all());
+
+        $response->assertStatus(204);
+    }
+
+    /** @test */
+    public function only_the_owner_can_delete_the_to_do_list()
+    {
+        $user = factory(User::class)->create();
+        $toDoList = factory(ToDoList::class)->create(['user_id' => $user->id]);
+        $toDo = factory(ToDo::class)->create(['to_do_list_id' => $toDoList->id]);
+
+        $this->actingAs($anotherUser = factory(User::class)->create(), 'api');
+
+        $response = $this->delete('/api/to-do-lists/'. $toDoList->id . '/to-do/' . $toDo->id);
+
+        $response->assertStatus(403);
+    }
 }

tests/Feature/ToDoListsTest.php

@@ -88,6 +88,50 @@ class ToDoListsTest extends TestCase
         $response->assertStatus(403);
     }
 
+    /** @test */
+    public function a_user_can_retrueved_all_this_to_do_lists()
+    {
+        $this->actingAs($user = factory(User::class)->create(), 'api');
+        $toDoListOne = factory(ToDoList::class)->create(['user_id' => $user->id]);
+        $toDoListTwo = factory(ToDoList::class)->create(['user_id' => $user->id]);
+
+        $response = $this->get('/api/to-do-lists');
+
+        $response->assertJson([
+            'data' => [
+                [
+                    'data' => [
+                        'to_do_list_id' => $toDoListOne->id,
+                        'attributes' => [
+                            'data' => [
+                                'name' => $toDoListOne->name,
+                                'last_updated' => $toDoListOne->updated_at->diffForHumans(),
+                            ]
+                        ],
+                    ],
+                    'links' => [
+                        'self' => $toDoListOne->path(),
+                    ]
+                ],
+                [
+                    'data' => [
+                        'to_do_list_id' => $toDoListTwo->id,
+                        'attributes' => [
+                            'data' => [
+                                'name' => $toDoListTwo->name,
+                                'last_updated' => $toDoListTwo->updated_at->diffForHumans(),
+                            ]
+                        ],
+                    ],
+                    'links' => [
+                        'self' => $toDoListTwo->path(),
+                    ]
+                ]
+            ]
+
+        ]);
+    }
+
     /** @test */
     public function a_to_do_list_can_be_patch()
     {