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

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>