Merge pull request #484 from Dalantren/9.1.6

9.1.6

CHANGELOG.md

@@ -3,7 +3,20 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 
-## [9.1.5] - 2020-07-13
+## [9.1.6] - 2020-07-20
+### Fixed
+- Fix date editor width.
+- Fix scrolling when column sort.
+- Fix editor position when scrolling is required.
+- Fix editor close event on navigation happen.
+
+### Changed
+- Cell handler is not animating when go to the row-details.
+
+### Added
+- To remove column chooser it's not required to override toolbar template.
+
+## [9.1.6] - 2020-07-13
 ### Fixed
 - Importing of LIVR library.
 - Set compilation target to es5. 
@@ -549,8 +562,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 * Pager plugin.
 * Progress plugin.
 
-[unreleased]: https://github.com/qgrid/ng2/compare/v9.1.5...HEAD
-[9.1.5]: https://github.com/qgrid/ng2/compare/v9.1.4...v9.1.5
+[unreleased]: https://github.com/qgrid/ng2/compare/v9.1.7...HEAD
+[9.1.7]: https://github.com/qgrid/ng2/compare/v9.1.5...v9.1.6
+[9.1.6]: https://github.com/qgrid/ng2/compare/v9.1.4...v9.1.5
 [9.1.4]: https://github.com/qgrid/ng2/compare/v9.1.3...v9.1.4
 [9.1.3]: https://github.com/qgrid/ng2/compare/v9.0.1...v9.1.3
 [9.0.1]: https://github.com/qgrid/ng2/compare/v9.0.0...v9.0.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng2-qgrid",
