[Script][Topdesk] Multi filter for issues

multi-filter-for-issues.user.js

// ==UserScript==
// @name         [Script][Topdesk] Multi filter for issues
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Adiciona campo de filtro por status na tela de Incidentes no Topdesk
// @author       Eduarda S. Weber
// @match        *://infracommerce.topdesk.net/*
// @grant        none
// @require      https://code.jquery.com/jquery-3.5.0.min.js
// @require      https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js
// @require      https://infracommerce.topdesk.net/tas/scripts/grids/columns.js
// ==/UserScript==

(function() {
    'use strict';
    var $ = window.$; // para o Tampermonkey parar de sinalizar erro nos $;
    var status = [ "Todos" ];
    var columns;
    var iframeUrl;
    var position;

    // configuração select2:
    $("head").append (
        '<link href="//cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" type="text/css">'
    ); // injetar css é mais leve que usar @grant

    $('.actions').prepend(
        `<select class="js-status-filter" multiple="multiple">
            <option>Todos</option>
            <option>Registrado</option>
            <option>Em atendimento</option>
            <option>Aguardando fornecedor</option>
            <option>Aguardando solicitante</option>
            <option>Alterado pelo solicitante</option>
            <option>Resolvido</option>
            <option>Aberto na Fila Errada</option>
            <option>Aguardando aprovação</option>
            <option>Aguardando assinatura</option>
            <option>Assinado</option>
            <option>Aguardando cliente</option>
            <option>Em elaboração</option>
            <option>Em validação</option>
            <option>Fechado</option>
            <option>Fechado Automaticamento pelo Sistema</option>
            <option>Fechado pelo Solicitante</option>
            <option>[N2] Waiting Review</option>
            <option>[DEV] Interrupted</option>
            <option>[DEV] Ready for Code Review</option>
            <option>[TL] Ready for QA validation</option>
            <option>[QA] In Validation</option>
            <option>[QA] Ready for Deploy</option>
            <option>[QA] Rejected</option>
            <option>[TL] In staging</option>
            <option>[IFC] Approved</option>
            <option>[IFC] Rejected</option>
            <option>[TL] Canceled</option>
            <option>[PO] In Validation</option>
            <option>Internal Blocker</option>
            <option>[TL] Code Review in Progress</option>
        </select>`
    );

    $('.js-status-filter').select2({
        placeholder: 'Status',
        closeOnSelect: true
    });

    $('.select2-selection--multiple').css({
        'overflow-y': 'auto',
        'overflow-x': 'hidden',
        'max-height': '20px'
    });

    $('.select2').css('margin-right','10px');

    if ($('#_ref_status > span').length){
        localStorage.setItem('iframeUrl', location.href); // salvando iframe dentro do storage pq vai se perder
    }

    // seleção de filtro:
    $('.js-status-filter').on('change', function (e) {

        iframeUrl = localStorage.getItem('iframeUrl'); // recuperando iframe
        var outerGrid = $(this).closest('form').find('#outergridframe');
        var grid = $('#gridframe', outerGrid.contents());
        columns = $('#columns', grid.contents());

        status = [];
        position = 0;
        $('#columnsscroll').children().removeAttr('position');

        $('.actions select option:selected').each(function(i) {
            status.push(this.innerHTML);
        });

        columns.contents().find('#_ref_status').children().each(function(i) {

            if(!!~status.indexOf(this.innerHTML) || !!~status.indexOf("Todos") || status.length == 0){
                showRow(i);
            }
            else{
                hideRow(i);
            }
        });
    });

    // seleção de registro no grid
    $('#columnsscroll').on('mouseup', function (e) {
        var columnsScroll = document.getElementById("columnsscroll");

        if (e.target.id == 'columnsscroll'){
            //TODO: corrigir quando registro está abaixo de columnsScroll.clientHeight
            console.log(columnsScroll.scrollTop);
            console.log(columnsScroll.clientHeight);
            console.log(columnsScroll.scrollTop);
            console.log(e.target.id);
            columnsScroll.scrollTop = 0;
        } else {
            var id = e.target.id.split(/(\w+_\d*_)/); // get row_??_

            position = $('#columnsscroll > .checkcolumn').find('[id^=' + id[1] + 'sel]').attr("position"); // para todos os registros #row_??_sel

            if (position != undefined){

                $('.selected').css('top', position * 24);

                if (((position + 1) * 24) > (columnsScroll.scrollTop + columnsScroll.clientHeight)) {
                    columnsScroll.scrollTop = (position + 1) * 24 - columnsScroll.clientHeight;
                }
                else if ((position * 24) < columnsScroll.scrollTop) {
                    columnsScroll.scrollTop = position * 24;
                }

            }
        }
    });

    function hideRow(id){

        columns.contents().find('#row_'+ id +'_sel').hide();

        for(var i = 0; columns.contents().find('.column').length > i; i++){
            columns.contents().find('#row_'+ id +'_cell_' + i).hide();
        }
    }

    function showRow(id){

        columns.contents().find('#row_'+ id +'_sel').show();
        columns.contents().find('#row_'+ id +'_sel').attr("position", position);

        for(var i = 0; columns.contents().find('.column').length > i; i++){
            columns.contents().find('#row_'+ id +'_cell_' + i).show();
        }

        position++;
    }
})();

// Excelente estudo sobre o que não fazer numa aplicação