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