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. .uv-paper-article.uv-paper-form {
  32. width: fit-content;
  33. margin: 0 auto;
  34. }
  35. .uv-paper-section{
  36. width: 100% !important;
  37. padding-right: 0px !important;
  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. {% set isTicketViewPage = (app.user.id is defined ? true : false) %}
  209. {{ parent() }}
  210. {% if recaptchaDetail and recaptchaDetail.isActive == true %}
  211. <script src='https://www.google.com/recaptcha/api.js'></script>
  212. {% endif %}
  213. {{ include("@UVDeskSupportCenter/Templates/tinyMCE.html.twig") }}
  214. {{ include('@UVDeskCoreFramework/Templates/attachment.html.twig') }}
  215. <script type="text/javascript">
  216. {% if user_service.isFileExists('apps/uvdesk/form-component') == false %}
  217. customFieldValidation = {};
  218. {% endif %}
  219. $(function () {
  220. sfTinyMce.init({
  221. height: '155px',
  222. selector : '#create-reply',
  223. images_upload_url: "",
  224. setup: function(editor) {
  225. },
  226. plugins: [
  227. ],
  228. toolbar: '| undo redo | bold italic forecolor ',
  229. });
  230. {% if (removeMe is defined) %}
  231. $.each({{ removeMe | json_encode |raw }}, function(key, value){
  232. $('label[for="' + value + '"]').parent().hide();
  233. });
  234. {% endif %}
  235. $('.uv-header-date').datetimepicker({
  236. format: 'YYYY-MM-DD',
  237. });
  238. $('.uv-header-time').datetimepicker({
  239. format: 'LT',
  240. });
  241. $('.uv-header-datetime').datetimepicker({
  242. format: 'YYYY-MM-DD H:m:s'
  243. });
  244. var CreateTicketModel = Backbone.Model.extend({
  245. idAttribute : "id",
  246. defaults : {
  247. path : "",
  248. },
  249. validation: _.extend(customFieldValidation, {
  250. {% if not isTicketViewPage %}
  251. 'name' : {
  252. required : true,
  253. msg : '{{ "This field is mandatory"|trans }}'
  254. },
  255. 'from' :[{
  256. required : true,
  257. msg : '{{ "This field is mandatory"|trans }}'
  258. }, {
  259. pattern : 'email',
  260. msg : '{{ "Email address is invalid"|trans }}'
  261. }],
  262. {% endif %}
  263. 'type' : {
  264. required : true,
  265. msg : '{{ "This field is mandatory"|trans }}'
  266. },
  267. 'subject' : {
  268. required : true,
  269. msg : '{{ "This field is mandatory"|trans }}'
  270. },
  271. 'reply' : {
  272. fn: function(value) {
  273. var content = tinyMCE.activeEditor.getContent();
  274. content = content.replace(/&nbsp;/g, '').replace(/<[^>]*>/g, '');
  275. if (content.trim() == '') {
  276. return true;
  277. } else {
  278. return false;
  279. }
  280. if (! tinyMCE.get("uv-edit-create-thread"))
  281. return false;
  282. var html = tinyMCE.get("uv-edit-create-thread").getContent();
  283. if (app.appView.stripHTML(html) != '') {
  284. return false;
  285. }
  286. return true;
  287. },
  288. msg : '{{ "This field is mandatory"|trans }}'
  289. },
  290. {% if recaptchaDetail and recaptchaDetail.isActive == true %}
  291. 'g-recaptcha-response' : {
  292. fn: function(value) {
  293. if (grecaptcha.getResponse().length > 0)
  294. return false;
  295. else
  296. return true;
  297. },
  298. msg : '{{ "Please select CAPTCHA"|trans }}'
  299. }
  300. {% endif %}
  301. }),
  302. urlRoot : "{{ path('helpdesk_customer_create_ticket') }}"
  303. });
  304. var CreateTicketForm = Backbone.View.extend({
  305. initialize : function() {
  306. Backbone.Validation.bind(this);
  307. var jsonContext = JSON.parse('{{ errors is defined ? errors|raw : "{}" }}');
  308. for (var field in jsonContext) {
  309. Backbone.Validation.callbacks.invalid(this, field, jsonContext[field], 'input');
  310. }
  311. },
  312. events : {
  313. 'click #create-ticket-btn' : "saveTicket",
  314. 'change #type' : "updateCustomFields",
  315. 'blur input:not(input[type=file]), textarea, select, checkbox': 'formChanged',
  316. 'change input[type=file]': 'formChanged',
  317. },
  318. formChanged: function(e) {
  319. this.model.set(Backbone.$(e.currentTarget).attr('name'), Backbone.$(e.currentTarget).val())
  320. this.model.isValid([Backbone.$(e.currentTarget).attr('name')])
  321. },
  322. saveTicket : function (e) {
  323. e.preventDefault();
  324. var currentElement = Backbone.$(e.currentTarget);
  325. var data = currentElement.closest('form').serializeObject();
  326. this.model.set(data);
  327. if (this.model.isValid(true)) {
  328. $('#create-ticket-form').submit();
  329. $('form').find('#create-ticket-btn').attr('disabled', 'disabled');
  330. }
  331. },
  332. updateCustomFields : function (e) {
  333. var dependentFields = e.currentTarget.value;
  334. this.$('.dependent').hide();
  335. this.$('.dependency' + dependentFields).show();
  336. }
  337. });
  338. var createticketForm = new CreateTicketForm({
  339. el : $("#create-ticket-form"),
  340. model : new CreateTicketModel()
  341. });
  342. });
  343. </script>
  344. {% endblock %}