Skip to content
This repository was archived by the owner on Sep 10, 2019. It is now read-only.

Allow validation of the fields #38

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Allow validation of the fields #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9b5382b
Fix pressing enter in the form adds new row instead of submitting it
daniel-valchev-despark Jun 11, 2019
2260064
Allow validation of the fields
daniel-valchev-despark Jun 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/js/field.js
View file
Open in desktop

Large diffs are not rendered by default.

15 changes: 11 additions & 4 deletions resources/js/components/FormField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,17 @@
:index="index"
:field="field"
@delete-row="deleteRow"
:errors="childErrors"
></sub-field-row>
</draggable>

<button
type="button"
class="btn btn-default btn-primary"
@click.prevent="addNewRow"
v-text="addButtonText"
:class="{ 'cursor-not-allowed opacity-50': hasReachedMaximumRows }"
></button>

<p v-if="hasError" class="my-2 text-danger">
{{ firstError }}
</p>
</template>
</default-field>
</template>
Expand All @@ -32,6 +30,7 @@
import draggable from 'vuedraggable'
import {FormField, HandlesValidationErrors} from 'laravel-nova'
import SubFieldRow from './rows/SubFieldRow.vue';
import { Errors } from 'form-backend-validation'

export default {

Expand All @@ -50,6 +49,14 @@
props: ['resourceName', 'resourceId', 'field'],

computed: {
childErrors() {
if (this.hasError) {
return new Errors(this.firstError);
}

return new Errors();
},

addButtonText() {
return (this.field.add_button_text)
? this.field.add_button_text
Expand Down
8 changes: 5 additions & 3 deletions resources/js/components/rows/SubFieldRow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,15 @@
{{ field.heading + " #" + (index + 1) }}
</h3>
<component
v-for="(subField, index) in field.sub_fields"
v-for="(subField, fieldIndex) in field.sub_fields"
:is="`${subField.type}-sub-field`"
:key="index"
:key="fieldIndex"
:sub-field="subField"
v-model="value[subField.name]"
class="row-input"
:class="getInputLayout(subField)"
:errors="errors"
:attribute="field.attribute + '.' + index + '.' + subField.name"
></component>
</div>
</div>
Expand All @@ -49,7 +51,7 @@
TextareaSubField,
},

props: ['value', 'field', 'index'],
props: ['value', 'field', 'index', 'errors'],

computed:{
formLayout(){
Expand Down
40 changes: 28 additions & 12 deletions resources/js/components/sub-fields/EmailSubField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,43 @@
<template>
<div>
<input
:id="subField.name"
:name="subField.name"
type="email"
class="w-full form-control form-input form-input-bordered"
:value="value"
v-bind="subField.attributes"
:placeholder="subField.placeholder"
@input="$emit('input', $event.target.value)"
/>
<div>
<input
:id="subField.name"
:name="subField.name"
type="email"
class="w-full form-control form-input form-input-bordered"
:value="value"
v-bind="subField.attributes"
:placeholder="subField.placeholder"
@input="$emit('input', $event.target.value)"
:class="errorClasses"
/>
</div>
<p v-if="hasError" class="my-2 text-danger">
{{ firstError }}
</p>
</div>

</template>

<script>
import {HandlesValidationErrors} from 'laravel-nova'

export default {

mixins: [HandlesValidationErrors],

computed: {
fieldAttribute() {
return this.attribute
},
},

props: [
'subField',
'value'
'value',
'attribute'
],

}
</script>
</script>
40 changes: 28 additions & 12 deletions resources/js/components/sub-fields/NumberSubField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,43 @@
<template>
<div>
<input
:id="subField.name"
:name="subField.name"
type="number"
class="w-full form-control form-input form-input-bordered"
:value="value"
v-bind="subField.attributes"
:placeholder="subField.placeholder"
@input="$emit('input', $event.target.value)"
/>
<div>
<input
:id="subField.name"
:name="subField.name"
type="number"
class="w-full form-control form-input form-input-bordered"
:value="value"
v-bind="subField.attributes"
:placeholder="subField.placeholder"
@input="$emit('input', $event.target.value)"
:class="errorClasses"
/>
</div>
<p v-if="hasError" class="my-2 text-danger">
{{ firstError }}
</p>
</div>

</template>

<script>
import {HandlesValidationErrors} from 'laravel-nova'

export default {

mixins: [HandlesValidationErrors],

computed: {
fieldAttribute() {
return this.attribute
},
},

props: [
'subField',
'value'
'value',
'attribute'
]

}
</script>
</script>
63 changes: 38 additions & 25 deletions resources/js/components/sub-fields/SelectSubField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,58 @@
<template>
<div>
<select
:id="subField.name"
:name="subField.name"
class="w-full form-control form-select"
:value="value"
v-bind="subField.attributes"
@change="$emit('input', $event.target.value)">
<option
value=""
v-text="placeholder"
selected
disabled
></option>
<option
v-for="(label, name) in subField.options"
:value="name"
:selected="name == value"
v-text="label"
></option>
</select>
<div>
<select
:id="subField.name"
:name="subField.name"
class="w-full form-control form-select"
:class="errorClasses"
:value="value"
v-bind="subField.attributes"
@change="$emit('input', $event.target.value)">
<option
value=""
v-text="placeholder"
selected
disabled
></option>
<option
v-for="(label, name) in subField.options"
:value="name"
:selected="name == value"
v-text="label"
></option>
</select>
</div>
<p v-if="hasError" class="my-2 text-danger">
{{ firstError }}
</p>
</div>

</template>

<script>
import {HandlesValidationErrors} from 'laravel-nova'

export default {

props: [
'subField',
'value'
'value',
'attribute'
],

computed:{
placeholder(){
return (this.subField.placeholder === this.subField.label)
mixins: [HandlesValidationErrors],

computed: {
fieldAttribute() {
return this.attribute
},

placeholder() {
return !this.subField.placeholder
? this.__('Choose an option')
: this.subField.placeholder
}
}

}
</script>
41 changes: 28 additions & 13 deletions resources/js/components/sub-fields/TextSubField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,42 @@
<template>
<div>
<input
:id="subField.name"
:name="subField.name"
type="text"
class="w-full form-control form-input form-input-bordered"
:value="value"
v-bind="subField.attributes"
:placeholder="subField.placeholder"
@input="$emit('input', $event.target.value)"
/>
<div>
<input
:id="subField.name"
:name="subField.name"
type="text"
class="w-full form-control form-input form-input-bordered"
:class="errorClasses"
:value="value"
v-bind="subField.attributes"
:placeholder="subField.placeholder"
@input="$emit('input', $event.target.value)"
/>
</div>
<p v-if="hasError" class="my-2 text-danger">
{{ firstError }}
</p>
</div>

</template>

<script>
import {HandlesValidationErrors} from 'laravel-nova'

export default {

mixins: [HandlesValidationErrors],

computed: {
fieldAttribute() {
return this.attribute
},
},

props: [
'subField',
'value'
'value',
'attribute'
],

}
</script>
</script>
39 changes: 27 additions & 12 deletions resources/js/components/sub-fields/TextareaSubField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,41 @@
<template>
<div>
<textarea
:id="subField.name"
:name="subField.name"
class="w-full form-control form-input form-input-bordered py-3 h-auto"
:placeholder="subField.placeholder"
v-bind="subField.attributes"
@input="$emit('input', $event.target.value)"
rows="5"
>{{value}}</textarea>
<div>
<textarea
:id="subField.name"
:name="subField.name"
class="w-full form-control form-input form-input-bordered py-3 h-auto"
:placeholder="subField.placeholder"
v-bind="subField.attributes"
@input="$emit('input', $event.target.value)"
rows="5"
:class="errorClasses"
>{{value}}</textarea>
</div>
<p v-if="hasError" class="my-2 text-danger">
{{ firstError }}
</p>
</div>

</template>

<script>
import {HandlesValidationErrors} from 'laravel-nova'

export default {

mixins: [HandlesValidationErrors],

computed: {
fieldAttribute() {
return this.attribute
},
},

props: [
'subField',
'value'
'value',
'attribute'
],

}
</script>
</script>
Loading