<style>
.mce-path {
display: none !important;
}
</style>
{% set isTicketViewPage = ('helpdesk_member_ticket' == app.request.attributes.get('_route')) %}
<div class="uv-pop-up-overlay uv-no-error-success-icon" id="create-ticket-modal">
<div class="uv-pop-up-box uv-pop-up-wide">
<span class="uv-pop-up-close"></span>
<h2>Create Ticket</h2>
<form action="{{ path('helpdesk_member_create_ticket') }}" method="post" id="create-ticket-form" enctype="multipart/form-data">
{# Customer Details #}
{% if not isTicketViewPage %}
{# Name #}
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Name'|trans }}</label>
<div class="uv-field-block">
<input name="name" class="uv-field create-ticket" type="text" value="">
</div>
<span class="uv-field-info">{{ 'Customer full name'|trans }}</span>
</div>
{# Email #}
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Email'|trans }}</label>
<div class="uv-field-block">
<input name="from" class="uv-field create-ticket" type="text" value="">
</div>
<span class="uv-field-info">{{ 'Customer email address'|trans }}</span>
</div>
{% else %}
{# Retrieve customer details from the current ticket being visited #}
<span class="uv-field-info">{{ "Ticket will be created with current ticket's customer"|trans }}</span>
{% endif %}
{# Ticket Type #}
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Type'|trans }}</label>
<div class="uv-field-block">
<select name="type" class="uv-select create-ticket" id="type">
<option value="">{{ 'Select type'|trans }}</option>
{% for type in ticket_service.getTypes() %}
<option value="{{ type.id }}" {{ post.type is defined and post.type == type.id ? 'selected' : '' }}>{{ type.name }}
</option>
{% endfor %}
</select>
</div>
<span class="uv-field-info">{{ 'Choose ticket type'|trans }}</span>
</div>
{# Ticket Subject #}
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Subject'|trans }}</label>
<div class="uv-field-block">
<input name="subject" class="uv-field create-ticket" type="text" value="">
</div>
<span class="uv-field-info">{{ 'Ticket subject'|trans }}</span>
</div>
{# Ticket Message #}
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Message'|trans }}</label>
<div class="uv-field-block">
<textarea name="reply" id="create-reply" class="uv-field create-ticket" type="text">{{ ticket_service.getAgentDraftReply() }}</textarea>
</div>
<span class="uv-field-info">{{ 'Ticket query message'|trans }}</span>
</div>
{# Ticket Attachment #}
<div class="uv-element-block attachment-block uv-no-error-success-icon" id="uv-attachment-option">
<label>
<span class="uv-file-label">{{ 'Add Attachment'|trans }}</span>
</label>
</div>
{# CustomFields #}
{% set removeMe = [] %}
{% if headerCustomFields %}
<div class="custom-fields clearfix">
{% for key, customField in headerCustomFields %}
<div class="uv-element-block input-group {{ customField.customFieldsDependency|length ? 'dependent' : '' }} {% for customFieldCustomFieldsDependency in customField.customFieldsDependency %} dependency{{customFieldCustomFieldsDependency.id}}{% endfor %}" style="position: relative; {{ customField.customFieldsDependency|length ? 'display: none;' : '' }}">
<label class="uv-field-label" for="for{{customField.name~customField.id}}">{{ customField.name }}</label>
{% if customField.fieldType == 'text' %}
<div class="uv-field-block">
<input type="{{ customField['validation']['fieldtype'] is defined ? customField['validation']['fieldtype'] :'text' }}" name="customFields[{{customField.id}}]" class="uv-field create-ticket" value="" {{ customField.required ? "required" : "" }} id="for{{customField.name~customField.id}}" placeholder="{{customField.placeholder}}">
</div>
{% elseif customField.fieldType in ['date', 'time', 'datetime'] %}
<div class="uv-field-block">
<input class="uv-field form-control create-ticket uv-date-picker {% if customField.fieldType == 'time' %}time{% else %}calendar{% endif %} uv-header-{{ customField.fieldType }}" type="text" name="customFields[{{customField.id}}]" {{ customField.required ? "required" : "" }} id="for{{customField.name~customField.id}}" value="">
</div>
{% elseif customField.fieldType == 'textarea' %}
<div class="uv-field-block">
<textarea name="customFields[{{customField.id}}]" class="uv-field create-ticket" {{ customField.required ? "required" : "" }} id="for{{customField.name~customField.id}}"></textarea>
</div>
{% elseif customField.fieldType in ['file'] %}
<div class="uv-field-block">
<input type="file" name="customFields[{{customField.id}}]" class="uv-field create-ticket" {{ customField.required ? "required" : "" }} id="for{{customField.name~customField.id}}">
</div>
{% elseif customField.fieldType in ['select'] %}
{% if customField.customFieldValues is not empty %}
<div class="uv-field-block">
<select name="customFields[{{customField.id}}]" class="uv-select create-ticket" id="for{{customField.name~customField.id}}" {{ customField.required ? "required" : "" }}>
<option value="">{{ 'Select option' }}</option>
{% for customFieldValues in customField.customFieldValues %}
<option value="{{customFieldValues.id}}">{{customFieldValues.name}}</option>
{% endfor %}
</select>
</div>
{% else %}
<!--Hide this beacause choices aren't available-->
{% set removeMe = removeMe|merge(["for"~customField.name~customField.id]) %}
{% endif %}
{% elseif customField.fieldType in ['checkbox'] %}
{% if customField.customFieldValues is not empty %}
{% for customFieldValues in customField.customFieldValues %}
<div class="uv-split-field">
<label>
<div class="uv-checkbox">
<input type="checkbox" name="customFields[{{customField.id}}][]" value="{{customFieldValues.id}}" id="for{{customFieldValues.name~customFieldValues.id}}" class="create-ticket"/>
<span class="uv-checkbox-view"></span>
</div>
<span class="uv-radio-label" for="for{{customFieldValues.name~customFieldValues.id}}">{{ customFieldValues.name }}</span>
</label>
</div>
{% endfor %}
{% else %}
<!--Hide this beacause choices aren't available-->
{% set removeMe = removeMe|merge(["for"~customField.name~customField.id]) %}
{% endif %}
{% elseif customField.fieldType in ['radio'] %}
{% if customField.customFieldValues is not empty %}
{% for customFieldValues in customField.customFieldValues %}
<div class="uv-split-field">
<label>
<div class="uv-radio">
<input type="radio" name="customFields[{{customField.id}}]" value="{{customFieldValues.id}}" id="for{{customFieldValues.name~customFieldValues.id}}" class="create-ticket"/>
<span class="uv-radio-view"></span>
</div>
<span class="uv-radio-label" for="for{{customFieldValues.name~customFieldValues.id}}">{{ customFieldValues.name }}</span>
</label>
</div>
{% endfor %}
{% else %}
<!--Hide this beacause choices aren't available-->
{% set removeMe = removeMe|merge(["for"~customField.name~customField.id]) %}
{% endif %}
{% endif %}
{% if formErrors['customFields['~customField.id~']'] is defined %}
<div class="text-danger">{{formErrors['customFields['~customField.id~']']}}</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
<div class="uv-element-block">
<button type="submit" id="create-ticket-btn" class="uv-btn">{{ 'Create Ticket'|trans }}</button>
</div>
</form>
</div>
</div>
{% if not(app.request.attributes.get('_route') in ['helpdesk_member_ticket']) %}
{{ include('@UVDeskCoreFramework\\Templates\\attachment.html.twig') }}
{% endif %}
{% if user_service.isfileExists('apps/uvdesk/form-component') %}
<script>
customFieldValidation = {};
customHandler = function(value, attr, computedState) {
if(!$('[name="'+ attr + '"]').parents('.uv-element-block').is(':visible') && !$('[name="'+ attr + '[]' + '"]').parents('.uv-element-block').is(':visible')) {
return false;
} else {
var ele = $('[name="'+ attr + '"]');
ele = ele.length ? ele : $('[name="'+ attr + '[]' + '"]');
if(ele[0].type == 'radio') {
var returnMe = true;
$.each(ele, function(key, eleChild) {
if($(eleChild).is(':checked')) {
returnMe = false;
}
});
return returnMe;
} else if(ele[0].type == 'checkbox') {
var returnMe = true;
$.each(ele, function(key, eleChild) {
if($(eleChild).is(':checked')) {
returnMe = false;
}
});
return returnMe;
} else if(!$('#create-ticket-form [name="'+ attr + '"]').val()) {
return true;
}
}
};
_.extend(Backbone.Validation.validators, {
checkAllowedDomain: function(value, attr, customValue, model) {
if(!$('[name="'+ attr + '"]').parents('.uv-element-block').is(':visible'))
return false;
domain = value.substring(value.indexOf("@") + 1);
if(customValue && customValue.indexOf(domain) === -1) {
return true; //return error
}
},
checkRestrictedDomain: function(value, attr, customValue, model) {
if(!$('[name="'+ attr + '"]').parents('.uv-element-block').is(':visible'))
return false;
domain = value.substring(value.indexOf("@") + 1);
if(customValue && customValue.indexOf(domain) !== -1) {
return true; //return error
}
},
checkMaxFileSize: function(value, attr, customValue, model) {
if(!$('[name="'+ attr + '"]').parents('.uv-element-block').is(':visible'))
return false;
fileInput = $('input[name="' + attr + '"]')[0] ? $('input[name="' + attr + '"]')[0] : $('input[name="' + attr + '"]');
file = fileInput.files? fileInput.files[0] : '';
filesize = file ? file.size / 1024 : 0;
maxSize = (customValue && parseInt(customValue)) ? parseInt(customValue) : 5120;
if(filesize > maxSize) {
return true; //return error
}
},
patternOrEmpty: function(value, attr, pattern, model) {
defaultPatterns = Backbone.Validation.patterns;
if (value && !value.toString().match(defaultPatterns[pattern] || pattern)) {
return true; //error
}
},
minOrEmpty: function(value, attr, minValue, model) {
if (value && (value < minValue)) {
return true; //error
}
},
maxOrEmpty: function(value, attr, maxValue, model) {
if (value && (value > maxValue)) {
return true; //error
}
},
patternCheck: function(value, attr, pattern, model) {
if (value && !value.toString().match(pattern)) {
return true; //error
}
},
});
{% if headerCustomFields is defined and headerCustomFields %}
{% for customField in headerCustomFields %}
{% set fieldtype = ('text' != customField['fieldType']) ? customField['fieldType'] : (customField['validation']['fieldtype'] is defined ? customField['validation']['fieldtype'] : 'text') %}
customFieldValidation['customFields[' + {{ customField.id }} + ']'] = [
{% if not(fieldtype in ['checkbox', 'radio', 'select'] and customField['customFieldValues'] is empty) and customField.required %}
{
fn : customHandler,
msg : '{{ "This field is mandatory"|trans }}'
},
{% endif %}
{% if('number' == fieldtype) %}
{
patternOrEmpty : 'number',
msg: '{{ "Value is not valid number"|trans }}',
},
{% if customField['validation']['minNo'] %}
{
minOrEmpty: {{ customField['validation']['minNo'] }},
msg: '{{ "Provide number greater than %min%"|trans({"%min%": customField["validation"]["minNo"] }) }}',
},
{% endif %}
{% if customField['validation']['maxNo'] %}
{
maxOrEmpty: {{ customField['validation']['maxNo'] }},
msg: '{{ "Provide number smaller than %max%"|trans({"%max%": customField["validation"]["maxNo"] }) }}',
},
{% endif %}
{% elseif('email' == fieldtype) %}
{
patternOrEmpty: /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i,
msg: '{{ "Email Address is invalid"|trans }}',
},
{% if customField['validation']['allowedDomain'] %}
{
checkAllowedDomain: "{{ customField['validation']['allowedDomain'] }}",
msg: '{{ "Domain name should be in accepted domains"|trans }}',
},
{% endif %}
{% if customField['validation']['restrictedDomain'] %}
{
checkRestrictedDomain: "{{ customField['validation']['restrictedDomain'] }}",
msg: '{{ "Domain name should not be in restricted domains" }}',
} ,
{% endif %}
{% elseif('url' == fieldtype) %}
{
patternOrEmpty: 'url',
msg: '{{ "Provide a valid url(with protocol)"|trans }}',
} ,
{% elseif('file' == fieldtype) %}
{
checkMaxFileSize: "{{ customField['validation']['maxFileSize'] }}",
msg: '{{ "file size should not exceed %value% KB"|trans({"%value%": customField["validation"]["maxFileSize"] ? : "5120"}) }}',
} ,
{% endif %}
{% if (not (fieldtype in ['checkbox', 'radio', 'select'])) and customField['validation']['regex'] is defined and customField['validation']['regex'] %}
{
patternCheck: "{{ customField['validation']['regex'] }}",
msg: "{{ 'This Field Value is not Valid'|trans }}",
} ,
{% endif %}
];
Array.isArray(validationParameters) ? validationParameters.push(value) : false;
{% endfor %}
{% endif %}
{% if CustomerCustomFields is defined and CustomerCustomFields %}
{% for customField in CustomerCustomFields %}
{% set fieldtype = ('text' != customField['fieldType']) ? customField['fieldType'] : (customField['validation']['fieldtype'] is defined ? customField['validation']['fieldtype'] : 'text') %}
customFieldValidation['customFields[' + {{ customField.id }} + ']'] = [
{% if not(fieldtype in ['checkbox', 'radio', 'select'] and customField['customFieldValues'] is empty) and customField.required %}
{
fn : customHandler,
msg : '{{ "This field is mandatory"|trans }}'
},
{% endif %}
{% if('number' == fieldtype) %}
{
patternOrEmpty : 'number',
msg: '{{ "Value is not valid number"|trans }}',
},
{% if customField['validation']['minNo'] %}
{
minOrEmpty: {{ customField['validation']['minNo'] }},
msg: '{{ "Provide number greater than %min%"|trans({"%min%": customField["validation"]["minNo"] }) }}',
},
{% endif %}
{% if customField['validation']['maxNo'] %}
{
maxOrEmpty: {{ customField['validation']['maxNo'] }},
msg: '{{ "Provide number smaller than %max%"|trans({"%max%": customField["validation"]["maxNo"] }) }}',
},
{% endif %}
{% elseif('email' == fieldtype) %}
{
patternOrEmpty: /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i,
msg: '{{ "Email Address is invalid"|trans }}',
},
{% if customField['validation']['allowedDomain'] %}
{
checkAllowedDomain: "{{ customField['validation']['allowedDomain'] }}",
msg: '{{ "Domain name should be in accepted domains"|trans }}',
},
{% endif %}
{% if customField['validation']['restrictedDomain'] %}
{
checkRestrictedDomain: "{{ customField['validation']['restrictedDomain'] }}",
msg: '{{ "Domain name should not be in restricted domains" }}',
} ,
{% endif %}
{% elseif('url' == fieldtype) %}
{
patternOrEmpty: 'url',
msg: '{{ "Provide a valid url(with protocol)"|trans }}',
} ,
{% elseif('file' == fieldtype) %}
{
checkMaxFileSize: "{{ customField['validation']['maxFileSize'] }}",
msg: '{{ "file size should not exceed %value% KB"|trans({"%value%": customField["validation"]["maxFileSize"] ? : "5120"}) }}',
} ,
{% endif %}
{% if (not (fieldtype in ['checkbox', 'radio', 'select'])) and customField['validation']['regex'] is defined and customField['validation']['regex'] %}
{
patternCheck: "{{ customField['validation']['regex'] }}",
msg: "{{ 'This Field Value is not Valid'|trans }}",
} ,
{% endif %}
];
Array.isArray(validationParameters) ? validationParameters.push(value) : false;
{% endfor %}
{% endif %}
var validationParameters = true;
</script>
{% endif %}
{{ include("@UVDeskSupportCenter/Templates/tinyMCE.html.twig") }}
<script type="text/javascript">
$(function () {
if (typeof(customFieldValidation) == 'undefined') {
customFieldValidation = {};
}
{% if(removeMe is defined) %}
$.each({{ removeMe | json_encode |raw }}, function(key, value){
$('label[for="' + value + '"]').parent().hide();
});
{% endif %}
$('.uv-header-date').datetimepicker({
format: 'YYYY-MM-DD',
});
$('.uv-header-time').datetimepicker({
format: 'LT',
});
$('.uv-header-datetime').datetimepicker({
format: 'YYYY-MM-DD H:m:s'
});
var CreateTicketModel = Backbone.Model.extend({
idAttribute : "id",
defaults : {
path : "",
},
validation: _.extend(customFieldValidation, {
{% if not isTicketViewPage %}
'name' : {
required : true,
msg : "{{ 'This field is mandatory'|trans }}"
},
'from' :
[{
required : true,
msg : "{{ 'This field is mandatory'|trans }}"
},{
pattern : /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
msg : "{{ 'Email address is invalid'|trans }}"
}],
{% endif %}
'type' : {
required : true,
msg : "{{ 'This field is mandatory'|trans }}"
},
'subject' : {
required : true,
msg : "{{ 'This field is mandatory'|trans }}"
},
'reply' : {
fn: function(value) {
if(!tinyMCE.get("uv-edit-create-thread"))
return false;
var html = tinyMCE.get("uv-edit-create-thread").getContent();
if(app.appView.stripHTML(html) != '') {
return false;
}
return true;
},
msg : "{{ 'This field is mandatory'|trans }}"
},
}),
urlRoot : "{{ path('helpdesk_member_create_ticket') }}"
});
sfTinyMce.init({
height: '155px',
selector : '#create-reply',
images_upload_url: "",
setup: function(editor) {
},
plugins: [
],
toolbar: '| undo redo | bold italic forecolor ',
});
var CreateTicketForm = Backbone.View.extend({
el : $("#create-ticket-modal #create-ticket-form"),
model: new CreateTicketModel(),
initialize : function() {
Backbone.Validation.bind(this);
var jsonContext = JSON.parse('{{ errors is defined ? errors|raw : "{}" }}');
for (var field in jsonContext) {
Backbone.Validation.callbacks.invalid(this, field, jsonContext[field], 'input');
}
},
events : {
'click #create-ticket-btn': "saveTicket",
'change #type': "updateCustomFields",
'blur input.create-ticket:not(input[type=file]), textarea.create-ticket, select.create-ticket, checkbox.create-ticket': 'formChanegd',
'change input[type=file].create-ticket': 'formChanegd',
},
formChanegd: function(e) {
this.model.set(Backbone.$(e.currentTarget).attr('name'), Backbone.$(e.currentTarget).val())
this.model.isValid([Backbone.$(e.currentTarget).attr('name')])
},
saveTicket: function (e) {
e.preventDefault();
var currentElement = Backbone.$(e.currentTarget);
var data = currentElement.closest('form').serializeObject();
this.model = new CreateTicketModel();
this.model.set(data);
Backbone.Validation.bind(this);
if (this.model.isValid(true)) {
$('#create-ticket-form').submit();
$('form').find('#create-ticket-btn').attr('disabled', 'disabled');
}
},
updateCustomFields: function (e) {
const dependentFields = e.currentTarget.value;
this.$('.dependent').hide();
this.$('.dependency' + dependentFields).show();
}
});
new CreateTicketForm();
});
</script>