start add Memos

resources/js/components/SideBar.vue

@@ -1,6 +1,7 @@
 <template>
     <aside>
-        Menu
+        <div>Menu</div>
+        <router-link to="/memos">Memos</router-link>
     </aside>
 </template>
 

resources/js/components/TextAreaField.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="relative pb-2">
+        <label :for="name" class="form-label absolute pt-1">{{ label }}</label>
+        <textarea :id="name" type="text" v-model="value" @input="updateField()" :class="errorClassObject()" class="form-textarea pt-4 pb-1">
+            {{ placeholder }}
+        </textarea>
+        <p class="text-alert" v-text="errorMessage()">Error Here</p>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "TextAreaField",
+        props: [
+            'name', 'label', 'placeholder', 'errors', 'data',
+        ],
+        data: function () {
+            return {
+                value: ''
+            }
+        },
+        computed: {
+            hasError: function () {
+                return this.errors && this.errors[this.name] && this.errors[this.name].length > 0
+            }
+        },
+        methods: {
+            updateField: function () {
+                this.clearErrors(this.name)
+                this.$emit('update:field', this.value)
+            },
+            errorMessage: function () {
+                if (this.hasError) {
+                    return this.errors[this.name][0]
+                }
+            },
+            clearErrors: function () {
+                if (this.hasError) {
+                    this.errors[this.name] = null
+                }
+            },
+            errorClassObject: function () {
+                return {
+                    'error-field': this.hasError
+                }
+            }
+        },
+        watch: {
+            data: function (val) {
+                this.value = val
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

resources/js/router.js

@@ -4,6 +4,10 @@ import Home from "./views/Home"
 import Profil from "./views/User/UserProfil";
 import DashBoard from "./views/DashBoard";
 import CssTesteur from "./views/CssTesteur";
+import MemoIndex from "./views/Memo/MemoIndex";
+import MemoCreate from "./views/Memo/MemoCreate";
+import MemoShow from "./views/Memo/MemoShow";
+import MemoEdit from "./views/Memo/MemoEdit";
 
 Vue.use(VueRouter)
 
@@ -28,5 +32,19 @@ export default new VueRouter({
             path: '/css-testeur', name: 'css-testeur', component: CssTesteur,
             meta: { title: 'css-testeur'}
         },
+
+        {
+            path: '/memos', component: MemoIndex,
+            meta: {title: 'Memos'}
+        }, {
+            path: '/memos/create', component: MemoCreate,
+            meta: {title: 'Add New Memo'}
+        }, {
+            path: '/memos/:id', component: MemoShow,
+            meta: {title: 'Details for Memo'}
+        }, {
+            path: '/memos/:id/edit', component: MemoEdit,
+            meta: {title: 'Edit Memo'}
+        },
     ]
 })

