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