cronapp-framework-js 3.0.0-SP.32 → 3.0.0-SP.34

package/js/directives.js

@@ -2688,6 +2688,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)  {
@@ -2778,68 +2839,7 @@
                       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
-                        };
-
-                        cronappDatasource.goTo(itemAsObj);
-                        scope.$eval(call, contextVars);
-                        return;
+                        commandClick.bind(this)(e, column);
                       }
                     }],
                     width: widthDevice.width,
@@ -2850,6 +2850,57 @@
                   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 = ' ' + label;
+
+                      let className = 'k-custom-command' + (label ? ' k-button-with-label' : '');
+                      if (buttonColumn.theme)
+                        className += ' ' + 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 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='${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,
@@ -3459,11 +3510,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();
+            });
+
           }
         };
       }])
@@ -5296,6 +5399,73 @@
                     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 (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);
+                  }
+                }
+
               });
             });
           }
@@ -7338,3 +7508,4 @@ function cronReportViewer($compile) {
     }
   };
 }
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cronapp-framework-js",
-  "version": "3.0.0-SP.32",
+  "version": "3.0.0-SP.34",
   "description": "Javascript library for CronApp's projects",
   "main": "cronapp.framework.js",
   "scripts": {