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

Open in your IDE?
  1. {% extends "@UVDeskCoreFramework/Templates/layout.html.twig" %}
  3. {% block title %}
  4.     {% if app.request.get('id') %}
  5.         {{ 'Edit Workflow' | trans }}
  6.     {% else %}
  7.         {{ 'Add Workflow' | trans }}
  8.     {% endif %}
  9. {% endblock %}
  11. {% block internalcss %}
  12.     @media(max-width: 767px) {
  13.         #company-workflow > .steps {
  14.             display: none;
  15.         }
  16.     }
  18.     @media(max-width: 579px) {
  19.         #company-workflow > h3 {
  20.             margin-right: 80px;
  21.         }
  23.         #company-workflow > h3 > a {
  24.             position: absolute;
  25.             top: 0px;
  26.             right: 10px;
  27.         }
  28.     }
  30.     .has-error button.btn {
  31.         border-color: #cc5965;
  32.     }
  33. {% endblock %}
  35. {% block pageContent %}
  36.     <style>
  37.         .workflow-conditions-body .workflow-condition:first-child .uv-workflow-hr-plank {
  38.             display: none;
  39.         }
  40.         .grammarly-fix-message-container {
  41.             overflow: visible !important;
  42.         }
  43.         .grammarly-fix-message {
  44.             max-width: 120%;
  45.         }
  46.         .textarea-fix-action {
  47.             max-width: 500px !important;
  48.         }
  49.     </style>
  50.     <!-- Inner Section -->
  51.     <div class="uv-inner-section">
  52.         {# Append Panel Aside #}
  53.         {% set asideTemplate = 'Webkul\\UVDesk\\CoreFrameworkBundle\\Dashboard\\AsideTemplate' %}
  54.         {% set asideSidebarReference = 'Webkul\\UVDesk\\CoreFrameworkBundle\\UIComponents\\Dashboard\\Panel\\Sidebars\\Productivity' %}
  56.         {{ uvdesk_extensibles.getRegisteredComponent(asideTemplate).renderSidebar(asideSidebarReference) | raw }}
  57.         
  58.         <!-- View -->
  59.         <div class="uv-view {% if app.request.cookies and app.request.cookies.get('uv-asideView') %}uv-aside-view{% endif %}">
  60.             <!-- Form -->
  61.             {% if app.request.get('id') is not empty %}
  62.                 <h1>{{ 'Edit Workflow'|trans }}</h1>
  63.                 <form class="workflow-form" name="form-workflow" method="POST" action="{{ path('workflows_editaction', {'id': app.request.get('id')}) }}">
  64.             {% else %}
  65.                 <h1>{{ 'New Workflow'|trans }}</h1>
  66.                 <form class="workflow-form" name="form-workflow" method="POST" action="{{ path('workflows_addaction') }}">
  67.             {% endif %}
  68.                 <!-- Workflow Description Section -->
  69.                 <div class="uv-element-block">
  70.                     <label class="uv-field-label">{{ 'Name'|trans }}</label>
  71.                     <div class="uv-field-block">
  72.                         <input name="name" class="uv-field" type="text" value="{{ formData.name is defined ? formData.name : '' }}">
  73.                         <p class="uv-field-message">{% if error.name is defined %}{{ error.name }}{% endif %}</p>
  74.                     </div>
  75.                 </div>
  77.                 <div class="uv-element-block">
  78.                     <label class="uv-field-label">{{ 'Description'|trans }}</label>
  79.                     <div class="uv-field-block grammarly-fix-message-container">
  80.                         <textarea name="description" class="uv-field grammarly-fix-message">{{ formData.description is defined ? formData.description : '' }}</textarea>
  81.                         <p class="uv-field-message">{% if error.description is defined %}{{ error.description }}{% endif %}</p>
  82.                     </div>
  83.                 </div>
  85.                 <div class="uv-element-block">
  86.                     <label class="uv-field-label">{{ 'Workflow Status'|trans }}</label>
  87.                     <div class="uv-element-block">
  88.                         <label>
  89.                             <div class="uv-checkbox">
  90.                                 <input name="status" type="checkbox" {{ formData.status is defined and formData.status == 'on' ? 'checked' : '' }}>
  91.                                 <span class="uv-checkbox-view"></span>
  92.                             </div>
  93.                             <span class="uv-checkbox-label">{{ 'Workflow is Active'|trans }}</span>
  94.                         </label>
  95.                     </div>
  96.                 </div>
  98.                 <div class="uv-hr"></div>
  99.                 <!-- // Workflow Description Section -->
  102.                 <!-- Workflow Events Section -->
  103.                 <div id="events" class="uv-field-workflow">
  104.                     <label class="uv-field-label">{{ 'Events'|trans }}</label>
  105.                     <span class="uv-field-info">{{ "An event automatically triggers to check conditions and perform a respective pre-defined set of actions"|trans }}</span>
  107.                     <div class="workflow-event-body"></div>
  108.                     <div class="uv-workflow-buttons">
  109.                         <a class="uv-btn-tag btn-add" href="#">
  110.                             <span class="uv-icon-add-dark"></span> {{'Add More'|trans}}
  111.                         </a>
  112.                     </div>
  113.                 </div>
  115.                 <div class="uv-hr"></div>
  116.                 <!-- // Workflow Events Section -->
  118.                 <!-- Workflow Conditions Section -->
  119.                 <div id="conditions" class="uv-field-workflow" >
  120.                     <label class="uv-field-label">{{ 'Conditions'|trans }}</label>
  121.                     <span class="uv-field-info">{{ 'Conditions are set of rules which checks for specific scenarios and are triggered on specific occasions'|trans }}</span>
  123.                     <div class="workflow-conditions-body"></div>
  124.                     <div class="uv-workflow-buttons">
  125.                         <a class="uv-btn-tag btn-or" href="#">
  126.                             <span class="uv-icon-add-dark"></span> {{ 'OR'|trans }}
  127.                         </a>
  128.                         <a class="uv-btn-tag btn-and" href="#">
  129.                             <span class="uv-icon-add-dark"></span> {{ 'AND'|trans }}
  130.                         </a>
  131.                     </div>
  132.                 </div>
  133.                 <!-- // Workflow Conditions Section -->
  134.                 <div class="uv-hr"></div>
  135.                 
  138.                 <!-- Workflow Actions Section -->
  139.                 <div id="actions" class="uv-element-block uv-field-workflow">
  140.                     <label class="uv-field-label">{{ 'Actions'|trans }}</label>
  141.                     <span class="uv-field-info">{{ 'An action not only reduces the workload but also makes it quite easier for ticket automation'|trans }}</span>
  143.                     <div class="workflow-action-body"></div>
  144.                     <div class="uv-workflow-buttons">
  145.                         <a class="uv-btn-tag btn-add" href="#">
  146.                             <span class="uv-icon-add-dark"></span> {{ 'Add More'|trans }}
  147.                         </a>
  148.                     </div>
  149.                 </div>
  150.                 <!-- // Workflow Actions Section -->
  152.                 <!-- CTA -->
  153.                 {# <input type="submit" class="uv-btn" href="#" value="Save Workflow"> #}
  154.                 <button type="submit" name="submit" class="uv-btn" href="#">{% if app.request.get('id') is not empty %}{{ 'Save Workflow'|trans }}{% else %}{{ 'Add Workflow'|trans }}{% endif %}</button>
  155.                 <!-- // CTA -->
  156.             </form>
  157.             <!-- Form -->
  158.         </div>
  159.         <!-- // View -->
  160.     </div>
  161.     <!-- // Inner Section -->
  162. {% endblock %}
  164. {% block footer %}
  165.     {{ parent() }}
  167.     <script type="text/javascript">
  168.         _.extend(Backbone.Validation.patterns, {
  169.           stringPattern: /[a-z0-9]/i,
  170.         });
  172.         _.extend(Backbone.Validation.callbacks, {
  173.             valid : function (view, attr, selector) {
  174.                 $('[name="'+attr+'"]').closest('.uv-field-block').find('.uv-field-message').html('').fadeOut(0);
  175.             },
  176.             invalid : function (view, attr, error, selector) {
  177.                 $('[name="'+attr+'"]').closest('.uv-field-block').find('.uv-field-message').html(error).fadeIn(0);
  178.             }
  179.         });
  181.         if(typeof(sB) == 'undefined'){
  182.           var sB = {};
  183.         }
  185.         sB.WorkflowCollection = Backbone.Collection.extend({
  186.             baseUrl: "{{ path('ajax_service_call') }}",
  187.             fetchResult: function(dataMatch) {
  188.             this.url = this.baseUrl;
  189.             return this.fetch({ 'data' : {
  190.                 'service': 'email.service',
  191.                 'call': 'getEmailPlaceHolders',
  192.                 'options': { 'match': dataMatch },
  193.             }});
  194.         }});
  195.         sB.workflowCollection = new sB.WorkflowCollection();
  197.         sB.WorkflowModel = Backbone.Model.extend({
  198.             validation: {
  199.                 name: {
  200.                     required: true,
  201.                     pattern: 'stringPattern',
  202.                     msg: "{{ 'Please enter a valid name.'|trans }}"
  203.                 },
  204.             },
  205.             validateSelect: function(value, attr, computedState) {
  206.                 var currentSelectValue = $('select[name="'+ attr + '"]').find(':selected').length;
  207.                 if (!value) {
  208.                     return "{{ 'Please select a value.'|trans }}";
  209.                 }
  210.             },
  211.             validateSelectMultiple: function(value, attr, computedState) {
  212.                 var currentSelectValue = $('[name="'+ attr + '"]').length;
  213.                 if (!value) {
  214.                     return "{{ 'Please select a value.'|trans }}";
  215.                 }
  216.             },
  217.             validateSelectText: function(value, attr, computedState) {
  218.                 if (!value) {
  219.                     return "{{ 'Please add a value.'|trans }}";
  220.                 }
  221.             }
  222.         });
  224.         sB.WorkflowView = Backbone.View.extend({
  225.             el: '.uv-view',
  226.             initialize: function() {
  227.                 this.model = new sB.WorkflowModel();
  228.                 Backbone.Validation.bind(this);
  229.             },
  230.             events: {
  231.                 'submit form[name="form-workflow"]': 'processWorkflow',
  232.             },
  233.             processWorkflow: function(e) {
  234.                 var disabledCollection = this.$el.find('form').find('[disabled]');
  235.                 if ($(disabledCollection).length > 0) {
  236.                     $.each($(disabledCollection), function(index, nodeElement) {
  237.                         $(nodeElement).removeAttr('disabled');
  238.                     });
  239.                 }
  241.                 this.model.set(this.$el.find('form').serializeObject());
  243.                 var self = this;
  244.                 filterArray = ['name'];
  245.                 // Populate Filter Array - Events and Actions are required fields
  247.                 // Event
  248.                 this.$('.wfEvents').each(function(key, value) {
  249.                     filterArray.push($(value).attr('name'));
  250.                     self.model.validation[$(value).attr('name')] = 'validateSelect';
  251.                 });
  252.                 this.$('.wfEventTriggers').each(function(key, value) {
  253.                     filterArray.push($(value).attr('name'));
  254.                     self.model.validation[$(value).attr('name')] = 'validateSelect';
  255.                 });
  257.                 // Conditions
  258.                 if ($("[name='events[0][event]']").val() == 'ticket' || $("[name='events[0][event]']").val() == 'task') {
  259.                     this.$('.wfCondition').each(function(key, value) {
  260.                         filterArray.push($(value).attr('name'));
  261.                         self.model.validation[$(value).attr('name')] = 'validateSelect';
  262.                     });
  263.                     this.$('.wfConditionMatch').each(function(key, value) {
  264.                         filterArray.push($(value).attr('name'));
  265.                         self.model.validation[$(value).attr('name')] = 'validateSelect';
  266.                     });
  267.                     this.$('.wfConditionValue').each(function(key, value) {
  268.                         if ($(this).attr('name') == undefined) {
  269.                             return;
  270.                         }
  271.                         filterArray.push($(value).attr('name'));
  272.                         self.model.validation[$(value).attr('name')] = 'validateSelectText';
  273.                     });
  274.                 }
  276.                 // Actions
  277.                 this.$('.wfAction').each(function(key, value) {
  278.                     filterArray.push($(value).attr('name'));
  279.                     self.model.validation[$(value).attr('name')] = 'validateSelect';
  280.                 });
  281.                 this.$('.wfActionMultiple').each(function(key, value) {
  282.                     filterArray.push($(value).attr('name'));
  283.                     self.model.validation[$(value).attr('name')] = 'validateSelectMultiple';
  284.                 });
  285.                 this.$('.wfActionValue').each(function(key, value) {
  286.                     if ($(this).attr('name') == undefined) {
  287.                         return;
  288.                     }
  290.                     filterArray.push($(value).attr('name'));
  291.                     self.model.validation[$(value).attr('name')] = 'validateSelectText';
  292.                 });
  294.                 if (this.validateData(filterArray)) {
  295.                     return true;
  296.                 } else {
  297.                     e.preventDefault();
  298.                     if ($(disabledCollection).length > 0) {
  299.                         $.each($(disabledCollection), function(index, nodeElement) {
  300.                             $(nodeElement).attr('disabled', 'disabled');
  301.                         });
  302.                     }
  303.                 }
  304.             },
  305.             validateData: function(filterArray) {
  306.                 return this.model.isValid(filterArray);
  307.             },
  308.             updateActive: function(e){
  309.                 this.$('div.step-info').each(function() {
  310.                     $(this).addClass('active');
  311.                     if ($(this).attr('data-href') == self.$(e.target).attr('href'))
  312.                         return false;
  313.                 });
  314.             }
  315.         });
  316.         sB.workflowView = new sB.WorkflowView();
  318.         $.fn.serializeObject = function () {
  319.             "use strict";
  320.             var a = {}, b = function (b, c) {
  321.                 var d = a[c.name];
  322.                 "undefined" != typeof d && d !== null ? $.isArray(d) ? d.push(c.value) : a[c.name] = [d, c.value] : a[c.name] = c.value
  323.             };
  324.             return $.each(this.serializeArray(), b), a
  325.         };
  326.     </script>
  328.     {{ include('@UVDeskAutomation//Workflow//events.html.twig') }}
  329.     {{ include('@UVDeskAutomation//Workflow//conditions.html.twig') }}
  330.     {{ include('@UVDeskAutomation//Workflow//actions.html.twig') }}
  332. {% endblock %}