cronapp-framework-js 3.0.0-SP.5 → 3.0.0-SP.51

package/js/directives.js

@@ -83,14 +83,8 @@
     return {
       restrict: 'E',
       link: async function (scope, element, attrs, ngModelCtrl) {
-        let options = {};
-
-        try {
-          options = JSON.parse(attrs.options);
-        } catch (e) {
-          console.error(e);
-        }
-
+        
+        let options = scope.$eval(attrs.options) || {};
         const cronCalendarElement = $(element);
 
         const culture = navigator.language || navigator.userLanguage;
@@ -2688,6 +2682,67 @@
               return attributes;
             }
 
+            function commandClick(e, column) {
+              e.preventDefault();
+              let tr = $(e.target).closest("tr");
+              let grid = tr.closest('table');
+              let itemAsObj = this.dataItem(tr);
+              let item = this.dataItem(tr);
+              let index = $(grid.find('tbody')[0]).children().index(tr);
+              let call = undefined;
+              if (column.dataType == "Customized" || column.dataType == "CustomizedLink" || column.dataType == "GroupedButtons")
+                call = column.execute;
+              else
+                call = generateBlocklyCall(column.blocklyInfo);
+              let cronappDatasource = this.dataSource.transport.options.cronappDatasource;
+              let currentGrid = options.refComponent;
+              let selectedRows = [];
+              currentGrid.select().each(function() {
+                let gridRow = currentGrid.dataItem(this);
+                cronappDatasource.data.forEach(function(dsRow) {
+                  if (dsRow.__$id == gridRow.__$id)
+                    selectedRows.push(dsRow);
+                });
+              });
+
+              if (!(cronappDatasource.inserting || cronappDatasource.editing)) {
+                let tr = e.currentTarget.parentElement.parentElement;
+                this.select(tr);
+              }
+
+              let selectedRowsKeyOrObj = [];
+              if (options.fieldType && options.fieldType === 'key') {
+                item = helperDirective.changeObjectField(cronappDatasource, cronappDatasource.findObjInDs(item));
+                selectedRows.forEach(row => {
+                  selectedRowsKeyOrObj.push(helperDirective.changeObjectField(cronappDatasource, cronappDatasource.findObjInDs(row)));
+                });
+              }
+              else {
+                selectedRowsKeyOrObj = selectedRows;
+              }
+
+              let consolidated = {
+                item: item,
+                index: index
+              }
+
+              let contextVars = {
+                'currentData': cronappDatasource.data,
+                'datasource': cronappDatasource.copyWithoutAngularObj(),
+                'selectedIndex': index,
+                'index': index,
+                'selectedRow': item,
+                'consolidated': consolidated,
+                'item': item,
+                'selectedKeys': cronappDatasource.getKeyValues(cronappDatasource.findObjInDs(itemAsObj), true),
+                'selectedRows': selectedRowsKeyOrObj
+              };
+
+              cronappDatasource.goTo(itemAsObj);
+              scope.$eval(call, contextVars);
+              return;
+            };
+
             var columns = [];
             if (options.columns) {
               options.columns.forEach(function(column)  {
@@ -2757,7 +2812,7 @@
                     className = 'k-custom-command' + (label ? ' k-button-with-label' : '');
                   }
                   if (column.theme)
-                    className += ' ' + column.theme;
+                    className += ' btn ' + column.theme;
 
                   var tooltip = '';
                   if (column.tooltip && column.tooltip.length)
@@ -2769,79 +2824,21 @@
                     className += ' ' + classForTooltip;
                   }
 
+                  let width = column.width;
+                  if (width) {
+                    width += 'px';
+                  }
+
                   let idForCommand = app.common.generateId();
                   let ariaLabel = tooltip || label || idForCommand;
-                  let template = `<a href class='k-button ${className} k-grid-${idForCommand}' aria-label='${ariaLabel}'><span class='${column.iconClass}'></span>${label}</a>`;
+                  let template = `<a href class='k-button ${className} k-grid-${idForCommand}' aria-label='${ariaLabel}' style='width:${width}'><span class='${column.iconClass}'></span>${label}</a>`;
 
                   var addColumn = {
                     command: [{
                       name: idForCommand,
                       template: template,
                       click: function(e) {
-                        e.preventDefault();
-                        var tr = $(e.target).closest("tr");
-                        var grid = tr.closest('table');
-
-                        var itemAsObj = this.dataItem(tr);
-                        var item = this.dataItem(tr);
-                        var index = $(grid.find('tbody')[0]).children().index(tr)
-
-
-                        var call = undefined;
-                        if (column.dataType == "Customized" || column.dataType == "CustomizedLink")
-                          call = column.execute;
-                        else
-                          call = generateBlocklyCall(column.blocklyInfo);
-
-                        var cronappDatasource = this.dataSource.transport.options.cronappDatasource;
-                        var currentGrid = options.refComponent;
-                        var selectedRows = [];
-                        currentGrid.select().each(function() {
-                          var gridRow = currentGrid.dataItem(this);
-                          cronappDatasource.data.forEach(function(dsRow) {
-                            if (dsRow.__$id == gridRow.__$id)
-                              selectedRows.push(dsRow);
-                          });
-                        });
-
-                        if (!(cronappDatasource.inserting || cronappDatasource.editing)) {
-                          var tr = e.currentTarget.parentElement.parentElement;
-                          this.select(tr);
-                        }
-
-                        let selectedRowsKeyOrObj = [];
-                        if(options.fieldType && options.fieldType === 'key') {
-                          item = helperDirective.changeObjectField(cronappDatasource, cronappDatasource.findObjInDs(item));
-                          selectedRows.forEach(row => {
-                            selectedRowsKeyOrObj.push(helperDirective.changeObjectField(cronappDatasource, cronappDatasource.findObjInDs(row)));
-                          });
-                        }
-                        else {
-                          selectedRowsKeyOrObj = selectedRows;
-                        }
-
-                        var consolidated = {
-                          item: item,
-                          index: index
-                        }
-
-                        var contextVars = {
-                          'currentData': cronappDatasource.data,
-                          'datasource': cronappDatasource.copyWithoutAngularObj(),
-                          'selectedIndex': index,
-                          'index': index,
-                          'selectedRow': item,
-                          'consolidated': consolidated,
-                          'item': item,
-                          'selectedKeys': cronappDatasource.getKeyValues(cronappDatasource.findObjInDs(itemAsObj), true),
-                          'selectedRows': selectedRowsKeyOrObj
-                        };
-
-                        if (this.element.find('input[type=checkbox]').length === 0) {
-                          cronappDatasource.goTo(itemAsObj);
-                        }
-                        scope.$eval(call, contextVars);
-                        return;
+                        commandClick.bind(this)(e, column);
                       }
                     }],
                     width: widthDevice.width,
@@ -2852,6 +2849,62 @@
                   columns.push(addColumn);
                   setIdCommandButton.bind(this)(idForCommand, column.dataType);
                 }
+                else if (column.dataType == "GroupedButtons") {
+
+                  if (column.buttonColumns && column.buttonColumns.length) {
+
+                    let commands = [];
+                    
+                    column.buttonColumns.forEach(function(buttonColumn) {
+                      let label = buttonColumn.label == undefined ? '': buttonColumn.label;
+                      if (buttonColumn.iconClass && label)
+                        label = '&nbsp;' + label;
+
+                      let className = 'k-custom-command' + (label ? ' k-button-with-label' : '');
+                      if (buttonColumn.theme)
+                        className += ' btn ' + buttonColumn.theme;
+
+                      let tooltip = '';
+                      if (buttonColumn.tooltip && buttonColumn.tooltip.length)
+                        tooltip = buttonColumn.tooltip;
+
+                      if (tooltip)  {
+                        let classForTooltip = app.common.generateId();
+                        tooltips[classForTooltip] = tooltip;
+                        className += ' ' + classForTooltip;
+                      }
+
+                      let width = buttonColumn.width;
+                      if (width) {
+                        width += 'px';
+                      }
+
+                      let idForCommand = app.common.generateId();
+                      let ariaLabel = tooltip || label || idForCommand;
+                      let template = `<a href class='k-button ${className} k-grid-${idForCommand}' aria-label='${ariaLabel}' style='width:${width}'><span class='${buttonColumn.iconClass}'></span>${label}</a>`;
+                    
+                      let command = {
+                        name: idForCommand,
+                        template: template,
+                        click: function(e) {
+                          buttonColumn.dataType = column.dataType;
+                          commandClick.bind(this)(e, buttonColumn);
+                        }
+                      };
+                      commands.push(command);
+                    });
+
+                    var addColumn = {
+                      command: commands,
+                      width: widthDevice.width,
+                      title: column.headerText ? column.headerText: '',
+                      hidden: !widthDevice.visible,
+                      attributes: getAttributes(column)
+                    };
+                    columns.push(addColumn);
+                    setIdCommandButton.bind(this)(app.common.generateId(), column.dataType);
+                  }          
+                }
                 else if (column.dataType == "Selectable") {
                   var checkColumn = {
                     selectable: true,
@@ -2989,7 +3042,11 @@
               var cronappDatasource = this.dataSource.transport.options.cronappDatasource;
               if (!(cronappDatasource.inserting || cronappDatasource.editing)) {
                 if (this.selectable) {
+                  setToActiveInCronappDataSource.bind(this)(e.data);
                   this.select(e.masterRow);
+                  if (options.columns.find(c => c.dataType == 'Selectable') !== undefined) {
+                    collapseAllExcecptCurrent(this, e.detailRow, e.masterRow);
+                  }
                 }
                 else {
                   setToActiveInCronappDataSource.bind(this)(e.data);
@@ -3217,14 +3274,22 @@
               },
               change: function(e) {
                 var item = this.dataItem(this.select());
-                setToActiveInCronappDataSource.bind(this)(item);
+                if ((options.details && options.details.length == 0) || (!cronapi.internal.hasMethodInCallStack('detailInit'))) {
+                  setToActiveInCronappDataSource.bind(this)(item);
+                }
                 var cronappDatasource = this.dataSource.transport.options.cronappDatasource;
                 if(options.fieldType && options.fieldType === 'key'){
                   cronappDatasource.active = helperDirective.changeObjectField(cronappDatasource, cronappDatasource.active);
                 }
+
+                let trDetails = this.select().next();
+                let trMasters = this.select();
+
                 if (ngModelCtrl) {
                   if ("multiple" === options.allowSelectionRowType) {
                     let selecteds = [];
+                    trDetails = [];
+                    trMasters = [];
                     this.select().each((i, row)=> {
                       let item = this.dataItem(row);
                       let objInDs = cronappDatasource.findObjInDs(item, false);
@@ -3234,6 +3299,10 @@
                       if (objInDs !== null){
                         selecteds.push(objInDs);
                       }
+                      if (item["_objectKey"] === cronappDatasource.active["_objectKey"]) {
+                        trMasters.push(this.select()[i]);
+                        trDetails.push(this.select().next()[i]);
+                      }
                     });
                     ngModelCtrl.$setViewValue(selecteds);
                   }
@@ -3246,7 +3315,7 @@
                     }
                   }
                 }
-                collapseAllExcecptCurrent(this, this.select().next(), this.select());
+                collapseAllExcecptCurrent(this, trDetails, trMasters);
 
                 if (attrs && attrs.ngChange) {
                   scope.$eval(attrs.ngChange);
@@ -3269,8 +3338,8 @@
                       command = 'edit';
                     }
 
-                      let modelName = helperDirective.getModelName(attrs);
-                      if (item && item["_objectKey"]) {
+                    let modelName = helperDirective.getModelName(attrs);
+                    if (item && item["_objectKey"]) {
                       let key = item["_objectKey"];
                       let id = `${modelName}-${command}-${key}`;
                       $elem.attr('id', id);
@@ -3445,11 +3514,63 @@
                 }
               });
 
+              grid.selectable.userEvents.unbind("select");
+
             });
 
+            let contextMenuId = app.common.generateId();
+            let contextMenuValue = app.common.generateId();
+            let contextMenuClose = app.common.generateId();
+            let contextMenuHtml = $(`<ul id="${contextMenuId}">
+                                <li id="copyText">
+                                  <input id="${contextMenuValue}">
+                                  <span id="${contextMenuClose}" class="k-icon k-i-close" style="margin-left: 5px;"></span>
+                                </li>
+                              </ul>`);
             element.html($templateDyn);
+            element.append(contextMenuHtml);
             $compile($templateDyn)(element.scope());
 
+            let contextMenu = $(`#${contextMenuId}`).kendoContextMenu({
+              target: $templateDyn,
+              filter: "td",
+              close: (e) => {
+                if (!closeContextMenu) {
+                  e.preventDefault();
+                }
+              },
+              open: (e) => {
+                let cell = e.target;
+                let row = $(cell).parent()[0];
+                let grid = $templateDyn.data("kendoGrid");
+                let itemId = e.item.id;
+
+                let cellText = cell.innerText;
+                if (cellText.length && cellText !== '​') {
+                  $(e.item).find(`#${contextMenuValue}`).val(cellText);
+                  closeContextMenu = false;
+                }
+                else {
+                  let menuRejected = () => {
+                    return new Promise((resolve, reject) => {
+                      let waiting = setInterval(() => {
+                        if ($(`#${contextMenuId}`).is(':visible')) {
+                          clearInterval(waiting);
+                          $(`#${contextMenuId}`).hide();
+                        }
+                      });
+                    });
+                  }
+                  menuRejected();
+                }
+              }
+            }).data("kendoContextMenu");
+
+            $(`#${contextMenuClose}`).on("click", (e) => {
+              closeContextMenu = true;
+              contextMenu.close();
+            });
+
           }
         };
       }])
