You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
3.0 KiB
106 lines
3.0 KiB
<template>
|
|
<v-form ref="formGen" lazy-loading>
|
|
<v-layout>
|
|
<v-flex v-for="(row, idx) in form" :key="`row-${idx}`">
|
|
<v-layout column mx-3>
|
|
<v-flex v-for="input in row.list" :key="input.field">
|
|
<v-text-field
|
|
v-if="input.type === 'text'"
|
|
v-model="doc[input.field]"
|
|
:label="input.label"
|
|
:disabled="input.disabled || disabled"
|
|
:rules="getRules(input)"
|
|
@change="triggerUp()"
|
|
/>
|
|
|
|
<v-select
|
|
v-if="input.type === 'select'"
|
|
v-model="doc[input.field]"
|
|
:label="input.label"
|
|
:items="input.items"
|
|
:disabled="input.disabled || disabled"
|
|
:multiple="input.multiple"
|
|
item-text="label"
|
|
@change="triggerUp()"
|
|
/>
|
|
|
|
<media-uploader
|
|
v-if="input.type === 'media'"
|
|
v-model="doc[input.field]"
|
|
:disabled="input.disabled || disabled"
|
|
:doc-coll="coll.type"
|
|
:doc-id="coll.id"
|
|
:doc-path="input.field"
|
|
@change="triggerUp()"
|
|
/>
|
|
|
|
<select-api
|
|
v-if="input.type === 'select-api'"
|
|
v-model="doc[input.field]"
|
|
:label="input.label"
|
|
:collection="input.items"
|
|
:multiple="input.multiple"
|
|
@change="triggerUp()"
|
|
/>
|
|
|
|
<v-textarea
|
|
v-if="input.type === 'textarea'"
|
|
v-model="doc[input.field]"
|
|
:label="input.label"
|
|
:disabled="input.disabled || disabled"
|
|
@change="triggerUp()"
|
|
/>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-form>
|
|
</template>
|
|
|
|
<script>
|
|
import MediaUploader from '@/components/MediaUploader.vue'
|
|
import SelectApi from '@/components/SelectApi.vue'
|
|
|
|
export default {
|
|
name: 'FormGen',
|
|
components: { MediaUploader, SelectApi },
|
|
props: {
|
|
value: { type: Object, default: () => {} },
|
|
more: { type: String, default: null },
|
|
form: { type: Array, default: () => {} },
|
|
coll: { type: Object, default: null },
|
|
disabled: { type: Boolean, default: false }
|
|
},
|
|
data: () => ({
|
|
doc: {}
|
|
}),
|
|
mounted () {
|
|
if (this.more) {
|
|
this.value[this.more] = this.value[this.more] || {}
|
|
this.doc = this.value[this.more]
|
|
} else {
|
|
this.doc = this.value
|
|
}
|
|
},
|
|
methods: {
|
|
getRules (input) {
|
|
if (!input.rules) { return [] }
|
|
const rules = []
|
|
if (input.rules.required) {
|
|
rules.push(v => !!v || input.rules.required)
|
|
}
|
|
if (input.rules.regex) {
|
|
const aRegex = input.rules.regex.split(';')
|
|
const nRegex = new RegExp(aRegex[0], aRegex[1])
|
|
rules.push(v => nRegex.test(v) || aRegex[2] || 'Field must be valid')
|
|
}
|
|
return rules
|
|
},
|
|
triggerUp () {
|
|
const valid = this.$refs.formGen.validate()
|
|
this.$emit('update')
|
|
this.$emit('valid', valid)
|
|
}
|
|
}
|
|
}
|
|
</script>
|