Merge branch 'master' of https://github.com/ghiscoding/aurelia-slickgrid

aurelia-slickgrid/assets/lib/multiple-select/multiple-select.js

@@ -446,8 +446,12 @@
       this.$drop[this.animateMethod('show')]();
 
       // fix filter bug: no results show
-      this.$selectAll.parent().show();
-      this.$noResults.hide();
+      if (this.$selectAll) {
+        this.$selectAll.parent().show();
+      }
+      if (this.$noResults) {
+        this.$noResults.hide();
+      }
 
       // Fix #77: 'All selected' when no options
       if (!this.$el.children().length) {

aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.ts

@@ -10,7 +10,6 @@ import 'slickgrid/controls/slick.columnpicker';
 import 'slickgrid/controls/slick.gridmenu';
 import 'slickgrid/controls/slick.pager';
 import 'slickgrid/plugins/slick.autotooltips';
-import 'slickgrid/plugins/slick.cellcopymanager';
 import 'slickgrid/plugins/slick.cellexternalcopymanager';
 import 'slickgrid/plugins/slick.cellrangedecorator';
 import 'slickgrid/plugins/slick.cellrangeselector';

aurelia-slickgrid/src/aurelia-slickgrid/editors/dateEditor.ts

@@ -1,8 +1,9 @@
-import { mapFlatpickrDateFormatWithFieldType } from './../services/utilities';
+import { mapFlatpickrDateFormatWithFieldType, mapMomentDateFormatWithFieldType } from './../services/utilities';
 import { Column, Editor, FieldType, GridOption } from './../models/index';
 import { I18N } from 'aurelia-i18n';
 import { inject } from 'aurelia-framework';
 import * as flatpickr from 'flatpickr';
+import * as moment from 'moment';
 import * as $ from 'jquery';
 
 /*
@@ -20,31 +21,34 @@ export class DateEditor implements Editor {
   }
 
   init(): void {
-    const gridOptions = this.args.grid.getOptions() as GridOption;
-    this.defaultDate = this.args.item[this.args.column.field] || null;
-    const inputFormat = mapFlatpickrDateFormatWithFieldType(this.args.column.type || FieldType.dateIso);
-    const outputFormat = mapFlatpickrDateFormatWithFieldType(this.args.column.outputType || FieldType.dateUtc);
-    let currentLocale = this.i18n.getLocale() || 'en';
-    if (currentLocale.length > 2) {
-      currentLocale = currentLocale.substring(0, 2);
-    }
-
-    const pickerOptions: any = {
-      defaultDate: this.defaultDate,
-      altInput: true,
-      altFormat: inputFormat,
-      dateFormat: outputFormat,
-      closeOnSelect: false,
-      locale: (currentLocale !== 'en') ? this.loadFlatpickrLocale(currentLocale) : 'en',
-      onChange: (selectedDates: any[] | any, dateStr: string, instance: any) => {
-        this.save();
-      },
-    };
+    if (this.args && this.args.column) {
+      const columnDef = this.args.column;
+      const gridOptions = this.args.grid.getOptions() as GridOption;
+      this.defaultDate = (this.args.item) ? this.args.item[this.args.column.field] : null;
+      const inputFormat = mapFlatpickrDateFormatWithFieldType(this.args.column.type || FieldType.dateIso);
+      const outputFormat = mapFlatpickrDateFormatWithFieldType(this.args.column.outputType || FieldType.dateUtc);
+      let currentLocale = this.i18n.getLocale() || 'en';
+      if (currentLocale.length > 2) {
+        currentLocale = currentLocale.substring(0, 2);
+      }
 
-    this.$input = $(`<input type="text" data-defaultDate="${this.defaultDate}" class="editor-text flatpickr" />`);
-    this.$input.appendTo(this.args.container);
-    this.flatInstance = (flatpickr && this.$input[0] && typeof this.$input[0].flatpickr === 'function') ? this.$input[0].flatpickr(pickerOptions) : null;
-    this.show();
+      const pickerOptions: any = {
+        defaultDate: this.defaultDate,
+        altInput: true,
+        altFormat: inputFormat,
+        dateFormat: outputFormat,
+        closeOnSelect: false,
+        locale: (currentLocale !== 'en') ? this.loadFlatpickrLocale(currentLocale) : 'en',
+        onChange: (selectedDates: any[] | any, dateStr: string, instance: any) => {
+          this.save();
+        },
+      };
+
+      this.$input = $(`<input type="text" data-defaultDate="${this.defaultDate}" class="editor-text flatpickr" />`);
+      this.$input.appendTo(this.args.container);
+      this.flatInstance = (flatpickr && this.$input[0] && typeof this.$input[0].flatpickr === 'function') ? this.$input[0].flatpickr(pickerOptions) : null;
+      this.show();
+    }
   }
 
   loadFlatpickrLocale(locale: string) {
@@ -87,7 +91,10 @@ export class DateEditor implements Editor {
   }
 
   serializeValue() {
-    return this.$input.val();
+    const outputFormat = mapMomentDateFormatWithFieldType(this.args.column.type || FieldType.dateIso);
+    const value = moment(this.defaultDate).format(outputFormat);
+
+    return value;
   }
 
   applyValue(item: any, state: any) {

aurelia-slickgrid/src/aurelia-slickgrid/services/controlAndPlugin.service.ts

@@ -37,6 +37,7 @@ export class ControlAndPluginService {
   headerMenuPlugin: any;
   gridMenuControl: any;
   rowSelectionPlugin: any;
+  undoRedoBuffer: any;
 
   constructor(
     private exportService: ExportService,
@@ -59,22 +60,29 @@ export class ControlAndPluginService {
     this._columnDefinitions = columnDefinitions;
     this.visibleColumns = columnDefinitions;
 
+    // Column Picker Plugin
     if (options.enableColumnPicker) {
       this.columnPickerControl = this.createColumnPicker(grid, columnDefinitions, options);
     }
+
+    // Grid Menu Plugin
     if (options.enableGridMenu) {
       this.gridMenuControl = this.createGridMenu(grid, columnDefinitions, options);
     }
+
+    // Auto Tooltip Plugin
     if (options.enableAutoTooltip) {
       this.autoTooltipPlugin = new Slick.AutoTooltips(options.autoTooltipOptions || {});
       grid.registerPlugin(this.autoTooltipPlugin);
     }
 
+    // Grouping Plugin
     // register the group item metadata provider to add expand/collapse group handlers
     if (options.enableGrouping) {
       grid.registerPlugin(groupItemMetadataProvider);
     }
 
+    // Checkbox Selector Plugin
     if (options.enableCheckboxSelector) {
       // when enabling the Checkbox Selector Plugin, we need to also watch onClick events to perform certain actions
       // the selector column has to be create BEFORE the grid (else it behaves oddly), but we can only watch grid events AFTER the grid is created
@@ -86,10 +94,14 @@ export class ControlAndPluginService {
         grid.setSelectionModel(this.rowSelectionPlugin);
       }
     }
+
+    // Row Selection Plugin
     if (options.enableRowSelection) {
       this.rowSelectionPlugin = new Slick.RowSelectionModel(options.rowSelectionOptions || {});
       grid.setSelectionModel(this.rowSelectionPlugin);
     }
+
+    // Header Button Plugin
     if (options.enableHeaderButton) {
       this.headerButtonsPlugin = new Slick.Plugins.HeaderButtons(options.headerButton || {});
       grid.registerPlugin(this.headerButtonsPlugin);
@@ -99,6 +111,8 @@ export class ControlAndPluginService {
         }
       });
     }
+
+    // Header Menu Plugin
     if (options.enableHeaderMenu) {
       const headerMenuOptions = options.headerMenu || {};
       headerMenuOptions.minWidth = headerMenuOptions.minWidth || 140;
@@ -116,6 +130,15 @@ export class ControlAndPluginService {
         }
       });
     }
+
+    // Cell External Copy Manager Plugin (Excel Like)
+    if (options.enableExcelCopyBuffer) {
+      this.createUndoRedoBuffer();
+      this.hookUndoShortcutKey();
+      this.createCellExternalCopyManagerPlugin(this._grid, this._gridOptions);
+    }
+
+    // manually register other plugins
     if (options.registerPlugins !== undefined) {
       if (Array.isArray(options.registerPlugins)) {
         options.registerPlugins.forEach((plugin) => {
@@ -127,6 +150,43 @@ export class ControlAndPluginService {
     }
   }
 
+  /** Create the Excel like copy manager */
+  createCellExternalCopyManagerPlugin(grid: any, gridOptions: GridOption) {
+    let newRowIds = 0;
+    const pluginOptions = {
+      clipboardCommandHandler: (editCommand) => {
+        this.undoRedoBuffer.queueAndExecuteCommand.call(this.undoRedoBuffer, editCommand);
+      },
+      dataItemColumnValueExtractor: (item, columnDef) => {
+        // when grid or cell is not editable, we will possibly evaluate the Formatter if it was passed
+        // to decide if we evaluate the Formatter, we will use the same flag from Export which is "exportWithFormatter"
+        if (!gridOptions.editable || !columnDef.editor) {
+          const isEvaluatingFormatter = (columnDef.exportWithFormatter !== undefined) ? columnDef.exportWithFormatter : gridOptions.exportOptions.exportWithFormatter;
+          if (columnDef.formatter && isEvaluatingFormatter) {
+            return columnDef.formatter(0, 0, item[columnDef.field], columnDef, item, this._grid);
+          }
+        }
+
+        // else use the default "dataItemColumnValueExtractor" from the plugin itself
+        // we can do that by setting back the getter with null
+        return null;
+      },
+      readOnlyMode: false,
+      includeHeaderWhenCopying: false,
+      newRowCreator: (count) => {
+        for (let i = 0; i < count; i++) {
+          const item = {
+            id: 'newRow_' + newRowIds++
+          };
+          grid.getData().addItem(item);
+        }
+      }
+    };
+
+    grid.setSelectionModel(new Slick.CellSelectionModel());
+    grid.registerPlugin(new Slick.CellExternalCopyManager(pluginOptions));
+  }
+
   createColumnPicker(grid: any, columnDefinitions: Column[], options: GridOption) {
     // localization support for the picker
     const forceFitTitle = options.enableTranslate ? this.i18n.tr('FORCE_FIT_COLUMNS') : 'Force fit columns';
@@ -191,6 +251,37 @@ export class ControlAndPluginService {
     return gridMenuControl;
   }
 
+  /** Create an undo redo buffer used by the Excel like copy */
+  createUndoRedoBuffer() {
+    const commandQueue = [];
+    let commandCtr = 0;
+
+    this.undoRedoBuffer = {
+      queueAndExecuteCommand: (editCommand) => {
+        commandQueue[commandCtr] = editCommand;
+        commandCtr++;
+        editCommand.execute();
+      },
+      undo: () => {
+        if (commandCtr === 0) { return; }
+        commandCtr--;
+        const command = commandQueue[commandCtr];
+        if (command && Slick.GlobalEditorLock.cancelCurrentEdit()) {
+          command.undo();
+        }
+      },
+      redo: () => {
+        if (commandCtr >= commandQueue.length) { return; }
+        const command = commandQueue[commandCtr];
+        commandCtr++;
+        if (command && Slick.GlobalEditorLock.cancelCurrentEdit()) {
+          command.execute();
+        }
+      }
+    };
+  }
+
+  /** Hide a column from the grid */
   hideColumn(column: Column) {
     if (this._grid && this.visibleColumns) {
       const columnIndex = this._grid.getColumnIndex(column.id);
@@ -199,6 +290,20 @@ export class ControlAndPluginService {
     }
   }
 
+  /** Attach an undo shortcut key hook that will redo/undo the copy buffer */
+  hookUndoShortcutKey() {
+    // undo shortcut
+    $(document).keydown((e) => {
+      if (e.which === 90 && (e.ctrlKey || e.metaKey)) {    // CTRL + (shift) + Z
+        if (e.shiftKey) {
+          this.undoRedoBuffer.redo();
+        } else {
+          this.undoRedoBuffer.undo();
+        }
+      }
+    });
+  }
+
   removeColumnByIndex(array: any[], index: number) {
     return array.filter((el: any, i: number) => {
       return index !== i;

aurelia-slickgrid/src/aurelia-slickgrid/styles/_variables.scss

@@ -124,6 +124,10 @@ $column-picker-label-margin:            4px !default;
 $column-picker-label-font-weight:       normal !default;
 $column-picker-link-background-color:   #ffffff !default;
 
+/* Excel copy plugin */
+$copied-cell-bg-color-transition:       rgba(0, 0, 255, 0.2) !default;
+$copied-cell-transition:                0.5s background !default;
+
 /* Grid Menu - hamburger menu */
 $grid-menu-background-color:            #f8f8f8 !default;
 $grid-menu-border:                      1px solid #b8b8b8 !default;
@@ -132,7 +136,7 @@ $grid-menu-label-margin:                4px !default;
 $grid-menu-label-font-weight:           normal !default;
 $grid-menu-link-background-color:       #ffffff !default;
 $grid-menu-box-shadow:                  2px 2px 2px silver !default;
-$grid-menu-icon-font-size:              14px;
+$grid-menu-icon-font-size:              14px !default;
 
 /* Checkbox Selector / Row Selection */
 $chekbox-selector-color:                $primary-color !default;

aurelia-slickgrid/src/aurelia-slickgrid/styles/slick-bootstrap.scss

@@ -69,6 +69,10 @@
           &.selected {
             background-color: inherit !important;
           }
+          &.copied {
+            background: $copied-cell-bg-color-transition;
+            transition: $copied-cell-transition;
+          }
         }
         &.odd {
           background: $row-highlight-background-color;
@@ -79,6 +83,10 @@
           &.selected {
             background-color: inherit !important;
           }
+          &.copied {
+            background: $copied-cell-bg-color-transition;
+            transition: $copied-cell-transition;
+          }
         }
       }
       &.highlighter {
@@ -87,6 +95,10 @@
         transition-duration: 3s;
         transition-timing-function: ease-in;
       }
+      &.copied {
+        background: $copied-cell-bg-color-transition;
+        transition: $copied-cell-transition;
+      }
       &.odd {
         background: $cell-odd-background-color;
         &:hover {
@@ -97,12 +109,20 @@
         &.selected {
           background-color: $row-selected-color;
         }
+        &.copied {
+          background: $copied-cell-bg-color-transition;
+          transition: $copied-cell-transition;
+        }
         background: inherit;
       }
       &.odd .slick-cell {
         &.selected {
           background-color: $row-selected-color;
         }
+        &.copied {
+          background: $copied-cell-bg-color-transition;
+          transition: $copied-cell-transition;
+        }
         background: inherit;
       }
       &.slick-group-totals {
@@ -124,17 +144,14 @@
       background: $cell-even-background-color;
     }
 
-
     .slick-cell {
       @include resetSlickCell();
 
       a, a:visited, .ui-widget-content a, .ui-widget-content a:visited {
         color: $link-color;
-        text-decoration: none;
       }
       a:hover, .ui-widget-content a:hover {
         color: $link-color-hover;
-        text-decoration: none;
         border-bottom: none;
       }
       table {
@@ -152,6 +169,10 @@
       &.selected {
         background-color: $row-selected-color;
       }
+      &.copied {
+        background: $copied-cell-bg-color-transition;
+        transition: $copied-cell-transition;
+      }
       select:not([multiple]).form-control {
         height: 100%;
         padding: 0;

aurelia-slickgrid/src/examples/slickgrid/example10.ts

@@ -6,7 +6,7 @@ export class Example2 {
   @bindable() gridObj;
   title = 'Example 10: Grid with Row Selection';
   subTitle = `
-    Row selection, single or multi-select (<a href="https://github.com/ghiscoding/aurelia-slickgrid/wiki/Row-Selection" target="_blank">Wiki link</a>).
+    Row selection, single or multi-select (<a href="https://github.com/ghiscoding/aurelia-slickgrid/wiki/Row-Selection" target="_blank">Wiki docs</a>).
   `;
 
   columnDefinitions: Column[];