248 lines
9.2 KiB
Vue
248 lines
9.2 KiB
Vue
|
<template>
|
||
|
|
<div class="container-fluid mt-3 mb-85">
|
||
|
|
<div class="text-left text-muted pl-3">
|
||
|
|
<i class="fas fa-info-circle mr-1"></i>
|
||
|
|
<small>{{trans('messages.not_in_downloaded_code')}}</small><br/>
|
||
|
|
</div>
|
||
|
|
<template v-for="(conditionalField, index) in conditionalFields">
|
||
|
|
<div v-if="index != 0">
|
||
|
|
<h4 class="text-center">
|
||
|
|
<strong>
|
||
|
|
{{trans('messages.or').toUpperCase()}}
|
||
|
|
</strong>
|
||
|
|
</h4>
|
||
|
|
</div>
|
||
|
|
<div class="card m-3 card-outline card-success">
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-5">
|
||
|
|
<div class="input-group">
|
||
|
|
<select class="form-control" v-model="conditionalField.action">
|
||
|
|
<option :value="''">
|
||
|
|
{{trans('messages.show_hide')}}
|
||
|
|
</option>
|
||
|
|
<option :value="'show'">
|
||
|
|
{{trans('messages.show')}}
|
||
|
|
</option>
|
||
|
|
<option :value="'hide'">
|
||
|
|
{{trans('messages.hide')}}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
<select class="form-control" v-model="conditionalField.element">
|
||
|
|
<option :value="''">
|
||
|
|
{{trans('messages.choose_element')}}
|
||
|
|
</option>
|
||
|
|
<option v-for="(element, index) in selectedElements"
|
||
|
|
:key="index"
|
||
|
|
:value="element.name"
|
||
|
|
v-if="!_.includes(['hr', 'page_break'], element.type)">
|
||
|
|
{{element.label}}
|
||
|
|
({{element.name}})
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<template v-for="(conditions, conditionIndex) in conditionalField.conditions">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-5">
|
||
|
|
<div class="input-group mb-2">
|
||
|
|
<div class="input-group-prepend">
|
||
|
|
<span class="input-group-text" v-if="conditionIndex == 0">
|
||
|
|
{{trans('messages.when')}}
|
||
|
|
</span>
|
||
|
|
<select v-if="conditionIndex != 0"
|
||
|
|
class="form-control input-group-text" v-model="conditions.logical_operator">
|
||
|
|
<option value="AND">
|
||
|
|
{{trans('messages.and')}}
|
||
|
|
</option>
|
||
|
|
<option value="OR">
|
||
|
|
{{trans('messages.or')}}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<select class="form-control" v-model="conditions.condition"
|
||
|
|
@change="toggleConditionValueField(conditions.condition)">
|
||
|
|
<option :value="''">
|
||
|
|
{{trans('messages.condition')}}
|
||
|
|
</option>
|
||
|
|
<option v-for="(element, index) in selectedElements"
|
||
|
|
:key="index"
|
||
|
|
:value="element.name"
|
||
|
|
v-if="!_.includes(['heading', 'hr', 'html_text', 'file_upload', 'text_editor', 'signature', 'page_break', 'iframe', 'youtube', 'pdf', 'countdown'], element.type)">
|
||
|
|
{{element.label}}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="input-group mb-2" v-if="_.includes(['text', 'textarea', 'range', 'calendar', 'rating'], conditions.element_type)">
|
||
|
|
<div class="input-group-prepend">
|
||
|
|
<select class="form-control input-group-text" v-model="conditions.operator">
|
||
|
|
<option value="==">
|
||
|
|
{{trans('messages.equal_to')}}
|
||
|
|
</option>
|
||
|
|
<option value="!=">
|
||
|
|
{{trans('messages.not_equal_to')}}
|
||
|
|
</option>
|
||
|
|
<option value="empty">
|
||
|
|
{{trans('messages.empty')}}
|
||
|
|
</option>
|
||
|
|
<option value="not_empty">
|
||
|
|
{{trans('messages.not_empty')}}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<input type="text" class="form-control"
|
||
|
|
:placeholder="trans('messages.write_conditional_value')"
|
||
|
|
v-model="conditions.value" :disabled="_.includes(['empty', 'not_empty'], conditions.operator)">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-group mb-2" v-if="_.includes(['dropdown', 'radio', 'checkbox'], conditions.element_type)">
|
||
|
|
<div class="input-group-prepend">
|
||
|
|
<select class="form-control input-group-text" v-model="conditions.operator">
|
||
|
|
<option value="==">
|
||
|
|
{{trans('messages.equal_to')}}
|
||
|
|
</option>
|
||
|
|
<option value="!=">
|
||
|
|
{{trans('messages.not_equal_to')}}
|
||
|
|
</option>
|
||
|
|
<option value="empty" v-if="!_.includes(['radio', 'checkbox'], conditions.element_type)">
|
||
|
|
{{trans('messages.empty')}}
|
||
|
|
</option>
|
||
|
|
<option value="not_empty" v-if="!_.includes(['radio', 'checkbox'], conditions.element_type)">
|
||
|
|
{{trans('messages.not_empty')}}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<select class="form-control" v-model="conditions.value" :disabled="_.includes(['empty', 'not_empty'], conditions.operator)">
|
||
|
|
<option :value="''">
|
||
|
|
{{trans('messages.choose_value')}}
|
||
|
|
</option>
|
||
|
|
<option v-for="(option, index) in optionsForConditionalValue(selectedElements[conditions.element_index])"
|
||
|
|
:value="option"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
{{option}}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-group mb-2" v-if="_.includes(['terms_and_condition'], conditions.element_type)">
|
||
|
|
<div class="input-group-prepend">
|
||
|
|
<select class="form-control input-group-text" v-model="conditions.operator">
|
||
|
|
<option value="==">
|
||
|
|
{{trans('messages.equal_to')}}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<select class="form-control" v-model="conditions.value">
|
||
|
|
<option :value="''">
|
||
|
|
{{trans('messages.choose_value')}}
|
||
|
|
</option>
|
||
|
|
<option value="true">
|
||
|
|
{{trans('messages.checked')}}
|
||
|
|
</option>
|
||
|
|
<option value="false">
|
||
|
|
{{trans('messages.unchecked')}}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="input-group mb-2" v-if="_.includes(['switch'], conditions.element_type)">
|
||
|
|
<div class="input-group-prepend">
|
||
|
|
<select class="form-control input-group-text" v-model="conditions.operator">
|
||
|
|
<option value="==">
|
||
|
|
{{trans('messages.equal_to')}}
|
||
|
|
</option>
|
||
|
|
<option value="!=">
|
||
|
|
{{trans('messages.not_equal_to')}}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<select class="form-control" v-model="conditions.value">
|
||
|
|
<option :value="''">
|
||
|
|
{{trans('messages.choose_value')}}
|
||
|
|
</option>
|
||
|
|
<option value="1">
|
||
|
|
{{trans('messages.on')}}
|
||
|
|
</option>
|
||
|
|
<option value="0">
|
||
|
|
{{trans('messages.off')}}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-1">
|
||
|
|
<button type="button" class="btn btn-primary btn-sm" @click="addCondition(index)" v-if="conditionIndex == 0" data-toggle="tooltip" data-placement="top" :title="trans('messages.add_condition')">
|
||
|
|
<i class="fas fa-plus-circle"></i>
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-danger btn-sm" @click="removeCondition(index,conditionIndex)" v-if="conditionIndex != 0">
|
||
|
|
<i class="fas fa-trash-alt"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-1">
|
||
|
|
<button type="button" class="btn btn-danger btn-sm" @click="removeConditionalField(index)">
|
||
|
|
<i class="fas fa-trash-alt"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<button type="button" class="btn btn-info float-right mt-3" @click="addMoreConditionalField" data-toggle="tooltip" data-placement="top" :title="trans('messages.add_conditional_field')">
|
||
|
|
<i class="fas fa-plus-circle"></i>
|
||
|
|
{{trans('messages.add')}}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: ['conditionalFields', 'selectedElements'],
|
||
|
|
methods:{
|
||
|
|
addCondition(index) {
|
||
|
|
var condition_field = {'condition':'', 'value':"", 'element_type' : 'text', 'element_index' : '', 'operator' : '==', 'logical_operator' : 'AND'};
|
||
|
|
this.conditionalFields[index].conditions.push(condition_field);
|
||
|
|
},
|
||
|
|
addMoreConditionalField() {
|
||
|
|
var conditional_field = {'action':'', 'element':'', 'conditions':[{'condition':'', 'value':"", 'element_type' : 'text', 'element_index' : '', 'operator' : '==', 'logical_operator' : 'AND'}]};
|
||
|
|
this.conditionalFields.push(conditional_field);
|
||
|
|
},
|
||
|
|
removeCondition(index, conditionalIndex) {
|
||
|
|
if (conditionalIndex != 0) {
|
||
|
|
this.conditionalFields[index].conditions.splice(conditionalIndex, 1);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
removeConditionalField(index) {
|
||
|
|
this.conditionalFields.splice(index, 1);
|
||
|
|
},
|
||
|
|
toggleConditionValueField(choosenCondition) {
|
||
|
|
|
||
|
|
var schema = this.selectedElements;
|
||
|
|
|
||
|
|
_.forEach(this.conditionalFields, function(conditionalField){
|
||
|
|
|
||
|
|
_.forEach(conditionalField.conditions, function(conditionalElement) {
|
||
|
|
|
||
|
|
if (conditionalElement.condition === choosenCondition) {
|
||
|
|
|
||
|
|
var index = schema.findIndex(element => element.name === choosenCondition);
|
||
|
|
|
||
|
|
conditionalElement.element_type = _.isUndefined(schema[index]) ? 'text' : schema[index].type;
|
||
|
|
conditionalElement.element_index = index;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
optionsForConditionalValue(element) {
|
||
|
|
if(!_.isUndefined(element)) {
|
||
|
|
let options = element.options;
|
||
|
|
return (options || "").split("\n");
|
||
|
|
}
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|