resources/js/views/Memo/MemoCreate.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <form @submit.prevent="submitForm">
+            <InputField name="name" label="Memo Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" />
+            <TextAreaField name="memo" label="Memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" />
+
+            <div class="flex-end">
+                <button @click="$router.back()" class="btn-alert mr-3">Cancel</button>
+                <button class="btn-primary">Add New Memo</button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+    import InputField from "../../components/InputField";
+    import TextAreaField from "../../components/TextAreaField";
+
+    export default {
+        name: "MemoCreate",
+        components: {
+            InputField, TextAreaField
+        },
+        data: function () {
+            return {
+                form: {
+                    'name': '',
+                    'memo': '',
+                },
+                errors: null,
+            }
+        },
+        methods: {
+            submitForm: function () {
+                axios.post('/api/memos', this.form)
+                    .then(response => {
+                        this.$router.push(response.data.links.self)
+                    })
+                    .catch(errors => {
+                        this.errors = errors.response.data.errors
+                    })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

resources/js/views/Memo/MemoEdit.vue

@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <div class="flex-between">
+            <a href="#" @click="$router.back()" class="link">
+                < Back
+            </a>
+        </div>
+        <form @submit.prevent="submitForm">
+            <InputField name="name" :data="form.name" label="Memo Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" />
+            <TextAreaField name="memo" :data="form.memo" label="Memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" />
+
+            <div class="flex-end">
+                <button class="btn-alert mr-3">Cancel</button>
+                <button class="btn-primary">Save</button>
+            </div>
+
+        </form>
+    </div>
+</template>
+
+<script>
+    import InputField from "../../components/InputField";
+    import TextAreaField from "../../components/TextAreaField";
+
+    export default {
+        name: "MemoEdit",
+        components: {
+            InputField, TextAreaField
+        },
+        data: function () {
+            return {
+                form: {
+                    'name': '',
+                    'memo': '',
+                },
+                errors: null,
+                loading: true,
+            }
+        },
+        methods: {
+            submitForm: function () {
+                axios.patch('/api/memos/' + this.$route.params.id, this.form)
+                    .then(response => {
+                        this.$router.push(response.data.links.self)
+                    })
+                    .catch(errors => {
+                        this.errors = errors.response.data.errors
+                    })
+            }
+        },
+        mounted() {
+            axios.get('/api/memos/' + this.$route.params.id)
+                .then(response => {
+                    this.form = response.data.data
+                    this.loading = false
+                })
+                .catch(error => {
+                    this.loading = false
+                    if (error.response.status === 404) {
+                        this.$router.back()
+                    }
+                })
+        }
+    }
+</script>

resources/js/views/Memo/MemoIndex.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <div class="flex-between flex-center mb-1">
+            <a href="#" @click="$router.back()" class="link">
+                < Back
+            </a>
+            <router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
+        </div>
+        <div v-if="loading">> Loading...</div>
+        <div v-else>
+            <div v-if="memos.lenght === 0">
+                <p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
+            </div>
+            <div v-for="memo in memos">
+                <router-link :to="'/memos/' + memo.data.memo_id" class="link-large relative flex-center p-2">
+                    <h1>{{ memo.data.name }}</h1>
+                    <div class="memo-date">{{ memo.data.last_updated }}</div>
+                </router-link>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "MemoIndex",
+        data: function () {
+            return {
+                loading: true,
+                memos: null,
+            }
+        },
+        mounted() {
+            axios.get('/api/memos')
+                .then(response => {
+                    this.memos = response.data.data
+                    this.loading = false
+                })
+                .catch(error => {
+                    this.loading = false
+                    alert('Unable to fetch memos.')
+                })
+        }
+    }
+</script>

resources/js/views/Memo/MemoShow.vue

@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <div v-if="loading">> Loading...</div>
+        <div v-else>
+            <div class="flex-between mb-2">
+                <a href="#" @click="$router.back()" class="link">
+                    < Back
+                </a>
+                <div class="relative">
+                    <router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-success mr-1">Edit</router-link>
+                    <a href="#" @click="modal = ! modal" class="btn-alert">Delete</a>
+                    <div v-if="modal" class="absolute modal mt-2">
+                        <p>Are you sure you want to delete this record ?</p>
+                        <div class="flex-end flex-center mt-2">
+                            <button @click="modal = ! modal" class="btn mr-2">Cancel</button>
+                            <button @click="destroy" class="btn-alert-strong">Delete</button>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="modal" @click="modal = ! modal" class="modal-background"></div>
+            </div>
+<!--            <TagBox :memo="memo" />-->
+            <p class="title-section pt-3">Memo</p>
+            <h1 class="memo-title">{{ memo.name }}</h1>
+            <p class="memo-style pt-1" v-html="memoMarkdown"> </p>
+            <div class="memo-change my-2 p-1">@last update : {{ memo.last_updated }}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+    // import TagBox from "../Tag/TagBox";
+    let MarkdownIt = require('markdown-it'),
+        md = new MarkdownIt();
+
+    export default {
+        name: "MemoShow",
+        components: {
+            // TagBox
+        },
+        data: function () {
+            return {
+                loading: true,
+                modal: false,
+                memo: null,
+            }
+        },
+        computed: {
+            memoMarkdown: function () {
+                return md.render(this.memo.memo)
+            }
+        },
+        methods: {
+            destroy: function () {
+                axios.delete('/api/memos/' + this.$route.params.id)
+                    .then(response => {
+                        this.$router.push('/memos')
+                    })
+                    .catch(error => {
+                        alert('Internal Error, Unable to delete contact.')
+                    })
+            }
+        },
+        mounted() {
+            axios.get('/api/memos/' + this.$route.params.id)
+                .then(response => {
+                    this.memo = response.data.data
+                    this.loading = false
+                })
+                .catch(error => {
+                    this.loading = false
+                    if (error.response.status === 404) {
+                        this.$router.push('/memos')
+                    }
+                })
+        }
+    }
+</script>

resources/sass/setup/_positions.scss

@@ -42,7 +42,7 @@ $base: 1rem;
     justify-content: space-between;
 }
 
-.width-full {
+.w-100{
     width: 100%;
 }
 

resources/views/auth/passwords/email.blade.php

@@ -1,47 +1,37 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <div class="card">
-                <div class="card-header">{{ __('Reset Password') }}</div>
+<div class="auth p-2">
+    <div class="title-page mb-2">{{ __('Reset Password') }}</div>
 
-                <div class="card-body">
-                    @if (session('status'))
-                        <div class="alert alert-success" role="alert">
-                            {{ session('status') }}
-                        </div>
-                    @endif
 
-                    <form method="POST" action="{{ route('password.email') }}">
-                        @csrf
-
-                        <div class="form-group row">
-                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="email" type="email" class="form-control @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>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-
-                        <div class="form-group row mb-0">
-                            <div class="col-md-6 offset-md-4">
-                                <button type="submit" class="btn btn-primary">
-                                    {{ __('Send Password Reset Link') }}
-                                </button>
-                            </div>
-                        </div>
-                    </form>
+        <div class="card-body">
+            @if (session('status'))
+                <div class="alert alert-success" role="alert">
+                    {{ session('status') }}
                 </div>
-            </div>
+            @endif
+
+            <form method="POST" action="{{ route('password.email') }}">
+                @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>
+                    @error('email')
+                    <span class="invalid-feedback" role="alert">
+                        <strong>{{ $message }}</strong>
+                    </span>
+                    @enderror
+                </div>
+
+                <div class="flex-between">
+                    <button type="submit" class="btn-primary px-3 w-100">
+                        {{ __('Send Password Reset Link') }}
+                    </button>
+                </div>
+            </form>
         </div>
-    </div>
+
 </div>
 @endsection

resources/views/auth/passwords/reset.blade.php

@@ -1,65 +1,46 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <div class="card">
-                <div class="card-header">{{ __('Reset Password') }}</div>
+<div class="auth p-2">
+    <div class="title-page mb-2">{{ __('Reset Password') }}</div>
 
-                <div class="card-body">
-                    <form method="POST" action="{{ route('password.update') }}">
-                        @csrf
+    <form method="POST" action="{{ route('password.update') }}">
+        @csrf
 
-                        <input type="hidden" name="token" value="{{ $token }}">
+        <input type="hidden" name="token" value="{{ $token }}">
 
-                        <div class="form-group row">
-                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ $email ?? old('email') }}" required autocomplete="email" autofocus>
-
-                                @error('email')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-
-                        <div class="form-group row">
-                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
-
-                                @error('password')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-
-                        <div class="form-group row">
-                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
-                            </div>
-                        </div>
-
-                        <div class="form-group row mb-0">
-                            <div class="col-md-6 offset-md-4">
-                                <button type="submit" class="btn btn-primary">
-                                    {{ __('Reset Password') }}
-                                </button>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
+        <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>
+            @error('email')
+                <span class="invalid-feedback" role="alert">
+                    <strong>{{ $message }}</strong>
+                </span>
+            @enderror
         </div>
-    </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">
+
+            @error('password')
+            <span class="invalid-feedback" role="alert">
+                <strong>{{ $message }}</strong>
+            </span>
+            @enderror
+        </div>
+
+        <label for="password-confirm" class="mb-1">{{ __('Confirm Password') }}</label>
+        <div class="mb-2">
+            <input id="password-confirm" type="password" name="password_confirmation" required autocomplete="new-password">
+        </div>
+
+        <div class="flex-between">
+            <button type="submit" class="btn-primary px-3 w-100">
+                {{ __('Reset Password') }}
+            </button>
+        </div>
+    </form>
+
 </div>
 @endsection