{% set isTicketViewPage = ('helpdesk_member_ticket' == app.request.attributes.get('_route')) %}
<style>
.nav-second-level{
cursor:pointer;
list-style-type: none;
position: absolute;
border-bottom: none;
border-top: none;
z-index: 999;
left: 0;
right: 0;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.searchterm{
padding:5px;
}
</style>
<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</label>
<div class="uv-field-block">
<input autocomplete="off" id="name" name="name" class="uv-field create-ticket" type="text" value="">
<ul style="display:none;" class="nav-second-level" id="entitiesNavName">
</ul>
</div>
<span class="uv-field-info">Customer full name</span>
</div>
{# Email #}
<div class="uv-element-block">
<label class="uv-field-label">Email</label>
<div class="uv-field-block">
<input autocomplete="off" id="from" name="from" class="uv-field create-ticket" type="text" value="">
<ul style="display:none;" class="nav-second-level" id="entitiesNavEmail">
</ul>
</div>
<span class="uv-field-info">Customer email address</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</span>
{% endif %}
{# Ticket Type #}
<div class="uv-element-block">
<label class="uv-field-label">Type</label>
<div class="uv-field-block">
<select name="type" class="uv-select create-ticket" id="type">
<option value="">Select type</option>
{% for type in ticketTypeCollection %}
<option value="{{ type.id }}">{{ type.description }}</option>
{% endfor %}
</select>
</div>
<span class="uv-field-info">Choose ticket type</span>
</div>
{# Ticket Priority #}
<div class="uv-element-block">
<label class="uv-field-label">Priority</label>
<div class="uv-field-block">
<select name="priority" class="uv-select create-ticket" id="priority">
<option value="">Select priority</option>
{% for priority in ticketPriorityCollection %}
{% if(priority.id != 5) %}
<option value="{{ priority.id }}">{{ priority.description }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<span class="uv-field-info">Choose ticket priority</span>
</div>
{# Ticket Subject #}
<div class="uv-element-block">
<label class="uv-field-label">Subject</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</span>
</div>
{# Ticket Message #}
<div class="uv-element-block">
<label class="uv-field-label">Message</label>
<div class="uv-field-block">
<textarea name="reply" class="uv-field create-ticket" type="text"></textarea>
</div>
<span class="uv-field-info">Query message</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</span>
</label>
</div>
<div class="uv-element-block">
<button type="submit" id="create-ticket-btn" class="uv-btn">Create Ticket</button>
</div>
</form>
</div>
</div>
{% if not(app.request.attributes.get('_route') in ['helpdesk_member_ticket']) %}
{{ include('@UVDeskCoreFramework\\Templates\\attachment.html.twig') }}
{% endif %}
<script type="text/javascript">
$(function () {
var searchRequestName = null;
var searchRequestEmail = null;
$("#entitiesNavName").on("click", ".searchterm", function(event){
const resultado = $(this).text().split(" - email: ");
$("#name").val(resultado[0].trim()).trigger('change');
$("#from").val(resultado[1].trim()).trigger('change');
$("#entitiesNavEmail").html('')
$("#entitiesNavName").html('')
$("#entitiesNavName").hide();
$("#entitiesNavEmail").hide();
});
$("#entitiesNavEmail").on("click", ".searchterm", function(event){
const resultado = $(this).text().split(" - email: ");
$("#name").val(resultado[0].trim()).trigger('change');
$("#from").val(resultado[1].trim()).trigger('change');
$("#entitiesNavName").html('')
$("#entitiesNavEmail").html('')
$("#entitiesNavName").hide();
$("#entitiesNavEmail").hide();
});
$("#name").keyup(function() {
$("#entitiesNavName").show();
var minlength = 1;
var that = this;
var value = $(this).val();
var entitySelector = $("#entitiesNavName").html('');
if (value.length >= minlength ) {
if (searchRequestName != null)
searchRequestName.abort();
searchRequestName = $.ajax({
type: "GET",
url: "{{ path('helpdesk_member_search_customer_by_name') }}",
data: {
'q' : value
},
dataType: "text",
success: function(msg){
//we need to check if the value is the same
if (value==$(that).val()) {
var result = JSON.parse(msg);
$.each(result, function(key, arr) {
$.each(arr, function(id, value) {
if (key == 'entities') {
if (id != 'error') {
entitySelector.append('<li class="searchterm">'+value+'</li>');
} else {
entitySelector.append('<li class="errorLi ">'+value+'</li>');
}
}
});
});
}
}
});
}
});
$("#from").keyup(function() {
$("#entitiesNavEmail").show();
var minlength = 1;
var that = this;
var value = $(this).val();
var entitySelector = $("#entitiesNavEmail").html('');
if (value.length >= minlength ) {
if (searchRequestEmail != null)
searchRequestEmail.abort();
searchRequestEmail = $.ajax({
type: "GET",
url: "{{ path('helpdesk_member_search_customer_by_email') }}",
data: {
'q' : value
},
dataType: "text",
success: function(msg){
//we need to check if the value is the same
if (value==$(that).val()) {
var result = JSON.parse(msg);
$.each(result, function(key, arr) {
$.each(arr, function(id, value) {
if (key == 'entities') {
if (id != 'error') {
entitySelector.append('<li class="searchterm">'+value+'</li>');
} else {
entitySelector.append('<li class="errorLi">'+value+'</li>');
}
}
});
});
}
}
});
}
});
{% 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: {
{% if not isTicketViewPage %}
'name' : {
required : true,
msg : 'This field is mandatory'
},
'from' :
[{
required : true,
msg : 'This field is mandatory'
},{
pattern : /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/,
msg : 'Email address is invalid'
}],
{% endif %}
'type' : {
required : true,
msg : 'This field is mandatory'
},
'subject' : {
required : true,
msg : 'This field is mandatory'
},
'reply' : {
required : true,
msg : 'This field is mandatory'
},
},
urlRoot : "{{ path('helpdesk_member_create_ticket') }}"
});
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",
'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');
}
}
});
new CreateTicketForm();
});
</script>