Generate create note

Author: hamog

app/Http/Controllers/NoteController.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use App\Note;
+use App\User;
 use Illuminate\Http\Request;
 
 class NoteController extends Controller
@@ -24,7 +25,7 @@ public function __construct(Note $note)
      */
     public function index()
     {
-        return $this->note->with('user')->get();
+        return $this->note->with('user')->latest()->get();
     }
 
     /**
@@ -40,13 +41,23 @@ public function create()
     /**
      * Store a newly created resource in storage.
      *
-     * @param  \Illuminate\Http\Request  $request
+     * @param  \Illuminate\Http\Request $request
+     * @param User $user
      * @return \Illuminate\Http\Response
      */
-    public function store(Request $request)
+    public function store(Request $request, User $user)
     {
-        $this->note->create($request->all());
-
+        //Validation
+        $this->validate($request, [
+            'name' => 'required',
+            'description' => 'required|min:10'
+        ]);
+        //Store note
+        $this->note->user_id = $user->inRandomOrder()->value('id');
+        $this->note->name = $request->name;
+        $this->note->description = $request->description;
+        $this->note->save();
+        //Response
         return response()->json([
             'message' => 'Note Created.'
         ]);

public/css/app.75af5814e06517a0a5bb.css renamed to public/css/app.8a420a94e364c9c91fce.css

@@ -1,4 +1,4 @@
 {
-  "/js/app.js": "/js/app.ba5a7c203864864cd0f7.js",
-  "/css/app.css": "/css/app.75af5814e06517a0a5bb.css"
+  "/js/app.js": "/js/app.526e6b4882a4fcd54afe.js",
+  "/css/app.css": "/css/app.8a420a94e364c9c91fce.css"
 }

public/js/app.ba5a7c203864864cd0f7.js renamed to public/js/app.526e6b4882a4fcd54afe.js

@@ -1,19 +1,9 @@
 
-/**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
-
 import  './bootstrap';
 
 import router from './routes';
 
-/**
- * Next, we will create a fresh Vue application instance and attach it to
- * the page. Then, you may begin adding components to this application
- * or customize the JavaScript scaffolding to fit your unique needs.
- */
+import './components';
 
 const app = new Vue({
     el: '#app',

public/mix-manifest.json

@@ -1,11 +1,6 @@
 import loadash from 'lodash';
 window._ = loadash;
 
-/**
- * We'll load jQuery and the Bootstrap jQuery plugin which provides support
- * for JavaScript based Bootstrap features such as modals and tabs. This
- * code may be modified to fit the specific needs of your application.
- */
 import jQuery from 'jquery';
 
 window.$ = window.jQuery = jQuery;
@@ -26,12 +21,6 @@ window.Vue = Vue;
 
 Vue.use(VueRouter);
 
-/**
- * We'll load the axios HTTP library which allows us to easily issue requests
- * to our Laravel back-end. This library automatically handles sending the
- * CSRF token as a header based on the value of the "XSRF" token cookie.
- */
-
 window.axios = axios;
 
 window.axios.defaults.headers.common = {

resources/assets/js/app.js

@@ -0,0 +1,3 @@
+import Modal from './components/Modal.vue';
+
+Vue.component('modal', Modal);

resources/assets/js/bootstrap.js

@@ -0,0 +1,70 @@
+<template>
+    <div>
+        <!-- Button trigger modal -->
+        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+            Create New Note
+        </button>
+
+        <!-- Modal -->
+        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                        <h4 class="modal-title" id="myModalLabel">Create New Note</h4>
+                    </div>
+                    <div class="modal-body">
+                        <p class="alert alert-success" v-if="success" v-text="success"></p>
+                        <form action="/note" method="post" @submit.prevent="createNote" @keydown="clearError($event.target.name)">
+                            <div :class="['form-group', errors.name ? 'has-error' : '']">
+                                <label for="name">Note Name</label>
+                                <input type="text" name="name" id="name" class="form-control" v-model="note.name">
+
+                                <span class="help text-danger" v-if="errors.name">{{ errors.name[0] }}</span>
+                            </div>
+                            <div :class="['form-group', errors.description ? 'has-error' : '']">
+                                <label for="description">Note Description</label>
+                                <textarea name="description" id="description" class="form-control" v-model="note.description"></textarea>
+
+                                <span class="help text-danger" v-if="errors.description">{{ errors.description[0] }}</span>
+                            </div>
+                            <button type="submit" class="btn btn-primary">Create</button>
+                        </form>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data: function () {
+            return {
+                note: {
+                    name: '',
+                    description: ''
+                },
+                errors: [],
+                success: ''
+            }
+        },
+        methods: {
+            createNote: function () {
+                let data = this.note;
+
+                axios.post('/note', data)
+                    .then(response => this.success = response.data.message)
+                    .catch(error => this.errors = error.response.data);
+
+                this.note = { name: '', description: '' };
+            },
+            clearError: function (field) {
+                delete this.errors[field];
+            }
+        }
+    }
+</script>

resources/assets/js/components.js

@@ -4,6 +4,7 @@
         <ul>
             <li v-for="note in notes">{{ note.name }} - <strong>{{ note.user.name }}</strong></li>
         </ul>
+        <modal></modal>
     </section>
 </template>
 
@@ -15,7 +16,7 @@
             }
         },
         created: function () {
-            axios.get('/api/note')
+            axios.get('/note')
                 .then(response => this.notes = response.data)
                 .catch(error => console.log(error.response.data));
         }

resources/assets/js/components/Modal.vue

@@ -16,4 +16,4 @@
 Route::middleware('auth:api')->get('/user', function (Request $request) {
     return $request->user();
 });
-Route::resource('note', 'NoteController');
+

resources/assets/js/components/views/Notes.vue

@@ -14,5 +14,5 @@
 Route::get('/', function () {
     return view('welcome');
 });
-
+Route::resource('note', 'NoteController');