@@ -3531,8 +3652,8 @@
                     getAllParent(cronappDatasource, itemResult.d.results[0], ids, resolve, reject);
                   },
                   beforeSend: (xhr) => {
-                    if (window.uToken) {
-                      xhr.setRequestHeader ("X-AUTH-TOKEN", window.uToken);
+                    if (!window.isUsingCookie()) {
+                      xhr.setRequestHeader ("X-AUTH-TOKEN", cronapi.util.getUserToken());
                     }
                   },
                   error: () => reject(),
@@ -3673,8 +3794,8 @@
                               resolve();
                             },
                             beforeSend: (xhr) => {
-                              if (window.uToken) {
-                                xhr.setRequestHeader ("X-AUTH-TOKEN", window.uToken);
+                              if (!window.isUsingCookie()) {
+                                xhr.setRequestHeader ("X-AUTH-TOKEN", cronapi.util.getUserToken());
                               }
                             },
                             error: () => reject(),
@@ -4175,9 +4296,10 @@
             options.dataBound = attrs.ngDataBound ? function (){scope.$eval(attrs.ngDataBound)}: undefined;
             options.filtering = attrs.ngFiltering ? function (){scope.$eval(attrs.ngFiltering)}: undefined;
             options.open = function(e) {
-              if (!dataSourceScreen.fetched || (dataSourceScreen.data.length > combobox.dataSource.data().length)) {
+              if (!dataSourceScreen.fetched || (dataSourceScreen.lastLoadedTime !== combobox.dataSource.lastLoadedTime)) {
                 combobox.options.firstLazyRead = true;
                 combobox.dataSource.read();
+                combobox.dataSource.lastLoadedTime = dataSourceScreen.lastLoadedTime;
               }
             };
 
@@ -4225,6 +4347,13 @@
 
             this.toComboType(attrs, parent, select, combobox);
 
+            let forcedRefreshModelAt;
+            let canRefresh = () => {
+              let check = performance.now();
+              if (!forcedRefreshModelAt) return true;
+              return check - forcedRefreshModelAt > 2000;
+            };
+
             var forceChangeModel = async function(value) {
 
               $log.debug("forceChangeModel | " + attrs['id'] + " | " + value);
@@ -4331,7 +4460,7 @@
                 overRideRefresh: function() {
                   dataSourceScreen.fetched = false;
                   dataSourceScreen.cleanup();
-                  defineInitialValue();
+                  canRefresh() && defineInitialValue();
                 }
               });
             }
