Romain/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change on memos display & inputs

Browse Source
This commit is contained in:
Romulus21
2020-04-11 12:27:20 +02:00
parent d844bd8518
commit e01ad206fe
12 changed files with 137 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

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

3
composer.json
View File

@@ -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,

66
composer.lock generated
View File

@@ -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",

29
resources/js/components/InputField.vue
View File

@@ -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: [
'name', 'type', 'label', 'placeholder', 'errors', 'data',
],
props: {
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 () {

37
resources/js/components/TextAreaField.vue
View File

@@ -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">
{{ placeholder }}
</textarea>
<p class="text-alert" v-text="errorMessage()">Error Here</p>
<textarea :id="name" type="text" v-model="value" :placeholder="placeholder" @input="updateField()" :class="errorClassObject()" class="p-1">{{ data }}</textarea>
<p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
</div>
</template>
<script>
export default {
name: "TextAreaField",
props: [
'name', 'label', 'placeholder', 'errors', 'data',
],
props: {
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>

6
resources/js/views/Memo/MemoCreate.vue
View File

@@ -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" />
<TextAreaField class="memo-text-area" name="memo" placeholder="Your Memo" @update:field="form.memo = $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" 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>

6
resources/js/views/Memo/MemoEdit.vue
View File

@@ -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" />
<TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" @update:field="form.memo = $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" 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>

10
resources/js/views/Memo/MemoIndex.vue
View File

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

1
resources/sass/app.scss vendored
View File

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

7
resources/sass/components/events.scss vendored Normal file
View File

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

2
resources/sass/pages/memos.scss vendored
View File

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

10
resources/sass/setup/_containers.scss vendored
View File

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