-  "version": "9.1.5",
+  "version": "9.1.6",
   "scripts": {
     "build:app": "npm run clean && ng build --prod --output-path dist/app --base-href /ng2/",
     "build:lib": "npm run clean && node build.lib.js",

projects/ng2-qgrid-theme-basic/package.json

@@ -1,9 +1,9 @@
 {
   "name": "ng2-qgrid/theme/basic",
-  "version": "9.1.5",
+  "version": "9.1.6",
   "peerDependencies": {
     "@angular/common": "^9.1.0",
     "@angular/core": "^9.1.0",
-    "ng2-qgrid": "9.1.5"
+    "ng2-qgrid": "9.1.6"
   }
 }

projects/ng2-qgrid-theme-material/package.json

@@ -1,10 +1,10 @@
 {
   "name": "ng2-qgrid/theme/material",
-  "version": "9.1.5",
+  "version": "9.1.6",
   "peerDependencies": {
     "@angular/common": "^9.1.0",
     "@angular/core": "^9.1.0",
-    "ng2-qgrid": "9.1.5",
+    "ng2-qgrid": "9.1.6",
     "@angular/cdk": "^9.2.0",
     "@angular/material": "^9.2.0"
   }

projects/ng2-qgrid-theme-material/src/lib/templates/edit-cell-date.tpl.html

@@ -1,7 +1,7 @@
 <ng-template key="edit-cell-date.tpl.html"
 			 let-$cell
 			 let-$view="$view">
-	<q-grid-cell-editor class="q-grid-datetime q-grid-editor q-grid-position q-grid-text"
+	<q-grid-cell-editor class="q-grid-date q-grid-editor q-grid-position q-grid-text"
 						(close)="$view.edit.cell.exit.execute($cell)"
 						q-grid-position="td">
 

projects/ng2-qgrid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng2-qgrid",
-  "version": "9.1.5",
+  "version": "9.1.6",
   "bundledDependencies": [
     "@qgrid/core",
     "@qgrid/plugins",

projects/ng2-qgrid/package.prod.json

@@ -1,6 +1,6 @@
 {
   "name": "ng2-qgrid",
-  "version": "9.1.5",
+  "version": "9.1.6",
   "peerDependencies": {
     "@angular/common": "^9.1.0",
     "@angular/core": "^9.1.0",

projects/ngx-qgrid-plugins/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@qgrid/ngx-plugins",
-  "version": "9.1.5",
+  "version": "9.1.6",
   "peerDependencies": {
     "@angular/common": "^9.1.0",
     "@angular/core": "^9.1.0",
-    "@qgrid/ngx": "9.1.5"
+    "@qgrid/ngx": "9.1.6"
   }
 }

projects/ngx-qgrid-plugins/src/lib/cell-editor/cell-editor.component.ts

@@ -4,7 +4,8 @@ import {
 	EventEmitter,
 	Output,
 	ViewChild,
-	ChangeDetectionStrategy
+	ChangeDetectionStrategy,
+	OnInit
 } from '@angular/core';
 import { GridPlugin } from '@qgrid/ngx';
 
@@ -14,24 +15,25 @@ import { GridPlugin } from '@qgrid/ngx';
 	providers: [GridPlugin],
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CellEditorComponent {
+export class CellEditorComponent implements OnInit {
 	@ViewChild(TemplateRef, { static: true }) template: TemplateRef<any>;
 	@Output('close') closeEvent = new EventEmitter<any>();
 
 	context: { $implicit: CellEditorComponent } = {
 		$implicit: this
 	};
 
-	constructor(plugin: GridPlugin) {
-		const { view, disposable } = plugin;
-		view.edit.cell.requestClose = () => {
-			if (this.closeEvent.observers.length) {
+	constructor(private plugin: GridPlugin) {
+	}
+
+	ngOnInit() {
+		const { view, disposable } = this.plugin;
+		if (this.closeEvent.observers.length) {
+			view.edit.cell.requestClose = () => {
 				this.close();
 				return true;
-			}
-
-			return false;
-		};
+			};
+		}
 
 		disposable.add(() => view.edit.cell.requestClose = null);
 	}

projects/ngx-qgrid/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@qgrid/ngx",
-  "version": "9.1.5",
+  "version": "9.1.6",
   "peerDependencies": {
     "@angular/common": "^9.1.0",
     "@angular/core": "^9.1.0",
-    "@qgrid/core": "9.1.5"
+    "@qgrid/core": "9.1.6"
   }
 }

projects/ngx-qgrid/src/lib/cell-handler/cell-handler.component.ts

@@ -6,6 +6,7 @@ import { GridEventArg } from '../grid/grid-model';
 import { GridPlugin } from '../plugin/grid-plugin';
 import { jobLine } from '@qgrid/core/services/job.line';
 import { NavigationState } from '@qgrid/core/navigation/navigation.state';
+import { RowDetails } from '@qgrid/core/row-details/row.details';
 
 @Component({
 	selector: 'q-grid-cell-handler',
@@ -62,7 +63,7 @@ export class CellHandlerComponent implements OnInit, AfterViewInit {
 
 		// When navigate first or when animation wasn't applied we need to omit
 		// next navigation event to make handler to correct position.
-		let isValid = false;
+		let doNotPassAnimation = false;
 		return (e: GridEventArg<NavigationState>) => {
 			if (e.hasChanges('cell')) {
 				const { cell } = e.state;
@@ -77,32 +78,32 @@ export class CellHandlerComponent implements OnInit, AfterViewInit {
 					// because it can be animated too.
 					const shouldAnimate =
 						!model.drag().isActive
-						&& (oldColumn.key === newColumn.key || !(oldColumn.viewWidth || newColumn.viewWidth));
-
-					if (!shouldAnimate) {
-						isValid = false;
-						return;
-					}
-
-					// It can be that the cell object was changed but indices are not.
-					isValid =
-						oldCell.rowIndex >= 0
-						&& oldCell.columnIndex >= 0
-						&& (newCell.rowIndex !== oldCell.rowIndex || newCell.columnIndex !== oldCell.columnIndex);
+						&& (oldColumn.key === newColumn.key || !(oldColumn.viewWidth || newColumn.viewWidth))
+						&& !(oldCell.row instanceof RowDetails || newCell.row instanceof RowDetails);
 
 					const domCell = table.body.cell(cell.rowIndex, cell.columnIndex);
-					if (isValid) {
-						domCell.addClass('q-grid-animate');
-						element.classList.add('q-grid-active');
-
-						job(() => {
-							element.classList.remove('q-grid-active');
-							domCell.removeClass('q-grid-animate');
-						}).catch(() => {
-							Fastdom.mutate(() => {
+					if (shouldAnimate) {
+						// It can be that the cell object was changed but indices are not.
+						doNotPassAnimation =
+							oldCell.rowIndex >= 0
+							&& oldCell.columnIndex >= 0
+							&& (newCell.rowIndex !== oldCell.rowIndex || newCell.columnIndex !== oldCell.columnIndex);
+
+						if (doNotPassAnimation) {
+							domCell.addClass('q-grid-animate');
+							element.classList.add('q-grid-active');
+
+							job(() => {
+								element.classList.remove('q-grid-active');
 								domCell.removeClass('q-grid-animate');
+							}).catch(() => {
+								Fastdom.mutate(() => {
+									domCell.removeClass('q-grid-animate');
+								});
 							});
-						});
+						}
+					} else {
+						doNotPassAnimation = false;
 					}
 
 					Fastdom.measure(() => {
@@ -124,7 +125,7 @@ export class CellHandlerComponent implements OnInit, AfterViewInit {
 						});
 					});
 
-					isValid = true;
+					doNotPassAnimation = true;
 				}
 			}
 

projects/qgrid-core/command-bag/edit.cell.commit.command.js

@@ -39,7 +39,7 @@ export class EditCellCommitCommand extends Command {
                         editLet.tag
                     );
 
-                    return validator.validate({ [key]: editLet.value })
+                    return validator.validate({ [key]: editLet.value }) !== false
                         && model.edit().commit.canExecute(clientContext) === true;
                 }
 

projects/qgrid-core/command-bag/edit.cell.push.command.js

@@ -28,7 +28,7 @@ export class EditCellPushCommand extends Command {
 
                     const { key } = cell.column;
                     const validator = validationService.createValidator(model.validation().rules, key);
-                    return validator.validate({ [key]: this.value })
+                    return validator.validate({ [key]: this.value }) !== false
                         && model.edit().commit.canExecute(clientContext) === true;
                 }
 

projects/qgrid-core/edit/edit.cell.let.js

@@ -36,12 +36,26 @@ export class EditCellLet {
 			.subscribe(e => {
 				if (e.hasChanges('status') && e.tag.source !== 'edit.cell.view') {
 					if (e.changes.status.newValue === 'edit') {
-						model.edit({ status: 'view' }, { source: 'edit.cell.view' });
+						// this is a trick to go back to the view mode and trigger enter
+						// TODO: make it better
+						model.edit({
+							status: 'view'
+						}, {
+							source: 'edit.cell.view'
+						});
+
 						if (this.enter.canExecute()) {
 							this.enter.execute();
 						}
 					} else if (e.changes.status.newValue === 'view') {
-						model.edit({ status: 'edit' }, { source: 'edit.cell.view' });
+						// this is a trick to go back to the edit mode and trigger cancel
+						// TODO: make it better
+						model.edit({
+							status: 'edit'
+						}, {
+							source: 'edit.cell.view'
+						});
+
 						if (this.requestClose) {
 							if (this.requestClose()) {
 								return;
@@ -58,24 +72,29 @@ export class EditCellLet {
 		observeReply(model.navigationChanged)
 			.subscribe(e => {
 				if (e.hasChanges('cell')) {
-					const oldCell = this.editor.td;
-					if (oldCell) {
-						if (oldCell.column.category === 'data') {
-							if (this.commit.canExecute(oldCell)) {
-								this.commit.execute(oldCell);
+					if (this.requestClose) {
+						if (this.requestClose()) {
+							return;
+						}
+					}
+
+					const editCell = this.editor.td;
+					if (editCell) {
+						if (editCell.column.category === 'data') {
+							if (this.commit.canExecute(editCell)) {
+								this.commit.execute(editCell);
 							}
 						} else {
-							if (this.cancel.canExecute(oldCell)) {
-								this.cancel.execute(oldCell);
+							if (this.cancel.canExecute(editCell)) {
+								this.cancel.execute(editCell);
 							}
 						}
 					}
 
-					const { cell: newCell } = e.state;
-					if (newCell &&
-						(newCell.column.editorOptions.trigger === 'focus')) {
-						if (this.enter.canExecute(newCell)) {
-							this.enter.execute(newCell);
+					const { cell } = e.state;
+					if (cell && (cell.column.editorOptions.trigger === 'focus')) {
+						if (this.enter.canExecute(cell)) {
+							this.enter.execute(cell);
 						}
 					}
 				}
@@ -156,7 +175,7 @@ export class EditCellLet {
 						const context = this.contextFactory(cell, this.value, this.label, this.tag);
 						const key = context.column.key;
 						const validator = validationService.createValidator(model.validation().rules, key);
-						return model.edit().commit.canExecute(context) && validator.validate({ [key]: this.value });
+						return model.edit().commit.canExecute(context) && validator.validate({ [key]: this.value }) !== false;
 					}
 					return false;
 				},
@@ -191,7 +210,7 @@ export class EditCellLet {
 						const context = this.contextFactory(cell, this.value, this.label, this.tag);
 						const key = context.column.key;
 						const validator = validationService.createValidator(model.validation().rules, key);
-						return model.edit().commit.canExecute(context) && validator.validate({ [key]: this.value });
+						return model.edit().commit.canExecute(context) && validator.validate({ [key]: this.value }) !== false;
 					}
 
 					return false;