{% extends "@UVDeskSupportCenter/Templates/layout.html.twig" %}
{% block title %}{% trans %}Create Ticket{% endtrans %}{% endblock %}
{% block ogtitle %}{% trans %}Create Ticket{% endtrans %}{% endblock %}
{% block twtitle %}{% trans %}Create Ticket{% endtrans %}{% endblock %}
{% block metaDescription %}{% trans %}create.ticket.metaDescription{% endtrans %}{% endblock %}
{% block metaKeywords %}{% trans %}create.ticket.metaKeywords{% endtrans %}{% endblock %}
{% set recaptchaDetail = recaptcha_service.getRecaptchaDetails() %}
{% block body %}
<style>
.uv-field{
padding: 5px 10px;
}
.grammarly-fix-message-container {
overflow: visible !important;
}
.grammarly-fix-message {
max-width: 158%;
}
.uv-field-success-icon {
display: none !important;
}
.mce-path {
display: none !important;
}
.uv-element-block label.uv-field-label.required::after {
content: "*";
color: #FC6868;
font-weight: 700;
display: inline-block;
}
</style>
{% set isTicketViewPage = (app.user.id is defined ? true : false) %}
<div class="uv-paper-article uv-paper-form">
<div class="uv-paper-section">
<section>
<h1>{{ 'Create Ticket Request'|trans }}</h1>
<div class="uv-form">
<form action="{{ path('helpdesk_customer_create_ticket') }}" method="post" id="create-ticket-form" enctype="multipart/form-data">
{% if not isTicketViewPage %}
<!-- Field -->
<div class="uv-element-block">
<label class="uv-field-label required">{{ 'Name'|trans }}</label>
<div class="uv-field-block">
<input name="name" class="uv-field create-ticket" type="text" value="{{ post.name is defined ? post.name : '' }}">
</div>
<span class="uv-field-info">{{ 'Enter your name'|trans }}</span>
</div>
<!-- //Field -->
<!-- Field -->
<div class="uv-element-block">
<label class="uv-field-label required">{{ 'Email'|trans }}</label>
<div class="uv-field-block">
<input name="from" class="uv-field create-ticket" type="text" value="{{ post.from is defined ? post.from : '' }}">
</div>
<span class="uv-field-info">{{ 'Enter your email'|trans }}</span>
</div>
<!-- //Field -->
{% endif %}
<!-- Field -->
<div class="uv-element-block">
<label class="uv-field-label required">{{ '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>
<!-- //Field -->
<!-- Field -->
<div class="uv-element-block">
<label class="uv-field-label required">{{ 'Subject'|trans }}</label>
<div class="uv-field-block">
<input name="subject" class="uv-field create-ticket" type="text" value="{{ post.subject is defined ? post.subject : '' }}">
</div>
<span class="uv-field-info">{{ 'Ticket subject'|trans }}</span>
</div>
<!-- //Field -->
<!-- Field -->
<div class="uv-element-block">
<label class="uv-field-label required">{{ 'Message'|trans }}</label>
<div class="uv-field-block grammarly-fix-message-container">
<textarea name="reply" id="create-reply" class="uv-field create-ticket grammarly-fix-message" type="text">{{ post.reply is defined ? post.reply : '' }}</textarea>
</div>
<span class="uv-field-info">{{ 'Ticket query message'|trans }}</span>
</div>
<!-- //Field -->
<!-- Field -->
<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>
<!-- //Field -->
{% if recaptchaDetail and recaptchaDetail.isActive == true %}
<div class="clearfix"></div>
<div class="g-recaptcha" data-sitekey="{{ recaptchaDetail.siteKey }}"></div>
<div class="clearfix"></div>
{% else %}
<!-- Recaptcha will not support -->
{% endif %}
{# CustomFields #}
{% set CustomerCustomFields = ticket_service.getCustomerCreateTicketCustomFieldSnippet() %}
{% set removeMe = [] %}
{% if CustomerCustomFields %}
<div class="custom-fields clearfix">
{% for key, customField in CustomerCustomFields %}
<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>
</section>
</div>
</div>
{% if user_service.isfileExists('apps/uvdesk/form-component') %}
{{ include('@_uvdesk_extension_uvdesk_form_component/CustomFields/customFieldValidation.html.twig') }}
{% elseif user_service.isfileExists('apps/uvdesk/custom-fields') %}
{{ include('@_uvdesk_extension_uvdesk_custom_fields/CustomFields/customFieldValidation.html.twig') }}
{% endif %}
{% endblock %}
{% block footer %}
{% set isTicketViewPage = (app.user.id is defined ? true : false) %}
{{ parent() }}
{% if recaptchaDetail and recaptchaDetail.isActive == true %}
<script src='https://www.google.com/recaptcha/api.js'></script>
{% endif %}
{{ include("@UVDeskSupportCenter/Templates/tinyMCE.html.twig") }}
{{ include('@UVDeskCoreFramework/Templates/attachment.html.twig') }}
<script type="text/javascript">
{% if user_service.isfileExists('apps/uvdesk/form-component') == false %}
customFieldValidation = {};
{% endif %}
$(function () {
sfTinyMce.init({
height: '155px',
selector : '#create-reply',
images_upload_url: "",
setup: function(editor) {
},
plugins: [
],
toolbar: '| undo redo | bold italic forecolor ',
});
{% 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 : 'email',
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 }}'
},
{% if recaptchaDetail and recaptchaDetail.isActive == true %}
'g-recaptcha-response' : {
fn: function(value) {
if(grecaptcha.getResponse().length > 0)
return false;
else
return true;
},
msg : '{{ "Please select CAPTCHA"|trans }}'
}
{% endif %}
}),
urlRoot : "{{ path('helpdesk_customer_create_ticket') }}"
});
var CreateTicketForm = Backbone.View.extend({
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:not(input[type=file]), textarea, select, checkbox': 'formChanegd',
'change input[type=file]': '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.set(data);
if(this.model.isValid(true)) {
$('#create-ticket-form').submit();
$('form').find('#create-ticket-btn').attr('disabled', 'disabled');
}
},
updateCustomFields : function (e) {
var dependentFields = e.currentTarget.value;
this.$('.dependent').hide();
this.$('.dependency' + dependentFields).show();
}
});
var createticketForm = new CreateTicketForm({
el : $("#create-ticket-form"),
model : new CreateTicketModel()
});
});
</script>
{% endblock %}