Merge branch 'master' into 'production'

change on memos display & inputs

See merge request Romulus21/portal!21

.gitignore

@@ -15,3 +15,6 @@ npm-debug.log
 yarn-error.log
 
 package-lock.json
+.idea/
+config/web-tinker.php
+public/vendor/web-tinker

composer.json

@@ -22,7 +22,8 @@
         "fzaninotto/faker": "^1.9.1",
         "mockery/mockery": "^1.3.1",
         "nunomaduro/collision": "^4.1",
-        "phpunit/phpunit": "^8.5"
+        "phpunit/phpunit": "^8.5",
+        "spatie/laravel-web-tinker": "^1.7"
     },
     "config": {
         "optimize-autoloader": true,

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "d0ff9b31e0a9c20da145f26712575e63",
+    "content-hash": "bc656763558a52327994265003e73f70",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -792,6 +792,7 @@
                     "email": "jakub.onderka@gmail.com"
                 }
             ],
+            "abandoned": "php-parallel-lint/php-console-color",
             "time": "2018-09-29T17:23:10+00:00"
         },
         {
@@ -838,6 +839,7 @@
                 }
             ],
             "description": "Highlight PHP code in terminal",
+            "abandoned": "php-parallel-lint/php-console-highlighter",
             "time": "2018-09-29T18:48:56+00:00"
         },
         {
@@ -6226,6 +6228,68 @@
             "homepage": "https://github.com/sebastianbergmann/version",
             "time": "2016-10-03T07:35:21+00:00"
         },
