133 lines
2.8 KiB
Vue
133 lines
2.8 KiB
Vue
<template>
|
|
<div class="form chat-bubble agent">
|
|
<form @submit.prevent="onSubmit">
|
|
<div v-for="item in items" :key="item.key" class="form-block">
|
|
<label>{{ item.label }}</label>
|
|
<input
|
|
v-if="item.type === 'email' || item.type === 'text'"
|
|
v-model="formValues[item.name]"
|
|
:type="item.type"
|
|
:name="item.name"
|
|
:placeholder="item.placeholder"
|
|
:disabled="!!submittedValues.length"
|
|
/>
|
|
<textarea
|
|
v-else-if="item.type === 'text_area'"
|
|
v-model="formValues[item.name]"
|
|
:name="item.name"
|
|
:placeholder="item.placeholder"
|
|
:disabled="!!submittedValues.length"
|
|
/>
|
|
</div>
|
|
<button
|
|
v-if="!submittedValues.length"
|
|
class="button block"
|
|
type="submit"
|
|
:disabled="!isFormValid"
|
|
:style="{ background: widgetColor, borderColor: widgetColor }"
|
|
>
|
|
{{ $t('COMPONENTS.FORM_BUBBLE.SUBMIT') }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
export default {
|
|
props: {
|
|
items: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
submittedValues: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
formValues: {},
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
widgetColor: 'appConfig/getWidgetColor',
|
|
}),
|
|
isFormValid() {
|
|
return this.items.reduce((acc, { name }) => {
|
|
return !!this.formValues[name] && acc;
|
|
}, true);
|
|
},
|
|
},
|
|
mounted() {
|
|
if (this.submittedValues.length) {
|
|
this.updateFormValues();
|
|
} else {
|
|
this.setFormDefaults();
|
|
}
|
|
},
|
|
methods: {
|
|
onSubmit() {
|
|
if (!this.isFormValid) {
|
|
return;
|
|
}
|
|
this.$emit('submit', this.formValues);
|
|
},
|
|
buildFormObject(formObjectArray) {
|
|
return formObjectArray.reduce((acc, obj) => {
|
|
return {
|
|
...acc,
|
|
[obj.name]: obj.value || obj.default,
|
|
};
|
|
}, {});
|
|
},
|
|
updateFormValues() {
|
|
this.formValues = this.buildFormObject(this.submittedValues);
|
|
},
|
|
setFormDefaults() {
|
|
this.formValues = this.buildFormObject(this.items);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '~widget/assets/scss/variables.scss';
|
|
|
|
.form {
|
|
padding: $space-normal;
|
|
width: 80%;
|
|
|
|
.form-block {
|
|
width: 90%;
|
|
padding-bottom: $space-small;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
font-weight: $font-weight-medium;
|
|
padding: $space-smaller 0;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
border-radius: $space-smaller;
|
|
border: 1px solid $color-border;
|
|
display: block;
|
|
font-size: $font-size-default;
|
|
line-height: 1.5;
|
|
padding: $space-one;
|
|
width: 100%;
|
|
|
|
&:disabled {
|
|
background: $color-background-light;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
font-size: $font-size-default;
|
|
}
|
|
}
|
|
</style>
|