mirror of
https://github.com/crater-invoice/crater.git
synced 2025-12-16 10:22:55 -05:00
build version 400
This commit is contained in:
Mohit Panjwani
104
resources/assets/js/components/custom-fields/DateField.vue
Normal file
104
resources/assets/js/components/custom-fields/DateField.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div>
|
||||
<base-date-picker
|
||||
v-model="date"
|
||||
:calendar-button="true"
|
||||
:invalid="isInvalid"
|
||||
:placeholder="placeholder"
|
||||
calendar-button-icon="calendar"
|
||||
@input="onDateChanged"
|
||||
/>
|
||||
<span v-if="isInvalid" class="text-sm text-danger">
|
||||
{{ $t('validation.required') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
const { required, requiredIf } = require('vuelidate/lib/validators')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
default: null,
|
||||
required: true,
|
||||
},
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
invalidFields: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
placeholder: '',
|
||||
invalidFieldIds: [],
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
date: {
|
||||
required: requiredIf('isRequired'),
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isRequired() {
|
||||
if (this.field && this.field.is_required) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
isInvalid() {
|
||||
if (
|
||||
this.invalidFieldIds.indexOf(this.field.cfid) >= 0 ||
|
||||
(this.$v.date.$error && !this.$v.date.required)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
invalidFields: {
|
||||
handler: 'setInvalidFieldIds',
|
||||
deep: true,
|
||||
},
|
||||
field: {
|
||||
handler: 'handleData',
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.date =
|
||||
this.field && this.field.defaultAnswer
|
||||
? this.field.defaultAnswer
|
||||
: new Date()
|
||||
this.placeholder =
|
||||
this.field && this.field.placeholder ? this.field.placeholder : ''
|
||||
},
|
||||
methods: {
|
||||
handleData() {
|
||||
this.date =
|
||||
this.field && this.field.defaultAnswer
|
||||
? this.field.defaultAnswer
|
||||
: new Date()
|
||||
this.placeholder =
|
||||
this.field && this.field.placeholder ? this.field.placeholder : ''
|
||||
},
|
||||
onDateChanged(date) {
|
||||
this.$v.date.$touch()
|
||||
this.$emit('update', {
|
||||
field: this.field,
|
||||
value: moment(date).format('YYYY-MM-DD'),
|
||||
})
|
||||
},
|
||||
setInvalidFieldIds() {
|
||||
this.invalidFieldIds = this.invalidFields.map((field) => field.id)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div>
|
||||
<base-date-picker
|
||||
v-model="dateTime"
|
||||
:invalid="isInvalid"
|
||||
:enable-time="true"
|
||||
:placeholder="placeholder"
|
||||
@input="onChanged"
|
||||
/>
|
||||
<span v-if="isInvalid" class="text-sm text-danger">
|
||||
{{ $t('validation.required') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const { required, requiredIf } = require('vuelidate/lib/validators')
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
default: null,
|
||||
required: true,
|
||||
},
|
||||
invalidFields: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dateTime: null,
|
||||
placeholder: '',
|
||||
defaultValue: null,
|
||||
invalidFieldIds: [],
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
dateTime: {
|
||||
required: requiredIf('isRequired'),
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isRequired() {
|
||||
if (this.field && this.field.is_required) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
isInvalid() {
|
||||
if (
|
||||
this.invalidFieldIds.indexOf(this.field.cfid) >= 0 ||
|
||||
(this.$v.dateTime.$error && !this.$v.dateTime.required)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
invalidFields: {
|
||||
handler: 'setInvalidFieldIds',
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.dateTime =
|
||||
this.field && this.field.defaultAnswer
|
||||
? moment(this.field.defaultAnswer).format('YYYY-MM-DD H:m')
|
||||
: moment().format('YYYY-MM-DD H:m')
|
||||
this.placeholder =
|
||||
this.field && this.field.placeholder ? this.field.placeholder : ''
|
||||
},
|
||||
methods: {
|
||||
setInvalidFieldIds() {
|
||||
this.invalidFieldIds = this.invalidFields.map((field) => field.id)
|
||||
},
|
||||
onChanged() {
|
||||
this.$v.dateTime.$touch()
|
||||
this.$emit('update', { field: this.field, value: this.dateTime })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div>
|
||||
<sw-select
|
||||
v-model="selectedValue"
|
||||
:options="options"
|
||||
:searchable="true"
|
||||
:show-labels="false"
|
||||
:allow-empty="true"
|
||||
:invalid="isInvalid"
|
||||
:placeholder="placeholder"
|
||||
:tabindex="tabindex"
|
||||
@select="onSelectedValueChanged"
|
||||
/>
|
||||
<span v-if="isInvalid" class="text-sm text-danger">
|
||||
{{ $t('validation.required') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const { required, requiredIf } = require('vuelidate/lib/validators')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
default: null,
|
||||
require: true,
|
||||
},
|
||||
invalidFields: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedValue: null,
|
||||
options: [],
|
||||
placeholder: '',
|
||||
invalidFieldIds: [],
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
selectedValue: {
|
||||
required: requiredIf('isRequired'),
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isRequired() {
|
||||
if (this.field && this.field.is_required) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
isInvalid() {
|
||||
if (
|
||||
this.invalidFieldIds.indexOf(this.field.cfid) >= 0 ||
|
||||
(this.$v.selectedValue.$error && !this.$v.selectedValue.required)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
invalidFields: {
|
||||
handler: 'setInvalidFieldIds',
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.options = this.field && this.field.options ? this.field.options : []
|
||||
this.selectedValue = this.field && this.field.defaultAnswer
|
||||
this.placeholder = this.field && this.field.placeholder
|
||||
},
|
||||
methods: {
|
||||
setInvalidFieldIds() {
|
||||
this.invalidFieldIds = this.invalidFields.map((field) => field.id)
|
||||
},
|
||||
onSelectedValueChanged(data) {
|
||||
this.$v.selectedValue.$touch()
|
||||
this.$emit('update', { field: this.field, value: data })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
111
resources/assets/js/components/custom-fields/InputField.vue
Normal file
111
resources/assets/js/components/custom-fields/InputField.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div>
|
||||
<sw-input
|
||||
:type="type"
|
||||
:invalid="isInvalid"
|
||||
:placeholder="placeholder"
|
||||
v-model="inputValue"
|
||||
:tabindex="tabindex"
|
||||
@input="handleInput"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<span v-if="isInvalid" class="text-sm text-danger">
|
||||
{{ $t('validation.required') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const {
|
||||
required,
|
||||
minLength,
|
||||
numeric,
|
||||
minValue,
|
||||
maxLength,
|
||||
requiredIf,
|
||||
} = require('vuelidate/lib/validators')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
required: false,
|
||||
},
|
||||
field: {
|
||||
type: Object,
|
||||
default: null,
|
||||
required: true,
|
||||
},
|
||||
invalidFields: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputValue: null,
|
||||
placeholder: '',
|
||||
invalidFieldIds: [],
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
inputValue: {
|
||||
required: requiredIf('isRequired'),
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isRequired() {
|
||||
if (this.field && this.field.is_required) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
isInvalid() {
|
||||
if (
|
||||
this.invalidFieldIds.indexOf(this.field.cfid) >= 0 ||
|
||||
(this.$v.inputValue.$error && !this.$v.inputValue.required)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
field: {
|
||||
handler: 'handleData',
|
||||
deep: true,
|
||||
},
|
||||
invalidFields: {
|
||||
handler: 'setInvalidFieldIds',
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.inputValue = this.field && this.field.defaultAnswer
|
||||
this.placeholder =
|
||||
this.field && this.field.placeholder ? this.field.placeholder : ''
|
||||
},
|
||||
methods: {
|
||||
handleData() {
|
||||
this.inputValue = this.field && this.field.defaultAnswer
|
||||
this.placeholder =
|
||||
this.field && this.field.placeholder ? this.field.placeholder : ''
|
||||
},
|
||||
setInvalidFieldIds() {
|
||||
this.invalidFieldIds = this.invalidFields.map((field) => field.id)
|
||||
},
|
||||
handleInput() {
|
||||
this.$emit('update', { field: this.field, value: this.inputValue })
|
||||
this.$v.inputValue.$touch()
|
||||
},
|
||||
handleChange() {
|
||||
this.$v.inputValue.$touch()
|
||||
this.$emit('update', { field: this.field, value: this.inputValue })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
114
resources/assets/js/components/custom-fields/NumberField.vue
Normal file
114
resources/assets/js/components/custom-fields/NumberField.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div>
|
||||
<sw-input
|
||||
:invalid="$v.inputValue.$error || isInvalid"
|
||||
:placeholder="placeholder"
|
||||
:tabindex="tabindex"
|
||||
v-model="inputValue"
|
||||
type="number"
|
||||
@input="handleInput"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<div v-if="$v.inputValue.$error || isInvalid">
|
||||
<span v-if="isInvalid" class="text-sm text-danger">
|
||||
{{ $t('validation.required') }}
|
||||
</span>
|
||||
<span
|
||||
v-if="!isInvalid && $v.inputValue.numeric"
|
||||
class="text-sm text-danger"
|
||||
>
|
||||
{{ $t('validation.required') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const { required, numeric, requiredIf } = require('vuelidate/lib/validators')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
required: false,
|
||||
},
|
||||
field: {
|
||||
type: Object,
|
||||
default: null,
|
||||
required: true,
|
||||
},
|
||||
invalidFields: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputValue: null,
|
||||
placeholder: '',
|
||||
invalidFieldIds: [],
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
inputValue: {
|
||||
required: requiredIf('isRequired'),
|
||||
numeric,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isRequired() {
|
||||
if (this.field && this.field.is_required) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
isInvalid() {
|
||||
if (
|
||||
this.invalidFieldIds.indexOf(this.field.cfid) >= 0 ||
|
||||
(this.$v.inputValue.$error && !this.$v.inputValue.required)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
field: {
|
||||
handler: 'handleData',
|
||||
deep: true,
|
||||
},
|
||||
invalidFields: {
|
||||
handler: 'setInvalidFieldIds',
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.inputValue = this.field && this.field.defaultAnswer
|
||||
this.placeholder =
|
||||
this.field && this.field.placeholder ? this.field.placeholder : ''
|
||||
},
|
||||
methods: {
|
||||
setInvalidFieldIds() {
|
||||
this.invalidFieldIds = this.invalidFields.map((field) => field.id)
|
||||
},
|
||||
handleData() {
|
||||
this.inputValue = this.field && this.field.defaultAnswer
|
||||
this.placeholder =
|
||||
this.field && this.field.placeholder ? this.field.placeholder : ''
|
||||
},
|
||||
handleInput() {
|
||||
this.$v.inputValue.$touch()
|
||||
this.$emit('update', { field: this.field, value: this.inputValue })
|
||||
},
|
||||
handleChange() {
|
||||
this.$v.inputValue.$touch()
|
||||
this.$emit('update', { field: this.field, value: this.inputValue })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
113
resources/assets/js/components/custom-fields/PhoneField.vue
Normal file
113
resources/assets/js/components/custom-fields/PhoneField.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div>
|
||||
<sw-input
|
||||
:invalid="$v.inputValue.$error || isInvalid"
|
||||
:placeholder="placeholder"
|
||||
:tabindex="tabindex"
|
||||
v-model="inputValue"
|
||||
type="text"
|
||||
@input="handleInput"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<div v-if="$v.inputValue.$error || isInvalid">
|
||||
<span
|
||||
v-if="!isInvalid && !$v.inputValue.phone"
|
||||
class="text-sm text-danger"
|
||||
>
|
||||
{{ $t('validation.invalid_phone') }}
|
||||
</span>
|
||||
<span v-if="isInvalid" class="text-sm text-danger">
|
||||
{{ $t('validation.required') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const {
|
||||
required,
|
||||
minLength,
|
||||
numeric,
|
||||
minValue,
|
||||
maxLength,
|
||||
requiredIf,
|
||||
} = require('vuelidate/lib/validators')
|
||||
const isPhone = (value) => /^\+?[0-9]+$/.test(value)
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
required: false,
|
||||
},
|
||||
field: {
|
||||
type: Object,
|
||||
default: null,
|
||||
required: true,
|
||||
},
|
||||
invalidFields: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputValue: null,
|
||||
placeholder: '',
|
||||
invalidFieldIds: [],
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
inputValue: {
|
||||
phone: isPhone,
|
||||
required: requiredIf('isRequired'),
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isRequired() {
|
||||
if (this.field && this.field.is_required) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
isInvalid() {
|
||||
if (
|
||||
this.invalidFieldIds.indexOf(this.field.cfid) >= 0 ||
|
||||
(this.$v.inputValue.$error && !this.$v.inputValue.required)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
invalidFields: {
|
||||
handler: 'setInvalidFieldIds',
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.inputValue = this.field && this.field.defaultAnswer
|
||||
this.placeholder =
|
||||
this.field && this.field.placeholder ? this.field.placeholder : ''
|
||||
},
|
||||
methods: {
|
||||
handleInput() {
|
||||
this.$v.inputValue.$touch()
|
||||
this.$emit('update', { field: this.field, value: this.inputValue })
|
||||
},
|
||||
handleChange() {
|
||||
this.$v.inputValue.$touch()
|
||||
this.$emit('update', { field: this.field, value: this.inputValue })
|
||||
},
|
||||
setInvalidFieldIds() {
|
||||
this.invalidFieldIds = this.invalidFields.map((field) => field.id)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
37
resources/assets/js/components/custom-fields/SwitchField.vue
Normal file
37
resources/assets/js/components/custom-fields/SwitchField.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<sw-switch
|
||||
v-model="switchData"
|
||||
class="btn-switch"
|
||||
@change="onChange"
|
||||
style="margin-top: -15px"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
required: false,
|
||||
},
|
||||
field: {
|
||||
type: Object,
|
||||
default: null,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
switchData: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.switchData = this.field && this.field.defaultAnswer ? true : false
|
||||
},
|
||||
methods: {
|
||||
onChange() {
|
||||
this.$emit('update', { field: this.field, value: this.switchData })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div>
|
||||
<sw-textarea
|
||||
v-model="text"
|
||||
:invalid="isInvalid"
|
||||
:placeholder="placeholder"
|
||||
:tabindex="tabindex"
|
||||
@input="handleInput"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<span v-if="isInvalid" class="text-sm text-danger">
|
||||
{{ $t('validation.required') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const {
|
||||
required,
|
||||
minLength,
|
||||
numeric,
|
||||
minValue,
|
||||
maxLength,
|
||||
requiredIf,
|
||||
} = require('vuelidate/lib/validators')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
default: null,
|
||||
required: true,
|
||||
},
|
||||
invalidFields: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
text: null,
|
||||
placeholder: '',
|
||||
invalidFieldIds: [],
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
text: {
|
||||
required: requiredIf('isRequired'),
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isRequired() {
|
||||
if (this.field && this.field.is_required) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
isInvalid() {
|
||||
if (
|
||||
this.invalidFieldIds.indexOf(this.field.cfid) >= 0 ||
|
||||
(this.$v.text.$error && !this.$v.text.required)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
invalidFields: {
|
||||
handler: 'setInvalidFieldIds',
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.text = this.field && this.field.defaultAnswer
|
||||
this.placeholder =
|
||||
this.field && this.field.placeholder ? this.field.placeholder : ''
|
||||
},
|
||||
methods: {
|
||||
setInvalidFieldIds() {
|
||||
this.invalidFieldIds = this.invalidFields.map((field) => field.id)
|
||||
},
|
||||
handleInput() {
|
||||
this.$v.text.$touch()
|
||||
this.$emit('update', { field: this.field, value: this.text })
|
||||
},
|
||||
handleChange() {
|
||||
this.$v.text.$touch()
|
||||
this.$emit('update', { field: this.field, value: this.text })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
103
resources/assets/js/components/custom-fields/TimeField.vue
Normal file
103
resources/assets/js/components/custom-fields/TimeField.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div>
|
||||
<base-time-picker
|
||||
v-model="time"
|
||||
:set-value="defaultValue"
|
||||
:invalid="$v.time.$error"
|
||||
:placeholder="placeholder"
|
||||
:tabindex="tabindex"
|
||||
hide-clear-button
|
||||
@input="onTimeSelect"
|
||||
/>
|
||||
<div v-if="$v.time.$error">
|
||||
<span v-if="!$v.time.required" class="text-sm text-danger">
|
||||
{{ $t('validation.required') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const { required, requiredIf } = require('vuelidate/lib/validators')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
default: null,
|
||||
required: true,
|
||||
},
|
||||
invalidFields: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time: null,
|
||||
defaultValue: '00:00:00',
|
||||
placeholder: '',
|
||||
invalidFieldIds: [],
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
time: {
|
||||
required: requiredIf('isRequired'),
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isRequired() {
|
||||
if (this.field && this.field.is_required) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
isInvalid() {
|
||||
if (
|
||||
this.invalidFieldIds.indexOf(this.field.cfid) >= 0 ||
|
||||
(this.$v.inputValue.$error && !this.$v.inputValue.required)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
field: {
|
||||
handler: 'handleData',
|
||||
deep: true,
|
||||
},
|
||||
invalidFields: {
|
||||
handler: 'setInvalidFieldIds',
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.placeholder =
|
||||
this.field && this.field.placeholder ? this.field.placeholder : ''
|
||||
this.handleData()
|
||||
},
|
||||
methods: {
|
||||
handleData() {
|
||||
this.defaultValue =
|
||||
this.field && this.field.defaultAnswer
|
||||
? this.field.defaultAnswer
|
||||
: '00-00-00'
|
||||
this.time =
|
||||
this.field && this.field.defaultAnswer
|
||||
? this.field.defaultAnswer
|
||||
: '00-00-00'
|
||||
},
|
||||
setInvalidFieldIds() {
|
||||
this.invalidFieldIds = this.invalidFields.map((field) => field.id)
|
||||
},
|
||||
onTimeSelect() {
|
||||
this.$v.time.$touch()
|
||||
this.$emit('update', { field: this.field, value: this.time })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
101
resources/assets/js/components/custom-fields/UrlField.vue
Normal file
101
resources/assets/js/components/custom-fields/UrlField.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div>
|
||||
<sw-input
|
||||
:invalid="$v.inputValue.$error || isInvalid"
|
||||
:placeholder="placeholder"
|
||||
:tabindex="tabindex"
|
||||
v-model="inputValue"
|
||||
type="url"
|
||||
@input="handleInput"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<div v-if="$v.inputValue.$error || isInvalid">
|
||||
<span v-if="!$v.inputValue.url" class="text-sm text-danger">
|
||||
{{ $t('validation.invalid_url') }}
|
||||
</span>
|
||||
<span v-if="isInvalid" class="text-sm text-danger">
|
||||
{{ $t('validation.required') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const { required, url, requiredIf } = require('vuelidate/lib/validators')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
required: false,
|
||||
},
|
||||
field: {
|
||||
type: Object,
|
||||
default: null,
|
||||
required: true,
|
||||
},
|
||||
invalidFields: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputValue: null,
|
||||
placeholder: '',
|
||||
invalidFieldIds: [],
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
inputValue: {
|
||||
url,
|
||||
required: requiredIf('isRequired'),
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isRequired() {
|
||||
if (this.field && this.field.is_required) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
isInvalid() {
|
||||
if (
|
||||
this.invalidFieldIds.indexOf(this.field.cfid) >= 0 ||
|
||||
(this.$v.inputValue.$error && !this.$v.inputValue.required)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
invalidFields: {
|
||||
handler: 'setInvalidFieldIds',
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.inputValue = this.field && this.field.defaultAnswer
|
||||
this.placeholder =
|
||||
this.field && this.field.placeholder ? this.field.placeholder : ''
|
||||
},
|
||||
methods: {
|
||||
setInvalidFieldIds() {
|
||||
this.invalidFieldIds = this.invalidFields.map((field) => field.id)
|
||||
},
|
||||
handleInput() {
|
||||
this.$v.inputValue.$touch()
|
||||
this.$emit('update', { field: this.field, value: this.inputValue })
|
||||
},
|
||||
handleChange() {
|
||||
this.$v.inputValue.$touch()
|
||||
this.$emit('update', { field: this.field, value: this.inputValue })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user