vendor/uvdesk/automation-bundle/Resources/views/Workflow/conditions.html.twig line 1

Open in your IDE?
  1. <script type="text/template" id="select-add">
  2.     <% if (typeof(operation) != 'undefined' && operation == '||') { %>
  3.         <div class="uv-workflow-hr-plank">
  4.             <div class="uv-workflow-hr-or">
  5.                 <span class="uv-workflow-or">{{ 'or'|trans }}</span>
  6.             </div>
  7.         </div>
  8.         <input type="hidden" name="conditions[<%- keyNo %>][operation]" value="||">
  9.     <% } else if (typeof(operation) != 'undefined' && operation == '&&') { %>
  10.         <div class="uv-workflow-hr-plank">
  11.             <div class="uv-workflow-hr-and">
  12.                 <span class="uv-workflow-and">{{ 'and'|trans }}</span>
  13.             </div>
  14.         </div>
  15.         <input type="hidden" name="conditions[<%- keyNo %>][operation]" value="&&">
  16.     <% } %>
  18.     <select class="uv-select uv-select-grouped select-condition wfCondition" name="conditions[<%- keyNo %>][type]" style="width: 200px;">
  19.         <option value="">{{ 'Select a Condition'|trans }}</option>
  20.         <% for(var key in conditions) { %>
  21.             <optgroup label="<%-key%>">
  22.                 <% for (var key2 in conditions[key]) { %>
  23.                     <option value="<%-conditions[key][key2].value%>" data-match="<%-conditions[key][key2].match%>" <%- typeof(type) != 'undefined' && type == conditions[key][key2].value ? 'selected' : ''%>><%- conditions[key][key2].lable %></option>
  24.                 <% } %>
  25.             </optgroup>
  26.         <% } %>
  27.     </select>
  29.     <span class="select-match">
  30.     </span>
  32.     <span class="values" style="display: inline-block;">
  33.         <a class="uv-btn-tag remove-tr" href="#"><span class="uv-icon-remove-dark-box"></a>
  34.     </span>
  35.     <p class="uv-field-message" style="display: none;"></p>
  36. </script>
  38. <script type="text/template" id="match-add">
  39.     <select class="uv-select uv-select-grouped wfConditionMatch" name="conditions[<%- keyNo %>][match]" style="width: 200px;">
  40.         <% for(var key in matchArray){ %>
  41.             <option value="<%= matchArray[key].value %>" <%- typeof(match) != 'undefined' && match == matchArray[key].value ? 'selected' : ''%>><%= matchArray[key].lable %></option>
  42.         <% } %>
  43.     </select>
  44. </script>
  46. <script type="text/template" id="value-text">
  47.     <% if (typeof(addDate) != 'undefined' && addDate) { %>
  48.         <span class="date value-container">
  49.             <input name="conditions[<%- keyNo %>][value]" type="text" class="uv-field form-control uv-date-picker date wfConditionValue" data-date-format="<%- fieldType == 'time' ? 'LT' : (fieldType == 'datetime' ? 'YYYY-MM-DD H:m:s' : 'YYYY-MM-DD') %>" value="<%- typeof(value) != 'undefined' ? value : '' %>" style="width: 200px;">
  50.             <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
  51.         </span>
  52.     <% } else { %>
  53.         <span class="value-container">
  54.             <input type="text" name="conditions[<%- keyNo %>][value]" class="uv-field wfConditionValue" value="<%- typeof(value) != 'undefined' ? value : ''%>" style="width: 200px;" />
  55.         </span>
  56.     <% } %>
  57. </script>
  59. <script type="text/template" id="value-select">
  60.     <select class="uv-select uv-select-grouped select-value wfConditionValue" name="conditions[<%- keyNo %>][value]" style="width: 200px;">
  61.         <option>{{ 'Loading...'|trans }}</option>
  62.     </select>
  63. </script>
  65. <script type="text/template" id="value-select-option">
  66.     <option value="<%= id %>" <%- typeof(value) != 'undefined' && value == id ? 'selected' : ''%>><%= name %></option>
  67. </script>
  69. <script type="text/javascript">
  70.     if (typeof(sB) == 'undefined') {
  71.         var sB = {};
  72.     }
  74.     sB.conditionRow = 0;
  75.     sB.JsonConditions = JSON.parse("{{ uvdesk_automations.getWorkflowConditions() | json_encode | e('js') }}");
  76.     sB.MatchConditions = JSON.parse("{{ uvdesk_automations.getWorkflowMatchConditions() | json_encode | e('js') }}");
  78.     sB.Collection = Backbone.Collection.extend({
  79.         baseUrl: "{{ path('helpdesk_member_workflow_condition_options_xhr') }}",
  80.         fetchResult: function(dataMatch) {
  81.             this.url = this.baseUrl + '/' + dataMatch;
  82.             return this.fetch();
  83.         },
  84.     });
  86.     sB.SelectView = Backbone.View.extend({
  87.         tagName: 'div',
  88.         className: 'uv-field-block workflow-condition',
  89.         selectTemplate: _.template($('#select-add').html()),
  90.         matchTemplate: _.template($('#match-add').html()),
  91.         valueTextTemplate: _.template($('#value-text').html()),
  92.         valueSelectTemplate: _.template($('#value-select').html()),
  93.         valueSelectOptionTemplate: _.template($('#value-select-option').html()),
  94.         events: {
  95.             'change .select-condition': 'selectMatch',
  96.             'click .remove-tr': 'removeTr'
  97.         },
  98.         initialize: function() {
  99.             this.disable = false;
  100.             this.keyNo = sB.conditionRow;
  101.             sB.conditionRow++;
  102.         },
  103.         render: function() {
  104.             var objKey = ((typeof(sB.PrevEvent) != 'undefined' && sB.PrevEvent) ? sB.PrevEvent : 'ticket');
  105.             this.$el.html(this.selectTemplate(_.extend(this.model, {'keyNo': this.keyNo, 'conditions': sB.JsonConditions[objKey]})));
  107.             if (objKey == 'ticket' || objKey == 'task') {
  108.                 $('#conditions').prev('.uv-hr').fadeIn(10);
  109.                 $('#conditions').fadeIn(10);
  110.             } else {
  111.                 $('#conditions').prev('.uv-hr').fadeOut(10);
  112.                 $('#conditions').fadeOut(10);
  113.                 this.$el.empty();
  114.             }
  116.             return this;
  117.         },
  118.         removeTr: function(e) {
  119.             this.remove();
  120.              sB.selectView.clearFirstTrSpan();
  121.         },
  122.         selectMatch: function(e) {
  123.             if (this.disable) {
  124.                 return;
  125.             }
  127.             var dataMatch = $(e.target).find('option').eq(e.target.selectedIndex).attr('data-match');
  128.             this.selectOpt = this.$el.find('.wfCondition');
  129.             this.siblingMatch = this.$el.find('.select-match');
  130.             this.siblingValue = this.$el.find('.values');
  131.             this.siblingMatch.find('.uv-select').remove();
  132.             this.siblingMatch.prepend(this.matchTemplate(_.extend(this.model, {'matchArray' : sB.MatchConditions[dataMatch], 'keyNo': this.keyNo})));
  133.             this.siblingValue.find('.value-container, .uv-select, .form-group, .form-control, .input-group.date').remove();
  134.             if (dataMatch == 'string' || dataMatch == 'email' || dataMatch == 'number') {
  135.                 this.siblingValue.prepend(this.valueTextTemplate(_.extend(this.model, {'addDate' : false, 'keyNo': this.keyNo})));
  136.             } else if(dataMatch == 'date' || dataMatch == 'datetime' || dataMatch == 'time') {
  137.                 this.siblingValue.prepend(this.valueTextTemplate(_.extend(this.model, {'addDate' : true, 'fieldType': dataMatch, 'keyNo': this.keyNo})));
  138.                 this.datePicker();
  139.             } else if(dataMatch == 'select') {
  140.                 this.selectOpt.prop('disabled', true);
  141.                 this.disable = true;
  142.                 this.siblingValue.prepend(this.valueSelectTemplate(_.extend(this.model, {'keyNo': this.keyNo})));
  143.                 var self = this;
  144.                 sB.collection.fetchResult(e.target.value)
  145.                     .done(function(){
  146.                         $(self.el).find('.select-value').find('option').remove();
  147.                         self.addAll();
  148.                     })
  149.                     .fail(function(xhr) {
  150.                         if(url = xhr.getResponseHeader('Location'))
  151.                             window.location = url;
  152.                     });
  153.             }
  154.         },
  155.         addAll: function() {
  156.             _.each(sB.collection.models, this.addOne, this);
  157.             this.disable = false;
  158.             this.selectOpt.prop('disabled', false);
  159.         },
  160.         addOne: function(newModel) {
  161.             this.siblingValue.find('.select-value').append(this.valueSelectOptionTemplate(_.extend(this.model, newModel.attributes)));
  162.         },
  163.         datePicker: function() {
  164.             $('#conditions .date, #conditions .datetime, #conditions .time').datetimepicker();
  165.         }
  166.     });
  168.     sB.SelectViews = Backbone.View.extend({
  169.         el: '.uv-view',
  170.         target: $('#conditions .workflow-conditions-body'),
  171.         initialize: function() {
  172.             {% if formData and formData.events is defined %}
  173.                 var eventData = $.parseJSON("{{ formData.events | json_encode | e('js') }}");
  174.             {% else %}
  175.                 var eventData = {};
  176.             {% endif %}
  177.             if (eventData.length > 0) {
  178.                 if (eventData[0].event == 'ticket' || eventData[0].event == 'task') {
  179.                     $('#conditions').prev('.uv-hr').fadeIn(10);
  180.                     $('#conditions').fadeIn(10);
  181.                 }
  182.             }
  183.             {% if formData and formData.conditions is defined %}
  184.                 this.createConditions($.parseJSON("{{ formData.conditions | json_encode | e('js') }}"));
  185.             {% else %}
  186.                 this.addSelectOr();
  187.             {% endif %}
  189.              this.clearFirstTrSpan();
  190.             // this.listenTo(sB.collection, 'add', this.addOne);
  191.         },
  192.         events: {
  193.             'click .btn-and': 'addSelectAnd',
  194.             'click .btn-or': 'addSelectOr',
  195.         },
  196.         createConditions: function(conditionPreviouslyAdded) {
  197.             _.each(conditionPreviouslyAdded, this.addSelect, this);
  198.         },
  199.         addSelectAnd: function(e) {
  200.             this.model = {'operation' : '&&'};
  201.             this.addSelect(this.model);
  202.         },
  203.         addSelectOr: function(e) {
  204.             this.model = {'operation' : '||'};
  205.             this.addSelect(this.model);
  206.         },
  207.         addSelect: function(newModel) {
  208.             var view = new sB.SelectView({model: newModel});
  209.             this.target.append(viewEl = view.render().el);
  210.             this.$(viewEl).find('.wfCondition').trigger('change');
  211.         },
  212.         clearHtml: function() {
  213.             this.target.html('');
  214.             this.model = {'operation' : '&&'};
  215.             this.addSelect(this.model);
  216.              this.clearFirstTrSpan();
  217.         },
  218.         clearFirstTrSpan: function() {
  219.              var target = this.target.find('tr').eq(0);
  220.              target.find('.uv-workflow-and, input[type="hidden"]').remove();
  221.              target.find('.uv-workflow-hr-or').html('');
  222.         },
  223.         datePicker: function() {
  224.             $('.date').datetimepicker({
  225.                 format: 'YYYY-MM-DD',
  226.             });
  227.         }
  228.     });
  230.     sB.collection = new sB.Collection();
  231.     sB.selectView = new sB.SelectViews();
  232.     sB.selectView.datePicker();
  233. </script>