cronapp-framework-js 3.2.0-SP.9 → 3.2.1-SP.1

package/js/directives.js

@@ -2581,11 +2581,12 @@
               }, 200);
             }
 
-            function getCommandForEditButtonDatabase(opt, command) {
+            function getCommandForEditButtonDatabase(opt, command, iconClass) {
               var cmd;
               let idForCommand = app.common.generateId();
               let ariaLabel = $translate.instant('Edit');
-              let template = `<a href class='k-button k-grid-edit k-grid-${idForCommand}' aria-label='${ariaLabel}'><span class='k-icon k-i-edit'></span></a>`;
+              let iconEditClass = iconClass ? iconClass : "k-icon k-i-edit";
+              let template = `<a href class='k-button k-grid-edit k-grid-${idForCommand}' aria-label='${ariaLabel}'><span class='${iconEditClass}'></span></a>`;
               if ((opt.editable == 'popupCustom') || (opt.editable == 'datasource')) {
                 cmd = {
                   name: idForCommand,
@@ -2625,11 +2626,12 @@
               return cmd;
             }
 
-            function getCommandForRemoveButtonDatabase(opt, command) {
+            function getCommandForRemoveButtonDatabase(opt, command, iconClass) {
               var cmd;
               let idForCommand = app.common.generateId();
               let ariaLabel = $translate.instant('Remove');
-              let template = `<a href class='k-button k-grid-delete k-grid-${idForCommand}' aria-label='${ariaLabel}'><span class='k-icon k-i-close'></span></a>`;
+              let iconDeleteClass = iconClass ? iconClass : "k-icon k-i-close";
+              let template = `<a href class='k-button k-grid-delete k-grid-${idForCommand}' aria-label='${ariaLabel}'><span class='${iconDeleteClass}'></span></a>`;
 
               if ((opt.editable == 'popupCustom') || (opt.editable == 'datasource')) {
                 cmd = {
@@ -2824,10 +2826,10 @@
                     command.forEach(function(f) {
                       var cmd;
                       if ( f == "edit") {
-                        cmd = getCommandForEditButtonDatabase.bind(this)(options, f);
+                        cmd = getCommandForEditButtonDatabase.bind(this)(options, f, column.iconEditClass);
                       }
                       else {
-                        cmd = getCommandForRemoveButtonDatabase.bind(this)(options, f);
+                        cmd = getCommandForRemoveButtonDatabase.bind(this)(options, f, column.iconDeleteClass);
                       }
                       commands.push(cmd);
                     }.bind(this));
@@ -5512,101 +5514,134 @@
       }])
 
       .directive('cronBreadcrumbs', function ($rootScope) {
-      'use strict';
-      return {
-        restrict: 'E',
-        replace: true,
-        link: function (scope, element, attrs) {
-
-          var bcAction = attrs.ngInit ? attrs.ngInit : null;
-          const bcDelimiterIcon = attrs.crnDelimiterIcon;
-          const bcTypeMenu = attrs.typeMenu;
-          const bcMenuId = attrs.idMenu ? attrs.idMenu : null;
-          const bcId = attrs.id;
-          const bcIconRoot = attrs.breadcrumbIcon ? attrs.breadcrumbIcon : null;
-          const bcList = [];
-
-          const fillAction = async () => {
+        'use strict';
+        return {
+          restrict: 'E',
+          replace: true,
+          link: function (scope, element, attrs) {
+
+            let bcAction = attrs.ngInit ? attrs.ngInit : null;
+            let bcList = [];
+            const bcDelimiterIcon = attrs.crnDelimiterIcon;
+            const bcTypeMenu = attrs.typeMenu;
+            const bcMenuId = attrs.idMenu ? attrs.idMenu : null;
+            const bcId = attrs.id;
+            const bcIconRoot = attrs.breadcrumbIcon ? attrs.breadcrumbIcon : null;
+
+
+            const destroyBreadcrumb = () => {
+              const $bcElement = $(`#${bcId}`);
+              if ($bcElement.data('kendoBreadcrumb')) {
+                $bcElement.data('kendoBreadcrumb').destroy();
+                $bcElement.empty();
+              }
+            };
+
+
+            const fillAction = async () => {
               const shortVersion = bcAction.replace("cronapi.client('js.", 'blockly.js.');
               bcAction = shortVersion.replace("').run()", '');
               bcAction = scope.$eval(bcAction);
               bcList = await bcAction();
 
               const onclick = async (e) => {
-                if (e.item.action)  {
+                if (e.item.action) {
                   e.item.action();
                 }
               };
 
+
+              destroyBreadcrumb();
+
+
               $(`#${bcId}`).kendoBreadcrumb({
                 items: bcList,
                 delimiterIcon: bcDelimiterIcon,
                 navigational: true,
-                click : onclick
+                click: onclick
               });
-          }
+            };
 
-          const clearAction = (action) => {
-           if (action) {
-            return action.replace("cronapi.screen.changeView('", '').replace("', [])", '');
-           }
-           return "#/home";
-          }
 
-          if (bcAction && bcTypeMenu === "idBloco") {
-            fillAction();
-          } else {
-            var observer = new MutationObserver((mutation, observer) => {
+            const clearAction = (action) => {
+              if (action) {
+                return action.replace("cronapi.screen.changeView('", '').replace("', [])", '');
+              }
+              return "#/home";
+            };
+
+
+            if (bcAction && bcTypeMenu === "idBloco") {
+              fillAction();
+            }
+
+            else {
+              var observer = new MutationObserver((mutation, obs) => {
                 const $parent = $(`#${bcMenuId}`).parent();
                 const attrOptions = $parent.attr('options');
+
                 if (attrOptions) {
-                    observer.disconnect(); // stop observing
 
-                    const options = JSON.parse(attrOptions);
-                    const page = document.location.hash || 'home';
+                  obs.disconnect();
 
-                    const findTrace = (array, action, path = []) => {
-                      for (let i = 0; i < array.length; i++) {
-                        var item = array[i];
-                        item.action = clearAction(item.action);
-                        if (item.action === action) {
-                          return [...path, item];
-                        }
-                        if (item.menuItems) {
-                          const result = findTrace(item.menuItems, action, [...path, item]);
-                          if (result) {
-                            return result;
-                          }
+                  const options = JSON.parse(attrOptions);
+                  const page = document.location.hash || 'home';
+
+                  const findTrace = (array, action, path = []) => {
+                    for (let i = 0; i < array.length; i++) {
+                      var item = array[i];
+                      item.action = clearAction(item.action);
+                      if (item.action === action) {
+                        return [...path, item];
+                      }
+                      if (item.menuItems) {
+                        const result = findTrace(item.menuItems, action, [...path, item]);
+                        if (result) {
+                          return result;
                         }
                       }
-                      return null;
                     }
+                    return null;
+                  };
 
-                    const trace = findTrace(options.subMenuOptions, page);
-                    if (trace) {
-                        for (var index in trace) {
-                            const item = trace[index];
-                            bcList.push({
-                              type: index == 0 ? 'rootitem' : 'item',
-                              href: item.action,
-                              text: item.title,
-                              showText: true,
-                              showIcon: false
-                            });
-                        }
-                        $(`#${bcId}`).kendoBreadcrumb({
-                            items: bcList,
-                            delimiterIcon: bcDelimiterIcon,
-                            navigational: true
-                        });
+
+                  const trace = findTrace(options.subMenuOptions, page);
+                  if (trace) {
+                    bcList = [];
+                    for (var index in trace) {
+                      const item = trace[index];
+                      bcList.push({
+                        type: index == 0 ? 'rootitem' : 'item',
+                        href: item.action,
+                        text: item.title,
+                        showText: true,
+                        showIcon: false
+                      });
                     }
+
+
+                    destroyBreadcrumb();
+
+
+                    $(`#${bcId}`).kendoBreadcrumb({
+                      items: bcList,
+                      delimiterIcon: bcDelimiterIcon,
+                      navigational: true
+                    });
+                  }
                 }
-            });
-            observer.observe(document.body, { childList : true});
+              });
+
+
+              observer.observe(document.body, {
+                childList: true,
+                attributes: true,
+                subtree: true
+              });
+            }
           }
-        }
-      }
-    })
+        };
+      })
 
       .directive('ngInitialValue', function($parse) {
         return {
@@ -6069,7 +6104,7 @@
         $(window).ready(infiniteScrollController.executeInfinityScroll);
       }
     };
-  }]);
+  }])
 
 }(app));
 
@@ -6090,63 +6125,181 @@ function maskDirective($compile, $translate, $parse, attrName) {
         return;
 
       var modelGetter = $parse(attrs['ngModel']);
-
       var modelSetter = modelGetter.assign;
 
-
       var $element = $(element);
       if ($element.data('alreadycompiled'))
         return;
+
       $element.data('alreadycompiled', true);
       $element.data('$compile', $compile);
 
       var type = $element.attr("type");
+      
+      if (type === "email") {
+        $element.inputmask("email").attr("novalidate", "novalidate");
+        $element.next(".k-tooltip-validation").remove();
 
-      if (type == "checkbox" || type == "password" || type == "url"){
+        const observer = new MutationObserver(() => {
+          const tooltip = $element.next(".k-tooltip-validation");
+          if (tooltip.length) tooltip.remove();
+        });
+        
+        observer.observe($element[0].parentNode, { childList: true, subtree: true });
         return;
+      }      
+
+      if ([
+          "week",
+          "date",
+          "time",
+          "datetime-local",
+          "month",
+          "datetime",
+          "time-local",
+        ].includes(type)) {
+        const iconClass = [
+          "week",
+          "dat",
+          "month",
+          "datetime-local",
+          "datetime",
+        ].includes(type)
+          ? "fa fa-calendar-o"
+          : "fa fa-clock-o";
+
+        const iconWrapper = document.createElement("span");
+        iconWrapper.className = "input-icon-wrapper";
+        iconWrapper.innerHTML = `<i class="${iconClass}" style="cursor: pointer; font-weight: 600;"></i>`;
+
+        const auxInput = document.createElement("input");
+        auxInput.type = type;
+        auxInput.style.position = "absolute";
+        auxInput.style.opacity = "0";
+        auxInput.style.pointerEvents = "none";
+
+        $element.after(iconWrapper);
+        iconWrapper.appendChild(auxInput);
+
+        iconWrapper.addEventListener("click", () => {
+          auxInput.focus();
+        });
+
+        auxInput.addEventListener("change", () => {
+          $element.val(auxInput.value);
+          $element.trigger("input");
+        });
+
+        scope.$watch(
+          () => $element.attr("exibir-icone"),
+          (newValue) => {
+            if (newValue === "true") {
+              iconWrapper.style.display = "inline-block";
+            } else {
+              iconWrapper.style.display = "none";
+            }
+          }
+        );
       }
 
-      if(type == "color" || type == "range"){
-        $element[0].classList.remove("form-control");
-        $element[0].classList.remove("k-textbox");
+      if (["checkbox", "password", "url", "color", "range"].includes(type)) {
+        if (["color", "range"].includes(type)) {
+          $element[0].classList.remove("form-control", "k-textbox");
+        }
         return;
       }
 
-      $element.data("type", type);
-
-      $element.attr("type", "text");
+      if (!["color", "range", "checkbox"].includes(type)) {
+        $element.data("type", type);
+        $element.attr("type", "text");
+      }
 
       if (ngModelCtrl) {
         ngModelCtrl.$formatters = [];
         ngModelCtrl.$parsers = [];
       }
 
-      if (attrs.asDate !== undefined && type == 'text')
-        type = "date";
-
-      var textMask = true;
-
-      var removeMask = false;
+      var attrMask =
+        attrs.mask || attrs.format || parseMaskType(type, $translate);
+      var mask = attrMask.replace(";1", "").replace(";0", "").trim();
+
+      if (!mask) return;
+
+      const placeholder = generateCustomPlaceholder(type, mask);
+      $element.attr("placeholder", placeholder);
+
+      if ([
+          "week",
+          "date",
+          "time",
+          "datetime-local",
+          "month",
+          "datetime",
+          "time-local",
+        ].includes(type)) {
+        $element.addClass("dark-placeholder");
+      }
 
-      var attrMask = attrs.mask || attrs.format;
+      $element.on("input blur", function () {
+        if (!$element.val()) {
+          $element.attr("placeholder", placeholder);
+        } else {
+          $element.attr("placeholder", "");
+        }
+      });
 
-      if (!attrMask) {
-        attrMask = parseMaskType(type, $translate);
+      if (["date", "datetime-local", "datetime", "time", "time-local"].includes(
+          type
+        )) {
+        $element.datetimepicker({
+          format: mask,
+          locale: $translate.use(),
+        });
+      } else if (["number", "money", "integer"].includes(type)) {
+        $element.inputmask("numeric", {
+          prefix: "",
+          rightAlign: false,
+        });
       } else {
-        attrMask = parseMaskType(attrMask, $translate);
-      }
-
-      if (attrMask.endsWith(";0")) {
-        removeMask = true;
+        $element.mask(mask);
       }
 
-      var mask = attrMask.replace(';1', '').replace(';0', '').trim();
-      if (mask == undefined || mask.length == 0) {
-        return;
+      function generateCustomPlaceholder(type, mask) {
+        switch (type) {
+          case "week":
+            return "Semana --, ----";
+          case "month":
+            return "-------- de ----";
+          case "time":
+          case "time-local":
+            return "--:--";
+          case "datetime-local":
+          case "datetime":
+            return "dd/mm/aaaa --:--";
+          case "date":
+            return "dd/mm/aaaa";
+          default:
+            return mask
+              .replace(/D/g, "d")
+              .replace(/M/g, "m")
+              .replace(/Y/g, "a")
+              .replace(/H/g, "h")
+              .replace(/m/g, "m")
+              .replace(/s/g, "s")
+              .replace(/-/g, "-")
+              .replace(/:/g, ":")
+              .replace(/\//g, "/");
+        }
       }
 
-      if (type == 'date' || type == 'datetime' || type == 'datetime-local' || type == 'month' || type == 'time' || type == 'time-local' || type == 'week') {
-
+      if ([
+          "date",
+          "datetime",
+          "datetime-local",
+          "month",
+          "time",
+          "week",
+        ].includes(type)) {
         var options = {
           format: mask,
           locale: $translate.use(),
@@ -6170,27 +6323,55 @@ function maskDirective($compile, $translate, $parse, attrName) {
           }
         };
 
-        if (mask != 'DD/MM/YYYY' && mask != 'MM/DD/YYYY') {
-          options.sideBySide = true;
-        }
-
-        var useUTC = type == 'date' || type == 'datetime' || type == 'time';
-
-        if (!window.fixedTimeZone) {
-          useUTC = false;
+        if ($element.attr('from-grid')) {
+          var openPopup = function () {
+            var popup = $(this).offset();
+            var isBelowInput = true;
+            var datetimepickerShowing = $(this)
+              .parent()
+              .find(".bootstrap-datetimepicker-widget.dropdown-menu");
+            if (!datetimepickerShowing.length) {
+              isBelowInput = false;
+              datetimepickerShowing = $(this)
+                .parent()
+                .find(".bootstrap-datetimepicker-widget.dropdown-menu.top");
+            }
+            if ($(datetimepickerShowing).offset()) {
+              datetimepickerShowing.appendTo("body");
+              var popupTop = isBelowInput
+                ? popup.top + $element.outerHeight()
+                : popup.top - datetimepickerShowing.outerHeight();
+              datetimepickerShowing.css({
+                top: popupTop,
+                left: popup.left,
+                zIndex: 999999,
+              });
+            }
+          };
+          $element.on("click", openPopup);
+          $element.on("focus", function () {
+            setTimeout(openPopup.bind(this), 100);
+          });
         }
 
-        $element.data('mask', mask);
-        $element.data('useUTC', useUTC);
+        $element.datetimepicker(options);
 
         if ($element.attr('from-grid')) {
           var openPopup = function() {
             var popup = $(this).offset();
             var isBellowInput = true;
-            var datetimepickerShowing = $(this).parent().find('.bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour.bottom');
+            var datetimepickerShowing = $(this)
+              .parent()
+              .find(
+                '.bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour.bottom'
+              );
             if (!datetimepickerShowing.length) {
               isBellowInput = false;
-              datetimepickerShowing = $(this).parent().find('.bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour.top');
+              datetimepickerShowing = $(this)
+                .parent()
+                .find(
+                  '.bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour.top'
+                );
             }
             if ($(datetimepickerShowing).offset()) {
               var popupLeft = $(datetimepickerShowing).offset().left;
@@ -6198,11 +6379,10 @@ function maskDirective($compile, $translate, $parse, attrName) {
               var grid = $('body');
               datetimepickerShowing.appendTo(grid);
 
-              var popupTop = 0
+              var popupTop = 0;
               if (!isBellowInput)
                 popupTop = popup.top - ($(datetimepickerShowing).height() + 15);
-              else
-                popupTop = popup.top + 35;
+              else popupTop = popup.top + 35;
 
               datetimepickerShowing.css("top", popupTop);
               datetimepickerShowing.css("bottom", "auto");
@@ -6241,10 +6421,8 @@ function maskDirective($compile, $translate, $parse, attrName) {
             $element.val(momentDate.format(mask));
             $element.data('initial-value', null);
           }
-
-        }
-        else {
-          $element.wrap("<div style=\"position:relative\"></div>");
+        } else {
+          $element.wrap('<div style="position:relative"></div>');
         }
         $element.datetimepicker(options);
         if (attrs.fromGrid !== "true") {
@@ -6255,7 +6433,7 @@ function maskDirective($compile, $translate, $parse, attrName) {
                 var value = $element.val();
                 var momentDate = null;
                 if (useUTC) {
-                  momentDate = moment(value, mask).utcOffset(window.timeZoneOffset, true);
+                  momentDate = moment(value, mask).utcOffset( window.timeZoneOffset, true);
                 } else {
                   momentDate = moment(value, mask);
                 }
@@ -6270,48 +6448,27 @@ function maskDirective($compile, $translate, $parse, attrName) {
           });
         }
 
-        if (ngModelCtrl ) {
-          ngModelCtrl.$formatters.push(function (value) {
-            if (value) {
-              return formatWithMomentAs(mask, useUTC, value, "string");
-            }
-
-            if(value === null){
-              var dp = $element.datetimepicker(options).data('DateTimePicker');
-              dp.date(null);
-            }
+        if (ngModelCtrl) {
+          ngModelCtrl.$formatters.push((value) =>
+            value ? moment(value).format(mask) : null
+          );
 
-            return null;
+          ngModelCtrl.$parsers.push((value) => {
+            var momentDate = moment(value, mask);
+            return momentDate.isValid() ? momentDate.toDate() : null;
           });
 
-          ngModelCtrl.$parsers.push(function (value) {
-            if (value) {
-              if (value instanceof Date) {
-                return value;
-              }
-              var momentDate = null;
-              if (useUTC) {
-                momentDate = moment(value, mask).utcOffset(window.timeZoneOffset, true);
-              } else {
-                momentDate = moment(value, mask);
-              }
-              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();
-            }
-
-            return null;
+          $element.on('dp.change', function () {
+            scope.$apply(() => {
+              var value = $element.val();
+              var momentDate = moment(value, mask);
+              if (momentDate.isValid())
+                ngModelCtrl.$setViewValue(momentDate.toDate());
+            });
           });
         }
-
-      } else if (type == 'number' || type == 'money' || type == 'integer' || type == 'money-decimal') {
+      }
+      else if (type == 'number' || type == 'money' || type == 'integer' || type == 'money-decimal') {
         removeMask = true;
 
         var currency = mask.trim().replace(/\./g, '').replace(/\,/g, '').replace(/#/g, '').replace(/0/g, '').replace(/9/g, '');
@@ -6364,45 +6521,40 @@ function maskDirective($compile, $translate, $parse, attrName) {
         }
 
         var ipOptions = {
-          'rightAlign':  (type == 'money' || type == 'money-decimal'),
-          'unmaskAsNumber': true,
-          'allowMinus': true,
-          'prefix': prefix,
-          'suffix': suffix,
-          'radixPoint': decimal,
-          'digits': precision,
-          'numericInput' :  (type == 'money-decimal')
+          rightAlign: ['money', 'money-decimal'].includes(type),
+          allowMinus: true,
+          prefix: prefix,
+          suffix: suffix,
+          radixPoint: decimal,
+          digits: precision,
+          groupSeparator: thousands,
+          autoGroup: !!thousands,
         };
 
-        if (thousands) {
-          ipOptions['autoGroup'] = true;
-          ipOptions['groupSeparator'] = thousands;
-        }
-
-        $(element).inputmask(inputmaskType, ipOptions);
-        useInputMaskPlugin(element, ngModelCtrl, scope, modelSetter, mask);
+        $element.inputmask(inputmaskType, ipOptions);
+        useInputMaskPlugin($element, ngModelCtrl, scope, modelSetter, mask);
       }
-      else if (type == 'text' || type == 'tel' || type == 'string') {
-
-        let charToNumber = ['D','M', 'Y', 'H', 'm','s'];
-        let verifyMaskDateForText = (mask) => { charToNumber.forEach((c) => mask = mask.replaceAll(c,'9')); return mask};
+      else {
+        let charToNumber = ['D', 'M', 'Y', 'H', 'm', 's'];
+        let verifyMaskDateForText = (mask) => {
+          charToNumber.forEach((c) => (mask = mask.replaceAll(c, "9")));
+          return mask;
+        };
         mask = verifyMaskDateForText(mask);
 
         if(!attrs.maskPlaceholder){
           $element.mask(mask);
-          useMaskPlugin(element, ngModelCtrl, scope, modelSetter, removeMask);
-        }
-        else{
-          options = {};
-          options['placeholder'] = attrs.maskPlaceholder;
-          $(element).inputmask(mask, options);
-          if(removeMask){
-            useInputMaskPlugin(element, ngModelCtrl, scope, modelSetter, mask);
-          }
+          useMaskPlugin($element, ngModelCtrl, scope, modelSetter, false);
+        } else {
+          var options = {
+            placeholder: attrs.maskPlaceholder,
+          };
+          $element.inputmask(mask, options);
+          useInputMaskPlugin($element, ngModelCtrl, scope, modelSetter, mask);
         }
       }
-    }
-  }
+    },
+  };
 }
 
 function useInputMaskPlugin(element, ngModelCtrl, scope, modelSetter, mask){