vendor/uvdesk/core-framework/Resources/views/Snippets/createMemberTicket.html.twig line 1

Open in your IDE?
  1. {% set isTicketViewPage = ('helpdesk_member_ticket' == app.request.attributes.get('_route')) %}
  2. <style>
  3.     .nav-second-level{
  4.         cursor:pointer;
  5.         list-style-type: none;
  6.         position: absolute;
  7.         border-bottom: none;
  8.         border-top: none;
  9.         z-index: 999;
  10.         left: 0;
  11.         right: 0;
  12.         background-color: #fff;
  13.         border-bottom: 1px solid #d4d4d4;
  14.     }
  15.     .searchterm{
  16.         padding:5px;
  17.     }
  18. </style>
  19. <div class="uv-pop-up-overlay uv-no-error-success-icon" id="create-ticket-modal">
  20.     <div class="uv-pop-up-box uv-pop-up-wide">
  21.         <span class="uv-pop-up-close"></span>
  22.         <h2>Create Ticket</h2>
  23.         <form action="{{ path('helpdesk_member_create_ticket') }}" method="post" id="create-ticket-form" enctype="multipart/form-data">
  24.             {# Customer Details #}
  25.             {% if not isTicketViewPage %}
  26.                 {# Name #}
  27.                 <div class="uv-element-block">
  28.                     <label class="uv-field-label">Name</label>
  29.                     <div class="uv-field-block">
  30.                         <input autocomplete="off" id="name"  name="name" class="uv-field create-ticket" type="text" value="">
  31.                         <ul style="display:none;"  class="nav-second-level" id="entitiesNavName">
  32.                         </ul>
  33.             </div>
  34.                     <span class="uv-field-info">Customer full name</span>
  35.                 </div>
  36.                 {# Email #}
  37.                 <div class="uv-element-block">
  38.                     <label class="uv-field-label">Email</label>
  39.                     <div class="uv-field-block">
  40.                         <input autocomplete="off" id="from" name="from" class="uv-field create-ticket" type="text" value="">
  41.                        <ul style="display:none;"   class="nav-second-level" id="entitiesNavEmail">
  42.                         </ul>
  43.             </div>
  44.                     <span class="uv-field-info">Customer email address</span>
  45.                 </div>
  46.             {% else %}
  47.                 {# Retrieve customer details from the current ticket being visited #}
  48.                 <span class="uv-field-info">Ticket will be created with current ticket's customer</span>
  49.             {% endif %}
  50.             {# Ticket Type #}
  51.             <div class="uv-element-block">
  52.                 <label class="uv-field-label">Type</label>
  53.                 <div class="uv-field-block">
  54.                     <select name="type" class="uv-select create-ticket" id="type">
  55.                         <option value="">Select type</option>
  56.                         {% for type in ticketTypeCollection %}
  57.                             <option value="{{ type.id }}">{{ type.description }}</option>
  58.                         {% endfor %}
  59.                     </select>
  60.                 </div>
  61.                 
  62.                 <span class="uv-field-info">Choose ticket type</span>
  63.             </div>
  64.             {# Ticket Priority #}
  65.             <div class="uv-element-block">
  66.                 <label class="uv-field-label">Priority</label>
  67.                 <div class="uv-field-block">
  68.                     <select name="priority" class="uv-select create-ticket" id="priority">
  69.                         <option value="">Select priority</option>
  70.                         {% for priority in ticketPriorityCollection %}
  71.                               {%  if(priority.id != 5) %}
  72.                   <option value="{{ priority.id }}">{{ priority.description }}</option>
  73.                                {% endif %}
  74.             {% endfor %}
  75.                     </select>
  76.                 </div>
  77.                 <span class="uv-field-info">Choose ticket priority</span>
  78.             </div>
  79.             {# Ticket Subject #}
  80.             <div class="uv-element-block">
  81.                 <label class="uv-field-label">Subject</label>
  82.                 <div class="uv-field-block">
  83.                     <input name="subject" class="uv-field create-ticket" type="text" value="">
  84.                 </div>
  85.                 <span class="uv-field-info">Ticket subject</span>
  86.             </div>
  87.             {# Ticket Message #}
  88.             <div class="uv-element-block">
  89.                 <label class="uv-field-label">Message</label>
  90.                 <div class="uv-field-block">
  91.                     <textarea name="reply" class="uv-field create-ticket" type="text"></textarea>
  92.                 </div>
  93.                 
  94.                 <span class="uv-field-info">Query message</span>
  95.             </div>
  96.             {# Ticket Attachment #}
  97.             <div class="uv-element-block attachment-block uv-no-error-success-icon" id="uv-attachment-option">
  98.                 <label>
  99.                     <span class="uv-file-label">Add Attachment</span>
  100.                 </label>
  101.             </div>
  102.             <div class="uv-element-block">
  103.                 <button type="submit" id="create-ticket-btn" class="uv-btn">Create Ticket</button>
  104.             </div>
  105.         </form>
  106.     </div>
  107. </div>
  108. {% if not(app.request.attributes.get('_route') in ['helpdesk_member_ticket']) %}
  109.     {{ include('@UVDeskCoreFramework\\Templates\\attachment.html.twig') }}
  110. {% endif %}
  111. <script type="text/javascript">
  112.     $(function () {
  113.      var searchRequestName = null;
  114.         var searchRequestEmail = null;
  115.         $("#entitiesNavName").on("click", ".searchterm", function(event){
  116.             const resultado = $(this).text().split(" - email: ");
  117.             $("#name").val(resultado[0].trim()).trigger('change');
  118.             $("#from").val(resultado[1].trim()).trigger('change');
  119.             $("#entitiesNavEmail").html('')
  120.             $("#entitiesNavName").html('')
  121.             $("#entitiesNavName").hide();
  122.             $("#entitiesNavEmail").hide();
  123.         });
  124.         $("#entitiesNavEmail").on("click", ".searchterm", function(event){
  125.             const resultado = $(this).text().split(" - email: ");
  126.             $("#name").val(resultado[0].trim()).trigger('change');
  127.             $("#from").val(resultado[1].trim()).trigger('change');
  128.             $("#entitiesNavName").html('')
  129.             $("#entitiesNavEmail").html('')
  130.             $("#entitiesNavName").hide();
  131.             $("#entitiesNavEmail").hide();
  132.         });
  133.         $("#name").keyup(function() {
  134.                 $("#entitiesNavName").show();
  135.                 var minlength = 1;
  136.                 var that = this;
  137.                 var value = $(this).val();
  138.                 var entitySelector = $("#entitiesNavName").html('');
  139.                 if (value.length >= minlength ) {
  140.                     if (searchRequestName != null)
  141.                         searchRequestName.abort();
  142.                     searchRequestName = $.ajax({
  143.                         type: "GET",
  144.                         url: "{{ path('helpdesk_member_search_customer_by_name') }}",
  145.                         data: {
  146.                             'q' : value
  147.                         },
  148.                         dataType: "text",
  149.                         success: function(msg){
  150.                             //we need to check if the value is the same
  151.                             if (value==$(that).val()) {
  152.                                 var result = JSON.parse(msg);
  153.                                 $.each(result, function(key, arr) {
  154.                                     $.each(arr, function(id, value) {
  155.                                         if (key == 'entities') {
  156.                                             if (id != 'error') {
  157.                                                 entitySelector.append('<li class="searchterm">'+value+'</li>');
  158.                                             } else {
  159.                                                 entitySelector.append('<li class="errorLi ">'+value+'</li>');
  160.                                             }
  161.                                         }
  162.                                     });
  163.                                 });
  164.                             }
  165.                         }
  166.                     });
  167.                 }
  168.         });
  169.         $("#from").keyup(function() {
  170.             $("#entitiesNavEmail").show();
  171.             var minlength = 1;
  172.             var that = this;
  173.             var value = $(this).val();
  174.             var entitySelector = $("#entitiesNavEmail").html('');
  175.             if (value.length >= minlength ) {
  176.                 if (searchRequestEmail != null)
  177.                     searchRequestEmail.abort();
  178.                 searchRequestEmail = $.ajax({
  179.                     type: "GET",
  180.                     url: "{{ path('helpdesk_member_search_customer_by_email') }}",
  181.                     data: {
  182.                         'q' : value
  183.                     },
  184.                     dataType: "text",
  185.                     success: function(msg){
  186.                         //we need to check if the value is the same
  187.                         if (value==$(that).val()) {
  188.                             var result = JSON.parse(msg);
  189.                             $.each(result, function(key, arr) {
  190.                                 $.each(arr, function(id, value) {
  191.                                     if (key == 'entities') {
  192.                                         if (id != 'error') {
  193.                                             entitySelector.append('<li class="searchterm">'+value+'</li>');
  194.                                         } else {
  195.                                             entitySelector.append('<li class="errorLi">'+value+'</li>');
  196.                                         }
  197.                                     }
  198.                                 });
  199.                             });
  200.                         }
  201.                     }
  202.                 });
  203.             }
  204.         });
  205.         {% if(removeMe is defined) %}
  206.             $.each({{ removeMe | json_encode |raw }}, function(key, value){
  207.                 $('label[for="' + value + '"]').parent().hide();
  208.             });
  209.         {% endif %}
  210.         $('.uv-header-date').datetimepicker({
  211.             format: 'YYYY-MM-DD',
  212.         });
  213.         $('.uv-header-time').datetimepicker({
  214.             format: 'LT',
  215.         });
  216.         $('.uv-header-datetime').datetimepicker({
  217.             format: 'YYYY-MM-DD H:m:s'
  218.         });
  219.         var CreateTicketModel = Backbone.Model.extend({
  220.             idAttribute : "id",
  221.             defaults : {
  222.                 path : "",
  223.             },
  224.             validation: {
  225.                 {% if not isTicketViewPage %}
  226.                     'name' : {
  227.                         required : true,
  228.                         msg : 'This field is mandatory'
  229.                     },
  230.                     'from' : 
  231.                     [{
  232.                         required : true,
  233.                         msg : 'This field is mandatory'
  234.                     },{
  235.                         pattern : /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/,
  236.                         msg : 'Email address is invalid'
  237.                     }],
  238.                 {% endif %}
  239.                 'type' : {
  240.                     required : true,
  241.                     msg : 'This field is mandatory'
  242.                 },
  243.                 'subject' : {
  244.                     required : true,
  245.                     msg : 'This field is mandatory'
  246.                 },
  247.                 'reply' : {
  248.                     required : true,
  249.                     msg : 'This field is mandatory'
  250.                 },
  251.             },
  252.             urlRoot : "{{ path('helpdesk_member_create_ticket') }}"
  253.         });
  254.         var CreateTicketForm = Backbone.View.extend({
  255.             el : $("#create-ticket-modal #create-ticket-form"),
  256.             model: new CreateTicketModel(),
  257.             initialize : function() {
  258.                 Backbone.Validation.bind(this);
  259.                 var jsonContext = JSON.parse('{{ errors is defined ? errors|raw : "{}"  }}');
  260.                 for (var field in jsonContext) {
  261.                     Backbone.Validation.callbacks.invalid(this, field, jsonContext[field], 'input');
  262.                 }
  263.             },
  264.             events : {
  265.                 'click #create-ticket-btn': "saveTicket",
  266.                 'blur input.create-ticket:not(input[type=file]), textarea.create-ticket, select.create-ticket, checkbox.create-ticket': 'formChanegd',
  267.                 'change input[type=file].create-ticket': 'formChanegd',
  268.             },
  269.             formChanegd: function(e) {
  270.                 this.model.set(Backbone.$(e.currentTarget).attr('name'), Backbone.$(e.currentTarget).val())
  271.                 this.model.isValid([Backbone.$(e.currentTarget).attr('name')])
  272.             },
  273.             saveTicket: function (e) {
  274.                 e.preventDefault();
  275.                 var currentElement = Backbone.$(e.currentTarget);
  276.                 var data = currentElement.closest('form').serializeObject();
  277.                 this.model = new CreateTicketModel();
  278.                 this.model.set(data);
  279.                 Backbone.Validation.bind(this);
  280.                 
  281.                 if (this.model.isValid(true)) {
  282.                     $('#create-ticket-form').submit();
  283.                     $('form').find('#create-ticket-btn').attr('disabled', 'disabled');
  284.                 }
  285.             }
  286.         });
  287.         new CreateTicketForm();
  288.     });    
  289. </script>