OTRS API Reference JavaScript

Source: Core.Agent.Overview.js

  1. // --
  2. // Copyright (C) 2001-2018 OTRS AG, https://otrs.com/
  3. // --
  4. // This software comes with ABSOLUTELY NO WARRANTY. For details, see
  5. // the enclosed file COPYING for license information (GPL). If you
  6. // did not receive this file, see https://www.gnu.org/licenses/gpl-3.0.txt.
  7. // --
  9. "use strict";
  11. var Core = Core || {};
  12. Core.Agent = Core.Agent || {};
  14. /**
  15.  * @namespace Core.Agent.Overview
  16.  * @memberof Core.Agent
  17.  * @author OTRS AG
  18.  * @description
  19.  *      This namespace contains the View functions.
  20.  */
  21. Core.Agent.Overview = (function (TargetNS) {
  23.     /**
  24.      * @name Init
  25.      * @memberof Core.Agent.Overview
  26.      * @function
  27.      * @description
  28.      *      This function initializes the functionality for the Overview screen.
  29.      */
  30.     TargetNS.Init = function () {
  31.         var Profile = Core.Config.Get('Profile'),
  32.             View = Core.Config.Get('View'),
  33.             TicketID, ActionRowTickets = Core.Config.Get('ActionRowTickets') || {};
  35.         // Disable any event handlers on the "label" elements.
  36.         $('ul.Actions form > label').off("click").on("click", function() {
  37.             return false;
  38.         });
  40.         // create open popup event for dropdown actions
  41.         $('ul.Actions form > select').off("change").on("change", function() {
  42.             var URL;
  43.             if ($(this).val() !== '0') {
  44.                 if (Core.Config.Get('Action') === 'AgentTicketQueue' ||
  45.                     Core.Config.Get('Action') === 'AgentTicketService' ||
  46.                     Core.Config.Get('Action') === 'AgentTicketStatusView' ||
  47.                     Core.Config.Get('Action') === 'AgentTicketEscalationView'
  48.                 ) {
  49.                     $(this).closest('form').submit();
  50.                 }
  51.                 else {
  52.                     URL = Core.Config.Get('Baselink') + $(this).parents().serialize();
  53.                     Core.UI.Popup.OpenPopup(URL, 'TicketAction');
  55.                     // reset the select box so that it can be used again from the same window
  56.                     $(this).val('0');
  57.                 }
  58.             }
  59.         });
  61.         // open ticket search modal dialog
  62.         $('#TicketSearch').on('click', function () {
  63.             Core.Agent.Search.OpenSearchDialog('AgentTicketSearch', Profile);
  64.             return false;
  65.         });
  67.         // open settings modal dialog
  68.         $('#ShowContextSettingsDialog').on('click', function (Event) {
  69.             Core.UI.Dialog.ShowContentDialog($('#ContextSettingsDialogContainer'), Core.Language.Translate("Settings"), '15%', 'Center', true,
  70.                 [
  71.                     {
  72.                         Label: Core.Language.Translate("Save"),
  73.                         Type: 'Submit',
  74.                         Class: 'Primary',
  75.                         Function: function () {
  76.                             var $ListContainer = $('.AllocationListContainer').find('.AssignedFields'),
  77.                                 FieldID;
  78.                             if (isJQueryObject($ListContainer) && $ListContainer.length) {
  79.                                 $.each($ListContainer.find('li'), function() {
  80.                                     FieldID = 'UserFilterColumnsEnabled-' + $(this).attr('data-fieldname');
  82.                                     // only add this field if its not already there. This could happen
  83.                                     // if e.g. the save button is clicked multiple times
  84.                                     if (!$('#' + FieldID).length) {
  85.                                         $('<input name="UserFilterColumnsEnabled" type="hidden" />').attr('id', FieldID).val($(this).attr('data-fieldname')).appendTo($ListContainer.closest('div'));
  86.                                     }
  87.                                 });
  88.                             }
  89.                             return true;
  90.                         }
  91.                     }
  92.                 ], true);
  93.             Event.preventDefault();
  94.             Event.stopPropagation();
  95.             Core.Agent.TableFilters.SetAllocationList();
  96.             return false;
  97.         });
  99.         // change queue for selected ticket
  100.         $('.InlineActions, .OverviewActions').on('change', 'select[name=DestQueueID]', function () {
  101.             $(this).closest('form').submit();
  102.         });
  104.         // add actions for selected (or hovered) ticket
  105.         for (TicketID in ActionRowTickets) {
  106.             Core.UI.ActionRow.AddActions($('#TicketID_' + TicketID), ActionRowTickets[TicketID]);
  107.         }
  109.         // call functions in regard to a view
  110.         if (View === 'Small') {
  111.             TargetNS.InitViewSmall();
  112.         }
  113.         else if (View === 'Medium') {
  114.             TargetNS.InitViewMedium();
  115.         }
  116.         else if (View === 'Preview') {
  117.             TargetNS.InitViewPreview();
  118.         }
  120.         $('a.SplitSelection').off('click').on('click', function() {
  121.             Core.Agent.TicketSplit.OpenSplitSelection($(this).attr('href'));
  122.             return false;
  123.         });
  124.     };
  126.     /**
  127.      * @name InitViewSmall
  128.      * @memberof Core.Agent.Overview
  129.      * @function
  130.      * @description
  131.      *      This function initializes JS functionality for view Small.
  132.      */
  133.     TargetNS.InitViewSmall = function () {
  135.         var URL, ColumnFilter, NewColumnFilterStrg, MyRegEx, SessionInformation,
  136.             $MasterActionLink;
  138.         // initializes a click event for table with checkboxes
  139.         Core.UI.InitCheckboxSelection($('table td.Checkbox'));
  141.         // initializes autocompletion for customer user
  142.         Core.Agent.TableFilters.InitCustomerUserAutocomplete($(".CustomerUserAutoComplete"));
  144.         // initializes autocompletion for customer ID
  145.         Core.Agent.TableFilters.InitCustomerIDAutocomplete($(".CustomerIDAutoComplete"));
  147.         // initializes autocompletion for user
  148.         Core.Agent.TableFilters.InitUserAutocomplete($(".UserAutoComplete"));
  150.         // click event for opening popup
  151.         $('a.AsPopup').on('click', function () {
  152.             Core.UI.Popup.OpenPopup($(this).attr('href'), 'Action');
  153.             return false;
  154.         });
  156.         // change event for column filter
  157.         $('.ColumnFilter').on('change', function () {
  159.             // define variables
  160.             URL = Core.Config.Get("Baselink") + 'Action=' + Core.Config.Get("Action") + ';' + Core.Config.Get('LinkPage');
  161.             SessionInformation = Core.App.GetSessionInformation();
  162.             $.each(SessionInformation, function (Key, Value) {
  163.                 URL += encodeURIComponent(Key) + '=' + encodeURIComponent(Value) + ';';
  164.             });
  165.             ColumnFilter = $(this)[0].name;
  166.             NewColumnFilterStrg = $(this)[0].name + '=' + $(this).val() + ';';
  167.             MyRegEx = new  RegExp(ColumnFilter+"=[^;]*;");
  169.             // check for already set parameter and replace
  170.             if (URL.match(MyRegEx)) {
  171.                 URL = URL.replace(MyRegEx, NewColumnFilterStrg);
  172.             }
  174.             // otherwise add the new column filter
  175.             else {
  176.                 URL = URL + NewColumnFilterStrg;
  177.             }
  179.             // redirect
  180.             window.location.href =  URL;
  181.         });
  183.         // click event on table header trigger
  184.         $('.OverviewHeader').off('click').on('click', '.ColumnSettingsTrigger', function() {
  185.             var $TriggerObj = $(this),
  186.                 FilterName;
  188.             if ($TriggerObj.hasClass('Active')) {
  189.                 $TriggerObj
  190.                     .next('.ColumnSettingsContainer')
  191.                     .find('.ColumnSettingsBox')
  192.                     .fadeOut('fast', function() {
  193.                         $TriggerObj.removeClass('Active');
  194.                     });
  195.             }
  196.             else {
  198.                 // slide up all open settings widgets
  199.                 $('.ColumnSettingsTrigger')
  200.                     .next('.ColumnSettingsContainer')
  201.                     .find('.ColumnSettingsBox')
  202.                     .fadeOut('fast', function() {
  203.                         $(this).parent().prev('.ColumnSettingsTrigger').removeClass('Active');
  204.                     });
  206.                 // show THIS settings widget
  207.                 $TriggerObj
  208.                     .next('.ColumnSettingsContainer')
  209.                     .find('.ColumnSettingsBox')
  210.                     .fadeIn('fast', function() {
  212.                         $TriggerObj.addClass('Active');
  214.                         // refresh filter dropdown
  215.                         FilterName = $TriggerObj
  216.                             .next('.ColumnSettingsContainer')
  217.                             .find('select')
  218.                             .attr('name');
  220.                         if (
  221.                                 $TriggerObj.closest('th').hasClass('CustomerID') ||
  222.                                 $TriggerObj.closest('th').hasClass('CustomerUserID') ||
  223.                                 $TriggerObj.closest('th').hasClass('Responsible') ||
  224.                                 $TriggerObj.closest('th').hasClass('Owner')
  225.                             ) {
  227.                             if (!$TriggerObj.parent().find('.SelectedValue').length) {
  228.                                 Core.AJAX.FormUpdate($('#Nothing'), 'AJAXFilterUpdate', FilterName, [ FilterName ], function() {
  229.                                     var AutoCompleteValue = $TriggerObj
  230.                                             .next('.ColumnSettingsContainer')
  231.                                             .find('select')
  232.                                             .val(),
  233.                                         AutoCompleteText  = $TriggerObj
  234.                                             .next('.ColumnSettingsContainer')
  235.                                             .find('select')
  236.                                             .find('option:selected')
  237.                                             .text();
  239.                                     if (AutoCompleteValue !== 'DeleteFilter') {
  241.                                         $TriggerObj
  242.                                             .next('.ColumnSettingsContainer')
  243.                                             .find('select')
  244.                                             .after('<span class="SelectedValue Hidden">' + AutoCompleteText + ' (' + AutoCompleteValue + ')</span>')
  245.                                             .parent()
  246.                                             .find('input[type=text]')
  247.                                             .after('<a href="#" class="DeleteFilter"><i class="fa fa-trash-o"></i></a>')
  248.                                             .parent()
  249.                                             .find('a.DeleteFilter')
  250.                                             .off()
  251.                                             .on('click', function() {
  252.                                                 $(this)
  253.                                                     .closest('.ColumnSettingsContainer')
  254.                                                     .find('select')
  255.                                                     .val('DeleteFilter')
  256.                                                     .trigger('change');
  258.                                                 return false;
  259.                                             });
  260.                                     }
  261.                                 });
  262.                             }
  263.                         }
  264.                         else {
  265.                             Core.AJAX.FormUpdate($('#ColumnFilterAttributes'), 'AJAXFilterUpdate', FilterName, [ FilterName ]);
  266.                         }
  267.                 });
  268.             }
  270.             return false;
  271.         });
  273.         // click event for whole table row
  274.         $('.MasterAction').off('click').on('click', function (Event) {
  275.             $MasterActionLink = $(this).find('.MasterActionLink');
  277.             // prevent MasterAction on Dynamic Fields links
  278.             if ($(Event.target).hasClass('DynamicFieldLink')) {
  279.                 return true;
  280.             }
  282.             // only act if the link was not clicked directly
  283.             if (Event.target !== $MasterActionLink.get(0)) {
  284.                 if (Event.ctrlKey || Event.metaKey) {
  285.                     Core.UI.Popup.open($MasterActionLink.attr('href'));
  286.                 }
  287.                 else {
  288.                     window.location = $MasterActionLink.attr('href');
  289.                 }
  290.                 return false;
  291.             }
  292.         });
  293.     };
  295.     /**
  296.      * @name InitInlineActions
  297.      * @memberof Core.Agent.Overview
  298.      * @function
  299.      * @description
  300.      *      This function initializes the inline actions mini overlay in medium/preview views.
  301.      */
  302.     TargetNS.InitInlineActions = function () {
  303.         $('.OverviewMedium > li, .OverviewLarge > li').on('mouseenter', function() {
  304.             $(this).find('ul.InlineActions').css('top', '0px');
  306.             Core.App.Publish('Event.Agent.TicketOverview.InlineActions.Shown');
  307.         });
  308.         $('.OverviewMedium > li, .OverviewLarge > li').on('mouseleave', function(Event) {
  310.             // The inline actions would hide if hovering over the queue selection due to a bug in IE.
  311.             //   See bug#12403 for more information.
  312.             // The exception has to be added also for modernized dropdowns.
  313.             //   See bug#13100 for more information.
  314.             if (
  315.                 Event.target.tagName.toLowerCase() === 'select'
  316.                 || $(Event.target).hasClass('InputField_Search')
  317.                 )
  318.             {
  319.                 return false;
  320.             }
  322.             $(this).find('ul.InlineActions').css('top', '-35px');
  324.             Core.App.Publish('Event.Agent.TicketOverview.InlineActions.Hidden', [$(this).find('ul.InlineActions')]);
  325.         });
  326.     };
  328.     /**
  329.      * @name InitViewMedium
  330.      * @memberof Core.Agent.Overview
  331.      * @function
  332.      * @description
  333.      *      This function initializes JS functionality for view Medium.
  334.      */
  335.     TargetNS.InitViewMedium = function () {
  337.         var $MasterActionLink,
  338.             Matches, PopupType = 'TicketAction';
  340.         // initializes a click event for div with checkboxes
  341.         Core.UI.InitCheckboxSelection($('div.Checkbox'));
  343.         // initialize inline actions overlay
  344.         TargetNS.InitInlineActions();
  346.         // Stop propagation on click on a part of the InlienActionRow without a link
  347.         // Otherwise that would trigger the li-wide link to the ticketzoom
  348.         $('ul.InlineActions').click(function (Event) {
  349.             Event.cancelBubble = true;
  350.             if (Event.stopPropagation) {
  351.                 Event.stopPropagation();
  352.             }
  353.         });
  355.         // click event for whole table row
  356.         $('.MasterAction').off('click').on('click', function (Event) {
  357.             $MasterActionLink = $(this).find('.MasterActionLink');
  359.             // prevent MasterAction on Dynamic Fields links
  360.             if ($(Event.target).hasClass('DynamicFieldLink')) {
  361.                 return true;
  362.             }
  363.             // only act if the link was not clicked directly
  364.             if (Event.target !== $MasterActionLink.get(0)) {
  365.                 if (Event.ctrlKey || Event.metaKey) {
  366.                     Core.UI.Popup.open($MasterActionLink.attr('href'));
  367.                 }
  368.                 else {
  369.                     window.location = $MasterActionLink.attr('href');
  370.                 }
  371.                 return false;
  372.             }
  373.         });
  375.         // click event for opening popup
  376.         $('a.AsPopup').on('click', function () {
  377.             Matches = $(this).attr('class').match(/PopupType_(\w+)/);
  378.             if (Matches) {
  379.                 PopupType = Matches[1];
  380.             }
  382.             Core.UI.Popup.OpenPopup($(this).attr('href'), PopupType);
  383.             return false;
  384.         });
  386.         if ($('body').hasClass('TouchDevice')) {
  387.             $('ul.InlineActions li:not(.ResponsiveActionMenu)').hide();
  388.         }
  390.         $('li.ResponsiveActionMenu').on('click.ToggleResponsiveActionMenu', function () {
  391.             $(this).siblings().toggle();
  392.             $(this).toggleClass('Opened');
  393.             return false;
  394.         });
  395.     };
  397.     /**
  398.      * @name InitViewPreview
  399.      * @memberof Core.Agent.Overview
  400.      * @function
  401.      * @description
  402.      *      This function initializes JS functionality for view Preview (Large).
  403.      */
  404.     TargetNS.InitViewPreview = function () {
  406.         var Matches, PopupType = 'TicketAction',
  407.             $MasterActionLink,
  408.             URL, Index, ReplyFieldsFormID = Core.Config.Get('ReplyFieldsFormID');
  410.         /**
  411.          * @private
  412.          * @name ReplyFieldsOnChange
  413.          * @memberof Core.Agent.Overview
  414.          * @function
  415.          * @param {Number} FormID - ID of element
  416.          * @description
  417.          *      Bind change event for element which ID is FormID.
  418.          */
  419.         function ReplyFieldsOnChange (FormID) {
  420.             $('#' + FormID + ' select[name=ResponseID]').on('change', function () {
  421.                 if ($(this).val() > 0) {
  422.                     URL = Core.Config.Get('Baselink') + $(this).parents().serialize();
  423.                     Core.UI.Popup.OpenPopup(URL, 'TicketAction');
  425.                     // reset the select box so that it can be used again from the same window
  426.                     $(this).val('0');
  427.                 }
  428.             });
  429.         }
  431.         /**
  432.          * @private
  433.          * @name ReplyFieldsOnClick
  434.          * @memberof Core.Agent.Overview
  435.          * @function
  436.          * @param {Number} FormID - ID of element
  437.          * @description
  438.          *      Bind click event for element which ID is FormID.
  439.          */
  440.         function ReplyFieldsOnClick (FormID) {
  441.             $('#' + FormID + ' select[name=ResponseID]').on('click', function (Event) {
  442.                 Event.stopPropagation();
  443.                 return false;
  444.             });
  445.         }
  447.         // initializes a click event for div with checkboxes
  448.         Core.UI.InitCheckboxSelection($('div.Checkbox'));
  450.         // initialize inline actions overlay
  451.         TargetNS.InitInlineActions();
  453.         // initializes the accordion effect on the specified list
  454.         Core.UI.Accordion.Init($('.Preview > ul'), 'li h3 a', '.HiddenBlock');
  456.         Core.App.Subscribe('Event.UI.Accordion.OpenElement', function($Element) {
  457.             Core.UI.InputFields.Activate($Element);
  458.         });
  460.         // Stop propagation on click on a part of the InlienActionRow without a link
  461.         // Otherwise that would trigger the li-wide link to the ticketzoom
  462.         $('ul.InlineActions').click(function (Event) {
  463.             Event.cancelBubble = true;
  464.             if (Event.stopPropagation) {
  465.                 Event.stopPropagation();
  466.             }
  467.         });
  469.         // click event for opening popup
  470.         $('a.AsPopup').on('click', function () {
  471.             Matches = $(this).attr('class').match(/PopupType_(\w+)/);
  472.             if (Matches) {
  473.                 PopupType = Matches[1];
  474.             }
  476.             Core.UI.Popup.OpenPopup($(this).attr('href'), PopupType);
  477.             return false;
  478.         });
  480.         // click event for whole table row
  481.         $('.MasterAction').off('click').on('click', function (Event) {
  482.             $MasterActionLink = $(this).find('.MasterActionLink');
  484.             // If the user is trying to select text from or use article actions, MasterAction should not be executed.
  485.             if (
  486.                 typeof Event.target === 'object'
  487.                 && (
  488.                     $(Event.target).hasClass('ArticleBody')
  489.                     || $(Event.target).hasClass('ItemActions')
  490.                     || $(Event.target).parents('.Actions').length
  491.                 )
  492.                 )
  493.             {
  494.                 return true;
  495.             }
  497.             // prevent MasterAction on Dynamic Fields links
  498.             if ($(Event.target).hasClass('DynamicFieldLink')) {
  499.                 return true;
  500.             }
  502.             // Prevent MasterAction on Modernize input fields.
  503.             if ($(Event.target).hasClass('InputField_Search')) {
  504.                 return true;
  505.             }
  507.             // only act if the link was not clicked directly
  508.             if (Event.target !== $MasterActionLink.get(0)) {
  509.                 if (Event.ctrlKey || Event.metaKey) {
  510.                     Core.UI.Popup.open($MasterActionLink.attr('href'));
  511.                 }
  512.                 else {
  513.                     window.location = $MasterActionLink.attr('href');
  514.                 }
  515.                 return false;
  516.             }
  517.         });
  519.         // bind events on Reply dropdown elements
  520.         if (typeof ReplyFieldsFormID !== 'undefined') {
  521.             for (Index in ReplyFieldsFormID) {
  522.                 ReplyFieldsOnChange(ReplyFieldsFormID[Index]);
  523.                 ReplyFieldsOnClick(ReplyFieldsFormID[Index]);
  524.             }
  525.         }
  527.         if ($('body').hasClass('TouchDevice')) {
  528.             $('ul.InlineActions li:not(.ResponsiveActionMenu)').hide();
  529.         }
  531.         $('li.ResponsiveActionMenu').on('click.ToggleResponsiveActionMenu', function () {
  532.             $(this).siblings().toggle();
  533.             $(this).toggleClass('Opened');
  534.             return false;
  535.         });
  536.     };
  538.     Core.Init.RegisterNamespace(TargetNS, 'APP_MODULE');
  540.     return TargetNS;
  541. }(Core.Agent.Overview || {}));

^ Use Elevator