vendor\uvdesk\support-center-bundle\Resources\views\Knowledgebase\ticket.html.twig line 1

Open in your IDE?
  1. {% extends "@UVDeskSupportCenter/Templates/layout.html.twig" %}
  2. {% block title %}{% trans %}Create Ticket{% endtrans %}{% endblock %}
  3. {% block ogtitle %}{% trans %}Create Ticket{% endtrans %}{% endblock %}
  4. {% block twtitle %}{% trans %}Create Ticket{% endtrans %}{% endblock %}
  5. {% block metaDescription %}{% trans %}create.ticket.metaDescription{% endtrans %}{% endblock %}
  6. {% block metaKeywords %}{% trans %}create.ticket.metaKeywords{% endtrans %}{% endblock %}
  7. {% set recaptchaDetail = recaptcha_service.getRecaptchaDetails() %}
  8. {% block body %}
  9.     <style>
  10.         .uv-field{
  11.             padding: 5px 10px;
  12.         }
  13.         .grammarly-fix-message-container {
  14.             overflow: visible !important;
  15.         }
  16.         .grammarly-fix-message {
  17.             max-width: 158%;
  18.         }
  19.         .uv-field-success-icon {
  20.             display: none !important;
  21.         }
  22.         .mce-path {
  23.               display: none !important;
  24.         }
  25.         
  26.         .uv-element-block label.uv-field-label.required::after {
  27.             content: "*";
  28.             color: #FC6868;
  29.             font-weight: 700;
  30.             display: inline-block;
  31.         }
  32.         .uv-paper-article.uv-paper-form {
  33.             width: fit-content;
  34.             margin: 0 auto;
  35.         }
  36.         .uv-paper-section{
  37.             width: 100% !important;
  38.             padding-right: 0px !important;
  39.         }
  40.     </style>
  41.     {% set isTicketViewPage = (app.user.id is defined ? true : false) %}
  42.     
  43.     <div class="uv-paper-article uv-paper-form">
  44.         <div class="uv-paper-section">
  45.             <section>
  46.                 <h1>{{ 'Create Ticket Request'|trans }}</h1>
  47.                 <div class="uv-form">
  48.                     <form action="{{ path('helpdesk_customer_create_ticket') }}" method="post" id="create-ticket-form" enctype="multipart/form-data">
  49.                         {% if not isTicketViewPage %}
  50.                             <!-- Field -->
  51.                             <div class="uv-element-block">
  52.                                 <label class="uv-field-label required">{{ 'Name'|trans }}</label>
  53.                                 <div class="uv-field-block">
  54.                                     <input name="name" class="uv-field create-ticket" type="text" value="{{ post.name is defined ? post.name : '' }}">
  55.                                 </div>
  56.                                 <span class="uv-field-info">{{ 'Enter your name'|trans }}</span>
  57.                             </div>
  58.                             <!-- //Field -->
  59.                             <!-- Field -->
  60.                             <div class="uv-element-block">
  61.                                 <label class="uv-field-label required">{{ 'Email'|trans }}</label>
  62.                                 <div class="uv-field-block">
  63.                                     <input name="from" class="uv-field create-ticket" type="text" value="{{ post.from is defined ? post.from : '' }}">
  64.                                 </div>
  65.                                 <span class="uv-field-info">{{ 'Enter your email'|trans }}</span>
  66.                             </div>
  67.                             <!-- //Field -->
  68.                         {% endif %}
  69.                         <!-- Field -->
  70.                         <div class="uv-element-block">
  71.                             <label class="uv-field-label required">{{ 'Type'|trans }}</label>
  72.                             <div class="uv-field-block">
  73.                                 <select name="type" class="uv-select create-ticket" id="type">
  74.                                     <option value="">{{ 'Select type'|trans }}</option>
  75.                                     {% for type in ticket_service.getTypes() %}
  76.                                         <option value="{{ type.id }}" {{ post.type is defined and post.type == type.id ? 'selected' : '' }}>{{ type.name }}</option>
  77.                                     {% endfor %}
  78.                                 </select>
  79.                             </div>
  80.                             <span class="uv-field-info">{{ 'Choose ticket type'|trans }}</span>
  81.                         </div>
  82.                         <!-- //Field -->
  83.                         <!-- Field -->
  84.                         <div class="uv-element-block">
  85.                             <label class="uv-field-label required">{{ 'Subject'|trans }}</label>
  86.                             <div class="uv-field-block">
  87.                                 <input name="subject" class="uv-field create-ticket" type="text" value="{{ post.subject is defined ? post.subject : '' }}">
  88.                             </div>
  89.                             <span class="uv-field-info">{{ 'Ticket subject'|trans }}</span>
  90.                         </div>
  91.                         <!-- //Field -->
  92.                         <!-- Field -->
  93.                         <div class="uv-element-block">
  94.                             <label class="uv-field-label required">{{ 'Message'|trans }}</label>
  95.                             <div class="uv-field-block grammarly-fix-message-container">
  96.                                 <textarea name="reply" id="create-reply" class="uv-field create-ticket grammarly-fix-message" type="text">{{ post.reply is defined ? post.reply : '' }}</textarea>
  97.                             </div>
  98.                             <span class="uv-field-info">{{ 'Ticket query message'|trans }}</span>
  99.                         </div>
  100.                         <!-- //Field -->
  101.                         <!-- Field -->
  102.                         <div class="uv-element-block attachment-block uv-no-error-success-icon" id="uv-attachment-option">
  103.                             <label>
  104.                                 <span class="uv-file-label">{{ 'Add Attachment'|trans }}</span>
  105.                             </label>
  106.                         </div>
  107.                         <!-- //Field -->
  108.                         {% if recaptchaDetail and recaptchaDetail.isActive == true %}
  109.                             <div class="clearfix"></div>
  110.                             <div class="g-recaptcha" data-sitekey="{{ recaptchaDetail.siteKey }}"></div>
  111.                             <div class="clearfix"></div>
  112.                         {% else %}
  113.                             <!-- Recaptcha will not support -->
  114.                         {% endif %}
  115.                         {# CustomFields #}
  116.                         {% set CustomerCustomFields = ticket_service.getCustomerCreateTicketCustomFieldSnippet() %}
  117.                         {% set removeMe = [] %}
  118.                         {% if CustomerCustomFields %}
  119.                             <div class="custom-fields clearfix">
  120.                                 {% for key, customField in CustomerCustomFields %}
  121.                                     <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;' : '' }}">
  122.                                         <label class="uv-field-label" for="for{{customField.name~customField.id}}">{{ customField.name }}</label>
  123.                                         {% if customField.fieldType == 'text' %}
  124.                                             <div class="uv-field-block">
  125.                                                 <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}}">
  126.                                             </div>
  127.                                         {% elseif customField.fieldType in ['date', 'time', 'datetime'] %}
  128.                                             <div class="uv-field-block">
  129.                                                 <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="">
  130.                                             </div>
  131.                                         {% elseif customField.fieldType == 'textarea' %}
  132.                                             <div class="uv-field-block">
  133.                                                 <textarea name="customFields[{{customField.id}}]" class="uv-field create-ticket" {{ customField.required ? "required" : "" }} id="for{{customField.name~customField.id}}"></textarea>
  134.                                             </div>
  135.                                         {% elseif customField.fieldType in ['file'] %}
  136.                                             <div class="uv-field-block">
  137.                                                 <input type="file" name="customFields[{{customField.id}}]" class="uv-field create-ticket" {{ customField.required ? "required" : "" }} id="for{{customField.name~customField.id}}">
  138.                                             </div>
  139.                                         {% elseif customField.fieldType in ['select'] %}
  140.                                             {% if customField.customFieldValues is not empty %}
  141.                                                 <div class="uv-field-block">
  142.                                                     <select name="customFields[{{customField.id}}]" class="uv-select create-ticket" id="for{{customField.name~customField.id}}" {{ customField.required ? "required" : "" }}>
  143.                                                         <option value="">{{ 'Select option' }}</option>
  144.                                                         {% for customFieldValues in customField.customFieldValues %}
  145.                                                             <option value="{{customFieldValues.id}}">{{customFieldValues.name}}</option>
  146.                                                         {% endfor %}
  147.                                                     </select>
  148.                                                 </div>
  149.                                             {% else %}
  150.                                                 <!--Hide this beacause choices aren't available-->
  151.                                                 {% set removeMe = removeMe|merge(["for"~customField.name~customField.id]) %}
  152.                                             {% endif %}
  153.                                         {% elseif customField.fieldType in ['checkbox'] %}
  154.                                             {% if customField.customFieldValues is not empty %}
  155.                                                 {% for customFieldValues in customField.customFieldValues %}
  156.                                                     <div class="uv-split-field">
  157.                                                         <label>
  158.                                                             <div class="uv-checkbox">
  159.                                                                 <input type="checkbox" name="customFields[{{customField.id}}][]" value="{{customFieldValues.id}}" id="for{{customFieldValues.name~customFieldValues.id}}" class="create-ticket"/>
  160.                                                                 <span class="uv-checkbox-view"></span>
  161.                                                             </div>
  162.                                                             <span class="uv-radio-label" for="for{{customFieldValues.name~customFieldValues.id}}">{{ customFieldValues.name }}</span>
  163.                                                         </label>
  164.                                                     </div>
  165.                                                 {% endfor %}
  166.                                             {% else %}
  167.                                                 <!--Hide this beacause choices aren't available-->
  168.                                                 {% set removeMe = removeMe|merge(["for"~customField.name~customField.id]) %}
  169.                                             {% endif %}
  170.                                         {% elseif customField.fieldType in ['radio'] %}
  171.                                             {% if customField.customFieldValues is not empty %}
  172.                                                 {% for customFieldValues in customField.customFieldValues %}
  173.                                                     <div class="uv-split-field">
  174.                                                         <label>
  175.                                                             <div class="uv-radio">
  176.                                                                 <input type="radio" name="customFields[{{customField.id}}]" value="{{customFieldValues.id}}" id="for{{customFieldValues.name~customFieldValues.id}}" class="create-ticket"/>
  177.                                                                 <span class="uv-radio-view"></span>
  178.                                                             </div>
  179.                                                             <span class="uv-radio-label" for="for{{customFieldValues.name~customFieldValues.id}}">{{ customFieldValues.name }}</span>
  180.                                                         </label>
  181.                                                     </div>
  182.                                                 {% endfor %}
  183.                                             {% else %}
  184.                                                 <!--Hide this beacause choices aren't available-->
  185.                                                 {% set removeMe = removeMe|merge(["for"~customField.name~customField.id]) %}
  186.                                             {% endif %}
  187.                                         {% endif %}
  188.                                         {% if formErrors['customFields['~customField.id~']'] is defined %}
  189.                                             <div class="text-danger">{{formErrors['customFields['~customField.id~']']}}</div>
  190.                                         {% endif %}
  191.                                     </div>
  192.                                 {% endfor %}
  193.                             </div>
  194.                         {% endif %}
  195.                         <div class="uv-element-block">
  196.                             <button type="submit" id="create-ticket-btn" class="uv-btn">{{ 'Create Ticket'|trans }}</button>
  197.                         </div>
  198.                     </form>
  199.                 </div>
  200.             </section>
  201.         </div>
  202.     </div>
  203.     {% if user_service.isFileExists('apps/uvdesk/form-component') %}
  204.         {{ include('@_uvdesk_extension_uvdesk_form_component/CustomFields/customFieldValidation.html.twig') }} 
  205.     {% elseif user_service.isFileExists('apps/uvdesk/custom-fields') %}
  206.         {{ include('@_uvdesk_extension_uvdesk_custom_fields/CustomFields/customFieldValidation.html.twig') }} 
  207.     {% endif %}
  208. {% endblock %}
  209. {% block footer %}
  210.     {% set isTicketViewPage = (app.user.id is defined ? true : false) %}
  211.     
  212.     {{ parent() }}
  213.     {% if recaptchaDetail and recaptchaDetail.isActive == true %}
  214.         <script src='https://www.google.com/recaptcha/api.js'></script>
  215.     {% endif %}
  216.     {{ include("@UVDeskSupportCenter/Templates/tinyMCE.html.twig") }}
  217.     {{ include('@UVDeskCoreFramework/Templates/attachment.html.twig') }}
  218.     <script type="text/javascript">
  219.         {% if user_service.isFileExists('apps/uvdesk/form-component') == false %}
  220.             customFieldValidation = {};
  221.         {% endif %}
  222.         $(function () {
  223.             sfTinyMce.init({
  224.                 height: '155px',
  225.                 selector : '#create-reply',
  226.                 images_upload_url: "",
  227.                 setup: function(editor) {
  228.                 },
  229.                 plugins: [
  230.                 ],
  231.                 toolbar: '| undo redo | bold italic forecolor ',
  232.             });
  233.             {% if (removeMe is defined) %}
  234.                 $.each({{ removeMe | json_encode |raw }}, function(key, value){
  235.                     $('label[for="' + value + '"]').parent().hide();
  236.                 });
  237.             {% endif %}
  238.             $('.uv-header-date').datetimepicker({
  239.                 format: 'YYYY-MM-DD',
  240.             });
  241.             $('.uv-header-time').datetimepicker({
  242.                 format: 'LT',
  243.             });
  244.             $('.uv-header-datetime').datetimepicker({
  245.                 format: 'YYYY-MM-DD H:m:s'
  246.             });
  247.             var CreateTicketModel = Backbone.Model.extend({
  248.                 idAttribute : "id",
  249.                 defaults : {
  250.                     path : "",
  251.                 },
  252.                 validation: _.extend(customFieldValidation, {
  253.                     {% if not isTicketViewPage %}
  254.                         'name' : {
  255.                             required : true,
  256.                             msg : '{{ "This field is mandatory"|trans }}'
  257.                         },
  258.                         'from' :[{
  259.                             required : true,
  260.                             msg : '{{ "This field is mandatory"|trans }}'
  261.                         }, {
  262.                             pattern : 'email',
  263.                             msg : '{{ "Email address is invalid"|trans }}'
  264.                         }],
  265.                     {% endif %}
  266.                     'type' : {
  267.                         required : true,
  268.                         msg : '{{ "This field is mandatory"|trans }}'
  269.                     },
  270.                     'subject' : {
  271.                         required : true,
  272.                         msg : '{{ "This field is mandatory"|trans }}'
  273.                     },
  274.                     'reply' : {
  275.                         fn: function(value) {
  276.                             var content = tinyMCE.activeEditor.getContent();
  277.                             content = content.replace(/&nbsp;/g, '').replace(/<[^>]*>/g, '');
  278.                             if (content.trim() == '') {
  279.                                 return true;
  280.                             } else {
  281.                                 return false;
  282.                             }
  283.                             if (! tinyMCE.get("uv-edit-create-thread"))
  284.                                 return false;
  285.                                 
  286.                             var html = tinyMCE.get("uv-edit-create-thread").getContent();
  287.                             if (app.appView.stripHTML(html) != '') {
  288.                                 return false;
  289.                             }
  290.                             return true;
  291.                         },
  292.                         msg : '{{ "This field is mandatory"|trans }}'
  293.                     },
  294.                     {% if recaptchaDetail and recaptchaDetail.isActive == true %}
  295.                         'g-recaptcha-response' : {
  296.                             fn: function(value) {
  297.                                 if (grecaptcha.getResponse().length > 0)
  298.                                     return false;
  299.                                 else
  300.                                     return true;
  301.                             },
  302.                             msg : '{{ "Please select CAPTCHA"|trans }}'
  303.                         }
  304.                     {% endif %}
  305.                 }),
  306.                 urlRoot : "{{ path('helpdesk_customer_create_ticket') }}"
  307.             });
  308.             var CreateTicketForm = Backbone.View.extend({
  309.                 initialize : function() {
  310.                     Backbone.Validation.bind(this);
  311.                     var jsonContext = JSON.parse('{{ errors is defined ? errors|raw : "{}"  }}');
  312.                     for (var field in jsonContext) {
  313.                         Backbone.Validation.callbacks.invalid(this, field, jsonContext[field], 'input');
  314.                     }
  315.                 },
  316.                 events : {
  317.                     'click #create-ticket-btn' : "saveTicket",
  318.                     'change #type' : "updateCustomFields",
  319.                     'blur input:not(input[type=file]), textarea, select, checkbox': 'formChanged',
  320.                     'change input[type=file]': 'formChanged',
  321.                 },
  322.                 formChanged: function(e) {
  323.                     this.model.set(Backbone.$(e.currentTarget).attr('name'), Backbone.$(e.currentTarget).val())
  324.                     this.model.isValid([Backbone.$(e.currentTarget).attr('name')])
  325.                 },
  326.                 saveTicket : function (e) {
  327.                     e.preventDefault();
  328.                     var currentElement = Backbone.$(e.currentTarget);
  329.                     var data = currentElement.closest('form').serializeObject();
  330.                     this.model.set(data);
  331.                     if (this.model.isValid(true)) {
  332.                         $('#create-ticket-form').submit();
  333.                         $('form').find('#create-ticket-btn').attr('disabled', 'disabled');
  334.                     }
  335.                 },
  336.                 updateCustomFields : function (e) {
  337.                     var dependentFields = e.currentTarget.value;
  338.                     this.$('.dependent').hide();
  339.                     this.$('.dependency' + dependentFields).show();
  340.                 }
  341.             });
  342.             var createticketForm = new CreateTicketForm({
  343.                 el : $("#create-ticket-form"),
  344.                 model : new CreateTicketModel()
  345.             });
  346.         });
  347.     </script>
  348. {% endblock %}