@@ -4364,6 +4493,9 @@
                   }
 
                   _compileAngular(scope, options.combobox.element[0]);
+                  if (options?.combobox?.span) {
+                    _compileAngular(scope, options.combobox.span);
+                  }
                 });
 
               }
@@ -4465,6 +4597,10 @@
             });
 
             $("[aria-owns='" + `${attrs.id}_listbox` + "']").attr('aria-label', $translate.instant('template.crud.search'));
+            if (ngModelCtrl.$modelValue) {
+              _scope.cronapi.internal.forceRefreshNgModel(attrs.ngModel, ngModelCtrl.$modelValue);
+              forcedRefreshModelAt = performance.now();
+            }
           }
         };
       })
@@ -5262,6 +5398,87 @@
                     return false;
                   });
                 }
+                $('#checkCollapsibleMenu').on('click', function() {
+                  var mainView = document.getElementById("main-view");
+                  if (this.checked) {
+                    mainView.classList.remove("main-view-retratil");
+                  } else {
+                    mainView.classList.add("main-view-retratil");
+                  }
+                });
+
+                let baseNav = element.closest('nav');
+                if (baseNav && baseNav.length) {
+
+                  let subMenuOnHover = !baseNav.hasClass('submenu-click');
+                  let baseNavId = baseNav.attr('id');
+
+                  if (!baseNavId) {
+                    baseNavId = app.common.generateId();
+                    baseNav.attr('id', baseNavId);
+                  }
+
+                  if (subMenuOnHover) {
+                    let alreadyHooked = $(`#${baseNavId} .dropdown-submenu`).data('hooked');
+                    if (!alreadyHooked) {
+                      $(`#${baseNavId} .dropdown-submenu`).on('mouseenter', function (e) {
+                        $(this).children('.dropdown-menu').addClass('show');
+                      }).on('mouseleave', function (e) {
+                        $(this).children('.dropdown-menu').removeClass('show');
+                      });
+                      $(`#${baseNavId} .dropdown-submenu`).data('hooked', true);
+                    }
+                    
+                  }
+                  else {
+                    let alreayHooked = $(`#${baseNavId} .dropdown-menu a.dropdown-toggle`).data('hooked');
+                    if (!alreayHooked) {
+                      $(`#${baseNavId} .dropdown-menu a.dropdown-toggle`).on('click', function(e) {
+                        if (!$(this).next().hasClass('show')) {
+                          $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
+                        }
+                        var $subMenu = $(this).next('.dropdown-menu');
+                        $subMenu.toggleClass('show');
+
+                        $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
+                          $('.dropdown-submenu .show').removeClass('show');
+                        });
+
+                        if ($subMenu.length) {
+                          return false;
+                        }
+                        else {
+                          $('.dropdown-menu').removeClass('show');
+                        }
+                      });
+                      $(`#${baseNavId} .dropdown-menu a.dropdown-toggle`).data('hooked', true);
+                    }
+                    
+                    let alreadyHookedBs = $(`#${baseNavId} .dropdown.nav-item`).data('hooked');
+                    if (!alreadyHookedBs) {
+                      $(`#${baseNavId} .dropdown.nav-item`).on('hidden.bs.dropdown', function (e) {
+                        $('.dropdown-submenu .show').removeClass("show");
+                        $('.dropdown-menu .show').removeClass('show');
+                      });
+                      $(`#${baseNavId} .dropdown.nav-item`).data('hooked', true);
+                    }
+                    
+                  }
+
+                }
+                else {
+                  let menuWihtoutNavBar_id = $(element).find('ul:first').attr('id')
+                  let alreadyHooked = $(`#${menuWihtoutNavBar_id} .dropdown-submenu`).data('hooked');
+                  if (!alreadyHooked) {
+                    $(`#${menuWihtoutNavBar_id} .dropdown-submenu`).on('mouseenter', function (e) {
+                      $(this).children('.dropdown-menu').addClass('show');
+                    }).on('mouseleave', function (e) {
+                      $(this).children('.dropdown-menu').removeClass('show');
+                    });
+                    $(`#${menuWihtoutNavBar_id} .dropdown-submenu`).data('hooked', true);
+                  }
+                }
+
               });
             });
           }