+        {
+            "name": "spatie/laravel-web-tinker",
+            "version": "1.7.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/spatie/laravel-web-tinker.git",
+                "reference": "be6f2dedf85beede027112dee630b391c8dd49ee"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/spatie/laravel-web-tinker/zipball/be6f2dedf85beede027112dee630b391c8dd49ee",
+                "reference": "be6f2dedf85beede027112dee630b391c8dd49ee",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/cookie": "^5.8|^6.0|^7.0",
+                "illuminate/session": "^5.8|^6.0|^7.0",
+                "illuminate/support": "^5.8|^6.0|^7.0",
+                "laravel/tinker": "^1.0|^2.0",
+                "php": "^7.2"
+            },
+            "require-dev": {
+                "orchestra/testbench": "^3.8|^4.0|^5.0",
+                "phpunit/phpunit": "^8.0|^9.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Spatie\\WebTinker\\WebTinkerServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Spatie\\WebTinker\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Freek Van der Herten",
+                    "email": "freek@spatie.be",
+                    "homepage": "https://spatie.be",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Artisan Tinker in your browser",
+            "homepage": "https://github.com/spatie/laravel-web-tinker",
+            "keywords": [
+                "Tinker",
+                "debug",
+                "development",
+                "laravel",
+                "spatie",
+                "web-tinker"
+            ],
+            "time": "2020-03-04T20:02:26+00:00"
+        },
         {
             "name": "theseer/tokenizer",
             "version": "1.1.3",

resources/js/components/InputField.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="relative">
+    <div class="relative mt-1">
         <label :for="name" class="pb-1">{{ label }}</label>
         <input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="errorClassObject()">
-        <p class="text-alert" v-text="errorMessage()">Error Here</p>
+        <p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
     </div>
 </template>
 
@@ -10,9 +10,24 @@
 
     export default {
         name: "InputField",
-        props: [
+        props: {
-            'name', 'type', 'label', 'placeholder', 'errors', 'data',
+            name: {
-        ],
+                type: String,
+                required: true
+            },
+            type: {
+                type: String,
+                default: 'text'
+            },
+            label:  String,
+            placeholder: String,
+            required: {
+                type: Boolean,
+                default: false
+            },
+            errors: Object,
+            data: String,
+        },
         data: function () {
             return {
                 value: ''
@@ -20,12 +35,12 @@
         },
         computed: {
             hasError: function () {
-                return this.errors && this.errors[this.name] && this.errors[this.name].length > 0
+                return this.required && this.errors && this.errors[this.name] && this.errors[this.name].length > 0
             }
         },
         methods: {
             updateField: function () {
-                this.clearErrors(this.name)
+                this.clearErrors(this.name);
                 this.$emit('update:field', this.value)
             },
             errorMessage: function () {

resources/js/components/TextAreaField.vue

@@ -1,19 +1,32 @@
 <template>
-    <div class="relative">
+    <div class="relative mt-1">
         <label v-if="label" :for="name" class="pb-1">{{ label }}</label>
-        <textarea :id="name" type="text" v-model="value" @input="updateField()" :class="errorClassObject()" class="p-1">
+        <textarea :id="name" type="text" v-model="value" :placeholder="placeholder" @input="updateField()" :class="errorClassObject()" class="p-1">{{ data }}</textarea>
-            {{ placeholder }}
+        <p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
-        </textarea>
-        <p class="text-alert" v-text="errorMessage()">Error Here</p>
     </div>
 </template>
 
 <script>
     export default {
         name: "TextAreaField",
-        props: [
+        props: {
-            'name', 'label', 'placeholder', 'errors', 'data',
+            name: {
-        ],
+                type: String,
+                required: true
+            },
+            type: {
+                type: String,
+                default: 'text'
+            },
+            label:  String,
+            placeholder: String,
+            required: {
+                type: Boolean,
+                default: false
+            },
+            errors: Object,
+            data: String,
+        },
         data: function () {
             return {
                 value: ''
@@ -21,12 +34,12 @@
         },
         computed: {
             hasError: function () {
-                return this.errors && this.errors[this.name] && this.errors[this.name].length > 0
+                return this.required && this.errors && this.errors[this.name] && this.errors[this.name].length > 0
             }
         },
         methods: {
             updateField: function () {
-                this.clearErrors(this.name)
+                this.clearErrors(this.name);
                 this.$emit('update:field', this.value)
             },
             errorMessage: function () {
@@ -52,7 +65,3 @@
         }
     }
 </script>
-
-<style scoped>
-
-</style>

resources/js/views/Memo/MemoCreate.vue

@@ -5,10 +5,10 @@
             <button @click="$router.back()" class="btn-alert mr-1">Cancel</button>
         </div>
         <form @submit.prevent="submitForm">
-            <InputField name="name" label="Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" />
+            <InputField name="name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
-            <TextAreaField class="memo-text-area" name="memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" />
+            <TextAreaField class="memo-text-area" name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
 
-            <div class="flex-end">
+            <div class="flex-end mt-1">
                 <button class="btn-primary">Add New Memo</button>
             </div>
         </form>

resources/js/views/Memo/MemoEdit.vue

@@ -5,10 +5,10 @@
             <button class="btn-alert mr-1">Cancel</button>
         </div>
         <form @submit.prevent="submitForm">
-            <InputField name="name" :data="form.name" label="Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" />
+            <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" @update:field="form.memo = $event" :errors="errors" />
+            <TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
 
-            <div class="flex-end">
+            <div class="flex-end mt-1">
                 <button class="btn-primary">Save</button>
             </div>
 

resources/js/views/Memo/MemoIndex.vue

@@ -9,12 +9,10 @@
             <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" class="card">
+            <router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="card">
-                <router-link :to="'/memos/' + memo.data.memo_id">
+                <h1>{{ memo.data.name }}</h1>
-                    <h1>{{ memo.data.name }}</h1>
+                <div class="memo-date">{{ memo.data.last_updated }}</div>
-                    <div class="memo-date">{{ memo.data.last_updated }}</div>
+            </router-link>
-                </router-link>
-            </div>
         </div>
     </div>
 </template>

resources/sass/app.scss

@@ -8,6 +8,7 @@
 
 @import "components/btn";
 @import "components/elements";
+@import "components/events";
 @import "components/main";
 @import "components/nav";
 @import "components/topbar";

resources/sass/components/events.scss

@@ -0,0 +1,7 @@
+.text-alert {
+    color: $error;
+}
+
+.error-field {
+    border-color: $error;
+}

resources/sass/pages/memos.scss

@@ -58,7 +58,7 @@
     }
 
     a {
-        color: $greyLight;
+        color: $mediumDark;
 
         &:hover {
             text-decoration: underline;

resources/sass/setup/_containers.scss

@@ -11,13 +11,9 @@
     padding: 1rem;
     box-shadow: 1px 1px 2px $grey;
     border-radius: 2px;
-
+    text-decoration: none;
-    a {
+    flex-direction: column;
-        display: flex;
+    justify-content: space-between;
-        flex-direction: column;
-        justify-content: space-between;
-        text-decoration: none;
-    }
 }