@@ -5754,46 +5971,53 @@
         }
       })
 
-  .directive('crnInfiniteScroll', ['$compile', function($compile){
-    'use strict';
-    return {
-      restrict: 'EA',
-      link: function(scope, element, attrs) {
-        var dataSource = attrs.crnInfiniteScroll ? eval(attrs.crnInfiniteScroll) : attrs.crnDatasource ? eval(attrs.crnDatasource): undefined;
-        if (dataSource) {
-          let nextPageInfinite = {
-            isVisible: false,
-            checkVisibility: function(visible) {
-              if (nextPageInfinite.isVisible !== visible) {
-                nextPageInfinite.isVisible = visible;
-                if (nextPageInfinite.isVisible) {
-                  if (dataSource.loaded && dataSource.loadedFinish) {
-                      dataSource.nextPage();
-                  } else {
-                    let intervalNextPage = setInterval(function() {
-                      if (dataSource.loaded && dataSource.loadedFinish) {
-                        dataSource.nextPage();
-                        clearInterval(intervalNextPage);
-                      }
-                    }, 250);
-                  }
+  .directive('crnInfiniteScroll', ['$compile', function($compile) {
+  'use strict';
+  return {
+    restrict: 'EA',
+    link: function(scope, element, attrs) {
+      var dataSource = scope.$eval(attrs.crnInfiniteScroll || attrs.crnDatasource);
+
+      if (dataSource) {
+        let nextPageInfinite = {
+          isVisible: false,
+          checkVisibility: function() {
+            var topElem = element.offset().top;
+            var botElem = element.offset().top + element.outerHeight();
+            var botScrn = $(window).scrollTop() + $(window).innerHeight();
+            var topScrn = $(window).scrollTop();
+
+            return (botScrn > topElem) && (topScrn < botElem);
+          },
+          eventScroll: function() {
+            let visible = nextPageInfinite.checkVisibility();
+
+            if (visible && dataSource.loaded && dataSource.loadedFinish) {
+              dataSource.nextPage();
+            } else if (visible && !(dataSource.loaded && dataSource.loadedFinish)) {
+              let intervalNextPage = setInterval(function() {
+                if (dataSource.loaded && dataSource.loadedFinish) {
+                  dataSource.nextPage();
+                  clearInterval(intervalNextPage);
                 }
-              }
-            },
-            eventScroll: function() {
-              var topElem = element.offset().top;
-              var botElem = element.offset().top + element.outerHeight();
-              var botScrn = $(window).scrollTop() + $(window).innerHeight();
-              var topScrn = $(window).scrollTop();
-              nextPageInfinite.checkVisibility((botScrn > topElem) && (topScrn < botElem));
+              }, 250);
             }
-          };
-          $(window).scroll(nextPageInfinite.eventScroll);
-          $(window).ready(nextPageInfinite.eventScroll);
-        }
+          }
+        };
+
+        $(window).on('scroll', nextPageInfinite.eventScroll);
+        $(window).on('load', nextPageInfinite.eventScroll);
+
+        scope.$on('$destroy', function() {
+          $(window).off('scroll', nextPageInfinite.eventScroll);
+          $(window).off('load', nextPageInfinite.eventScroll);
+        });
+      } else {
+        console.error('DataSource não foi definido ou não está acessível.');
       }
     }
-  }])
+  };
+}])
 
 }(app));
 
@@ -6022,6 +6246,12 @@ function maskDirective($compile, $translate, $parse, attrName) {
               if (type == 'time' || type == 'time-local') {
                 momentDate = momentDate.year(1970).dayOfYear(1).month(0);
               }
+              if (typeof value === "string" && (value.length < mask.length)) {
+                let tempValue = formatWithMomentAs(mask, useUTC, value, "string");
+                if (tempValue.startsWith(value) && (value.length < tempValue.length) && (isNaN(tempValue[value.length]) || tempValue[value.length] === " ")) {
+                  ngModelCtrl.$$element.val(tempValue.substring(0, value.length + 1));
+                }
+              }
               return momentDate.toDate();
             }
 
@@ -6797,6 +7027,9 @@ app.kendoHelper = {
                   self.options.combobox.options.expanded = true;
                 }
                 e.success(data);
+                if (self?.options?.combobox?.span) {
+                  self.options.$compile(self.options.combobox.span)(self.options.scope);
+                }
                 self.options.kendoCallback = e;
                 if (self.options && self.options.combobox && self.options.combobox.element[0].id) {
                   var expToFind = " .k-animation-container";
@@ -7258,6 +7491,33 @@ function cronReportViewer($compile) {
 
       executeReport(attrs.options);
 
+      // Não inicia em em Tab não ativa
+      // Verifica se esta dentro de um tab
+      let elementTab = element[0].parentElement;
+      while (elementTab) {
+        if (elementTab.tagName === "BODY") {
+          elementTab = null;
+        } else if (elementTab.classList.contains("tab-pane")) {
+          break;
+        } else {
+          elementTab = elementTab.parentElement;
+        }
+      }
+      // Se estiver dentro de um tab e esta não estiver ativa, inclui observador para ler o relatorio ao ativar a tab
+      if (elementTab && !elementTab.classList.contains("active")) {
+        let observerClassChange = new MutationObserver(function(mutationsList, observer) {
+          for (let mutation of mutationsList) {
+            if (mutation.attributeName === "class" && mutation.target.classList.contains("active")) {
+              executeReport(attrs.options);
+              // Desconecta observador, pois só precisa ser executado uma vez.
+              observer.disconnect();
+              break;
+            }
+          }
+        });
+        observerClassChange.observe(elementTab, { attributes: true });
+      }
+
       var filterTimeout = null;
       scope.$watch(function(){ return attrs.options }, function(value, old){
         if (value !== old) {
@@ -7276,4 +7536,5 @@ function cronReportViewer($compile) {
 
     }
   };
-}
+}
+