diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 968023a51..30916837f 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -56,6 +56,9 @@ jobs: - name: Lint run: yarn lint + - name: Prettier + run: yarn prettier:check + - name: Run Project Build run: yarn build diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 000000000..029441e07 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +*.md + +**/test/jest-coverage/*.* diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 000000000..0f4f09ae3 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,15 @@ +{ + "useTabs": false, + "tabWidth": 2, + "printWidth": 130, + "singleQuote": true, + "trailingComma": "es5", + "overrides": [ + { + "files": ["**/*.spec.ts"], + "options": { + "printWidth": 160 + } + } + ] +} \ No newline at end of file diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 0a410edf4..8202316d6 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -3,7 +3,7 @@ "andys8.jest-snippets", "angular.ng-template", "editorconfig.editorconfig", - "msjsdiag.debugger-for-chrome", + "esbenp.prettier-vscode", "dbaeumer.vscode-eslint" ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index 00ad71fba..27855e081 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,7 @@ { - "typescript.tsdk": "node_modules\\typescript\\lib" -} \ No newline at end of file + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true, + "eslint.validate": ["javascript", "typescript"], + "typescript.format.semicolons": "insert", + "typescript.tsdk": "node_modules\\typescript\\lib" +} diff --git a/global.d.ts b/global.d.ts index b3d6c4796..9e6c1dbd9 100644 --- a/global.d.ts +++ b/global.d.ts @@ -1 +1 @@ -import 'jest-extended'; \ No newline at end of file +import 'jest-extended'; diff --git a/package.json b/package.json index 59cba1da1..58ac5c9c3 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ }, "scripts": { "start": "ng serve --port 4300", - "prebuild": "npm-run-all delete:dist lint", + "prebuild": "npm-run-all delete:dist lint prettier:check", "build": "ng-packagr -p ng-package.json -c tsconfig.json", "postbuild": "npm-run-all copy:i18n", "copy:i18n": "copyfiles -f src/assets/i18n/*.json dist/i18n", @@ -33,6 +33,8 @@ "build:demo": "ng build --configuration=production --base-href=\"\"", "pack-lib": "npm pack ./dist", "preview:release": "release-it --only-version --dry-run", + "prettier:check": "prettier --check **/*.{html,js,ts}", + "prettier:write": "prettier --write **/*.{html,js,ts}", "release": "release-it --only-version", "serve:demo": "servor ./website index.html 4300" }, @@ -116,6 +118,7 @@ "ng-packagr": "^18.2.1", "ngx-bootstrap": "^18.1.3", "npm-run-all2": "^7.0.1", + "prettier": "^3.4.2", "release-it": "^17.10.0", "rimraf": "^5.0.10", "rxjs": "^7.8.1", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 786ec157d..f4392f781 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -93,11 +93,11 @@ const routes: Routes = [ { path: 'tree-data-hierarchical', component: GridTreeDataHierarchicalComponent }, { path: 'swt', component: SwtCommonGridTestComponent }, { path: '', redirectTo: '/trading', pathMatch: 'full' }, - { path: '**', redirectTo: '/trading', pathMatch: 'full' } + { path: '**', redirectTo: '/trading', pathMatch: 'full' }, ]; @NgModule({ imports: [RouterModule.forRoot(routes, { useHash: true }), TranslateModule], exports: [RouterModule, TranslateModule], }) -export class AppRoutingRoutingModule { } +export class AppRoutingRoutingModule {} diff --git a/src/app/app.component.html b/src/app/app.component.html index 1918f215c..2589121c9 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -3,28 +3,31 @@ Angular-SlickGrid - -
- github stars + github stars
@@ -35,9 +38,7 @@
@@ -216,4 +186,4 @@ - \ No newline at end of file + diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index a2c1058c4..bd21836fb 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -6,12 +6,10 @@ import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], + declarations: [AppComponent], providers: [], imports: [RouterTestingModule], - teardown: { destroyAfterEach: false } + teardown: { destroyAfterEach: false }, }).compileComponents(); }); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 2c410d33a..d2097f04e 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -5,21 +5,21 @@ import { debounceTime, filter } from 'rxjs'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] + styleUrls: ['./app.component.scss'], }) export class AppComponent implements OnInit { - constructor(private router: Router) { } + constructor(private router: Router) {} ngOnInit() { // scroll to active link route this.router.events - .pipe(filter(event => event instanceof NavigationEnd)) + .pipe(filter((event) => event instanceof NavigationEnd)) .pipe(debounceTime(0)) .subscribe(() => { const linkElm = document.querySelector('.nav-link.active'); if (linkElm) { linkElm.scrollIntoView({ block: 'nearest' }); } - }) + }); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0bcb6c38d..c714c9596 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -78,20 +78,21 @@ export function createTranslateLoader(http: HttpClient) { // use an Initializer Factory as describe here: https://github.com/ngx-translate/core/issues/517#issuecomment-299637956 export function appInitializerFactory(translate: TranslateService, injector: Injector) { - return () => new Promise((resolve: any) => { - const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null)); - locationInitialized.then(() => { - const langToSet = 'en'; - translate.setDefaultLang('en'); - translate.use(langToSet).subscribe({ - next: () => { - // console.info(`Successfully initialized '${langToSet}' language.'`); - }, - error: () => console.error(`Problem with '${langToSet}' language initialization.'`), - complete: () => resolve(null) + return () => + new Promise((resolve: any) => { + const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null)); + locationInitialized.then(() => { + const langToSet = 'en'; + translate.setDefaultLang('en'); + translate.use(langToSet).subscribe({ + next: () => { + // console.info(`Successfully initialized '${langToSet}' language.'`); + }, + error: () => console.error(`Problem with '${langToSet}' language initialization.'`), + complete: () => resolve(null), + }); }); }); - }); } // @dynamic @@ -163,9 +164,9 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj TranslateModule.forRoot({ loader: { provide: TranslateLoader, - useFactory: (createTranslateLoader), - deps: [HttpClient] - } + useFactory: createTranslateLoader, + deps: [HttpClient], + }, }), AngularSlickgridModule.forRoot({ // add any Global Grid Options/Config you might want @@ -173,20 +174,20 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj enableAutoResize: true, autoResize: { container: '#grid-container', - rightPadding: 10 + rightPadding: 10, }, // we strongly suggest you add DOMPurify as a sanitizer - sanitizer: (dirtyHtml) => DOMPurify.sanitize(dirtyHtml, { ADD_ATTR: ['level'], RETURN_TRUSTED_TYPE: true }) - }) + sanitizer: (dirtyHtml) => DOMPurify.sanitize(dirtyHtml, { ADD_ATTR: ['level'], RETURN_TRUSTED_TYPE: true }), + }), ], providers: [ { provide: APP_INITIALIZER, useFactory: appInitializerFactory, deps: [TranslateService, Injector], - multi: true + multi: true, }, - provideHttpClient(withInterceptorsFromDi()) - ] + provideHttpClient(withInterceptorsFromDi()), + ], }) -export class AppModule { } \ No newline at end of file +export class AppModule {} diff --git a/src/app/examples/custom-angularComponentEditor.ts b/src/app/examples/custom-angularComponentEditor.ts index 4e6bfb740..4071d20b1 100644 --- a/src/app/examples/custom-angularComponentEditor.ts +++ b/src/app/examples/custom-angularComponentEditor.ts @@ -81,7 +81,10 @@ export class CustomAngularComponentEditor implements Editor { OR this.columnDefs = [{ id: 'title', field: 'title', editor: { model: CustomEditor, collection: [...] }]; this.gridOptions = { params: { angularUtilService: this.angularUtilService }}`); } if (this.columnEditor?.params.component) { - const componentOutput = this.angularUtilService.createAngularComponentAppendToDom(this.columnEditor.params.component, this.args.container); + const componentOutput = this.angularUtilService.createAngularComponentAppendToDom( + this.columnEditor.params.component, + this.args.container + ); this.componentRef = componentOutput?.componentRef; // here we override the collection object of the Angular Component @@ -89,9 +92,7 @@ export class CustomAngularComponentEditor implements Editor { Object.assign(this.componentRef.instance, { collection: this.collection }); // when our model (item object) changes, we'll call a save of the slickgrid editor - this._subscriptions.push( - this.componentRef.instance.onItemChanged.subscribe((_item: any) => this.save()) - ); + this._subscriptions.push(this.componentRef.instance.onItemChanged.subscribe((_item: any) => this.save())); } } @@ -164,7 +165,10 @@ export class CustomAngularComponentEditor implements Editor { } isValueChanged() { - return (!(this.componentRef.instance.selectedId === '' && (this.defaultId === null || this.defaultId === undefined))) && (this.componentRef.instance.selectedId !== this.defaultId); + return ( + !(this.componentRef.instance.selectedId === '' && (this.defaultId === null || this.defaultId === undefined)) && + this.componentRef.instance.selectedId !== this.defaultId + ); } validate(): EditorValidationResult { @@ -177,7 +181,7 @@ export class CustomAngularComponentEditor implements Editor { // if user want it to be required, he would have to provide his own validator return { valid: true, - msg: null + msg: null, }; } } diff --git a/src/app/examples/custom-angularComponentFilter.ts b/src/app/examples/custom-angularComponentFilter.ts index 3828f430c..176d964e8 100644 --- a/src/app/examples/custom-angularComponentFilter.ts +++ b/src/app/examples/custom-angularComponentFilter.ts @@ -44,7 +44,7 @@ export class CustomAngularComponentFilter implements Filter { /** Getter for the Column Filter */ get columnFilter(): ColumnFilter { - return this.columnDef && this.columnDef.filter || {}; + return (this.columnDef && this.columnDef.filter) || {}; } /** Getter for the Grid Options pulled through the Grid Object */ @@ -73,12 +73,21 @@ export class CustomAngularComponentFilter implements Filter { const headerElm = this.grid.getHeaderRowColumn(this.columnDef.id); if (headerElm) { headerElm.innerHTML = ''; - const componentOuput = this.angularUtilService.createAngularComponentAppendToDom(this.columnFilter.params.component, headerElm, { collection: this.collection }); + const componentOuput = this.angularUtilService.createAngularComponentAppendToDom( + this.columnFilter.params.component, + headerElm, + { collection: this.collection } + ); this.componentRef = componentOuput.componentRef; this._subscriptions.push( componentOuput.componentRef.instance.onItemChanged.subscribe((item: any) => { - this.callback(undefined, { columnDef: this.columnDef, operator: this.operator, searchTerms: [item.id], shouldTriggerQuery: this._shouldTriggerQuery }); + this.callback(undefined, { + columnDef: this.columnDef, + operator: this.operator, + searchTerms: [item.id], + shouldTriggerQuery: this._shouldTriggerQuery, + }); // reset flag for next use this._shouldTriggerQuery = true; }) diff --git a/src/app/examples/custom-buttonFormatter.component.ts b/src/app/examples/custom-buttonFormatter.component.ts index e4010c8b6..3cd6f6687 100644 --- a/src/app/examples/custom-buttonFormatter.component.ts +++ b/src/app/examples/custom-buttonFormatter.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; @Component({ - template: `` + template: ``, }) export class CustomButtonFormatterComponent { item: any; diff --git a/src/app/examples/custom-inputEditor.ts b/src/app/examples/custom-inputEditor.ts index f8f240956..d8fca3279 100644 --- a/src/app/examples/custom-inputEditor.ts +++ b/src/app/examples/custom-inputEditor.ts @@ -1,10 +1,4 @@ -import type { - Column, - ColumnEditor, - Editor, - EditorValidator, - EditorValidationResult, -} from './../modules/angular-slickgrid'; +import type { Column, ColumnEditor, Editor, EditorValidator, EditorValidationResult } from './../modules/angular-slickgrid'; /* * An example of a 'detached' editor. @@ -110,7 +104,7 @@ export class CustomInputEditor implements Editor { if (this.columnEditor?.alwaysSaveOnEnterKey && lastKeyEvent === 'Enter') { return true; } - return (!(this.inputElm.value === '' && this.defaultValue === null) && this.inputElm.value !== this.defaultValue); + return !(this.inputElm.value === '' && this.defaultValue === null) && this.inputElm.value !== this.defaultValue; } save() { diff --git a/src/app/examples/custom-inputFilter.ts b/src/app/examples/custom-inputFilter.ts index 3fbd197d5..cd7c51ee8 100644 --- a/src/app/examples/custom-inputFilter.ts +++ b/src/app/examples/custom-inputFilter.ts @@ -89,7 +89,11 @@ export class CustomInputFilter implements Filter { } if (this._clearFilterTriggered) { - this.callback(e, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, shouldTriggerQuery: this._shouldTriggerQuery }); + this.callback(e, { + columnDef: this.columnDef, + clearFilterTriggered: this._clearFilterTriggered, + shouldTriggerQuery: this._shouldTriggerQuery, + }); this.filterElm?.classList.remove('filled'); } else { value === '' ? this.filterElm?.classList.remove('filled') : this.filterElm?.classList.add('filled'); @@ -124,7 +128,6 @@ export class CustomInputFilter implements Filter { // append the new DOM element to the header row headerElm.appendChild(this.filterElm); - } return this.filterElm; } diff --git a/src/app/examples/custom-titleFormatter.component.ts b/src/app/examples/custom-titleFormatter.component.ts index db318fd64..333eedd74 100644 --- a/src/app/examples/custom-titleFormatter.component.ts +++ b/src/app/examples/custom-titleFormatter.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; @Component({ - template: `{{item?.assignee?.name}}` + template: `{{ item?.assignee?.name }}`, }) export class CustomTitleFormatterComponent { item: any; diff --git a/src/app/examples/editor-ng-select.component.ts b/src/app/examples/editor-ng-select.component.ts index e0ff0e727..d9abe5488 100644 --- a/src/app/examples/editor-ng-select.component.ts +++ b/src/app/examples/editor-ng-select.component.ts @@ -4,27 +4,27 @@ import { Subject } from 'rxjs'; // the appendTo="body" (necessary for SlickGrid filter) requires the body to be position relative like so // @Component({ - template: ` - - - {{ item?.name }} - - ` + template: ` + + {{ item?.name }} + + `, }) export class EditorNgSelectComponent { selectedId = ''; selectedItem: any; collection?: any[]; // this will be filled by the collection of your column definition - onItemChanged = new Subject(); // object + onItemChanged = new Subject(); // object onChange(item: any) { this.selectedItem = item; diff --git a/src/app/examples/filter-ng-select.component.ts b/src/app/examples/filter-ng-select.component.ts index 7b0c9021d..d046c0a84 100644 --- a/src/app/examples/filter-ng-select.component.ts +++ b/src/app/examples/filter-ng-select.component.ts @@ -4,26 +4,26 @@ import { Subject } from 'rxjs'; // the appendTo="body" (necessary for SlickGrid filter) requires the body to be position relative like so // @Component({ - template: ` - - - {{ item?.name }} - - ` + template: ` + + {{ item?.name }} + + `, }) export class FilterNgSelectComponent { selectedId = ''; selectedItem: any; collection?: any[]; // this will be filled by the collection of your column definition - onItemChanged = new Subject(); // object + onItemChanged = new Subject(); // object onChange(item: any) { this.selectedItem = item; diff --git a/src/app/examples/grid-additem.component.html b/src/app/examples/grid-additem.component.html index e35becedc..8cd049fa1 100644 --- a/src/app/examples/grid-additem.component.html +++ b/src/app/examples/grid-additem.component.html @@ -1,16 +1,17 @@

- {{title}} + {{ title }} - + code

-
+
@@ -23,26 +24,41 @@

- - - - - + + + + +
- +
- \ No newline at end of file + diff --git a/src/app/examples/grid-additem.component.ts b/src/app/examples/grid-additem.component.ts index 7614c5314..3a301b3e8 100644 --- a/src/app/examples/grid-additem.component.ts +++ b/src/app/examples/grid-additem.component.ts @@ -1,10 +1,21 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; -import { AngularGridInstance, Column, Editors, FieldType, Formatters, GridOption, GridService, OnEventArgs, SlickDataView, SlickGrid } from './../modules/angular-slickgrid'; +import { + AngularGridInstance, + Column, + Editors, + FieldType, + Formatters, + GridOption, + GridService, + OnEventArgs, + SlickDataView, + SlickGrid, +} from './../modules/angular-slickgrid'; @Component({ styles: ['.duration-bg { background-color: #e9d4f1 !important }'], encapsulation: ViewEncapsulation.None, - templateUrl: './grid-additem.component.html' + templateUrl: './grid-additem.component.html', }) export class GridAddItemComponent implements OnInit { title = 'Example 11: Add / Update / Highlight a Datagrid Item'; @@ -72,38 +83,46 @@ export class GridAddItemComponent implements OnInit { if (confirm('Are you sure?')) { this.angularGrid.gridService.deleteItemById(args.dataContext.id); } - } + }, }, { - id: 'title', name: 'Title', field: 'title', + id: 'title', + name: 'Title', + field: 'title', sortable: true, type: FieldType.string, editor: { - model: Editors.longText - } + model: Editors.longText, + }, }, { - id: 'duration', name: 'Duration (days)', field: 'duration', + id: 'duration', + name: 'Duration (days)', + field: 'duration', sortable: true, type: FieldType.number, editor: { - model: Editors.text + model: Editors.text, }, onCellChange: (e: Event, args: OnEventArgs) => { alert('onCellChange directly attached to the column definition'); console.log(args); - } + }, }, { - id: 'complete', name: '% Complete', field: 'percentComplete', + id: 'complete', + name: '% Complete', + field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, editor: { - model: Editors.integer - } + model: Editors.integer, + }, }, { - id: 'start', name: 'Start', field: 'start', + id: 'start', + name: 'Start', + field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, @@ -114,30 +133,35 @@ export class GridAddItemComponent implements OnInit { */ }, { - id: 'finish', name: 'Finish', field: 'finish', - formatter: Formatters.dateIso, sortable: true, - type: FieldType.date + id: 'finish', + name: 'Finish', + field: 'finish', + formatter: Formatters.dateIso, + sortable: true, + type: FieldType.date, }, { - id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', + id: 'effort-driven', + name: 'Effort Driven', + field: 'effortDriven', formatter: Formatters.checkmarkMaterial, type: FieldType.number, editor: { - model: Editors.checkbox - } - } + model: Editors.checkbox, + }, + }, ]; this.gridOptions = { asyncEditorLoading: false, autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, editable: true, enableColumnPicker: true, enableCellNavigation: true, - enableRowSelection: true + enableRowSelection: true, }; } @@ -147,7 +171,7 @@ export class GridAddItemComponent implements OnInit { for (let i = 0; i < itemCount; i++) { const randomYear = 2000 + Math.floor(Math.random() * 10); const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); + const randomDay = Math.floor(Math.random() * 29); const randomPercent = Math.round(Math.random() * 100); mockedDataset[i] = { id: i, @@ -156,8 +180,8 @@ export class GridAddItemComponent implements OnInit { percentComplete: randomPercent, percentCompleteNumber: randomPercent, start: new Date(randomYear, randomMonth, randomDay), - finish: new Date(randomYear, (randomMonth + 1), randomDay), - effortDriven: (i % 5 === 0) + finish: new Date(randomYear, randomMonth + 1, randomDay), + effortDriven: i % 5 === 0, }; } return mockedDataset; @@ -185,7 +209,7 @@ export class GridAddItemComponent implements OnInit { const newId = highestId + incrementIdByHowMany; const randomYear = 2000 + Math.floor(Math.random() * 10); const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); + const randomDay = Math.floor(Math.random() * 29); const randomPercent = Math.round(Math.random() * 100); return { @@ -195,8 +219,8 @@ export class GridAddItemComponent implements OnInit { percentComplete: randomPercent, percentCompleteNumber: randomPercent, start: new Date(randomYear, randomMonth, randomDay), - finish: new Date(randomYear, (randomMonth + 2), randomDay), - effortDriven: true + finish: new Date(randomYear, randomMonth + 2, randomDay), + effortDriven: true, }; } @@ -227,7 +251,7 @@ export class GridAddItemComponent implements OnInit { return (rowNumber: number) => { const item = this.dataView.getItem(rowNumber); let meta = { - cssClasses: '' + cssClasses: '', }; if (typeof previousItemMetadata === 'object') { meta = previousItemMetadata(rowNumber); diff --git a/src/app/examples/grid-angular.component.html b/src/app/examples/grid-angular.component.html index b40a60133..bf802da56 100644 --- a/src/app/examples/grid-angular.component.html +++ b/src/app/examples/grid-angular.component.html @@ -1,36 +1,28 @@

- {{title}} + {{ title }} - + code

-
+
-
@@ -46,34 +38,35 @@

Clear Sorting

-
-
- Updated Item: {{updatedObject | json}} -
-
- Updated Item: {{alertWarning}} -
+
Updated Item: {{ updatedObject | json }}
+
Updated Item: {{ alertWarning }}
- +
-
\ No newline at end of file + diff --git a/src/app/examples/grid-angular.component.ts b/src/app/examples/grid-angular.component.ts index d54b37089..2f3b61d1d 100644 --- a/src/app/examples/grid-angular.component.ts +++ b/src/app/examples/grid-angular.component.ts @@ -26,7 +26,7 @@ const NB_ITEMS = 100; templateUrl: './grid-angular.component.html', styleUrls: ['./grid-angular.component.scss'], encapsulation: ViewEncapsulation.None, - providers: [AngularUtilService] + providers: [AngularUtilService], }) export class GridAngularComponent implements OnInit { title = 'Example 22: Use of Angular Components'; @@ -69,7 +69,10 @@ export class GridAngularComponent implements OnInit { { id: '3', name: 'Paul' }, ]; - constructor(private angularUtilService: AngularUtilService, private translate: TranslateService) { } + constructor( + private angularUtilService: AngularUtilService, + private translate: TranslateService + ) {} ngOnInit(): void { this.prepareGrid(); @@ -98,8 +101,9 @@ export class GridAngularComponent implements OnInit { onCellChange: (e: Event, args: OnEventArgs) => { console.log(args); this.alertWarning = `Updated Title: ${args.dataContext.title}`; - } - }, { + }, + }, + { id: 'title2', name: 'Title with Angular Component', field: 'title', @@ -115,7 +119,8 @@ export class GridAngularComponent implements OnInit { component: CustomButtonFormatterComponent, angularUtilService: this.angularUtilService, }, - }, { + }, + { id: 'assignee', name: 'Assignee', field: 'assignee', @@ -127,7 +132,7 @@ export class GridAngularComponent implements OnInit { collection: this.assignees, params: { component: FilterNgSelectComponent, - } + }, }, queryFieldFilter: 'assignee.id', // for a complex object it's important to tell the Filter which field to query and our CustomAngularComponentFilter returns the "id" property queryFieldSorter: 'assignee.name', @@ -141,13 +146,14 @@ export class GridAngularComponent implements OnInit { collection: this.assignees, params: { component: EditorNgSelectComponent, - } + }, }, onCellChange: (e: Event, args: OnEventArgs) => { console.log(args); this.alertWarning = `Updated Title: ${args.dataContext.title}`; - } - }, { + }, + }, + { id: 'assignee2', name: 'Assignee with Angular Component', field: 'assignee', @@ -159,7 +165,7 @@ export class GridAngularComponent implements OnInit { collection: this.assignees, params: { component: FilterNgSelectComponent, - } + }, }, queryFieldFilter: 'assignee.id', // for a complex object it's important to tell the Filter which field to query and our CustomAngularComponentFilter returns the "id" property queryFieldSorter: 'assignee.name', @@ -174,10 +180,11 @@ export class GridAngularComponent implements OnInit { params: { component: CustomTitleFormatterComponent, angularUtilService: this.angularUtilService, - complexFieldLabel: 'assignee.name' // for the exportCustomFormatter + complexFieldLabel: 'assignee.name', // for the exportCustomFormatter }, exportCustomFormatter: Formatters.complexObject, - }, { + }, + { id: 'complete', name: '% Complete', field: 'percentComplete', @@ -190,25 +197,30 @@ export class GridAngularComponent implements OnInit { // We can also add HTML text to be rendered (any bad script will be sanitized) but we have to opt-in, else it will be sanitized enableRenderHtml: true, - collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: k, symbol: '' })), + collection: Array.from(Array(101).keys()).map((k) => ({ + value: k, + label: k, + symbol: '', + })), customStructure: { value: 'value', label: 'label', - labelSuffix: 'symbol' + labelSuffix: 'symbol', }, editorOptions: { - maxHeight: 400 - } + maxHeight: 400, + }, }, filter: { model: Filters.slider, operator: '>=', - filterOptions: { hideSliderNumber: false } + filterOptions: { hideSliderNumber: false }, }, params: { formatters: [Formatters.collectionEditor, Formatters.percentCompleteBar], - } - }, { + }, + }, + { id: 'start', name: 'Start', field: 'start', @@ -220,9 +232,10 @@ export class GridAngularComponent implements OnInit { sortable: true, type: FieldType.date, editor: { - model: Editors.date + model: Editors.date, }, - }, { + }, + { id: 'finish', name: 'Finish', field: 'finish', @@ -234,7 +247,7 @@ export class GridAngularComponent implements OnInit { exportWithFormatter: true, type: FieldType.date, editor: { - model: Editors.date + model: Editors.date, }, }, { @@ -254,13 +267,17 @@ export class GridAngularComponent implements OnInit { action: () => alert('Please Help!'), }, { - command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'mdi mdi-close color-danger', cssClass: 'red', textCssClass: 'text-italic color-danger-light', - action: (_event, args) => this.angularGrid.gridService.deleteItemById(args.dataContext.id) + command: 'delete-row', + title: 'Delete Row', + positionOrder: 64, + iconCssClass: 'mdi mdi-close color-danger', + cssClass: 'red', + textCssClass: 'text-italic color-danger-light', + action: (_event, args) => this.angularGrid.gridService.deleteItemById(args.dataContext.id), }, - ] - } - } + ], + }, + }, ]; this.gridOptions = { @@ -269,7 +286,7 @@ export class GridAngularComponent implements OnInit { autoCommitEdit: false, autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, headerRowHeight: 45, rowHeight: 45, // increase row height so that the ng-select fits in the cell @@ -280,15 +297,15 @@ export class GridAngularComponent implements OnInit { enableExcelCopyBuffer: true, enableFiltering: true, enableAsyncPostRender: true, // for the Angular PostRenderer, don't forget to enable it - asyncPostRenderDelay: 0, // also make sure to remove any delay to render it + asyncPostRenderDelay: 0, // also make sure to remove any delay to render it editCommandHandler: (item, column, editCommand) => { this._commandQueue.push(editCommand); editCommand.execute(); }, i18n: this.translate, params: { - angularUtilService: this.angularUtilService // provide the service to all at once (Editor, Filter, AsyncPostRender) - } + angularUtilService: this.angularUtilService, // provide the service to all at once (Editor, Filter, AsyncPostRender) + }, }; this.dataset = this.mockData(NB_ITEMS); @@ -297,10 +314,10 @@ export class GridAngularComponent implements OnInit { mockData(itemCount: number, startingIndex = 0) { // mock a dataset const tempDataset = []; - for (let i = startingIndex; i < (startingIndex + itemCount); i++) { + for (let i = startingIndex; i < startingIndex + itemCount; i++) { const randomYear = 2000 + Math.floor(Math.random() * 10); const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); + const randomDay = Math.floor(Math.random() * 29); const randomPercent = Math.round(Math.random() * 100); tempDataset.push({ @@ -311,8 +328,8 @@ export class GridAngularComponent implements OnInit { percentComplete: randomPercent, percentCompleteNumber: randomPercent, start: new Date(randomYear, randomMonth, randomDay), - finish: new Date(randomYear, (randomMonth + 1), randomDay), - effortDriven: (i % 5 === 0), + finish: new Date(randomYear, randomMonth + 1, randomDay), + effortDriven: i % 5 === 0, }); } return tempDataset; @@ -348,7 +365,7 @@ export class GridAngularComponent implements OnInit { changeAutoCommit() { this.gridOptions.autoCommitEdit = !this.gridOptions.autoCommitEdit; this.gridObj.setOptions({ - autoCommitEdit: this.gridOptions.autoCommitEdit + autoCommitEdit: this.gridOptions.autoCommitEdit, }); return true; } @@ -372,7 +389,9 @@ export class GridAngularComponent implements OnInit { // the last 2 arguments of createAngularComponent() are optional // but when they are provided, that is the DOM target (cellNode) and the dataContext, // the util will render everything for you without too much delay - const componentOutput = this.angularUtilService.createAngularComponent(colDef.params.component, cellNode, { item: dataContext }); + const componentOutput = this.angularUtilService.createAngularComponent(colDef.params.component, cellNode, { + item: dataContext, + }); componentOutput.componentRef.destroy(); // cleanup no longer needed temp component } } diff --git a/src/app/examples/grid-autoheight.component.html b/src/app/examples/grid-autoheight.component.html index b2bf21ce5..ece380624 100644 --- a/src/app/examples/grid-autoheight.component.html +++ b/src/app/examples/grid-autoheight.component.html @@ -1,10 +1,12 @@

- {{title}} + {{ title }} - + code @@ -16,25 +18,45 @@

- +
- +
- -
@@ -43,10 +65,12 @@

- + -

\ No newline at end of file + diff --git a/src/app/examples/grid-autoheight.component.ts b/src/app/examples/grid-autoheight.component.ts index 9e19ca1b8..457be09a0 100644 --- a/src/app/examples/grid-autoheight.component.ts +++ b/src/app/examples/grid-autoheight.component.ts @@ -13,7 +13,7 @@ import { @Component({ encapsulation: ViewEncapsulation.None, styleUrls: ['./grid-autoheight.component.scss'], - templateUrl: './grid-autoheight.component.html' + templateUrl: './grid-autoheight.component.html', }) export class GridAutoHeightComponent implements OnInit { title = 'Example 23: Grid AutoHeight'; @@ -48,33 +48,51 @@ export class GridAutoHeightComponent implements OnInit { prepareGrid() { this.columnDefinitions = [ { - id: 'title', name: 'Title', field: 'title', - sortable: true, type: FieldType.string + id: 'title', + name: 'Title', + field: 'title', + sortable: true, + type: FieldType.string, }, { - id: 'duration', name: 'Duration (days)', field: 'duration', - sortable: true, type: FieldType.number + id: 'duration', + name: 'Duration (days)', + field: 'duration', + sortable: true, + type: FieldType.number, }, { - id: 'complete', name: '% Complete', field: 'percentComplete', - formatter: Formatters.percentCompleteBar, sortable: true, - type: FieldType.number + id: 'complete', + name: '% Complete', + field: 'percentComplete', + formatter: Formatters.percentCompleteBar, + sortable: true, + type: FieldType.number, }, { - id: 'start', name: 'Start', field: 'start', - formatter: Formatters.dateIso, sortable: true, - type: FieldType.date + id: 'start', + name: 'Start', + field: 'start', + formatter: Formatters.dateIso, + sortable: true, + type: FieldType.date, }, { - id: 'finish', name: 'Finish', field: 'finish', - formatter: Formatters.dateIso, sortable: true, - type: FieldType.date + id: 'finish', + name: 'Finish', + field: 'finish', + formatter: Formatters.dateIso, + sortable: true, + type: FieldType.date, }, { - id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', - formatter: Formatters.checkmarkMaterial, sortable: true, - type: FieldType.number - } + id: 'effort-driven', + name: 'Effort Driven', + field: 'effortDriven', + formatter: Formatters.checkmarkMaterial, + sortable: true, + type: FieldType.number, + }, ]; this.selectedColumn = this.columnDefinitions[0]; @@ -87,7 +105,7 @@ export class GridAutoHeightComponent implements OnInit { autoHeight: true, autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, // enable the filtering but hide the user filter row since we use our own single filter @@ -97,7 +115,7 @@ export class GridAutoHeightComponent implements OnInit { alwaysShowVerticalScroll: false, enableColumnPicker: true, enableCellNavigation: true, - enableRowSelection: true + enableRowSelection: true, }; // mock a dataset @@ -105,7 +123,7 @@ export class GridAutoHeightComponent implements OnInit { for (let i = 0; i < 25; i++) { const randomYear = 2000 + Math.floor(Math.random() * 10); const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); + const randomDay = Math.floor(Math.random() * 29); const randomPercent = Math.round(Math.random() * 100); mockedDataset[i] = { @@ -115,8 +133,8 @@ export class GridAutoHeightComponent implements OnInit { percentComplete: randomPercent, percentCompleteNumber: randomPercent, start: new Date(randomYear, randomMonth, randomDay), - finish: new Date(randomYear, (randomMonth + 1), randomDay), - effortDriven: (i % 5 === 0) + finish: new Date(randomYear, randomMonth + 1, randomDay), + effortDriven: i % 5 === 0, }; } this.dataset = mockedDataset; @@ -135,7 +153,7 @@ export class GridAutoHeightComponent implements OnInit { this.angularGrid.filterService.updateSingleFilter({ columnId: `${this.selectedColumn!.id || ''}`, operator: this.selectedOperator as OperatorString, - searchTerms: [this.searchValue || ''] + searchTerms: [this.searchValue || ''], }); } } diff --git a/src/app/examples/grid-base-row-editing.component.html b/src/app/examples/grid-base-row-editing.component.html index 556ef454d..b9e836e6b 100644 --- a/src/app/examples/grid-base-row-editing.component.html +++ b/src/app/examples/grid-base-row-editing.component.html @@ -1,9 +1,11 @@

Example 35: Row Based Editing - + code @@ -12,66 +14,66 @@

  • - The Row Based Edit plugin allows you to edit either a single or multiple - specific rows at a time, while disabling the rest of the grid rows. + The Row Based Edit plugin allows you to edit either a single or multiple specific rows at a time, while disabling the rest + of the grid rows.
  • - Editedable rows, as well as modified cells are highlighted with a - different color, which you can customize using css variables (see + Editedable rows, as well as modified cells are highlighted with a different color, which you can customize using css + variables (see - grid-base-row-editing.component.scss )
    • +
  • Modifications are kept track of and if the cancel button is pressed, all modifications are rolled back.
  • - Modifications are kept track of and if the cancel button is pressed, all - modifications are rolled back. -
    • -
  • - If the save button is pressed, a custom "onBeforeRowUpdated" callback is called, which you can use to save the data with your backend.
    - The callback needs to return a Promise<boolean> and if the promise resolves to true, then the row will be updated, otherwise it will be cancelled and stays in edit mode. - You can try out the later by defining a Duration value larger than 40. + If the save button is pressed, a custom "onBeforeRowUpdated" callback is called, which you can use to save the data with + your backend.
    + The callback needs to return a Promise<boolean> and if the promise resolves to true, then the row will be updated, + otherwise it will be cancelled and stays in edit mode. You can try out the later by defining a Duration value + larger than 40.
    - NOTE: You can also combine this with e.g. Batch Editing like shown in Example 30 + NOTE: You can also combine this with e.g. Batch Editing like shown + in Example 30
  • This example additionally uses the ExcelCopyBuffer Plugin, which you can see also in Slickgrid-Universal - example 19. - The example defines a rule that pastes in the first column are prohibited. In combination with the Row Based Editing Plugin though, this rule gets enhanced with the fact - that only the edited rows are allowed to be pasted into, while still respecting the original rule. + example 19. The example defines a rule that + pastes in the first column are prohibited. In combination with the Row Based Editing Plugin though, this rule gets enhanced + with the fact that only the edited rows are allowed to be pasted into, while still respecting the original rule.
-
- - + - Locale: {{selectedLanguage + '.json'}} -
+ Locale: {{ selectedLanguage + '.json' }} +
-
- Status: - -
+
+ Status: + +
- + diff --git a/src/app/examples/grid-base-row-editing.component.ts b/src/app/examples/grid-base-row-editing.component.ts index 9f4ebc562..5be2e9874 100644 --- a/src/app/examples/grid-base-row-editing.component.ts +++ b/src/app/examples/grid-base-row-editing.component.ts @@ -3,21 +3,14 @@ import { TranslateService } from '@ngx-translate/core'; import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin'; import { Subscription } from 'rxjs'; -import { - AngularGridInstance, - Column, - Editors, - FieldType, - Formatters, - GridOption, -} from '../modules/angular-slickgrid'; +import { AngularGridInstance, Column, Editors, FieldType, Formatters, GridOption } from '../modules/angular-slickgrid'; const NB_ITEMS = 20; @Component({ encapsulation: ViewEncapsulation.None, styleUrls: ['./grid-base-row-editing.component.scss'], - templateUrl: './grid-base-row-editing.component.html' + templateUrl: './grid-base-row-editing.component.html', }) export class GridBaseRowEditingComponent implements OnInit { private subscriptions: Subscription[] = []; @@ -145,12 +138,13 @@ export class GridBaseRowEditingComponent implements OnInit { method: 'POST', body: JSON.stringify({ effortDriven, percentComplete, finish, start, duration, title }), headers: { - 'Content-type': 'application/json; charset=UTF-8' - } - }).catch(err => { - console.error(err); - return false; + 'Content-type': 'application/json; charset=UTF-8', + }, }) + .catch((err) => { + console.error(err); + return false; + }) .then((response: any) => { if (response === false) { this.statusClass = 'alert alert-danger'; @@ -160,14 +154,15 @@ export class GridBaseRowEditingComponent implements OnInit { return response!.json(); } }) - .then(json => { + .then((json) => { this.statusStyle = 'display: block'; this.statusClass = 'alert alert-success'; this.fetchResult = json.message; return true; }); }, - actionColumnConfig: { // override the defaults of the action column + actionColumnConfig: { + // override the defaults of the action column width: 100, minWidth: 100, maxWidth: 100, @@ -246,7 +241,7 @@ export class GridBaseRowEditingComponent implements OnInit { } switchLanguage() { - const nextLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en'; + const nextLanguage = this.selectedLanguage === 'en' ? 'fr' : 'en'; this.subscriptions.push( this.translate.use(nextLanguage).subscribe(() => { this.selectedLanguage = nextLanguage; @@ -257,9 +252,12 @@ export class GridBaseRowEditingComponent implements OnInit { function fakeFetch(_input: string | URL | Request, _init?: RequestInit | undefined): Promise { return new Promise((resolve) => { - window.setTimeout(() => { - resolve(new Response(JSON.stringify({ status: 200, message: 'success' }))); - // reduces the delay for automated Cypress tests - }, (window as any).Cypress ? 10 : 500); + window.setTimeout( + () => { + resolve(new Response(JSON.stringify({ status: 200, message: 'success' }))); + // reduces the delay for automated Cypress tests + }, + (window as any).Cypress ? 10 : 500 + ); }); } diff --git a/src/app/examples/grid-basic.component.html b/src/app/examples/grid-basic.component.html index a4e5ec328..55bd53439 100644 --- a/src/app/examples/grid-basic.component.html +++ b/src/app/examples/grid-basic.component.html @@ -1,10 +1,12 @@

- {{title}} + {{ title }} - + code @@ -22,11 +24,13 @@

- +
@@ -34,10 +38,7 @@

Grid 2 (with local Pagination)

- +
-
\ No newline at end of file + diff --git a/src/app/examples/grid-basic.component.ts b/src/app/examples/grid-basic.component.ts index 60b4e1939..c824c9d81 100644 --- a/src/app/examples/grid-basic.component.ts +++ b/src/app/examples/grid-basic.component.ts @@ -5,7 +5,7 @@ import { zeroPadding } from './utilities'; const NB_ITEMS = 995; @Component({ - templateUrl: './grid-basic.component.html' + templateUrl: './grid-basic.component.html', }) export class GridBasicComponent implements OnDestroy, OnInit { private _darkModeGrid1 = false; @@ -49,7 +49,7 @@ export class GridBasicComponent implements OnDestroy, OnInit { { id: '%', name: '% Complete', field: 'percentComplete', sortable: true }, { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso }, { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso }, - { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true } + { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true }, ]; this._darkModeGrid1 = this.isBrowserDarkModeEnabled(); this.gridOptions1 = { @@ -70,9 +70,9 @@ export class GridBasicComponent implements OnDestroy, OnInit { enablePagination: true, pagination: { pageSizes: [5, 10, 20, 25, 50], - pageSize: 5 + pageSize: 5, }, - } + }, }; // mock some data (different in each dataset) @@ -86,7 +86,7 @@ export class GridBasicComponent implements OnDestroy, OnInit { for (let i = 0; i < count; i++) { const randomYear = 2000 + Math.floor(Math.random() * 10); const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); + const randomDay = Math.floor(Math.random() * 29); const randomPercent = Math.round(Math.random() * 100); mockDataset[i] = { @@ -96,7 +96,7 @@ export class GridBasicComponent implements OnDestroy, OnInit { percentComplete: randomPercent, start: `${zeroPadding(randomYear)}-${zeroPadding(randomMonth + 1)}-${zeroPadding(randomDay)}`, finish: `${zeroPadding(randomYear + 1)}-${zeroPadding(randomMonth + 1)}-${zeroPadding(randomDay)}`, - effortDriven: (i % 5 === 0) + effortDriven: i % 5 === 0, }; } diff --git a/src/app/examples/grid-clientside.component.html b/src/app/examples/grid-clientside.component.html index 77c4f45d8..5d8055b40 100644 --- a/src/app/examples/grid-clientside.component.html +++ b/src/app/examples/grid-clientside.component.html @@ -1,10 +1,12 @@

- {{title}} + {{ title }} - + code @@ -13,8 +15,8 @@


- Metrics: {{metrics.startTime | date: 'yyyy-MM-dd hh:mm aaaaa\'m\''}} | {{metrics.itemCount}} of - {{metrics.totalItemCount}} items + Metrics: {{ metrics.startTime | date: "yyyy-MM-dd hh:mm aaaaa'm'" }} | {{ metrics.itemCount }} of + {{ metrics.totalItemCount }} items
- - - + -

\ No newline at end of file + diff --git a/src/app/examples/grid-clientside.component.ts b/src/app/examples/grid-clientside.component.ts index a25c2e95f..7a208a622 100644 --- a/src/app/examples/grid-clientside.component.ts +++ b/src/app/examples/grid-clientside.component.ts @@ -24,7 +24,7 @@ const NB_ITEMS = 10500; const URL_SAMPLE_COLLECTION_DATA = 'assets/data/collection_500_numbers.json'; @Component({ - templateUrl: './grid-clientside.component.html' + templateUrl: './grid-clientside.component.html', }) export class GridClientSideComponent implements OnInit { title = 'Example 4: Client Side Sort/Filter'; @@ -57,43 +57,65 @@ export class GridClientSideComponent implements OnInit { dataset!: any[]; metrics!: Metrics; - constructor(private http: HttpClient, private translate: TranslateService) { } + constructor( + private http: HttpClient, + private translate: TranslateService + ) {} ngOnInit(): void { this.columnDefinitions = [ { - id: 'title', name: 'Title', field: 'title', sortable: true, minWidth: 55, - type: FieldType.string, filterable: true, filter: { model: Filters.compoundInputText } + id: 'title', + name: 'Title', + field: 'title', + sortable: true, + minWidth: 55, + type: FieldType.string, + filterable: true, + filter: { model: Filters.compoundInputText }, }, { - id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80, + id: 'description', + name: 'Description', + field: 'description', + filterable: true, + sortable: true, + minWidth: 80, type: FieldType.string, filter: { model: CustomInputFilter, // create a new instance to make each Filter independent from each other - enableTrimWhiteSpace: true // or use global "enableFilterTrimWhiteSpace" to trim on all Filters - } + enableTrimWhiteSpace: true, // or use global "enableFilterTrimWhiteSpace" to trim on all Filters + }, }, { - id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, exportCsvForceToKeepAsString: true, + id: 'duration', + name: 'Duration (days)', + field: 'duration', + sortable: true, + type: FieldType.number, + exportCsvForceToKeepAsString: true, minWidth: 55, filterable: true, filter: { - collectionAsync: this.http.get<{ option: string; value: string; }[]>(URL_SAMPLE_COLLECTION_DATA), + collectionAsync: this.http.get<{ option: string; value: string }[]>(URL_SAMPLE_COLLECTION_DATA), // collectionFilterBy & collectionSortBy accept a single or multiple options // we can exclude certains values 365 & 360 from the dropdown filter - collectionFilterBy: [{ - property: 'value', - operator: OperatorType.notEqual, - value: 360 - }, { - property: 'value', - operator: OperatorType.notEqual, - value: 365 - }], + collectionFilterBy: [ + { + property: 'value', + operator: OperatorType.notEqual, + value: 360, + }, + { + property: 'value', + operator: OperatorType.notEqual, + value: 365, + }, + ], collectionSortBy: { property: 'value', sortDesc: true, - fieldType: FieldType.number + fieldType: FieldType.number, }, customStructure: { value: 'value', @@ -103,7 +125,7 @@ export class GridClientSideComponent implements OnInit { }, collectionOptions: { separatorBetweenTextLabels: ' ', - filterResultAfterEachPass: 'chain' // options are "merge" or "chain" (defaults to "chain") + filterResultAfterEachPass: 'chain', // options are "merge" or "chain" (defaults to "chain") }, model: Filters.multipleSelect, @@ -114,33 +136,67 @@ export class GridClientSideComponent implements OnInit { // if we want to display shorter text as the selected text (on the select filter itself, parent element) // we can use "useSelectOptionLabel" or "useSelectOptionLabelToHtml" the latter will parse html - useSelectOptionLabelToHtml: true - } as MultipleSelectOption - } + useSelectOptionLabelToHtml: true, + } as MultipleSelectOption, + }, }, { - id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, minWidth: 70, type: FieldType.number, sortable: true, - filterable: true, filter: { model: Filters.compoundInputNumber } + id: 'complete', + name: '% Complete', + field: 'percentComplete', + formatter: Formatters.percentCompleteBar, + minWidth: 70, + type: FieldType.number, + sortable: true, + filterable: true, + filter: { model: Filters.compoundInputNumber }, }, { - id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, minWidth: 75, - type: FieldType.date, filterable: true, filter: { model: Filters.compoundDate } + id: 'start', + name: 'Start', + field: 'start', + formatter: Formatters.dateIso, + sortable: true, + minWidth: 75, + type: FieldType.date, + filterable: true, + filter: { model: Filters.compoundDate }, }, { - id: 'usDateShort', name: 'US Date Short', field: 'usDateShort', sortable: true, minWidth: 70, width: 70, - type: FieldType.dateUsShort, exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate } + id: 'usDateShort', + name: 'US Date Short', + field: 'usDateShort', + sortable: true, + minWidth: 70, + width: 70, + type: FieldType.dateUsShort, + exportWithFormatter: true, + filterable: true, + filter: { model: Filters.compoundDate }, }, { - id: 'utcDate', name: 'UTC Date', field: 'utcDate', formatter: Formatters.dateTimeIsoAmPm, sortable: true, minWidth: 115, - type: FieldType.dateUtc, exportWithFormatter: true, outputType: FieldType.dateTimeIsoAmPm, filterable: true, + id: 'utcDate', + name: 'UTC Date', + field: 'utcDate', + formatter: Formatters.dateTimeIsoAmPm, + sortable: true, + minWidth: 115, + type: FieldType.dateUtc, + exportWithFormatter: true, + outputType: FieldType.dateTimeIsoAmPm, + filterable: true, filter: { model: Filters.compoundDate, // override any of the date picker options through "filterOptions" - filterOptions: { range: { date: 'today' } } as VanillaCalendarOption - } + filterOptions: { range: { date: 'today' } } as VanillaCalendarOption, + }, }, { - id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven.isEffort', minWidth: 85, maxWidth: 85, + id: 'effort-driven', + name: 'Effort Driven', + field: 'effortDriven.isEffort', + minWidth: 85, + maxWidth: 85, type: FieldType.boolean, sortable: true, exportCustomFormatter: Formatters.complexObject, @@ -157,23 +213,27 @@ export class GridClientSideComponent implements OnInit { // enableRenderHtml: true, // collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: ` ` }, { value: false, label: 'False' }], - collection: [{ isEffort: '', label: '' }, { isEffort: true, label: 'True' }, { isEffort: false, label: 'False' }], + collection: [ + { isEffort: '', label: '' }, + { isEffort: true, label: 'True' }, + { isEffort: false, label: 'False' }, + ], customStructure: { value: 'isEffort', - label: 'label' + label: 'label', }, model: Filters.singleSelect, // we could add certain option(s) to the "multiple-select" plugin filterOptions: { autoAdjustDropHeight: true } as MultipleSelectOption, - } - } + }, + }, ]; this.gridOptions = { autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableExcelExport: true, enableExcelCopyBuffer: true, @@ -192,11 +252,11 @@ export class GridClientSideComponent implements OnInit { ], sorters: [ { columnId: 'duration', direction: 'DESC' }, - { columnId: 'complete', direction: 'ASC' } + { columnId: 'complete', direction: 'ASC' }, ], }, externalResources: [new ExcelExportService()], - preParseDateColumns: '__' // or true + preParseDateColumns: '__', // or true }; // mock a dataset @@ -214,33 +274,33 @@ export class GridClientSideComponent implements OnInit { mockData(itemCount: number, startingIndex = 0): any[] { // mock a dataset const tempDataset = []; - for (let i = startingIndex; i < (startingIndex + itemCount); i++) { + for (let i = startingIndex; i < startingIndex + itemCount; i++) { const randomDuration = Math.round(Math.random() * 100); const randomYear = randomBetween(2000, 2035); const randomYearShort = randomBetween(10, 35); const randomMonth = randomBetween(1, 12); - const randomMonthStr = (randomMonth < 10) ? `0${randomMonth}` : randomMonth; + const randomMonthStr = randomMonth < 10 ? `0${randomMonth}` : randomMonth; const randomDay = randomBetween(10, 28); const randomPercent = randomBetween(0, 100); const randomHour = randomBetween(10, 23); const randomTime = randomBetween(10, 59); const randomMilliseconds = `${randomBetween(1, 9)}${randomBetween(10, 99)}`; - const randomIsEffort = (i % 3 === 0); + const randomIsEffort = i % 3 === 0; tempDataset.push({ id: i, title: 'Task ' + i, - description: (i % 5) ? 'desc ' + i : null, // also add some random to test NULL field + description: i % 5 ? 'desc ' + i : null, // also add some random to test NULL field duration: randomDuration, percentComplete: randomPercent, percentCompleteNumber: randomPercent, - start: (i % 4) ? null : new Date(randomYear, randomMonth, randomDay), // provide a Date format + start: i % 4 ? null : new Date(randomYear, randomMonth, randomDay), // provide a Date format usDateShort: `${randomMonth}/${randomDay}/${randomYearShort}`, // provide a date US Short in the dataset utcDate: `${randomYear}-${randomMonthStr}-${randomDay}T${randomHour}:${randomTime}:${randomTime}.${randomMilliseconds}Z`, effortDriven: { isEffort: randomIsEffort, label: randomIsEffort ? 'Effort' : 'NoEffort', - } + }, }); } return tempDataset; @@ -280,8 +340,8 @@ export class GridClientSideComponent implements OnInit { this.metrics = { startTime: new Date(), endTime: new Date(), - itemCount: args && args.current || 0, - totalItemCount: this.dataset.length || 0 + itemCount: (args && args.current) || 0, + totalItemCount: this.dataset.length || 0, }; }); } diff --git a/src/app/examples/grid-colspan.component.html b/src/app/examples/grid-colspan.component.html index c3f51e166..69631ad3e 100644 --- a/src/app/examples/grid-colspan.component.html +++ b/src/app/examples/grid-colspan.component.html @@ -1,10 +1,12 @@

- {{title}} + {{ title }} - + code @@ -12,28 +14,30 @@

Grid 1 (with Header Grouping & Colspan)

- +

Grid 2 (with Header Grouping & Frozen/Pinned Columns)

-
- + -
\ No newline at end of file + diff --git a/src/app/examples/grid-colspan.component.ts b/src/app/examples/grid-colspan.component.ts index d78dadabb..66929d585 100644 --- a/src/app/examples/grid-colspan.component.ts +++ b/src/app/examples/grid-colspan.component.ts @@ -46,7 +46,7 @@ export class GridColspanComponent implements OnInit { { id: 'start', name: 'Start', field: 'start', columnGroup: 'Period' }, { id: 'finish', name: 'Finish', field: 'finish', columnGroup: 'Period' }, { id: '%', name: '% Complete', field: 'percentComplete', selectable: false, columnGroup: 'Analysis' }, - { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', type: FieldType.boolean, columnGroup: 'Analysis' } + { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', type: FieldType.boolean, columnGroup: 'Analysis' }, ]; this.gridOptions1 = { @@ -61,11 +61,11 @@ export class GridColspanComponent implements OnInit { explicitInitialization: true, colspanCallback: this.renderDifferentColspan, gridMenu: { - iconButtonContainer: 'preheader' // we can display the grid menu icon in either the preheader or in the column header (default) + iconButtonContainer: 'preheader', // we can display the grid menu icon in either the preheader or in the column header (default) }, enableExcelExport: true, excelExportOptions: { - exportWithFormatter: false + exportWithFormatter: false, }, externalResources: [new ExcelExportService()], }; @@ -75,13 +75,22 @@ export class GridColspanComponent implements OnInit { prepareGrid2() { this.columnDefinitions2 = [ - { id: 'sel', name: '#', field: 'num', behavior: 'select', cssClass: 'cell-selection', width: 40, resizable: false, selectable: false }, + { + id: 'sel', + name: '#', + field: 'num', + behavior: 'select', + cssClass: 'cell-selection', + width: 40, + resizable: false, + selectable: false, + }, { id: 'title', name: 'Title', field: 'title', sortable: true, columnGroup: 'Common Factor' }, { id: 'duration', name: 'Duration', field: 'duration', columnGroup: 'Common Factor' }, { id: 'start', name: 'Start', field: 'start', columnGroup: 'Period' }, { id: 'finish', name: 'Finish', field: 'finish', columnGroup: 'Period' }, { id: '%', name: '% Complete', field: 'percentComplete', selectable: false, columnGroup: 'Analysis' }, - { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', type: FieldType.boolean, columnGroup: 'Analysis' } + { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', type: FieldType.boolean, columnGroup: 'Analysis' }, ]; this.gridOptions2 = { @@ -97,7 +106,7 @@ export class GridColspanComponent implements OnInit { headerMenu: { hideFreezeColumnsCommand: false }, enableExcelExport: true, excelExportOptions: { - exportWithFormatter: false + exportWithFormatter: false, }, externalResources: [new ExcelExportService()], }; @@ -117,7 +126,7 @@ export class GridColspanComponent implements OnInit { percentComplete: Math.round(Math.random() * 100), start: '01/01/2009', finish: '01/05/2009', - effortDriven: (i % 5 === 0) + effortDriven: i % 5 === 0, }; } return mockDataset; @@ -138,17 +147,17 @@ export class GridColspanComponent implements OnInit { return { columns: { duration: { - colspan: 3 // "duration" will span over 3 columns - } - } + colspan: 3, // "duration" will span over 3 columns + }, + }, }; } return { columns: { 0: { - colspan: '*' // starting at column index 0, we will span accross all column (*) - } - } + colspan: '*', // starting at column index 0, we will span accross all column (*) + }, + }, }; } } diff --git a/src/app/examples/grid-composite-editor.component.html b/src/app/examples/grid-composite-editor.component.html index 9c5f4c308..362be4554 100644 --- a/src/app/examples/grid-composite-editor.component.html +++ b/src/app/examples/grid-composite-editor.component.html @@ -1,15 +1,16 @@

- {{title}} - - + code @@ -18,67 +19,99 @@

- - - - -
- - - - -
- + -

\ No newline at end of file + diff --git a/src/app/examples/grid-composite-editor.component.ts b/src/app/examples/grid-composite-editor.component.ts index 24a2029ed..466f4b29f 100644 --- a/src/app/examples/grid-composite-editor.component.ts +++ b/src/app/examples/grid-composite-editor.component.ts @@ -60,17 +60,20 @@ function checkItemIsEditable(dataContext: any, columnDef: Column, grid: SlickGri return isEditable; } - const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, _dataContext, grid) => { const gridOptions = grid.getOptions(); const isEditableLine = gridOptions.editable && columnDef.editor; - value = (value === null || value === undefined) ? '' : value; + value = value === null || value === undefined ? '' : value; return isEditableLine ? { text: value, addClasses: 'editable-field' } : value; }; // you can create custom validator to pass to an inline editor const myCustomTitleValidator = (value: any, args: any) => { - if ((value === null || value === undefined || !value.length) && (args.compositeEditorOptions && args.compositeEditorOptions.modalType === 'create' || args.compositeEditorOptions.modalType === 'edit')) { + if ( + (value === null || value === undefined || !value.length) && + ((args.compositeEditorOptions && args.compositeEditorOptions.modalType === 'create') || + args.compositeEditorOptions.modalType === 'edit') + ) { // we will only check if the field is supplied when it's an inline editing OR a composite editor of type create/edit return { valid: false, msg: 'This is a required field.' }; } else if (!/^(task\s\d+)*$/i.test(value)) { @@ -132,51 +135,89 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { prepareGrid() { this.columnDefinitions = [ { - id: 'title', name: ' Title ', - field: 'title', sortable: true, type: FieldType.string, minWidth: 75, - cssClass: 'text-uppercase fw-bold', columnGroup: 'Common Factor', - filterable: true, filter: { model: Filters.compoundInputText }, + id: 'title', + name: ' Title ', + field: 'title', + sortable: true, + type: FieldType.string, + minWidth: 75, + cssClass: 'text-uppercase fw-bold', + columnGroup: 'Common Factor', + filterable: true, + filter: { model: Filters.compoundInputText }, editor: { - model: Editors.longText, massUpdate: false, required: true, alwaysSaveOnEnterKey: true, + model: Editors.longText, + massUpdate: false, + required: true, + alwaysSaveOnEnterKey: true, maxLength: 12, editorOptions: { cols: 45, rows: 6, buttonTexts: { cancel: 'Close', - save: 'Done' - } + save: 'Done', + }, } as LongTextEditorOption, validator: myCustomTitleValidator, }, }, { - id: 'duration', name: 'Duration', field: 'duration', sortable: true, filterable: true, minWidth: 75, - type: FieldType.number, columnGroup: 'Common Factor', + id: 'duration', + name: 'Duration', + field: 'duration', + sortable: true, + filterable: true, + minWidth: 75, + type: FieldType.number, + columnGroup: 'Common Factor', formatter: (_row, _cell, value) => { if (value === null || value === undefined || value === '') { return ''; } return value > 1 ? `${value} days` : `${value} day`; }, - editor: { model: Editors.float, massUpdate: true, decimal: 2, valueStep: 1, minValue: 0, maxValue: 10000, alwaysSaveOnEnterKey: true, required: true }, + editor: { + model: Editors.float, + massUpdate: true, + decimal: 2, + valueStep: 1, + minValue: 0, + maxValue: 10000, + alwaysSaveOnEnterKey: true, + required: true, + }, }, { - id: 'cost', name: 'Cost', field: 'cost', width: 90, minWidth: 70, - sortable: true, filterable: true, type: FieldType.number, columnGroup: 'Analysis', + id: 'cost', + name: 'Cost', + field: 'cost', + width: 90, + minWidth: 70, + sortable: true, + filterable: true, + type: FieldType.number, + columnGroup: 'Analysis', filter: { model: Filters.compoundInputNumber }, formatter: Formatters.dollar, }, { - id: 'percentComplete', name: '% Complete', field: 'percentComplete', minWidth: 100, + id: 'percentComplete', + name: '% Complete', + field: 'percentComplete', + minWidth: 100, type: FieldType.number, - sortable: true, filterable: true, columnGroup: 'Analysis', + sortable: true, + filterable: true, + columnGroup: 'Analysis', filter: { model: Filters.compoundSlider, operator: '>=' }, editor: { model: Editors.slider, - massUpdate: true, minValue: 0, maxValue: 100, + massUpdate: true, + minValue: 0, + maxValue: 100, }, - customTooltip: { position: 'center' } + customTooltip: { position: 'center' }, }, // { // id: 'percentComplete2', name: '% Complete', field: 'analysis.percentComplete', minWidth: 100, @@ -204,47 +245,79 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { // }, // }, { - id: 'complexity', name: 'Complexity', field: 'complexity', minWidth: 100, + id: 'complexity', + name: 'Complexity', + field: 'complexity', + minWidth: 100, type: FieldType.number, - sortable: true, filterable: true, columnGroup: 'Analysis', + sortable: true, + filterable: true, + columnGroup: 'Analysis', formatter: (_row, _cell, value) => this.complexityLevelList[value]?.label, exportCustomFormatter: (_row, _cell, value) => this.complexityLevelList[value]?.label, filter: { model: Filters.multipleSelect, - collection: this.complexityLevelList + collection: this.complexityLevelList, }, editor: { model: Editors.singleSelect, collection: this.complexityLevelList, - massUpdate: true + massUpdate: true, }, }, { - id: 'start', name: 'Start', field: 'start', sortable: true, minWidth: 100, - formatter: Formatters.dateUs, columnGroup: 'Period', + id: 'start', + name: 'Start', + field: 'start', + sortable: true, + minWidth: 100, + formatter: Formatters.dateUs, + columnGroup: 'Period', exportCustomFormatter: Formatters.dateUs, - type: FieldType.date, outputType: FieldType.dateUs, saveOutputType: FieldType.dateUtc, - filterable: true, filter: { model: Filters.compoundDate }, + type: FieldType.date, + outputType: FieldType.dateUs, + saveOutputType: FieldType.dateUtc, + filterable: true, + filter: { model: Filters.compoundDate }, editor: { model: Editors.date, massUpdate: true, editorOptions: { hideClearButton: false } }, }, { - id: 'completed', name: 'Completed', field: 'completed', width: 80, minWidth: 75, maxWidth: 100, - cssClass: 'text-center', columnGroup: 'Period', + id: 'completed', + name: 'Completed', + field: 'completed', + width: 80, + minWidth: 75, + maxWidth: 100, + cssClass: 'text-center', + columnGroup: 'Period', formatter: Formatters.checkmarkMaterial, exportWithFormatter: false, - filterable: true, sortable: true, + filterable: true, + sortable: true, filter: { - collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }], - model: Filters.singleSelect + collection: [ + { value: '', label: '' }, + { value: true, label: 'True' }, + { value: false, label: 'False' }, + ], + model: Filters.singleSelect, }, - editor: { model: Editors.checkbox, massUpdate: true, }, + editor: { model: Editors.checkbox, massUpdate: true }, // editor: { model: Editors.singleSelect, collection: [{ value: true, label: 'Yes' }, { value: false, label: 'No' }], }, }, { - id: 'finish', name: 'Finish', field: 'finish', sortable: true, minWidth: 100, - formatter: Formatters.dateUs, columnGroup: 'Period', - type: FieldType.date, outputType: FieldType.dateUs, saveOutputType: FieldType.dateUtc, - filterable: true, filter: { model: Filters.compoundDate }, + id: 'finish', + name: 'Finish', + field: 'finish', + sortable: true, + minWidth: 100, + formatter: Formatters.dateUs, + columnGroup: 'Period', + type: FieldType.date, + outputType: FieldType.dateUs, + saveOutputType: FieldType.dateUtc, + filterable: true, + filter: { model: Filters.compoundDate }, exportCustomFormatter: Formatters.dateUs, editor: { model: Editors.date, @@ -263,16 +336,19 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { massUpdate: true, validator: (value, args) => { const dataContext = args && args.item; - if (dataContext && (dataContext.completed && !value)) { + if (dataContext && dataContext.completed && !value) { return { valid: false, msg: 'You must provide a "Finish" date when "Completed" is checked.' }; } return { valid: true, msg: '' }; - } + }, }, }, { - id: 'product', name: 'Product', field: 'product', - filterable: true, columnGroup: 'Item', + id: 'product', + name: 'Product', + field: 'product', + filterable: true, + columnGroup: 'Item', minWidth: 100, exportWithFormatter: true, dataKey: 'id', @@ -291,7 +367,7 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { minLength: 1, fetch: (searchTerm: string, callback: (items: false | any[]) => void) => { const products = this.mockProducts(); - callback(products.filter(product => product.itemName.toLowerCase().includes(searchTerm.toLowerCase()))); + callback(products.filter((product) => product.itemName.toLowerCase().includes(searchTerm.toLowerCase()))); }, renderItem: { // layout: 'twoRows', @@ -307,11 +383,14 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { // placeholder: '🔎︎ search product', type: FieldType.string, queryField: 'product.itemName', - } + }, }, { - id: 'origin', name: 'Country of Origin', field: 'origin', - formatter: Formatters.complexObject, columnGroup: 'Item', + id: 'origin', + name: 'Country of Origin', + field: 'origin', + formatter: Formatters.complexObject, + columnGroup: 'Item', exportCustomFormatter: Formatters.complex, // without the Editing cell Formatter dataKey: 'code', labelKey: 'name', @@ -325,18 +404,24 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { massUpdate: true, customStructure: { label: 'name', value: 'code' }, collectionAsync: this.http.get(URL_COUNTRIES_COLLECTION), - editorOptions: { minLength: 0 } + editorOptions: { minLength: 0 }, }, filter: { model: Filters.inputText, type: 'string', queryField: 'origin.name', - } + }, }, { - id: 'action', name: 'Action', field: 'action', width: 70, minWidth: 70, maxWidth: 70, + id: 'action', + name: 'Action', + field: 'action', + width: 70, + minWidth: 70, + maxWidth: 70, excludeFromExport: true, - formatter: () => `
`, + formatter: () => + `
`, cellMenu: { hideCloseButton: false, commandTitle: 'Commands', @@ -357,8 +442,12 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { }, 'divider', { - command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'mdi mdi-close color-danger', cssClass: 'red', textCssClass: 'text-italic color-danger-light', + command: 'delete-row', + title: 'Delete Row', + positionOrder: 64, + iconCssClass: 'mdi mdi-close color-danger', + cssClass: 'red', + textCssClass: 'text-italic color-danger-light', // only show command to 'Delete Row' when the task is not completed itemVisibilityOverride: (args) => { return !args.dataContext?.completed; @@ -369,10 +458,10 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { if (confirm(`Do you really want to delete row (${row + 1}) with "${dataContext.title}"`)) { this.angularGrid.gridService.deleteItemById(dataContext.id); } - } + }, }, ], - } + }, }, ]; @@ -386,7 +475,7 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { autoAddCustomEditorFormatter: customEditableInputFormatter, autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, darkMode: this._darkMode, enableAutoSizeColumns: true, @@ -395,17 +484,17 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { enablePagination: true, pagination: { pageSize: 10, - pageSizes: [10, 200, 250, 500, 5000] + pageSizes: [10, 200, 250, 500, 5000], }, enableExcelExport: true, excelExportOptions: { - exportWithFormatter: false + exportWithFormatter: false, }, externalResources: [new ExcelExportService(), new SlickCustomTooltip(), this.compositeEditorInstance], enableFiltering: true, rowSelectionOptions: { // True (Single Selection), False (Multiple Selections) - selectActiveRow: false + selectActiveRow: false, }, createPreHeaderPanel: true, showPreHeaderPanel: true, @@ -420,8 +509,12 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { enableCompositeEditor: true, editCommandHandler: (item, column, editCommand) => { // composite editors values are saved as array, so let's convert to array in any case and we'll loop through these values - const prevSerializedValues = Array.isArray(editCommand.prevSerializedValue) ? editCommand.prevSerializedValue : [editCommand.prevSerializedValue]; - const serializedValues = Array.isArray(editCommand.serializedValue) ? editCommand.serializedValue : [editCommand.serializedValue]; + const prevSerializedValues = Array.isArray(editCommand.prevSerializedValue) + ? editCommand.prevSerializedValue + : [editCommand.prevSerializedValue]; + const serializedValues = Array.isArray(editCommand.serializedValue) + ? editCommand.serializedValue + : [editCommand.serializedValue]; const editorColumns = this.columnDefinitions.filter((col) => col.editor !== undefined); const modifiedColumns: Column[] = []; @@ -457,8 +550,8 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { this._darkMode = !this._darkMode; // keep local toggle var in sync this.toggleBodyBackground(); } - } - } + }, + }, }; } @@ -468,11 +561,11 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { for (let i = 0; i < count; i++) { const randomItemId = Math.floor(Math.random() * this.mockProducts().length); const randomYear = 2000 + Math.floor(Math.random() * 10); - const randomFinishYear = (new Date().getFullYear()) + Math.floor(Math.random() * 10); // use only years not lower than 3 years ago + const randomFinishYear = new Date().getFullYear() + Math.floor(Math.random() * 10); // use only years not lower than 3 years ago const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); - const randomTime = Math.floor((Math.random() * 59)); - const randomFinish = new Date(randomFinishYear, (randomMonth + 1), randomDay, randomTime, randomTime, randomTime); + const randomDay = Math.floor(Math.random() * 29); + const randomTime = Math.floor(Math.random() * 59); + const randomFinish = new Date(randomFinishYear, randomMonth + 1, randomDay, randomTime, randomTime, randomTime); const randomPercentComplete = Math.floor(Math.random() * 100) + 15; // make it over 15 for E2E testing purposes const percentCompletion = randomPercentComplete > 100 ? (i > 5 ? 100 : 88) : randomPercentComplete; // don't use 100 unless it's over index 5, for E2E testing purposes const isCompleted = percentCompletion === 100; @@ -487,11 +580,12 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { }, complexity: i % 3 ? 0 : 2, start: new Date(randomYear, randomMonth, randomDay, randomDay, randomTime, randomTime, randomTime), - finish: (isCompleted || (i % 3 === 0 && (randomFinish > new Date() && i > 3)) ? (isCompleted ? new Date() : randomFinish) : ''), // make sure the random date is earlier than today and it's index is bigger than 3 - cost: (i % 33 === 0) ? null : Math.round(Math.random() * 10000) / 100, - completed: (isCompleted || (i % 3 === 0 && (randomFinish > new Date() && i > 3))), - product: { id: this.mockProducts()[randomItemId]?.id, itemName: this.mockProducts()[randomItemId]?.itemName, }, - origin: (i % 2) ? { code: 'CA', name: 'Canada' } : { code: 'US', name: 'United States' }, + finish: + isCompleted || (i % 3 === 0 && randomFinish > new Date() && i > 3) ? (isCompleted ? new Date() : randomFinish) : '', // make sure the random date is earlier than today and it's index is bigger than 3 + cost: i % 33 === 0 ? null : Math.round(Math.random() * 10000) / 100, + completed: isCompleted || (i % 3 === 0 && randomFinish > new Date() && i > 3), + product: { id: this.mockProducts()[randomItemId]?.id, itemName: this.mockProducts()[randomItemId]?.itemName }, + origin: i % 2 ? { code: 'CA', name: 'Canada' } : { code: 'US', name: 'United States' }, }; if (!(i % 8)) { @@ -509,7 +603,7 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { handleValidationError(_e: Event, args: any) { if (args.validationResults) { let errorMsg = args.validationResults.msg || ''; - if (args.editor && (args.editor instanceof SlickCompositeEditor)) { + if (args.editor && args.editor instanceof SlickCompositeEditor) { if (args.validationResults.errors) { errorMsg += '\n'; for (const error of args.validationResults.errors) { @@ -665,9 +759,9 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { // we'll just apply the change without any rejection from the server and // note that we also have access to the "dataContext" which is only available for these modal console.log(`${modalType} item data context`, dataContext); - return new Promise(resolve => window.setTimeout(() => resolve(true), serverResponseDelay)); + return new Promise((resolve) => window.setTimeout(() => resolve(true), serverResponseDelay)); } - } + }, }); } @@ -689,7 +783,7 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { // remove unsaved css class from that cell const cssStyleKey = `unsaved_highlight_${[column.id]}${row}`; this.angularGrid.slickGrid.removeCellCssStyles(cssStyleKey); - const foundIdx = this.cellCssStyleQueue.findIndex(styleKey => styleKey === cssStyleKey); + const foundIdx = this.cellCssStyleQueue.findIndex((styleKey) => styleKey === cssStyleKey); if (foundIdx >= 0) { this.cellCssStyleQueue.splice(foundIdx, 1); } @@ -756,7 +850,6 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { } this.angularGrid.slickGrid.invalidate(); - // optionally open the last cell editor associated if (showLastEditor) { this.angularGrid.slickGrid.gotoCell(lastEditCommand.row, lastEditCommand.cell, false); @@ -820,7 +913,7 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { id: 2, itemName: 'Awesome Wooden Mouse', itemNameTranslated: 'super old mouse', - listPrice: 15.00, + listPrice: 15.0, itemTypeName: 'I', image: 'https://i.imgur.com/RaVJuLr.jpg', icon: this.getRandomIcon(2), @@ -937,7 +1030,7 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { 'mdi-table-refresh', 'mdi-undo', ]; - const randomNumber = Math.floor((Math.random() * icons.length - 1)); + const randomNumber = Math.floor(Math.random() * icons.length - 1); return icons[iconIndex ?? randomNumber]; } diff --git a/src/app/examples/grid-contextmenu.component.html b/src/app/examples/grid-contextmenu.component.html index 8a0d660be..0a9a8e559 100644 --- a/src/app/examples/grid-contextmenu.component.html +++ b/src/app/examples/grid-contextmenu.component.html @@ -1,14 +1,15 @@

- {{title}} - - + code @@ -19,24 +20,36 @@

Context Menu: - - Cell Menu: - - @@ -50,17 +63,19 @@

Locale: - {{selectedLanguage + '.json'}} + {{ selectedLanguage + '.json' }}

- +
- \ No newline at end of file + diff --git a/src/app/examples/grid-contextmenu.component.ts b/src/app/examples/grid-contextmenu.component.ts index 4d50f2cd4..3c36debfe 100644 --- a/src/app/examples/grid-contextmenu.component.ts +++ b/src/app/examples/grid-contextmenu.component.ts @@ -17,7 +17,8 @@ import { } from './../modules/angular-slickgrid'; const actionFormatter: Formatter = (_row, _cell, _value, _columnDef, dataContext) => { - if (dataContext.priority === 3) { // option 3 is High + if (dataContext.priority === 3) { + // option 3 is High return `
Action
`; } return `
Action
`; @@ -29,7 +30,7 @@ const priorityFormatter: Formatter = (_row, _cell, value) => { } let output = ''; const count = +(value >= 3 ? 3 : value); - const color = count === 3 ? 'red' : (count === 2 ? 'orange' : 'yellow'); + const color = count === 3 ? 'red' : count === 2 ? 'orange' : 'yellow'; const icon = ``; for (let i = 1; i <= count; i++) { @@ -45,7 +46,7 @@ const priorityExportFormatter: Formatter = (row, cell, value, columnDef, dataCon const gridOptions = grid.getOptions() as GridOption; const translate = gridOptions.i18n; const count = +(value >= 3 ? 3 : value); - const key = count === 3 ? 'HIGH' : (count === 2 ? 'MEDIUM' : 'LOW'); + const key = count === 3 ? 'HIGH' : count === 2 ? 'MEDIUM' : 'LOW'; return translate && translate.instant && translate.instant(key); }; @@ -60,7 +61,7 @@ const taskTranslateFormatter: Formatter = (row, cell, value, columnDef, dataCont @Component({ templateUrl: './grid-contextmenu.component.html', styleUrls: ['./grid-contextmenu.component.scss'], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, }) export class GridContextMenuComponent implements OnInit, OnDestroy { title = 'Example 26: Cell Menu & Context Menu Plugins'; @@ -133,49 +134,95 @@ export class GridContextMenuComponent implements OnInit, OnDestroy { this.columnDefinitions = [ { id: 'id', name: '#', field: 'id', maxWidth: 45, sortable: true, filterable: true }, { - id: 'title', name: 'Title', field: 'id', nameKey: 'TITLE', minWidth: 100, + id: 'title', + name: 'Title', + field: 'id', + nameKey: 'TITLE', + minWidth: 100, formatter: taskTranslateFormatter, sortable: true, filterable: true, - params: { useFormatterOuputToFilter: true } + params: { useFormatterOuputToFilter: true }, }, { - id: 'percentComplete', nameKey: 'PERCENT_COMPLETE', field: 'percentComplete', minWidth: 100, + id: 'percentComplete', + nameKey: 'PERCENT_COMPLETE', + field: 'percentComplete', + minWidth: 100, exportWithFormatter: false, - sortable: true, filterable: true, + sortable: true, + filterable: true, filter: { model: Filters.slider, operator: '>=' }, - formatter: Formatters.percentCompleteBar, type: FieldType.number, + formatter: Formatters.percentCompleteBar, + type: FieldType.number, + }, + { + id: 'start', + name: 'Start', + field: 'start', + nameKey: 'START', + minWidth: 100, + formatter: Formatters.dateIso, + outputType: FieldType.dateIso, + type: FieldType.date, + filterable: true, + filter: { model: Filters.compoundDate }, }, { - id: 'start', name: 'Start', field: 'start', nameKey: 'START', minWidth: 100, - formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, - filterable: true, filter: { model: Filters.compoundDate } + id: 'finish', + name: 'Finish', + field: 'finish', + nameKey: 'FINISH', + formatter: Formatters.dateIso, + outputType: FieldType.dateIso, + type: FieldType.date, + minWidth: 100, + filterable: true, + filter: { model: Filters.compoundDate }, }, - { id: 'finish', name: 'Finish', field: 'finish', nameKey: 'FINISH', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } }, { - id: 'priority', nameKey: 'PRIORITY', field: 'priority', + id: 'priority', + nameKey: 'PRIORITY', + field: 'priority', exportCustomFormatter: priorityExportFormatter, formatter: priorityFormatter, - sortable: true, filterable: true, + sortable: true, + filterable: true, filter: { - collection: [{ value: '', label: '' }, { value: 1, labelKey: 'LOW' }, { value: 2, labelKey: 'MEDIUM' }, { value: 3, labelKey: 'HIGH' }], + collection: [ + { value: '', label: '' }, + { value: 1, labelKey: 'LOW' }, + { value: 2, labelKey: 'MEDIUM' }, + { value: 3, labelKey: 'HIGH' }, + ], model: Filters.singleSelect, enableTranslateLabel: true, - } + }, }, { - id: 'completed', nameKey: 'COMPLETED', field: 'completed', + id: 'completed', + nameKey: 'COMPLETED', + field: 'completed', exportCustomFormatter: Formatters.translateBoolean, formatter: Formatters.checkmarkMaterial, - sortable: true, filterable: true, + sortable: true, + filterable: true, filter: { - collection: [{ value: '', label: '' }, { value: true, labelKey: 'TRUE' }, { value: false, labelKey: 'FALSE' }], + collection: [ + { value: '', label: '' }, + { value: true, labelKey: 'TRUE' }, + { value: false, labelKey: 'FALSE' }, + ], model: Filters.singleSelect, enableTranslateLabel: true, - } + }, }, { - id: 'action', name: 'Action', field: 'action', width: 100, maxWidth: 110, + id: 'action', + name: 'Action', + field: 'action', + width: 100, + maxWidth: 110, excludeFromExport: true, formatter: actionFormatter, cellMenu: { @@ -186,7 +233,7 @@ export class GridContextMenuComponent implements OnInit, OnDestroy { // if you wish to change the cell text (or hide it) // then you SHOULD use it in combination with a custom formatter (actionFormatter) and use the same logic in that formatter menuUsabilityOverride: (args) => { - return (args.dataContext.priority === 3); // option 3 is High + return args.dataContext.priority === 3; // option 3 is High }, // when using Translate Service, every translation will have the suffix "Key" @@ -195,7 +242,9 @@ export class GridContextMenuComponent implements OnInit, OnDestroy { commandItems: [ // array of command item objects, you can also use the "positionOrder" that will be used to sort the items in the list { - command: 'command2', title: 'Command 2', positionOrder: 62, + command: 'command2', + title: 'Command 2', + positionOrder: 62, // you can use the "action" callback and/or use "onCallback" callback from the grid options, they both have the same arguments action: (e, args) => { console.log(args.dataContext, args.column); @@ -204,16 +253,20 @@ export class GridContextMenuComponent implements OnInit, OnDestroy { // only enable command when the task is not completed itemUsabilityOverride: (args) => { return !args.dataContext.completed; - } + }, }, { command: 'command1', title: 'Command 1', cssClass: 'orange', positionOrder: 61 }, { - command: 'delete-row', titleKey: 'DELETE_ROW', positionOrder: 64, - iconCssClass: 'mdi mdi-close', cssClass: 'red', textCssClass: 'bold', + command: 'delete-row', + titleKey: 'DELETE_ROW', + positionOrder: 64, + iconCssClass: 'mdi mdi-close', + cssClass: 'red', + textCssClass: 'bold', // only show command to 'Delete Row' when the task is not completed itemVisibilityOverride: (args) => { return !args.dataContext.completed; - } + }, }, // you can pass divider as a string or an object with a boolean (if sorting by position, then use the object) // note you should use the "divider" string only when items array is already sorted and positionOrder are not specified @@ -226,66 +279,85 @@ export class GridContextMenuComponent implements OnInit, OnDestroy { iconCssClass: 'mdi mdi-help-circle', positionOrder: 66, }, - { command: 'something', titleKey: 'DISABLED_COMMAND', disabled: true, positionOrder: 67, }, + { command: 'something', titleKey: 'DISABLED_COMMAND', disabled: true, positionOrder: 67 }, { command: '', divider: true, positionOrder: 98 }, { // we can also have multiple nested sub-menus - command: 'export', title: 'Exports', positionOrder: 99, + command: 'export', + title: 'Exports', + positionOrder: 99, commandItems: [ { command: 'exports-txt', title: 'Text (tab delimited)' }, { - command: 'sub-menu', title: 'Excel', cssClass: 'green', subMenuTitle: 'available formats', subMenuTitleCssClass: 'text-italic orange', + command: 'sub-menu', + title: 'Excel', + cssClass: 'green', + subMenuTitle: 'available formats', + subMenuTitleCssClass: 'text-italic orange', commandItems: [ { command: 'exports-csv', title: 'Excel (csv)' }, { command: 'exports-xlsx', title: 'Excel (xlsx)' }, - ] - } - ] + ], + }, + ], }, { - command: 'feedback', title: 'Feedback', positionOrder: 100, + command: 'feedback', + title: 'Feedback', + positionOrder: 100, commandItems: [ - { command: 'request-update', title: 'Request update from supplier', iconCssClass: 'mdi mdi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' }, + { + command: 'request-update', + title: 'Request update from supplier', + iconCssClass: 'mdi mdi-star', + tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update', + }, 'divider', { - command: 'sub-menu', title: 'Contact Us', iconCssClass: 'mdi mdi-account', subMenuTitle: 'contact us...', subMenuTitleCssClass: 'italic', + command: 'sub-menu', + title: 'Contact Us', + iconCssClass: 'mdi mdi-account', + subMenuTitle: 'contact us...', + subMenuTitleCssClass: 'italic', commandItems: [ { command: 'contact-email', title: 'Email us', iconCssClass: 'mdi mdi-pencil-outline' }, { command: 'contact-chat', title: 'Chat with us', iconCssClass: 'mdi mdi-message-text-outline' }, { command: 'contact-meeting', title: 'Book an appointment', iconCssClass: 'mdi mdi-coffee' }, - ] - } - ] - } + ], + }, + ], + }, ], optionTitleKey: 'CHANGE_COMPLETED_FLAG', optionItems: [ { option: true, titleKey: 'TRUE', iconCssClass: 'mdi mdi-check-box-outline' }, { option: false, titleKey: 'FALSE', iconCssClass: 'mdi mdi-checkbox-blank-outline' }, { - option: null, title: 'null', cssClass: 'italic', + option: null, + title: 'null', + cssClass: 'italic', // you can use the "action" callback and/or use "onCallback" callback from the grid options, they both have the same arguments action: (_e, _args) => { // action callback.. do something }, // only enable Action menu when the Priority is set to High itemUsabilityOverride: (args) => { - return (args.dataContext.priority === 3); + return args.dataContext.priority === 3; }, // only show command to 'Delete Row' when the task is not completed itemVisibilityOverride: (args) => { return !args.dataContext.completed; - } + }, }, - ] - } + ], + }, }, ]; this.gridOptions = { autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, darkMode: this._darkModeGrid, enableCellNavigation: true, @@ -298,7 +370,7 @@ export class GridContextMenuComponent implements OnInit, OnDestroy { customColumnWidth: 15, // you can customize how the header titles will be styled (defaults to Bold) - columnHeaderStyle: { font: { bold: true, italic: true } } + columnHeaderStyle: { font: { bold: true, italic: true } }, }, i18n: this.translate, externalResources: [new ExcelExportService()], @@ -319,12 +391,12 @@ export class GridContextMenuComponent implements OnInit, OnDestroy { this.angularGrid.gridService.updateItem(dataContext); } }, - onBeforeMenuShow: ((e, args) => { + onBeforeMenuShow: (e, args) => { // for example, you could select the row that the click originated // this.angularGrid.gridService.setSelectedRows([args.row]); console.log('Before the Cell Menu is shown', args); - }), - onBeforeMenuClose: ((e, args) => console.log('Cell Menu is closing', args)), + }, + onBeforeMenuClose: (e, args) => console.log('Cell Menu is closing', args), }, // load Context Menu structure @@ -358,7 +430,11 @@ export class GridContextMenuComponent implements OnInit, OnDestroy { alert('Please help!'); break; case 'delete-row': - if (confirm(`Do you really want to delete row ${args.row + 1} with ${this.translate.instant('TASK_X', { x: dataContext.id })}`)) { + if ( + confirm( + `Do you really want to delete row ${args.row + 1} with ${this.translate.instant('TASK_X', { x: dataContext.id })}` + ) + ) { this.angularGrid.dataView.deleteItem(dataContext.id); } break; @@ -371,16 +447,16 @@ export class GridContextMenuComponent implements OnInit, OnDestroy { for (let i = 0; i < count; i++) { const randomYear = 2000 + Math.floor(Math.random() * 30); const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); + const randomDay = Math.floor(Math.random() * 29); tmpData[i] = { id: i, duration: Math.floor(Math.random() * 25) + ' days', percentComplete: Math.floor(Math.random() * 100), start: new Date(randomYear, randomMonth, randomDay), - finish: new Date(randomYear, (randomMonth + 1), randomDay), - priority: i % 3 ? 2 : (i % 5 ? 3 : 1), - completed: (i % 4 === 0), + finish: new Date(randomYear, randomMonth + 1, randomDay), + priority: i % 3 ? 2 : i % 5 ? 3 : 1, + completed: i % 4 === 0, }; } return tmpData; @@ -393,20 +469,30 @@ export class GridContextMenuComponent implements OnInit, OnDestroy { // this should be used with a custom formatter to show/hide/disable the menu menuUsabilityOverride: (args) => { const dataContext = args && args.dataContext; - return (dataContext.id < 21); // say we want to display the menu only from Task 0 to 20 + return dataContext.id < 21; // say we want to display the menu only from Task 0 to 20 }, // which column to show the command list? when not defined it will be shown over all columns commandShownOverColumnIds: ['id', 'title', 'percentComplete', 'start', 'finish', 'completed' /*, 'priority', 'action' */], commandTitleKey: 'COMMANDS', // this title is optional, you could also use "commandTitle" when not using Translate commandItems: [ { divider: true, command: '', positionOrder: 61 }, - { command: 'delete-row', titleKey: 'DELETE_ROW', iconCssClass: 'mdi mdi-close', cssClass: 'red', textCssClass: 'bold', positionOrder: 62 }, + { + command: 'delete-row', + titleKey: 'DELETE_ROW', + iconCssClass: 'mdi mdi-close', + cssClass: 'red', + textCssClass: 'bold', + positionOrder: 62, + }, // you can pass divider as a string or an object with a boolean (if sorting by position, then use the object) // note you should use the "divider" string only when items array is already sorted and positionOrder are not specified // 'divider', { divider: true, command: '', positionOrder: 63 }, { - command: 'help', titleKey: 'HELP', iconCssClass: 'mdi mdi-help-circle', positionOrder: 64, + command: 'help', + titleKey: 'HELP', + iconCssClass: 'mdi mdi-help-circle', + positionOrder: 64, // you can use the 'action' callback and/or subscribe to the 'onCallback' event, they both have the same arguments action: (_e, _args) => { // action callback.. do something @@ -414,40 +500,57 @@ export class GridContextMenuComponent implements OnInit, OnDestroy { // only show command to 'Help' when the task is Not Completed itemVisibilityOverride: (args) => { const dataContext = args && args.dataContext; - return (!dataContext.completed); - } + return !dataContext.completed; + }, }, { command: 'something', titleKey: 'DISABLED_COMMAND', disabled: true, positionOrder: 65 }, { command: '', divider: true, positionOrder: 98 }, { // we can also have multiple nested sub-menus - command: 'export', title: 'Exports', positionOrder: 99, + command: 'export', + title: 'Exports', + positionOrder: 99, commandItems: [ { command: 'exports-txt', title: 'Text (tab delimited)' }, { - command: 'sub-menu', title: 'Excel', cssClass: 'green', subMenuTitle: 'available formats', subMenuTitleCssClass: 'text-italic orange', + command: 'sub-menu', + title: 'Excel', + cssClass: 'green', + subMenuTitle: 'available formats', + subMenuTitleCssClass: 'text-italic orange', commandItems: [ { command: 'exports-csv', title: 'Excel (csv)' }, { command: 'exports-xlsx', title: 'Excel (xlsx)' }, - ] - } - ] + ], + }, + ], }, { - command: 'feedback', title: 'Feedback', positionOrder: 100, + command: 'feedback', + title: 'Feedback', + positionOrder: 100, commandItems: [ - { command: 'request-update', title: 'Request update from supplier', iconCssClass: 'mdi mdi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' }, + { + command: 'request-update', + title: 'Request update from supplier', + iconCssClass: 'mdi mdi-star', + tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update', + }, 'divider', { - command: 'sub-menu', title: 'Contact Us', iconCssClass: 'mdi mdi-account', subMenuTitle: 'contact us...', subMenuTitleCssClass: 'italic', + command: 'sub-menu', + title: 'Contact Us', + iconCssClass: 'mdi mdi-account', + subMenuTitle: 'contact us...', + subMenuTitleCssClass: 'italic', commandItems: [ { command: 'contact-email', title: 'Email us', iconCssClass: 'mdi mdi-pencil-outline' }, { command: 'contact-chat', title: 'Chat with us', iconCssClass: 'mdi mdi-message-text-outline' }, { command: 'contact-meeting', title: 'Book an appointment', iconCssClass: 'mdi mdi-coffee' }, - ] - } - ] - } + ], + }, + ], + }, ], // Options allows you to edit a column from an option chose a list @@ -457,11 +560,13 @@ export class GridContextMenuComponent implements OnInit, OnDestroy { optionShownOverColumnIds: ['priority'], // optional, when defined it will only show over the columns (column id) defined in the array optionItems: [ { - option: 0, title: 'n/a', textCssClass: 'italic', + option: 0, + title: 'n/a', + textCssClass: 'italic', // only enable this option when the task is Not Completed itemUsabilityOverride: (args) => { const dataContext = args && args.dataContext; - return (!dataContext.completed); + return !dataContext.completed; }, // you can use the 'action' callback and/or subscribe to the 'onCallback' event, they both have the same arguments action: (_e, _args) => { @@ -476,43 +581,49 @@ export class GridContextMenuComponent implements OnInit, OnDestroy { 'divider', // { divider: true, option: '', positionOrder: 3 }, { - option: 4, title: 'Extreme', iconCssClass: 'mdi mdi-fire', disabled: true, + option: 4, + title: 'Extreme', + iconCssClass: 'mdi mdi-fire', + disabled: true, // only shown when the task is Not Completed itemVisibilityOverride: (args) => { const dataContext = args && args.dataContext; - return (!dataContext.completed); - } + return !dataContext.completed; + }, }, { // we can also have multiple nested sub-menus - option: null, title: 'Sub-Options (demo)', subMenuTitleKey: 'CHANGE_PRIORITY', optionItems: [ + option: null, + title: 'Sub-Options (demo)', + subMenuTitleKey: 'CHANGE_PRIORITY', + optionItems: [ { option: 1, iconCssClass: 'mdi mdi-star-outline yellow', titleKey: 'LOW' }, { option: 2, iconCssClass: 'mdi mdi-star orange', titleKey: 'MEDIUM' }, { option: 3, iconCssClass: 'mdi mdi-star red', titleKey: 'HIGH' }, - ] - } + ], + }, ], // subscribe to Context Menu - onBeforeMenuShow: ((e, args) => { + onBeforeMenuShow: (e, args) => { // for example, you could select the row it was clicked with // grid.setSelectedRows([args.row]); // select the entire row this.angularGrid.slickGrid.setActiveCell(args.row, args.cell, false); // select the cell that the click originated console.log('Before the global Context Menu is shown', args); - }), - onBeforeMenuClose: ((e, args) => console.log('Global Context Menu is closing', args)), + }, + onBeforeMenuClose: (e, args) => console.log('Global Context Menu is closing', args), // subscribe to Context Menu onCommand event (or use the action callback on each command) - onCommand: ((e, args) => this.executeCommand(e, args)), + onCommand: (e, args) => this.executeCommand(e, args), // subscribe to Context Menu onOptionSelected event (or use the action callback on each option) - onOptionSelected: ((e, args) => { + onOptionSelected: (e, args) => { // change Priority const dataContext = args && args.dataContext; if (dataContext && 'priority' in dataContext) { dataContext.priority = args.item.option; this.angularGrid.gridService.updateItem(dataContext); } - }), + }, }; } @@ -529,7 +640,7 @@ export class GridContextMenuComponent implements OnInit, OnDestroy { showCellMenuCommandsAndOptions(showBothList: boolean) { // change via the plugin setOptions this.cellMenuInstance?.setOptions({ - hideOptionSection: !showBothList + hideOptionSection: !showBothList, }); // OR find the column, then change the same hide property @@ -538,7 +649,7 @@ export class GridContextMenuComponent implements OnInit, OnDestroy { } switchLanguage() { - const nextLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en'; + const nextLanguage = this.selectedLanguage === 'en' ? 'fr' : 'en'; this.subscriptions.push( this.translate.use(nextLanguage).subscribe(() => { diff --git a/src/app/examples/grid-custom-pager.component.html b/src/app/examples/grid-custom-pager.component.html index 5be092db9..071fb982e 100644 --- a/src/app/examples/grid-custom-pager.component.html +++ b/src/app/examples/grid-custom-pager.component.html @@ -2,46 +2,67 @@ - - {{currentPagination?.dataFrom}} - - + {{ currentPagination?.dataFrom }} - - {{currentPagination?.dataTo}} + {{ currentPagination?.dataTo }} - of + of - {{currentPagination?.totalItems}} + {{ currentPagination?.totalItems }} items -
- -
- Page - {{currentPagination?.pageNumber}} - of - {{currentPagination?.pageCount}} -
- +
+ +
+ Page + {{ currentPagination?.pageNumber }} + of + {{ currentPagination?.pageCount }} +
+ +
- \ No newline at end of file diff --git a/src/app/examples/grid-custom-pager.component.ts b/src/app/examples/grid-custom-pager.component.ts index 2bd268c18..a4a6e8899 100644 --- a/src/app/examples/grid-custom-pager.component.ts +++ b/src/app/examples/grid-custom-pager.component.ts @@ -1,5 +1,12 @@ import { Component, ElementRef } from '@angular/core'; -import type { BasePaginationComponent, PaginationMetadata, PaginationService, PubSubService, SlickGrid, Subscription } from '@slickgrid-universal/common'; +import type { + BasePaginationComponent, + PaginationMetadata, + PaginationService, + PubSubService, + SlickGrid, + Subscription, +} from '@slickgrid-universal/common'; /** Custom Pagination Componnet, please note that you MUST `implements BasePaginationComponent` with required functions */ @Component({ @@ -15,7 +22,7 @@ export class CustomPagerComponent implements BasePaginationComponent { protected _pubSubService!: PubSubService; currentPagination = {} as PaginationMetadata; - constructor(protected readonly elm: ElementRef) { } + constructor(protected readonly elm: ElementRef) {} init(grid: SlickGrid, paginationService: PaginationService, pubSubService: PubSubService) { this._grid = grid; @@ -26,7 +33,7 @@ export class CustomPagerComponent implements BasePaginationComponent { // Anytime the pagination is initialized or has changes, // we'll copy the data into a local object so that we can add binding to this local object this._subscriptions.push( - this._pubSubService.subscribe('onPaginationRefreshed', paginationChanges => { + this._pubSubService.subscribe('onPaginationRefreshed', (paginationChanges) => { this.currentPagination.dataFrom = paginationChanges.dataFrom; this.currentPagination.dataTo = paginationChanges.dataTo; this.currentPagination.pageCount = paginationChanges.pageCount; @@ -96,4 +103,4 @@ export class CustomPagerComponent implements BasePaginationComponent { isRightPaginationDisabled(): boolean { return this.currentPagination.pageNumber === this.currentPagination.pageCount || this.currentPagination.totalItems === 0; } -} \ No newline at end of file +} diff --git a/src/app/examples/grid-custom-pagination.component.html b/src/app/examples/grid-custom-pagination.component.html index 029e0faf3..814db3a03 100644 --- a/src/app/examples/grid-custom-pagination.component.html +++ b/src/app/examples/grid-custom-pagination.component.html @@ -2,16 +2,19 @@

Example 42: Custom Pagination - + code

- You can create a Custom Pagination by passing an Angular Custom Component and it must implements BasePaginationComponent. - Any of the pagination controls could be moved anywhere on the page (for example we purposely moved the page size away from the rest of the pagination elements). + You can create a Custom Pagination by passing an Angular Custom Component and it must + implements BasePaginationComponent. Any of the pagination controls could be moved anywhere on the page (for + example we purposely moved the page size away from the rest of the pagination elements).
@@ -22,14 +25,23 @@

Page Size - +

- + - \ No newline at end of file + diff --git a/src/app/examples/grid-custom-pagination.component.ts b/src/app/examples/grid-custom-pagination.component.ts index afafba0a1..19e852987 100644 --- a/src/app/examples/grid-custom-pagination.component.ts +++ b/src/app/examples/grid-custom-pagination.component.ts @@ -21,7 +21,7 @@ function randomBetween(min: number, max: number): number { @Component({ templateUrl: './grid-custom-pagination.component.html', - providers: [AngularUtilService] + providers: [AngularUtilService], }) export class GridCustomPaginationComponent implements OnInit { pageSize = 50; @@ -32,7 +32,7 @@ export class GridCustomPaginationComponent implements OnInit { paginationPosition: 'bottom' | 'top' = 'top'; angularGrid!: AngularGridInstance; - constructor(protected readonly angularUtilService: AngularUtilService) { } + constructor(protected readonly angularUtilService: AngularUtilService) {} angularGridReady(angularGrid: AngularGridInstance) { this.angularGrid = angularGrid; @@ -49,18 +49,29 @@ export class GridCustomPaginationComponent implements OnInit { defineGrid() { this.columnDefinitions = [ { - id: 'title', name: 'Title', field: 'id', minWidth: 100, + id: 'title', + name: 'Title', + field: 'id', + minWidth: 100, sortable: true, filterable: true, formatter: (_row, _cell, val) => `Task ${val}`, - params: { useFormatterOuputToFilter: true } + params: { useFormatterOuputToFilter: true }, }, { - id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80, + id: 'description', + name: 'Description', + field: 'description', + filterable: true, + sortable: true, + minWidth: 80, type: FieldType.string, }, { - id: 'percentComplete', name: '% Complete', field: 'percentComplete', minWidth: 120, + id: 'percentComplete', + name: '% Complete', + field: 'percentComplete', + minWidth: 120, sortable: true, customTooltip: { position: 'center' }, formatter: Formatters.progressBar, @@ -72,56 +83,84 @@ export class GridCustomPaginationComponent implements OnInit { operator: OperatorType.rangeInclusive, // defaults to inclusive filterOptions: { hideSliderNumbers: false, // you can hide/show the slider numbers on both side - min: 0, step: 5 - } as SliderRangeOption - } + min: 0, + step: 5, + } as SliderRangeOption, + }, }, { - id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, minWidth: 75, width: 100, exportWithFormatter: true, - type: FieldType.date, filterable: true, filter: { model: Filters.compoundDate } + id: 'start', + name: 'Start', + field: 'start', + formatter: Formatters.dateIso, + sortable: true, + minWidth: 75, + width: 100, + exportWithFormatter: true, + type: FieldType.date, + filterable: true, + filter: { model: Filters.compoundDate }, }, { - id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, minWidth: 75, width: 120, exportWithFormatter: true, + id: 'finish', + name: 'Finish', + field: 'finish', + formatter: Formatters.dateIso, + sortable: true, + minWidth: 75, + width: 120, + exportWithFormatter: true, type: FieldType.date, filterable: true, filter: { model: Filters.dateRange, - } + }, }, { - id: 'duration', field: 'duration', name: 'Duration', maxWidth: 90, + id: 'duration', + field: 'duration', + name: 'Duration', + maxWidth: 90, type: FieldType.number, sortable: true, filterable: true, filter: { model: Filters.input, - operator: OperatorType.rangeExclusive // defaults to exclusive - } + operator: OperatorType.rangeExclusive, // defaults to exclusive + }, }, { - id: 'completed', name: 'Completed', field: 'completed', minWidth: 85, maxWidth: 90, + id: 'completed', + name: 'Completed', + field: 'completed', + minWidth: 85, + maxWidth: 90, formatter: Formatters.checkmarkMaterial, exportWithFormatter: true, // you can set this property in the column definition OR in the grid options, column def has priority over grid options filterable: true, filter: { - collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }], + collection: [ + { value: '', label: '' }, + { value: true, label: 'True' }, + { value: false, label: 'False' }, + ], model: Filters.singleSelect, - filterOptions: { autoAdjustDropHeight: true } as MultipleSelectOption - } - } + filterOptions: { autoAdjustDropHeight: true } as MultipleSelectOption, + }, + }, ]; this.gridOptions = { autoResize: { container: '#demo-container', - bottomPadding: this.paginationPosition === 'top' ? -1 : 38 // use a negative bottom padding since we've prepended custom pagination + bottomPadding: this.paginationPosition === 'top' ? -1 : 38, // use a negative bottom padding since we've prepended custom pagination }, enableExcelCopyBuffer: true, enableFiltering: true, customPaginationComponent: CustomPagerComponent, // load our Custom Pagination Component enablePagination: true, pagination: { - pageSize: this.pageSize + pageSize: this.pageSize, }, rowHeight: 40, }; @@ -140,13 +179,13 @@ export class GridCustomPaginationComponent implements OnInit { tempDataset.push({ id: i, title: 'Task ' + i, - description: (i % 5) ? 'desc ' + i : null, // also add some random to test NULL field + description: i % 5 ? 'desc ' + i : null, // also add some random to test NULL field duration: randomDuration, percentComplete: randomPercent, percentCompleteNumber: randomPercent, - start: (i % 4) ? null : new Date(randomYear, randomMonth, randomDay), // provide a Date format + start: i % 4 ? null : new Date(randomYear, randomMonth, randomDay), // provide a Date format finish: new Date(randomYear, randomMonth, randomDay), - completed: (randomPercent === 100) ? true : false, + completed: randomPercent === 100 ? true : false, }); } diff --git a/src/app/examples/grid-custom-tooltip.component.html b/src/app/examples/grid-custom-tooltip.component.html index 33c9a61b8..197d6d507 100644 --- a/src/app/examples/grid-custom-tooltip.component.html +++ b/src/app/examples/grid-custom-tooltip.component.html @@ -1,25 +1,29 @@

- {{title}} + {{ title }} - + code

-
+
- +
- + -
\ No newline at end of file +
diff --git a/src/app/examples/grid-custom-tooltip.component.ts b/src/app/examples/grid-custom-tooltip.component.ts index 17be65fdc..09b9a6807 100644 --- a/src/app/examples/grid-custom-tooltip.component.ts +++ b/src/app/examples/grid-custom-tooltip.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewEncapsulation, } from '@angular/core'; +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { @@ -56,7 +56,11 @@ export class GridCustomTooltipComponent implements OnInit { initializeGrid() { this.columnDefinitions = [ { - id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, + id: 'title', + name: 'Title', + field: 'title', + sortable: true, + type: FieldType.string, editor: { model: Editors.longText, required: true, @@ -75,9 +79,13 @@ export class GridCustomTooltipComponent implements OnInit { // when using async, the `formatter` will contain the loading spinner // you will need to provide an `asyncPost` function returning a Promise and also `asyncPostFormatter` formatter to display the result once the Promise resolves formatter: () => `
loading...
`, - asyncProcess: () => new Promise(resolve => { - window.setTimeout(() => resolve({ ratio: Math.random() * 10 / 10, lifespan: Math.random() * 100 }), this.serverApiDelay); - }), + asyncProcess: () => + new Promise((resolve) => { + window.setTimeout( + () => resolve({ ratio: (Math.random() * 10) / 10, lifespan: Math.random() * 100 }), + this.serverApiDelay + ); + }), asyncPostFormatter: this.tooltipTaskAsyncFormatter as Formatter, // optional conditional usability callback @@ -85,7 +93,11 @@ export class GridCustomTooltipComponent implements OnInit { }, }, { - id: 'duration', name: 'Duration', field: 'duration', sortable: true, filterable: true, + id: 'duration', + name: 'Duration', + field: 'duration', + sortable: true, + filterable: true, editor: { model: Editors.float, // required: true, @@ -94,11 +106,15 @@ export class GridCustomTooltipComponent implements OnInit { maxValue: 10000, alwaysSaveOnEnterKey: true, }, - formatter: (row, cell, value) => value > 1 ? `${value} days` : `${value} day`, + formatter: (row, cell, value) => (value > 1 ? `${value} days` : `${value} day`), type: FieldType.number, }, { - id: 'desc', name: `Description`, field: 'description', width: 100, filterable: true, + id: 'desc', + name: `Description`, + field: 'description', + width: 100, + filterable: true, editor: { model: Editors.longText, required: true, @@ -106,7 +122,8 @@ export class GridCustomTooltipComponent implements OnInit { minLength: 5, maxLength: 255, }, - formatter: (row: number, cell: number, value: any, column: Column, dataContext) => `${value || ''}`, + formatter: (row: number, cell: number, value: any, column: Column, dataContext) => + `${value || ''}`, // define tooltip options here OR for the entire grid via the grid options (cell tooltip options will have precedence over grid options) customTooltip: { useRegularTooltip: true, // note regular tooltip will try to find a "title" attribute in the cell formatter (it won't work without a cell formatter) @@ -114,7 +131,11 @@ export class GridCustomTooltipComponent implements OnInit { }, }, { - id: 'desc2', name: `Description 2`, field: 'description', width: 100, filterable: true, + id: 'desc2', + name: `Description 2`, + field: 'description', + width: 100, + filterable: true, editor: { model: Editors.longText, required: true, @@ -122,7 +143,8 @@ export class GridCustomTooltipComponent implements OnInit { minLength: 5, maxLength: 255, }, - formatter: (row: number, cell: number, value: any, column: Column, dataContext) => `${value || ''}`, + formatter: (row: number, cell: number, value: any, column: Column, dataContext) => + `${value || ''}`, // define tooltip options here OR for the entire grid via the grid options (cell tooltip options will have precedence over grid options) customTooltip: { useRegularTooltip: true, // note regular tooltip will try to find a "title" attribute in the cell formatter (it won't work without a cell formatter) @@ -133,7 +155,9 @@ export class GridCustomTooltipComponent implements OnInit { }, }, { - id: 'cost', name: 'Cost', field: 'cost', + id: 'cost', + name: 'Cost', + field: 'cost', width: 90, sortable: true, filterable: true, @@ -141,7 +165,13 @@ export class GridCustomTooltipComponent implements OnInit { // formatter: Formatters.dollar, formatter: Formatters.multiple, // params: { formatters: [Formatters.dollar, (row, cell, value) => `${value || ''}`] }, - params: { formatters: [Formatters.dollar, (_row: number, _cell: number, value: any) => `${value || ''}`] as Formatter[] }, + params: { + formatters: [ + Formatters.dollar, + (_row: number, _cell: number, value: any) => + `${value || ''}`, + ] as Formatter[], + }, customTooltip: { useRegularTooltip: true, useRegularTooltipFromFormatterOnly: true, @@ -149,7 +179,10 @@ export class GridCustomTooltipComponent implements OnInit { type: FieldType.number, }, { - id: 'percentComplete', name: '% Complete', field: 'percentComplete', type: FieldType.number, + id: 'percentComplete', + name: '% Complete', + field: 'percentComplete', + type: FieldType.number, editor: { model: Editors.slider, minValue: 0, @@ -157,20 +190,26 @@ export class GridCustomTooltipComponent implements OnInit { // editorOptions: { hideSliderNumber: true }, }, formatter: Formatters.percentCompleteBar, - sortable: true, filterable: true, + sortable: true, + filterable: true, filter: { model: Filters.slider, operator: '>=' }, customTooltip: { position: 'center', - formatter: (_row, _cell, value) => typeof value === 'string' && value.includes('%') ? value : `${value}%`, + formatter: (_row, _cell, value) => (typeof value === 'string' && value.includes('%') ? value : `${value}%`), headerFormatter: undefined, - headerRowFormatter: undefined + headerRowFormatter: undefined, }, }, { - id: 'start', name: 'Start', field: 'start', sortable: true, + id: 'start', + name: 'Start', + field: 'start', + sortable: true, // formatter: Formatters.dateIso, - type: FieldType.date, outputType: FieldType.dateIso, - filterable: true, filter: { model: Filters.compoundDate }, + type: FieldType.date, + outputType: FieldType.dateIso, + filterable: true, + filter: { model: Filters.compoundDate }, formatter: Formatters.dateIso, editor: { model: Editors.date }, // we can delay a tooltip via the async process @@ -179,19 +218,25 @@ export class GridCustomTooltipComponent implements OnInit { formatter: () => ``, // return empty so it won't show any pre-tooltip // 2- delay the opening by a simple Promise and `setTimeout` - asyncProcess: () => new Promise(resolve => { - window.setTimeout(() => resolve({}), this.serverApiDelay); // delayed by half a second - }), + asyncProcess: () => + new Promise((resolve) => { + window.setTimeout(() => resolve({}), this.serverApiDelay); // delayed by half a second + }), asyncPostFormatter: this.tooltipFormatter.bind(this) as Formatter, }, }, { - id: 'finish', name: 'Finish', field: 'finish', sortable: true, - editor: { model: Editors.date, editorOptions: { range: { min: 'today' } }, }, + id: 'finish', + name: 'Finish', + field: 'finish', + sortable: true, + editor: { model: Editors.date, editorOptions: { range: { min: 'today' } } }, // formatter: Formatters.dateIso, - type: FieldType.date, outputType: FieldType.dateIso, + type: FieldType.date, + outputType: FieldType.dateIso, formatter: Formatters.dateIso, - filterable: true, filter: { model: Filters.dateRange }, + filterable: true, + filter: { model: Filters.dateRange }, // you could disable the custom/regular tooltip via either of the following 2 options disableTooltip: true, // customTooltip: { @@ -199,20 +244,31 @@ export class GridCustomTooltipComponent implements OnInit { // }, }, { - id: 'effortDriven', name: 'Effort Driven', field: 'effortDriven', - width: 80, minWidth: 20, maxWidth: 100, + id: 'effortDriven', + name: 'Effort Driven', + field: 'effortDriven', + width: 80, + minWidth: 20, + maxWidth: 100, cssClass: 'cell-effort-driven', sortable: true, filterable: true, filter: { - collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }], - model: Filters.singleSelect + collection: [ + { value: '', label: '' }, + { value: true, label: 'True' }, + { value: false, label: 'False' }, + ], + model: Filters.singleSelect, }, exportWithFormatter: false, formatter: Formatters.checkmarkMaterial, }, { - id: 'prerequisites', name: 'Prerequisites', field: 'prerequisites', filterable: true, + id: 'prerequisites', + name: 'Prerequisites', + field: 'prerequisites', + filterable: true, formatter: (_row, _cell, value) => { if (value && Array.isArray(value)) { const values = value.map((val) => `Task ${val}`).join(', '); @@ -236,7 +292,9 @@ export class GridCustomTooltipComponent implements OnInit { // OR 2- use a Promise collectionAsync: new Promise((resolve) => { window.setTimeout(() => { - resolve(Array.from(Array(this.dataset.length).keys()).map(k => ({ value: k, label: k, prefix: 'Task', suffix: 'days' }))); + resolve( + Array.from(Array(this.dataset.length).keys()).map((k) => ({ value: k, label: k, prefix: 'Task', suffix: 'days' })) + ); }, 500); }), customStructure: { @@ -245,7 +303,7 @@ export class GridCustomTooltipComponent implements OnInit { labelPrefix: 'prefix', }, collectionOptions: { - separatorBetweenTextLabels: ' ' + separatorBetweenTextLabels: ' ', }, model: Editors.multipleSelect, }, @@ -253,7 +311,7 @@ export class GridCustomTooltipComponent implements OnInit { // collectionAsync: fetch(URL_SAMPLE_COLLECTION_DATA), collectionAsync: new Promise((resolve) => { window.setTimeout(() => { - resolve(Array.from(Array(this.dataset.length).keys()).map(k => ({ value: k, label: `Task ${k}` }))); + resolve(Array.from(Array(this.dataset.length).keys()).map((k) => ({ value: k, label: `Task ${k}` }))); }); }), customStructure: { @@ -262,15 +320,21 @@ export class GridCustomTooltipComponent implements OnInit { labelPrefix: 'prefix', }, collectionOptions: { - separatorBetweenTextLabels: ' ' + separatorBetweenTextLabels: ' ', }, model: Filters.multipleSelect, operator: OperatorType.inContains, }, }, { - id: 'action', name: 'Action', field: 'action', width: 70, minWidth: 70, maxWidth: 70, - formatter: () => `
`, + id: 'action', + name: 'Action', + field: 'action', + width: 70, + minWidth: 70, + maxWidth: 70, + formatter: () => + `
`, excludeFromExport: true, cellMenu: { hideCloseButton: false, @@ -278,7 +342,9 @@ export class GridCustomTooltipComponent implements OnInit { commandItems: [ // array of command item objects, you can also use the "positionOrder" that will be used to sort the items in the list { - command: 'command2', title: 'Command 2', positionOrder: 62, + command: 'command2', + title: 'Command 2', + positionOrder: 62, // you can use the "action" callback and/or use "onCallback" callback from the grid options, they both have the same arguments action: (_e, args) => { console.log(args.dataContext, args.column); @@ -287,16 +353,20 @@ export class GridCustomTooltipComponent implements OnInit { // only enable command when the task is not completed itemUsabilityOverride: (args) => { return !args.dataContext.completed; - } + }, }, { command: 'command1', title: 'Command 1', cssClass: 'orange', positionOrder: 61 }, { - command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'mdi mdi-close', cssClass: 'red', textCssClass: 'bold', + command: 'delete-row', + title: 'Delete Row', + positionOrder: 64, + iconCssClass: 'mdi mdi-close', + cssClass: 'red', + textCssClass: 'bold', // only show command to 'Delete Row' when the task is not completed itemVisibilityOverride: (args) => { return !args.dataContext.completed; - } + }, }, // you can pass divider as a string or an object with a boolean (if sorting by position, then use the object) // note you should use the "divider" string only when items array is already sorted and positionOrder are not specified @@ -308,9 +378,9 @@ export class GridCustomTooltipComponent implements OnInit { iconCssClass: 'mdi mdi-help-circle-outline', positionOrder: 66, }, - { command: 'something', title: 'Disabled Command', disabled: true, positionOrder: 67, } + { command: 'something', title: 'Disabled Command', disabled: true, positionOrder: 67 }, ], - } + }, }, ]; @@ -326,7 +396,7 @@ export class GridCustomTooltipComponent implements OnInit { enableCellNavigation: true, enableExcelExport: true, excelExportOptions: { - exportWithFormatter: true + exportWithFormatter: true, }, // Custom Tooltip options can be defined in a Column or Grid Options or a mixed of both (first options found wins) externalResources: [new SlickCustomTooltip(), new ExcelExportService()], @@ -334,7 +404,7 @@ export class GridCustomTooltipComponent implements OnInit { formatter: this.tooltipFormatter.bind(this) as Formatter, headerFormatter: this.headerFormatter, headerRowFormatter: this.headerRowFormatter, - usabilityOverride: (args) => (args.cell !== 0 && args?.column?.id !== 'action'), // don't show on first/last columns + usabilityOverride: (args) => args.cell !== 0 && args?.column?.id !== 'action', // don't show on first/last columns // hideArrow: true, // defaults to False }, presets: { @@ -344,7 +414,7 @@ export class GridCustomTooltipComponent implements OnInit { enableFiltering: true, rowSelectionOptions: { // True (Single Selection), False (Multiple Selections) - selectActiveRow: false + selectActiveRow: false, }, showCustomFooter: true, enableCheckboxSelector: true, @@ -381,10 +451,10 @@ export class GridCustomTooltipComponent implements OnInit { const tmpArray = []; for (let i = 0; i < itemCount; i++) { const randomYear = 2000 + Math.floor(Math.random() * 10); - const randomFinishYear = (new Date().getFullYear() - 3) + Math.floor(Math.random() * 10); // use only years not lower than 3 years ago + const randomFinishYear = new Date().getFullYear() - 3 + Math.floor(Math.random() * 10); // use only years not lower than 3 years ago const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); - const randomFinish = new Date(randomFinishYear, (randomMonth + 1), randomDay); + const randomDay = Math.floor(Math.random() * 29); + const randomFinish = new Date(randomFinishYear, randomMonth + 1, randomDay); tmpArray[i] = { id: i, @@ -394,9 +464,9 @@ export class GridCustomTooltipComponent implements OnInit { percentComplete: Math.floor(Math.random() * (100 - 5 + 1) + 5), start: new Date(randomYear, randomMonth, randomDay), finish: randomFinish < new Date() ? '' : randomFinish, // make sure the random date is earlier than today - cost: (i % 33 === 0) ? null : Math.round(Math.random() * 10000) / 100, - effortDriven: (i % 5 === 0), - prerequisites: (i % 2 === 0) && i !== 0 && i < 50 ? [i, i - 1] : [], + cost: i % 33 === 0 ? null : Math.round(Math.random() * 10000) / 100, + effortDriven: i % 5 === 0, + prerequisites: i % 2 === 0 && i !== 0 && i < 50 ? [i, i - 1] : [], }; } @@ -440,7 +510,14 @@ export class GridCustomTooltipComponent implements OnInit { tooltipFormatter(row: number, cell: number, value: any, column: Column, dataContext: any, grid: SlickGrid) { const tooltipTitle = 'Custom Tooltip'; - const effortDrivenHtml = Formatters.checkmarkMaterial(row, cell, dataContext.effortDriven, column, dataContext, grid) as HTMLElement; + const effortDrivenHtml = Formatters.checkmarkMaterial( + row, + cell, + dataContext.effortDriven, + column, + dataContext, + grid + ) as HTMLElement; return `
${tooltipTitle}
Id:
${dataContext.id}
@@ -455,7 +532,14 @@ export class GridCustomTooltipComponent implements OnInit { // use a 2nd Formatter to get the percent completion // any properties provided from the `asyncPost` will end up in the `__params` property (unless a different prop name is provided via `asyncParamsPropName`) - const completionBar = Formatters.percentCompleteBarWithText(row, cell, dataContext.percentComplete, column, dataContext, grid) as HTMLElement; + const completionBar = Formatters.percentCompleteBarWithText( + row, + cell, + dataContext.percentComplete, + column, + dataContext, + grid + ) as HTMLElement; const out = `
${tooltipTitle}
Completion:
${completionBar.outerHTML || ''}
Lifespan:
${dataContext.__params.lifespan.toFixed(2)}
diff --git a/src/app/examples/grid-drag-recycle.component.html b/src/app/examples/grid-drag-recycle.component.html index f6a9f2e3f..c04ef7ee9 100644 --- a/src/app/examples/grid-drag-recycle.component.html +++ b/src/app/examples/grid-drag-recycle.component.html @@ -2,9 +2,11 @@

Example 41: Drag & Drop - + code @@ -21,29 +23,28 @@

- - -
- -
- + + +
+ +
+
-
- Recycle Bin -
+
Recycle Bin
diff --git a/src/app/examples/grid-drag-recycle.component.ts b/src/app/examples/grid-drag-recycle.component.ts index 8ec8d1a4f..e9fa4f834 100644 --- a/src/app/examples/grid-drag-recycle.component.ts +++ b/src/app/examples/grid-drag-recycle.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewEncapsulation, } from '@angular/core'; +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { AngularGridInstance, Column, @@ -46,8 +46,8 @@ export class GridDragRecycleComponent implements OnInit { field: 'name', width: 300, cssClass: 'cell-title', - editor: { model: Editors.Text, }, - validator: this.requiredFieldValidator + editor: { model: Editors.Text }, + validator: this.requiredFieldValidator, }, { id: 'complete', @@ -58,7 +58,7 @@ export class GridDragRecycleComponent implements OnInit { cannotTriggerInsert: true, formatter: Formatters.checkmarkMaterial, editor: { model: Editors.Checkbox }, - } + }, ]; this.gridOptions = { @@ -71,7 +71,7 @@ export class GridDragRecycleComponent implements OnInit { enableRowMoveManager: true, rowSelectionOptions: { // True (Single Selection), False (Multiple Selections) - selectActiveRow: false + selectActiveRow: false, }, rowMoveManager: { columnIndexPosition: 0, @@ -92,11 +92,11 @@ export class GridDragRecycleComponent implements OnInit { { id: 0, name: 'Make a list', complete: true }, { id: 1, name: 'Check it twice', complete: false }, { id: 2, name: `Find out who's naughty`, complete: false }, - { id: 3, name: `Find out who's nice`, complete: false } + { id: 3, name: `Find out who's nice`, complete: false }, ]; } - onBeforeMoveRows(e: MouseEvent | TouchEvent, data: { rows: number[]; insertBefore: number; }) { + onBeforeMoveRows(e: MouseEvent | TouchEvent, data: { rows: number[]; insertBefore: number }) { for (const dataRow of data.rows) { // no point in moving before or after itself if (dataRow === data.insertBefore || dataRow === data.insertBefore - 1) { @@ -107,7 +107,7 @@ export class GridDragRecycleComponent implements OnInit { return true; } - onMoveRows(_e: MouseEvent | TouchEvent, args: { rows: number[]; insertBefore: number; }) { + onMoveRows(_e: MouseEvent | TouchEvent, args: { rows: number[]; insertBefore: number }) { const extractedRows: any[] = []; const rows = args.rows; const insertBefore = args.insertBefore; @@ -168,7 +168,7 @@ export class GridDragRecycleComponent implements OnInit { let selectedRows: number[] = this.angularGrid.slickGrid?.getSelectedRows() || []; - if (!selectedRows.length || selectedRows.findIndex(row => row === row) === -1) { + if (!selectedRows.length || selectedRows.findIndex((row) => row === row) === -1) { selectedRows = [row]; this.angularGrid.slickGrid?.setSelectedRows(selectedRows); } diff --git a/src/app/examples/grid-draggrouping.component.html b/src/app/examples/grid-draggrouping.component.html index 27ee3b0b7..fe5fd6a88 100644 --- a/src/app/examples/grid-draggrouping.component.html +++ b/src/app/examples/grid-draggrouping.component.html @@ -1,15 +1,16 @@

- {{title}} - - + code @@ -25,8 +26,11 @@

- -

- - - - -
@@ -78,12 +97,18 @@

-
- - +
@@ -95,11 +120,13 @@

- + - \ No newline at end of file + diff --git a/src/app/examples/grid-draggrouping.component.ts b/src/app/examples/grid-draggrouping.component.ts index 7943bf7e0..02f9e7266 100644 --- a/src/app/examples/grid-draggrouping.component.ts +++ b/src/app/examples/grid-draggrouping.component.ts @@ -20,7 +20,7 @@ import { } from './../modules/angular-slickgrid'; @Component({ - templateUrl: './grid-draggrouping.component.html' + templateUrl: './grid-draggrouping.component.html', }) export class GridDraggableGroupingComponent implements OnInit, OnDestroy { private _darkMode = false; @@ -79,23 +79,28 @@ export class GridDraggableGroupingComponent implements OnInit, OnDestroy { defineGrid() { this.columnDefinitions = [ { - id: 'title', name: 'Title', field: 'title', columnGroup: 'Common Factor', - width: 70, minWidth: 50, + id: 'title', + name: 'Title', + field: 'title', + columnGroup: 'Common Factor', + width: 70, + minWidth: 50, cssClass: 'cell-title', filterable: true, sortable: true, grouping: { getter: 'title', formatter: (g) => `Title: ${g.value} (${g.count} items)`, - aggregators: [ - new Aggregators.Sum('cost') - ], + aggregators: [new Aggregators.Sum('cost')], aggregateCollapsed: false, - collapsed: false - } + collapsed: false, + }, }, { - id: 'duration', name: 'Duration', field: 'duration', columnGroup: 'Common Factor', + id: 'duration', + name: 'Duration', + field: 'duration', + columnGroup: 'Common Factor', width: 70, sortable: true, filterable: true, @@ -114,18 +119,20 @@ export class GridDraggableGroupingComponent implements OnInit, OnDestroy { getter: 'duration', formatter: (g) => `Duration: ${g.value} (${g.count} items)`, comparer: (a, b) => { - return this.durationOrderByCount ? (a.count - b.count) : SortComparers.numeric(a.value, b.value, SortDirectionNumber.asc); + return this.durationOrderByCount + ? a.count - b.count + : SortComparers.numeric(a.value, b.value, SortDirectionNumber.asc); }, - aggregators: [ - new Aggregators.Sum('duration'), - new Aggregators.Sum('cost') - ], + aggregators: [new Aggregators.Sum('duration'), new Aggregators.Sum('cost')], aggregateCollapsed: false, - collapsed: false - } + collapsed: false, + }, }, { - id: 'start', name: 'Start', field: 'start', columnGroup: 'Period', + id: 'start', + name: 'Start', + field: 'start', + columnGroup: 'Period', minWidth: 60, sortable: true, filterable: true, @@ -137,15 +144,16 @@ export class GridDraggableGroupingComponent implements OnInit, OnDestroy { grouping: { getter: 'start', formatter: (g) => `Start: ${g.value} (${g.count} items)`, - aggregators: [ - new Aggregators.Sum('cost') - ], + aggregators: [new Aggregators.Sum('cost')], aggregateCollapsed: false, - collapsed: false - } + collapsed: false, + }, }, { - id: 'finish', name: 'Finish', field: 'finish', columnGroup: 'Period', + id: 'finish', + name: 'Finish', + field: 'finish', + columnGroup: 'Period', minWidth: 60, sortable: true, filterable: true, @@ -157,15 +165,16 @@ export class GridDraggableGroupingComponent implements OnInit, OnDestroy { grouping: { getter: 'finish', formatter: (g) => `Finish: ${g.value} (${g.count} items)`, - aggregators: [ - new Aggregators.Sum('cost') - ], + aggregators: [new Aggregators.Sum('cost')], aggregateCollapsed: false, - collapsed: false - } + collapsed: false, + }, }, { - id: 'cost', name: 'Cost', field: 'cost', columnGroup: 'Analysis', + id: 'cost', + name: 'Cost', + field: 'cost', + columnGroup: 'Analysis', width: 90, sortable: true, filterable: true, @@ -176,16 +185,18 @@ export class GridDraggableGroupingComponent implements OnInit, OnDestroy { grouping: { getter: 'cost', formatter: (g) => `Cost: ${g.value} (${g.count} items)`, - aggregators: [ - new Aggregators.Sum('cost') - ], + aggregators: [new Aggregators.Sum('cost')], aggregateCollapsed: true, - collapsed: true - } + collapsed: true, + }, }, { - id: 'percentComplete', name: '% Complete', field: 'percentComplete', columnGroup: 'Analysis', - minWidth: 70, width: 90, + id: 'percentComplete', + name: '% Complete', + field: 'percentComplete', + columnGroup: 'Analysis', + minWidth: 70, + width: 90, formatter: Formatters.percentCompleteBar, type: FieldType.number, filterable: true, @@ -195,41 +206,45 @@ export class GridDraggableGroupingComponent implements OnInit, OnDestroy { grouping: { getter: 'percentComplete', formatter: (g) => `% Complete: ${g.value} (${g.count} items)`, - aggregators: [ - new Aggregators.Sum('cost') - ], + aggregators: [new Aggregators.Sum('cost')], aggregateCollapsed: false, - collapsed: false + collapsed: false, }, - params: { groupFormatterPrefix: 'Avg: ' } + params: { groupFormatterPrefix: 'Avg: ' }, }, { - id: 'effortDriven', name: 'Effort-Driven', field: 'effortDriven', columnGroup: 'Analysis', - width: 80, minWidth: 20, maxWidth: 100, + id: 'effortDriven', + name: 'Effort-Driven', + field: 'effortDriven', + columnGroup: 'Analysis', + width: 80, + minWidth: 20, + maxWidth: 100, cssClass: 'cell-effort-driven', sortable: true, filterable: true, filter: { - collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }], - model: Filters.singleSelect + collection: [ + { value: '', label: '' }, + { value: true, label: 'True' }, + { value: false, label: 'False' }, + ], + model: Filters.singleSelect, }, formatter: Formatters.checkmarkMaterial, grouping: { getter: 'effortDriven', formatter: (g) => `Effort-Driven: ${g.value ? 'True' : 'False'} (${g.count} items)`, - aggregators: [ - new Aggregators.Sum('duration'), - new Aggregators.Sum('cost') - ], - collapsed: false - } - } + aggregators: [new Aggregators.Sum('duration'), new Aggregators.Sum('cost')], + collapsed: false, + }, + }, ]; this.gridOptions = { autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableDraggableGrouping: true, autoEdit: true, // true single click (false for double-click) @@ -254,7 +269,7 @@ export class GridDraggableGroupingComponent implements OnInit, OnDestroy { // filterTypingDebounce: 250, enableSorting: true, textExportOptions: { - sanitizeDataExport: true + sanitizeDataExport: true, }, gridMenu: { onCommand: (e, args) => { @@ -271,7 +286,7 @@ export class GridDraggableGroupingComponent implements OnInit, OnDestroy { sortAscIconCssClass: 'mdi mdi-arrow-up', sortDescIconCssClass: 'mdi mdi-arrow-down', onGroupChanged: (e, args) => this.onGroupChanged(args), - onExtensionRegistered: (extension) => this.draggableGroupingPlugin = extension, + onExtensionRegistered: (extension) => (this.draggableGroupingPlugin = extension), }, darkMode: this._darkMode, enableTextExport: true, @@ -289,7 +304,7 @@ export class GridDraggableGroupingComponent implements OnInit, OnDestroy { for (let i = 0; i < rowCount; i++) { const randomYear = 2000 + Math.floor(Math.random() * 10); const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); + const randomDay = Math.floor(Math.random() * 29); const randomPercent = Math.round(Math.random() * 100); const randomCost = Math.round(Math.random() * 10000) / 100; @@ -301,9 +316,9 @@ export class GridDraggableGroupingComponent implements OnInit, OnDestroy { percentComplete: randomPercent, percentCompleteNumber: randomPercent, start: new Date(randomYear, randomMonth, randomDay), - finish: new Date(randomYear, (randomMonth + 1), randomDay), - cost: (i % 33 === 0) ? -randomCost : randomCost, - effortDriven: (i % 5 === 0) + finish: new Date(randomYear, randomMonth + 1, randomDay), + cost: i % 33 === 0 ? -randomCost : randomCost, + effortDriven: i % 5 === 0, }; } this.dataset = tmpData; @@ -322,7 +337,7 @@ export class GridDraggableGroupingComponent implements OnInit, OnDestroy { } clearGroupingSelects() { - this.selectedGroupingFields.forEach((g, i) => this.selectedGroupingFields[i] = ''); + this.selectedGroupingFields.forEach((g, i) => (this.selectedGroupingFields[i] = '')); } collapseAllGroups() { @@ -336,7 +351,7 @@ export class GridDraggableGroupingComponent implements OnInit, OnDestroy { exportToExcel() { this.excelExportService.exportToExcel({ filename: 'Export', - format: FileType.xlsx + format: FileType.xlsx, }); } @@ -376,14 +391,14 @@ export class GridDraggableGroupingComponent implements OnInit, OnDestroy { } } - onGroupChanged(change: { caller?: string; groupColumns: Grouping[]; }) { + onGroupChanged(change: { caller?: string; groupColumns: Grouping[] }) { // the "caller" property might not be in the SlickGrid core lib yet, reference PR https://github.com/6pac/SlickGrid/pull/303 - const caller = change && change.caller || []; - const groups = change && change.groupColumns || []; + const caller = (change && change.caller) || []; + const groups = (change && change.groupColumns) || []; if (Array.isArray(this.selectedGroupingFields) && Array.isArray(groups) && groups.length > 0) { // update all Group By select dropdown - this.selectedGroupingFields.forEach((g, i) => this.selectedGroupingFields[i] = groups[i] && groups[i].getter || ''); + this.selectedGroupingFields.forEach((g, i) => (this.selectedGroupingFields[i] = (groups[i] && groups[i].getter) || '')); } else if (groups.length === 0 && caller === 'remove-group') { this.clearGroupingSelects(); } diff --git a/src/app/examples/grid-editor.component.html b/src/app/examples/grid-editor.component.html index 75ce5e583..64a207877 100644 --- a/src/app/examples/grid-editor.component.html +++ b/src/app/examples/grid-editor.component.html @@ -1,10 +1,12 @@

- {{title}} + {{ title }} - + code @@ -16,12 +18,19 @@

@@ -31,8 +40,13 @@

Undo last edit(s) @@ -45,20 +59,27 @@

- +

- - @@ -67,24 +88,22 @@

-
- Updated Item: {{updatedObject | json}} -
-
- Updated Item: {{alertWarning}} -
+
Updated Item: {{ updatedObject | json }}
+
Updated Item: {{ alertWarning }}
- +
- \ No newline at end of file + diff --git a/src/app/examples/grid-editor.component.ts b/src/app/examples/grid-editor.component.ts index 289e811fc..a7f903732 100644 --- a/src/app/examples/grid-editor.component.ts +++ b/src/app/examples/grid-editor.component.ts @@ -61,7 +61,7 @@ const taskFormatter: Formatter = (_row, _cell, value) => { return ''; }; @Component({ - templateUrl: './grid-editor.component.html' + templateUrl: './grid-editor.component.html', }) export class GridEditorComponent implements OnInit { title = 'Example 3: Editors / Delete'; @@ -96,7 +96,10 @@ export class GridEditorComponent implements OnInit { selectedLanguage = 'en'; duplicateTitleHeaderCount = 1; - constructor(private http: HttpClient, private translate: TranslateService) { } + constructor( + private http: HttpClient, + private translate: TranslateService + ) {} ngOnInit() { this.prepareGrid(); @@ -125,8 +128,9 @@ export class GridEditorComponent implements OnInit { this.alertWarning = `Editing: ${args.dataContext.title}`; this.angularGrid.gridService.highlightRow(args.row, 1500); this.angularGrid.gridService.setSelectedRow(args.row); - } - }, { + }, + }, + { id: 'delete', field: 'id', excludeFromColumnPicker: true, @@ -143,7 +147,8 @@ export class GridEditorComponent implements OnInit { this.alertWarning = `Deleting: ${args.dataContext.title}`; } */ - }, { + }, + { id: 'title', name: 'Title', field: 'title', @@ -163,19 +168,19 @@ export class GridEditorComponent implements OnInit { /* you can change button texts (defaults to "Cancel", "Save") */ // cancel: 'Close', // save: 'Done' - /* or with translations (defaults to "CANCEL", "SAVE") */ // cancelKey: 'CANCEL', // saveKey: 'SAVE' - } + }, } as LongTextEditorOption, validator: myCustomTitleValidator, }, onCellChange: (e: Event, args: OnEventArgs) => { console.log(args); this.alertWarning = `Updated Title: ${args.dataContext.title}`; - } - }, { + }, + }, + { id: 'title2', name: 'Title, Custom Editor', field: 'title', @@ -193,7 +198,8 @@ export class GridEditorComponent implements OnInit { model: CustomInputFilter, placeholder: '🔎︎ custom', }, - }, { + }, + { id: 'duration', name: 'Duration (days)', field: 'duration', @@ -225,7 +231,8 @@ export class GridEditorComponent implements OnInit { params: { decimalPlaces: 2 }, }, */ - }, { + }, + { id: 'complete', name: '% Complete', field: 'percentComplete', @@ -238,22 +245,26 @@ export class GridEditorComponent implements OnInit { // We can also add HTML text to be rendered (any bad script will be sanitized) but we have to opt-in, else it will be sanitized enableRenderHtml: true, - collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: k, symbol: '' })), + collection: Array.from(Array(101).keys()).map((k) => ({ + value: k, + label: k, + symbol: '', + })), customStructure: { value: 'value', label: 'label', - labelSuffix: 'symbol' + labelSuffix: 'symbol', }, // collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: k, labelSuffix: '%' })), collectionSortBy: { property: 'label', - sortDesc: true + sortDesc: true, }, collectionFilterBy: { property: 'value', value: 0, - operator: OperatorType.notEqual + operator: OperatorType.notEqual, }, // you could also provide a collection override to filter/sort based on the item dataContext or whatever else // collectionOverride: (updatedCollection, args) => { @@ -261,8 +272,8 @@ export class GridEditorComponent implements OnInit { // return updatedCollection.filter((col) => args.dataContext.id % 2 ? col.value < 50 : col.value >= 50); // }, editorOptions: { - maxHeight: 400 - } as MultipleSelectOption + maxHeight: 400, + } as MultipleSelectOption, }, params: { formatters: [Formatters.collectionEditor, Formatters.percentCompleteBar], @@ -273,7 +284,8 @@ export class GridEditorComponent implements OnInit { // } // return { valid: true, msg: '' }; // } - }, { + }, + { id: 'start', name: 'Start', field: 'start', @@ -282,7 +294,7 @@ export class GridEditorComponent implements OnInit { filter: { model: Filters.compoundDate }, formatter: Formatters.multiple, params: { - formatters: [Formatters.complexObject, Formatters.dateIso] + formatters: [Formatters.complexObject, Formatters.dateIso], }, exportWithFormatter: true, sortable: true, @@ -290,7 +302,8 @@ export class GridEditorComponent implements OnInit { editor: { model: Editors.date, }, - }, { + }, + { id: 'finish', name: 'Finish', field: 'finish', @@ -300,7 +313,7 @@ export class GridEditorComponent implements OnInit { filter: { model: Filters.compoundDate }, formatter: Formatters.dateIso, exportWithFormatter: true, - type: FieldType.date, // dataset cell input format + type: FieldType.date, // dataset cell input format // outputType: FieldType.dateUs, // date picker format saveOutputType: FieldType.dateUtc, // save output date formattype: FieldType.date, editor: { @@ -318,10 +331,13 @@ export class GridEditorComponent implements OnInit { // month: 6 - 1, // Note: JS Date month (only) is zero index based, so June is 6-1 => 5 // year: 2021 // } - } as VanillaCalendarOption + } as VanillaCalendarOption, }, - }, { - id: 'cityOfOrigin', name: 'City of Origin', field: 'cityOfOrigin', + }, + { + id: 'cityOfOrigin', + name: 'City of Origin', + field: 'cityOfOrigin', filterable: true, minWidth: 100, editor: { @@ -340,15 +356,15 @@ export class GridEditorComponent implements OnInit { const clearFunction = (functionName: string) => { delete (window as any)[functionName]; - } + }; const processJSONPResponse = (data: any) => { updateCallback(data); clearFunction('processJSONPResponse'); - } + }; (window as any).processJSONPResponse = processJSONPResponse; const script = document.createElement('script'); - script.src = `http://gd.geobytes.com/AutoCompleteCity?q=${searchText}&callback=processJSONPResponse` + script.src = `http://gd.geobytes.com/AutoCompleteCity?q=${searchText}&callback=processJSONPResponse`; document.getElementsByTagName('head')[0].appendChild(script); // fetchJsonp(`http://gd.geobytes.com/AutoCompleteCity?q=${searchText}`) @@ -379,9 +395,12 @@ export class GridEditorComponent implements OnInit { .catch((ex) => console.log('invalid JSONP response', ex)); }, } as AutocompleterOption, - } - }, { - id: 'countryOfOrigin', name: 'Country of Origin', field: 'countryOfOrigin', + }, + }, + { + id: 'countryOfOrigin', + name: 'Country of Origin', + field: 'countryOfOrigin', formatter: Formatters.complexObject, exportWithFormatter: true, dataKey: 'code', @@ -400,9 +419,12 @@ export class GridEditorComponent implements OnInit { model: Filters.autocompleter, customStructure: { label: 'name', value: 'code' }, collectionAsync: this.http.get(URL_COUNTRIES_COLLECTION), - } - }, { - id: 'countryOfOriginName', name: 'Country of Origin Name', field: 'countryOfOriginName', + }, + }, + { + id: 'countryOfOriginName', + name: 'Country of Origin Name', + field: 'countryOfOriginName', filterable: true, sortable: true, minWidth: 100, @@ -413,8 +435,9 @@ export class GridEditorComponent implements OnInit { filter: { model: Filters.autocompleter, collectionAsync: this.http.get(URL_COUNTRY_NAMES), - } - }, { + }, + }, + { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', @@ -423,13 +446,18 @@ export class GridEditorComponent implements OnInit { type: FieldType.boolean, filter: { model: Filters.singleSelect, - collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }], + collection: [ + { value: '', label: '' }, + { value: true, label: 'True' }, + { value: false, label: 'False' }, + ], }, formatter: Formatters.checkmarkMaterial, editor: { model: Editors.checkbox, }, - }, { + }, + { id: 'prerequisites', name: 'Prerequisites', field: 'prerequisites', @@ -442,12 +470,12 @@ export class GridEditorComponent implements OnInit { type: FieldType.string, editor: { placeholder: 'choose option', - collectionAsync: this.http.get<{ value: string; label: string; }[]>(URL_SAMPLE_COLLECTION_DATA), + collectionAsync: this.http.get<{ value: string; label: string }[]>(URL_SAMPLE_COLLECTION_DATA), // OR a regular collection load // collection: Array.from(Array(100).keys()).map(k => ({ value: k, prefix: 'Task', label: k })), collectionSortBy: { property: 'label', - sortDesc: true + sortDesc: true, }, customStructure: { label: 'label', @@ -455,18 +483,18 @@ export class GridEditorComponent implements OnInit { labelPrefix: 'prefix', }, collectionOptions: { - separatorBetweenTextLabels: ' ' + separatorBetweenTextLabels: ' ', }, model: Editors.multipleSelect, - required: true + required: true, }, filter: { - collectionAsync: this.http.get<{ value: string; label: string; }[]>(URL_SAMPLE_COLLECTION_DATA), + collectionAsync: this.http.get<{ value: string; label: string }[]>(URL_SAMPLE_COLLECTION_DATA), // OR a regular collection load // collection: Array.from(Array(100).keys()).map(k => ({ value: k, prefix: 'Task', label: k })), collectionSortBy: { property: 'label', - sortDesc: true + sortDesc: true, }, customStructure: { label: 'label', @@ -474,12 +502,12 @@ export class GridEditorComponent implements OnInit { labelPrefix: 'prefix', }, collectionOptions: { - separatorBetweenTextLabels: ' ' + separatorBetweenTextLabels: ' ', }, model: Filters.multipleSelect, operator: OperatorType.inContains, - } - } + }, + }, ]; this.gridOptions = { @@ -488,7 +516,7 @@ export class GridEditorComponent implements OnInit { autoCommitEdit: false, autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, editable: true, enableCellNavigation: true, @@ -499,7 +527,7 @@ export class GridEditorComponent implements OnInit { this._commandQueue.push(editCommand); editCommand.execute(); }, - i18n: this.translate + i18n: this.translate, }; this.dataset = this.mockData(NB_ITEMS); @@ -578,27 +606,27 @@ export class GridEditorComponent implements OnInit { mockData(itemCount: number, startingIndex = 0) { // mock a dataset const tempDataset = []; - for (let i = startingIndex; i < (startingIndex + itemCount); i++) { + for (let i = startingIndex; i < startingIndex + itemCount; i++) { const randomYear = 2000 + this.randomBetween(4, 15); - const randomFinishYear = (new Date().getFullYear() - 3) + Math.floor(Math.random() * 10); // use only years not lower than 3 years ago + const randomFinishYear = new Date().getFullYear() - 3 + Math.floor(Math.random() * 10); // use only years not lower than 3 years ago const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); + const randomDay = Math.floor(Math.random() * 29); const randomPercent = Math.round(Math.random() * 100); - const randomFinish = new Date(randomFinishYear, (randomMonth + 1), randomDay); + const randomFinish = new Date(randomFinishYear, randomMonth + 1, randomDay); tempDataset.push({ id: i, title: 'Task ' + i, - duration: (i % 33 === 0) ? null : Math.round(Math.random() * 100) + '', + duration: i % 33 === 0 ? null : Math.round(Math.random() * 100) + '', start: new Date(randomYear, randomMonth, randomDay), percentComplete: randomPercent, percentCompleteNumber: randomPercent, finish: randomFinish < new Date() ? '' : randomFinish, // make sure the random date is earlier than today - effortDriven: (i % 5 === 0), - prerequisites: (i % 2 === 0) && i !== 0 && i < 12 ? [i, i - 1] : [], - countryOfOrigin: (i % 2) ? { code: 'CA', name: 'Canada' } : { code: 'US', name: 'United States' }, - countryOfOriginName: (i % 2) ? 'Canada' : 'United States', - cityOfOrigin: (i % 2) ? 'Vancouver, BC, Canada' : 'Boston, MA, United States', + effortDriven: i % 5 === 0, + prerequisites: i % 2 === 0 && i !== 0 && i < 12 ? [i, i - 1] : [], + countryOfOrigin: i % 2 ? { code: 'CA', name: 'Canada' } : { code: 'US', name: 'United States' }, + countryOfOriginName: i % 2 ? 'Canada' : 'United States', + cityOfOrigin: i % 2 ? 'Vancouver, BC, Canada' : 'Boston, MA, United States', }); } return tempDataset; @@ -640,7 +668,7 @@ export class GridEditorComponent implements OnInit { changeAutoCommit() { this.gridOptions.autoCommitEdit = !this.gridOptions.autoCommitEdit; this.gridObj.setOptions({ - autoCommitEdit: this.gridOptions.autoCommitEdit + autoCommitEdit: this.gridOptions.autoCommitEdit, }); return true; } @@ -655,7 +683,9 @@ export class GridEditorComponent implements OnInit { required: true, validator: myCustomTitleValidator, // use a custom validator }, - sortable: true, minWidth: 100, filterable: true, + sortable: true, + minWidth: 100, + filterable: true, }; // you can dynamically add your column to your column definitions diff --git a/src/app/examples/grid-excel-formula.component.html b/src/app/examples/grid-excel-formula.component.html index 0c8fbb193..974524b89 100644 --- a/src/app/examples/grid-excel-formula.component.html +++ b/src/app/examples/grid-excel-formula.component.html @@ -2,18 +2,24 @@

Example 36: Excel Export Formulas - + code

- Grid with Excel Formulas (Wiki docs). - Calculate Totals via Formatters in the UI, but use Excel Formula when exporting via excelExportOptions.valueParserCallback - When Grouped we will also calculate the Group Totals in the UI via Group Formatter and we again use Excel Formula to calculate the Group Totals (sum) dynamically. - For Grouping we need to use groupTotalsExcelExportOptions.valueParserCallback instead. + Grid with Excel Formulas (Wiki docs). Calculate Totals via Formatters in the UI, but use Excel Formula when exporting via + excelExportOptions.valueParserCallback When Grouped we will also calculate the Group Totals in the UI via Group + Formatter and we again use Excel Formula to calculate the Group Totals (sum) dynamically. For Grouping we need to use + groupTotalsExcelExportOptions.valueParserCallback instead.
@@ -33,18 +39,18 @@

Tax Rate (%): - +

- + - \ No newline at end of file + diff --git a/src/app/examples/grid-excel-formula.component.ts b/src/app/examples/grid-excel-formula.component.ts index d576b9aad..7c57df2dd 100644 --- a/src/app/examples/grid-excel-formula.component.ts +++ b/src/app/examples/grid-excel-formula.component.ts @@ -34,14 +34,14 @@ function checkItemIsEditable(_dataContext: GroceryItem, columnDef: Column, grid: const gridOptions = grid.getOptions(); const hasEditor = columnDef.editor; const isGridEditable = gridOptions.editable; - const isEditable = (isGridEditable && hasEditor); + const isEditable = isGridEditable && hasEditor; return isEditable; } const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, dataContext: GroceryItem, grid) => { const isEditableItem = checkItemIsEditable(dataContext, columnDef, grid); - value = (value === null || value === undefined) ? '' : value; + value = value === null || value === undefined ? '' : value; const divElm = document.createElement('div'); divElm.className = 'editing-field'; if (value instanceof HTMLElement) { @@ -57,7 +57,10 @@ export class CustomSumAggregator implements Aggregator { private _sum = 0; private _type = 'sum' as const; - constructor(public readonly field: number | string, public taxRate: number) { } + constructor( + public readonly field: number | string, + public taxRate: number + ) {} get type(): string { return this._type; @@ -123,20 +126,34 @@ export class GridExcelFormulaComponent implements OnInit { prepareGrid() { this.columnDefinitions = [ { - id: 'sel', name: '#', field: 'id', + id: 'sel', + name: '#', + field: 'id', headerCssClass: 'header-centered', cssClass: 'cell-unselectable', excludeFromExport: true, maxWidth: 30, }, { - id: 'name', name: 'Name', field: 'name', sortable: true, width: 140, filterable: true, - excelExportOptions: { width: 18 } + id: 'name', + name: 'Name', + field: 'name', + sortable: true, + width: 140, + filterable: true, + excelExportOptions: { width: 18 }, }, { - id: 'price', name: 'Price', field: 'price', type: FieldType.number, - editor: { model: Editors.float, decimal: 2 }, sortable: true, width: 70, filterable: true, - formatter: Formatters.dollar, groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollarBold, + id: 'price', + name: 'Price', + field: 'price', + type: FieldType.number, + editor: { model: Editors.float, decimal: 2 }, + sortable: true, + width: 70, + filterable: true, + formatter: Formatters.dollar, + groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollarBold, groupTotalsExcelExportOptions: { style: { font: { bold: true, size: 11.5 }, @@ -144,10 +161,13 @@ export class GridExcelFormulaComponent implements OnInit { border: { top: { color: 'FF747474', style: 'thick' } }, }, valueParserCallback: this.excelGroupCellParser.bind(this), - } + }, }, { - id: 'qty', name: 'Quantity', field: 'qty', type: FieldType.number, + id: 'qty', + name: 'Quantity', + field: 'qty', + type: FieldType.number, groupTotalsFormatter: GroupTotalFormatters.sumTotalsBold, groupTotalsExcelExportOptions: { style: { @@ -157,18 +177,28 @@ export class GridExcelFormulaComponent implements OnInit { valueParserCallback: this.excelGroupCellParser.bind(this), }, params: { minDecimal: 0, maxDecimal: 0 }, - editor: { model: Editors.integer }, sortable: true, width: 60, filterable: true + editor: { model: Editors.integer }, + sortable: true, + width: 60, + filterable: true, }, { - id: 'subTotal', name: 'Sub-Total', field: 'subTotal', cssClass: 'text-sub-total', - type: FieldType.number, sortable: true, width: 70, filterable: true, + id: 'subTotal', + name: 'Sub-Total', + field: 'subTotal', + cssClass: 'text-sub-total', + type: FieldType.number, + sortable: true, + width: 70, + filterable: true, exportWithFormatter: false, - formatter: Formatters.multiple, groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollarBold, + formatter: Formatters.multiple, + groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollarBold, params: { formatters: [ (_row, _cell, _value, _coldef, dataContext) => dataContext.price * dataContext.qty, - Formatters.dollar - ] as Formatter[] + Formatters.dollar, + ] as Formatter[], }, excelExportOptions: { style: { @@ -185,22 +215,35 @@ export class GridExcelFormulaComponent implements OnInit { border: { top: { color: 'FF747474', style: 'thick' } }, }, valueParserCallback: this.excelGroupCellParser.bind(this), - } + }, }, { - id: 'taxable', name: 'Taxable', field: 'taxable', cssClass: 'text-center', sortable: true, width: 60, filterable: true, + id: 'taxable', + name: 'Taxable', + field: 'taxable', + cssClass: 'text-center', + sortable: true, + width: 60, + filterable: true, formatter: Formatters.checkmarkMaterial, - exportCustomFormatter: (_row, _cell, val) => val ? '✓' : '', + exportCustomFormatter: (_row, _cell, val) => (val ? '✓' : ''), excelExportOptions: { style: { alignment: { horizontal: 'center' }, }, - } + }, }, { - id: 'taxes', name: 'Taxes', field: 'taxes', cssClass: 'text-taxes', - type: FieldType.number, sortable: true, width: 70, filterable: true, - formatter: Formatters.multiple, groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollarBold, + id: 'taxes', + name: 'Taxes', + field: 'taxes', + cssClass: 'text-taxes', + type: FieldType.number, + sortable: true, + width: 70, + filterable: true, + formatter: Formatters.multiple, + groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollarBold, params: { formatters: [ (_row, _cell, _value, _coldef, dataContext) => { @@ -209,8 +252,8 @@ export class GridExcelFormulaComponent implements OnInit { } return null; }, - Formatters.dollar - ] as Formatter[] + Formatters.dollar, + ] as Formatter[], }, excelExportOptions: { style: { @@ -227,11 +270,19 @@ export class GridExcelFormulaComponent implements OnInit { border: { top: { color: 'FF747474', style: 'thick' } }, }, valueParserCallback: this.excelGroupCellParser.bind(this), - } + }, }, { - id: 'total', name: 'Total', field: 'total', type: FieldType.number, sortable: true, width: 70, filterable: true, - cssClass: 'text-total', formatter: Formatters.multiple, groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollarBold, + id: 'total', + name: 'Total', + field: 'total', + type: FieldType.number, + sortable: true, + width: 70, + filterable: true, + cssClass: 'text-total', + formatter: Formatters.multiple, + groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollarBold, params: { formatters: [ (_row, _cell, _value, _coldef, dataContext) => { @@ -241,8 +292,8 @@ export class GridExcelFormulaComponent implements OnInit { } return subTotal; }, - Formatters.dollar - ] as Formatter[] + Formatters.dollar, + ] as Formatter[], }, excelExportOptions: { style: { @@ -259,7 +310,7 @@ export class GridExcelFormulaComponent implements OnInit { border: { top: { color: 'FF747474', style: 'thick' } }, }, valueParserCallback: this.excelGroupCellParser.bind(this), - } + }, }, ]; @@ -285,7 +336,7 @@ export class GridExcelFormulaComponent implements OnInit { sheetName: 'Grocery List', columnHeaderStyle: { font: { color: 'FFFFFFFF' }, - fill: { type: 'pattern', patternType: 'solid', fgColor: 'FF4a6c91' } + fill: { type: 'pattern', patternType: 'solid', fgColor: 'FF4a6c91' }, }, // optionally pass a custom header to the Excel Sheet @@ -365,11 +416,17 @@ export class GridExcelFormulaComponent implements OnInit { excelCol = excelTotalCol; break; } - return { value: `SUM(${excelCol}${dataRowIdx + rowOffset - groupItemCount}:${excelCol}${dataRowIdx + rowOffset - 1})`, metadata: { type: 'formula', style: excelFormatId } }; + return { + value: `SUM(${excelCol}${dataRowIdx + rowOffset - groupItemCount}:${excelCol}${dataRowIdx + rowOffset - 1})`, + metadata: { type: 'formula', style: excelFormatId }, + }; } /** We'll use a generic parser to reuse similar logic for all 3 calculable columns (SubTotal, Taxes, Total) */ - excelRegularCellParser(_data: any, { columnDef, excelFormatId, dataRowIdx, dataContext }: ExcelCellValueParserArgs) { + excelRegularCellParser( + _data: any, + { columnDef, excelFormatId, dataRowIdx, dataContext }: ExcelCellValueParserArgs + ) { // assuming that we want to calculate: (Price * Qty) => Sub-Total const colOffset = !this.isDataGrouped ? 1 : 0; // col offset of 1x because we skipped 1st column OR 0 offset if we use a Group because the Group column replaces the skip const rowOffset = 3; // row offset of 3x because: 1x Title, 1x Headers and Excel row starts at 1 => 3 @@ -391,9 +448,7 @@ export class GridExcelFormulaComponent implements OnInit { excelVal = `${excelPriceCol}*${excelQtyCol}`; // like "C4*D4" break; case 'taxes': - excelVal = (dataContext.taxable) - ? `${excelPriceCol}*${excelQtyCol}*${this.taxRate / 100}` - : ''; + excelVal = dataContext.taxable ? `${excelPriceCol}*${excelQtyCol}*${this.taxRate / 100}` : ''; break; case 'total': excelVal = `(${excelPriceCol}*${excelQtyCol})+${excelTaxesCol}`; @@ -413,7 +468,7 @@ export class GridExcelFormulaComponent implements OnInit { { id: i++, name: 'Tomatoes', qty: 3, taxable: false, price: 1.88 }, { id: i++, name: 'Butter', qty: 1, taxable: false, price: 3.33 }, { id: i++, name: 'BBQ Chicken', qty: 1, taxable: false, price: 12.33 }, - { id: i++, name: 'Chicken Wings', qty: 12, taxable: true, price: .53 }, + { id: i++, name: 'Chicken Wings', qty: 12, taxable: true, price: 0.53 }, { id: i++, name: 'Drinkable Yogurt', qty: 6, taxable: true, price: 1.22 }, { id: i++, name: 'Milk', qty: 3, taxable: true, price: 3.11 }, ] as GroceryItem[]; @@ -433,7 +488,8 @@ export class GridExcelFormulaComponent implements OnInit { this.angularGrid?.dataView?.setGrouping({ getter: 'taxable', - formatter: (g) => `Taxable: (${g.count} items)`, + formatter: (g) => + `Taxable: (${g.count} items)`, comparer: (a, b) => b.value - a.value, aggregators: [ new Aggregators.Sum('price'), diff --git a/src/app/examples/grid-footer-totals.component.html b/src/app/examples/grid-footer-totals.component.html index 6198cfac7..3de394cc3 100644 --- a/src/app/examples/grid-footer-totals.component.html +++ b/src/app/examples/grid-footer-totals.component.html @@ -1,28 +1,30 @@

- {{title}} - - + code

-
+
- + -
\ No newline at end of file + diff --git a/src/app/examples/grid-footer-totals.component.ts b/src/app/examples/grid-footer-totals.component.ts index 532bea5fd..57d58dbf6 100644 --- a/src/app/examples/grid-footer-totals.component.ts +++ b/src/app/examples/grid-footer-totals.component.ts @@ -1,10 +1,17 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; -import { AngularGridInstance, Column, Editors, FieldType, GridOption, OnCellChangeEventArgs, } from './../modules/angular-slickgrid'; +import { + AngularGridInstance, + Column, + Editors, + FieldType, + GridOption, + OnCellChangeEventArgs, +} from './../modules/angular-slickgrid'; const NB_ITEMS = 100; @Component({ - templateUrl: './grid-footer-totals.component.html' + templateUrl: './grid-footer-totals.component.html', }) export class GridFooterTotalsComponent implements OnDestroy, OnInit { private _darkMode = false; @@ -43,7 +50,7 @@ export class GridFooterTotalsComponent implements OnDestroy, OnInit { field: String(i), type: FieldType.number, width: 58, - editor: { model: Editors.integer } + editor: { model: Editors.integer }, }); } this.columnDefinitions = columnDefs; @@ -115,7 +122,7 @@ export class GridFooterTotalsComponent implements OnDestroy, OnInit { let total = 0; let i = this.dataset.length; while (i--) { - total += (parseInt(this.dataset[i][columnId], 10) || 0); + total += parseInt(this.dataset[i][columnId], 10) || 0; } const columnElement = this.angularGrid.slickGrid?.getFooterRowColumn(columnId); if (columnElement) { diff --git a/src/app/examples/grid-formatter.component.html b/src/app/examples/grid-formatter.component.html index e40534260..53d2bd771 100644 --- a/src/app/examples/grid-formatter.component.html +++ b/src/app/examples/grid-formatter.component.html @@ -1,26 +1,28 @@

- {{title}} + {{ title }} - + code

-
+
- - + -
\ No newline at end of file + diff --git a/src/app/examples/grid-formatter.component.ts b/src/app/examples/grid-formatter.component.ts index 16586b2ab..65018a9b6 100644 --- a/src/app/examples/grid-formatter.component.ts +++ b/src/app/examples/grid-formatter.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { AngularGridInstance, Column, FieldType, Formatter, Formatters, GridOption, } from './../modules/angular-slickgrid'; +import { AngularGridInstance, Column, FieldType, Formatter, Formatters, GridOption } from './../modules/angular-slickgrid'; interface DataItem { id: number; @@ -17,7 +17,9 @@ interface DataItem { // create my custom Formatter with the Formatter type const myCustomCheckmarkFormatter: Formatter = (_row, _cell, value) => { // you can return a string of a object (of type FormatterResultObject), the 2 types are shown below - return value ? `` : { text: '', addClasses: 'lightblue', toolTip: 'Freezing' }; + return value + ? `` + : { text: '', addClasses: 'lightblue', toolTip: 'Freezing' }; }; const customEnableButtonFormatter: Formatter = (_row: number, _cell: number, value: any) => { @@ -29,7 +31,7 @@ const customEnableButtonFormatter: Formatter = (_row: number, _cell: n }; @Component({ - templateUrl: './grid-formatter.component.html' + templateUrl: './grid-formatter.component.html', }) export class GridFormatterComponent implements OnInit { title = 'Example 2: Grid with Formatters'; @@ -59,26 +61,92 @@ export class GridFormatterComponent implements OnInit { ngOnInit(): void { this.columnDefinitions = [ { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, width: 70 }, - { id: 'phone', name: 'Phone Number using mask', field: 'phone', sortable: true, type: FieldType.number, minWidth: 100, formatter: Formatters.mask, params: { mask: '(000) 000-0000' } }, - { id: 'duration', name: 'Duration (days)', field: 'duration', formatter: Formatters.decimal, params: { minDecimal: 1, maxDecimal: 2 }, sortable: true, type: FieldType.number, minWidth: 90, exportWithFormatter: true }, - { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true, minWidth: 100 }, - { id: 'percent2', name: '% Complete', field: 'percentComplete2', formatter: Formatters.progressBar, type: FieldType.number, sortable: true, minWidth: 100 }, - { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true }, - { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true }, - { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckmarkFormatter, type: FieldType.number, sortable: true, minWidth: 100 }, { - id: 'completed', name: 'Completed', field: 'completed', type: FieldType.number, sortable: true, minWidth: 100, + id: 'phone', + name: 'Phone Number using mask', + field: 'phone', + sortable: true, + type: FieldType.number, + minWidth: 100, + formatter: Formatters.mask, + params: { mask: '(000) 000-0000' }, + }, + { + id: 'duration', + name: 'Duration (days)', + field: 'duration', + formatter: Formatters.decimal, + params: { minDecimal: 1, maxDecimal: 2 }, + sortable: true, + type: FieldType.number, + minWidth: 90, + exportWithFormatter: true, + }, + { + id: 'complete', + name: '% Complete', + field: 'percentComplete', + formatter: Formatters.percentCompleteBar, + type: FieldType.number, + sortable: true, + minWidth: 100, + }, + { + id: 'percent2', + name: '% Complete', + field: 'percentComplete2', + formatter: Formatters.progressBar, + type: FieldType.number, + sortable: true, + minWidth: 100, + }, + { + id: 'start', + name: 'Start', + field: 'start', + formatter: Formatters.dateIso, + sortable: true, + type: FieldType.date, + minWidth: 90, + exportWithFormatter: true, + }, + { + id: 'finish', + name: 'Finish', + field: 'finish', + formatter: Formatters.dateIso, + sortable: true, + type: FieldType.date, + minWidth: 90, + exportWithFormatter: true, + }, + { + id: 'effort-driven', + name: 'Effort Driven', + field: 'effortDriven', + formatter: myCustomCheckmarkFormatter, + type: FieldType.number, + sortable: true, + minWidth: 100, + }, + { + id: 'completed', + name: 'Completed', + field: 'completed', + type: FieldType.number, + sortable: true, + minWidth: 100, formatter: customEnableButtonFormatter, onCellClick: (_e, args) => { this.toggleCompletedProperty(args?.dataContext); - } - } + }, + }, ]; this.gridOptions = { autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableAutoResize: true, enableCellNavigation: true, @@ -87,7 +155,7 @@ export class GridFormatterComponent implements OnInit { // optionally display some text on the left footer container leftFooterText: 'custom footer text', hideTotalItemCount: true, - hideLastUpdateTimestamp: true + hideLastUpdateTimestamp: true, }, // you customize all formatter at once certain options through "formatterOptions" in the Grid Options @@ -117,20 +185,20 @@ export class GridFormatterComponent implements OnInit { for (let i = 0; i < 500; i++) { const randomYear = 2000 + Math.floor(Math.random() * 10); const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); + const randomDay = Math.floor(Math.random() * 29); const randomPercent = Math.round(Math.random() * 100); tmpData[i] = { id: i, title: 'Task ' + i, phone: this.generatePhoneNumber(), - duration: (i % 33 === 0) ? null : Math.random() * 100 + '', + duration: i % 33 === 0 ? null : Math.random() * 100 + '', percentComplete: randomPercent, percentComplete2: randomPercent, percentCompleteNumber: randomPercent, start: new Date(randomYear, randomMonth, randomDay), - finish: new Date(randomYear, (randomMonth + 1), randomDay), - effortDriven: (i % 5 === 0) + finish: new Date(randomYear, randomMonth + 1, randomDay), + effortDriven: i % 5 === 0, }; } this.dataset = tmpData; diff --git a/src/app/examples/grid-frozen.component.html b/src/app/examples/grid-frozen.component.html index f50f7a122..eb2f9b9b8 100644 --- a/src/app/examples/grid-frozen.component.html +++ b/src/app/examples/grid-frozen.component.html @@ -1,10 +1,12 @@

- {{title}} + {{ title }} - + code @@ -14,29 +16,28 @@

- +
- +
- +
- +
- - : {{ isFrozenBottom ? 'Bottom' : 'Top' }} + : {{ isFrozenBottom ? 'Bottom' : 'Top' }}
-
+
- + -

\ No newline at end of file + diff --git a/src/app/examples/grid-frozen.component.ts b/src/app/examples/grid-frozen.component.ts index e165b864b..9a229c9a4 100644 --- a/src/app/examples/grid-frozen.component.ts +++ b/src/app/examples/grid-frozen.component.ts @@ -1,5 +1,16 @@ import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core'; -import { AngularGridInstance, Column, ColumnEditorDualInput, Editors, FieldType, formatNumber, Formatters, Filters, GridOption, SlickEventHandler } from './../modules/angular-slickgrid'; +import { + AngularGridInstance, + Column, + ColumnEditorDualInput, + Editors, + FieldType, + formatNumber, + Formatters, + Filters, + GridOption, + SlickEventHandler, +} from './../modules/angular-slickgrid'; @Component({ templateUrl: './grid-frozen.component.html', @@ -62,44 +73,65 @@ export class GridFrozenComponent implements OnInit, OnDestroy { prepareDataGrid() { this.columnDefinitions = [ { - id: 'sel', name: '#', field: 'id', - minWidth: 40, width: 40, maxWidth: 40, + id: 'sel', + name: '#', + field: 'id', + minWidth: 40, + width: 40, + maxWidth: 40, cannotTriggerInsert: true, resizable: false, unselectable: true, }, { - id: 'title', name: 'Title', field: 'title', - minWidth: 100, width: 120, + id: 'title', + name: 'Title', + field: 'title', + minWidth: 100, + width: 120, filterable: true, - sortable: true + sortable: true, }, { - id: 'percentComplete', name: '% Complete', field: 'percentComplete', + id: 'percentComplete', + name: '% Complete', + field: 'percentComplete', resizable: false, - minWidth: 130, width: 140, + minWidth: 130, + width: 140, formatter: Formatters.percentCompleteBar, type: FieldType.number, filterable: true, filter: { model: Filters.slider, operator: '>=' }, - sortable: true + sortable: true, }, { - id: 'start', name: 'Start', field: 'start', - minWidth: 100, width: 120, - filterable: true, sortable: true, - formatter: Formatters.dateIso + id: 'start', + name: 'Start', + field: 'start', + minWidth: 100, + width: 120, + filterable: true, + sortable: true, + formatter: Formatters.dateIso, }, { - id: 'finish', name: 'Finish', field: 'finish', - minWidth: 100, width: 120, - filterable: true, sortable: true, - formatter: Formatters.dateIso + id: 'finish', + name: 'Finish', + field: 'finish', + minWidth: 100, + width: 120, + filterable: true, + sortable: true, + formatter: Formatters.dateIso, }, { - id: 'cost', name: 'Cost | Duration', field: 'cost', + id: 'cost', + name: 'Cost | Duration', + field: 'cost', formatter: this.costDurationFormatter.bind(this), - minWidth: 150, width: 170, + minWidth: 150, + width: 170, sortable: true, // filterable: true, filter: { @@ -166,49 +198,68 @@ export class GridFrozenComponent implements OnInit, OnDestroy { return { valid: isValid, msg: errorMsg }; } */ - } + }, }, { - id: 'effortDriven', name: 'Effort Driven', field: 'effortDriven', - minWidth: 100, width: 120, + id: 'effortDriven', + name: 'Effort Driven', + field: 'effortDriven', + minWidth: 100, + width: 120, formatter: Formatters.checkmarkMaterial, filterable: true, filter: { - collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }], - model: Filters.singleSelect + collection: [ + { value: '', label: '' }, + { value: true, label: 'True' }, + { value: false, label: 'False' }, + ], + model: Filters.singleSelect, }, - sortable: true + sortable: true, }, { - id: 'title1', name: 'Title 1', field: 'title1', - minWidth: 100, width: 120, + id: 'title1', + name: 'Title 1', + field: 'title1', + minWidth: 100, + width: 120, filterable: true, - sortable: true + sortable: true, }, { - id: 'title2', name: 'Title 2', field: 'title2', - minWidth: 100, width: 120, + id: 'title2', + name: 'Title 2', + field: 'title2', + minWidth: 100, + width: 120, filterable: true, - sortable: true + sortable: true, }, { - id: 'title3', name: 'Title 3', field: 'title3', - minWidth: 100, width: 120, + id: 'title3', + name: 'Title 3', + field: 'title3', + minWidth: 100, + width: 120, filterable: true, - sortable: true + sortable: true, }, { - id: 'title4', name: 'Title 4', field: 'title4', - minWidth: 100, width: 120, + id: 'title4', + name: 'Title 4', + field: 'title4', + minWidth: 100, + width: 120, filterable: true, - sortable: true - } + sortable: true, + }, ]; this.gridOptions = { autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableExcelCopyBuffer: true, enableCellNavigation: true, @@ -220,7 +271,7 @@ export class GridFrozenComponent implements OnInit, OnDestroy { // frozenBottom: true, // if you want to freeze the bottom instead of the top, you can enable this property gridMenu: { hideClearFrozenColumnsCommand: false }, - headerMenu: { hideFreezeColumnsCommand: false } + headerMenu: { hideFreezeColumnsCommand: false }, }; // mock a dataset @@ -234,12 +285,12 @@ export class GridFrozenComponent implements OnInit, OnDestroy { mockDataset[i] = { id: i, title: 'Task ' + i, - cost: (i % 33 === 0) ? null : Math.random() * 10000, - duration: i % 8 ? (Math.round(Math.random() * 100) + '') : null, + cost: i % 33 === 0 ? null : Math.random() * 10000, + duration: i % 8 ? Math.round(Math.random() * 100) + '' : null, percentComplete: Math.round(Math.random() * 100), start: new Date(2009, 0, 1), finish: new Date(2009, 4, 5), - effortDriven: (i % 5 === 0), + effortDriven: i % 5 === 0, title1: `Some Text ${Math.round(Math.random() * 25)}`, title2: `Some Text ${Math.round(Math.random() * 25)}`, title3: `Some Text ${Math.round(Math.random() * 25)}`, @@ -253,7 +304,7 @@ export class GridFrozenComponent implements OnInit, OnDestroy { changeFrozenColumnCount() { if (this.gridObj && this.gridObj.setOptions) { this.gridObj.setOptions({ - frozenColumn: this.frozenColumnCount + frozenColumn: this.frozenColumnCount, }); } } @@ -262,13 +313,15 @@ export class GridFrozenComponent implements OnInit, OnDestroy { changeFrozenRowCount() { if (this.gridObj && this.gridObj.setOptions) { this.gridObj.setOptions({ - frozenRow: this.frozenRowCount + frozenRow: this.frozenRowCount, }); } } costDurationFormatter(_row: number, _cell: number, _value: any, _columnDef: Column, dataContext: any) { - const costText = this.isNullUndefinedOrEmpty(dataContext.cost) ? 'n/a' : formatNumber(dataContext.cost, 0, 2, false, '$', '', '.', ','); + const costText = this.isNullUndefinedOrEmpty(dataContext.cost) + ? 'n/a' + : formatNumber(dataContext.cost, 0, 2, false, '$', '', '.', ','); let durationText = 'n/a'; if (!this.isNullUndefinedOrEmpty(dataContext.duration) && dataContext.duration >= 0) { durationText = `${dataContext.duration} ${dataContext.duration > 1 ? 'days' : 'day'}`; @@ -277,7 +330,7 @@ export class GridFrozenComponent implements OnInit, OnDestroy { } isNullUndefinedOrEmpty(data: any) { - return (data === '' || data === null || data === undefined); + return data === '' || data === null || data === undefined; } onValidationError(e: Event, args: any) { @@ -293,7 +346,7 @@ export class GridFrozenComponent implements OnInit, OnDestroy { toggleFrozenBottomRows() { if (this.gridObj && this.gridObj.setOptions) { this.gridObj.setOptions({ - frozenBottom: !this.isFrozenBottom + frozenBottom: !this.isFrozenBottom, }); this.isFrozenBottom = !this.isFrozenBottom; // toggle the variable } diff --git a/src/app/examples/grid-graphql-nopage.component.html b/src/app/examples/grid-graphql-nopage.component.html index bfe67596e..3c59e418a 100644 --- a/src/app/examples/grid-graphql-nopage.component.html +++ b/src/app/examples/grid-graphql-nopage.component.html @@ -1,23 +1,24 @@

- {{title}} + {{ title }} - + code

-
-
+
- Status: {{status.text}} + Status: {{ status.text }} @@ -25,9 +26,6 @@

- + -
\ No newline at end of file +
diff --git a/src/app/examples/grid-graphql-nopage.component.ts b/src/app/examples/grid-graphql-nopage.component.ts index d1f625957..fb9d4d673 100644 --- a/src/app/examples/grid-graphql-nopage.component.ts +++ b/src/app/examples/grid-graphql-nopage.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { HttpClient } from '@angular/common/http'; -import { GraphqlService, GraphqlResult, GraphqlServiceApi, } from '@slickgrid-universal/graphql'; +import { GraphqlService, GraphqlResult, GraphqlServiceApi } from '@slickgrid-universal/graphql'; import { AngularGridInstance, @@ -28,7 +28,7 @@ export interface Country { languageCode: string; languageName: string; languageNative: string; -}; +} @Component({ templateUrl: './grid-graphql-nopage.component.html', @@ -61,19 +61,47 @@ export class GridGraphqlWithoutPaginationComponent implements OnInit { status = { text: 'processing...', class: 'alert alert-danger' }; isDataLoaded = false; - constructor(private http: HttpClient) { } + constructor(private http: HttpClient) {} ngOnInit(): void { this.columnDefinitions = [ { id: 'countryCode', field: 'code', name: 'Code', maxWidth: 90, sortable: true, filterable: true, columnGroup: 'Country' }, { id: 'countryName', field: 'name', name: 'Name', width: 60, sortable: true, filterable: true, columnGroup: 'Country' }, - { id: 'countryNative', field: 'native', name: 'Native', width: 60, sortable: true, filterable: true, columnGroup: 'Country' }, - { id: 'countryPhone', field: 'phone', name: 'Phone Area Code', maxWidth: 110, sortable: true, filterable: true, columnGroup: 'Country' }, - { id: 'countryCurrency', field: 'currency', name: 'Currency', maxWidth: 90, sortable: true, filterable: true, columnGroup: 'Country' }, + { + id: 'countryNative', + field: 'native', + name: 'Native', + width: 60, + sortable: true, + filterable: true, + columnGroup: 'Country', + }, + { + id: 'countryPhone', + field: 'phone', + name: 'Phone Area Code', + maxWidth: 110, + sortable: true, + filterable: true, + columnGroup: 'Country', + }, + { + id: 'countryCurrency', + field: 'currency', + name: 'Currency', + maxWidth: 90, + sortable: true, + filterable: true, + columnGroup: 'Country', + }, { id: 'countryEmoji', field: 'emoji', name: 'Emoji', maxWidth: 90, sortable: true, columnGroup: 'Country' }, { - id: 'languageName', field: 'languages.name', name: 'Names', width: 60, - formatter: Formatters.arrayObjectToCsv, columnGroup: 'Language', + id: 'languageName', + field: 'languages.name', + name: 'Names', + width: 60, + formatter: Formatters.arrayObjectToCsv, + columnGroup: 'Language', params: { propertyNames: ['name'], useFormatterOuputToFilter: true }, filterable: true, // this Filter is a bit more tricky than others since the values are an array of objects @@ -86,7 +114,7 @@ export class GridGraphqlWithoutPaginationComponent implements OnInit { collectionOptions: { addBlankEntry: true, // the data is not at the root of the array, so we must tell the Select Filter where to pull the data - collectionInsideObjectProperty: 'data.languages' + collectionInsideObjectProperty: 'data.languages', }, collectionFilterBy: [ // filter out any empty values @@ -94,20 +122,25 @@ export class GridGraphqlWithoutPaginationComponent implements OnInit { { property: 'name', value: null, operator: 'NE' }, ], collectionSortBy: { - property: 'name' + property: 'name', }, customStructure: { value: 'name', label: 'name', }, filterOptions: { - filter: true - } as MultipleSelectOption + filter: true, + } as MultipleSelectOption, }, }, { - id: 'languageNative', field: 'languages.native', name: 'Native', width: 60, - formatter: Formatters.arrayObjectToCsv, params: { propertyNames: ['native'], useFormatterOuputToFilter: true }, columnGroup: 'Language', + id: 'languageNative', + field: 'languages.native', + name: 'Native', + width: 60, + formatter: Formatters.arrayObjectToCsv, + params: { propertyNames: ['native'], useFormatterOuputToFilter: true }, + columnGroup: 'Language', filterable: true, filter: { model: Filters.multipleSelect, @@ -116,7 +149,7 @@ export class GridGraphqlWithoutPaginationComponent implements OnInit { collectionOptions: { addBlankEntry: true, // the data is not at the root of the array, so we must tell the Select Filter where to pull the data - collectionInsideObjectProperty: 'data.languages' + collectionInsideObjectProperty: 'data.languages', }, collectionFilterBy: [ // filter out any empty values @@ -124,28 +157,42 @@ export class GridGraphqlWithoutPaginationComponent implements OnInit { { property: 'native', value: null, operator: 'NE' }, ], collectionSortBy: { - property: 'native' + property: 'native', }, customStructure: { value: 'native', label: 'native', }, filterOptions: { - filter: true - } as MultipleSelectOption + filter: true, + } as MultipleSelectOption, }, }, { - id: 'languageCode', field: 'languages.code', name: 'Codes', maxWidth: 100, - formatter: Formatters.arrayObjectToCsv, params: { propertyNames: ['code'], useFormatterOuputToFilter: true }, columnGroup: 'Language', + id: 'languageCode', + field: 'languages.code', + name: 'Codes', + maxWidth: 100, + formatter: Formatters.arrayObjectToCsv, + params: { propertyNames: ['code'], useFormatterOuputToFilter: true }, + columnGroup: 'Language', filterable: true, }, { - id: 'continentName', field: 'continent.name', name: 'Name', width: 60, sortable: true, - filterable: true, formatter: Formatters.complexObject, columnGroup: 'Continent' + id: 'continentName', + field: 'continent.name', + name: 'Name', + width: 60, + sortable: true, + filterable: true, + formatter: Formatters.complexObject, + columnGroup: 'Continent', }, { - id: 'continentCode', field: 'continent.code', name: 'Code', maxWidth: 90, + id: 'continentCode', + field: 'continent.code', + name: 'Code', + maxWidth: 90, sortable: true, filterable: true, filter: { @@ -161,16 +208,17 @@ export class GridGraphqlWithoutPaginationComponent implements OnInit { value: 'code', label: 'code', labelSuffix: 'name', - } + }, }, - formatter: Formatters.complexObject, columnGroup: 'Continent', + formatter: Formatters.complexObject, + columnGroup: 'Continent', }, ]; this.gridOptions = { autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableFiltering: true, enableCellNavigation: true, @@ -191,20 +239,20 @@ export class GridGraphqlWithoutPaginationComponent implements OnInit { datasetName: 'countries', // the only REQUIRED property }, // you can define the onInit callback OR enable the "executeProcessCommandOnInit" flag in the service init - preProcess: () => !this.isDataLoaded ? this.displaySpinner(true) : '', + preProcess: () => (!this.isDataLoaded ? this.displaySpinner(true) : ''), process: (query: string) => this.getCountries(query), postProcess: (result: GraphqlResult) => { this.metrics = result.metrics as Metrics; this.displaySpinner(false); this.isDataLoaded = true; - } - } as GraphqlServiceApi + }, + } as GraphqlServiceApi, }; } displaySpinner(isProcessing: boolean) { this.processing = isProcessing; - this.status = (isProcessing) + this.status = isProcessing ? { text: 'processing...', class: 'alert alert-danger' } : { text: 'finished', class: 'alert alert-success' }; } @@ -225,9 +273,9 @@ export class GridGraphqlWithoutPaginationComponent implements OnInit { * So we will have to write, by hand, the query to get the continents code & name * We also need to resolve the data in a flat array (singleSelect/multipleSelect Filters only accept data at the root of the array) */ - getContinents(): Observable> { + getContinents(): Observable> { const continentQuery = `query { continents { code, name }}`; - return this.http.post>(COUNTRIES_API, { query: continentQuery }); + return this.http.post>(COUNTRIES_API, { query: continentQuery }); } /** @@ -235,8 +283,8 @@ export class GridGraphqlWithoutPaginationComponent implements OnInit { * So we will have to write, by hand, the query to get the languages code & name * We also need to resolve the data in a flat array (singleSelect/multipleSelect Filters only accept data at the root of the array) */ - getLanguages(): Observable> { + getLanguages(): Observable> { const languageQuery = `query { languages { code, name, native }}`; - return this.http.post>(COUNTRIES_API, { query: languageQuery }); + return this.http.post>(COUNTRIES_API, { query: languageQuery }); } } diff --git a/src/app/examples/grid-graphql.component.html b/src/app/examples/grid-graphql.component.html index f6c6699b8..e4c4b98a9 100644 --- a/src/app/examples/grid-graphql.component.html +++ b/src/app/examples/grid-graphql.component.html @@ -1,10 +1,12 @@

- {{title}} + {{ title }} - + code @@ -14,7 +16,7 @@

- Status: {{status.text}} + Status: {{ status.text }} @@ -22,27 +24,41 @@

- - - - - +
@@ -53,25 +69,40 @@

Locale: - {{selectedLanguage + '.json'}} + {{ selectedLanguage + '.json' }}


- Metrics: {{metrics.endTime | date: 'yyyy-MM-dd hh:mm aaaaa\'m\''}} | {{metrics.executionTime}}ms - | {{metrics.totalItemCount}} items + Metrics: {{ metrics.endTime | date: "yyyy-MM-dd hh:mm aaaaa'm'" }} | {{ metrics.executionTime }}ms | + {{ metrics.totalItemCount }} items
@@ -97,12 +128,14 @@

- + -
\ No newline at end of file +
diff --git a/src/app/examples/grid-graphql.component.ts b/src/app/examples/grid-graphql.component.ts index 14fdfaf8b..53864ff3a 100644 --- a/src/app/examples/grid-graphql.component.ts +++ b/src/app/examples/grid-graphql.component.ts @@ -1,4 +1,4 @@ -import { GraphqlService, GraphqlPaginatedResult, GraphqlServiceApi, GraphqlServiceOption, } from '@slickgrid-universal/graphql'; +import { GraphqlService, GraphqlPaginatedResult, GraphqlServiceApi, GraphqlServiceOption } from '@slickgrid-universal/graphql'; import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core'; import { addDay, format as tempoFormat } from '@formkit/tempo'; import { TranslateService } from '@ngx-translate/core'; @@ -25,7 +25,7 @@ const LOCAL_STORAGE_KEY = 'gridStateGraphql'; const FAKE_SERVER_DELAY = 250; @Component({ - templateUrl: './grid-graphql.component.html' + templateUrl: './grid-graphql.component.html', }) export class GridGraphqlComponent implements OnInit, OnDestroy { title = 'Example 6: Grid connected to Backend Server with GraphQL'; @@ -60,7 +60,10 @@ export class GridGraphqlComponent implements OnInit, OnDestroy { selectedLanguage: string; serverWaitDelay = FAKE_SERVER_DELAY; // server simulation with default of 250ms but 50ms for Cypress tests - constructor(private readonly cd: ChangeDetectorRef, private translate: TranslateService) { + constructor( + private readonly cd: ChangeDetectorRef, + private translate: TranslateService + ) { // always start with English for Cypress E2E tests to be consistent const defaultLang = 'en'; this.translate.use(defaultLang); @@ -75,7 +78,11 @@ export class GridGraphqlComponent implements OnInit, OnDestroy { ngOnInit(): void { this.columnDefinitions = [ { - id: 'name', field: 'name', nameKey: 'NAME', width: 60, columnGroupKey: 'CUSTOMER_INFORMATION', + id: 'name', + field: 'name', + nameKey: 'NAME', + width: 60, + columnGroupKey: 'CUSTOMER_INFORMATION', type: FieldType.string, sortable: true, filterable: true, @@ -89,42 +96,78 @@ export class GridGraphqlComponent implements OnInit, OnDestroy { { operator: 'a*', desc: 'Starts With' }, { operator: 'Custom', desc: 'SQL Like' }, ], - } + }, }, { - id: 'gender', field: 'gender', nameKey: 'GENDER', filterable: true, sortable: true, width: 60, columnGroupKey: 'CUSTOMER_INFORMATION', + id: 'gender', + field: 'gender', + nameKey: 'GENDER', + filterable: true, + sortable: true, + width: 60, + columnGroupKey: 'CUSTOMER_INFORMATION', filter: { model: Filters.singleSelect, - collection: [{ value: '', label: '' }, { value: 'male', label: 'male', labelKey: 'MALE' }, { value: 'female', label: 'female', labelKey: 'FEMALE' }] - } + collection: [ + { value: '', label: '' }, + { value: 'male', label: 'male', labelKey: 'MALE' }, + { value: 'female', label: 'female', labelKey: 'FEMALE' }, + ], + }, }, { - id: 'company', field: 'company', nameKey: 'COMPANY', width: 60, columnGroupKey: 'CUSTOMER_INFORMATION', - sortable: true, filterable: true, + id: 'company', + field: 'company', + nameKey: 'COMPANY', + width: 60, + columnGroupKey: 'CUSTOMER_INFORMATION', + sortable: true, + filterable: true, filter: { model: Filters.multipleSelect, - collection: [{ value: 'acme', label: 'Acme' }, { value: 'abc', label: 'Company ABC' }, { value: 'xyz', label: 'Company XYZ' }], + collection: [ + { value: 'acme', label: 'Acme' }, + { value: 'abc', label: 'Company ABC' }, + { value: 'xyz', label: 'Company XYZ' }, + ], filterOptions: { - filter: true // adds a filter on top of the multi-select dropdown - } as MultipleSelectOption - } + filter: true, // adds a filter on top of the multi-select dropdown + } as MultipleSelectOption, + }, }, { - id: 'billingAddressStreet', field: 'billing.address.street', nameKey: 'BILLING.ADDRESS.STREET', - width: 60, filterable: true, sortable: true, columnGroupKey: 'BILLING.INFORMATION', + id: 'billingAddressStreet', + field: 'billing.address.street', + nameKey: 'BILLING.ADDRESS.STREET', + width: 60, + filterable: true, + sortable: true, + columnGroupKey: 'BILLING.INFORMATION', }, { - id: 'billingAddressZip', field: 'billing.address.zip', nameKey: 'BILLING.ADDRESS.ZIP', width: 60, + id: 'billingAddressZip', + field: 'billing.address.zip', + nameKey: 'BILLING.ADDRESS.ZIP', + width: 60, type: FieldType.number, columnGroupKey: 'BILLING.INFORMATION', // or use "columnGroup" without Translate - filterable: true, sortable: true, + filterable: true, + sortable: true, filter: { - model: Filters.compoundInput + model: Filters.compoundInput, }, - formatter: Formatters.multiple, params: { formatters: [Formatters.complexObject, Formatters.translate] } + formatter: Formatters.multiple, + params: { formatters: [Formatters.complexObject, Formatters.translate] }, }, { - id: 'finish', field: 'finish', name: 'Date', formatter: Formatters.dateIso, sortable: true, minWidth: 90, width: 120, exportWithFormatter: true, + id: 'finish', + field: 'finish', + name: 'Date', + formatter: Formatters.dateIso, + sortable: true, + minWidth: 90, + width: 120, + exportWithFormatter: true, type: FieldType.date, columnGroupKey: 'BILLING.INFORMATION', // or use "columnGroup" without Translate filterable: true, @@ -136,8 +179,8 @@ export class GridGraphqlComponent implements OnInit, OnDestroy { iconCssClass: 'mdi mdi-calendar', searchTerms: [tempoFormat(new Date(), 'YYYY-MM-DD'), tempoFormat(addDay(new Date(), 20), 'YYYY-MM-DD')], }, - ] - } + ], + }, }, ]; @@ -150,7 +193,7 @@ export class GridGraphqlComponent implements OnInit, OnDestroy { gridWidth: 900, compoundOperatorAltTexts: { // where '=' is any of the `OperatorString` type shown above - text: { 'Custom': { operatorAlt: '%%', descAlt: 'SQL Like' } }, + text: { Custom: { operatorAlt: '%%', descAlt: 'SQL Like' } }, }, enableFiltering: true, enableCellNavigation: true, @@ -167,21 +210,21 @@ export class GridGraphqlComponent implements OnInit, OnDestroy { title: 'Reset Grid', disabled: false, command: 'reset-grid', - positionOrder: 60 - } + positionOrder: 60, + }, ], onCommand: (e, args) => { if (args.command === 'reset-grid') { this.angularGrid.gridService.resetGrid(this.columnDefinitions); localStorage[LOCAL_STORAGE_KEY] = null; } - } + }, }, enablePagination: true, // you could optionally disable the Pagination pagination: { pageSizes: [10, 15, 20, 25, 30, 40, 50, 75, 100], pageSize: defaultPageSize, - totalItems: 0 + totalItems: 0, }, presets: { columns: [ @@ -205,19 +248,22 @@ export class GridGraphqlComponent implements OnInit, OnDestroy { sorters: [ // direction can written as 'asc' (uppercase or lowercase) and/or use the SortDirection type { columnId: 'name', direction: 'asc' }, - { columnId: 'company', direction: SortDirection.DESC } + { columnId: 'company', direction: SortDirection.DESC }, ], - pagination: { pageNumber: this.isWithCursor ? 1 : 2, pageSize: 20 } // if cursor based, start at page 1 + pagination: { pageNumber: this.isWithCursor ? 1 : 2, pageSize: 20 }, // if cursor based, start at page 1 }, backendServiceApi: { service: new GraphqlService(), options: { datasetName: GRAPHQL_QUERY_DATASET_NAME, // the only REQUIRED property - addLocaleIntoQuery: true, // optionally add current locale into the query - extraQueryArguments: [{ // optionally add some extra query arguments as input query arguments - field: 'userId', - value: 123 - }], + addLocaleIntoQuery: true, // optionally add current locale into the query + extraQueryArguments: [ + { + // optionally add some extra query arguments as input query arguments + field: 'userId', + value: 123, + }, + ], filterQueryOverride: ({ fieldName, columnDef, columnFilterOperator, searchValues }) => { if (columnFilterOperator === OperatorType.custom && columnDef?.id === 'name') { // technically speaking GraphQL isn't a database query language like SQL, it's an application query language. @@ -231,7 +277,7 @@ export class GridGraphqlComponent implements OnInit, OnDestroy { useCursor: this.isWithCursor, // sets pagination strategy, if true requires a call to setPageInfo() when graphql call returns // when dealing with complex objects, we want to keep our field name with double quotes // example with gender: query { users (orderBy:[{field:"gender",direction:ASC}]) {} - keepArgumentFieldDoubleQuotes: true + keepArgumentFieldDoubleQuotes: true, }, // you can define the onInit callback OR enable the "executeProcessCommandOnInit" flag in the service init // onInit: (query) => this.getCustomerApiCall(query) @@ -241,8 +287,8 @@ export class GridGraphqlComponent implements OnInit, OnDestroy { this.metrics = result.metrics as Metrics; this.displaySpinner(false); this.cd.detectChanges(); - } - } as GraphqlServiceApi + }, + } as GraphqlServiceApi, }; } @@ -252,7 +298,7 @@ export class GridGraphqlComponent implements OnInit, OnDestroy { displaySpinner(isProcessing: boolean) { this.processing = isProcessing; - this.status = (isProcessing) + this.status = isProcessing ? { text: 'processing...', class: 'alert alert-danger' } : { text: 'finished', class: 'alert alert-success' }; } @@ -281,14 +327,14 @@ export class GridGraphqlComponent implements OnInit, OnDestroy { hasPreviousPage: paginationService.dataFrom === 0, hasNextPage: paginationService.dataTo === 100, startCursor, - endCursor + endCursor, }; } else { pageInfo = { hasPreviousPage: false, hasNextPage: true, startCursor: 'A', - endCursor: 'B' + endCursor: 'B', }; } @@ -301,19 +347,19 @@ export class GridGraphqlComponent implements OnInit, OnDestroy { [GRAPHQL_QUERY_DATASET_NAME]: { nodes: [], totalCount: 100, - pageInfo - } - } + pageInfo, + }, + }, }; - return new Promise(resolve => { + return new Promise((resolve) => { window.setTimeout(() => { this.graphqlQuery = this.angularGrid.backendService!.buildQuery(); if (this.isWithCursor) { // When using cursor pagination, the pagination service needs to be updated with the PageInfo data from the latest request // This might be done automatically if using a framework specific slickgrid library // Note because of this timeout, this may cause race conditions with rapid clicks! - this.angularGrid?.paginationService?.setCursorPageInfo((mockedResult.data[GRAPHQL_QUERY_DATASET_NAME].pageInfo)); + this.angularGrid?.paginationService?.setCursorPageInfo(mockedResult.data[GRAPHQL_QUERY_DATASET_NAME].pageInfo); } resolve(mockedResult); }, this.serverWaitDelay); @@ -386,7 +432,7 @@ export class GridGraphqlComponent implements OnInit, OnDestroy { this.angularGrid.sortService.updateSorting([ // direction can written as 'asc' (uppercase or lowercase) and/or use the SortDirection type { columnId: 'name', direction: 'asc' }, - { columnId: 'company', direction: SortDirection.DESC } + { columnId: 'company', direction: SortDirection.DESC }, ]); window.setTimeout(() => { this.angularGrid.paginationService?.changeItemPerPage(20); @@ -410,7 +456,7 @@ export class GridGraphqlComponent implements OnInit, OnDestroy { } switchLanguage() { - const nextLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en'; + const nextLanguage = this.selectedLanguage === 'en' ? 'fr' : 'en'; this.subscriptions.push( this.translate.use(nextLanguage).subscribe(() => { this.selectedLanguage = nextLanguage; diff --git a/src/app/examples/grid-grouping.component.html b/src/app/examples/grid-grouping.component.html index 2d85783a0..ec4197969 100644 --- a/src/app/examples/grid-grouping.component.html +++ b/src/app/examples/grid-grouping.component.html @@ -1,16 +1,17 @@

- {{title}} + {{ title }} - + code

-
+
@@ -37,28 +38,43 @@

- -
- - - @@ -67,14 +83,16 @@

- + -

\ No newline at end of file +
diff --git a/src/app/examples/grid-grouping.component.ts b/src/app/examples/grid-grouping.component.ts index 71a77e217..2d3990c3c 100644 --- a/src/app/examples/grid-grouping.component.ts +++ b/src/app/examples/grid-grouping.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { TextExportService } from '@slickgrid-universal/text-export'; @@ -18,7 +18,7 @@ import { } from './../modules/angular-slickgrid'; @Component({ - templateUrl: './grid-grouping.component.html' + templateUrl: './grid-grouping.component.html', }) export class GridGroupingComponent implements OnInit { title = 'Example 14: Grouping & Aggregators'; @@ -64,79 +64,106 @@ export class GridGroupingComponent implements OnInit { this.columnDefinitions = [ { - id: 'sel', name: nameElementColumn1, field: 'num', type: FieldType.number, + id: 'sel', + name: nameElementColumn1, + field: 'num', + type: FieldType.number, columnPickerLabel: 'Custom Label', // add a custom label for the ColumnPicker/GridMenu when default header value extractor doesn't work for you () - width: 140, maxWidth: 150, + width: 140, + maxWidth: 150, excludeFromExport: true, resizable: true, filterable: true, selectable: false, - focusable: false + focusable: false, }, { - id: 'title', name: 'Title', field: 'title', + id: 'title', + name: 'Title', + field: 'title', width: 50, minWidth: 50, cssClass: 'cell-title', filterable: true, - sortable: true + sortable: true, }, { - id: 'duration', name: 'Duration', field: 'duration', - minWidth: 50, width: 60, + id: 'duration', + name: 'Duration', + field: 'duration', + minWidth: 50, + width: 60, filterable: true, filter: { model: Filters.slider, operator: '>=' }, sortable: true, type: FieldType.number, groupTotalsFormatter: GroupTotalFormatters.sumTotals, - params: { groupFormatterPrefix: 'Total: ' } + params: { groupFormatterPrefix: 'Total: ' }, }, { - id: '%', name: '% Complete', field: 'percentComplete', - minWidth: 70, width: 90, + id: '%', + name: '% Complete', + field: 'percentComplete', + minWidth: 70, + width: 90, formatter: Formatters.percentCompleteBar, filterable: true, filter: { model: Filters.compoundSlider }, sortable: true, type: FieldType.number, groupTotalsFormatter: GroupTotalFormatters.avgTotalsPercentage, - params: { groupFormatterPrefix: 'Avg: ' } + params: { groupFormatterPrefix: 'Avg: ' }, }, { - id: 'start', name: 'Start', field: 'start', + id: 'start', + name: 'Start', + field: 'start', minWidth: 60, filterable: true, filter: { model: Filters.compoundDate }, sortable: true, type: FieldType.dateIso, formatter: Formatters.dateIso, - exportWithFormatter: true + exportWithFormatter: true, }, { - id: 'finish', name: 'Finish', field: 'finish', + id: 'finish', + name: 'Finish', + field: 'finish', minWidth: 60, filterable: true, filter: { model: Filters.compoundDate }, sortable: true, type: FieldType.dateIso, formatter: Formatters.dateIso, - exportWithFormatter: true + exportWithFormatter: true, }, { - id: 'cost', name: 'Cost', field: 'cost', - minWidth: 70, width: 80, - sortable: true, filterable: true, + id: 'cost', + name: 'Cost', + field: 'cost', + minWidth: 70, + width: 80, + sortable: true, + filterable: true, filter: { model: Filters.compoundInputNumber }, type: FieldType.number, formatter: Formatters.currency, groupTotalsFormatter: GroupTotalFormatters.sumTotalsCurrency, - params: { displayNegativeNumberWithParentheses: true, currencyPrefix: '€', groupFormatterCurrencyPrefix: '€', minDecimal: 2, maxDecimal: 4, groupFormatterPrefix: 'Total: ' }, + params: { + displayNegativeNumberWithParentheses: true, + currencyPrefix: '€', + groupFormatterCurrencyPrefix: '€', + minDecimal: 2, + maxDecimal: 4, + groupFormatterPrefix: 'Total: ', + }, excelExportOptions: { style: { font: { outline: true, italic: true }, format: '€0.00##;[Red](€0.00##)', }, - width: 18 + width: 18, }, groupTotalsExcelExportOptions: { style: { @@ -144,34 +171,41 @@ export class GridGroupingComponent implements OnInit { font: { bold: true, color: 'FF005289', underline: 'single', fontName: 'Consolas', size: 10 }, fill: { type: 'pattern', patternType: 'solid', fgColor: 'FFE6F2F6' }, border: { - top: { color: 'FFa500ff', style: 'thick', }, - left: { color: 'FFa500ff', style: 'medium', }, - right: { color: 'FFa500ff', style: 'dotted', }, - bottom: { color: 'FFa500ff', style: 'double', }, + top: { color: 'FFa500ff', style: 'thick' }, + left: { color: 'FFa500ff', style: 'medium' }, + right: { color: 'FFa500ff', style: 'dotted' }, + bottom: { color: 'FFa500ff', style: 'double' }, }, - format: '"Total: "€0.00##;[Red]"Total: "(€0.00##)' + format: '"Total: "€0.00##;[Red]"Total: "(€0.00##)', }, }, }, { - id: 'effort-driven', name: 'Effort Driven', - minWidth: 20, width: 80, maxWidth: 80, + id: 'effort-driven', + name: 'Effort Driven', + minWidth: 20, + width: 80, + maxWidth: 80, cssClass: 'cell-effort-driven', field: 'effortDriven', formatter: Formatters.checkmarkMaterial, sortable: true, filterable: true, filter: { - collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }], + collection: [ + { value: '', label: '' }, + { value: true, label: 'True' }, + { value: false, label: 'False' }, + ], model: Filters.singleSelect, - } - } + }, + }, ]; this.gridOptions = { autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableExcelExport: true, enableFiltering: true, @@ -180,7 +214,7 @@ export class GridGroupingComponent implements OnInit { enableGrouping: true, enableTextExport: true, gridMenu: { - hideExportTextDelimitedCommand: false + hideExportTextDelimitedCommand: false, }, excelExportOptions: { sanitizeDataExport: true }, textExportOptions: { sanitizeDataExport: true }, @@ -190,7 +224,7 @@ export class GridGroupingComponent implements OnInit { // optionally display some text on the left footer container hideMetrics: false, hideTotalItemCount: false, - hideLastUpdateTimestamp: false + hideLastUpdateTimestamp: false, }, }; @@ -209,9 +243,9 @@ export class GridGroupingComponent implements OnInit { for (let i = 0; i < rowCount; i++) { const randomYear = 2000 + Math.floor(Math.random() * 10); const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); + const randomDay = Math.floor(Math.random() * 29); const randomPercent = Math.round(Math.random() * 100); - const randomCost = (i % 33 === 0) ? null : Math.round(Math.random() * 10000) / 100; + const randomCost = i % 33 === 0 ? null : Math.round(Math.random() * 10000) / 100; tmpData[i] = { id: 'id_' + i, @@ -221,9 +255,9 @@ export class GridGroupingComponent implements OnInit { percentComplete: randomPercent, percentCompleteNumber: randomPercent, start: new Date(randomYear, randomMonth, randomDay), - finish: new Date(randomYear, (randomMonth + 1), randomDay), + finish: new Date(randomYear, randomMonth + 1, randomDay), cost: i % 3 ? randomCost : randomCost !== null ? -randomCost : null, - effortDriven: (i % 5 === 0) + effortDriven: i % 5 === 0, }; } this.dataset = tmpData; @@ -244,7 +278,7 @@ export class GridGroupingComponent implements OnInit { exportToExcel() { this.excelExportService.exportToExcel({ filename: 'Export', - format: FileType.xlsx + format: FileType.xlsx, }); } @@ -254,13 +288,10 @@ export class GridGroupingComponent implements OnInit { this.dataviewObj.setGrouping({ getter: 'duration', formatter: (g) => `Duration: ${g.value} (${g.count} items)`, - aggregators: [ - new Aggregators.Avg('percentComplete'), - new Aggregators.Sum('cost') - ], + aggregators: [new Aggregators.Avg('percentComplete'), new Aggregators.Sum('cost')], comparer: (a, b) => SortComparers.numeric(a.value, b.value, SortDirectionNumber.asc), aggregateCollapsed: false, - lazyTotalsCalculation: true + lazyTotalsCalculation: true, } as Grouping); this.gridObj.invalidate(); // invalidate all rows and re-render } @@ -273,41 +304,35 @@ export class GridGroupingComponent implements OnInit { comparer: (a, b) => { return a.count - b.count; }, - aggregators: [ - new Aggregators.Avg('percentComplete'), - new Aggregators.Sum('cost') - ], + aggregators: [new Aggregators.Avg('percentComplete'), new Aggregators.Sum('cost')], aggregateCollapsed, - lazyTotalsCalculation: true + lazyTotalsCalculation: true, } as Grouping); this.gridObj.invalidate(); // invalidate all rows and re-render } groupByDurationEffortDriven() { // you need to manually add the sort icon(s) in UI - const sortColumns = [{ columnId: 'duration', sortAsc: true }, { columnId: 'effortDriven', sortAsc: true }]; + const sortColumns = [ + { columnId: 'duration', sortAsc: true }, + { columnId: 'effortDriven', sortAsc: true }, + ]; this.angularGrid.filterService.setSortColumnIcons(sortColumns); this.dataviewObj.setGrouping([ { getter: 'duration', formatter: (g) => `Duration: ${g.value} (${g.count} items)`, - aggregators: [ - new Aggregators.Sum('duration'), - new Aggregators.Sum('cost') - ], + aggregators: [new Aggregators.Sum('duration'), new Aggregators.Sum('cost')], aggregateCollapsed: true, - lazyTotalsCalculation: true + lazyTotalsCalculation: true, }, { getter: 'effortDriven', - formatter: (g) => `Effort-Driven: ${(g.value ? 'True' : 'False')} (${g.count} items)`, - aggregators: [ - new Aggregators.Avg('percentComplete'), - new Aggregators.Sum('cost') - ], + formatter: (g) => `Effort-Driven: ${g.value ? 'True' : 'False'} (${g.count} items)`, + aggregators: [new Aggregators.Avg('percentComplete'), new Aggregators.Sum('cost')], collapsed: true, - lazyTotalsCalculation: true - } + lazyTotalsCalculation: true, + }, ] as Grouping[]); this.gridObj.invalidate(); // invalidate all rows and re-render } @@ -317,39 +342,31 @@ export class GridGroupingComponent implements OnInit { const sortColumns = [ { columnId: 'duration', sortAsc: true }, { columnId: 'effortDriven', sortAsc: true }, - { columnId: 'percentComplete', sortAsc: true } + { columnId: 'percentComplete', sortAsc: true }, ]; this.angularGrid.filterService.setSortColumnIcons(sortColumns); this.dataviewObj.setGrouping([ { getter: 'duration', formatter: (g) => `Duration: ${g.value} (${g.count} items)`, - aggregators: [ - new Aggregators.Sum('duration'), - new Aggregators.Sum('cost') - ], + aggregators: [new Aggregators.Sum('duration'), new Aggregators.Sum('cost')], aggregateCollapsed: true, - lazyTotalsCalculation: true + lazyTotalsCalculation: true, }, { getter: 'effortDriven', - formatter: (g) => `Effort-Driven: ${(g.value ? 'True' : 'False')} (${g.count} items)`, - aggregators: [ - new Aggregators.Sum('duration'), - new Aggregators.Sum('cost') - ], - lazyTotalsCalculation: true + formatter: (g) => `Effort-Driven: ${g.value ? 'True' : 'False'} (${g.count} items)`, + aggregators: [new Aggregators.Sum('duration'), new Aggregators.Sum('cost')], + lazyTotalsCalculation: true, }, { getter: 'percentComplete', formatter: (g) => `% Complete: ${g.value} (${g.count} items)`, - aggregators: [ - new Aggregators.Avg('percentComplete') - ], + aggregators: [new Aggregators.Avg('percentComplete')], aggregateCollapsed: true, collapsed: true, - lazyTotalsCalculation: true - } + lazyTotalsCalculation: true, + }, ] as Grouping[]); this.gridObj.invalidate(); // invalidate all rows and re-render } diff --git a/src/app/examples/grid-header-footer.component.html b/src/app/examples/grid-header-footer.component.html index 7339d4f83..1494e139f 100644 --- a/src/app/examples/grid-header-footer.component.html +++ b/src/app/examples/grid-header-footer.component.html @@ -13,12 +13,7 @@

- +

Grid with header and footer slot

 diff --git a/src/app/examples/grid-header-footer.component.ts b/src/app/examples/grid-header-footer.component.ts index ec8a4b103..9d877e675 100644 --- a/src/app/examples/grid-header-footer.component.ts +++ b/src/app/examples/grid-header-footer.component.ts @@ -5,7 +5,7 @@ const NB_ITEMS = 995; @Component({ template: ` -
You've clicked me {{clickedTimes}} time(s)
`, +
You've clicked me {{ clickedTimes }} time(s)
`, selector: 'custom-footer', }) export class CustomFooterComponent { @@ -39,7 +39,7 @@ export class GridHeaderFooterComponent implements OnInit { { id: '%', name: '% Complete', field: 'percentComplete', sortable: true }, { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso }, { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso }, - { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true } + { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true }, ]; this.gridOptions = { enableAutoResize: false, @@ -57,7 +57,7 @@ export class GridHeaderFooterComponent implements OnInit { for (let i = 0; i < count; i++) { const randomYear = 2000 + Math.floor(Math.random() * 10); const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); + const randomDay = Math.floor(Math.random() * 29); const randomPercent = Math.round(Math.random() * 100); mockDataset[i] = { @@ -67,7 +67,7 @@ export class GridHeaderFooterComponent implements OnInit { percentComplete: randomPercent, start: new Date(randomYear, randomMonth + 1, randomDay), finish: new Date(randomYear + 1, randomMonth + 1, randomDay), - effortDriven: (i % 5 === 0) + effortDriven: i % 5 === 0, }; } diff --git a/src/app/examples/grid-headerbutton.component.html b/src/app/examples/grid-headerbutton.component.html index efcb46b5e..4a7fed8b4 100644 --- a/src/app/examples/grid-headerbutton.component.html +++ b/src/app/examples/grid-headerbutton.component.html @@ -1,10 +1,12 @@

- {{title}} + {{ title }} - + code @@ -12,20 +14,23 @@

Grid 1
- +
Grid 2 - with both Header Buttons & Menus
- + - -
\ No newline at end of file +
diff --git a/src/app/examples/grid-headerbutton.component.ts b/src/app/examples/grid-headerbutton.component.ts index 760891043..f763c0f74 100644 --- a/src/app/examples/grid-headerbutton.component.ts +++ b/src/app/examples/grid-headerbutton.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; -import { AngularGridInstance, Column, GridOption, } from './../modules/angular-slickgrid'; +import { AngularGridInstance, Column, GridOption } from './../modules/angular-slickgrid'; // create a custom Formatter to highlight negative values in red let columns1WithHighlightingById: any = {}; @@ -9,7 +9,7 @@ let columns2WithHighlightingById: any = {}; @Component({ styleUrls: ['./grid-headerbutton.component.scss'], encapsulation: ViewEncapsulation.None, - templateUrl: './grid-headerbutton.component.html' + templateUrl: './grid-headerbutton.component.html', }) export class GridHeaderButtonComponent implements OnInit { title = 'Example 7: Header Button Plugin'; @@ -67,7 +67,7 @@ export class GridHeaderButtonComponent implements OnInit { enableHeaderMenu: false, autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableFiltering: false, enableExcelCopyBuffer: true, @@ -80,8 +80,8 @@ export class GridHeaderButtonComponent implements OnInit { gridHeight: 275, headerButton: { // you can use the "onCommand" (in Grid Options) and/or the "action" callback (in Column Definition) - onCommand: (_e, args) => this.handleOnCommand(_e, args, 1) - } + onCommand: (_e, args) => this.handleOnCommand(_e, args, 1), + }, }; // grid 2 options, same as grid 1 + extras @@ -93,8 +93,8 @@ export class GridHeaderButtonComponent implements OnInit { // frozenRow: 2, headerButton: { // when floating to left, you might want to inverse the icon orders - onCommand: (_e, args) => this.handleOnCommand(_e, args, 2) - } + onCommand: (_e, args) => this.handleOnCommand(_e, args, 2), + }, }; } @@ -161,10 +161,10 @@ export class GridHeaderButtonComponent implements OnInit { // you can use the "action" callback and/or subscribe to the "onCallback" event, they both have the same arguments // do something console.log(`execute a callback action to "${args.command}" on ${args.column.name}`); - } - } - ] - } + }, + }, + ], + }, }); } @@ -176,27 +176,27 @@ export class GridHeaderButtonComponent implements OnInit { cssClass: 'mdi mdi-message-text', handler: () => { alert('Tag'); - } + }, }, { cssClass: 'mdi mdi-forum-outline', handler: () => { alert('Comment'); - } + }, }, { cssClass: 'mdi mdi-information', handler: () => { alert('Info'); - } + }, }, { cssClass: 'mdi mdi-help-circle', handler: () => { alert('Help'); - } - } - ] + }, + }, + ], }; // when floating to left, you might want to inverse the icon orders @@ -214,9 +214,9 @@ export class GridHeaderButtonComponent implements OnInit { tooltip: 'This button only appears on hover.', handler: () => { alert('Help'); - } - } - ] + }, + }, + ], }; // mock a dataset @@ -230,4 +230,4 @@ export class GridHeaderButtonComponent implements OnInit { } return mockDataset; } -} \ No newline at end of file +} diff --git a/src/app/examples/grid-headermenu.component.html b/src/app/examples/grid-headermenu.component.html index 6c8789f88..7cbea4c3c 100644 --- a/src/app/examples/grid-headermenu.component.html +++ b/src/app/examples/grid-headermenu.component.html @@ -1,10 +1,12 @@

- {{title}} + {{ title }} - + code @@ -17,14 +19,11 @@

Locale: - {{selectedLanguage + '.json'}} + {{ selectedLanguage + '.json' }}
- +
-

\ No newline at end of file +
diff --git a/src/app/examples/grid-headermenu.component.ts b/src/app/examples/grid-headermenu.component.ts index eedccc959..1bd9fe2ab 100644 --- a/src/app/examples/grid-headermenu.component.ts +++ b/src/app/examples/grid-headermenu.component.ts @@ -55,7 +55,7 @@ export class GridHeaderMenuComponent implements OnInit, OnDestroy { { id: 'percentComplete', name: '% Complete', field: 'percentComplete', nameKey: 'PERCENT_COMPLETE', sortable: true }, { id: 'start', name: 'Start', field: 'start', nameKey: 'START' }, { id: 'finish', name: 'Finish', field: 'finish', nameKey: 'FINISH' }, - { id: 'completed', name: 'Completed', field: 'completed', nameKey: 'COMPLETED' } + { id: 'completed', name: 'Completed', field: 'completed', nameKey: 'COMPLETED' }, ]; this.columnDefinitions.forEach((columnDef) => { @@ -76,8 +76,8 @@ export class GridHeaderMenuComponent implements OnInit, OnDestroy { titleKey: 'HELP', // use "title" as plain string OR "titleKey" when using a translation key command: 'help', tooltip: 'Need assistance?', - cssClass: 'bold', // container css class - textCssClass: (columnDef.id === 'title' || columnDef.id === 'completed') ? '' : 'blue', // just the text css class + cssClass: 'bold', // container css class + textCssClass: columnDef.id === 'title' || columnDef.id === 'completed' ? '' : 'blue', // just the text css class positionOrder: 99, itemUsabilityOverride: (args) => { // for example if we want to disable the "Help" command over the "Title" and "Completed" column @@ -85,12 +85,12 @@ export class GridHeaderMenuComponent implements OnInit, OnDestroy { }, itemVisibilityOverride: (args) => { // for example don't show Help on column "% Complete" - return (args.column.id !== 'percentComplete'); + return args.column.id !== 'percentComplete'; }, action: (e, args) => { // you can use the "action" callback and/or subscribe to the "onCallback" event, they both have the same arguments console.log('execute an action on Help', args); - } + }, }, // you can also add divider between commands (command is a required property but you can set it to empty string) { divider: true, command: '', positionOrder: 98 }, @@ -100,38 +100,55 @@ export class GridHeaderMenuComponent implements OnInit, OnDestroy { // 'divider', { // we can also have multiple nested sub-menus - command: 'custom-actions', title: 'Hello', positionOrder: 99, + command: 'custom-actions', + title: 'Hello', + positionOrder: 99, commandItems: [ { command: 'hello-world', title: 'Hello World' }, { command: 'hello-slickgrid', title: 'Hello SlickGrid' }, { - command: 'sub-menu', title: `Let's play`, cssClass: 'green', subMenuTitle: 'choose your game', subMenuTitleCssClass: 'text-italic salmon', + command: 'sub-menu', + title: `Let's play`, + cssClass: 'green', + subMenuTitle: 'choose your game', + subMenuTitleCssClass: 'text-italic salmon', commandItems: [ { command: 'sport-badminton', title: 'Badminton' }, { command: 'sport-tennis', title: 'Tennis' }, { command: 'sport-racquetball', title: 'Racquetball' }, { command: 'sport-squash', title: 'Squash' }, - ] - } - ] + ], + }, + ], }, { - command: 'feedback', title: 'Feedback', positionOrder: 100, + command: 'feedback', + title: 'Feedback', + positionOrder: 100, commandItems: [ - { command: 'request-update', title: 'Request update from supplier', iconCssClass: 'mdi mdi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' }, + { + command: 'request-update', + title: 'Request update from supplier', + iconCssClass: 'mdi mdi-star', + tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update', + }, 'divider', { - command: 'sub-menu', title: 'Contact Us', iconCssClass: 'mdi mdi-account', subMenuTitle: 'contact us...', subMenuTitleCssClass: 'italic', + command: 'sub-menu', + title: 'Contact Us', + iconCssClass: 'mdi mdi-account', + subMenuTitle: 'contact us...', + subMenuTitleCssClass: 'italic', commandItems: [ { command: 'contact-email', title: 'Email us', iconCssClass: 'mdi mdi-pencil-outline' }, { command: 'contact-chat', title: 'Chat with us', iconCssClass: 'mdi mdi-message-text-outline' }, { command: 'contact-meeting', title: 'Book an appointment', iconCssClass: 'mdi mdi-coffee' }, - ] - } - ] - } - ] - } + ], + }, + ], + }, + ], + }, }; }); @@ -140,7 +157,7 @@ export class GridHeaderMenuComponent implements OnInit, OnDestroy { enableHeaderMenu: true, autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableFiltering: false, enableCellNavigation: true, @@ -164,7 +181,7 @@ export class GridHeaderMenuComponent implements OnInit, OnDestroy { }, }, enableTranslate: true, - i18n: this.translate + i18n: this.translate, }; this.getData(); @@ -181,14 +198,14 @@ export class GridHeaderMenuComponent implements OnInit, OnDestroy { percentComplete: Math.round(Math.random() * 100), start: '01/01/2009', finish: '01/05/2009', - completed: (i % 5 === 0) + completed: i % 5 === 0, }; } this.dataset = mockDataset; } switchLanguage() { - const nextLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en'; + const nextLanguage = this.selectedLanguage === 'en' ? 'fr' : 'en'; this.subscriptions.push( this.translate.use(nextLanguage).subscribe(() => { this.selectedLanguage = nextLanguage; diff --git a/src/app/examples/grid-infinite-graphql.component.html b/src/app/examples/grid-infinite-graphql.component.html index 21ba599da..f96155228 100644 --- a/src/app/examples/grid-infinite-graphql.component.html +++ b/src/app/examples/grid-infinite-graphql.component.html @@ -2,9 +2,11 @@

Example 39: GraphQL Backend Service with Infinite Scroll - + code @@ -13,22 +15,24 @@

  • - Infinite scrolling allows the grid to lazy-load rows from the server when reaching the scroll bottom (end) position. - In its simplest form, the more the user scrolls down, the more rows get loaded. - If we reached the end of the dataset and there is no more data to load, then we'll assume to have the entire dataset loaded in memory. - This contrast with the regular Pagination approach which will only hold a single page data at a time. + Infinite scrolling allows the grid to lazy-load rows from the server when reaching the scroll bottom (end) position. In + its simplest form, the more the user scrolls down, the more rows get loaded. If we reached the end of the dataset and + there is no more data to load, then we'll assume to have the entire dataset loaded in memory. This contrast with the + regular Pagination approach which will only hold a single page data at a time.
  • NOTES
    1. - presets.pagination is not supported with Infinite Scroll and will revert to the first page, - simply because since we keep appending data, we always have to start from index zero (no offset). + presets.pagination is not supported with Infinite Scroll and will revert to the first page, simply because + since we keep appending data, we always have to start from index zero (no offset).
    2. - Pagination is not shown BUT in fact, that is what is being used behind the scene whenever reaching the scroll end (fetching next batch). + Pagination is not shown BUT in fact, that is what is being used behind the scene whenever reaching the scroll end + (fetching next batch).
    3. - Also note that whenever the user changes the Sort(s)/Filter(s) it will always reset and go back to zero index (first page). + Also note that whenever the user changes the Sort(s)/Filter(s) it will always reset and go back to zero index (first + page).
@@ -37,7 +41,7 @@
- Status: {{status.text}} + Status: {{ status.text }} @@ -45,15 +49,24 @@
- - +
@@ -64,7 +77,7 @@
Locale: - {{selectedLanguage + '.json'}} + {{ selectedLanguage + '.json' }}
@@ -72,13 +85,15 @@
Metrics: - {{metrics.endTime | date: 'dd MMM, h:mm:ssa'}} — - {{metrics.itemCount}} + {{ metrics.endTime | date: 'dd MMM, h:mm:ssa' }} — + {{ metrics.itemCount }} of - {{metrics.totalItemCount}} + {{ metrics.totalItemCount }} items - All Data Loaded!!! + All Data Loaded!!!
@@ -90,11 +105,13 @@
- + (onRowCountChanged)="refreshMetrics($event.detail.args)" + > diff --git a/src/app/examples/grid-infinite-graphql.component.ts b/src/app/examples/grid-infinite-graphql.component.ts index d3931efcd..8936cafa7 100644 --- a/src/app/examples/grid-infinite-graphql.component.ts +++ b/src/app/examples/grid-infinite-graphql.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { TranslateService } from '@ngx-translate/core'; -import { GraphqlService, type GraphqlPaginatedResult, type GraphqlServiceApi, } from '@slickgrid-universal/graphql'; +import { GraphqlService, type GraphqlPaginatedResult, type GraphqlServiceApi } from '@slickgrid-universal/graphql'; import { Subscription } from 'rxjs'; import { @@ -27,7 +27,7 @@ function unescapeAndLowerCase(val: string) { @Component({ styleUrls: ['./grid-infinite-graphql.component.scss'], encapsulation: ViewEncapsulation.None, - templateUrl: './grid-infinite-graphql.component.html' + templateUrl: './grid-infinite-graphql.component.html', }) export class GridInfiniteGraphqlComponent implements OnInit, OnDestroy { private subscriptions: Subscription[] = []; @@ -44,7 +44,11 @@ export class GridInfiniteGraphqlComponent implements OnInit, OnDestroy { status = { text: 'processing...', class: 'alert alert-danger' }; serverWaitDelay = FAKE_SERVER_DELAY; // server simulation with default of 250ms but 50ms for Cypress tests - constructor(private readonly cd: ChangeDetectorRef, private http: HttpClient, private translate: TranslateService) { + constructor( + private readonly cd: ChangeDetectorRef, + private http: HttpClient, + private translate: TranslateService + ) { this.backendService = new GraphqlService(); // always start with English for Cypress E2E tests to be consistent const defaultLang = 'en'; @@ -68,40 +72,55 @@ export class GridInfiniteGraphqlComponent implements OnInit, OnDestroy { initializeGrid() { this.columnDefinitions = [ { - id: 'name', field: 'name', nameKey: 'NAME', width: 60, + id: 'name', + field: 'name', + nameKey: 'NAME', + width: 60, type: FieldType.string, sortable: true, filterable: true, filter: { model: Filters.compoundInput, - } + }, }, { - id: 'gender', field: 'gender', nameKey: 'GENDER', filterable: true, sortable: true, width: 60, + id: 'gender', + field: 'gender', + nameKey: 'GENDER', + filterable: true, + sortable: true, + width: 60, filter: { model: Filters.singleSelect, - collection: [{ value: '', label: '' }, { value: 'male', labelKey: 'MALE', }, { value: 'female', labelKey: 'FEMALE', }] - } + collection: [ + { value: '', label: '' }, + { value: 'male', labelKey: 'MALE' }, + { value: 'female', labelKey: 'FEMALE' }, + ], + }, }, { - id: 'company', field: 'company', nameKey: 'COMPANY', width: 60, + id: 'company', + field: 'company', + nameKey: 'COMPANY', + width: 60, sortable: true, filterable: true, filter: { model: Filters.multipleSelect, customStructure: { label: 'company', - value: 'company' + value: 'company', }, collectionSortBy: { property: 'company', - sortDesc: false + sortDesc: false, }, collectionAsync: this.http.get(`${sampleDataRoot}/customers_100.json`), filterOptions: { - filter: true // adds a filter on top of the multi-select dropdown - } as MultipleSelectOption - } + filter: true, // adds a filter on top of the multi-select dropdown + } as MultipleSelectOption, + }, }, ]; @@ -109,11 +128,11 @@ export class GridInfiniteGraphqlComponent implements OnInit, OnDestroy { enableAutoResize: true, autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableAutoTooltip: true, autoTooltipOptions: { - enableForHeaderCells: true + enableForHeaderCells: true, }, enableTranslate: true, i18n: this.translate, @@ -129,11 +148,14 @@ export class GridInfiniteGraphqlComponent implements OnInit, OnDestroy { service: this.backendService, options: { datasetName: GRAPHQL_QUERY_DATASET_NAME, // the only REQUIRED property - addLocaleIntoQuery: true, // optionally add current locale into the query - extraQueryArguments: [{ // optionally add some extra query arguments as input query arguments - field: 'userId', - value: 123 - }], + addLocaleIntoQuery: true, // optionally add current locale into the query + extraQueryArguments: [ + { + // optionally add some extra query arguments as input query arguments + field: 'userId', + value: 123, + }, + ], // enable infinite via Boolean OR via { fetchSize: number } infiniteScroll: { fetchSize: 30 }, // or use true, in that case it would use default size of 25 }, @@ -145,12 +167,12 @@ export class GridInfiniteGraphqlComponent implements OnInit, OnDestroy { this.metrics = { endTime: new Date(), totalItemCount: result.data[GRAPHQL_QUERY_DATASET_NAME].totalCount || 0, - } + }; this.displaySpinner(false); this.getCustomerCallback(result); this.cd.detectChanges(); - } - } as GraphqlServiceApi + }, + } as GraphqlServiceApi, }; } @@ -162,7 +184,7 @@ export class GridInfiniteGraphqlComponent implements OnInit, OnDestroy { displaySpinner(isProcessing: boolean) { this.processing = isProcessing; - this.status = (isProcessing) + this.status = isProcessing ? { text: 'processing...', class: 'alert alert-danger' } : { text: 'finished', class: 'alert alert-success' }; } @@ -206,13 +228,19 @@ export class GridInfiniteGraphqlComponent implements OnInit, OnDestroy { } getCustomerDataApiMock(query: string): Promise { - return new Promise(resolve => { + return new Promise((resolve) => { let firstCount = 0; let offset = 0; let orderByField = ''; let orderByDir = ''; this.http.get(`${sampleDataRoot}/customers_100.json`).subscribe((response: any) => { - let filteredData: Array<{ id: number; name: string; gender: string; company: string; category: { id: number; name: string; }; }> = response; + let filteredData: Array<{ + id: number; + name: string; + gender: string; + company: string; + category: { id: number; name: string }; + }> = response; if (query.includes('first:')) { const topMatch = query.match(/first:([0-9]+),/) || []; firstCount = +topMatch[1]; @@ -251,17 +279,28 @@ export class GridInfiniteGraphqlComponent implements OnInit, OnDestroy { term2 = unescapeAndLowerCase(term2 || ''); switch (operator) { - case 'EQ': return dcVal.toLowerCase() === term1; - case 'NE': return dcVal.toLowerCase() !== term1; - case 'LE': return dcVal.toLowerCase() <= term1; - case 'LT': return dcVal.toLowerCase() < term1; - case 'GT': return dcVal.toLowerCase() > term1; - case 'GE': return dcVal.toLowerCase() >= term1; - case 'EndsWith': return dcVal.toLowerCase().endsWith(term1); - case 'StartsWith': return dcVal.toLowerCase().startsWith(term1); - case 'Starts+Ends': return dcVal.toLowerCase().startsWith(term1) && dcVal.toLowerCase().endsWith(term2); - case 'Contains': return dcVal.toLowerCase().includes(term1); - case 'Not_Contains': return !dcVal.toLowerCase().includes(term1); + case 'EQ': + return dcVal.toLowerCase() === term1; + case 'NE': + return dcVal.toLowerCase() !== term1; + case 'LE': + return dcVal.toLowerCase() <= term1; + case 'LT': + return dcVal.toLowerCase() < term1; + case 'GT': + return dcVal.toLowerCase() > term1; + case 'GE': + return dcVal.toLowerCase() >= term1; + case 'EndsWith': + return dcVal.toLowerCase().endsWith(term1); + case 'StartsWith': + return dcVal.toLowerCase().startsWith(term1); + case 'Starts+Ends': + return dcVal.toLowerCase().startsWith(term1) && dcVal.toLowerCase().endsWith(term2); + case 'Contains': + return dcVal.toLowerCase().includes(term1); + case 'Not_Contains': + return !dcVal.toLowerCase().includes(term1); case 'IN': const terms = value.toLocaleLowerCase().split(','); for (const term of terms) { @@ -284,7 +323,7 @@ export class GridInfiniteGraphqlComponent implements OnInit, OnDestroy { } // sorting when defined - const selector = (obj: any) => orderByField ? obj[orderByField] : obj; + const selector = (obj: any) => (orderByField ? obj[orderByField] : obj); switch (orderByDir.toUpperCase()) { case 'ASC': filteredData = filteredData.sort((a, b) => selector(a).localeCompare(selector(b))); @@ -321,14 +360,12 @@ export class GridInfiniteGraphqlComponent implements OnInit, OnDestroy { refreshMetrics(args: OnRowCountChangedEventArgs) { if (args?.current >= 0) { this.metrics.itemCount = this.angularGrid.dataView?.getFilteredItemCount() || 0; - this.tagDataClass = this.metrics.itemCount === this.metrics.totalItemCount - ? 'fully-loaded' - : 'partial-load'; + this.tagDataClass = this.metrics.itemCount === this.metrics.totalItemCount ? 'fully-loaded' : 'partial-load'; } } switchLanguage() { - const nextLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en'; + const nextLanguage = this.selectedLanguage === 'en' ? 'fr' : 'en'; this.subscriptions.push( this.translate.use(nextLanguage).subscribe(() => { this.selectedLanguage = nextLanguage; diff --git a/src/app/examples/grid-infinite-json.component.html b/src/app/examples/grid-infinite-json.component.html index 883d22ade..bdb2b2b20 100644 --- a/src/app/examples/grid-infinite-json.component.html +++ b/src/app/examples/grid-infinite-json.component.html @@ -2,9 +2,11 @@

Example 40: Infinite Scroll from JSON data - + code @@ -13,19 +15,24 @@

  • - Infinite scrolling allows the grid to lazy-load rows from the server when reaching the scroll bottom (end) position. - In its simplest form, the more the user scrolls down, the more rows get loaded. + Infinite scrolling allows the grid to lazy-load rows from the server when reaching the scroll bottom (end) position. In + its simplest form, the more the user scrolls down, the more rows get loaded.
    • -
  • NOTES: presets.pagination is not supported with Infinite Scroll and will revert to the first page, - simply because since we keep appending data, we always have to start from index zero (no offset). +
  • + NOTES: presets.pagination is not supported with Infinite Scroll and will revert to the first page, simply + because since we keep appending data, we always have to start from index zero (no offset).
- @@ -40,31 +47,29 @@
- - + +
Metrics: - {{metrics.endTime | date: 'dd MMM, h:mm:ssa'}} — - {{metrics.totalItemCount}} + {{ metrics.endTime | date: 'dd MMM, h:mm:ssa' }} — + {{ metrics.totalItemCount }} items
- + (onRowCountChanged)="refreshMetrics($event.detail.args)" + > diff --git a/src/app/examples/grid-infinite-json.component.ts b/src/app/examples/grid-infinite-json.component.ts index c950d5d3e..f47479d8b 100644 --- a/src/app/examples/grid-infinite-json.component.ts +++ b/src/app/examples/grid-infinite-json.component.ts @@ -11,13 +11,13 @@ import { type Metrics, type OnRowCountChangedEventArgs, SortComparers, - SortDirectionNumber + SortDirectionNumber, } from '../modules/angular-slickgrid'; const FETCH_SIZE = 50; @Component({ - templateUrl: './grid-infinite-json.component.html' + templateUrl: './grid-infinite-json.component.html', }) export class GridInfiniteJsonComponent implements OnInit { angularGrid!: AngularGridInstance; @@ -43,17 +43,57 @@ export class GridInfiniteJsonComponent implements OnInit { defineGrid() { this.columnDefinitions = [ { id: 'title', name: 'Title', field: 'title', sortable: true, minWidth: 100, filterable: true }, - { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, minWidth: 100, filterable: true, type: FieldType.number }, - { id: 'percentComplete', name: '% Complete', field: 'percentComplete', sortable: true, minWidth: 100, filterable: true, type: FieldType.number }, - { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate } }, - { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate } }, - { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true, minWidth: 100, filterable: true, formatter: Formatters.checkmarkMaterial } + { + id: 'duration', + name: 'Duration (days)', + field: 'duration', + sortable: true, + minWidth: 100, + filterable: true, + type: FieldType.number, + }, + { + id: 'percentComplete', + name: '% Complete', + field: 'percentComplete', + sortable: true, + minWidth: 100, + filterable: true, + type: FieldType.number, + }, + { + id: 'start', + name: 'Start', + field: 'start', + formatter: Formatters.dateIso, + exportWithFormatter: true, + filterable: true, + filter: { model: Filters.compoundDate }, + }, + { + id: 'finish', + name: 'Finish', + field: 'finish', + formatter: Formatters.dateIso, + exportWithFormatter: true, + filterable: true, + filter: { model: Filters.compoundDate }, + }, + { + id: 'effort-driven', + name: 'Effort Driven', + field: 'effortDriven', + sortable: true, + minWidth: 100, + filterable: true, + formatter: Formatters.checkmarkMaterial, + }, ]; this.gridOptions = { autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableAutoResize: true, enableFiltering: true, @@ -68,9 +108,9 @@ export class GridInfiniteJsonComponent implements OnInit { handleOnScroll(args: any) { const viewportElm = args.grid.getViewportNode(); if ( - ['mousewheel', 'scroll'].includes(args.triggeredBy || '') - && viewportElm.scrollTop > 0 - && Math.ceil(viewportElm.offsetHeight + args.scrollTop) >= args.scrollHeight + ['mousewheel', 'scroll'].includes(args.triggeredBy || '') && + viewportElm.scrollTop > 0 && + Math.ceil(viewportElm.offsetHeight + args.scrollTop) >= args.scrollHeight ) { console.log('onScroll end reached, add more items'); const startIdx = this.angularGrid.dataView?.getItemCount() || 0; @@ -95,12 +135,9 @@ export class GridInfiniteJsonComponent implements OnInit { getter: 'duration', formatter: (g) => `Duration: ${g.value} (${g.count} items)`, comparer: (a, b) => SortComparers.numeric(a.value, b.value, SortDirectionNumber.asc), - aggregators: [ - new Aggregators.Avg('percentComplete'), - new Aggregators.Sum('cost') - ], + aggregators: [new Aggregators.Avg('percentComplete'), new Aggregators.Sum('cost')], aggregateCollapsed: false, - lazyTotalsCalculation: true + lazyTotalsCalculation: true, } as Grouping); // you need to manually add the sort icon(s) in UI @@ -120,7 +157,7 @@ export class GridInfiniteJsonComponent implements OnInit { newItem(idx: number) { const randomYear = 2000 + Math.floor(Math.random() * 10); const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); + const randomDay = Math.floor(Math.random() * 29); const randomPercent = Math.round(Math.random() * 100); return { @@ -130,7 +167,7 @@ export class GridInfiniteJsonComponent implements OnInit { percentComplete: randomPercent, start: new Date(randomYear, randomMonth + 1, randomDay), finish: new Date(randomYear + 1, randomMonth + 1, randomDay), - effortDriven: (idx % 5 === 0) + effortDriven: idx % 5 === 0, }; } @@ -146,9 +183,7 @@ export class GridInfiniteJsonComponent implements OnInit { setFiltersDynamically() { // we can Set Filters Dynamically (or different filters) afterward through the FilterService - this.angularGrid?.filterService.updateFilters([ - { columnId: 'percentComplete', searchTerms: ['50'], operator: '>=' }, - ]); + this.angularGrid?.filterService.updateFilters([{ columnId: 'percentComplete', searchTerms: ['50'], operator: '>=' }]); } refreshMetrics(args: OnRowCountChangedEventArgs) { @@ -159,8 +194,6 @@ export class GridInfiniteJsonComponent implements OnInit { } setSortingDynamically() { - this.angularGrid?.sortService.updateSorting([ - { columnId: 'title', direction: 'DESC' }, - ]); + this.angularGrid?.sortService.updateSorting([{ columnId: 'title', direction: 'DESC' }]); } } diff --git a/src/app/examples/grid-infinite-odata.component.html b/src/app/examples/grid-infinite-odata.component.html index 0cea4bdda..9467dc718 100644 --- a/src/app/examples/grid-infinite-odata.component.html +++ b/src/app/examples/grid-infinite-odata.component.html @@ -2,9 +2,11 @@

Example 38: OData (v4) Backend Service with Infinite Scroll - + code @@ -13,22 +15,24 @@

  • - Infinite scrolling allows the grid to lazy-load rows from the server when reaching the scroll bottom (end) position. - In its simplest form, the more the user scrolls down, the more rows get loaded. - If we reached the end of the dataset and there is no more data to load, then we'll assume to have the entire dataset loaded in memory. - This contrast with the regular Pagination approach which will only hold a single page data at a time. + Infinite scrolling allows the grid to lazy-load rows from the server when reaching the scroll bottom (end) position. In + its simplest form, the more the user scrolls down, the more rows get loaded. If we reached the end of the dataset and + there is no more data to load, then we'll assume to have the entire dataset loaded in memory. This contrast with the + regular Pagination approach which will only hold a single page data at a time.
  • NOTES
    1. - presets.pagination is not supported with Infinite Scroll and will revert to the first page, - simply because since we keep appending data, we always have to start from index zero (no offset). + presets.pagination is not supported with Infinite Scroll and will revert to the first page, simply because + since we keep appending data, we always have to start from index zero (no offset).
    2. - Pagination is not shown BUT in fact, that is what is being used behind the scene whenever reaching the scroll end (fetching next batch). + Pagination is not shown BUT in fact, that is what is being used behind the scene whenever reaching the scroll end + (fetching next batch).
    3. - Also note that whenever the user changes the Sort(s)/Filter(s) it will always reset and go back to zero index (first page). + Also note that whenever the user changes the Sort(s)/Filter(s) it will always reset and go back to zero index (first + page).
@@ -45,7 +49,7 @@
- Status: {{status.text}} + Status: {{ status.text }} @@ -53,50 +57,55 @@
- OData Query: {{odataQuery}} + OData Query: {{ odataQuery }}
- - - -
Metrics: - {{metrics.endTime | date: 'dd MMM, h:mm:ssa'}} — - {{metrics.itemCount}} + {{ metrics.endTime | date: 'dd MMM, h:mm:ssa' }} — + {{ metrics.itemCount }} of - {{metrics.totalItemCount}} + {{ metrics.totalItemCount }} items - All Data Loaded!!! + All Data Loaded!!!
- + (onRowCountChanged)="refreshMetrics($event.detail.args)" + >
diff --git a/src/app/examples/grid-infinite-odata.component.ts b/src/app/examples/grid-infinite-odata.component.ts index d8db12b64..e9492f31d 100644 --- a/src/app/examples/grid-infinite-odata.component.ts +++ b/src/app/examples/grid-infinite-odata.component.ts @@ -1,5 +1,5 @@ import { GridOdataService, type OdataServiceApi } from '@slickgrid-universal/odata'; -import { ChangeDetectorRef, Component, OnInit, ViewEncapsulation, } from '@angular/core'; +import { ChangeDetectorRef, Component, OnInit, ViewEncapsulation } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Aggregators, @@ -21,7 +21,7 @@ const PERCENT_HTML_ESCAPED = '%25'; @Component({ styleUrls: ['./grid-infinite-odata.component.scss'], encapsulation: ViewEncapsulation.None, - templateUrl: './grid-infinite-odata.component.html' + templateUrl: './grid-infinite-odata.component.html', }) export class GridInfiniteOdataComponent implements OnInit { angularGrid!: AngularGridInstance; @@ -38,7 +38,10 @@ export class GridInfiniteOdataComponent implements OnInit { errorStatusClass = 'hidden'; status = { text: 'processing...', class: 'alert alert-danger' }; - constructor(private readonly cd: ChangeDetectorRef, private http: HttpClient) { + constructor( + private readonly cd: ChangeDetectorRef, + private http: HttpClient + ) { this.backendService = new GridOdataService(); } @@ -53,35 +56,50 @@ export class GridInfiniteOdataComponent implements OnInit { initializeGrid() { this.columnDefinitions = [ { - id: 'name', name: 'Name', field: 'name', sortable: true, + id: 'name', + name: 'Name', + field: 'name', + sortable: true, type: FieldType.string, filterable: true, - filter: { model: Filters.compoundInput } + filter: { model: Filters.compoundInput }, }, { - id: 'gender', name: 'Gender', field: 'gender', filterable: true, sortable: true, + id: 'gender', + name: 'Gender', + field: 'gender', + filterable: true, + sortable: true, filter: { model: Filters.singleSelect, - collection: [{ value: '', label: '' }, { value: 'male', label: 'male' }, { value: 'female', label: 'female' }] - } + collection: [ + { value: '', label: '' }, + { value: 'male', label: 'male' }, + { value: 'female', label: 'female' }, + ], + }, }, { id: 'company', name: 'Company', field: 'company', filterable: true, sortable: true }, { - id: 'category_name', name: 'Category', field: 'category/name', filterable: true, sortable: true, - formatter: (_row, _cell, _val, _colDef, dataContext) => dataContext['category']?.['name'] || '' - } + id: 'category_name', + name: 'Category', + field: 'category/name', + filterable: true, + sortable: true, + formatter: (_row, _cell, _val, _colDef, dataContext) => dataContext['category']?.['name'] || '', + }, ]; this.gridOptions = { enableAutoResize: true, autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, checkboxSelector: { // you can toggle these 2 properties to show the "select all" checkbox in different location hideInFilterHeaderRow: false, - hideInColumnTitleRow: true + hideInColumnTitleRow: true, }, enableCellNavigation: true, enableFiltering: true, @@ -101,7 +119,7 @@ export class GridInfiniteOdataComponent implements OnInit { // enable infinite via Boolean OR via { fetchSize: number } infiniteScroll: { fetchSize: 30 }, // or use true, in that case it would use default size of 25 enableCount: true, - version: 4 + version: 4, }, onError: (error: Error) => { this.errorStatus = error.message; @@ -132,14 +150,20 @@ export class GridInfiniteOdataComponent implements OnInit { if (isError) { this.status = { text: 'ERROR!!!', class: 'alert alert-danger' }; } else { - this.status = (isProcessing) + this.status = isProcessing ? { text: 'loading', class: 'alert alert-warning' } : { text: 'finished', class: 'alert alert-success' }; } this.cd.detectChanges(); } - getCustomerCallback(data: { '@odata.count': number; infiniteScrollBottomHit: boolean; metrics: Metrics; query: string; value: any[]; }) { + getCustomerCallback(data: { + '@odata.count': number; + infiniteScrollBottomHit: boolean; + metrics: Metrics; + query: string; + value: any[]; + }) { // totalItems property needs to be filled for pagination to work correctly // however we need to force a dirty check, doing a clone object will do just that const totalItemCount: number = data['@odata.count']; @@ -196,13 +220,13 @@ export class GridInfiniteOdataComponent implements OnInit { for (const param of queryParams) { if (param.includes('$top=')) { - top = +(param.substring('$top='.length)); + top = +param.substring('$top='.length); if (top === 50000) { throw new Error('Server timed out retrieving 50,000 rows'); } } if (param.includes('$skip=')) { - skip = +(param.substring('$skip='.length)); + skip = +param.substring('$skip='.length); } if (param.includes('$orderby=')) { orderBy = param.substring('$orderby='.length); @@ -262,7 +286,7 @@ export class GridInfiniteOdataComponent implements OnInit { throw new Error('Server could not sort using the field "Company"'); } - this.http.get(`${sampleDataRoot}/customers_100.json`).subscribe(response => { + this.http.get(`${sampleDataRoot}/customers_100.json`).subscribe((response) => { let data = response as any[]; // Sort the data if (orderBy?.length > 0) { @@ -297,7 +321,7 @@ export class GridInfiniteOdataComponent implements OnInit { if (columnFilters) { for (const columnId in columnFilters) { if (columnId in columnFilters) { - filteredData = filteredData.filter(column => { + filteredData = filteredData.filter((column) => { const filterType = columnFilters[columnId].type; const searchTerm = columnFilters[columnId].term; let colId = columnId; @@ -317,17 +341,28 @@ export class GridInfiniteOdataComponent implements OnInit { const [term1, term2] = Array.isArray(searchTerm) ? searchTerm : [searchTerm]; switch (filterType) { - case 'eq': return filterTerm.toLowerCase() === term1; - case 'ne': return filterTerm.toLowerCase() !== term1; - case 'le': return filterTerm.toLowerCase() <= term1; - case 'lt': return filterTerm.toLowerCase() < term1; - case 'gt': return filterTerm.toLowerCase() > term1; - case 'ge': return filterTerm.toLowerCase() >= term1; - case 'ends': return filterTerm.toLowerCase().endsWith(term1); - case 'starts': return filterTerm.toLowerCase().startsWith(term1); - case 'starts+ends': return filterTerm.toLowerCase().startsWith(term1) && filterTerm.toLowerCase().endsWith(term2); - case 'substring': return filterTerm.toLowerCase().includes(term1); - case 'matchespattern': return new RegExp((term1 as string).replaceAll(PERCENT_HTML_ESCAPED, '.*'), 'i').test(filterTerm); + case 'eq': + return filterTerm.toLowerCase() === term1; + case 'ne': + return filterTerm.toLowerCase() !== term1; + case 'le': + return filterTerm.toLowerCase() <= term1; + case 'lt': + return filterTerm.toLowerCase() < term1; + case 'gt': + return filterTerm.toLowerCase() > term1; + case 'ge': + return filterTerm.toLowerCase() >= term1; + case 'ends': + return filterTerm.toLowerCase().endsWith(term1); + case 'starts': + return filterTerm.toLowerCase().startsWith(term1); + case 'starts+ends': + return filterTerm.toLowerCase().startsWith(term1) && filterTerm.toLowerCase().endsWith(term2); + case 'substring': + return filterTerm.toLowerCase().includes(term1); + case 'matchespattern': + return new RegExp((term1 as string).replaceAll(PERCENT_HTML_ESCAPED, '.*'), 'i').test(filterTerm); } } }); @@ -360,11 +395,9 @@ export class GridInfiniteOdataComponent implements OnInit { getter: 'gender', formatter: (g) => `Gender: ${g.value} (${g.count} items)`, comparer: (a, b) => SortComparers.string(a.value, b.value), - aggregators: [ - new Aggregators.Sum('gemder') - ], + aggregators: [new Aggregators.Sum('gemder')], aggregateCollapsed: false, - lazyTotalsCalculation: true + lazyTotalsCalculation: true, } as Grouping); // you need to manually add the sort icon(s) in UI @@ -380,23 +413,17 @@ export class GridInfiniteOdataComponent implements OnInit { setFiltersDynamically() { // we can Set Filters Dynamically (or different filters) afterward through the FilterService - this.angularGrid?.filterService.updateFilters([ - { columnId: 'gender', searchTerms: ['female'] }, - ]); + this.angularGrid?.filterService.updateFilters([{ columnId: 'gender', searchTerms: ['female'] }]); } refreshMetrics(args: OnRowCountChangedEventArgs) { if (args?.current >= 0) { this.metrics.itemCount = this.angularGrid.dataView?.getFilteredItemCount() || 0; - this.tagDataClass = this.metrics.itemCount === this.metrics.totalItemCount - ? 'fully-loaded' - : 'partial-load'; + this.tagDataClass = this.metrics.itemCount === this.metrics.totalItemCount ? 'fully-loaded' : 'partial-load'; } } setSortingDynamically() { - this.angularGrid?.sortService.updateSorting([ - { columnId: 'name', direction: 'DESC' }, - ]); + this.angularGrid?.sortService.updateSorting([{ columnId: 'name', direction: 'DESC' }]); } } diff --git a/src/app/examples/grid-localization.component.html b/src/app/examples/grid-localization.component.html index 8ea448b8c..571d19767 100644 --- a/src/app/examples/grid-localization.component.html +++ b/src/app/examples/grid-localization.component.html @@ -1,10 +1,12 @@

- {{title}} + {{ title }} - + code @@ -19,7 +21,7 @@

Switch Language - Locale: {{selectedLanguage + '.json'}} + Locale: {{ selectedLanguage + '.json' }}

- +
- \ No newline at end of file + diff --git a/src/app/examples/grid-localization.component.ts b/src/app/examples/grid-localization.component.ts index 07219c516..53b7438cf 100644 --- a/src/app/examples/grid-localization.component.ts +++ b/src/app/examples/grid-localization.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit, } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { TextExportService } from '@slickgrid-universal/text-export'; @@ -15,7 +15,7 @@ import { Formatters, GridOption, GridStateChange, - unsubscribeAllObservables + unsubscribeAllObservables, } from './../modules/angular-slickgrid'; const NB_ITEMS = 1500; @@ -29,7 +29,7 @@ const taskTranslateFormatter: Formatter = (row, cell, value, columnDef, dataCont }; @Component({ - templateUrl: './grid-localization.component.html' + templateUrl: './grid-localization.component.html', }) export class GridLocalizationComponent implements OnInit, OnDestroy { title = 'Example 12: Localization (i18n)'; @@ -85,60 +85,105 @@ export class GridLocalizationComponent implements OnInit, OnDestroy { ngOnInit(): void { this.columnDefinitions = [ { - id: 'title', name: 'Title', field: 'id', nameKey: 'TITLE', minWidth: 100, + id: 'title', + name: 'Title', + field: 'id', + nameKey: 'TITLE', + minWidth: 100, formatter: taskTranslateFormatter, sortable: true, filterable: true, - params: { useFormatterOuputToFilter: true } + params: { useFormatterOuputToFilter: true }, }, { id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80 }, { - id: 'duration', name: 'Duration (days)', field: 'duration', nameKey: 'DURATION', sortable: true, - formatter: Formatters.percentCompleteBar, minWidth: 100, + id: 'duration', + name: 'Duration (days)', + field: 'duration', + nameKey: 'DURATION', + sortable: true, + formatter: Formatters.percentCompleteBar, + minWidth: 100, exportWithFormatter: false, filterable: true, type: FieldType.number, - filter: { model: Filters.slider, /* operator: '=',*/ filterOptions: { hideSliderNumber: true } } + filter: { model: Filters.slider, /* operator: '=',*/ filterOptions: { hideSliderNumber: true } }, }, { - id: 'start', name: 'Start', field: 'start', nameKey: 'START', minWidth: 100, - formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, exportWithFormatter: true, - filterable: true, filter: { model: Filters.compoundDate } + id: 'start', + name: 'Start', + field: 'start', + nameKey: 'START', + minWidth: 100, + formatter: Formatters.dateIso, + outputType: FieldType.dateIso, + type: FieldType.date, + exportWithFormatter: true, + filterable: true, + filter: { model: Filters.compoundDate }, }, - { id: 'finish', name: 'Finish', field: 'finish', nameKey: 'FINISH', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } }, { - id: 'completedBool', name: 'Completed', field: 'completedBool', nameKey: 'COMPLETED', minWidth: 100, + id: 'finish', + name: 'Finish', + field: 'finish', + nameKey: 'FINISH', + formatter: Formatters.dateIso, + outputType: FieldType.dateIso, + type: FieldType.date, + minWidth: 100, + filterable: true, + filter: { model: Filters.compoundDate }, + }, + { + id: 'completedBool', + name: 'Completed', + field: 'completedBool', + nameKey: 'COMPLETED', + minWidth: 100, sortable: true, formatter: Formatters.checkmarkMaterial, exportCustomFormatter: Formatters.translateBoolean, filterable: true, filter: { - collection: [{ value: '', label: '' }, { value: true, labelKey: 'TRUE' }, { value: false, labelKey: 'FALSE' }], + collection: [ + { value: '', label: '' }, + { value: true, labelKey: 'TRUE' }, + { value: false, labelKey: 'FALSE' }, + ], model: Filters.singleSelect, enableTranslateLabel: true, - } + }, }, { - id: 'completed', name: 'Completed', field: 'completed', nameKey: 'COMPLETED', formatter: Formatters.translate, sortable: true, + id: 'completed', + name: 'Completed', + field: 'completed', + nameKey: 'COMPLETED', + formatter: Formatters.translate, + sortable: true, minWidth: 100, exportWithFormatter: true, // you can set this property in the column definition OR in the grid options, column def has priority over grid options filterable: true, filter: { - collection: [{ value: '', label: '' }, { value: 'TRUE', labelKey: 'TRUE' }, { value: 'FALSE', labelKey: 'FALSE' }], + collection: [ + { value: '', label: '' }, + { value: 'TRUE', labelKey: 'TRUE' }, + { value: 'FALSE', labelKey: 'FALSE' }, + ], collectionSortBy: { - property: 'labelKey' // will sort by translated value since "enableTranslateLabel" is true + property: 'labelKey', // will sort by translated value since "enableTranslateLabel" is true }, enableTranslateLabel: true, model: Filters.singleSelect, - } - } + }, + }, // OR via your own custom translate formatter // { id: 'completed', name: 'Completed', field: 'completed', nameKey: 'COMPLETED', formatter: translateFormatter, sortable: true, minWidth: 100 } ]; this.gridOptions = { autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableAutoResize: true, enableExcelCopyBuffer: true, @@ -148,7 +193,7 @@ export class GridLocalizationComponent implements OnInit, OnDestroy { checkboxSelector: { // you can toggle these 2 properties to show the "select all" checkbox in different location hideInFilterHeaderRow: false, - hideInColumnTitleRow: true + hideInColumnTitleRow: true, }, enableCheckboxSelector: true, enableRowSelection: true, @@ -172,11 +217,14 @@ export class GridLocalizationComponent implements OnInit, OnDestroy { // a lot of the info can be found on Excel-Builder-Vanilla // https://ghiscoding.gitbook.io/excel-builder-vanilla/cookbook/fonts-and-colors customExcelHeader: (workbook, sheet) => { - const customTitle = this.translate.currentLang === 'fr' ? 'Titre qui est suffisament long pour être coupé' : 'My header that is long enough to wrap'; + const customTitle = + this.translate.currentLang === 'fr' + ? 'Titre qui est suffisament long pour être coupé' + : 'My header that is long enough to wrap'; const stylesheet = workbook.getStyleSheet(); const aFormatDefn = { - 'font': { 'size': 12, 'fontName': 'Calibri', 'bold': true, color: 'FF0000FF' }, // every color starts with FF, then regular HTML color - 'alignment': { 'wrapText': true } + font: { size: 12, fontName: 'Calibri', bold: true, color: 'FF0000FF' }, // every color starts with FF, then regular HTML color + alignment: { wrapText: true }, }; const formatterId = stylesheet.createFormat(aFormatDefn); sheet.setRowInstructions(0, { height: 30 }); // change height of row 0 @@ -189,18 +237,18 @@ export class GridLocalizationComponent implements OnInit, OnDestroy { // push data in B1 cell with metadata formatter cols.push({ value: customTitle, metadata: { style: formatterId.id } }); sheet.data.push(cols); - } + }, }, gridMenu: { - hideExportCsvCommand: false, // false by default, so it's optional - hideExportTextDelimitedCommand: false // true by default, so if you want it, you will need to disable the flag + hideExportCsvCommand: false, // false by default, so it's optional + hideExportTextDelimitedCommand: false, // true by default, so if you want it, you will need to disable the flag }, enableExcelExport: true, enableTextExport: true, textExportOptions: { // set at the grid option level, meaning all column will evaluate the Formatter (when it has a Formatter defined) exportWithFormatter: true, - sanitizeDataExport: true + sanitizeDataExport: true, }, externalResources: [this.excelExportService, this.textExportService], }; @@ -214,16 +262,16 @@ export class GridLocalizationComponent implements OnInit, OnDestroy { for (let i = 0; i < count; i++) { const randomYear = 2000 + Math.floor(Math.random() * 30); const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); + const randomDay = Math.floor(Math.random() * 29); tmpData[i] = { id: i, - description: (i % 5) ? 'desc ' + i : '🚀🦄 español', // also add some random to test NULL field + description: i % 5 ? 'desc ' + i : '🚀🦄 español', // also add some random to test NULL field duration: Math.round(Math.random() * 100) + '', start: new Date(randomYear, randomMonth, randomDay), - finish: new Date(randomYear, (randomMonth + 1), randomDay), - completedBool: (i % 5 === 0) ? true : false, - completed: (i % 5 === 0) ? 'TRUE' : 'FALSE' + finish: new Date(randomYear, randomMonth + 1, randomDay), + completedBool: i % 5 === 0 ? true : false, + completed: i % 5 === 0 ? 'TRUE' : 'FALSE', }; } this.dataset = tmpData; @@ -237,7 +285,16 @@ export class GridLocalizationComponent implements OnInit, OnDestroy { dynamicallyAddTitleHeader() { // you can dynamically add your column to your column definitions // and then use the spread operator [...cols] OR slice to force Angular to review the changes - const newCol = { id: `title${this.duplicateTitleHeaderCount++}`, field: 'id', nameKey: 'TITLE', formatter: taskTranslateFormatter, sortable: true, minWidth: 100, filterable: true, params: { useFormatterOuputToFilter: true } }; + const newCol = { + id: `title${this.duplicateTitleHeaderCount++}`, + field: 'id', + nameKey: 'TITLE', + formatter: taskTranslateFormatter, + sortable: true, + minWidth: 100, + filterable: true, + params: { useFormatterOuputToFilter: true }, + }; this.columnDefinitions.push(newCol); this.columnDefinitions = this.columnDefinitions.slice(); // or use spread operator [...cols] @@ -254,15 +311,15 @@ export class GridLocalizationComponent implements OnInit, OnDestroy { exportToExcel() { this.excelExportService.exportToExcel({ filename: 'Export', - format: FileType.xlsx + format: FileType.xlsx, }); } exportToFile(type = 'csv') { this.textExportService.exportToFile({ - delimiter: (type === 'csv') ? DelimiterType.comma : DelimiterType.tab, + delimiter: type === 'csv' ? DelimiterType.comma : DelimiterType.tab, filename: 'myExport', - format: (type === 'csv') ? FileType.csv : FileType.txt + format: type === 'csv' ? FileType.csv : FileType.txt, }); } @@ -273,7 +330,7 @@ export class GridLocalizationComponent implements OnInit, OnDestroy { } switchLanguage() { - const nextLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en'; + const nextLanguage = this.selectedLanguage === 'en' ? 'fr' : 'en'; this.subscriptions.push( this.translate.use(nextLanguage).subscribe(() => { this.selectedLanguage = nextLanguage; diff --git a/src/app/examples/grid-menu.component.html b/src/app/examples/grid-menu.component.html index 4634e5cae..6cc967214 100644 --- a/src/app/examples/grid-menu.component.html +++ b/src/app/examples/grid-menu.component.html @@ -1,18 +1,19 @@

- {{title}} + {{ title }} - + code

- @@ -22,16 +23,16 @@

Locale: - {{selectedLanguage + '.json'}} - + {{ selectedLanguage + '.json' }}
- +
-

\ No newline at end of file + diff --git a/src/app/examples/grid-menu.component.ts b/src/app/examples/grid-menu.component.ts index 5329c77b6..465324586 100644 --- a/src/app/examples/grid-menu.component.ts +++ b/src/app/examples/grid-menu.component.ts @@ -1,5 +1,14 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; -import { AngularGridInstance, Column, ExtensionName, FieldType, Filters, Formatters, GridOption, unsubscribeAllObservables } from './../modules/angular-slickgrid'; +import { + AngularGridInstance, + Column, + ExtensionName, + FieldType, + Filters, + Formatters, + GridOption, + unsubscribeAllObservables, +} from './../modules/angular-slickgrid'; import { TranslateService } from '@ngx-translate/core'; import { Subscription } from 'rxjs'; @@ -46,26 +55,48 @@ export class GridMenuComponent implements OnInit, OnDestroy { ngOnInit(): void { this.columnDefinitions = [ { id: 'title', name: 'Title', field: 'title', nameKey: 'TITLE', filterable: true, type: FieldType.string }, - { id: 'duration', name: 'Duration', field: 'duration', nameKey: 'DURATION', sortable: true, filterable: true, type: FieldType.string }, { - id: 'percentComplete', name: '% Complete', field: 'percentComplete', nameKey: 'PERCENT_COMPLETE', sortable: true, filterable: true, + id: 'duration', + name: 'Duration', + field: 'duration', + nameKey: 'DURATION', + sortable: true, + filterable: true, + type: FieldType.string, + }, + { + id: 'percentComplete', + name: '% Complete', + field: 'percentComplete', + nameKey: 'PERCENT_COMPLETE', + sortable: true, + filterable: true, type: FieldType.number, formatter: Formatters.percentCompleteBar, - filter: { model: Filters.compoundSlider, filterOptions: { hideSliderNumber: false } } + filter: { model: Filters.compoundSlider, filterOptions: { hideSliderNumber: false } }, }, { id: 'start', name: 'Start', field: 'start', nameKey: 'START', filterable: true, type: FieldType.string }, { id: 'finish', name: 'Finish', field: 'finish', nameKey: 'FINISH', filterable: true, type: FieldType.string }, { - id: 'effort-driven', name: 'Completed', field: 'effortDriven', nameKey: 'COMPLETED', maxWidth: 80, formatter: Formatters.checkmarkMaterial, + id: 'effort-driven', + name: 'Completed', + field: 'effortDriven', + nameKey: 'COMPLETED', + maxWidth: 80, + formatter: Formatters.checkmarkMaterial, type: FieldType.boolean, minWidth: 100, sortable: true, filterable: true, filter: { - collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }], - model: Filters.singleSelect - } - } + collection: [ + { value: '', label: '' }, + { value: true, label: 'true' }, + { value: false, label: 'false' }, + ], + model: Filters.singleSelect, + }, + }, ]; this.gridOptions = { @@ -74,13 +105,13 @@ export class GridMenuComponent implements OnInit, OnDestroy { hideSyncResizeButton: true, onColumnsChanged: (e, args) => { console.log('Column selection changed from Column Picker, visible columns: ', args.visibleColumns); - } + }, }, enableAutoResize: true, enableGridMenu: true, autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableFiltering: true, enableCellNavigation: true, @@ -109,8 +140,8 @@ export class GridMenuComponent implements OnInit, OnDestroy { disabled: false, command: 'help', positionOrder: 90, - cssClass: 'bold', // container css class - textCssClass: 'blue' // just the text css class + cssClass: 'bold', // container css class + textCssClass: 'blue', // just the text css class }, // you can pass divider as a string or an object with a boolean (if sorting by position, then use the object) // note you should use the "divider" string only when items array is already sorted and positionOrder are not specified @@ -136,7 +167,7 @@ export class GridMenuComponent implements OnInit, OnDestroy { title: 'Command 2', command: 'command2', positionOrder: 92, - cssClass: 'red', // container css class + cssClass: 'red', // container css class textCssClass: 'italic', // just the text css class action: (_e: Event, args: any) => alert(args.command), itemVisibilityOverride: () => { @@ -151,38 +182,55 @@ export class GridMenuComponent implements OnInit, OnDestroy { title: 'Disabled command', disabled: true, command: 'disabled-command', - positionOrder: 98 + positionOrder: 98, }, { command: '', divider: true, positionOrder: 98 }, { // we can also have multiple nested sub-menus - command: 'export', title: 'Exports', positionOrder: 99, + command: 'export', + title: 'Exports', + positionOrder: 99, commandItems: [ { command: 'exports-txt', title: 'Text (tab delimited)' }, { - command: 'sub-menu', title: 'Excel', cssClass: 'green', subMenuTitle: 'available formats', subMenuTitleCssClass: 'text-italic orange', + command: 'sub-menu', + title: 'Excel', + cssClass: 'green', + subMenuTitle: 'available formats', + subMenuTitleCssClass: 'text-italic orange', commandItems: [ { command: 'exports-csv', title: 'Excel (csv)' }, { command: 'exports-xlsx', title: 'Excel (xlsx)' }, - ] - } - ] + ], + }, + ], }, { - command: 'feedback', title: 'Feedback', positionOrder: 100, + command: 'feedback', + title: 'Feedback', + positionOrder: 100, commandItems: [ - { command: 'request-update', title: 'Request update from supplier', iconCssClass: 'mdi mdi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' }, + { + command: 'request-update', + title: 'Request update from supplier', + iconCssClass: 'mdi mdi-star', + tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update', + }, 'divider', { - command: 'sub-menu', title: 'Contact Us', iconCssClass: 'mdi mdi-account', subMenuTitle: 'contact us...', subMenuTitleCssClass: 'italic', + command: 'sub-menu', + title: 'Contact Us', + iconCssClass: 'mdi mdi-account', + subMenuTitle: 'contact us...', + subMenuTitleCssClass: 'italic', commandItems: [ { command: 'contact-email', title: 'Email us', iconCssClass: 'mdi mdi-pencil-outline' }, { command: 'contact-chat', title: 'Chat with us', iconCssClass: 'mdi mdi-message-text-outline' }, { command: 'contact-meeting', title: 'Book an appointment', iconCssClass: 'mdi mdi-coffee' }, - ] - } - ] - } + ], + }, + ], + }, ], // you can use the "action" callback and/or use "onCallback" callback from the grid options, they both have the same arguments onCommand: (_e: Event, args: any) => { @@ -198,10 +246,10 @@ export class GridMenuComponent implements OnInit, OnDestroy { }, onColumnsChanged: (_e: Event, args: any) => { console.log('Column selection changed from Grid Menu, visible columns: ', args.visibleColumns); - } + }, }, enableTranslate: true, - i18n: this.translate + i18n: this.translate, }; this.getData(); @@ -223,7 +271,7 @@ export class GridMenuComponent implements OnInit, OnDestroy { percentComplete: Math.round(Math.random() * 100), start: '01/01/2009', finish: '01/05/2009', - effortDriven: (i % 5 === 0) + effortDriven: i % 5 === 0, }; } this.dataset = mockDataset; @@ -238,7 +286,7 @@ export class GridMenuComponent implements OnInit, OnDestroy { } switchLanguage() { - const nextLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en'; + const nextLanguage = this.selectedLanguage === 'en' ? 'fr' : 'en'; this.subscriptions.push( this.translate.use(nextLanguage).subscribe(() => { this.selectedLanguage = nextLanguage; diff --git a/src/app/examples/grid-odata.component.html b/src/app/examples/grid-odata.component.html index f9bff071a..abc28cc2e 100644 --- a/src/app/examples/grid-odata.component.html +++ b/src/app/examples/grid-odata.component.html @@ -1,10 +1,12 @@

- {{title}} + {{ title }} - + code @@ -23,7 +25,7 @@

- Status: {{status.text}} + Status: {{ status.text }} @@ -31,25 +33,23 @@

- OData Query: {{odataQuery}} + OData Query: {{ odataQuery }}
- - -
+
- Metrics: {{metrics.endTime | date: 'yyyy-MM-dd hh:mm aaaaa\'m\''}} | {{metrics.executionTime}}ms - | {{metrics.totalItemCount}} items + Metrics: {{ metrics.endTime | date: "yyyy-MM-dd hh:mm aaaaa'm'" }} | {{ metrics.executionTime }}ms | + {{ metrics.totalItemCount }} items
@@ -57,35 +57,64 @@

- @@ -104,15 +133,17 @@

- + -

\ No newline at end of file + diff --git a/src/app/examples/grid-odata.component.ts b/src/app/examples/grid-odata.component.ts index 00472ee58..e25161778 100644 --- a/src/app/examples/grid-odata.component.ts +++ b/src/app/examples/grid-odata.component.ts @@ -1,5 +1,5 @@ import { GridOdataService, OdataServiceApi, OdataOption } from '@slickgrid-universal/odata'; -import { ChangeDetectorRef, Component, OnInit, } from '@angular/core'; +import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { AngularGridInstance, @@ -19,7 +19,7 @@ const CARET_HTML_ESCAPED = '%5E'; const PERCENT_HTML_ESCAPED = '%25'; @Component({ - templateUrl: './grid-odata.component.html' + templateUrl: './grid-odata.component.html', }) export class GridOdataComponent implements OnInit { title = 'Example 5: Grid connected to Backend Server with OData'; @@ -60,7 +60,10 @@ export class GridOdataComponent implements OnInit { isPageErrorTest = false; status = { text: 'processing...', class: 'alert alert-danger' }; - constructor(private readonly cd: ChangeDetectorRef, private http: HttpClient) { } + constructor( + private readonly cd: ChangeDetectorRef, + private http: HttpClient + ) {} angularGridReady(angularGrid: AngularGridInstance) { this.angularGrid = angularGrid; @@ -69,7 +72,10 @@ export class GridOdataComponent implements OnInit { ngOnInit(): void { this.columnDefinitions = [ { - id: 'name', name: 'Name', field: 'name', sortable: true, + id: 'name', + name: 'Name', + field: 'name', + sortable: true, type: FieldType.string, filterable: true, filter: { @@ -82,14 +88,22 @@ export class GridOdataComponent implements OnInit { { operator: 'a*', desc: 'Starts With' }, { operator: 'Custom', desc: 'SQL Like' }, ], - } + }, }, { - id: 'gender', name: 'Gender', field: 'gender', filterable: true, sortable: true, + id: 'gender', + name: 'Gender', + field: 'gender', + filterable: true, + sortable: true, filter: { model: Filters.singleSelect, - collection: [{ value: '', label: '' }, { value: 'male', label: 'male' }, { value: 'female', label: 'female' }] - } + collection: [ + { value: '', label: '' }, + { value: 'male', label: 'male' }, + { value: 'female', label: 'female' }, + ], + }, }, { id: 'company', name: 'Company', field: 'company', filterable: true, sortable: true }, { id: 'category_name', name: 'Category', field: 'category/name', filterable: true, sortable: true }, @@ -99,16 +113,16 @@ export class GridOdataComponent implements OnInit { enableAutoResize: true, autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, checkboxSelector: { // you can toggle these 2 properties to show the "select all" checkbox in different location hideInFilterHeaderRow: false, - hideInColumnTitleRow: true + hideInColumnTitleRow: true, }, compoundOperatorAltTexts: { // where '=' is any of the `OperatorString` type shown above - text: { 'Custom': { operatorAlt: '%%', descAlt: 'SQL Like' } }, + text: { Custom: { operatorAlt: '%%', descAlt: 'SQL Like' } }, }, enableCellNavigation: true, enableFiltering: true, @@ -118,18 +132,16 @@ export class GridOdataComponent implements OnInit { pagination: { pageSizes: [10, 20, 50, 100, 500, 50000], pageSize: defaultPageSize, - totalItems: 0 + totalItems: 0, }, presets: { // you can also type operator as string, e.g.: operator: 'EQ' - filters: [ - { columnId: 'gender', searchTerms: ['male'], operator: OperatorType.equal }, - ], + filters: [{ columnId: 'gender', searchTerms: ['male'], operator: OperatorType.equal }], sorters: [ // direction can be written as 'asc' (uppercase or lowercase) and/or use the SortDirection type - { columnId: 'name', direction: 'asc' } + { columnId: 'name', direction: 'asc' }, ], - pagination: { pageNumber: 2, pageSize: defaultPageSize } + pagination: { pageNumber: 2, pageSize: defaultPageSize }, }, backendServiceApi: { service: new GridOdataService(), @@ -141,13 +153,13 @@ export class GridOdataComponent implements OnInit { if (columnFilterOperator === OperatorType.custom && columnDef?.id === 'name') { let matchesSearch = searchValues[0].replace(/\*/g, '.*'); matchesSearch = matchesSearch.slice(0, 1) + CARET_HTML_ESCAPED + matchesSearch.slice(1); - matchesSearch = matchesSearch.slice(0, -1) + '$\''; + matchesSearch = matchesSearch.slice(0, -1) + "$'"; return `matchesPattern(${fieldName}, ${matchesSearch})`; } return; }, - version: this.odataVersion // defaults to 2, the query string is slightly different between OData 2 and 4 + version: this.odataVersion, // defaults to 2, the query string is slightly different between OData 2 and 4 }, onError: (error: Error) => { this.errorStatus = error.message; @@ -163,8 +175,8 @@ export class GridOdataComponent implements OnInit { this.displaySpinner(false); this.getCustomerCallback(response); this.cd.detectChanges(); - } - } as OdataServiceApi + }, + } as OdataServiceApi, }; } @@ -173,7 +185,7 @@ export class GridOdataComponent implements OnInit { if (isError) { this.status = { text: 'ERROR!!!', class: 'alert alert-danger' }; } else { - this.status = (isProcessing) + this.status = isProcessing ? { text: 'loading', class: 'alert alert-warning' } : { text: 'finished', class: 'alert alert-success' }; } @@ -185,7 +197,7 @@ export class GridOdataComponent implements OnInit { // however we need to force Angular to do a dirty check, doing a clone object will do just that let totalItemCount: number = data['totalRecordCount']; // you can use "totalRecordCount" or any name or "odata.count" when "enableCount" is set if (this.isCountEnabled) { - totalItemCount = (this.odataVersion === 4) ? data['@odata.count'] : data['d']['__count']; + totalItemCount = this.odataVersion === 4 ? data['@odata.count'] : data['d']['__count']; } if (this.metrics) { this.metrics.totalItemCount = totalItemCount; @@ -220,9 +232,7 @@ export class GridOdataComponent implements OnInit { } setSortingDynamically() { - this.angularGrid.sortService.updateSorting([ - { columnId: 'name', direction: 'DESC' }, - ]); + this.angularGrid.sortService.updateSorting([{ columnId: 'name', direction: 'DESC' }]); } /** This function is only here to mock a WebAPI call (since we are using a JSON file for the demo) @@ -245,13 +255,13 @@ export class GridOdataComponent implements OnInit { for (const param of queryParams) { if (param.includes('$top=')) { - top = +(param.substring('$top='.length)); + top = +param.substring('$top='.length); if (top === 50000) { throw new Error('Server timed out retrieving 50,000 rows'); } } if (param.includes('$skip=')) { - skip = +(param.substring('$skip='.length)); + skip = +param.substring('$skip='.length); } if (param.includes('$orderby=')) { orderBy = param.substring('$orderby='.length); @@ -288,7 +298,10 @@ export class GridOdataComponent implements OnInit { const filterStartMatch = filterBy.match(/startswith\(([a-zA-Z ]*),\s?'(.*?)'/) || []; const filterEndMatch = filterBy.match(/endswith\(([a-zA-Z ]*),\s?'(.*?)'/) || []; const fieldName = filterStartMatch[1].trim(); - (columnFilters as any)[fieldName] = { type: 'starts+ends', term: [filterStartMatch[2].trim(), filterEndMatch[2].trim()] }; + (columnFilters as any)[fieldName] = { + type: 'starts+ends', + term: [filterStartMatch[2].trim(), filterEndMatch[2].trim()], + }; } else if (filterBy.includes('startswith')) { const filterMatch = filterBy.match(/startswith\(([a-zA-Z ]*),\s?'(.*?)'/); const fieldName = filterMatch![1].trim(); @@ -311,7 +324,7 @@ export class GridOdataComponent implements OnInit { throw new Error('Server could not sort using the field "Company"'); } - this.http.get(`${sampleDataRoot}/customers_100.json`).subscribe(response => { + this.http.get(`${sampleDataRoot}/customers_100.json`).subscribe((response) => { let data = response as any[]; // Sort the data @@ -347,7 +360,7 @@ export class GridOdataComponent implements OnInit { if (columnFilters) { for (const columnId in columnFilters) { if (columnId in columnFilters) { - filteredData = filteredData.filter(column => { + filteredData = filteredData.filter((column) => { const filterType = (columnFilters as any)[columnId].type; const searchTerm = (columnFilters as any)[columnId].term; let colId = columnId; @@ -367,17 +380,28 @@ export class GridOdataComponent implements OnInit { const [term1, term2] = Array.isArray(searchTerm) ? searchTerm : [searchTerm]; switch (filterType) { - case 'eq': return filterTerm.toLowerCase() === term1; - case 'ne': return filterTerm.toLowerCase() !== term1; - case 'le': return filterTerm.toLowerCase() <= term1; - case 'lt': return filterTerm.toLowerCase() < term1; - case 'gt': return filterTerm.toLowerCase() > term1; - case 'ge': return filterTerm.toLowerCase() >= term1; - case 'ends': return filterTerm.toLowerCase().endsWith(term1); - case 'starts': return filterTerm.toLowerCase().startsWith(term1); - case 'starts+ends': return filterTerm.toLowerCase().startsWith(term1) && filterTerm.toLowerCase().endsWith(term2); - case 'substring': return filterTerm.toLowerCase().includes(term1); - case 'matchespattern': return new RegExp((term1 as string).replaceAll(PERCENT_HTML_ESCAPED, '.*'), 'i').test(filterTerm); + case 'eq': + return filterTerm.toLowerCase() === term1; + case 'ne': + return filterTerm.toLowerCase() !== term1; + case 'le': + return filterTerm.toLowerCase() <= term1; + case 'lt': + return filterTerm.toLowerCase() < term1; + case 'gt': + return filterTerm.toLowerCase() > term1; + case 'ge': + return filterTerm.toLowerCase() >= term1; + case 'ends': + return filterTerm.toLowerCase().endsWith(term1); + case 'starts': + return filterTerm.toLowerCase().startsWith(term1); + case 'starts+ends': + return filterTerm.toLowerCase().startsWith(term1) && filterTerm.toLowerCase().endsWith(term2); + case 'substring': + return filterTerm.toLowerCase().includes(term1); + case 'matchespattern': + return new RegExp((term1 as string).replaceAll(PERCENT_HTML_ESCAPED, '.*'), 'i').test(filterTerm); } } }); diff --git a/src/app/examples/grid-range.component.html b/src/app/examples/grid-range.component.html index af0e738ac..9b5e62fe2 100644 --- a/src/app/examples/grid-range.component.html +++ b/src/app/examples/grid-range.component.html @@ -1,10 +1,12 @@

- {{title}} + {{ title }} - + code @@ -14,8 +16,8 @@


- Metrics: {{metrics.startTime | date: 'yyyy-MM-dd hh:mm aaaaa\'m\''}} | {{metrics.itemCount}} of - {{metrics.totalItemCount}} items + Metrics: {{ metrics.startTime | date: "yyyy-MM-dd hh:mm aaaaa'm'" }} | {{ metrics.itemCount }} of + {{ metrics.totalItemCount }} items
@@ -25,8 +27,11 @@

-
@@ -36,8 +41,7 @@

-
@@ -45,9 +49,14 @@

- +
@@ -58,17 +67,19 @@

Switch Language - Locale: {{selectedLanguage + '.json'}} + Locale: {{ selectedLanguage + '.json' }} - + - \ No newline at end of file + diff --git a/src/app/examples/grid-range.component.ts b/src/app/examples/grid-range.component.ts index c2858c2d4..a71927927 100644 --- a/src/app/examples/grid-range.component.ts +++ b/src/app/examples/grid-range.component.ts @@ -36,7 +36,7 @@ const taskTranslateFormatter: Formatter = (row, cell, value, columnDef, dataCont }; @Component({ - templateUrl: './grid-range.component.html' + templateUrl: './grid-range.component.html', }) export class GridRangeComponent implements OnInit, OnDestroy { title = 'Example 25: Filtering from Range of Search Values'; @@ -68,9 +68,9 @@ export class GridRangeComponent implements OnInit, OnDestroy { filterList = [ { value: '', label: '' }, { value: 'currentYearTasks', label: 'Current Year Completed Tasks' }, - { value: 'nextYearTasks', label: 'Next Year Active Tasks' } + { value: 'nextYearTasks', label: 'Next Year Active Tasks' }, ]; - selectedPredefinedFilter!: { value: string; label: string; }; + selectedPredefinedFilter!: { value: string; label: string }; constructor(private translate: TranslateService) { // always start with English for Cypress E2E tests to be consistent @@ -87,22 +87,35 @@ export class GridRangeComponent implements OnInit, OnDestroy { ngOnInit(): void { this.columnDefinitions = [ { - id: 'title', name: 'Title', field: 'id', nameKey: 'TITLE', minWidth: 100, + id: 'title', + name: 'Title', + field: 'id', + nameKey: 'TITLE', + minWidth: 100, formatter: taskTranslateFormatter, sortable: true, filterable: true, - params: { useFormatterOuputToFilter: true } + params: { useFormatterOuputToFilter: true }, }, { - id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80, + id: 'description', + name: 'Description', + field: 'description', + filterable: true, + sortable: true, + minWidth: 80, type: FieldType.string, filter: { model: CustomInputFilter, // create a new instance to make each Filter independent from each other - enableTrimWhiteSpace: true // or use global "enableFilterTrimWhiteSpace" to trim on all Filters - } + enableTrimWhiteSpace: true, // or use global "enableFilterTrimWhiteSpace" to trim on all Filters + }, }, { - id: 'percentComplete', name: '% Complete', field: 'percentComplete', nameKey: 'PERCENT_COMPLETE', minWidth: 120, + id: 'percentComplete', + name: '% Complete', + field: 'percentComplete', + nameKey: 'PERCENT_COMPLETE', + minWidth: 120, sortable: true, customTooltip: { position: 'center' }, formatter: Formatters.progressBar, @@ -114,42 +127,74 @@ export class GridRangeComponent implements OnInit, OnDestroy { operator: OperatorType.rangeInclusive, // defaults to inclusive filterOptions: { hideSliderNumbers: false, // you can hide/show the slider numbers on both side - min: 0, step: 5 - } as SliderRangeOption - } + min: 0, + step: 5, + } as SliderRangeOption, + }, }, { - id: 'start', name: 'Start', field: 'start', nameKey: 'START', formatter: Formatters.dateIso, sortable: true, minWidth: 75, width: 100, exportWithFormatter: true, - type: FieldType.date, filterable: true, filter: { model: Filters.compoundDate } + id: 'start', + name: 'Start', + field: 'start', + nameKey: 'START', + formatter: Formatters.dateIso, + sortable: true, + minWidth: 75, + width: 100, + exportWithFormatter: true, + type: FieldType.date, + filterable: true, + filter: { model: Filters.compoundDate }, }, { - id: 'finish', name: 'Finish', field: 'finish', nameKey: 'FINISH', formatter: Formatters.dateIso, sortable: true, minWidth: 75, width: 120, exportWithFormatter: true, + id: 'finish', + name: 'Finish', + field: 'finish', + nameKey: 'FINISH', + formatter: Formatters.dateIso, + sortable: true, + minWidth: 75, + width: 120, + exportWithFormatter: true, type: FieldType.date, filterable: true, filter: { model: Filters.dateRange, - } + }, }, { - id: 'duration', field: 'duration', nameKey: 'DURATION', maxWidth: 90, + id: 'duration', + field: 'duration', + nameKey: 'DURATION', + maxWidth: 90, type: FieldType.number, sortable: true, - filterable: true, filter: { + filterable: true, + filter: { model: Filters.input, - operator: OperatorType.rangeExclusive // defaults to inclusive - } + operator: OperatorType.rangeExclusive, // defaults to inclusive + }, }, { - id: 'completed', name: 'Completed', field: 'completed', nameKey: 'COMPLETED', minWidth: 85, maxWidth: 90, + id: 'completed', + name: 'Completed', + field: 'completed', + nameKey: 'COMPLETED', + minWidth: 85, + maxWidth: 90, formatter: Formatters.checkmarkMaterial, exportWithFormatter: true, // you can set this property in the column definition OR in the grid options, column def has priority over grid options filterable: true, filter: { - collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }], + collection: [ + { value: '', label: '' }, + { value: true, label: 'True' }, + { value: false, label: 'False' }, + ], model: Filters.singleSelect, - filterOptions: { autoAdjustDropHeight: true } as MultipleSelectOption - } - } + filterOptions: { autoAdjustDropHeight: true } as MultipleSelectOption, + }, + }, ]; const today = new Date(); @@ -159,7 +204,7 @@ export class GridRangeComponent implements OnInit, OnDestroy { this.gridOptions = { autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableExcelCopyBuffer: true, enableFiltering: true, @@ -199,7 +244,7 @@ export class GridRangeComponent implements OnInit, OnDestroy { mockData(itemCount: number, startingIndex = 0): any[] { // mock a dataset const tempDataset = []; - for (let i = startingIndex; i < (startingIndex + itemCount); i++) { + for (let i = startingIndex; i < startingIndex + itemCount; i++) { const randomDuration = randomBetween(0, 365); const randomYear = randomBetween(new Date().getFullYear(), new Date().getFullYear() + 1); const randomMonth = randomBetween(0, 12); @@ -209,13 +254,13 @@ export class GridRangeComponent implements OnInit, OnDestroy { tempDataset.push({ id: i, title: 'Task ' + i, - description: (i % 5) ? 'desc ' + i : null, // also add some random to test NULL field + description: i % 5 ? 'desc ' + i : null, // also add some random to test NULL field duration: randomDuration, percentComplete: randomPercent, percentCompleteNumber: randomPercent, - start: (i % 4) ? null : new Date(randomYear, randomMonth, randomDay), // provide a Date format + start: i % 4 ? null : new Date(randomYear, randomMonth, randomDay), // provide a Date format finish: new Date(randomYear, randomMonth, randomDay), - completed: (randomPercent === 100) ? true : false, + completed: randomPercent === 100 ? true : false, }); } @@ -242,8 +287,8 @@ export class GridRangeComponent implements OnInit, OnDestroy { window.setTimeout(() => { this.metrics = { startTime: new Date(), - itemCount: args && args.current || 0, - totalItemCount: this.dataset.length || 0 + itemCount: (args && args.current) || 0, + totalItemCount: this.dataset.length || 0, }; }); } @@ -276,7 +321,11 @@ export class GridRangeComponent implements OnInit, OnDestroy { switch (filterValue) { case 'currentYearTasks': filters = [ - { columnId: 'finish', operator: OperatorType.rangeInclusive, searchTerms: [`${currentYear}-01-01`, `${currentYear}-12-31`] }, + { + columnId: 'finish', + operator: OperatorType.rangeInclusive, + searchTerms: [`${currentYear}-01-01`, `${currentYear}-12-31`], + }, { columnId: 'completed', operator: OperatorType.equal, searchTerms: [true] }, ]; break; @@ -288,7 +337,7 @@ export class GridRangeComponent implements OnInit, OnDestroy { } switchLanguage() { - const nextLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en'; + const nextLanguage = this.selectedLanguage === 'en' ? 'fr' : 'en'; this.subscriptions.push( this.translate.use(nextLanguage).subscribe(() => { this.selectedLanguage = nextLanguage; diff --git a/src/app/examples/grid-remote.component.html b/src/app/examples/grid-remote.component.html index f258b3062..55aa0a502 100644 --- a/src/app/examples/grid-remote.component.html +++ b/src/app/examples/grid-remote.component.html @@ -1,10 +1,12 @@

- {{title}} + {{ title }} - + code @@ -13,14 +15,14 @@

- +
- + -

\ No newline at end of file + diff --git a/src/app/examples/grid-remote.component.ts b/src/app/examples/grid-remote.component.ts index 94d0efe54..2320242a9 100644 --- a/src/app/examples/grid-remote.component.ts +++ b/src/app/examples/grid-remote.component.ts @@ -4,7 +4,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { AngularGridInstance, Column, Formatter, GridOption, SlickEventHandler } from './../modules/angular-slickgrid'; const brandFormatter: Formatter = (_row, _cell, _value, _columnDef, dataContext) => { - return dataContext && dataContext.brand && dataContext.brand.name || ''; + return (dataContext && dataContext.brand && dataContext.brand.name) || ''; }; const mpnFormatter: Formatter = (_row, _cell, _value, _columnDef, dataContext) => { @@ -16,7 +16,7 @@ const mpnFormatter: Formatter = (_row, _cell, _value, _columnDef, dataContext) = }; @Component({ - templateUrl: './grid-remote.component.html' + templateUrl: './grid-remote.component.html', }) export class GridRemoteComponent implements OnDestroy, OnInit { private _eventHandler: any = new SlickEventHandler(); @@ -95,17 +95,23 @@ export class GridRemoteComponent implements OnDestroy, OnInit { enableAutoResize: true, autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableCellNavigation: true, enableColumnReorder: false, enableGridMenu: false, - multiColumnSort: false + multiColumnSort: false, }; } hookAllLoaderEvents() { - if (this._eventHandler && this._eventHandler.subscribe && this.loaderDataView && this.loaderDataView.onDataLoading && this.loaderDataView.onDataLoaded) { + if ( + this._eventHandler && + this._eventHandler.subscribe && + this.loaderDataView && + this.loaderDataView.onDataLoading && + this.loaderDataView.onDataLoaded + ) { this._eventHandler.subscribe(this.loaderDataView.onDataLoading, (_e: Event, _args: any) => { this.loading = true; }); @@ -124,7 +130,13 @@ export class GridRemoteComponent implements OnDestroy, OnInit { } onSort(_e: Event, args: any) { - if (this.gridObj && this.gridObj.getViewport && this.loaderDataView && this.loaderDataView.ensureData && this.loaderDataView.setSort) { + if ( + this.gridObj && + this.gridObj.getViewport && + this.loaderDataView && + this.loaderDataView.ensureData && + this.loaderDataView.setSort + ) { const vp = this.gridObj.getViewport(); if (args && args.sortCol && args.sortCol.field) { this.loaderDataView.setSort(args.sortCol.field, args.sortAsc ? 1 : -1); @@ -141,7 +153,14 @@ export class GridRemoteComponent implements OnDestroy, OnInit { } searchChanged(newValue: string) { - if (newValue && this.gridObj && this.gridObj.getViewport && this.loaderDataView && this.loaderDataView.ensureData && this.loaderDataView.setSearch) { + if ( + newValue && + this.gridObj && + this.gridObj.getViewport && + this.loaderDataView && + this.loaderDataView.ensureData && + this.loaderDataView.setSearch + ) { const vp = this.gridObj.getViewport(); this.loaderDataView.setSearch(newValue); this.loaderDataView.ensureData(vp.top, vp.bottom); diff --git a/src/app/examples/grid-resize-by-content.component.html b/src/app/examples/grid-resize-by-content.component.html index fae456a45..691a69d2d 100644 --- a/src/app/examples/grid-resize-by-content.component.html +++ b/src/app/examples/grid-resize-by-content.component.html @@ -1,10 +1,12 @@

- {{title}} + {{ title }} - + code @@ -16,18 +18,30 @@

Container Width (950px)

-
@@ -35,21 +49,27 @@

Container Width (950px)

- - - -
@@ -57,12 +77,14 @@

Container Width (950px)

- +
-
\ No newline at end of file +
diff --git a/src/app/examples/grid-resize-by-content.component.ts b/src/app/examples/grid-resize-by-content.component.ts index 506cac642..b7e265f7a 100644 --- a/src/app/examples/grid-resize-by-content.component.ts +++ b/src/app/examples/grid-resize-by-content.component.ts @@ -19,7 +19,7 @@ import { type SlickGrid, SlickGlobalEditorLock, type VanillaCalendarOption, - type SearchTerm + type SearchTerm, } from '../modules/angular-slickgrid'; const URL_COUNTRIES_COLLECTION = 'assets/data/countries.json'; @@ -50,13 +50,13 @@ function checkItemIsEditable(dataContext: any, columnDef: Column, grid: SlickGri const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, _dataContext, grid) => { const gridOptions = grid.getOptions(); const isEditableLine = gridOptions.editable && columnDef.editor; - value = (value === null || value === undefined) ? '' : value; + value = value === null || value === undefined ? '' : value; return isEditableLine ? { text: value, addClasses: 'editable-field', toolTip: 'Click to Edit' } : value; }; // you can create custom validator to pass to an inline editor const myCustomTitleValidator = (value: any) => { - if ((value === null || value === undefined || !value.length)) { + if (value === null || value === undefined || !value.length) { // we will only check if the field is supplied when it's an inline editing return { valid: false, msg: 'This is a required field.' }; } else if (!/^(task\s\d+)*$/i.test(value)) { @@ -91,7 +91,7 @@ export class GridResizeByContentComponent implements OnInit { { value: 4, label: 'Very Complex' }, ]; - constructor(private http: HttpClient) { } + constructor(private http: HttpClient) {} angularGridReady(angularGrid: AngularGridInstance) { this.angularGrid = angularGrid; @@ -106,7 +106,12 @@ export class GridResizeByContentComponent implements OnInit { defineGrid() { this.columnDefinitions = [ { - id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, minWidth: 65, + id: 'title', + name: 'Title', + field: 'title', + sortable: true, + type: FieldType.string, + minWidth: 65, // you can adjust the resize calculation via multiple options resizeExtraWidthPadding: 4, resizeCharWidthInPx: 7.6, @@ -158,55 +163,87 @@ export class GridResizeByContentComponent implements OnInit { }, }, editor: { - model: Editors.longText, required: true, alwaysSaveOnEnterKey: true, + model: Editors.longText, + required: true, + alwaysSaveOnEnterKey: true, maxLength: 12, editorOptions: { cols: 45, rows: 6, buttonTexts: { cancel: 'Close', - save: 'Done' - } + save: 'Done', + }, } as LongTextEditorOption, validator: myCustomTitleValidator, }, }, { - id: 'duration', name: 'Duration', field: 'duration', sortable: true, filterable: true, minWidth: 65, - type: FieldType.number, columnGroup: 'Common Factor', + id: 'duration', + name: 'Duration', + field: 'duration', + sortable: true, + filterable: true, + minWidth: 65, + type: FieldType.number, + columnGroup: 'Common Factor', formatter: (_row, _cell, value) => { if (value === null || value === undefined || value === '') { return ''; } return value > 1 ? `${value} days` : `${value} day`; }, - editor: { model: Editors.float, decimal: 2, valueStep: 1, minValue: 0, maxValue: 10000, alwaysSaveOnEnterKey: true, required: true }, + editor: { + model: Editors.float, + decimal: 2, + valueStep: 1, + minValue: 0, + maxValue: 10000, + alwaysSaveOnEnterKey: true, + required: true, + }, }, { - id: 'cost', name: 'Cost', field: 'cost', minWidth: 65, - sortable: true, filterable: true, type: FieldType.number, columnGroup: 'Analysis', + id: 'cost', + name: 'Cost', + field: 'cost', + minWidth: 65, + sortable: true, + filterable: true, + type: FieldType.number, + columnGroup: 'Analysis', filter: { model: Filters.compoundInputNumber }, formatter: Formatters.dollar, }, { - id: 'percentComplete', name: '% Complete', field: 'percentComplete', minWidth: 100, + id: 'percentComplete', + name: '% Complete', + field: 'percentComplete', + minWidth: 100, type: FieldType.number, - sortable: true, filterable: true, columnGroup: 'Analysis', + sortable: true, + filterable: true, + columnGroup: 'Analysis', filter: { model: Filters.compoundSlider, operator: '>=' }, editor: { model: Editors.slider, - minValue: 0, maxValue: 100, + minValue: 0, + maxValue: 100, }, }, { - id: 'complexity', name: 'Complexity', field: 'complexity', + id: 'complexity', + name: 'Complexity', + field: 'complexity', resizeCalcWidthRatio: 0.82, // default calc ratio is 1 or 0.95 for field type of string - sortable: true, filterable: true, columnGroup: 'Analysis', + sortable: true, + filterable: true, + columnGroup: 'Analysis', formatter: (_row, _cell, value) => this.complexityLevelList[value]?.label, exportCustomFormatter: (_row, _cell, value) => this.complexityLevelList[value]?.label, filter: { model: Filters.multipleSelect, - collection: this.complexityLevelList + collection: this.complexityLevelList, }, editor: { model: Editors.singleSelect, @@ -214,47 +251,75 @@ export class GridResizeByContentComponent implements OnInit { }, }, { - id: 'start', name: 'Start', field: 'start', sortable: true, - formatter: Formatters.dateUs, columnGroup: 'Period', + id: 'start', + name: 'Start', + field: 'start', + sortable: true, + formatter: Formatters.dateUs, + columnGroup: 'Period', exportCustomFormatter: Formatters.dateUs, - type: FieldType.date, outputType: FieldType.dateUs, saveOutputType: FieldType.dateUtc, - filterable: true, filter: { model: Filters.compoundDate }, + type: FieldType.date, + outputType: FieldType.dateUs, + saveOutputType: FieldType.dateUtc, + filterable: true, + filter: { model: Filters.compoundDate }, editor: { model: Editors.date, params: { hideClearButton: false } }, }, { - id: 'completed', name: 'Completed', field: 'completed', width: 80, minWidth: 75, maxWidth: 100, - cssClass: 'text-center', columnGroup: 'Period', + id: 'completed', + name: 'Completed', + field: 'completed', + width: 80, + minWidth: 75, + maxWidth: 100, + cssClass: 'text-center', + columnGroup: 'Period', formatter: Formatters.checkmarkMaterial, exportWithFormatter: false, - filterable: true, sortable: true, + filterable: true, + sortable: true, filter: { - collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }], - model: Filters.singleSelect + collection: [ + { value: '', label: '' }, + { value: true, label: 'True' }, + { value: false, label: 'False' }, + ], + model: Filters.singleSelect, }, - editor: { model: Editors.checkbox, }, + editor: { model: Editors.checkbox }, // editor: { model: Editors.singleSelect, collection: [{ value: true, label: 'Yes' }, { value: false, label: 'No' }], }, }, { - id: 'finish', name: 'Finish', field: 'finish', sortable: true, - formatter: Formatters.dateUs, columnGroup: 'Period', - type: FieldType.date, outputType: FieldType.dateUs, saveOutputType: FieldType.dateUtc, - filterable: true, filter: { model: Filters.compoundDate }, + id: 'finish', + name: 'Finish', + field: 'finish', + sortable: true, + formatter: Formatters.dateUs, + columnGroup: 'Period', + type: FieldType.date, + outputType: FieldType.dateUs, + saveOutputType: FieldType.dateUtc, + filterable: true, + filter: { model: Filters.compoundDate }, exportCustomFormatter: Formatters.dateUs, editor: { model: Editors.date, editorOptions: { range: { min: 'today' } } as VanillaCalendarOption, validator: (value, args) => { const dataContext = args && args.item; - if (dataContext && (dataContext.completed && !value)) { + if (dataContext && dataContext.completed && !value) { return { valid: false, msg: 'You must provide a "Finish" date when "Completed" is checked.' }; } return { valid: true, msg: '' }; - } + }, }, }, { - id: 'product', name: 'Product', field: 'product', - filterable: true, columnGroup: 'Item', + id: 'product', + name: 'Product', + field: 'product', + filterable: true, + columnGroup: 'Item', minWidth: 100, resizeCharWidthInPx: 8, exportWithFormatter: true, @@ -274,7 +339,7 @@ export class GridResizeByContentComponent implements OnInit { fetch: (searchTerm: string, callback: (items: false | any[]) => void) => { // const items = require('c://TEMP/items.json'); const products = this.mockProducts(); - callback(products.filter(product => product.itemName.toLowerCase().includes(searchTerm.toLowerCase()))); + callback(products.filter((product) => product.itemName.toLowerCase().includes(searchTerm.toLowerCase()))); }, renderItem: { // layout: 'twoRows', @@ -290,11 +355,14 @@ export class GridResizeByContentComponent implements OnInit { // placeholder: '🔎︎ search product', type: FieldType.string, queryField: 'product.itemName', - } + }, }, { - id: 'origin', name: 'Country of Origin', field: 'origin', - formatter: Formatters.complexObject, columnGroup: 'Item', + id: 'origin', + name: 'Country of Origin', + field: 'origin', + formatter: Formatters.complexObject, + columnGroup: 'Item', exportCustomFormatter: Formatters.complex, // without the Editing cell Formatter dataKey: 'code', labelKey: 'name', @@ -312,12 +380,18 @@ export class GridResizeByContentComponent implements OnInit { model: Filters.inputText, type: FieldType.string, queryField: 'origin.name', - } + }, }, { - id: 'action', name: 'Action', field: 'action', width: 70, minWidth: 70, maxWidth: 70, + id: 'action', + name: 'Action', + field: 'action', + width: 70, + minWidth: 70, + maxWidth: 70, excludeFromExport: true, - formatter: () => `
`, + formatter: () => + `
`, cellMenu: { hideCloseButton: false, commandTitle: 'Commands', @@ -331,8 +405,12 @@ export class GridResizeByContentComponent implements OnInit { }, 'divider', { - command: 'delete-row', title: 'Delete Row', positionOrder: 64, - iconCssClass: 'mdi mdi-close color-danger', cssClass: 'red', textCssClass: 'text-italic color-danger-light', + command: 'delete-row', + title: 'Delete Row', + positionOrder: 64, + iconCssClass: 'mdi mdi-close color-danger', + cssClass: 'red', + textCssClass: 'text-italic color-danger-light', // only show command to 'Delete Row' when the task is not completed itemVisibilityOverride: (args) => { return !args.dataContext?.completed; @@ -343,10 +421,10 @@ export class GridResizeByContentComponent implements OnInit { if (confirm(`Do you really want to delete row (${row + 1}) with "${dataContext.title}"`)) { this.angularGrid.gridService.deleteItemById(dataContext.id); } - } + }, }, ], - } + }, }, ]; @@ -358,13 +436,13 @@ export class GridResizeByContentComponent implements OnInit { autoCommitEdit: true, autoResize: { container: '#smaller-container', - rightPadding: 10 + rightPadding: 10, }, enableAutoResize: true, enablePagination: true, pagination: { pageSize: 10, - pageSizes: [10, 200, 500, 5000] + pageSizes: [10, 200, 500, 5000], }, // resizing by cell content is opt-in @@ -383,7 +461,7 @@ export class GridResizeByContentComponent implements OnInit { enableExcelExport: true, excelExportOptions: { - exportWithFormatter: false + exportWithFormatter: false, }, externalResources: [new ExcelExportService()], enableFiltering: true, @@ -395,7 +473,7 @@ export class GridResizeByContentComponent implements OnInit { }, rowSelectionOptions: { // True (Single Selection), False (Multiple Selections) - selectActiveRow: false + selectActiveRow: false, }, createPreHeaderPanel: true, showPreHeaderPanel: true, @@ -403,8 +481,12 @@ export class GridResizeByContentComponent implements OnInit { rowHeight: 33, headerRowHeight: 35, editCommandHandler: (item, column, editCommand) => { - const prevSerializedValues = Array.isArray(editCommand.prevSerializedValue) ? editCommand.prevSerializedValue : [editCommand.prevSerializedValue]; - const serializedValues = Array.isArray(editCommand.serializedValue) ? editCommand.serializedValue : [editCommand.serializedValue]; + const prevSerializedValues = Array.isArray(editCommand.prevSerializedValue) + ? editCommand.prevSerializedValue + : [editCommand.prevSerializedValue]; + const serializedValues = Array.isArray(editCommand.serializedValue) + ? editCommand.serializedValue + : [editCommand.serializedValue]; const editorColumns = this.columnDefinitions.filter((col) => col.editor !== undefined); const modifiedColumns: Column[] = []; @@ -438,11 +520,11 @@ export class GridResizeByContentComponent implements OnInit { for (let i = 0; i < count; i++) { const randomItemId = Math.floor(Math.random() * this.mockProducts().length); const randomYear = 2000 + Math.floor(Math.random() * 10); - const randomFinishYear = (new Date().getFullYear()) + Math.floor(Math.random() * 10); // use only years not lower than 3 years ago + const randomFinishYear = new Date().getFullYear() + Math.floor(Math.random() * 10); // use only years not lower than 3 years ago const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); - const randomTime = Math.floor((Math.random() * 59)); - const randomFinish = new Date(randomFinishYear, (randomMonth + 1), randomDay, randomTime, randomTime, randomTime); + const randomDay = Math.floor(Math.random() * 29); + const randomTime = Math.floor(Math.random() * 59); + const randomFinish = new Date(randomFinishYear, randomMonth + 1, randomDay, randomTime, randomTime, randomTime); const randomPercentComplete = Math.floor(Math.random() * 100) + 15; // make it over 15 for E2E testing purposes const percentCompletion = randomPercentComplete > 100 ? (i > 5 ? 100 : 88) : randomPercentComplete; // don't use 100 unless it's over index 5, for E2E testing purposes const isCompleted = percentCompletion === 100; @@ -457,11 +539,12 @@ export class GridResizeByContentComponent implements OnInit { }, complexity: i % 3 ? 0 : 2, start: new Date(randomYear, randomMonth, randomDay, randomDay, randomTime, randomTime, randomTime), - finish: (isCompleted || (i % 3 === 0 && (randomFinish > new Date() && i > 3)) ? (isCompleted ? new Date() : randomFinish) : ''), // make sure the random date is earlier than today and it's index is bigger than 3 - cost: (i % 33 === 0) ? null : Math.round(Math.random() * 10000) / 100, - completed: (isCompleted || (i % 3 === 0 && (randomFinish > new Date() && i > 3))), - product: { id: this.mockProducts()[randomItemId]?.id, itemName: this.mockProducts()[randomItemId]?.itemName, }, - origin: (i % 2) ? { code: 'CA', name: 'Canada' } : { code: 'US', name: 'United States' }, + finish: + isCompleted || (i % 3 === 0 && randomFinish > new Date() && i > 3) ? (isCompleted ? new Date() : randomFinish) : '', // make sure the random date is earlier than today and it's index is bigger than 3 + cost: i % 33 === 0 ? null : Math.round(Math.random() * 10000) / 100, + completed: isCompleted || (i % 3 === 0 && randomFinish > new Date() && i > 3), + product: { id: this.mockProducts()[randomItemId]?.id, itemName: this.mockProducts()[randomItemId]?.itemName }, + origin: i % 2 ? { code: 'CA', name: 'Canada' } : { code: 'US', name: 'United States' }, }; if (!(i % 8)) { @@ -513,7 +596,7 @@ export class GridResizeByContentComponent implements OnInit { handleDefaultResizeColumns() { // just for demo purposes, set it back to its original width const columns = this.angularGrid.slickGrid.getColumns() as Column[]; - columns.forEach(col => col.width = col.originalWidth); + columns.forEach((col) => (col.width = col.originalWidth)); this.angularGrid.slickGrid.setColumns(columns); this.angularGrid.slickGrid.autosizeColumns(); this.isUsingDefaultResize = true; @@ -623,7 +706,6 @@ export class GridResizeByContentComponent implements OnInit { } this.angularGrid.slickGrid.invalidate(); - // optionally open the last cell editor associated if (showLastEditor) { this.angularGrid?.slickGrid.gotoCell(lastEditCommand.row, lastEditCommand.cell, false); @@ -671,7 +753,7 @@ export class GridResizeByContentComponent implements OnInit { id: 2, itemName: 'Awesome Wooden Mouse', itemNameTranslated: 'super old mouse', - listPrice: 15.00, + listPrice: 15.0, itemTypeName: 'I', image: 'https://i.imgur.com/RaVJuLr.jpg', icon: `mdi ${this.getRandomIcon(2)}`, @@ -788,7 +870,7 @@ export class GridResizeByContentComponent implements OnInit { 'mdi-table-refresh', 'mdi-undo', ]; - const randomNumber = Math.floor((Math.random() * icons.length - 1)); + const randomNumber = Math.floor(Math.random() * icons.length - 1); return icons[iconIndex ?? randomNumber]; } diff --git a/src/app/examples/grid-rowdetail.component.html b/src/app/examples/grid-rowdetail.component.html index 369886853..7c7704059 100644 --- a/src/app/examples/grid-rowdetail.component.html +++ b/src/app/examples/grid-rowdetail.component.html @@ -1,15 +1,16 @@

- {{title}} - - + code @@ -28,23 +29,25 @@

- +

-
- {{message}} +
+ {{ message }}
- + -
\ No newline at end of file + diff --git a/src/app/examples/grid-rowdetail.component.ts b/src/app/examples/grid-rowdetail.component.ts index aa07c7c43..f2187c4c7 100644 --- a/src/app/examples/grid-rowdetail.component.ts +++ b/src/app/examples/grid-rowdetail.component.ts @@ -7,7 +7,7 @@ import { Filters, Formatters, GridOption, - SlickRowDetailView + SlickRowDetailView, } from './../modules/angular-slickgrid'; import { RowDetailViewComponent } from './rowdetail-view.component'; import { RowDetailPreloadComponent } from './rowdetail-preload.component'; @@ -15,7 +15,7 @@ import { RowDetailPreloadComponent } from './rowdetail-preload.component'; const NB_ITEMS = 1000; @Component({ - templateUrl: './grid-rowdetail.component.html' + templateUrl: './grid-rowdetail.component.html', }) export class GridRowDetailComponent implements OnDestroy, OnInit { private _darkMode = false; @@ -45,7 +45,7 @@ export class GridRowDetailComponent implements OnDestroy, OnInit { // you can get the SlickGrid RowDetail plugin (addon) instance via 2 ways // option 1 - return (this.angularGrid.extensions.rowDetailView?.instance || {}); + return this.angularGrid.extensions.rowDetailView?.instance || {}; // OR option 2 // return this.angularGrid?.extensionService.getExtensionInstanceByName(ExtensionName.rowDetailView) || {}; @@ -63,30 +63,87 @@ export class GridRowDetailComponent implements OnDestroy, OnInit { /* Define grid Options and Columns */ defineGrid() { this.columnDefinitions = [ - { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, width: 70, filterable: true, editor: { model: Editors.text } }, - { id: 'duration', name: 'Duration (days)', field: 'duration', formatter: Formatters.decimal, params: { minDecimal: 1, maxDecimal: 2 }, sortable: true, type: FieldType.number, minWidth: 90, filterable: true }, { - id: 'percent2', name: '% Complete', field: 'percentComplete2', editor: { model: Editors.slider }, - formatter: Formatters.progressBar, type: FieldType.number, sortable: true, minWidth: 100, filterable: true, filter: { model: Filters.slider, operator: '>' } + id: 'title', + name: 'Title', + field: 'title', + sortable: true, + type: FieldType.string, + width: 70, + filterable: true, + editor: { model: Editors.text }, }, - { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate } }, - { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate } }, { - id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', + id: 'duration', + name: 'Duration (days)', + field: 'duration', + formatter: Formatters.decimal, + params: { minDecimal: 1, maxDecimal: 2 }, + sortable: true, + type: FieldType.number, + minWidth: 90, + filterable: true, + }, + { + id: 'percent2', + name: '% Complete', + field: 'percentComplete2', + editor: { model: Editors.slider }, + formatter: Formatters.progressBar, + type: FieldType.number, + sortable: true, minWidth: 100, - formatter: Formatters.checkmarkMaterial, type: FieldType.boolean, - filterable: true, sortable: true, + filterable: true, + filter: { model: Filters.slider, operator: '>' }, + }, + { + id: 'start', + name: 'Start', + field: 'start', + formatter: Formatters.dateIso, + sortable: true, + type: FieldType.date, + minWidth: 90, + exportWithFormatter: true, + filterable: true, + filter: { model: Filters.compoundDate }, + }, + { + id: 'finish', + name: 'Finish', + field: 'finish', + formatter: Formatters.dateIso, + sortable: true, + type: FieldType.date, + minWidth: 90, + exportWithFormatter: true, + filterable: true, + filter: { model: Filters.compoundDate }, + }, + { + id: 'effort-driven', + name: 'Effort Driven', + field: 'effortDriven', + minWidth: 100, + formatter: Formatters.checkmarkMaterial, + type: FieldType.boolean, + filterable: true, + sortable: true, filter: { - collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }], - model: Filters.singleSelect - } - } + collection: [ + { value: '', label: '' }, + { value: true, label: 'True' }, + { value: false, label: 'False' }, + ], + model: Filters.singleSelect, + }, + }, ]; this.gridOptions = { autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableFiltering: true, enableRowDetailView: true, @@ -141,7 +198,7 @@ export class GridRowDetailComponent implements OnDestroy, OnInit { }, rowSelectionOptions: { // True (Single Selection), False (Multiple Selections) - selectActiveRow: true + selectActiveRow: true, }, // You could also enable Row Selection as well, but just make sure to disable `useRowClick: false` @@ -162,19 +219,19 @@ export class GridRowDetailComponent implements OnDestroy, OnInit { for (let i = 0; i < NB_ITEMS; i++) { const randomYear = 2000 + Math.floor(Math.random() * 10); const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); + const randomDay = Math.floor(Math.random() * 29); const randomPercent = Math.round(Math.random() * 100); tmpData[i] = { rowId: i, title: 'Task ' + i, - duration: (i % 33 === 0) ? null : Math.random() * 100 + '', + duration: i % 33 === 0 ? null : Math.random() * 100 + '', percentComplete: randomPercent, percentComplete2: randomPercent, percentCompleteNumber: randomPercent, start: new Date(randomYear, randomMonth, randomDay), - finish: new Date(randomYear, (randomMonth + 1), randomDay), - effortDriven: (i % 5 === 0) + finish: new Date(randomYear, randomMonth + 1, randomDay), + effortDriven: i % 5 === 0, }; } this.dataset = tmpData; @@ -216,7 +273,18 @@ export class GridRowDetailComponent implements OnDestroy, OnInit { /** Just for demo purposes, we will simulate an async server call and return more details on the selected row item */ simulateServerAsyncCall(item: any) { // random set of names to use for more item detail - const randomNames = ['John Doe', 'Jane Doe', 'Chuck Norris', 'Bumblebee', 'Jackie Chan', 'Elvis Presley', 'Bob Marley', 'Mohammed Ali', 'Bruce Lee', 'Rocky Balboa']; + const randomNames = [ + 'John Doe', + 'Jane Doe', + 'Chuck Norris', + 'Bumblebee', + 'Jackie Chan', + 'Elvis Presley', + 'Bob Marley', + 'Mohammed Ali', + 'Bruce Lee', + 'Rocky Balboa', + ]; // fill the template on async delay return new Promise((resolve) => { @@ -253,4 +321,4 @@ export class GridRowDetailComponent implements OnDestroy, OnInit { private randomNumber(min: number, max: number) { return Math.floor(Math.random() * (max - min + 1) + min); } -} \ No newline at end of file +} diff --git a/src/app/examples/grid-rowmove.component.html b/src/app/examples/grid-rowmove.component.html index 8566bb445..19f2401ac 100644 --- a/src/app/examples/grid-rowmove.component.html +++ b/src/app/examples/grid-rowmove.component.html @@ -1,10 +1,12 @@

- {{title}} + {{ title }} - + code @@ -13,8 +15,11 @@

- @@ -42,12 +47,14 @@

- +
-
\ No newline at end of file +

diff --git a/src/app/examples/grid-rowmove.component.ts b/src/app/examples/grid-rowmove.component.ts index 947ec63bc..6afe8d2a8 100644 --- a/src/app/examples/grid-rowmove.component.ts +++ b/src/app/examples/grid-rowmove.component.ts @@ -1,9 +1,17 @@ import { Component, OnInit } from '@angular/core'; -import { AngularGridInstance, Column, ExtensionName, Filters, Formatters, GridOption, OnEventArgs } from './../modules/angular-slickgrid'; +import { + AngularGridInstance, + Column, + ExtensionName, + Filters, + Formatters, + GridOption, + OnEventArgs, +} from './../modules/angular-slickgrid'; @Component({ - templateUrl: './grid-rowmove.component.html' + templateUrl: './grid-rowmove.component.html', }) export class GridRowMoveComponent implements OnInit { title = 'Example 17: Row Move & Checkbox Selector'; @@ -38,34 +46,48 @@ export class GridRowMoveComponent implements OnInit { ngOnInit(): void { this.columnDefinitions = [ - { id: 'title', name: 'Title', field: 'title', filterable: true, }, + { id: 'title', name: 'Title', field: 'title', filterable: true }, { id: 'duration', name: 'Duration', field: 'duration', filterable: true, sortable: true }, { id: '%', name: '% Complete', field: 'percentComplete', filterable: true, sortable: true }, { - id: 'start', name: 'Start', field: 'start', filterable: true, sortable: true, + id: 'start', + name: 'Start', + field: 'start', + filterable: true, + sortable: true, filter: { model: Filters.compoundDate }, }, { - id: 'finish', name: 'Finish', field: 'finish', - filterable: true, sortable: true, + id: 'finish', + name: 'Finish', + field: 'finish', + filterable: true, + sortable: true, filter: { model: Filters.compoundDate }, }, { - id: 'effort-driven', name: 'Completed', field: 'effortDriven', + id: 'effort-driven', + name: 'Completed', + field: 'effortDriven', formatter: Formatters.checkmarkMaterial, - filterable: true, sortable: true, + filterable: true, + sortable: true, filter: { - collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }], - model: Filters.singleSelect + collection: [ + { value: '', label: '' }, + { value: true, label: 'True' }, + { value: false, label: 'False' }, + ], + model: Filters.singleSelect, }, - } + }, ]; this.gridOptions = { enableAutoResize: true, autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableCellNavigation: true, enableFiltering: true, @@ -75,12 +97,12 @@ export class GridRowMoveComponent implements OnInit { // you can toggle these 2 properties to show the "select all" checkbox in different location hideInFilterHeaderRow: false, - hideInColumnTitleRow: true + hideInColumnTitleRow: true, }, enableRowSelection: true, rowSelectionOptions: { // True (Single Selection), False (Multiple Selections) - selectActiveRow: false + selectActiveRow: false, }, dataView: { syncGridSelection: true, // enable this flag so that the row selection follows the row even if we move it to another position @@ -111,8 +133,8 @@ export class GridRowMoveComponent implements OnInit { // the RECOMMENDED is to use "dataContextIds" since that will always work even with Pagination, while "gridRowIndexes" is only good for 1 page rowSelection: { // gridRowIndexes: [2], // the row position of what you see on the screen (UI) - dataContextIds: [1, 2, 6, 7] // (recommended) select by your data object IDs - } + dataContextIds: [1, 2, 6, 7], // (recommended) select by your data object IDs + }, }, }; @@ -130,16 +152,19 @@ export class GridRowMoveComponent implements OnInit { percentComplete: Math.round(Math.random() * 100), start: '01/01/2009', finish: '01/05/2009', - effortDriven: (i % 5 === 0) + effortDriven: i % 5 === 0, }; } this.dataset = mockDataset; } - onBeforeMoveRow(e: MouseEvent | TouchEvent, data: { rows: number[]; insertBefore: number; }) { + onBeforeMoveRow(e: MouseEvent | TouchEvent, data: { rows: number[]; insertBefore: number }) { for (const rowIdx of data.rows) { // no point in moving before or after itself - if (rowIdx === data.insertBefore || (rowIdx === data.insertBefore - 1 && ((data.insertBefore - 1) !== this.angularGrid.dataView.getItemCount()))) { + if ( + rowIdx === data.insertBefore || + (rowIdx === data.insertBefore - 1 && data.insertBefore - 1 !== this.angularGrid.dataView.getItemCount()) + ) { e.stopPropagation(); return false; } @@ -166,11 +191,13 @@ export class GridRowMoveComponent implements OnInit { const filteredItems = this.angularGrid.dataView.getFilteredItems(); const itemOnRight = this.angularGrid.dataView.getItem(insertBefore); - const insertBeforeFilteredIdx = itemOnRight ? this.angularGrid.dataView.getIdxById(itemOnRight.id) : this.angularGrid.dataView.getItemCount(); + const insertBeforeFilteredIdx = itemOnRight + ? this.angularGrid.dataView.getIdxById(itemOnRight.id) + : this.angularGrid.dataView.getItemCount(); const filteredRowItems: any[] = []; - rows.forEach(row => filteredRowItems.push(filteredItems[row])); - const filteredRows = filteredRowItems.map(item => this.angularGrid.dataView.getIdxById(item.id)); + rows.forEach((row) => filteredRowItems.push(filteredItems[row])); + const filteredRows = filteredRowItems.map((item) => this.angularGrid.dataView.getIdxById(item.id)); const left = tmpDataset.slice(0, insertBeforeFilteredIdx); const right = tmpDataset.slice(insertBeforeFilteredIdx, tmpDataset.length); @@ -236,8 +263,9 @@ export class GridRowMoveComponent implements OnInit { maxWidth: 30, onCellClick: (clickEvent: Event, args: OnEventArgs) => { alert(`Technically we should Edit "Task ${args.dataContext.id}"`); - } - }, { + }, + }, + { id: 'delete-symbol', field: 'id', excludeFromColumnPicker: true, @@ -251,8 +279,8 @@ export class GridRowMoveComponent implements OnInit { if (confirm('Are you sure?')) { this.angularGrid.gridService.deleteItemById(args.dataContext.id); } - } - } + }, + }, ]; this.columnDefinitions.splice(0, 0, newCols[0], newCols[1]); diff --git a/src/app/examples/grid-rowselection.component.html b/src/app/examples/grid-rowselection.component.html index 2cbaafbf7..ca603a87d 100644 --- a/src/app/examples/grid-rowselection.component.html +++ b/src/app/examples/grid-rowselection.component.html @@ -1,10 +1,12 @@

- {{title}} + {{ title }} - + code @@ -12,12 +14,11 @@

-
+
Pagination
-
- +
-
+
-
- Pagination: +
+ Pagination: +
-
- +
-
\ No newline at end of file +
diff --git a/src/app/examples/grid-rowselection.component.ts b/src/app/examples/grid-rowselection.component.ts index 4845dc433..b03f1f4a6 100644 --- a/src/app/examples/grid-rowselection.component.ts +++ b/src/app/examples/grid-rowselection.component.ts @@ -7,7 +7,7 @@ import { Filters, Formatters, GridOption, - GridStateChange + GridStateChange, } from './../modules/angular-slickgrid'; @Component({ @@ -41,7 +41,7 @@ export class GridRowSelectionComponent implements OnInit { selectedTitle = ''; selectedGrid2IDs!: number[]; - constructor(private cd: ChangeDetectorRef) { } + constructor(private cd: ChangeDetectorRef) {} ngOnInit(): void { this.prepareGrid(); @@ -61,51 +61,107 @@ export class GridRowSelectionComponent implements OnInit { this.columnDefinitions1 = [ { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, filterable: true }, { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, filterable: true }, - { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, filterable: true, sortable: true }, { - id: 'start', name: 'Start', field: 'start', - formatter: Formatters.dateIso, exportWithFormatter: true, type: FieldType.date, - filterable: true, sortable: true, filter: { model: Filters.compoundDate }, + id: 'complete', + name: '% Complete', + field: 'percentComplete', + formatter: Formatters.percentCompleteBar, + type: FieldType.number, + filterable: true, + sortable: true, }, { - id: 'finish', name: 'Finish', field: 'finish', - formatter: Formatters.dateIso, exportWithFormatter: true, type: FieldType.date, - filterable: true, sortable: true, filter: { model: Filters.compoundDate }, + id: 'start', + name: 'Start', + field: 'start', + formatter: Formatters.dateIso, + exportWithFormatter: true, + type: FieldType.date, + filterable: true, + sortable: true, + filter: { model: Filters.compoundDate }, }, { - id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', - formatter: Formatters.checkmarkMaterial, type: FieldType.boolean, - sortable: true, filterable: true, + id: 'finish', + name: 'Finish', + field: 'finish', + formatter: Formatters.dateIso, + exportWithFormatter: true, + type: FieldType.date, + filterable: true, + sortable: true, + filter: { model: Filters.compoundDate }, + }, + { + id: 'effort-driven', + name: 'Effort Driven', + field: 'effortDriven', + formatter: Formatters.checkmarkMaterial, + type: FieldType.boolean, + sortable: true, + filterable: true, filter: { - collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }], + collection: [ + { value: '', label: '' }, + { value: true, label: 'true' }, + { value: false, label: 'false' }, + ], model: Filters.singleSelect, - } - } + }, + }, ]; this.columnDefinitions2 = [ { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, filterable: true }, { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, filterable: true }, - { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, filterable: true, sortable: true }, { - id: 'start', name: 'Start', field: 'start', - formatter: Formatters.dateIso, exportWithFormatter: true, type: FieldType.date, - filterable: true, sortable: true, filter: { model: Filters.compoundDate }, + id: 'complete', + name: '% Complete', + field: 'percentComplete', + formatter: Formatters.percentCompleteBar, + type: FieldType.number, + filterable: true, + sortable: true, }, { - id: 'finish', name: 'Finish', field: 'finish', - formatter: Formatters.dateIso, exportWithFormatter: true, type: FieldType.date, - filterable: true, sortable: true, filter: { model: Filters.compoundDate }, + id: 'start', + name: 'Start', + field: 'start', + formatter: Formatters.dateIso, + exportWithFormatter: true, + type: FieldType.date, + filterable: true, + sortable: true, + filter: { model: Filters.compoundDate }, }, { - id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', - formatter: Formatters.checkmarkMaterial, type: FieldType.boolean, - sortable: true, filterable: true, + id: 'finish', + name: 'Finish', + field: 'finish', + formatter: Formatters.dateIso, + exportWithFormatter: true, + type: FieldType.date, + filterable: true, + sortable: true, + filter: { model: Filters.compoundDate }, + }, + { + id: 'effort-driven', + name: 'Effort Driven', + field: 'effortDriven', + formatter: Formatters.checkmarkMaterial, + type: FieldType.boolean, + sortable: true, + filterable: true, filter: { - collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }], + collection: [ + { value: '', label: '' }, + { value: true, label: 'true' }, + { value: false, label: 'false' }, + ], model: Filters.singleSelect, - } - } + }, + }, ]; this.gridOptions1 = { @@ -133,15 +189,15 @@ export class GridRowSelectionComponent implements OnInit { selectActiveRow: true, }, columnPicker: { - hideForceFitButton: true + hideForceFitButton: true, }, gridMenu: { - hideForceFitButton: true + hideForceFitButton: true, }, enablePagination: true, pagination: { pageSizes: [5, 10, 15, 20, 25, 50, 75, 100], - pageSize: 5 + pageSize: 5, }, // we can use some Presets, for the example Pagination presets: { @@ -163,14 +219,14 @@ export class GridRowSelectionComponent implements OnInit { }, rowSelectionOptions: { // True (Single Selection), False (Multiple Selections) - selectActiveRow: false + selectActiveRow: false, }, enableCheckboxSelector: true, enableRowSelection: true, enablePagination: true, pagination: { pageSizes: [5, 10, 15, 20, 25, 50, 75, 100], - pageSize: 5 + pageSize: 5, }, // 1. pre-select some grid row indexes (less recommended, better use the Presets, see below) // preselectedRows: [0, 2], @@ -182,8 +238,8 @@ export class GridRowSelectionComponent implements OnInit { // the RECOMMENDED is to use "dataContextIds" since that will always work even with Pagination, while "gridRowIndexes" is only good for 1 page rowSelection: { // gridRowIndexes: [2], // the row position of what you see on the screen (UI) - dataContextIds: [3, 12, 13, 522] // (recommended) select by your data object IDs - } + dataContextIds: [3, 12, 13, 522], // (recommended) select by your data object IDs + }, }, }; @@ -197,7 +253,7 @@ export class GridRowSelectionComponent implements OnInit { for (let i = 0; i < count; i++) { const randomYear = 2000 + Math.floor(Math.random() * 10); const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); + const randomDay = Math.floor(Math.random() * 29); const randomPercent = Math.round(Math.random() * 100); mockDataset[i] = { @@ -207,8 +263,8 @@ export class GridRowSelectionComponent implements OnInit { percentComplete: randomPercent, percentCompleteNumber: randomPercent, start: new Date(randomYear, randomMonth, randomDay), - finish: new Date(randomYear, (randomMonth + 1), randomDay), - effortDriven: (i % 5 === 0) + finish: new Date(randomYear, randomMonth + 1, randomDay), + effortDriven: i % 5 === 0, }; } return mockDataset; @@ -244,7 +300,7 @@ export class GridRowSelectionComponent implements OnInit { if (gridStateChanges!.gridState!.rowSelection) { this.selectedGrid2IDs = (gridStateChanges!.gridState!.rowSelection.filteredDataContextIds || []) as number[]; this.selectedGrid2IDs = this.selectedGrid2IDs.sort((a, b) => a - b); // sort by ID - this.selectedTitles = this.selectedGrid2IDs.map(dataContextId => `Task ${dataContextId}`).join(','); + this.selectedTitles = this.selectedGrid2IDs.map((dataContextId) => `Task ${dataContextId}`).join(','); if (this.selectedTitles.length > 293) { this.selectedTitles = this.selectedTitles.substring(0, 293) + '...'; } diff --git a/src/app/examples/grid-state.component.html b/src/app/examples/grid-state.component.html index 59e1680cf..6758adc2f 100644 --- a/src/app/examples/grid-state.component.html +++ b/src/app/examples/grid-state.component.html @@ -1,10 +1,12 @@

- {{title}} + {{ title }} - + code @@ -22,15 +24,17 @@

Locale: - {{selectedLanguage + '.json'}} + {{ selectedLanguage + '.json' }} - + -

\ No newline at end of file +
diff --git a/src/app/examples/grid-state.component.ts b/src/app/examples/grid-state.component.ts index 58a32a64d..e1cf11955 100644 --- a/src/app/examples/grid-state.component.ts +++ b/src/app/examples/grid-state.component.ts @@ -12,7 +12,7 @@ import { type GridState, type GridStateChange, type MultipleSelectOption, - unsubscribeAllObservables + unsubscribeAllObservables, } from './../modules/angular-slickgrid'; function randomBetween(min: number, max: number) { @@ -23,7 +23,7 @@ const LOCAL_STORAGE_KEY = 'gridState'; const NB_ITEMS = 500; @Component({ - templateUrl: './grid-state.component.html' + templateUrl: './grid-state.component.html', }) export class GridStateComponent implements OnInit, OnDestroy { title = 'Example 16: Grid State & Presets using Local Storage'; @@ -75,7 +75,7 @@ export class GridStateComponent implements OnInit, OnDestroy { clearGridStateFromLocalStorage() { this.angularGrid.gridService.resetGrid(this.columnDefinitions); this.angularGrid.paginationService!.changeItemPerPage(DEFAULT_PAGE_SIZE); - window.setTimeout(() => localStorage[LOCAL_STORAGE_KEY] = null); + window.setTimeout(() => (localStorage[LOCAL_STORAGE_KEY] = null)); } /* Define grid Options and Columns */ @@ -95,25 +95,38 @@ export class GridStateComponent implements OnInit, OnDestroy { filterable: true, sortable: true, type: FieldType.string, - minWidth: 45, width: 100, + minWidth: 45, + width: 100, filter: { - model: Filters.compoundInput - } + model: Filters.compoundInput, + }, }, { - id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80, width: 100, + id: 'description', + name: 'Description', + field: 'description', + filterable: true, + sortable: true, + minWidth: 80, + width: 100, type: FieldType.string, filter: { model: Filters.input, filterShortcuts: [ - { titleKey: 'BLANK_VALUES', searchTerms: ['< A'], iconCssClass: 'mdi mdi-filter-minus-outline', }, - { titleKey: 'NON_BLANK_VALUES', searchTerms: ['> A'], iconCssClass: 'mdi mdi-filter-plus-outline', }, - ] - } + { titleKey: 'BLANK_VALUES', searchTerms: ['< A'], iconCssClass: 'mdi mdi-filter-minus-outline' }, + { titleKey: 'NON_BLANK_VALUES', searchTerms: ['> A'], iconCssClass: 'mdi mdi-filter-plus-outline' }, + ], + }, }, { - id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, exportCsvForceToKeepAsString: true, - minWidth: 55, width: 100, + id: 'duration', + name: 'Duration (days)', + field: 'duration', + sortable: true, + type: FieldType.number, + exportCsvForceToKeepAsString: true, + minWidth: 55, + width: 100, nameKey: 'DURATION', filterable: true, filter: { @@ -122,51 +135,89 @@ export class GridStateComponent implements OnInit, OnDestroy { // we could add certain option(s) to the "multiple-select" plugin filterOptions: { maxHeight: 250, - width: 175 - } as MultipleSelectOption - } + width: 175, + } as MultipleSelectOption, + }, }, { - id: 'complete', name: '% Complete', field: 'percentComplete', nameKey: 'PERCENT_COMPLETE', minWidth: 70, type: FieldType.number, sortable: true, width: 100, - formatter: Formatters.percentCompleteBar, filterable: true, filter: { model: Filters.slider, operator: '>' } + id: 'complete', + name: '% Complete', + field: 'percentComplete', + nameKey: 'PERCENT_COMPLETE', + minWidth: 70, + type: FieldType.number, + sortable: true, + width: 100, + formatter: Formatters.percentCompleteBar, + filterable: true, + filter: { model: Filters.slider, operator: '>' }, }, { - id: 'start', name: 'Start', field: 'start', nameKey: 'START', formatter: Formatters.dateIso, sortable: true, minWidth: 75, exportWithFormatter: true, width: 100, - type: FieldType.date, filterable: true, + id: 'start', + name: 'Start', + field: 'start', + nameKey: 'START', + formatter: Formatters.dateIso, + sortable: true, + minWidth: 75, + exportWithFormatter: true, + width: 100, + type: FieldType.date, + filterable: true, filter: { model: Filters.compoundDate, filterShortcuts: [ - { titleKey: 'PAST', searchTerms: [tempoFormat(new Date(), 'YYYY-MM-DD')], operator: '<', iconCssClass: 'mdi mdi-calendar', }, - { titleKey: 'FUTURE', searchTerms: [tempoFormat(new Date(), 'YYYY-MM-DD')], operator: '>', iconCssClass: 'mdi mdi-calendar-clock', }, - ] - } + { + titleKey: 'PAST', + searchTerms: [tempoFormat(new Date(), 'YYYY-MM-DD')], + operator: '<', + iconCssClass: 'mdi mdi-calendar', + }, + { + titleKey: 'FUTURE', + searchTerms: [tempoFormat(new Date(), 'YYYY-MM-DD')], + operator: '>', + iconCssClass: 'mdi mdi-calendar-clock', + }, + ], + }, }, { - id: 'completed', field: 'completed', nameKey: 'COMPLETED', minWidth: 85, maxWidth: 85, formatter: Formatters.checkmarkMaterial, width: 100, + id: 'completed', + field: 'completed', + nameKey: 'COMPLETED', + minWidth: 85, + maxWidth: 85, + formatter: Formatters.checkmarkMaterial, + width: 100, type: FieldType.boolean, sortable: true, filterable: true, filter: { - collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }], + collection: [ + { value: '', label: '' }, + { value: true, label: 'True' }, + { value: false, label: 'False' }, + ], model: Filters.singleSelect, // we could add certain option(s) to the "multiple-select" plugin filterOptions: { autoAdjustDropHeight: true } as MultipleSelectOption, - } - } + }, + }, ]; this.gridOptions = { autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableCheckboxSelector: true, enableFiltering: true, enableTranslate: true, i18n: this.translate, columnPicker: { - hideForceFitButton: true + hideForceFitButton: true, }, gridMenu: { hideForceFitButton: true, @@ -178,7 +229,7 @@ export class GridStateComponent implements OnInit, OnDestroy { enablePagination: true, pagination: { pageSizes: [5, 10, 15, 20, 25, 30, 40, 50, 75, 100], - pageSize: DEFAULT_PAGE_SIZE + pageSize: DEFAULT_PAGE_SIZE, }, }; @@ -199,7 +250,7 @@ export class GridStateComponent implements OnInit, OnDestroy { const randomYear = randomBetween(currentYear - 15, currentYear + 8); const randomYearShort = randomBetween(10, 25); const randomMonth = randomBetween(1, 12); - const randomMonthStr = (randomMonth < 10) ? `0${randomMonth}` : randomMonth; + const randomMonthStr = randomMonth < 10 ? `0${randomMonth}` : randomMonth; const randomDay = randomBetween(10, 28); const randomPercent = randomBetween(0, 100); const randomHour = randomBetween(10, 23); @@ -209,14 +260,14 @@ export class GridStateComponent implements OnInit, OnDestroy { id: i, title: 'Task ' + i, etc: 'Something hidden ' + i, - description: (i % 5) ? 'desc ' + i : null, // also add some random to test NULL field + description: i % 5 ? 'desc ' + i : null, // also add some random to test NULL field duration: randomDuration, percentComplete: randomPercent, percentCompleteNumber: randomPercent, - start: new Date(randomYear, randomMonth, randomDay), // provide a Date format + start: new Date(randomYear, randomMonth, randomDay), // provide a Date format usDateShort: `${randomMonth}/${randomDay}/${randomYearShort}`, // provide a date US Short in the dataset utcDate: `${randomYear}-${randomMonthStr}-${randomDay}T${randomHour}:${randomTime}:${randomTime}Z`, - completed: (i % 3 === 0) + completed: i % 3 === 0, }; } return tmpData; @@ -236,7 +287,7 @@ export class GridStateComponent implements OnInit, OnDestroy { } switchLanguage() { - const nextLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en'; + const nextLanguage = this.selectedLanguage === 'en' ? 'fr' : 'en'; this.subscriptions.push( this.translate.use(nextLanguage).subscribe(() => { this.selectedLanguage = nextLanguage; @@ -265,7 +316,7 @@ export class GridStateComponent implements OnInit, OnDestroy { ], sorters: [ { columnId: 'duration', direction: 'DESC' }, - { columnId: 'complete', direction: 'ASC' } + { columnId: 'complete', direction: 'ASC' }, ], } as GridState; } diff --git a/src/app/examples/grid-tabs.component.html b/src/app/examples/grid-tabs.component.html index 2447e687b..fbede05f2 100644 --- a/src/app/examples/grid-tabs.component.html +++ b/src/app/examples/grid-tabs.component.html @@ -1,10 +1,12 @@

- {{title}} + {{ title }} - + code @@ -15,21 +17,25 @@

Grid 1 - Load Local Data

- +

Grid 2 - Load a JSON dataset through Http-Client

- +

-
\ No newline at end of file +
diff --git a/src/app/examples/grid-tabs.component.ts b/src/app/examples/grid-tabs.component.ts index f7cee6fbc..b51f90050 100644 --- a/src/app/examples/grid-tabs.component.ts +++ b/src/app/examples/grid-tabs.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { AngularGridInstance, Column, GridOption, Filters } from '../modules/angular-slickgrid'; @@ -6,7 +6,7 @@ import { AngularGridInstance, Column, GridOption, Filters } from '../modules/ang const URL_CUSTOMERS = 'assets/data/customers_100.json'; @Component({ - templateUrl: './grid-tabs.component.html' + templateUrl: './grid-tabs.component.html', }) export class GridTabsComponent implements OnInit { title = 'Example 24: Grids in Bootstrap Tabs'; @@ -24,7 +24,7 @@ export class GridTabsComponent implements OnInit { dataset1!: any[]; dataset2!: any[]; - constructor(private http: HttpClient) { } + constructor(private http: HttpClient) {} angularGrid2Ready(angularGrid: AngularGridInstance) { this.angularGrid2 = angularGrid; @@ -38,7 +38,7 @@ export class GridTabsComponent implements OnInit { this.dataset1 = this.mockData(); // load data with Http-Client - this.http.get((URL_CUSTOMERS)).subscribe(((data: any[]) => this.dataset2 = data) as any); + this.http.get(URL_CUSTOMERS).subscribe(((data: any[]) => (this.dataset2 = data)) as any); } // Grid2 definition @@ -49,40 +49,48 @@ export class GridTabsComponent implements OnInit { { id: '%', name: '% Complete', field: 'percentComplete', sortable: true, minWidth: 100 }, { id: 'start', name: 'Start', field: 'start', minWidth: 100 }, { id: 'finish', name: 'Finish', field: 'finish', minWidth: 100 }, - { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true, minWidth: 100 } + { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true, minWidth: 100 }, ]; this.gridOptions1 = { enableAutoResize: true, autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, - enableSorting: true + enableSorting: true, }; } // Grid2 definition defineGrid2() { this.columnDefinitions2 = [ - { id: 'name', name: 'Name', field: 'name', filterable: true, sortable: true, }, + { id: 'name', name: 'Name', field: 'name', filterable: true, sortable: true }, { - id: 'gender', name: 'Gender', field: 'gender', filterable: true, sortable: true, + id: 'gender', + name: 'Gender', + field: 'gender', + filterable: true, + sortable: true, filter: { model: Filters.singleSelect, - collection: [{ value: '', label: '' }, { value: 'male', label: 'male' }, { value: 'female', label: 'female' }] - } + collection: [ + { value: '', label: '' }, + { value: 'male', label: 'male' }, + { value: 'female', label: 'female' }, + ], + }, }, - { id: 'company', name: 'Company', field: 'company', filterable: true, sortable: true } + { id: 'company', name: 'Company', field: 'company', filterable: true, sortable: true }, ]; this.gridOptions2 = { enableAutoResize: true, autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableFiltering: true, - enableSorting: true + enableSorting: true, }; } @@ -92,7 +100,7 @@ export class GridTabsComponent implements OnInit { for (let i = 0; i < 1000; i++) { const randomYear = 2000 + Math.floor(Math.random() * 10); const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); + const randomDay = Math.floor(Math.random() * 29); const randomPercent = Math.round(Math.random() * 100); mockDataset[i] = { @@ -102,7 +110,7 @@ export class GridTabsComponent implements OnInit { percentComplete: randomPercent, start: `${randomMonth}/${randomDay}/${randomYear}`, finish: `${randomMonth}/${randomDay}/${randomYear}`, - effortDriven: (i % 5 === 0) + effortDriven: i % 5 === 0, }; } diff --git a/src/app/examples/grid-trading.component.html b/src/app/examples/grid-trading.component.html index ecfbf040c..ba81465c5 100644 --- a/src/app/examples/grid-trading.component.html +++ b/src/app/examples/grid-trading.component.html @@ -1,15 +1,16 @@

- {{title}} - - + code @@ -21,43 +22,49 @@

- + - +
- + to - + - +

- + -
\ No newline at end of file +

+ diff --git a/src/app/examples/grid-trading.component.ts b/src/app/examples/grid-trading.component.ts index 3caafcbf5..1c610c3d1 100644 --- a/src/app/examples/grid-trading.component.ts +++ b/src/app/examples/grid-trading.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit, ViewEncapsulation, } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { faker } from '@faker-js/faker'; import sparkline from '@fnando/sparkline'; import { @@ -56,7 +56,7 @@ const historicSparklineFormatter: Formatter = (_row, _cell, _value: string, _col const tooltip = svg?.nextElementSibling as HTMLElement; if (tooltip) { tooltip.hidden = false; - tooltip.textContent = `$${(datapoint.value * 100 / 100).toFixed(2)}`; + tooltip.textContent = `$${((datapoint.value * 100) / 100).toFixed(2)}`; tooltip.style.top = `${event.offsetY}px`; tooltip.style.left = `${event.offsetX + 20}px`; } @@ -67,7 +67,7 @@ const historicSparklineFormatter: Formatter = (_row, _cell, _value: string, _col if (tooltip) { tooltip.hidden = true; } - } + }, }); const div = document.createElement('div'); div.appendChild(svgElem); @@ -129,82 +129,150 @@ export class GridTradingComponent implements OnDestroy, OnInit { // the columns field property is type-safe, try to add a different string not representing one of DataItems properties this.columnDefinitions = [ { - id: 'currency', name: 'Currency', field: 'currency', filterable: true, sortable: true, minWidth: 65, width: 65, + id: 'currency', + name: 'Currency', + field: 'currency', + filterable: true, + sortable: true, + minWidth: 65, + width: 65, formatter: currencyFormatter, filter: { model: Filters.singleSelect, - collection: [{ label: '', value: '' }, { label: 'CAD', value: 'CAD' }, { label: 'USD', value: 'USD' }] + collection: [ + { label: '', value: '' }, + { label: 'CAD', value: 'CAD' }, + { label: 'USD', value: 'USD' }, + ], }, grouping: { getter: 'currency', - formatter: (g) => `Currency: ${g.value} (${g.count} items)`, - aggregators: [ - new Aggregators.Sum('amount') - ], + formatter: (g) => + `Currency: ${g.value} (${g.count} items)`, + aggregators: [new Aggregators.Sum('amount')], aggregateCollapsed: true, - collapsed: false - } + collapsed: false, + }, }, { id: 'symbol', name: 'Symbol', field: 'symbol', filterable: true, sortable: true, minWidth: 65, width: 65 }, { - id: 'market', name: 'Market', field: 'market', filterable: true, sortable: true, minWidth: 75, width: 75, + id: 'market', + name: 'Market', + field: 'market', + filterable: true, + sortable: true, + minWidth: 75, + width: 75, grouping: { getter: 'market', - formatter: (g) => `Market: ${g.value} (${g.count} items)`, - aggregators: [ - new Aggregators.Sum('amount') - ], + formatter: (g) => + `Market: ${g.value} (${g.count} items)`, + aggregators: [new Aggregators.Sum('amount')], aggregateCollapsed: true, - collapsed: false - } + collapsed: false, + }, }, { id: 'company', name: 'Company', field: 'company', filterable: true, sortable: true, minWidth: 80, width: 130 }, { - id: 'trsnType', name: 'Type', field: 'trsnType', filterable: true, sortable: true, minWidth: 60, width: 60, + id: 'trsnType', + name: 'Type', + field: 'trsnType', + filterable: true, + sortable: true, + minWidth: 60, + width: 60, formatter: transactionTypeFormatter, filter: { model: Filters.singleSelect, - collection: [{ label: '', value: '' }, { label: 'Buy', value: 'Buy' }, { label: 'Sell', value: 'Sell' }] + collection: [ + { label: '', value: '' }, + { label: 'Buy', value: 'Buy' }, + { label: 'Sell', value: 'Sell' }, + ], }, grouping: { getter: 'trsnType', - formatter: (g) => `Type: ${g.value} (${g.count} items)`, - aggregators: [ - new Aggregators.Sum('amount') - ], + formatter: (g) => + `Type: ${g.value} (${g.count} items)`, + aggregators: [new Aggregators.Sum('amount')], aggregateCollapsed: true, - collapsed: false - } + collapsed: false, + }, }, { - id: 'priceChange', name: 'Change', field: 'priceChange', filterable: true, sortable: true, minWidth: 80, width: 80, - filter: { model: Filters.compoundInputNumber }, type: FieldType.number, + id: 'priceChange', + name: 'Change', + field: 'priceChange', + filterable: true, + sortable: true, + minWidth: 80, + width: 80, + filter: { model: Filters.compoundInputNumber }, + type: FieldType.number, formatter: Formatters.multiple, params: { formatters: [Formatters.dollar, priceFormatter], maxDecimal: 2, - } + }, }, { - id: 'price', name: 'Price', field: 'price', filterable: true, sortable: true, minWidth: 70, width: 70, - filter: { model: Filters.compoundInputNumber }, type: FieldType.number, - formatter: Formatters.dollar, params: { maxDecimal: 2 } + id: 'price', + name: 'Price', + field: 'price', + filterable: true, + sortable: true, + minWidth: 70, + width: 70, + filter: { model: Filters.compoundInputNumber }, + type: FieldType.number, + formatter: Formatters.dollar, + params: { maxDecimal: 2 }, }, { - id: 'quantity', name: 'Quantity', field: 'quantity', filterable: true, sortable: true, minWidth: 70, width: 70, - filter: { model: Filters.compoundInputNumber }, type: FieldType.number, + id: 'quantity', + name: 'Quantity', + field: 'quantity', + filterable: true, + sortable: true, + minWidth: 70, + width: 70, + filter: { model: Filters.compoundInputNumber }, + type: FieldType.number, }, { - id: 'amount', name: 'Amount', field: 'amount', filterable: true, sortable: true, minWidth: 70, width: 60, - filter: { model: Filters.compoundInputNumber }, type: FieldType.number, - formatter: Formatters.dollar, params: { maxDecimal: 2 }, + id: 'amount', + name: 'Amount', + field: 'amount', + filterable: true, + sortable: true, + minWidth: 70, + width: 60, + filter: { model: Filters.compoundInputNumber }, + type: FieldType.number, + formatter: Formatters.dollar, + params: { maxDecimal: 2 }, groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollarBold, }, - { id: 'historic', name: 'Price History', field: 'historic', minWidth: 100, width: 150, maxWidth: 150, formatter: historicSparklineFormatter }, { - id: 'execution', name: 'Execution Timestamp', field: 'execution', filterable: true, sortable: true, minWidth: 125, - formatter: Formatters.dateTimeIsoAmPm, exportWithFormatter: true, - type: FieldType.dateTimeIsoAM_PM, filter: { model: Filters.compoundDate } + id: 'historic', + name: 'Price History', + field: 'historic', + minWidth: 100, + width: 150, + maxWidth: 150, + formatter: historicSparklineFormatter, + }, + { + id: 'execution', + name: 'Execution Timestamp', + field: 'execution', + filterable: true, + sortable: true, + minWidth: 125, + formatter: Formatters.dateTimeIsoAmPm, + exportWithFormatter: true, + type: FieldType.dateTimeIsoAM_PM, + filter: { model: Filters.compoundDate }, }, ]; @@ -216,7 +284,7 @@ export class GridTradingComponent implements OnDestroy, OnInit { }, formatterOptions: { displayNegativeNumberWithParentheses: true, - thousandSeparator: ',' + thousandSeparator: ',', }, draggableGrouping: { dropPlaceHolderText: 'Drop a column header here to group by any of these available columns: Currency, Market or Type', @@ -246,24 +314,24 @@ export class GridTradingComponent implements OnDestroy, OnInit { const amount = price * quantity; const now = new Date(); now.setHours(9, 30, 0); - const currency = (Math.floor(Math.random() * 10)) % 2 ? 'CAD' : 'USD'; + const currency = Math.floor(Math.random() * 10) % 2 ? 'CAD' : 'USD'; const company = faker.company.name(); tmpDataset[i] = { id: i, currency, - trsnType: (Math.round(Math.random() * 100)) % 2 ? 'Buy' : 'Sell', + trsnType: Math.round(Math.random() * 100) % 2 ? 'Buy' : 'Sell', company, symbol: currency === 'CAD' ? company.substr(0, 3).toUpperCase() + '.TO' : company.substr(0, 4).toUpperCase(), market: currency === 'CAD' ? 'TSX' : price > 200 ? 'Nasdaq' : 'S&P 500', - duration: (i % 33 === 0) ? null : Math.random() * 100 + '', + duration: i % 33 === 0 ? null : Math.random() * 100 + '', percentCompleteNumber: randomPercent, priceChange, price, quantity, amount, execution: now, - historic: [price] + historic: [price], }; } @@ -282,10 +350,10 @@ export class GridTradingComponent implements OnDestroy, OnInit { const prevItem = deepCopy(this.dataset[rowNumber]); const itemTmp = { ...this.dataset[rowNumber] }; itemTmp.priceChange = priceChange; - itemTmp.price = ((itemTmp.price + priceChange) < 0) ? 0 : itemTmp.price + priceChange; + itemTmp.price = itemTmp.price + priceChange < 0 ? 0 : itemTmp.price + priceChange; itemTmp.quantity = itemTmp.price < 5 ? randomHighQty : randomLowQty; itemTmp.amount = itemTmp.price * itemTmp.quantity; - itemTmp.trsnType = (Math.round(Math.random() * 100)) % 2 ? 'Buy' : 'Sell'; + itemTmp.trsnType = Math.round(Math.random() * 100) % 2 ? 'Buy' : 'Sell'; itemTmp.execution = new Date(); itemTmp.historic.push(itemTmp.price); itemTmp.historic = itemTmp.historic.slice(-20); // keep a max of X historic values @@ -318,7 +386,7 @@ export class GridTradingComponent implements OnDestroy, OnInit { } findColumnById(columnName: string): Column { - return this.columnDefinitions.find(col => col.field === columnName) as Column; + return this.columnDefinitions.find((col) => col.field === columnName) as Column; } renderCellHighlighting(item: any, column: Column, priceChange: number) { diff --git a/src/app/examples/grid-tree-data-hierarchical.component.html b/src/app/examples/grid-tree-data-hierarchical.component.html index fe15c74da..501d6ba7b 100644 --- a/src/app/examples/grid-tree-data-hierarchical.component.html +++ b/src/app/examples/grid-tree-data-hierarchical.component.html @@ -2,9 +2,11 @@

- + code @@ -17,7 +19,12 @@

Add New Pop Song - @@ -33,22 +40,38 @@

Clear Filters - -
- -
@@ -57,40 +80,57 @@

- + -

\ No newline at end of file + diff --git a/src/app/examples/grid-tree-data-hierarchical.component.ts b/src/app/examples/grid-tree-data-hierarchical.component.ts index 3a4c3579d..63278368b 100644 --- a/src/app/examples/grid-tree-data-hierarchical.component.ts +++ b/src/app/examples/grid-tree-data-hierarchical.component.ts @@ -20,10 +20,11 @@ import { @Component({ templateUrl: './grid-tree-data-hierarchical.component.html', styleUrls: ['grid-tree-data-hierarchical.component.scss'], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, }) export class GridTreeDataHierarchicalComponent implements OnInit { - title = 'Example 29: Tree Data with Aggregators (from a Hierarchical Dataset - Wiki)'; + title = + 'Example 29: Tree Data with Aggregators (from a Hierarchical Dataset - Wiki)'; subTitle = `
  • NOTE #1: The grid will automatically sort Ascending with the column that has the Tree Data, you could add a "sortByFieldId" in your column "treeData" option if you wish to sort on a different column
  • NOTE #2: Tree Totals are only calculated once and are NOT recalculated while filtering data, if you do want that feature then you will need to enable autoRecalcTotalsOnFilterChange (see checkbox below)
    • @@ -53,24 +54,45 @@ export class GridTreeDataHierarchicalComponent implements OnInit { defineGrid() { this.columnDefinitions = [ { - id: 'file', name: 'Files', field: 'file', - type: FieldType.string, width: 150, formatter: this.treeFormatter, - filterable: true, sortable: true, + id: 'file', + name: 'Files', + field: 'file', + type: FieldType.string, + width: 150, + formatter: this.treeFormatter, + filterable: true, + sortable: true, }, { - id: 'dateModified', name: 'Date Modified', field: 'dateModified', - formatter: Formatters.dateIso, type: FieldType.dateUtc, outputType: FieldType.dateIso, minWidth: 90, - exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate } + id: 'dateModified', + name: 'Date Modified', + field: 'dateModified', + formatter: Formatters.dateIso, + type: FieldType.dateUtc, + outputType: FieldType.dateIso, + minWidth: 90, + exportWithFormatter: true, + filterable: true, + filter: { model: Filters.compoundDate }, }, { - id: 'description', name: 'Description', field: 'description', minWidth: 90, - filterable: true, sortable: true, + id: 'description', + name: 'Description', + field: 'description', + minWidth: 90, + filterable: true, + sortable: true, }, { - id: 'size', name: 'Size', field: 'size', minWidth: 90, - type: FieldType.number, exportWithFormatter: true, + id: 'size', + name: 'Size', + field: 'size', + minWidth: 90, + type: FieldType.number, + exportWithFormatter: true, excelExportOptions: { autoDetectCellFormat: false }, - filterable: true, filter: { model: Filters.compoundInputNumber }, + filterable: true, + filter: { model: Filters.compoundInputNumber }, // Formatter option #1 (treeParseTotalFormatters) // if you wish to use any of the GroupTotalFormatters (or even regular Formatters), we can do so with the code below @@ -98,10 +120,14 @@ export class GridTreeDataHierarchicalComponent implements OnInit { if (avgVal !== undefined && sumVal !== undefined) { // when found Avg & Sum, we'll display both - return isNaN(sumVal) ? '' : `sum: ${decimalFormatted(sumVal, 0, 2)} MB / avg: ${decimalFormatted(avgVal, 0, 2)} MB (${treeLevel === 0 ? 'total' : 'sub-total'})`; + return isNaN(sumVal) + ? '' + : `sum: ${decimalFormatted(sumVal, 0, 2)} MB / avg: ${decimalFormatted(avgVal, 0, 2)} MB (${treeLevel === 0 ? 'total' : 'sub-total'})`; } else if (sumVal !== undefined) { // or when only Sum is aggregated, then just show Sum - return isNaN(sumVal) ? '' : `sum: ${decimalFormatted(sumVal, 0, 2)} MB (${treeLevel === 0 ? 'total' : 'sub-total'})`; + return isNaN(sumVal) + ? '' + : `sum: ${decimalFormatted(sumVal, 0, 2)} MB (${treeLevel === 0 ? 'total' : 'sub-total'})`; } } // reaching this line means it's a regular dataContext without totals, so regular formatter output will be used @@ -113,14 +139,14 @@ export class GridTreeDataHierarchicalComponent implements OnInit { this.gridOptions = { autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableAutoSizeColumns: true, enableAutoResize: true, enableExcelExport: true, excelExportOptions: { exportWithFormatter: true, - sanitizeDataExport: true + sanitizeDataExport: true, }, externalResources: [new ExcelExportService()], enableFiltering: true, @@ -146,7 +172,10 @@ export class GridTreeDataHierarchicalComponent implements OnInit { // Note: only 5 are currently supported: Avg, Sum, Min, Max and Count // Note 2: also note that Avg Aggregator will automatically give you the "avg", "count" and "sum" so if you need these 3 then simply calling Avg will give you better perf // aggregators: [new Aggregators.Sum('size')] - aggregators: [new Aggregators.Avg('size'), new Aggregators.Sum('size') /* , new Aggregators.Min('size'), new Aggregators.Max('size') */], + aggregators: [ + new Aggregators.Avg('size'), + new Aggregators.Sum('size') /* , new Aggregators.Min('size'), new Aggregators.Max('size') */, + ], // should we auto-recalc Tree Totals (when using Aggregators) anytime a filter changes // it is disabled by default for perf reason, by default it will only calculate totals on first load @@ -191,7 +220,7 @@ export class GridTreeDataHierarchicalComponent implements OnInit { iconSortAscCommand: 'mdi mdi-sort-ascending', iconSortDescCommand: 'mdi mdi-flip-v mdi-sort-descending', iconColumnHideCommand: 'mdi mdi-close', - } + }, }; } @@ -203,7 +232,8 @@ export class GridTreeDataHierarchicalComponent implements OnInit { changeAutoApproveParentItem() { this.isAutoApproveParentItemWhenTreeColumnIsValid = !this.isAutoApproveParentItemWhenTreeColumnIsValid; - this.gridOptions.treeDataOptions!.autoApproveParentItemWhenTreeColumnIsValid = this.isAutoApproveParentItemWhenTreeColumnIsValid; + this.gridOptions.treeDataOptions!.autoApproveParentItemWhenTreeColumnIsValid = + this.isAutoApproveParentItemWhenTreeColumnIsValid; this.angularGrid.slickGrid.setOptions(this.gridOptions); this.angularGrid.filterService.refreshTreeDataFilters(); return true; @@ -243,7 +273,7 @@ export class GridTreeDataHierarchicalComponent implements OnInit { treeFormatter: Formatter = (_row, _cell, value, _columnDef, dataContext, grid) => { const gridOptions = grid.getOptions(); - const treeLevelPropName = gridOptions.treeDataOptions && gridOptions.treeDataOptions.levelPropName || '__treeLevel'; + const treeLevelPropName = (gridOptions.treeDataOptions && gridOptions.treeDataOptions.levelPropName) || '__treeLevel'; if (value === null || value === undefined || dataContext === undefined) { return ''; } @@ -256,7 +286,7 @@ export class GridTreeDataHierarchicalComponent implements OnInit { const exportIndentationLeadingChar = '.'; value = value.replace(/&/g, '&').replace(//g, '>'); - const spacer = ``; + const spacer = ``; const indentSpacer = addWhiteSpaces(5 * treeLevel); if (data[idx + 1]?.[treeLevelPropName] > data[idx][treeLevelPropName] || data[idx]['__hasChildren']) { @@ -294,7 +324,7 @@ export class GridTreeDataHierarchicalComponent implements OnInit { // find first parent object and add the new item as a child const tmpDatasetHierarchical = [...this.datasetHierarchical]; - const popFolderItem = findItemInTreeStructure(tmpDatasetHierarchical, x => x.file === 'pop', 'files'); + const popFolderItem = findItemInTreeStructure(tmpDatasetHierarchical, (x) => x.file === 'pop', 'files'); if (popFolderItem && Array.isArray(popFolderItem.files)) { popFolderItem.files.push({ @@ -319,8 +349,8 @@ export class GridTreeDataHierarchicalComponent implements OnInit { deleteFile() { const tmpDatasetHierarchical = [...this.datasetHierarchical]; - const popFolderItem = findItemInTreeStructure(this.datasetHierarchical, x => x.file === 'pop', 'files'); - const songItemFound = findItemInTreeStructure(this.datasetHierarchical, x => x.id === this.lastInsertedPopSongId, 'files'); + const popFolderItem = findItemInTreeStructure(this.datasetHierarchical, (x) => x.file === 'pop', 'files'); + const songItemFound = findItemInTreeStructure(this.datasetHierarchical, (x) => x.id === this.lastInsertedPopSongId, 'files'); if (popFolderItem && songItemFound) { const songIdx = popFolderItem.files.findIndex((f: any) => f.id === songItemFound.id); @@ -360,43 +390,97 @@ export class GridTreeDataHierarchicalComponent implements OnInit { { id: 24, file: 'bucket-list.txt', dateModified: '2012-03-05T12:44:00.123Z', size: 0.5 }, { id: 18, file: 'something.txt', dateModified: '2015-03-03T03:50:00.123Z', size: 90 }, { - id: 21, file: 'documents', files: [ - { id: 2, file: 'txt', files: [{ id: 3, file: 'todo.txt', description: 'things to do someday maybe', dateModified: '2015-05-12T14:50:00.123Z', size: 0.7, }] }, + id: 21, + file: 'documents', + files: [ + { + id: 2, + file: 'txt', + files: [ + { + id: 3, + file: 'todo.txt', + description: 'things to do someday maybe', + dateModified: '2015-05-12T14:50:00.123Z', + size: 0.7, + }, + ], + }, + { + id: 4, + file: 'pdf', + files: [ + { id: 22, file: 'map2.pdf', dateModified: '2015-07-21T08:22:00.123Z', size: 2.9 }, + { id: 5, file: 'map.pdf', dateModified: '2015-05-21T10:22:00.123Z', size: 3.1 }, + { id: 6, file: 'internet-bill.pdf', dateModified: '2015-05-12T14:50:00.123Z', size: 1.3 }, + { id: 23, file: 'phone-bill.pdf', dateModified: '2015-05-01T07:50:00.123Z', size: 1.5 }, + ], + }, + { + id: 9, + file: 'misc', + files: [{ id: 10, file: 'warranties.txt', dateModified: '2015-02-26T16:50:00.123Z', size: 0.4 }], + }, { - id: 4, file: 'pdf', files: [ - { id: 22, file: 'map2.pdf', dateModified: '2015-07-21T08:22:00.123Z', size: 2.9, }, - { id: 5, file: 'map.pdf', dateModified: '2015-05-21T10:22:00.123Z', size: 3.1, }, - { id: 6, file: 'internet-bill.pdf', dateModified: '2015-05-12T14:50:00.123Z', size: 1.3, }, - { id: 23, file: 'phone-bill.pdf', dateModified: '2015-05-01T07:50:00.123Z', size: 1.5, }, - ] + id: 7, + file: 'xls', + files: [{ id: 8, file: 'compilation.xls', dateModified: '2014-10-02T14:50:00.123Z', size: 2.3 }], }, - { id: 9, file: 'misc', files: [{ id: 10, file: 'warranties.txt', dateModified: '2015-02-26T16:50:00.123Z', size: 0.4, }] }, - { id: 7, file: 'xls', files: [{ id: 8, file: 'compilation.xls', dateModified: '2014-10-02T14:50:00.123Z', size: 2.3, }] }, - { id: 55, file: 'unclassified.csv', dateModified: '2015-04-08T03:44:12.333Z', size: 0.25, }, - { id: 56, file: 'unresolved.csv', dateModified: '2015-04-03T03:21:12.000Z', size: 0.79, }, - { id: 57, file: 'zebra.dll', dateModified: '2016-12-08T13:22:12.432', size: 1.22, }, - ] + { id: 55, file: 'unclassified.csv', dateModified: '2015-04-08T03:44:12.333Z', size: 0.25 }, + { id: 56, file: 'unresolved.csv', dateModified: '2015-04-03T03:21:12.000Z', size: 0.79 }, + { id: 57, file: 'zebra.dll', dateModified: '2016-12-08T13:22:12.432', size: 1.22 }, + ], }, { - id: 11, file: 'music', files: [{ - id: 12, file: 'mp3', files: [ - { id: 16, file: 'rock', files: [{ id: 17, file: 'soft.mp3', dateModified: '2015-05-13T13:50:00Z', size: 98, }] }, - { - id: 14, file: 'pop', files: [ - { id: 15, file: 'theme.mp3', description: 'Movie Theme Song', dateModified: '2015-03-01T17:05:00Z', size: 47, }, - { id: 25, file: 'song.mp3', description: 'it is a song...', dateModified: '2016-10-04T06:33:44Z', size: 6.3, } - ], - }, - { id: 33, file: 'other', files: [] } - ] - }] + id: 11, + file: 'music', + files: [ + { + id: 12, + file: 'mp3', + files: [ + { id: 16, file: 'rock', files: [{ id: 17, file: 'soft.mp3', dateModified: '2015-05-13T13:50:00Z', size: 98 }] }, + { + id: 14, + file: 'pop', + files: [ + { id: 15, file: 'theme.mp3', description: 'Movie Theme Song', dateModified: '2015-03-01T17:05:00Z', size: 47 }, + { id: 25, file: 'song.mp3', description: 'it is a song...', dateModified: '2016-10-04T06:33:44Z', size: 6.3 }, + ], + }, + { id: 33, file: 'other', files: [] }, + ], + }, + ], }, { - id: 26, file: 'recipes', description: 'Cake Recipes', dateModified: '2012-03-05T12:44:00.123Z', files: [ - { id: 29, file: 'cheesecake', description: 'strawberry cheesecake', dateModified: '2012-04-04T13:52:00.123Z', size: 0.2 }, - { id: 30, file: 'chocolate-cake', description: 'tasty sweet chocolate cake', dateModified: '2012-05-05T09:22:00.123Z', size: 0.2 }, - { id: 31, file: 'coffee-cake', description: 'chocolate coffee cake', dateModified: '2012-01-01T08:08:48.123Z', size: 0.2 }, - ] + id: 26, + file: 'recipes', + description: 'Cake Recipes', + dateModified: '2012-03-05T12:44:00.123Z', + files: [ + { + id: 29, + file: 'cheesecake', + description: 'strawberry cheesecake', + dateModified: '2012-04-04T13:52:00.123Z', + size: 0.2, + }, + { + id: 30, + file: 'chocolate-cake', + description: 'tasty sweet chocolate cake', + dateModified: '2012-05-05T09:22:00.123Z', + size: 0.2, + }, + { + id: 31, + file: 'coffee-cake', + description: 'chocolate coffee cake', + dateModified: '2012-01-01T08:08:48.123Z', + size: 0.2, + }, + ], }, ]; } diff --git a/src/app/examples/grid-tree-data-parent-child.component.html b/src/app/examples/grid-tree-data-parent-child.component.html index e614af394..353b43f3b 100644 --- a/src/app/examples/grid-tree-data-parent-child.component.html +++ b/src/app/examples/grid-tree-data-parent-child.component.html @@ -2,16 +2,18 @@

    - + code

    -
    +
    - - - - - - @@ -75,12 +95,18 @@

    - -

    \ No newline at end of file +
    diff --git a/src/app/examples/grid-tree-data-parent-child.component.ts b/src/app/examples/grid-tree-data-parent-child.component.ts index 181ee23f4..187cd9ecb 100644 --- a/src/app/examples/grid-tree-data-parent-child.component.ts +++ b/src/app/examples/grid-tree-data-parent-child.component.ts @@ -19,10 +19,11 @@ const NB_ITEMS = 500; @Component({ templateUrl: './grid-tree-data-parent-child.component.html', styleUrls: ['grid-tree-data-parent-child.component.scss'], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, }) export class GridTreeDataParentChildComponent implements OnInit { - title = 'Example 28: Tree Data (from a flat dataset with parentId references - Wiki)'; + title = + 'Example 28: Tree Data (from a flat dataset with parentId references - Wiki)'; subTitle = `
    • It is assumed that your dataset will have Parent/Child references AND also Tree Level (indent) property.
        • @@ -42,7 +43,7 @@ export class GridTreeDataParentChildComponent implements OnInit { hasNoExpandCollapseChanged = true; treeToggleItems: TreeToggledItem[] = []; - constructor(private cdref: ChangeDetectorRef) { } + constructor(private cdref: ChangeDetectorRef) {} ngOnInit(): void { // define the grid options & columns and then create the grid itself @@ -55,47 +56,82 @@ export class GridTreeDataParentChildComponent implements OnInit { defineGrid() { this.columnDefinitions = [ { - id: 'title', name: 'Title', field: 'title', width: 220, cssClass: 'cell-title', - filterable: true, sortable: true, exportWithFormatter: false, - queryFieldSorter: 'id', type: FieldType.string, - formatter: Formatters.tree, exportCustomFormatter: Formatters.treeExport - + id: 'title', + name: 'Title', + field: 'title', + width: 220, + cssClass: 'cell-title', + filterable: true, + sortable: true, + exportWithFormatter: false, + queryFieldSorter: 'id', + type: FieldType.string, + formatter: Formatters.tree, + exportCustomFormatter: Formatters.treeExport, }, { id: 'duration', name: 'Duration', field: 'duration', minWidth: 90, filterable: true }, { - id: 'percentComplete', name: '% Complete', field: 'percentComplete', - minWidth: 120, maxWidth: 200, exportWithFormatter: false, - sortable: true, filterable: true, filter: { model: Filters.compoundSlider, operator: '>=' }, - formatter: Formatters.percentCompleteBarWithText, type: FieldType.number, + id: 'percentComplete', + name: '% Complete', + field: 'percentComplete', + minWidth: 120, + maxWidth: 200, + exportWithFormatter: false, + sortable: true, + filterable: true, + filter: { model: Filters.compoundSlider, operator: '>=' }, + formatter: Formatters.percentCompleteBarWithText, + type: FieldType.number, }, { - id: 'start', name: 'Start', field: 'start', minWidth: 60, - type: FieldType.dateIso, filterable: true, sortable: true, + id: 'start', + name: 'Start', + field: 'start', + minWidth: 60, + type: FieldType.dateIso, + filterable: true, + sortable: true, filter: { model: Filters.compoundDate }, formatter: Formatters.dateIso, }, { - id: 'finish', name: 'Finish', field: 'finish', minWidth: 60, - type: FieldType.dateIso, filterable: true, sortable: true, + id: 'finish', + name: 'Finish', + field: 'finish', + minWidth: 60, + type: FieldType.dateIso, + filterable: true, + sortable: true, filter: { model: Filters.compoundDate }, formatter: Formatters.dateIso, }, { - id: 'effortDriven', name: 'Effort Driven', width: 80, minWidth: 20, maxWidth: 80, cssClass: 'cell-effort-driven', field: 'effortDriven', + id: 'effortDriven', + name: 'Effort Driven', + width: 80, + minWidth: 20, + maxWidth: 80, + cssClass: 'cell-effort-driven', + field: 'effortDriven', exportWithFormatter: false, - formatter: Formatters.checkmarkMaterial, cannotTriggerInsert: true, + formatter: Formatters.checkmarkMaterial, + cannotTriggerInsert: true, filterable: true, filter: { - collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }], - model: Filters.singleSelect - } - } + collection: [ + { value: '', label: '' }, + { value: true, label: 'True' }, + { value: false, label: 'False' }, + ], + model: Filters.singleSelect, + }, + }, ]; this.gridOptions = { autoResize: { container: '#demo-container', - rightPadding: 10 + rightPadding: 10, }, enableAutoSizeColumns: true, enableAutoResize: true, @@ -166,7 +202,7 @@ export class GridTreeDataParentChildComponent implements OnInit { percentComplete: 99, start: new Date(), finish: new Date(), - effortDriven: false + effortDriven: false, }; // use the Grid Service to insert the item, @@ -195,7 +231,14 @@ export class GridTreeDataParentChildComponent implements OnInit { // optiona 2 - alternative // we could also simply use the spread operator directly - this.angularGrid.gridService.updateItem({ ...item, duration: `11 days`, percentComplete: 77, start: new Date(), finish: new Date(), effortDriven: false }); + this.angularGrid.gridService.updateItem({ + ...item, + duration: `11 days`, + percentComplete: 77, + start: new Date(), + finish: new Date(), + effortDriven: false, + }); } collapseAll() { @@ -216,7 +259,7 @@ export class GridTreeDataParentChildComponent implements OnInit { } hideSpinner() { - window.setTimeout(() => this.loadingClass = '', 200); // delay the hide spinner a bit to avoid show/hide too quickly + window.setTimeout(() => (this.loadingClass = ''), 200); // delay the hide spinner a bit to avoid show/hide too quickly } showSpinner() { @@ -242,7 +285,7 @@ export class GridTreeDataParentChildComponent implements OnInit { for (let i = 0; i < rowCount; i++) { const randomYear = 2000 + Math.floor(Math.random() * 10); const randomMonth = Math.floor(Math.random() * 11); - const randomDay = Math.floor((Math.random() * 29)); + const randomDay = Math.floor(Math.random() * 29); const item: any = (data[i] = {}); let parentId; @@ -259,12 +302,14 @@ export class GridTreeDataParentChildComponent implements OnInit { if (i === 1 || i === 0) { indent = 0; parents.pop(); - } if (i === 3) { + } + if (i === 3) { indent = 1; - } else if (i === 2 || i === 4 || (Math.random() > 0.8 && i > 0 && indent < 3 && i - 1 !== 0 && i - 1 !== 2)) { // also make sure Task 0, 2 remains empty + } else if (i === 2 || i === 4 || (Math.random() > 0.8 && i > 0 && indent < 3 && i - 1 !== 0 && i - 1 !== 2)) { + // also make sure Task 0, 2 remains empty indent++; parents.push(i - 1); - } else if ((Math.random() < 0.3 && indent > 0)) { + } else if (Math.random() < 0.3 && indent > 0) { indent--; parents.pop(); } @@ -280,8 +325,8 @@ export class GridTreeDataParentChildComponent implements OnInit { item['duration'] = '5 days'; item['percentComplete'] = Math.round(Math.random() * 100); item['start'] = new Date(randomYear, randomMonth, randomDay); - item['finish'] = new Date(randomYear, (randomMonth + 1), randomDay); - item['effortDriven'] = (i % 5 === 0); + item['finish'] = new Date(randomYear, randomMonth + 1, randomDay); + item['effortDriven'] = i % 5 === 0; } this.dataset = data; return data; @@ -324,12 +369,13 @@ export class GridTreeDataParentChildComponent implements OnInit { const parentItemFound = this.angularGrid.dataView.getItemByIdx(childItemFound[parentPropName]); if (childItemFound && parentItemFound) { - this.angularGrid.treeDataService.dynamicallyToggleItemState([{ itemId: parentItemFound.id, isCollapsed: !parentItemFound.__collapsed }]); + this.angularGrid.treeDataService.dynamicallyToggleItemState([ + { itemId: parentItemFound.id, isCollapsed: !parentItemFound.__collapsed }, + ]); } } reapplyToggledItems() { this.angularGrid.treeDataService.applyToggledItemStateChanges(this.treeToggleItems); } - } diff --git a/src/app/examples/grid43.component.html b/src/app/examples/grid43.component.html index b3af58ab7..257f00277 100644 --- a/src/app/examples/grid43.component.html +++ b/src/app/examples/grid43.component.html @@ -5,7 +5,8 @@

        + href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid43.component.ts" + > code @@ -31,7 +32,13 @@

        - +
        or
        @@ -52,4 +59,4 @@

        [dataset]="dataset" > -

        \ No newline at end of file +
        diff --git a/src/app/examples/grid43.component.ts b/src/app/examples/grid43.component.ts index f76332c59..ee4a1fe25 100644 --- a/src/app/examples/grid43.component.ts +++ b/src/app/examples/grid43.component.ts @@ -7,7 +7,7 @@ const sampleDataRoot = 'assets/data'; @Component({ styles: ['.file-upload { max-width: 300px; }'], encapsulation: ViewEncapsulation.None, - templateUrl: './grid43.component.html' + templateUrl: './grid43.component.html', }) export class Grid43Component { columnDefinitions: Column[] = []; @@ -18,7 +18,7 @@ export class Grid43Component { uploadFileRef = ''; templateUrl = `${sampleDataRoot}/users.csv`; - constructor(private readonly cd: ChangeDetectorRef) { } + constructor(private readonly cd: ChangeDetectorRef) {} handleFileImport(event: any) { const file = event.target.files[0]; diff --git a/src/app/examples/home.component.html b/src/app/examples/home.component.html index ed3f7a4cd..82e3d1bbd 100644 --- a/src/app/examples/home.component.html +++ b/src/app/examples/home.component.html @@ -1,5 +1,5 @@
        -

        {{title}}

        +

        {{ title }}

        @@ -7,20 +7,18 @@

        {{title}}

        Quick intro

        One of the best javascript datagrid - SlickGrid which was originally developed by @mleibman is now available to Angular. I have - tried, and used, a few datagrids and SlickGrid beats most of them in terms of functionalities - and performance (it can easily even handle a million row). + SlickGrid which was originally developed by @mleibman + is now available to Angular. I have tried, and used, a few datagrids and SlickGrid beats most of them in terms of + functionalities and performance (it can easily even handle a million row).

        Documentation

        The documentation is powered by GitBook and can be found at this link - Angular-Slickgrid - Documentation, so be sure to consult it before opening any new issue. + Angular-Slickgrid - Documentation, so be sure to + consult it before opening any new issue.
        The - HOWTO - Quick Start + HOWTO - Quick Start is the best starting point to get going with this library.

        @@ -29,12 +27,13 @@

        Documentation



        - - Buy Me a Coffee at ko-fi.com + + Buy Me a Coffee at ko-fi.com
        diff --git a/src/app/examples/home.component.ts b/src/app/examples/home.component.ts index e70560eca..ea3788056 100644 --- a/src/app/examples/home.component.ts +++ b/src/app/examples/home.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; @Component({ - templateUrl: './home.component.html' + templateUrl: './home.component.html', }) export class HomeComponent { title = 'Angular-Slickgrid - Demo Site'; diff --git a/src/app/examples/jsonp.ts b/src/app/examples/jsonp.ts index bef99c12a..e2d7c3568 100644 --- a/src/app/examples/jsonp.ts +++ b/src/app/examples/jsonp.ts @@ -11,7 +11,7 @@ interface JsonpOptions { nonce: string; referrerPolicy: string; crossorigin: boolean; -}; +} const defaultOptions = { timeout: 5000, @@ -27,7 +27,10 @@ const removeScript = (scriptId: string) => { } }; -function fetchJsonp(_url: string, options: Partial = {}): Promise<{ ok: boolean; json: () => Promise; }> { +function fetchJsonp( + _url: string, + options: Partial = {} +): Promise<{ ok: boolean; json: () => Promise }> { // to avoid param reassign let url = _url; const timeout = options.timeout || defaultOptions.timeout; @@ -47,7 +50,7 @@ function fetchJsonp(_url: string, options: Partial = {}): }; // Check if the user set their own params, and if not add a ? to start a list of params - url += (url.indexOf('?') === -1) ? '?' : '&'; + url += url.indexOf('?') === -1 ? '?' : '&'; const jsonpScript = document.createElement('script'); jsonpScript.setAttribute('src', `${url}${jsonpCallback}=${callbackFunction}`); @@ -86,4 +89,4 @@ function fetchJsonp(_url: string, options: Partial = {}): }); } -export default fetchJsonp; \ No newline at end of file +export default fetchJsonp; diff --git a/src/app/examples/rowdetail-preload.component.ts b/src/app/examples/rowdetail-preload.component.ts index f21cedc64..e6bf86f0d 100644 --- a/src/app/examples/rowdetail-preload.component.ts +++ b/src/app/examples/rowdetail-preload.component.ts @@ -1,10 +1,9 @@ import { Component } from '@angular/core'; @Component({ - template: - `

        - - Loading... -

        ` + template: `

        + + Loading... +

        `, }) -export class RowDetailPreloadComponent { } +export class RowDetailPreloadComponent {} diff --git a/src/app/examples/rowdetail-view.component.html b/src/app/examples/rowdetail-view.component.html index 175eb288c..5f85eb25d 100644 --- a/src/app/examples/rowdetail-view.component.html +++ b/src/app/examples/rowdetail-view.component.html @@ -1,34 +1,42 @@
        -

        {{model?.title}}

        +

        {{ model?.title }}

        -
        {{model?.reporter}}
        -
        {{model?.duration | number : '1.2-2'}}
        -
        {{model?.percentComplete}}
        +
        + {{ model?.reporter }} +
        +
        + {{ model?.duration | number: '1.2-2' }} +
        +
        + {{ model?.percentComplete }} +
        -
        {{model?.start | date: 'yyyy-MM-dd'}}
        -
        {{model?.finish | date: 'yyyy-MM-dd'}}
        -
        +
        + {{ model?.start | date: 'yyyy-MM-dd' }} +
        +
        + {{ model?.finish | date: 'yyyy-MM-dd' }} +
        +
        + +
        -
        +

        Find out who is the Assignee - +

        - + diff --git a/src/app/examples/rowdetail-view.component.ts b/src/app/examples/rowdetail-view.component.ts index 4821e9792..46e0583bb 100644 --- a/src/app/examples/rowdetail-view.component.ts +++ b/src/app/examples/rowdetail-view.component.ts @@ -15,11 +15,8 @@ interface Item { } @Component({ - styles: [ - '.detail-label { display: inline-flex; align-items: center; gap: 4px; padding: 4px; }', - 'label { font-weight: 600; }' - ], - templateUrl: './rowdetail-view.component.html' + styles: ['.detail-label { display: inline-flex; align-items: center; gap: 4px; padding: 4px; }', 'label { font-weight: 600; }'], + templateUrl: './rowdetail-view.component.html', }) export class RowDetailViewComponent { model!: Item; diff --git a/src/app/examples/swt-common-grid-pagination.component.ts b/src/app/examples/swt-common-grid-pagination.component.ts index 426d0cc64..8bce7a5d5 100644 --- a/src/app/examples/swt-common-grid-pagination.component.ts +++ b/src/app/examples/swt-common-grid-pagination.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input, } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; import { SwtCommonGridComponent } from './swt-common-grid.component'; import { Logger } from './swt-logger.service'; import { HttpClient } from '@angular/common/http'; @@ -13,61 +13,70 @@ import { type GridOption } from '../modules/angular-slickgrid'; selector: 'swt-common-grid-pagination', template: `
        -
        +
        - - - {{pageCount}} + + + {{ pageCount }}
        +
        -
        `, - styles: [`.page-spin { - border: none; - height: 32px; - background-color: transparent; - cursor: default; - animation: mdi-sync mdi-spin infinite linear !important; - } - .page-spin:hover { - background-color: transparent; - } - `] + styles: [ + ` + .page-spin { + border: none; + height: 32px; + background-color: transparent; + cursor: default; + animation: mdi-sync mdi-spin infinite linear !important; + } + .page-spin:hover { + background-color: transparent; + } + `, + ], }) export class SwtCommonGridPaginationComponent implements OnInit { private logger: Logger; @@ -94,20 +103,15 @@ export class SwtCommonGridPaginationComponent implements OnInit { return this._gridPaginationOptions; } - - constructor(private httpClient: HttpClient) { this.logger = new Logger('grid-pagination', httpClient); this.logger.info('method [constructor] - START/END'); } - ngOnInit() { this.logger.info('init: '); } - - changeToFirstPage(event: any) { this.logger.info('method [changeToFirstPage] - START/END'); this.pageNumber = 1; @@ -136,7 +140,6 @@ export class SwtCommonGridPaginationComponent implements OnInit { } } - changeToCurrentPage(event: any) { this.logger.info('method [changeToCurrentPage] - START/END'); this.pageNumber = event.currentTarget.value; diff --git a/src/app/examples/swt-common-grid-test.component.html b/src/app/examples/swt-common-grid-test.component.html index 2d2544f7a..e5078952c 100644 --- a/src/app/examples/swt-common-grid-test.component.html +++ b/src/app/examples/swt-common-grid-test.component.html @@ -2,9 +2,11 @@

        - + code @@ -22,9 +24,11 @@

        - + -

    \ No newline at end of file + diff --git a/src/app/examples/swt-common-grid-test.component.ts b/src/app/examples/swt-common-grid-test.component.ts index 5b5edd8db..656511f79 100644 --- a/src/app/examples/swt-common-grid-test.component.ts +++ b/src/app/examples/swt-common-grid-test.component.ts @@ -13,7 +13,7 @@ import { Logger } from './swt-logger.service'; */ @Component({ selector: 'swt-common-grid-test', - templateUrl: './swt-common-grid-test.component.html' + templateUrl: './swt-common-grid-test.component.html', }) export class SwtCommonGridTestComponent implements OnInit, AfterViewInit { title = 'Example 13: Custom Backend Server Pagination'; @@ -35,7 +35,6 @@ export class SwtCommonGridTestComponent implements OnInit, AfterViewInit { if (this.commonGridPag) { this.commonGrid.paginationComponent = this.commonGridPag; } - } ngAfterViewInit() { @@ -81,9 +80,15 @@ export class SwtCommonGridTestComponent implements OnInit, AfterViewInit { this.updateGridData(); } - updateGridData() { - this.currentUrl = this.testurl + '¤tPage=' + this.commonGrid.currentPage + '&selectedSort=' + this.commonGrid.sortedGridColumn + '&selectedFilter=' + this.commonGrid.filteredGridColumns; + this.currentUrl = + this.testurl + + '¤tPage=' + + this.commonGrid.currentPage + + '&selectedSort=' + + this.commonGrid.sortedGridColumn + + '&selectedFilter=' + + this.commonGrid.filteredGridColumns; // Real HTTP call /*this.httpClient.get(this.currentUrl).subscribe( (data: any) => { @@ -99,110 +104,112 @@ export class SwtCommonGridTestComponent implements OnInit, AfterViewInit { } } - export const data_sample = { - 'pagination_samples': { - 'grid': { - 'metadata': { - 'columns': { - 'column': [{ - 'sort': true, - 'filterable': false, - 'width': 60, - 'dataelement': 'hasNote', - 'heading': 'Note' - }, - { - 'sort': true, - 'filterable': true, - 'width': 125, - 'dataelement': 'status', - 'heading': 'Status' - }, - { - 'sort': true, - 'visible': true, - 'filterable': true, - 'width': 125, - 'dataelement': 'currency', - 'heading': 'Currency' - }, - { - 'sort': true, - 'visible': true, - 'filterable': true, - 'width': 125, - 'dataelement': 'amount', - 'heading': 'Amount' - }, + pagination_samples: { + grid: { + metadata: { + columns: { + column: [ + { + sort: true, + filterable: false, + width: 60, + dataelement: 'hasNote', + heading: 'Note', + }, + { + sort: true, + filterable: true, + width: 125, + dataelement: 'status', + heading: 'Status', + }, + { + sort: true, + visible: true, + filterable: true, + width: 125, + dataelement: 'currency', + heading: 'Currency', + }, + { + sort: true, + visible: true, + filterable: true, + width: 125, + dataelement: 'amount', + heading: 'Amount', + }, + { + sort: true, + visible: true, + filterable: true, + width: 125, + dataelement: 'inputDate', + heading: 'Input Date', + }, + { + sort: true, + visible: true, + filterable: true, + width: 125, + dataelement: 'inputTime', + heading: 'Input Time', + }, + ], + }, + }, + rows: { + row: [ { - 'sort': true, - 'visible': true, - 'filterable': true, - 'width': 125, - 'dataelement': 'inputDate', - 'heading': 'Input Date' + currency: { + content: 'EUR', + }, + amount: { + content: '2 203 677,000', + }, + startTime: { + content: '06/19/2017 11:52:51', + }, + inputDate: { + content: '06/19/2017', + }, + status: { + content: 'New', + }, + inputTime: { + content: '11:52:51', + }, + hasNote: { + content: 'False', + }, }, { - 'sort': true, - 'visible': true, - 'filterable': true, - 'width': 125, - 'dataelement': 'inputTime', - 'heading': 'Input Time' - }] - } - }, - 'rows': { - 'row': [{ - 'currency': { - 'content': 'EUR' - }, - 'amount': { - 'content': '2 203 677,000' - }, - 'startTime': { - 'content': '06/19/2017 11:52:51' + currency: { + content: 'USD', + }, + amount: { + content: '6 203 677,000', + }, + startTime: { + content: '06/28/2017 10:42:00', + }, + inputDate: { + content: '06/28/2017', + }, + status: { + content: 'New', + }, + inputTime: { + content: '10:40:12', + }, + hasNote: { + content: 'True', + }, }, - 'inputDate': { - 'content': '06/19/2017' - }, - 'status': { - 'content': 'New' - }, - 'inputTime': { - 'content': '11:52:51' - }, - 'hasNote': { - 'content': 'False' - } - }, - { - 'currency': { - 'content': 'USD' - }, - 'amount': { - 'content': '6 203 677,000' - }, - 'startTime': { - 'content': '06/28/2017 10:42:00' - }, - 'inputDate': { - 'content': '06/28/2017' - }, - 'status': { - 'content': 'New' - }, - 'inputTime': { - 'content': '10:40:12' - }, - 'hasNote': { - 'content': 'True' - } - } ], - 'maxpage': 5 - } - } - } + maxpage: 5, + }, + }, + }, }; diff --git a/src/app/examples/swt-common-grid.component.ts b/src/app/examples/swt-common-grid.component.ts index bd2f01585..9811e07ac 100644 --- a/src/app/examples/swt-common-grid.component.ts +++ b/src/app/examples/swt-common-grid.component.ts @@ -5,9 +5,15 @@ import { HttpClient } from '@angular/common/http'; import { FieldType } from '../modules/angular-slickgrid'; import type { AngularGridInstance, - AngularSlickgridComponent, Column, - GridOption, BackendService, - BackendServiceOption, FilterChangedArgs, PaginationChangedArgs, Pagination, SlickDataView + AngularSlickgridComponent, + Column, + GridOption, + BackendService, + BackendServiceOption, + FilterChangedArgs, + PaginationChangedArgs, + Pagination, + SlickDataView, } from '../modules/angular-slickgrid'; import { TranslateService } from '@ngx-translate/core'; import { Logger } from './swt-logger.service'; @@ -24,24 +30,27 @@ const DEFAULT_FILTER_TYPING_DEBOUNCE = 750; @Component({ selector: 'swt-common-grid', - template: ` - `, - styles: [` - :host ::ng-deep .gridPane{ - width: 100%!important; - } - :host ::ng-deep .slickgrid-container{ - width: 100%!important; - } - `] + template: ` + `, + styles: [ + ` + :host ::ng-deep .gridPane { + width: 100% !important; + } + :host ::ng-deep .slickgrid-container { + width: 100% !important; + } + `, + ], }) export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendService { - private logger: Logger; private defaultPageSize = 20; @@ -83,21 +92,18 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer // Data - // Injected functions private _onRowDoubleClick: Function = new Function(); private _onRowClick: Function = new Function(); - private _selectedRow: any; - gridOptions: GridOption = { asyncEditorLoading: false, autoEdit: this.isAutoEdit, autoResize: { container: '#common-grid-container', - rightPadding: 10 + rightPadding: 10, }, gridHeight: 200, enableColumnPicker: true, @@ -109,13 +115,13 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer forceFitColumns: true, enableAutoTooltip: true, enableGridMenu: true, - enablePagination: false + enablePagination: false, }; // Initialized to a fake pagination object private _paginationComponent: any = { processing: false, - realPagination: false + realPagination: false, }; @Input() @@ -125,11 +131,11 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer this._paginationComponent = value; this.gridOptions.backendServiceApi = { service: this, - preProcess: () => { }, + preProcess: () => {}, process: () => { return null; }, - postProcess: () => { } + postProcess: () => {}, } as any; this._paginationComponent.gridPaginationOptions = this.gridOptions; this.angularSlickGrid.createBackendApiInternalPostProcessCallback(this.gridOptions); @@ -147,15 +153,17 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer * @param resizer * @param httpClient */ - constructor(private httpClient: HttpClient, private translate: TranslateService, - private el: ElementRef, private renderer: Renderer2) { + constructor( + private httpClient: HttpClient, + private translate: TranslateService, + private el: ElementRef, + private renderer: Renderer2 + ) { this.logger = new Logger('grid', httpClient); this.logger.info('method [constructor] - START/END'); } - - /** * */ @@ -165,7 +173,6 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer // this.gridWidthString = `${this.gridWidth}px`; } - /** * */ @@ -174,9 +181,9 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer } /** - * CustomGrid constructor - * @param columnData - */ + * CustomGrid constructor + * @param columnData + */ CustomGrid(columnData: any) { this.logger.info('method [CustomGrid] - START'); @@ -190,12 +197,10 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer // check if allcolumns tag contains any children if (this.metaData.columns.column) { - // set columnsData and columnDefinitions this.columnData = this.metaData.columns.column; for (const colData of this.columnData) { - const type = FieldType.string; const editor = null; const formatter = null; @@ -215,7 +220,7 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer filter, outputType, params, - width: colData.width + width: colData.width, }; this.columnDefinitions.push(col); @@ -250,9 +255,18 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer * @param _checkHeader * @param _cboLinked */ - CommonGrid(_columnsData: any, _lockedColumnCount: number, _uniqueColumn: string, _baseURL: string, _programId: string, _componentId: string, _enableRenders = true, _colValidationMap = null, _checkHeader = false, _cboLinked = false) { - } - + CommonGrid( + _columnsData: any, + _lockedColumnCount: number, + _uniqueColumn: string, + _baseURL: string, + _programId: string, + _componentId: string, + _enableRenders = true, + _colValidationMap = null, + _checkHeader = false, + _cboLinked = false + ) {} set gridData(rawData: any) { this.logger.info('method [gridData] - START'); @@ -261,7 +275,7 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer for (let index = 0; rawData.row && index < rawData.row.length; index++) { const row = rawData.row[index] as object; const idObj = { - id: index + id: index, }; let key: string; @@ -302,9 +316,6 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer this.dataviewObj = dataview; } - - - /********************************************************/ /******** Pagination+Sot+Filter service : START *********/ /********************************************************/ @@ -317,16 +328,12 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer this.pagination = pagination; } - - resetPaginationOptions() { - - } + resetPaginationOptions() {} updateOptions(serviceOptions?: Partial) { this.options = { ...this.options, ...serviceOptions }; } - /** * FILTERING EMIT EVENT * @param event @@ -356,14 +363,15 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer // dispatch event this.onFilterChanged.emit(args); - this.logger.info('method [onFilterChanged] - onFilterChanged.emit(args) performed, filteredGridColumns=' + this.filteredGridColumns); + this.logger.info( + 'method [onFilterChanged] - onFilterChanged.emit(args) performed, filteredGridColumns=' + this.filteredGridColumns + ); }, timing); this.logger.info('method [onFilterChanged] - END'); return ''; } - /** * PAGINATION EMIT EVENT * @param _event @@ -396,8 +404,6 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer return 'onSortChanged'; } - - getFilteredGridColumns() { return this.filteredGridColumns; } @@ -408,12 +414,6 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer /******** Pagination+Sot+Filter service: END *****************/ - - - - - - // Getters and Setters get selectedRow() { return this._selectedRow; @@ -435,5 +435,4 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer set onRowClick(event: Function) { this._onRowClick = event; } - } diff --git a/src/app/examples/swt-logger.service.ts b/src/app/examples/swt-logger.service.ts index a76cf3d3d..9873a3a5d 100644 --- a/src/app/examples/swt-logger.service.ts +++ b/src/app/examples/swt-logger.service.ts @@ -16,11 +16,18 @@ export class Logger { private options: LoggerConfig = { level: this._clientLogLevel, serverLogLevel: this._serverLogLevel, - serverLoggingUrl: '/remotelog.do' + serverLoggingUrl: '/remotelog.do', }; - constructor(private _class: string, private http?: HttpClient) { - this._isIE = !!(navigator.userAgent.indexOf('MSIE') !== -1 || navigator.userAgent.match(/Trident\//) || navigator.userAgent.match(/Edge\//)); + constructor( + private _class: string, + private http?: HttpClient + ) { + this._isIE = !!( + navigator.userAgent.indexOf('MSIE') !== -1 || + navigator.userAgent.match(/Trident\//) || + navigator.userAgent.match(/Edge\//) + ); } trace(message: string, ...additional: any[]) { @@ -63,16 +70,19 @@ export class Logger { const headers = new HttpHeaders().set('Content-Type', 'application/json'); - this.http!.post(this.options.serverLoggingUrl, { - level: Levels[level], - message, - additional, - timestamp: this._timestamp() - }, { headers }) - .subscribe({ - next: () => null, - error: () => this._log(LoggerLevel.ERROR, false, 'FAILED TO LOG ON SERVER') - }); + this.http!.post( + this.options.serverLoggingUrl, + { + level: Levels[level], + message, + additional, + timestamp: this._timestamp(), + }, + { headers } + ).subscribe({ + next: () => null, + error: () => this._log(LoggerLevel.ERROR, false, 'FAILED TO LOG ON SERVER'), + }); } private _logIE(level: LoggerLevel, message: string, additional: any[]) { @@ -151,15 +161,13 @@ export class LoggerConfig { } export enum LoggerLevel { - TRACE = 0, DEBUG, INFO, LOG, WARN, ERROR, OFF + TRACE = 0, + DEBUG, + INFO, + LOG, + WARN, + ERROR, + OFF, } -const Levels = [ - 'TRACE', - 'DEBUG', - 'INFO', - 'LOG', - 'WARN', - 'ERROR', - 'OFF' -]; +const Levels = ['TRACE', 'DEBUG', 'INFO', 'LOG', 'WARN', 'ERROR', 'OFF']; diff --git a/src/app/examples/utilities.ts b/src/app/examples/utilities.ts index e9e760664..2c71a879b 100644 --- a/src/app/examples/utilities.ts +++ b/src/app/examples/utilities.ts @@ -1,4 +1,4 @@ export function zeroPadding(input: string | number) { const number = parseInt(input as string, 10); return number < 10 ? `0${number}` : number; -} \ No newline at end of file +} diff --git a/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts b/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts index 5d6755c71..4d7ce3062 100644 --- a/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts +++ b/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts @@ -99,7 +99,7 @@ const collectionServiceStub = { } as unknown as CollectionService; const mockAppRef = { - detachView: jest.fn() + detachView: jest.fn(), } as unknown as ApplicationRef; const extensionServiceStub = { @@ -111,7 +111,7 @@ const extensionServiceStub = { translateAllExtensions: jest.fn(), translateColumnHeaders: jest.fn(), } as unknown as ExtensionService; -Object.defineProperty(extensionServiceStub, 'extensionList', { get: jest.fn(() => { }), set: jest.fn(), configurable: true }); +Object.defineProperty(extensionServiceStub, 'extensionList', { get: jest.fn(() => {}), set: jest.fn(), configurable: true }); const mockExtensionUtility = { translateItems: jest.fn(), @@ -179,7 +179,7 @@ const paginationServiceStub = { Object.defineProperty(paginationServiceStub, 'totalItems', { get: jest.fn(() => 0), - set: jest.fn() + set: jest.fn(), }); const resizerServiceStub = { @@ -234,14 +234,13 @@ const mockDataView = { syncGridSelection: jest.fn(), } as unknown as SlickDataView; - const mockGetEditorLock = { isActive: () => true, commitCurrentEdit: jest.fn(), }; const mockGrid = { - applyHtmlCode: (elm: HTMLElement, val: string) => elm.innerHTML = val || '', + applyHtmlCode: (elm: HTMLElement, val: string) => (elm.innerHTML = val || ''), autosizeColumns: jest.fn(), destroy: jest.fn(), init: jest.fn(), @@ -354,7 +353,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = translaterService = new TranslaterServiceStub(); await TestBed.configureTestingModule({ imports: [TranslateModule.forRoot()], - teardown: { destroyAfterEach: false } + teardown: { destroyAfterEach: false }, }); translate = TestBed.inject(TranslateService); @@ -364,7 +363,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = } as unknown as ChangeDetectorRef; mockElementRef = { - nativeElement: divContainer + nativeElement: divContainer, } as ElementRef; component = new AngularSlickgridComponent( @@ -480,7 +479,10 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = it('should update "visibleColumns" in the Shared Service when "onColumnsReordered" event is triggered', () => { const sharedVisibleColumnsSpy = jest.spyOn(SharedService.prototype, 'visibleColumns', 'set'); - const newVisibleColumns = [{ id: 'lastName', field: 'lastName' }, { id: 'fristName', field: 'fristName' }]; + const newVisibleColumns = [ + { id: 'lastName', field: 'lastName' }, + { id: 'fristName', field: 'fristName' }, + ]; component.gridOptions = { enableFiltering: true }; component.initialization(slickEventHandler); @@ -529,14 +531,14 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = const colsChangeSpy = jest.spyOn(component.columnDefinitionsChange, 'emit'); const columnsMock = [ { id: 'firstName', field: 'firstName', editor: undefined }, - { id: 'lastName', field: 'lastName', editor: undefined } + { id: 'lastName', field: 'lastName', editor: undefined }, ]; component.ngAfterViewInit(); component.initialization(slickEventHandler); eventPubSubService.publish('onPluginColumnsChanged', { columns: columnsMock, - pluginName: 'RowMoveManager' + pluginName: 'RowMoveManager', }); expect(component.columnDefinitions).toEqual(columnsMock); @@ -546,7 +548,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = describe('initialization method', () => { const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef) => { const isEditableLine = !!columnDef.editor; - value = (value === null || value === undefined) ? '' : value; + value = value === null || value === undefined ? '' : value; return isEditableLine ? `
    ${value}
    ` : value; }; @@ -595,7 +597,9 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = component.gridOptions = { enableAutoResize: true }; component.ngAfterViewInit(); - expect(consoleWarnSpy).toHaveBeenCalledWith(expect.stringContaining('[Slickgrid-Universal] For getting better perf, we suggest you enable the `preParseDateColumns` grid option')); + expect(consoleWarnSpy).toHaveBeenCalledWith( + expect.stringContaining('[Slickgrid-Universal] For getting better perf, we suggest you enable the `preParseDateColumns` grid option') + ); }); it('should expect a console warning when assigned dataset is larger than 5K items without pre-parsing enabled', () => { @@ -614,7 +618,9 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = jest.spyOn(mockDataView, 'getItemCount').mockReturnValueOnce(10001); component.dataset = [{ firstName: 'John', updatedDate: '2020-02-01' }]; - expect(consoleWarnSpy).toHaveBeenCalledWith(expect.stringContaining('[Slickgrid-Universal] For getting better perf, we suggest you enable the `preParseDateColumns` grid option')); + expect(consoleWarnSpy).toHaveBeenCalledWith( + expect.stringContaining('[Slickgrid-Universal] For getting better perf, we suggest you enable the `preParseDateColumns` grid option') + ); }); describe('autoAddCustomEditorFormatter grid option', () => { @@ -623,7 +629,10 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = component.ngAfterViewInit(); expect(component).toBeTruthy(); - expect(autoAddEditorFormatterToColumnsWithEditor).toHaveBeenCalledWith([{ id: 'name', field: 'name', editor: undefined }], customEditableInputFormatter); + expect(autoAddEditorFormatterToColumnsWithEditor).toHaveBeenCalledWith( + [{ id: 'name', field: 'name', editor: undefined }], + customEditableInputFormatter + ); }); }); @@ -661,7 +670,10 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = expect(autosizeSpy).toHaveBeenCalled(); expect(updateSpy).toHaveBeenCalledWith(mockColDefs); expect(renderSpy).toHaveBeenCalledWith(mockColDefs, true); - expect(autoAddEditorFormatterToColumnsWithEditor).toHaveBeenCalledWith([{ id: 'name', field: 'name', editor: undefined }], customEditableInputFormatter); + expect(autoAddEditorFormatterToColumnsWithEditor).toHaveBeenCalledWith( + [{ id: 'name', field: 'name', editor: undefined }], + customEditableInputFormatter + ); }); }); @@ -674,7 +686,10 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = it('should expect "autosizeColumns" being called when "autoFitColumnsOnFirstLoad" is set we udpated the dataset', () => { const autosizeSpy = jest.spyOn(mockGrid, 'autosizeColumns'); const refreshSpy = jest.spyOn(component, 'refreshGridData'); - const mockData = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Smith' }]; + const mockData = [ + { firstName: 'John', lastName: 'Doe' }, + { firstName: 'Jane', lastName: 'Smith' }, + ]; jest.spyOn(mockDataView, 'getLength').mockReturnValueOnce(0).mockReturnValueOnce(0).mockReturnValueOnce(mockData.length); component.ngAfterViewInit(); @@ -688,7 +703,10 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = it('should expect "autosizeColumns" being called when "autoFitColumnsOnFirstLoad" is set and we are on first page load', () => { const autosizeSpy = jest.spyOn(mockGrid, 'autosizeColumns'); const refreshSpy = jest.spyOn(component, 'refreshGridData'); - const mockData = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Smith' }]; + const mockData = [ + { firstName: 'John', lastName: 'Doe' }, + { firstName: 'Jane', lastName: 'Smith' }, + ]; jest.spyOn(mockDataView, 'getLength').mockReturnValueOnce(0).mockReturnValueOnce(0).mockReturnValueOnce(mockData.length); component.ngAfterViewInit(); @@ -702,7 +720,10 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = it('should expect "autosizeColumns" NOT being called when "autoFitColumnsOnFirstLoad" is not set and we are on first page load', () => { const autosizeSpy = jest.spyOn(mockGrid, 'autosizeColumns'); const refreshSpy = jest.spyOn(component, 'refreshGridData'); - const mockData = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Smith' }]; + const mockData = [ + { firstName: 'John', lastName: 'Doe' }, + { firstName: 'Jane', lastName: 'Smith' }, + ]; jest.spyOn(mockDataView, 'getLength').mockReturnValueOnce(0).mockReturnValueOnce(0).mockReturnValueOnce(mockData.length); component.gridOptions = { autoFitColumnsOnFirstLoad: false }; @@ -716,12 +737,20 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = it('should expect "resizeColumnsByCellContent" being called when "enableAutoResizeColumnsByCellContent" is set and we changing column definitions via its SETTER', () => { const resizeContentSpy = jest.spyOn(resizerServiceStub, 'resizeColumnsByCellContent'); const refreshSpy = jest.spyOn(component, 'refreshGridData'); - const mockData = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Smith' }]; + const mockData = [ + { firstName: 'John', lastName: 'Doe' }, + { firstName: 'Jane', lastName: 'Smith' }, + ]; const mockColDefs = [{ id: 'gender', field: 'gender', editor: { model: Editors.text, collection: ['male', 'female'] } }] as Column[]; jest.spyOn(mockDataView, 'getLength').mockReturnValueOnce(0).mockReturnValueOnce(0).mockReturnValueOnce(mockData.length); component.columnDefinitions = mockColDefs; - component.gridOptions = { autoFitColumnsOnFirstLoad: false, enableAutoSizeColumns: false, autosizeColumnsByCellContentOnFirstLoad: true, enableAutoResizeColumnsByCellContent: true }; + component.gridOptions = { + autoFitColumnsOnFirstLoad: false, + enableAutoSizeColumns: false, + autosizeColumnsByCellContentOnFirstLoad: true, + enableAutoResizeColumnsByCellContent: true, + }; component.ngAfterViewInit(); component.dataset = mockData; component.columnDefinitions = mockColDefs; @@ -731,7 +760,10 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = }); it('should throw an error if we try to enable both auto resize type at same time with "autoFitColumnsOnFirstLoad" and "autosizeColumnsByCellContentOnFirstLoad"', (done) => { - const mockData = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Smith' }]; + const mockData = [ + { firstName: 'John', lastName: 'Doe' }, + { firstName: 'Jane', lastName: 'Smith' }, + ]; jest.spyOn(mockDataView, 'getLength').mockReturnValueOnce(0).mockReturnValueOnce(0).mockReturnValueOnce(mockData.length); component.gridOptions = { autoFitColumnsOnFirstLoad: true, autosizeColumnsByCellContentOnFirstLoad: true }; @@ -740,14 +772,19 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = component.ngAfterViewInit(); component.dataset = mockData; } catch (e: any) { - expect(e.toString()).toContain('[Angular-Slickgrid] You cannot enable both autosize/fit viewport & resize by content, you must choose which resize technique to use.'); + expect(e.toString()).toContain( + '[Angular-Slickgrid] You cannot enable both autosize/fit viewport & resize by content, you must choose which resize technique to use.' + ); component.destroy(); done(); } }); it('should throw an error if we try to enable both auto resize type at same time with "enableAutoSizeColumns" and "enableAutoResizeColumnsByCellContent"', (done) => { - const mockData = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Smith' }]; + const mockData = [ + { firstName: 'John', lastName: 'Doe' }, + { firstName: 'Jane', lastName: 'Smith' }, + ]; jest.spyOn(mockDataView, 'getLength').mockReturnValueOnce(0).mockReturnValueOnce(0).mockReturnValueOnce(mockData.length); component.gridOptions = { enableAutoSizeColumns: true, enableAutoResizeColumnsByCellContent: true }; @@ -756,7 +793,9 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = component.ngAfterViewInit(); component.dataset = mockData; } catch (e: any) { - expect(e.toString()).toContain('[Angular-Slickgrid] You cannot enable both autosize/fit viewport & resize by content, you must choose which resize technique to use.'); + expect(e.toString()).toContain( + '[Angular-Slickgrid] You cannot enable both autosize/fit viewport & resize by content, you must choose which resize technique to use.' + ); component.destroy(); done(); } @@ -810,7 +849,9 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = component.columnDefinitions = mockColDefs; component.initialization(slickEventHandler); - expect(consoleSpy).toHaveBeenCalledWith('[Angular-Slickgrid] Make sure that none of your Column Definition "id" property includes a dot in its name because that will cause some problems with the Editors. For example if your column definition "field" property is "user.firstName" then use "firstName" as the column "id".'); + expect(consoleSpy).toHaveBeenCalledWith( + '[Angular-Slickgrid] Make sure that none of your Column Definition "id" property includes a dot in its name because that will cause some problems with the Editors. For example if your column definition "field" property is "user.firstName" then use "firstName" as the column "id".' + ); }); it('should be able to load async editors with an Observable', (done) => { @@ -830,7 +871,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = it('should be able to load collectionAsync and expect Editor to be destroyed and re-render when receiving new collection from await', (done) => { const mockCollection = ['male', 'female']; - const promise = new Promise(resolve => resolve(mockCollection)); + const promise = new Promise((resolve) => resolve(mockCollection)); const mockEditor = { disable: jest.fn(), destroy: jest.fn(), @@ -860,12 +901,17 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = describe('use grouping', () => { it('should load groupItemMetaProvider to the DataView when using "draggableGrouping" feature', () => { const dataviewSpy = jest.spyOn(SlickDataView.prototype, 'constructor' as any); - jest.spyOn(extensionServiceStub, 'extensionList', 'get').mockReturnValue({ draggableGrouping: { pluginName: 'DraggableGrouping' } } as unknown as ExtensionList); + jest + .spyOn(extensionServiceStub, 'extensionList', 'get') + .mockReturnValue({ draggableGrouping: { pluginName: 'DraggableGrouping' } } as unknown as ExtensionList); component.gridOptions = { draggableGrouping: {} }; component.initialization(slickEventHandler); - expect(dataviewSpy).toHaveBeenCalledWith(expect.objectContaining({ inlineFilters: false, groupItemMetadataProvider: expect.anything() }), eventPubSubService); + expect(dataviewSpy).toHaveBeenCalledWith( + expect.objectContaining({ inlineFilters: false, groupItemMetadataProvider: expect.anything() }), + eventPubSubService + ); expect(sharedService.groupItemMetadataProvider instanceof SlickGroupItemMetadataProvider).toBeTruthy(); component.destroy(); @@ -873,14 +919,19 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = it('should load groupItemMetaProvider to the DataView when using "enableGrouping" feature', () => { const dataviewSpy = jest.spyOn(SlickDataView.prototype, 'constructor' as any); - jest.spyOn(extensionServiceStub, 'extensionList', 'get').mockReturnValue({ draggableGrouping: { pluginName: 'DraggableGrouping' } } as unknown as ExtensionList); + jest + .spyOn(extensionServiceStub, 'extensionList', 'get') + .mockReturnValue({ draggableGrouping: { pluginName: 'DraggableGrouping' } } as unknown as ExtensionList); component.gridOptions = { enableGrouping: true, draggableGrouping: {} }; component.initialization(slickEventHandler); // const extensions = component.extensions as ExtensionList; // expect(Object.keys(extensions).length).toBe(1); - expect(dataviewSpy).toHaveBeenCalledWith(expect.objectContaining({ inlineFilters: false, groupItemMetadataProvider: expect.anything() }), eventPubSubService); + expect(dataviewSpy).toHaveBeenCalledWith( + expect.objectContaining({ inlineFilters: false, groupItemMetadataProvider: expect.anything() }), + eventPubSubService + ); expect(sharedService.groupItemMetadataProvider instanceof SlickGroupItemMetadataProvider).toBeTruthy(); expect(mockGrid.registerPlugin).toHaveBeenCalled(); @@ -940,7 +991,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = component.gridOptions = { dataView: { syncGridSelection: { preserveHidden: true, preserveHiddenOnSelectionChange: false } }, - enableRowSelection: true + enableRowSelection: true, } as unknown as GridOption; component.initialization(slickEventHandler); @@ -957,7 +1008,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = process: jest.fn(), }, dataView: { syncGridSelection: true, syncGridSelectionWithBackendService: true }, - enableRowSelection: true + enableRowSelection: true, } as unknown as GridOption; component.initialization(slickEventHandler); @@ -974,7 +1025,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = process: jest.fn(), }, dataView: { syncGridSelection: false, syncGridSelectionWithBackendService: true }, - enableRowSelection: true + enableRowSelection: true, } as unknown as GridOption; component.initialization(slickEventHandler); @@ -991,7 +1042,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = process: jest.fn(), }, dataView: { syncGridSelection: true, syncGridSelectionWithBackendService: false }, - enableRowSelection: true + enableRowSelection: true, } as unknown as GridOption; component.initialization(slickEventHandler); @@ -1040,7 +1091,9 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = it('should create the Row Detail View plugin when "enableRowDetailView" is enabled', () => { const initSpy = jest.spyOn(mockSlickRowDetailView, 'init'); const createSpy = jest.spyOn(mockSlickRowDetailView, 'create'); - jest.spyOn(extensionServiceStub, 'extensionList', 'get').mockReturnValue({ rowDetailView: { pluginName: 'RowDetail' } } as unknown as ExtensionList); + jest + .spyOn(extensionServiceStub, 'extensionList', 'get') + .mockReturnValue({ rowDetailView: { pluginName: 'RowDetail' } } as unknown as ExtensionList); component.gridOptions = { enableRowDetailView: true } as unknown as GridOption; component.initialization(slickEventHandler); @@ -1112,11 +1165,14 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = const expectedTotalItems = 2; const refreshSpy = jest.spyOn(component, 'refreshGridData'); - const mockData = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Smith' }]; + const mockData = [ + { firstName: 'John', lastName: 'Doe' }, + { firstName: 'Jane', lastName: 'Smith' }, + ]; jest.spyOn(mockDataView, 'getItems').mockReturnValueOnce(mockData); component.gridOptions = { enablePagination: true, - presets: { pagination: { pageSize: 2, pageNumber: expectedPageNumber } } + presets: { pagination: { pageSize: 2, pageNumber: expectedPageNumber } }, }; component.paginationOptions = undefined; component.paginationOptions = { pageSize: 2, pageNumber: 2, pageSizes: [2, 10, 25, 50], totalItems: 100 }; @@ -1139,11 +1195,14 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = const refreshSpy = jest.spyOn(component, 'refreshGridData'); const getPagingSpy = jest.spyOn(mockDataView, 'getPagingInfo').mockReturnValue({ pageNum: 1, totalRows: expectedTotalItems } as any); - const mockData = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Smith' }]; + const mockData = [ + { firstName: 'John', lastName: 'Doe' }, + { firstName: 'Jane', lastName: 'Smith' }, + ]; component.gridOptions = { enablePagination: true, enableFiltering: true, - presets: { pagination: { pageSize: 10, pageNumber: expectedPageNumber } } + presets: { pagination: { pageSize: 10, pageNumber: expectedPageNumber } }, }; component.paginationOptions = { pageSize: 10, pageNumber: 2, pageSizes: [10, 25, 50], totalItems: 100 }; @@ -1166,14 +1225,19 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = const refreshSpy = jest.spyOn(component, 'refreshGridData'); const getPagingSpy = jest.spyOn(mockDataView, 'getPagingInfo').mockReturnValue({ pageNum: 1, totalRows: expectedTotalItems } as any); const pagerInstance = new TestPaginationComponent(); - jest.spyOn(angularUtilServiceStub, 'createAngularComponent').mockReturnValueOnce({ componentRef: { instance: pagerInstance } as any, domElement: document.createElement('div') }); + jest + .spyOn(angularUtilServiceStub, 'createAngularComponent') + .mockReturnValueOnce({ componentRef: { instance: pagerInstance } as any, domElement: document.createElement('div') }); - const mockData = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Smith' }]; + const mockData = [ + { firstName: 'John', lastName: 'Doe' }, + { firstName: 'Jane', lastName: 'Smith' }, + ]; component.gridOptions = { enablePagination: true, enableFiltering: true, customPaginationComponent: TestPaginationComponent, - presets: { pagination: { pageSize: 10, pageNumber: expectedPageNumber } } + presets: { pagination: { pageSize: 10, pageNumber: expectedPageNumber } }, }; component.paginationOptions = { pageSize: 10, pageNumber: 2, pageSizes: [10, 25, 50], totalItems: 100 }; @@ -1203,7 +1267,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = preProcess: jest.fn(), postProcess: jest.fn(), process: jest.fn(), - } + }, }; }); @@ -1236,7 +1300,9 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = const spy = jest.spyOn(component, 'refreshGridData'); component.initialization(slickEventHandler); - component.gridOptions.backendServiceApi!.internalPostProcess!({ data: { users: { nodes: [{ firstName: 'John' }], totalCount: 2 } } } as GraphqlPaginatedResult); + component.gridOptions.backendServiceApi!.internalPostProcess!({ + data: { users: { nodes: [{ firstName: 'John' }], totalCount: 2 } }, + } as GraphqlPaginatedResult); expect(spy).toHaveBeenCalled(); expect(component.gridOptions.backendServiceApi!.internalPostProcess).toEqual(expect.any(Function)); @@ -1249,7 +1315,9 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = const mockDataset = [{ firstName: 'John' }, { firstName: 'Jane' }]; component.initialization(slickEventHandler); - component.gridOptions.backendServiceApi!.internalPostProcess!({ data: { users: { nodes: mockDataset, totalCount: mockDataset.length } } } as GraphqlPaginatedResult); + component.gridOptions.backendServiceApi!.internalPostProcess!({ + data: { users: { nodes: mockDataset, totalCount: mockDataset.length } }, + } as GraphqlPaginatedResult); component.refreshGridData(mockDataset, 1); component.refreshGridData(mockDataset, 1); @@ -1276,14 +1344,18 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = const spy = jest.spyOn(component, 'refreshGridData'); component.ngAfterViewInit(); - component.gridOptions.backendServiceApi!.internalPostProcess!({ data: { notUsers: { nodes: [{ firstName: 'John' }], totalCount: 2 } } } as GraphqlPaginatedResult); + component.gridOptions.backendServiceApi!.internalPostProcess!({ + data: { notUsers: { nodes: [{ firstName: 'John' }], totalCount: 2 } }, + } as GraphqlPaginatedResult); expect(spy).not.toHaveBeenCalled(); expect(component.dataset).toEqual([]); }); it('should invoke "updateFilters" method with filters returned from "getColumnFilters" of the Filter Service when there is no Presets defined', () => { - const mockColumnFilter = { name: { columnId: 'name', columnDef: { id: 'name', field: 'name', filter: { model: Filters.autocompleter } }, operator: 'EQ', searchTerms: ['john'] } }; + const mockColumnFilter = { + name: { columnId: 'name', columnDef: { id: 'name', field: 'name', filter: { model: Filters.autocompleter } }, operator: 'EQ', searchTerms: ['john'] }, + }; jest.spyOn(filterServiceStub, 'getColumnFilters').mockReturnValue(mockColumnFilter as unknown as ColumnFilters); const backendSpy = jest.spyOn(mockGraphqlService, 'updateFilters'); @@ -1314,7 +1386,10 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = it('should call the "updateSorters" method when sorters are defined in the "presets" property with multi-column sort enabled', () => { jest.spyOn(mockGrid, 'getSelectionModel').mockReturnValue(true as any); const spy = jest.spyOn(mockGraphqlService, 'updateSorters'); - const mockSorters = [{ columnId: 'firstName', direction: 'asc' }, { columnId: 'lastName', direction: 'desc' }] as CurrentSorter[]; + const mockSorters = [ + { columnId: 'firstName', direction: 'asc' }, + { columnId: 'lastName', direction: 'desc' }, + ] as CurrentSorter[]; component.gridOptions.presets = { sorters: mockSorters }; component.initialization(slickEventHandler); @@ -1324,7 +1399,10 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = it('should call the "updateSorters" method with ONLY 1 column sort when multi-column sort is disabled and user provided multiple sorters in the "presets" property', () => { jest.spyOn(mockGrid, 'getSelectionModel').mockReturnValue(true as any); const spy = jest.spyOn(mockGraphqlService, 'updateSorters'); - const mockSorters = [{ columnId: 'firstName', direction: 'asc' }, { columnId: 'lastName', direction: 'desc' }] as CurrentSorter[]; + const mockSorters = [ + { columnId: 'firstName', direction: 'asc' }, + { columnId: 'lastName', direction: 'desc' }, + ] as CurrentSorter[]; component.gridOptions.multiColumnSort = false; component.gridOptions.presets = { sorters: mockSorters }; @@ -1346,7 +1424,10 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = const expectedPageNumber = 3; const refreshSpy = jest.spyOn(component, 'refreshGridData'); - const mockData = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Smith' }]; + const mockData = [ + { firstName: 'John', lastName: 'Doe' }, + { firstName: 'Jane', lastName: 'Smith' }, + ]; component.gridOptions.enablePagination = true; component.gridOptions.presets = { pagination: { pageSize: 10, pageNumber: expectedPageNumber } }; component.paginationOptions = { pageSize: 10, pageNumber: 1, pageSizes: [10, 25, 50], totalItems: 100 }; @@ -1364,9 +1445,9 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = const query = `query { users (first:20,offset:0) { totalCount, nodes { id,name,gender,company } } }`; const processResult = { data: { users: { nodes: [] }, pageInfo: { hasNextPage: true }, totalCount: 0 }, - metrics: { startTime: now, endTime: now, executionTime: 0, totalItemCount: 0 } + metrics: { startTime: now, endTime: now, executionTime: 0, totalItemCount: 0 }, }; - const promise = new Promise(resolve => setTimeout(() => resolve(processResult), 1)); + const promise = new Promise((resolve) => setTimeout(() => resolve(processResult), 1)); const processSpy = jest.spyOn(component.gridOptions.backendServiceApi as BackendServiceApi, 'process').mockReturnValue(promise); jest.spyOn(component.gridOptions.backendServiceApi!.service, 'buildQuery').mockReturnValue(query); const backendExecuteSpy = jest.spyOn(backendUtilityServiceStub, 'executeBackendProcessesCallback'); @@ -1388,9 +1469,11 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = const query = `query { users (first:20,offset:0) { totalCount, nodes { id,name,gender,company } } }`; const processResult = { data: { users: { nodes: [] }, pageInfo: { hasNextPage: true }, totalCount: 0 }, - metrics: { startTime: now, endTime: now, executionTime: 0, totalItemCount: 0 } + metrics: { startTime: now, endTime: now, executionTime: 0, totalItemCount: 0 }, }; - const processSpy = jest.spyOn((component.gridOptions as GridOption).backendServiceApi as BackendServiceApi, 'process').mockReturnValue(of(processResult)); + const processSpy = jest + .spyOn((component.gridOptions as GridOption).backendServiceApi as BackendServiceApi, 'process') + .mockReturnValue(of(processResult)); jest.spyOn((component.gridOptions as GridOption).backendServiceApi!.service, 'buildQuery').mockReturnValue(query); const backendExecuteSpy = jest.spyOn(backendUtilityServiceStub, 'executeBackendProcessesCallback'); @@ -1412,9 +1495,9 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = const query = `query { users { id,name,gender,company } }`; const processResult = { data: { users: [] }, - metrics: { startTime: now, endTime: now, executionTime: 0, totalItemCount: 0 } + metrics: { startTime: now, endTime: now, executionTime: 0, totalItemCount: 0 }, }; - const promise = new Promise(resolve => setTimeout(() => resolve(processResult), 1)); + const promise = new Promise((resolve) => setTimeout(() => resolve(processResult), 1)); const processSpy = jest.spyOn(component.gridOptions.backendServiceApi as BackendServiceApi, 'process').mockReturnValue(promise); jest.spyOn(component.gridOptions.backendServiceApi!.service, 'buildQuery').mockReturnValue(query); const backendExecuteSpy = jest.spyOn(backendUtilityServiceStub, 'executeBackendProcessesCallback'); @@ -1458,7 +1541,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = preProcess: jest.fn(), postProcess: jest.fn(), process: jest.fn(), - } + }, }; }); @@ -1535,7 +1618,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = enablePagination: true, backendServiceApi, presets: { pagination: { pageNumber: 2 } }, - pagination: { pageSizes: [10, 20], pageSize: 10 } + pagination: { pageSizes: [10, 20], pageSize: 10 }, } as unknown as GridOption; component.initialization(slickEventHandler); jest.spyOn(component.slickGrid!, 'getOptions').mockReturnValue(gridOptions); @@ -1594,7 +1677,12 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = const transGroupingColSpanSpy = jest.spyOn(headerGroupingServiceStub, 'translateHeaderGrouping'); const setHeaderRowSpy = jest.spyOn(mockGrid, 'setHeaderRowVisibility'); - component.gridOptions = { enableTranslate: true, createPreHeaderPanel: false, enableDraggableGrouping: false, showCustomFooter: true } as unknown as GridOption; + component.gridOptions = { + enableTranslate: true, + createPreHeaderPanel: false, + enableDraggableGrouping: false, + showCustomFooter: true, + } as unknown as GridOption; component.initialization(slickEventHandler); translate.use('fr'); @@ -1703,13 +1791,19 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = { id: '_move', field: '_move', editor: undefined }, { id: '_checkbox_selector', field: '_checkbox_selector', editor: undefined }, { id: '_detail_selector', field: '_detail_selector', editor: undefined }, - mockCol + mockCol, ]; const getAssocColSpy = jest.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]); const setColSpy = jest.spyOn(mockGrid, 'setColumns'); component.columnDefinitions = mockCols; - component.gridOptions = { ...gridOptions, enableCheckboxSelector: true, enableRowDetailView: true, enableRowMoveManager: true, presets: { columns: mockColsPresets } } as unknown as GridOption; + component.gridOptions = { + ...gridOptions, + enableCheckboxSelector: true, + enableRowDetailView: true, + enableRowMoveManager: true, + presets: { columns: mockColsPresets }, + } as unknown as GridOption; component.initialization(slickEventHandler); expect(getAssocColSpy).toHaveBeenCalledWith(mockGrid, mockColsPresets); @@ -1728,7 +1822,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = service: mockGraphqlService2, options: mockGraphqlOptions, preProcess: () => jest.fn(), - process: () => new Promise(resolve => resolve({ data: { users: { nodes: [], totalCount: 100 } } })), + process: () => new Promise((resolve) => resolve({ data: { users: { nodes: [], totalCount: 100 } } })), } as GraphqlServiceApi, pagination: mockPagination, } as unknown as GridOption; @@ -1746,8 +1840,8 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = backendServiceApi: { service: mockGraphqlService, preProcess: () => jest.fn(), - process: () => new Promise(resolve => resolve('process resolved')), - } + process: () => new Promise((resolve) => resolve('process resolved')), + }, } as unknown as GridOption; component.initialization(slickEventHandler); @@ -1763,8 +1857,8 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = service: mockGraphqlService, useLocalSorting: true, preProcess: () => jest.fn(), - process: () => new Promise(resolve => resolve('process resolved')), - } + process: () => new Promise((resolve) => resolve('process resolved')), + }, } as unknown as GridOption; component.initialization(slickEventHandler); @@ -1793,8 +1887,8 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = service: mockGraphqlService, useLocalFiltering: true, preProcess: () => jest.fn(), - process: () => new Promise(resolve => resolve('process resolved')), - } + process: () => new Promise((resolve) => resolve('process resolved')), + }, } as unknown as GridOption; component.initialization(slickEventHandler); @@ -1811,8 +1905,8 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = backendServiceApi: { service: mockGraphqlService, preProcess: () => jest.fn(), - process: () => new Promise(resolve => resolve('process resolved')), - } + process: () => new Promise((resolve) => resolve('process resolved')), + }, } as unknown as GridOption; component.initialization(slickEventHandler); @@ -1916,7 +2010,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = expect(pluginEaSpy).toHaveBeenCalledWith('onGridStateChanged', { change: { newValues: mockPagination, type: GridStateType.pagination }, - gridState: { columns: [], pagination: mockPagination } + gridState: { columns: [], pagination: mockPagination }, }); }); @@ -1939,7 +2033,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = expect(pubSubSpy).toHaveBeenCalledWith('onGridStateChanged', { change: { newValues: mockPagination, type: GridStateType.pagination }, - gridState: { columns: [], pagination: mockPagination } + gridState: { columns: [], pagination: mockPagination }, }); }); @@ -1951,7 +2045,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = component.gridOptions = { enableRowSelection: true, - backendServiceApi: { service: mockGraphqlService as any } + backendServiceApi: { service: mockGraphqlService as any }, } as unknown as GridOption; component.initialization(slickEventHandler); component.paginationChanged(mockPagination); @@ -1959,7 +2053,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = expect(setRowSpy).toHaveBeenCalledWith([]); expect(pluginEaSpy).toHaveBeenCalledWith('onGridStateChanged', { change: { newValues: mockPagination, type: GridStateType.pagination }, - gridState: { columns: [], pagination: mockPagination } + gridState: { columns: [], pagination: mockPagination }, }); }); @@ -1971,7 +2065,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = component.gridOptions = { enableCheckboxSelector: true, - backendServiceApi: { service: mockGraphqlService as any } + backendServiceApi: { service: mockGraphqlService as any }, } as unknown as GridOption; component.initialization(slickEventHandler); component.paginationChanged(mockPagination); @@ -1979,7 +2073,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = expect(setRowSpy).toHaveBeenCalledWith([]); expect(pluginEaSpy).toHaveBeenCalledWith('onGridStateChanged', { change: { newValues: mockPagination, type: GridStateType.pagination }, - gridState: { columns: [], pagination: mockPagination } + gridState: { columns: [], pagination: mockPagination }, }); }); }); @@ -1991,13 +2085,13 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = it('should display an Empty Warning Message when "enableEmptyDataWarningMessage" is enabled and the dataset is empty', (done) => { const mockColDefs = [{ id: 'name', field: 'name', editor: undefined }]; - const mockGridOptions = { enableTranslate: true, enableEmptyDataWarningMessage: true, }; + const mockGridOptions = { enableTranslate: true, enableEmptyDataWarningMessage: true }; jest.spyOn(mockGrid, 'getOptions').mockReturnValue(mockGridOptions); jest.spyOn(mockGrid, 'getGridPosition').mockReturnValue({ top: 10, left: 20 } as any); component.gridOptions = mockGridOptions; component.initialization(slickEventHandler); - const slickEmptyWarning = component.registeredResources.find(resource => resource instanceof SlickEmptyWarningComponent); + const slickEmptyWarning = component.registeredResources.find((resource) => resource instanceof SlickEmptyWarningComponent); const emptySpy = jest.spyOn(slickEmptyWarning as SlickEmptyWarningComponent, 'showEmptyDataMessage'); component.columnDefinitions = mockColDefs; component.refreshGridData([]); @@ -2018,7 +2112,14 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = const resizeContentSpy = jest.spyOn(resizerServiceStub, 'resizeColumnsByCellContent'); jest.spyOn(mockDataView, 'getLength').mockReturnValue(1); - component.gridOptions = { enablePagination: false, resizeByContentOnlyOnFirstLoad: false, showCustomFooter: true, autoFitColumnsOnFirstLoad: false, enableAutoSizeColumns: false, enableAutoResizeColumnsByCellContent: true }; + component.gridOptions = { + enablePagination: false, + resizeByContentOnlyOnFirstLoad: false, + showCustomFooter: true, + autoFitColumnsOnFirstLoad: false, + enableAutoSizeColumns: false, + enableAutoResizeColumnsByCellContent: true, + }; component.initialization(slickEventHandler); mockDataView.onSetItemsCalled.notify({ idProperty: 'id', itemCount: 1 }); @@ -2029,7 +2130,14 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = const resizeContentSpy = jest.spyOn(resizerServiceStub, 'resizeColumnsByCellContent'); jest.spyOn(mockDataView, 'getLength').mockReturnValue(1); - component.gridOptions = { enablePagination: false, resizeByContentOnlyOnFirstLoad: true, showCustomFooter: true, autoFitColumnsOnFirstLoad: false, enableAutoSizeColumns: false, enableAutoResizeColumnsByCellContent: true }; + component.gridOptions = { + enablePagination: false, + resizeByContentOnlyOnFirstLoad: true, + showCustomFooter: true, + autoFitColumnsOnFirstLoad: false, + enableAutoSizeColumns: false, + enableAutoResizeColumnsByCellContent: true, + }; component.initialization(slickEventHandler); mockDataView.onSetItemsCalled.notify({ idProperty: 'id', itemCount: 1 }); @@ -2047,7 +2155,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = it('should have a Custom Footer when "showCustomFooter" is enabled and there are no Pagination used', (done) => { const mockColDefs = [{ id: 'name', field: 'name', editor: undefined }]; - const mockGridOptions = { enableTranslate: true, showCustomFooter: true, customFooterOptions: { hideRowSelectionCount: false, } } as GridOption; + const mockGridOptions = { enableTranslate: true, showCustomFooter: true, customFooterOptions: { hideRowSelectionCount: false } } as GridOption; jest.spyOn(mockGrid, 'getOptions').mockReturnValue(mockGridOptions); translaterService.use('fr'); @@ -2090,9 +2198,9 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = metricTexts: { items: 'some items', lastUpdate: 'some last update', - of: 'some of' - } - } + of: 'some of', + }, + }, }; component.columnDefinitions = mockColDefs; component.initialization(slickEventHandler); @@ -2140,13 +2248,16 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = }); it('should have custom footer with metrics when the DataView "onRowCountChanged" event is triggered', () => { - const mockData = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Smith' }]; + const mockData = [ + { firstName: 'John', lastName: 'Doe' }, + { firstName: 'Jane', lastName: 'Smith' }, + ]; const invalidateSpy = jest.spyOn(mockGrid, 'invalidate'); const expectation = { startTime: expect.toBeDate(), endTime: expect.toBeDate(), itemCount: 2, - totalItemCount: 2 + totalItemCount: 2, }; jest.spyOn(mockDataView, 'getItemCount').mockReturnValue(mockData.length); jest.spyOn(mockDataView, 'getFilteredItemCount').mockReturnValue(mockData.length); @@ -2166,7 +2277,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = startTime: expect.toBeDate(), endTime: expect.toBeDate(), itemCount: 0, - totalItemCount: 0 + totalItemCount: 0, }; jest.spyOn(mockDataView, 'getFilteredItemCount').mockReturnValue(0); @@ -2190,7 +2301,10 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = it('should call the "mapIdsToRows" from the DataView then "setSelectedRows" from the Grid when there are row selection presets with "dataContextIds" array set', (done) => { const selectedGridRows = [2]; const selectedRowIds = [99]; - const mockData = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Smith' }]; + const mockData = [ + { firstName: 'John', lastName: 'Doe' }, + { firstName: 'Jane', lastName: 'Smith' }, + ]; const dataviewSpy = jest.spyOn(mockDataView, 'mapIdsToRows').mockReturnValue(selectedGridRows); const selectRowSpy = jest.spyOn(mockGrid, 'setSelectedRows'); jest.spyOn(mockDataView, 'getLength').mockReturnValue(0); @@ -2211,7 +2325,10 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = it('should call the "setSelectedRows" from the Grid when there are row selection presets with "dataContextIds" array set', (done) => { const selectedGridRows = [22]; - const mockData = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Smith' }]; + const mockData = [ + { firstName: 'John', lastName: 'Doe' }, + { firstName: 'Jane', lastName: 'Smith' }, + ]; const selectRowSpy = jest.spyOn(mockGrid, 'setSelectedRows'); jest.spyOn(mockGrid, 'getSelectionModel').mockReturnValue(true as any); jest.spyOn(mockDataView, 'getLength').mockReturnValue(mockData.length); @@ -2231,7 +2348,10 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = it('should call the "setSelectedRows" and "setSelectedIds" when the Grid has Local Pagination and there are row selection presets with "dataContextIds" array set', () => { const selectedGridRows = [22]; - const mockData = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Smith' }]; + const mockData = [ + { firstName: 'John', lastName: 'Doe' }, + { firstName: 'Jane', lastName: 'Smith' }, + ]; const gridSelectedRowSpy = jest.spyOn(mockGrid, 'setSelectedRows'); const dvSetSelectedIdSpy = jest.spyOn(mockDataView, 'setSelectedIds'); jest.spyOn(mockGrid, 'getSelectionModel').mockReturnValue(true as any); @@ -2241,7 +2361,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = enableRowSelection: true, enablePagination: true, backendServiceApi: undefined, - presets: { rowSelection: { dataContextIds: selectedGridRows } } + presets: { rowSelection: { dataContextIds: selectedGridRows } }, }; component.dataset = mockData; component.isDatasetInitialized = false; // it won't call the preset unless we reset this flag @@ -2301,17 +2421,25 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = }); it('should change flat dataset and expect "convertFlatParentChildToTreeDatasetAndSort" being called with other methods', () => { - const mockFlatDataset = [{ id: 0, file: 'documents' }, { id: 1, file: 'vacation.txt', parentId: 0 }]; + const mockFlatDataset = [ + { id: 0, file: 'documents' }, + { id: 1, file: 'vacation.txt', parentId: 0 }, + ]; const mockHierarchical = [{ id: 0, file: 'documents', files: [{ id: 1, file: 'vacation.txt' }] }]; const hierarchicalSpy = jest.spyOn(SharedService.prototype, 'hierarchicalDataset', 'set'); - const treeConvertAndSortSpy = jest.spyOn(treeDataServiceStub, 'convertFlatParentChildToTreeDatasetAndSort').mockReturnValue({ hierarchical: mockHierarchical as any[], flat: mockFlatDataset as any[] }); + const treeConvertAndSortSpy = jest + .spyOn(treeDataServiceStub, 'convertFlatParentChildToTreeDatasetAndSort') + .mockReturnValue({ hierarchical: mockHierarchical as any[], flat: mockFlatDataset as any[] }); const refreshTreeSpy = jest.spyOn(filterServiceStub, 'refreshTreeDataFilters'); component.gridOptions = { - enableTreeData: true, treeDataOptions: { - columnId: 'file', parentPropName: 'parentId', childrenPropName: 'files', - initialSort: { columndId: 'file', direction: 'ASC' } - } + enableTreeData: true, + treeDataOptions: { + columnId: 'file', + parentPropName: 'parentId', + childrenPropName: 'files', + initialSort: { columndId: 'file', direction: 'ASC' }, + }, } as unknown as GridOption; component.initialization(slickEventHandler); component.dataset = mockFlatDataset; @@ -2323,16 +2451,24 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = }); it('should change flat dataset and expect "convertFlatParentChildToTreeDatasetAndSort" being called even without an initial sort defined', () => { - const mockFlatDataset = [{ id: 0, file: 'documents' }, { id: 1, file: 'vacation.txt', parentId: 0 }]; + const mockFlatDataset = [ + { id: 0, file: 'documents' }, + { id: 1, file: 'vacation.txt', parentId: 0 }, + ]; const mockHierarchical = [{ id: 0, file: 'documents', files: [{ id: 1, file: 'vacation.txt' }] }]; const hierarchicalSpy = jest.spyOn(SharedService.prototype, 'hierarchicalDataset', 'set'); - const treeConvertAndSortSpy = jest.spyOn(treeDataServiceStub, 'convertFlatParentChildToTreeDatasetAndSort').mockReturnValue({ hierarchical: mockHierarchical as any[], flat: mockFlatDataset as any[] }); + const treeConvertAndSortSpy = jest + .spyOn(treeDataServiceStub, 'convertFlatParentChildToTreeDatasetAndSort') + .mockReturnValue({ hierarchical: mockHierarchical as any[], flat: mockFlatDataset as any[] }); const refreshTreeSpy = jest.spyOn(filterServiceStub, 'refreshTreeDataFilters'); component.gridOptions = { - enableTreeData: true, treeDataOptions: { - columnId: 'file', parentPropName: 'parentId', childrenPropName: 'files' - } + enableTreeData: true, + treeDataOptions: { + columnId: 'file', + parentPropName: 'parentId', + childrenPropName: 'files', + }, } as unknown as GridOption; component.initialization(slickEventHandler); component.dataset = mockFlatDataset; @@ -2366,16 +2502,24 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = }); it('should preset hierarchical dataset before the initialization and expect sortHierarchicalDataset to be called', () => { - const mockFlatDataset = [{ id: 0, file: 'documents' }, { id: 1, file: 'vacation.txt', parentId: 0 }]; + const mockFlatDataset = [ + { id: 0, file: 'documents' }, + { id: 1, file: 'vacation.txt', parentId: 0 }, + ]; const mockHierarchical = [{ id: 0, file: 'documents', files: [{ id: 1, file: 'vacation.txt' }] }]; const hierarchicalSpy = jest.spyOn(SharedService.prototype, 'hierarchicalDataset', 'set'); const clearFilterSpy = jest.spyOn(filterServiceStub, 'clearFilters'); const setItemsSpy = jest.spyOn(mockDataView, 'setItems'); const processSpy = jest.spyOn(sortServiceStub, 'processTreeDataInitialSort'); - const sortHierarchicalSpy = jest.spyOn(treeDataServiceStub, 'sortHierarchicalDataset').mockReturnValue({ hierarchical: mockHierarchical as any[], flat: mockFlatDataset as any[] }); + const sortHierarchicalSpy = jest + .spyOn(treeDataServiceStub, 'sortHierarchicalDataset') + .mockReturnValue({ hierarchical: mockHierarchical as any[], flat: mockFlatDataset as any[] }); component.destroy(); - component.gridOptions = { enableTreeData: true, treeDataOptions: { columnId: 'file', initialSort: { columndId: 'file', direction: 'ASC' } } } as unknown as GridOption; + component.gridOptions = { + enableTreeData: true, + treeDataOptions: { columnId: 'file', initialSort: { columndId: 'file', direction: 'ASC' } }, + } as unknown as GridOption; component.datasetHierarchical = mockHierarchical; component.isDatasetHierarchicalInitialized = true; component.initialization(slickEventHandler); @@ -2388,14 +2532,22 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = }); it('should expect "refreshTreeDataFilters" method to be called when our flat dataset was already set and it just got changed a 2nd time', () => { - const mockFlatDataset = [{ id: 0, file: 'documents' }, { id: 1, file: 'vacation.txt', parentId: 0 }]; + const mockFlatDataset = [ + { id: 0, file: 'documents' }, + { id: 1, file: 'vacation.txt', parentId: 0 }, + ]; const mockHierarchical = [{ id: 0, file: 'documents', files: [{ id: 1, file: 'vacation.txt' }] }]; const hierarchicalSpy = jest.spyOn(SharedService.prototype, 'hierarchicalDataset', 'set'); - jest.spyOn(treeDataServiceStub, 'convertFlatParentChildToTreeDatasetAndSort').mockReturnValue({ hierarchical: mockHierarchical as any[], flat: mockFlatDataset as any[] }); + jest + .spyOn(treeDataServiceStub, 'convertFlatParentChildToTreeDatasetAndSort') + .mockReturnValue({ hierarchical: mockHierarchical as any[], flat: mockFlatDataset as any[] }); const refreshTreeSpy = jest.spyOn(filterServiceStub, 'refreshTreeDataFilters'); component.dataset = [{ id: 0, file: 'documents' }]; - component.gridOptions = { enableTreeData: true, treeDataOptions: { columnId: 'file', parentPropName: 'parentId', childrenPropName: 'files', initialSort: { columndId: 'file', direction: 'ASC' } } } as unknown as GridOption; + component.gridOptions = { + enableTreeData: true, + treeDataOptions: { columnId: 'file', parentPropName: 'parentId', childrenPropName: 'files', initialSort: { columndId: 'file', direction: 'ASC' } }, + } as unknown as GridOption; component.initialization(slickEventHandler); component.dataset = mockFlatDataset; component.dataset = mockFlatDataset; @@ -2405,14 +2557,25 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = }); it('should also expect "refreshTreeDataFilters" method to be called even when the dataset length is the same but still has different properties (e.g. different filename)', () => { - const mockFlatDataset = [{ id: 0, file: 'documents' }, { id: 1, file: 'new-vacation.txt', parentId: 0 }]; + const mockFlatDataset = [ + { id: 0, file: 'documents' }, + { id: 1, file: 'new-vacation.txt', parentId: 0 }, + ]; const mockHierarchical = [{ id: 0, file: 'documents', files: [{ id: 1, file: 'vacation.txt' }] }]; const hierarchicalSpy = jest.spyOn(SharedService.prototype, 'hierarchicalDataset', 'set'); - jest.spyOn(treeDataServiceStub, 'convertFlatParentChildToTreeDatasetAndSort').mockReturnValue({ hierarchical: mockHierarchical as any[], flat: mockFlatDataset as any[] }); + jest + .spyOn(treeDataServiceStub, 'convertFlatParentChildToTreeDatasetAndSort') + .mockReturnValue({ hierarchical: mockHierarchical as any[], flat: mockFlatDataset as any[] }); const refreshTreeSpy = jest.spyOn(filterServiceStub, 'refreshTreeDataFilters'); - component.dataset = [{ id: 0, file: 'documents' }, { id: 1, file: 'old-vacation.txt', parentId: 0 }]; - component.gridOptions = { enableTreeData: true, treeDataOptions: { columnId: 'file', parentPropName: 'parentId', childrenPropName: 'files', initialSort: { columndId: 'file', direction: 'ASC' } } } as unknown as GridOption; + component.dataset = [ + { id: 0, file: 'documents' }, + { id: 1, file: 'old-vacation.txt', parentId: 0 }, + ]; + component.gridOptions = { + enableTreeData: true, + treeDataOptions: { columnId: 'file', parentPropName: 'parentId', childrenPropName: 'files', initialSort: { columndId: 'file', direction: 'ASC' } }, + } as unknown as GridOption; component.initialization(slickEventHandler); component.dataset = mockFlatDataset; diff --git a/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.html b/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.html index 1a733a842..19fb91a1e 100644 --- a/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.html +++ b/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.html @@ -1,6 +1,5 @@ -
    +
    -
    -
    +
    -
    \ No newline at end of file +
    diff --git a/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts b/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts index 715a8cab4..38393fca6 100644 --- a/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts +++ b/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts @@ -93,7 +93,7 @@ const WARN_NO_PREPARSE_DATE_SIZE = 10000; // data size to warn user when pre-par // make everything transient (non-singleton) AngularUtilService, TranslaterService, - ] + ], }) export class AngularSlickgridComponent implements AfterViewInit, OnDestroy { protected _dataset?: TData[] | null; @@ -200,7 +200,12 @@ export class AngularSlickgridComponent implements AfterViewInit, On let data = newDataset; // when Tree Data is enabled and we don't yet have the hierarchical dataset filled, we can force a convert+sort of the array - if (this.slickGrid && this.gridOptions?.enableTreeData && Array.isArray(newDataset) && (newDataset.length > 0 || newDataset.length !== prevDatasetLn || !isDatasetEqual)) { + if ( + this.slickGrid && + this.gridOptions?.enableTreeData && + Array.isArray(newDataset) && + (newDataset.length > 0 || newDataset.length !== prevDatasetLn || !isDatasetEqual) + ) { this._isDatasetHierarchicalInitialized = false; data = this.sortTreeDataset(newDataset, !isDatasetEqual); // if dataset changed, then force a refresh anyway } @@ -302,27 +307,57 @@ export class AngularSlickgridComponent implements AfterViewInit, On this.gridEventService = externalServices?.gridEventService ?? new GridEventService(); this.sharedService = externalServices?.sharedService ?? new SharedService(); this.collectionService = externalServices?.collectionService ?? new CollectionService(this.translaterService); - this.extensionUtility = externalServices?.extensionUtility ?? new ExtensionUtility(this.sharedService, this.backendUtilityService, this.translaterService); + this.extensionUtility = + externalServices?.extensionUtility ?? + new ExtensionUtility(this.sharedService, this.backendUtilityService, this.translaterService); this.filterFactory = new FilterFactory(slickgridConfig, this.translaterService, this.collectionService); - this.filterService = externalServices?.filterService ?? new FilterService(this.filterFactory as any, this._eventPubSubService, this.sharedService, this.backendUtilityService); + this.filterService = + externalServices?.filterService ?? + new FilterService(this.filterFactory as any, this._eventPubSubService, this.sharedService, this.backendUtilityService); this.resizerService = externalServices?.resizerService ?? new ResizerService(this._eventPubSubService); - this.sortService = externalServices?.sortService ?? new SortService(this.collectionService, this.sharedService, this._eventPubSubService, this.backendUtilityService); - this.treeDataService = externalServices?.treeDataService ?? new TreeDataService(this._eventPubSubService, this.sharedService, this.sortService); - this.paginationService = externalServices?.paginationService ?? new PaginationService(this._eventPubSubService, this.sharedService, this.backendUtilityService); - - this.extensionService = externalServices?.extensionService ?? new ExtensionService( - this.extensionUtility, - this.filterService, - this._eventPubSubService, - this.sharedService, - this.sortService, - this.treeDataService, - this.translaterService, - () => this.gridService - ); + this.sortService = + externalServices?.sortService ?? + new SortService(this.collectionService, this.sharedService, this._eventPubSubService, this.backendUtilityService); + this.treeDataService = + externalServices?.treeDataService ?? new TreeDataService(this._eventPubSubService, this.sharedService, this.sortService); + this.paginationService = + externalServices?.paginationService ?? + new PaginationService(this._eventPubSubService, this.sharedService, this.backendUtilityService); + + this.extensionService = + externalServices?.extensionService ?? + new ExtensionService( + this.extensionUtility, + this.filterService, + this._eventPubSubService, + this.sharedService, + this.sortService, + this.treeDataService, + this.translaterService, + () => this.gridService + ); - this.gridStateService = externalServices?.gridStateService ?? new GridStateService(this.extensionService, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.treeDataService); - this.gridService = externalServices?.gridService ?? new GridService(this.gridStateService, this.filterService, this._eventPubSubService, this.paginationService, this.sharedService, this.sortService, this.treeDataService); + this.gridStateService = + externalServices?.gridStateService ?? + new GridStateService( + this.extensionService, + this.filterService, + this._eventPubSubService, + this.sharedService, + this.sortService, + this.treeDataService + ); + this.gridService = + externalServices?.gridService ?? + new GridService( + this.gridStateService, + this.filterService, + this._eventPubSubService, + this.paginationService, + this.sharedService, + this.sortService, + this.treeDataService + ); this.headerGroupingService = externalServices?.headerGroupingService ?? new HeaderGroupingService(this.extensionUtility); this.serviceList = [ @@ -360,7 +395,9 @@ export class AngularSlickgridComponent implements AfterViewInit, On ngAfterViewInit() { if (!this.columnDefinitions) { - throw new Error('Using `` requires [columnDefinitions], it seems that you might have forgot to provide the missing bindable input.'); + throw new Error( + 'Using `` requires [columnDefinitions], it seems that you might have forgot to provide the missing bindable input.' + ); } this.initialization(this._eventHandler); @@ -479,10 +516,19 @@ export class AngularSlickgridComponent implements AfterViewInit, On // internalPostProcess only works (for now) with a GraphQL Service, so make sure it is of that type if (typeof backendApiService.getDatasetName === 'function') { backendApi.internalPostProcess = (processResult: any) => { - const datasetName = (backendApi && backendApiService && typeof backendApiService.getDatasetName === 'function') ? backendApiService.getDatasetName() : ''; + const datasetName = + backendApi && backendApiService && typeof backendApiService.getDatasetName === 'function' + ? backendApiService.getDatasetName() + : ''; if (processResult?.data[datasetName]) { - const data = 'nodes' in processResult.data[datasetName] ? (processResult as any).data[datasetName].nodes : (processResult as any).data[datasetName]; - const totalCount = 'totalCount' in processResult.data[datasetName] ? (processResult as any).data[datasetName].totalCount : (processResult as any).data[datasetName].length; + const data = + 'nodes' in processResult.data[datasetName] + ? (processResult as any).data[datasetName].nodes + : (processResult as any).data[datasetName]; + const totalCount = + 'totalCount' in processResult.data[datasetName] + ? (processResult as any).data[datasetName].totalCount + : (processResult as any).data[datasetName].length; this.refreshGridData(data, totalCount || 0); } }; @@ -496,7 +542,12 @@ export class AngularSlickgridComponent implements AfterViewInit, On this._isAutosizeColsCalled = false; // when detecting a frozen grid, we'll automatically enable the mousewheel scroll handler so that we can scroll from both left/right frozen containers - if (this.gridOptions && ((this.gridOptions.frozenRow !== undefined && this.gridOptions.frozenRow >= 0) || this.gridOptions.frozenColumn !== undefined && this.gridOptions.frozenColumn >= 0) && this.gridOptions.enableMouseWheelScrollHandler === undefined) { + if ( + this.gridOptions && + ((this.gridOptions.frozenRow !== undefined && this.gridOptions.frozenRow >= 0) || + (this.gridOptions.frozenColumn !== undefined && this.gridOptions.frozenColumn >= 0)) && + this.gridOptions.enableMouseWheelScrollHandler === undefined + ) { this.gridOptions.enableMouseWheelScrollHandler = true; } @@ -548,7 +599,7 @@ export class AngularSlickgridComponent implements AfterViewInit, On // before certain extentions/plugins potentially adds extra columns not created by the user itself (RowMove, RowDetail, RowSelections) // we'll subscribe to the event and push back the change to the user so they always use full column defs array including extra cols this.subscriptions.push( - this._eventPubSubService.subscribe<{ columns: Column[]; grid: SlickGrid; }>('onPluginColumnsChanged', data => { + this._eventPubSubService.subscribe<{ columns: Column[]; grid: SlickGrid }>('onPluginColumnsChanged', (data) => { this._columnDefinitions = data.columns; this.columnDefinitionsChange.emit(this._columnDefinitions); }) @@ -564,7 +615,13 @@ export class AngularSlickgridComponent implements AfterViewInit, On } // build SlickGrid Grid, also user might optionally pass a custom dataview (e.g. remote model) - this.slickGrid = new SlickGrid, GridOption>>(`#${this.gridId}`, this.customDataView || this.dataView as SlickDataView, this._columnDefinitions, this.gridOptions, this._eventPubSubService); + this.slickGrid = new SlickGrid, GridOption>>( + `#${this.gridId}`, + this.customDataView || (this.dataView as SlickDataView), + this._columnDefinitions, + this.gridOptions, + this._eventPubSubService + ); this.sharedService.dataView = this.dataView; this.sharedService.slickGrid = this.slickGrid; this.sharedService.gridContainerElement = this.elm.nativeElement as HTMLDivElement; @@ -594,8 +651,18 @@ export class AngularSlickgridComponent implements AfterViewInit, On } // user could show a custom footer with the data metrics (dataset length and last updated timestamp) - if (!this.gridOptions.enablePagination && this.gridOptions.showCustomFooter && this.gridOptions.customFooterOptions && this.gridContainerElement) { - this.slickFooter = new SlickFooterComponent(this.slickGrid, this.gridOptions.customFooterOptions, this._eventPubSubService, this.translaterService); + if ( + !this.gridOptions.enablePagination && + this.gridOptions.showCustomFooter && + this.gridOptions.customFooterOptions && + this.gridContainerElement + ) { + this.slickFooter = new SlickFooterComponent( + this.slickGrid, + this.gridOptions.customFooterOptions, + this._eventPubSubService, + this.translaterService + ); this.slickFooter.renderFooter(this.gridContainerElement); } @@ -625,7 +692,11 @@ export class AngularSlickgridComponent implements AfterViewInit, On } this.dataView.syncGridSelection(this.slickGrid, preservedRowSelection); } else if (typeof syncGridSelection === 'object') { - this.dataView.syncGridSelection(this.slickGrid, syncGridSelection.preserveHidden, syncGridSelection.preserveHiddenOnSelectionChange); + this.dataView.syncGridSelection( + this.slickGrid, + syncGridSelection.preserveHidden, + syncGridSelection.preserveHiddenOnSelectionChange + ); } } @@ -707,7 +778,12 @@ export class AngularSlickgridComponent implements AfterViewInit, On */ paginationChanged(pagination: PaginationMetadata) { const isSyncGridSelectionEnabled = this.gridStateService?.needToPreserveRowSelection() ?? false; - if (this.slickGrid && !isSyncGridSelectionEnabled && this.gridOptions?.backendServiceApi && (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector)) { + if ( + this.slickGrid && + !isSyncGridSelectionEnabled && + this.gridOptions?.backendServiceApi && + (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector) + ) { this.slickGrid.setSelectedRows([]); } const { pageNumber, pageSize } = pagination; @@ -718,7 +794,7 @@ export class AngularSlickgridComponent implements AfterViewInit, On } this._eventPubSubService.publish('onGridStateChanged', { change: { newValues: { pageNumber, pageSize }, type: GridStateType.pagination }, - gridState: this.gridStateService.getCurrentGridState() + gridState: this.gridStateService.getCurrentGridState(), }); this.cd.markForCheck(); } @@ -755,13 +831,20 @@ export class AngularSlickgridComponent implements AfterViewInit, On } // display the Pagination component only after calling this refresh data first, we call it here so that if we preset pagination page number it will be shown correctly - this.showPagination = !!(this.gridOptions && (this.gridOptions.enablePagination || (this.gridOptions.backendServiceApi && this.gridOptions.enablePagination === undefined))); + this.showPagination = !!( + this.gridOptions && + (this.gridOptions.enablePagination || + (this.gridOptions.backendServiceApi && this.gridOptions.enablePagination === undefined)) + ); if (this._paginationOptions && this.gridOptions?.pagination && this.gridOptions?.backendServiceApi) { - const paginationOptions = this.setPaginationOptionsWhenPresetDefined(this.gridOptions, this._paginationOptions as Pagination); + const paginationOptions = this.setPaginationOptionsWhenPresetDefined( + this.gridOptions, + this._paginationOptions as Pagination + ); // when we have a totalCount use it, else we'll take it from the pagination object // only update the total items if it's different to avoid refreshing the UI - const totalRecords = (totalCount !== undefined) ? totalCount : (this.gridOptions?.pagination?.totalItems); + const totalRecords = totalCount !== undefined ? totalCount : this.gridOptions?.pagination?.totalItems; if (totalRecords !== undefined && totalRecords !== this.totalItems) { this.totalItems = +totalRecords; } @@ -858,7 +941,7 @@ export class AngularSlickgridComponent implements AfterViewInit, On * We will use this when doing a resize by cell content, if user provided a `width` it won't override it. */ protected copyColumnWidthsReference(columnDefinitions: Column[]) { - columnDefinitions.forEach(col => col.originalWidth = col.width); + columnDefinitions.forEach((col) => (col.originalWidth = col.width)); } protected displayEmptyDataWarning(showWarning = true) { @@ -880,7 +963,10 @@ export class AngularSlickgridComponent implements AfterViewInit, On if (gridOptions.enableTranslate) { this.extensionService.translateAllExtensions(lang); - if ((gridOptions.createPreHeaderPanel && gridOptions.createTopHeaderPanel) || (gridOptions.createPreHeaderPanel && !gridOptions.enableDraggableGrouping)) { + if ( + (gridOptions.createPreHeaderPanel && gridOptions.createTopHeaderPanel) || + (gridOptions.createPreHeaderPanel && !gridOptions.enableDraggableGrouping) + ) { this.headerGroupingService.translateHeaderGrouping(); } } @@ -951,7 +1037,10 @@ export class AngularSlickgridComponent implements AfterViewInit, On this.handleOnItemCountChanged(dataView.getFilteredItemCount() || 0, args.itemCount); // when user has resize by content enabled, we'll force a full width calculation since we change our entire dataset - if (args.itemCount > 0 && (this.gridOptions.autosizeColumnsByCellContentOnFirstLoad || this.gridOptions.enableAutoResizeColumnsByCellContent)) { + if ( + args.itemCount > 0 && + (this.gridOptions.autosizeColumnsByCellContentOnFirstLoad || this.gridOptions.enableAutoResizeColumnsByCellContent) + ) { this.resizerService.resizeColumnsByCellContent(!this.gridOptions?.resizeByContentOnlyOnFirstLoad); } }); @@ -963,9 +1052,7 @@ export class AngularSlickgridComponent implements AfterViewInit, On // see commit: https://github.com/ghiscoding/aurelia-slickgrid/commit/8c503a4d45fba11cbd8d8cc467fae8d177cc4f60 if (!calledOnRowCountChanged && Array.isArray(rows)) { const ranges = grid.getRenderedRange(); - rows - .filter(row => row >= ranges.top && row <= ranges.bottom) - .forEach((row: number) => grid.updateRow(row)); + rows.filter((row) => row >= ranges.top && row <= ranges.bottom).forEach((row: number) => grid.updateRow(row)); grid.render(); } }); @@ -988,20 +1075,34 @@ export class AngularSlickgridComponent implements AfterViewInit, On const backendApi = gridOptions.backendServiceApi; const backendApiService = backendApi?.service; const serviceOptions: BackendServiceOption = backendApiService?.options ?? {}; - const isExecuteCommandOnInit = (!serviceOptions) ? false : ((serviceOptions && 'executeProcessCommandOnInit' in serviceOptions) ? serviceOptions['executeProcessCommandOnInit'] : true); + const isExecuteCommandOnInit = !serviceOptions + ? false + : serviceOptions && 'executeProcessCommandOnInit' in serviceOptions + ? serviceOptions['executeProcessCommandOnInit'] + : true; if (backendApiService) { // update backend filters (if need be) BEFORE the query runs (via the onInit command a few lines below) // if user entered some any "presets", we need to reflect them all in the grid if (gridOptions?.presets) { // Filters "presets" - if (backendApiService.updateFilters && Array.isArray(gridOptions.presets.filters) && gridOptions.presets.filters.length > 0) { + if ( + backendApiService.updateFilters && + Array.isArray(gridOptions.presets.filters) && + gridOptions.presets.filters.length > 0 + ) { backendApiService.updateFilters(gridOptions.presets.filters, true); } // Sorters "presets" - if (backendApiService.updateSorters && Array.isArray(gridOptions.presets.sorters) && gridOptions.presets.sorters.length > 0) { + if ( + backendApiService.updateSorters && + Array.isArray(gridOptions.presets.sorters) && + gridOptions.presets.sorters.length > 0 + ) { // when using multi-column sort, we can have multiple but on single sort then only grab the first sort provided - const sortColumns = this.gridOptions.multiColumnSort ? gridOptions.presets.sorters : gridOptions.presets.sorters.slice(0, 1); + const sortColumns = this.gridOptions.multiColumnSort + ? gridOptions.presets.sorters + : gridOptions.presets.sorters.slice(0, 1); backendApiService.updateSorters(undefined, sortColumns); } // Pagination "presets" @@ -1018,8 +1119,10 @@ export class AngularSlickgridComponent implements AfterViewInit, On // execute onInit command when necessary if (backendApi && backendApiService && (backendApi.onInit || isExecuteCommandOnInit)) { - const query = (typeof backendApiService.buildQuery === 'function') ? backendApiService.buildQuery() : ''; - const process = (isExecuteCommandOnInit) ? (backendApi.process && backendApi.process(query) || null) : (backendApi.onInit && backendApi.onInit(query) || null); + const query = typeof backendApiService.buildQuery === 'function' ? backendApiService.buildQuery() : ''; + const process = isExecuteCommandOnInit + ? (backendApi.process && backendApi.process(query)) || null + : (backendApi.onInit && backendApi.onInit(query)) || null; // wrap this inside a microtask to be executed at the end of the task and avoid timing issue since the gridOptions needs to be ready before running this onInit queueMicrotask(() => { @@ -1037,13 +1140,16 @@ export class AngularSlickgridComponent implements AfterViewInit, On const totalItems = this.gridOptions?.pagination?.totalItems ?? 0; if (process instanceof Promise) { process - .then((processResult: any) => backendUtilityService.executeBackendProcessesCallback(startTime, processResult, backendApi, totalItems)) + .then((processResult: any) => + backendUtilityService.executeBackendProcessesCallback(startTime, processResult, backendApi, totalItems) + ) .catch((error) => backendUtilityService.onBackendError(error, backendApi)); } else if (process && this.rxjs?.isObservable(process)) { this.subscriptions.push( (process as Observable).subscribe({ - next: (processResult: any) => backendUtilityService.executeBackendProcessesCallback(startTime, processResult, backendApi, totalItems), - error: (error: any) => backendUtilityService.onBackendError(error, backendApi) + next: (processResult: any) => + backendUtilityService.executeBackendProcessesCallback(startTime, processResult, backendApi, totalItems), + error: (error: any) => backendUtilityService.onBackendError(error, backendApi), }) ); } @@ -1058,14 +1164,19 @@ export class AngularSlickgridComponent implements AfterViewInit, On } protected addBackendInfiniteScrollCallback(): void { - if (this.slickGrid && this.gridOptions.backendServiceApi && this.hasBackendInfiniteScroll() && !this.gridOptions.backendServiceApi?.onScrollEnd) { + if ( + this.slickGrid && + this.gridOptions.backendServiceApi && + this.hasBackendInfiniteScroll() && + !this.gridOptions.backendServiceApi?.onScrollEnd + ) { const onScrollEnd = () => { this.backendUtilityService.setInfiniteScrollBottomHit(true); // even if we're not showing pagination, we still use pagination service behind the scene // to keep track of the scroll position and fetch next set of data (aka next page) // we also need a flag to know if we reached the of the dataset or not (no more pages) - this.paginationService.goToNextPage().then(hasNext => { + this.paginationService.goToNextPage().then((hasNext) => { if (!hasNext) { this.backendUtilityService.setInfiniteScrollBottomHit(false); } @@ -1078,10 +1189,10 @@ export class AngularSlickgridComponent implements AfterViewInit, On this._eventHandler.subscribe(this.slickGrid.onScroll, (_e, args) => { const viewportElm = args.grid.getViewportNode()!; if ( - ['mousewheel', 'scroll'].includes(args.triggeredBy || '') - && this.paginationService?.totalItems - && args.scrollTop > 0 - && Math.ceil(viewportElm.offsetHeight + args.scrollTop) >= args.scrollHeight + ['mousewheel', 'scroll'].includes(args.triggeredBy || '') && + this.paginationService?.totalItems && + args.scrollTop > 0 && + Math.ceil(viewportElm.offsetHeight + args.scrollTop) >= args.scrollHeight ) { if (!this._scrollEndCalled) { onScrollEnd(); @@ -1103,8 +1214,13 @@ export class AngularSlickgridComponent implements AfterViewInit, On } protected bindResizeHook(grid: SlickGrid, options: GridOption) { - if ((options.autoFitColumnsOnFirstLoad && options.autosizeColumnsByCellContentOnFirstLoad) || (options.enableAutoSizeColumns && options.enableAutoResizeColumnsByCellContent)) { - throw new Error(`[Angular-Slickgrid] You cannot enable both autosize/fit viewport & resize by content, you must choose which resize technique to use. You can enable these 2 options ("autoFitColumnsOnFirstLoad" and "enableAutoSizeColumns") OR these other 2 options ("autosizeColumnsByCellContentOnFirstLoad" and "enableAutoResizeColumnsByCellContent").`); + if ( + (options.autoFitColumnsOnFirstLoad && options.autosizeColumnsByCellContentOnFirstLoad) || + (options.enableAutoSizeColumns && options.enableAutoResizeColumnsByCellContent) + ) { + throw new Error( + `[Angular-Slickgrid] You cannot enable both autosize/fit viewport & resize by content, you must choose which resize technique to use. You can enable these 2 options ("autoFitColumnsOnFirstLoad" and "enableAutoSizeColumns") OR these other 2 options ("autosizeColumnsByCellContentOnFirstLoad" and "enableAutoResizeColumnsByCellContent").` + ); } // auto-resize grid on browser resize @@ -1115,7 +1231,13 @@ export class AngularSlickgridComponent implements AfterViewInit, On } // expand/autofit columns on first page load - if (grid && options?.enableAutoResize && options.autoFitColumnsOnFirstLoad && options.enableAutoSizeColumns && !this._isAutosizeColsCalled) { + if ( + grid && + options?.enableAutoResize && + options.autoFitColumnsOnFirstLoad && + options.enableAutoSizeColumns && + !this._isAutosizeColsCalled + ) { grid.autosizeColumns(); this._isAutosizeColsCalled = true; } @@ -1125,7 +1247,9 @@ export class AngularSlickgridComponent implements AfterViewInit, On // if user entered some Sort "presets", we need to reflect them all in the DOM if (gridOptions.enableSorting && Array.isArray(gridOptions.presets?.sorters)) { // when using multi-column sort, we can have multiple but on single sort then only grab the first sort provided - const sortColumns = this.gridOptions.multiColumnSort ? gridOptions.presets.sorters : gridOptions.presets.sorters.slice(0, 1); + const sortColumns = this.gridOptions.multiColumnSort + ? gridOptions.presets.sorters + : gridOptions.presets.sorters.slice(0, 1); this.sortService.loadGridSorters(sortColumns); } } @@ -1137,7 +1261,7 @@ export class AngularSlickgridComponent implements AfterViewInit, On startTime: new Date(), endTime: new Date(), itemCount: currentPageRowItemCount, - totalItemCount + totalItemCount, }; // if custom footer is enabled, then we'll update its metrics if (this.slickFooter) { @@ -1162,7 +1286,7 @@ export class AngularSlickgridComponent implements AfterViewInit, On this._eventPubSubService.subscribe('onPaginationChanged', (paginationChanges: PaginationMetadata) => { this.paginationChanged(paginationChanges); }), - this._eventPubSubService.subscribe('onPaginationVisibilityChanged', (visibility: { visible: boolean; }) => { + this._eventPubSubService.subscribe('onPaginationVisibilityChanged', (visibility: { visible: boolean }) => { this.showPagination = visibility?.visible ?? false; if (this.gridOptions?.backendServiceApi) { this.backendUtilityService?.refreshBackendDataset(this.gridOptions); @@ -1201,13 +1325,11 @@ export class AngularSlickgridComponent implements AfterViewInit, On protected insertDynamicPresetColumns(columnId: string, gridPresetColumns: Column[]) { if (this._columnDefinitions) { - const columnPosition = this._columnDefinitions.findIndex(c => c.id === columnId); + const columnPosition = this._columnDefinitions.findIndex((c) => c.id === columnId); if (columnPosition >= 0) { const dynColumn = this._columnDefinitions[columnPosition]; - if (dynColumn?.id === columnId && !gridPresetColumns.some(c => c.id === columnId)) { - columnPosition > 0 - ? gridPresetColumns.splice(columnPosition, 0, dynColumn) - : gridPresetColumns.unshift(dynColumn); + if (dynColumn?.id === columnId && !gridPresetColumns.some((c) => c.id === columnId)) { + columnPosition > 0 ? gridPresetColumns.splice(columnPosition, 0, dynColumn) : gridPresetColumns.unshift(dynColumn); } } } @@ -1217,7 +1339,10 @@ export class AngularSlickgridComponent implements AfterViewInit, On protected loadColumnPresetsWhenDatasetInitialized() { // if user entered some Columns "presets", we need to reflect them all in the grid if (Array.isArray(this.gridOptions.presets?.columns) && this.gridOptions.presets.columns.length > 0) { - const gridPresetColumns: Column[] = this.gridStateService.getAssociatedGridColumns(this.slickGrid, this.gridOptions.presets.columns); + const gridPresetColumns: Column[] = this.gridStateService.getAssociatedGridColumns( + this.slickGrid, + this.gridOptions.presets.columns + ); if (Array.isArray(gridPresetColumns) && gridPresetColumns.length > 0 && Array.isArray(this._columnDefinitions)) { // make sure that the dynamic columns are included in presets (1.Row Move, 2. Row Selection, 3. Row Detail) if (this.gridOptions.enableRowMoveManager) { @@ -1235,7 +1360,7 @@ export class AngularSlickgridComponent implements AfterViewInit, On // keep copy the original optional `width` properties optionally provided by the user. // We will use this when doing a resize by cell content, if user provided a `width` it won't override it. - gridPresetColumns.forEach(col => col.originalWidth = col.width); + gridPresetColumns.forEach((col) => (col.originalWidth = col.width)); // finally set the new presets columns (including checkbox selector if need be) this.slickGrid.setColumns(gridPresetColumns); @@ -1250,7 +1375,7 @@ export class AngularSlickgridComponent implements AfterViewInit, On // if user entered some Filter "presets", we need to reflect them all in the DOM // also note that a presets of Tree Data Toggling will also call this method because Tree Data toggling does work with data filtering // (collapsing a parent will basically use Filter for hidding (aka collapsing) away the child underneat it) - if ((Array.isArray(this.gridOptions.presets?.filters) || Array.isArray(this.gridOptions.presets?.treeData?.toggledItems))) { + if (Array.isArray(this.gridOptions.presets?.filters) || Array.isArray(this.gridOptions.presets?.treeData?.toggledItems)) { this.filterService.populateColumnFilterSearchTermPresets(this.gridOptions.presets?.filters || []); } } @@ -1266,7 +1391,11 @@ export class AngularSlickgridComponent implements AfterViewInit, On this.totalItems = Array.isArray(dataset) ? dataset.length : 0; if (this._paginationOptions && this.dataView?.getPagingInfo) { const slickPagingInfo = this.dataView.getPagingInfo(); - if (slickPagingInfo && 'totalRows' in slickPagingInfo && this._paginationOptions.totalItems !== slickPagingInfo.totalRows) { + if ( + slickPagingInfo && + 'totalRows' in slickPagingInfo && + this._paginationOptions.totalItems !== slickPagingInfo.totalRows + ) { this.totalItems = slickPagingInfo.totalRows || 0; } } @@ -1280,8 +1409,14 @@ export class AngularSlickgridComponent implements AfterViewInit, On protected loadRowSelectionPresetWhenExists() { // if user entered some Row Selections "presets" const presets = this.gridOptions?.presets; - const enableRowSelection = this.gridOptions && (this.gridOptions.enableCheckboxSelector || this.gridOptions.enableRowSelection); - if (enableRowSelection && this.slickGrid?.getSelectionModel() && presets?.rowSelection && (Array.isArray(presets.rowSelection.gridRowIndexes) || Array.isArray(presets.rowSelection.dataContextIds))) { + const enableRowSelection = + this.gridOptions && (this.gridOptions.enableCheckboxSelector || this.gridOptions.enableRowSelection); + if ( + enableRowSelection && + this.slickGrid?.getSelectionModel() && + presets?.rowSelection && + (Array.isArray(presets.rowSelection.gridRowIndexes) || Array.isArray(presets.rowSelection.dataContextIds)) + ) { let dataContextIds = presets.rowSelection.dataContextIds; let gridRowIndexes = presets.rowSelection.gridRowIndexes; @@ -1298,7 +1433,7 @@ export class AngularSlickgridComponent implements AfterViewInit, On this.dataView!.setSelectedIds(dataContextIds || [], { isRowBeingAdded: true, shouldTriggerEvent: false, // do not trigger when presetting the grid - applyRowSelectionToGrid: true + applyRowSelectionToGrid: true, }); } } @@ -1317,19 +1452,27 @@ export class AngularSlickgridComponent implements AfterViewInit, On // if we have a backendServiceApi and the enablePagination is undefined, we'll assume that we do want to see it, else get that defined value if (!this.hasBackendInfiniteScroll(gridOptions)) { - gridOptions.enablePagination = !!((gridOptions.backendServiceApi && gridOptions.enablePagination === undefined) ? true : gridOptions.enablePagination); + gridOptions.enablePagination = !!(gridOptions.backendServiceApi && gridOptions.enablePagination === undefined + ? true + : gridOptions.enablePagination); } // using copy extend to do a deep clone has an unwanted side on objects and pageSizes but ES6 spread has other worst side effects // so we will just overwrite the pageSizes when needed, this is the only one causing issues so far. // On a deep extend, Object and Array are extended, but object wrappers on primitive types such as String, Boolean, and Number are not. - if (options?.pagination && (gridOptions.enablePagination || gridOptions.backendServiceApi) && (this.forRootConfig.pagination || gridOptions.pagination)) { - options.pagination.pageSize = gridOptions.pagination?.pageSize ?? this.forRootConfig.pagination?.pageSize ?? GlobalGridOptions.pagination!.pageSize; - options.pagination.pageSizes = gridOptions.pagination?.pageSizes ?? this.forRootConfig.pagination?.pageSizes ?? GlobalGridOptions.pagination!.pageSizes; + if ( + options?.pagination && + (gridOptions.enablePagination || gridOptions.backendServiceApi) && + (this.forRootConfig.pagination || gridOptions.pagination) + ) { + options.pagination.pageSize = + gridOptions.pagination?.pageSize ?? this.forRootConfig.pagination?.pageSize ?? GlobalGridOptions.pagination!.pageSize; + options.pagination.pageSizes = + gridOptions.pagination?.pageSizes ?? this.forRootConfig.pagination?.pageSizes ?? GlobalGridOptions.pagination!.pageSizes; } // also make sure to show the header row if user have enabled filtering - this._hideHeaderRowAfterPageLoad = (options.showHeaderRow === false); + this._hideHeaderRowAfterPageLoad = options.showHeaderRow === false; if (options.enableFiltering && !options.showHeaderRow) { options.showHeaderRow = options.enableFiltering; } @@ -1353,7 +1496,7 @@ export class AngularSlickgridComponent implements AfterViewInit, On if (disposePreviousResources) { this.disposeExternalResources(); } - resources.forEach(res => this._registeredResources.push(res)); + resources.forEach((res) => this._registeredResources.push(res)); this.initializeExternalResources(resources); } @@ -1369,9 +1512,18 @@ export class AngularSlickgridComponent implements AfterViewInit, On this.registerRxJsResource(new RxJsResource() as RxJsFacade); if (this.gridOptions.enableRowDetailView) { - this.slickRowDetailView = new SlickRowDetailView(this.angularUtilService, this.appRef, this._eventPubSubService, this.elm.nativeElement, this.rxjs); + this.slickRowDetailView = new SlickRowDetailView( + this.angularUtilService, + this.appRef, + this._eventPubSubService, + this.elm.nativeElement, + this.rxjs + ); this.slickRowDetailView.create(this.columnDefinitions, this.gridOptions); - this.extensionService.addExtensionToList(ExtensionName.rowDetailView, { name: ExtensionName.rowDetailView, instance: this.slickRowDetailView }); + this.extensionService.addExtensionToList(ExtensionName.rowDetailView, { + name: ExtensionName.rowDetailView, + instance: this.slickRowDetailView, + }); } } @@ -1395,7 +1547,10 @@ export class AngularSlickgridComponent implements AfterViewInit, On this._registeredResources.push(this.gridService, this.gridStateService); // when using Grouping/DraggableGrouping/Colspan register its Service - if ((this.gridOptions.createPreHeaderPanel && this.gridOptions.createTopHeaderPanel) || (this.gridOptions.createPreHeaderPanel && !this.gridOptions.enableDraggableGrouping)) { + if ( + (this.gridOptions.createPreHeaderPanel && this.gridOptions.createTopHeaderPanel) || + (this.gridOptions.createPreHeaderPanel && !this.gridOptions.enableDraggableGrouping) + ) { this._registeredResources.push(this.headerGroupingService); } @@ -1479,7 +1634,11 @@ export class AngularSlickgridComponent implements AfterViewInit, On } else if (Array.isArray(flatDatasetInput) && flatDatasetInput.length > 0) { // we need to first convert the flat dataset to a hierarchical dataset and then sort it // we'll also add props, by mutation, required by the TreeDataService on the flat array like `__hasChildren`, `parentId` and anything else to work properly - sortedDatasetResult = this.treeDataService.convertFlatParentChildToTreeDatasetAndSort(flatDatasetInput, this._columnDefinitions, this.gridOptions); + sortedDatasetResult = this.treeDataService.convertFlatParentChildToTreeDatasetAndSort( + flatDatasetInput, + this._columnDefinitions, + this.gridOptions + ); this.sharedService.hierarchicalDataset = sortedDatasetResult.hierarchical; flatDatasetOutput = sortedDatasetResult.flat; } @@ -1494,8 +1653,10 @@ export class AngularSlickgridComponent implements AfterViewInit, On /** Prepare and load all SlickGrid editors, if an async editor is found then we'll also execute it. */ protected loadSlickGridEditors(columnDefinitions: Column[]): Column[] { - if (columnDefinitions.some(col => `${col.id}`.includes('.'))) { - console.error('[Angular-Slickgrid] Make sure that none of your Column Definition "id" property includes a dot in its name because that will cause some problems with the Editors. For example if your column definition "field" property is "user.firstName" then use "firstName" as the column "id".'); + if (columnDefinitions.some((col) => `${col.id}`.includes('.'))) { + console.error( + '[Angular-Slickgrid] Make sure that none of your Column Definition "id" property includes a dot in its name because that will cause some problems with the Editors. For example if your column definition "field" property is "user.firstName" then use "firstName" as the column "id".' + ); } return columnDefinitions.map((column: Column | any) => { @@ -1508,10 +1669,15 @@ export class AngularSlickgridComponent implements AfterViewInit, On } protected suggestDateParsingWhenHelpful() { - if (this.dataView?.getItemCount() > WARN_NO_PREPARSE_DATE_SIZE && !this.gridOptions.silenceWarnings && !this.gridOptions.preParseDateColumns && this.slickGrid.getColumns().some(c => isColumnDateType(c.type))) { + if ( + this.dataView?.getItemCount() > WARN_NO_PREPARSE_DATE_SIZE && + !this.gridOptions.silenceWarnings && + !this.gridOptions.preParseDateColumns && + this.slickGrid.getColumns().some((c) => isColumnDateType(c.type)) + ) { console.warn( '[Slickgrid-Universal] For getting better perf, we suggest you enable the `preParseDateColumns` grid option, ' + - 'for more info visit => https://ghiscoding.gitbook.io/angular-slickgrid/column-functionalities/sorting#pre-parse-date-columns-for-better-perf' + 'for more info visit => https://ghiscoding.gitbook.io/angular-slickgrid/column-functionalities/sorting#pre-parse-date-columns-for-better-perf' ); } } diff --git a/src/app/modules/angular-slickgrid/constants.ts b/src/app/modules/angular-slickgrid/constants.ts index a0c8dcd61..4682cfa50 100644 --- a/src/app/modules/angular-slickgrid/constants.ts +++ b/src/app/modules/angular-slickgrid/constants.ts @@ -23,7 +23,8 @@ export class Constants { TEXT_EQUAL_TO: 'Equal to', TEXT_ENDS_WITH: 'Ends With', TEXT_ERROR_EDITABLE_GRID_REQUIRED: 'Your grid must be editable in order to use the Composite Editor Modal.', - TEXT_ERROR_ENABLE_CELL_NAVIGATION_REQUIRED: 'Composite Editor requires the flag "enableCellNavigation" to be set to True in your Grid Options.', + TEXT_ERROR_ENABLE_CELL_NAVIGATION_REQUIRED: + 'Composite Editor requires the flag "enableCellNavigation" to be set to True in your Grid Options.', TEXT_ERROR_NO_CHANGES_DETECTED: 'Sorry we could not detect any changes.', TEXT_ERROR_NO_EDITOR_FOUND: 'We could not find any Editor in your Column Definition.', TEXT_ERROR_NO_RECORD_FOUND: 'No records selected for edit or clone operation.', @@ -82,18 +83,25 @@ export class Constants { static readonly VALIDATION_EDITOR_VALID_INTEGER = 'Please enter a valid integer number'; static readonly VALIDATION_EDITOR_INTEGER_BETWEEN = 'Please enter a valid integer number between {{minValue}} and {{maxValue}}'; static readonly VALIDATION_EDITOR_INTEGER_MAX = 'Please enter a valid integer number that is lower than {{maxValue}}'; - static readonly VALIDATION_EDITOR_INTEGER_MAX_INCLUSIVE = 'Please enter a valid integer number that is lower than or equal to {{maxValue}}'; + static readonly VALIDATION_EDITOR_INTEGER_MAX_INCLUSIVE = + 'Please enter a valid integer number that is lower than or equal to {{maxValue}}'; static readonly VALIDATION_EDITOR_INTEGER_MIN = 'Please enter a valid integer number that is greater than {{minValue}}'; - static readonly VALIDATION_EDITOR_INTEGER_MIN_INCLUSIVE = 'Please enter a valid integer number that is greater than or equal to {{minValue}}'; + static readonly VALIDATION_EDITOR_INTEGER_MIN_INCLUSIVE = + 'Please enter a valid integer number that is greater than or equal to {{minValue}}'; static readonly VALIDATION_EDITOR_NUMBER_BETWEEN = 'Please enter a valid number between {{minValue}} and {{maxValue}}'; static readonly VALIDATION_EDITOR_NUMBER_MAX = 'Please enter a valid number that is lower than {{maxValue}}'; - static readonly VALIDATION_EDITOR_NUMBER_MAX_INCLUSIVE = 'Please enter a valid number that is lower than or equal to {{maxValue}}'; + static readonly VALIDATION_EDITOR_NUMBER_MAX_INCLUSIVE = + 'Please enter a valid number that is lower than or equal to {{maxValue}}'; static readonly VALIDATION_EDITOR_NUMBER_MIN = 'Please enter a valid number that is greater than {{minValue}}'; - static readonly VALIDATION_EDITOR_NUMBER_MIN_INCLUSIVE = 'Please enter a valid number that is greater than or equal to {{minValue}}'; + static readonly VALIDATION_EDITOR_NUMBER_MIN_INCLUSIVE = + 'Please enter a valid number that is greater than or equal to {{minValue}}'; static readonly VALIDATION_EDITOR_DECIMAL_BETWEEN = 'Please enter a valid number with a maximum of {{maxDecimal}} decimals'; - static readonly VALIDATION_EDITOR_TEXT_LENGTH_BETWEEN = 'Please make sure your text length is between {{minLength}} and {{maxLength}} characters'; + static readonly VALIDATION_EDITOR_TEXT_LENGTH_BETWEEN = + 'Please make sure your text length is between {{minLength}} and {{maxLength}} characters'; static readonly VALIDATION_EDITOR_TEXT_MAX_LENGTH = 'Please make sure your text is less than {{maxLength}} characters'; - static readonly VALIDATION_EDITOR_TEXT_MAX_LENGTH_INCLUSIVE = 'Please make sure your text is less than or equal to {{maxLength}} characters'; + static readonly VALIDATION_EDITOR_TEXT_MAX_LENGTH_INCLUSIVE = + 'Please make sure your text is less than or equal to {{maxLength}} characters'; static readonly VALIDATION_EDITOR_TEXT_MIN_LENGTH = 'Please make sure your text is more than {{minLength}} character(s)'; - static readonly VALIDATION_EDITOR_TEXT_MIN_LENGTH_INCLUSIVE = 'Please make sure your text is at least {{minLength}} character(s)'; + static readonly VALIDATION_EDITOR_TEXT_MIN_LENGTH_INCLUSIVE = + 'Please make sure your text is at least {{minLength}} character(s)'; } diff --git a/src/app/modules/angular-slickgrid/extensions/__tests__/slickRowDetailView.spec.ts b/src/app/modules/angular-slickgrid/extensions/__tests__/slickRowDetailView.spec.ts index f222469ae..72af6cad9 100644 --- a/src/app/modules/angular-slickgrid/extensions/__tests__/slickRowDetailView.spec.ts +++ b/src/app/modules/angular-slickgrid/extensions/__tests__/slickRowDetailView.spec.ts @@ -1,5 +1,13 @@ import { ApplicationRef, Component } from '@angular/core'; -import { Column, OnSelectedRowsChangedEventArgs, SlickEvent, SlickEventData, SlickEventHandler, SlickGrid, SlickRowSelectionModel, } from '@slickgrid-universal/common'; +import { + Column, + OnSelectedRowsChangedEventArgs, + SlickEvent, + SlickEventData, + SlickEventHandler, + SlickGrid, + SlickRowSelectionModel, +} from '@slickgrid-universal/common'; import { EventPubSubService } from '@slickgrid-universal/event-pub-sub'; import { of } from 'rxjs'; @@ -49,13 +57,13 @@ const gridOptionsMock = { process: () => new Promise((resolve) => resolve('process resolved')), viewComponent: null as any, onExtensionRegistered: jest.fn(), - onAsyncResponse: () => { }, - onAsyncEndUpdate: () => { }, - onAfterRowDetailToggle: () => { }, - onBeforeRowDetailToggle: () => { }, - onRowOutOfViewportRange: () => { }, - onRowBackToViewportRange: () => { }, - } + onAsyncResponse: () => {}, + onAsyncEndUpdate: () => {}, + onAfterRowDetailToggle: () => {}, + onBeforeRowDetailToggle: () => {}, + onRowOutOfViewportRange: () => {}, + onRowBackToViewportRange: () => {}, + }, } as unknown as GridOption; const dataViewStub = { @@ -82,10 +90,10 @@ const gridStub = { } as unknown as SlickGrid; @Component({ template: `

    Loading...

    ` }) -class TestPreloadComponent { } +class TestPreloadComponent {} @Component({ template: `

    Some Title

    ` }) -class TestComponent { } +class TestComponent {} describe('SlickRowDetailView', () => { let eventHandler: SlickEventHandler; @@ -261,7 +269,7 @@ describe('SlickRowDetailView', () => { // ); expect(onAsyncRespSpy).not.toHaveBeenCalled(); expect(onAsyncEndSpy).toHaveBeenCalledWith(expect.anything(), { item: columnsMock[0], itemDetail: columnsMock[0], grid: gridStub }); - expect(renderSpy).toHaveBeenCalledWith({ cssClass: 'red', field: 'field1', id: 'field1', width: 100, }); + expect(renderSpy).toHaveBeenCalledWith({ cssClass: 'red', field: 'field1', id: 'field1', width: 100 }); expect(onAfterRowSpy).not.toHaveBeenCalled(); expect(onBeforeRowSpy).not.toHaveBeenCalled(); expect(onRowOutViewSpy).not.toHaveBeenCalled(); @@ -344,7 +352,14 @@ describe('SlickRowDetailView', () => { expect(onAsyncEndSpy).not.toHaveBeenCalled(); expect(onAfterRowSpy).not.toHaveBeenCalled(); expect(onBeforeRowSpy).not.toHaveBeenCalled(); - expect(onRowOutViewSpy).toHaveBeenCalledWith(expect.anything(), { item: columnsMock[0], rowId: 0, rowIndex: 0, expandedRows: [0], rowIdsOutOfViewport: [], grid: gridStub }); + expect(onRowOutViewSpy).toHaveBeenCalledWith(expect.anything(), { + item: columnsMock[0], + rowId: 0, + rowIndex: 0, + expandedRows: [0], + rowIdsOutOfViewport: [], + grid: gridStub, + }); expect(onRowBackViewSpy).not.toHaveBeenCalled(); }); @@ -376,13 +391,22 @@ describe('SlickRowDetailView', () => { expect(onAfterRowSpy).not.toHaveBeenCalled(); expect(onBeforeRowSpy).not.toHaveBeenCalled(); expect(onRowOutViewSpy).not.toHaveBeenCalled(); - expect(onRowBackViewSpy).toHaveBeenCalledWith(expect.anything(), { item: columnsMock[0], rowId: 0, rowIndex: 0, expandedRows: [columnsMock[0] as any], rowIdsOutOfViewport: [], grid: gridStub }); + expect(onRowBackViewSpy).toHaveBeenCalledWith(expect.anything(), { + item: columnsMock[0], + rowId: 0, + rowIndex: 0, + expandedRows: [columnsMock[0] as any], + rowIdsOutOfViewport: [], + grid: gridStub, + }); }); it('should call Angular Util "createAngularComponentAppendToDom" when grid "onColumnsReordered" is triggered', (done) => { const mockColumn = { id: 'field1', field: 'field1', width: 100, cssClass: 'red', __collapsed: true }; const handlerSpy = jest.spyOn(plugin.eventHandler, 'subscribe'); - const appendSpy = jest.spyOn(angularUtilServiceStub, 'createAngularComponentAppendToDom').mockReturnValue({ componentRef: { instance: jest.fn() } } as any); + const appendSpy = jest + .spyOn(angularUtilServiceStub, 'createAngularComponentAppendToDom') + .mockReturnValue({ componentRef: { instance: jest.fn() } } as any); plugin.init(gridStub); plugin.onBeforeRowDetailToggle = new SlickEvent(); @@ -407,14 +431,20 @@ describe('SlickRowDetailView', () => { const mockColumn = { id: 'field1', field: 'field1', width: 100, cssClass: 'red', __collapsed: true }; gridOptionsMock.enableCheckboxSelector = true; const handlerSpy = jest.spyOn(plugin.eventHandler, 'subscribe'); - const appendSpy = jest.spyOn(angularUtilServiceStub, 'createAngularComponentAppendToDom').mockReturnValue({ componentRef: { instance: jest.fn(), destroy: jest.fn() } } as any); + const appendSpy = jest + .spyOn(angularUtilServiceStub, 'createAngularComponentAppendToDom') + .mockReturnValue({ componentRef: { instance: jest.fn(), destroy: jest.fn() } } as any); plugin.init(gridStub); const redrawSpy = jest.spyOn(plugin, 'redrawAllViewComponents'); plugin.onBeforeRowDetailToggle = new SlickEvent(); plugin.register(); plugin.eventHandler.subscribe(plugin.onBeforeRowDetailToggle, () => { - gridStub.onSelectedRowsChanged.notify({ rows: [0], previousSelectedRows: [], grid: gridStub } as unknown as OnSelectedRowsChangedEventArgs, new SlickEventData(), gridStub); + gridStub.onSelectedRowsChanged.notify( + { rows: [0], previousSelectedRows: [], grid: gridStub } as unknown as OnSelectedRowsChangedEventArgs, + new SlickEventData(), + gridStub + ); expect(appendSpy).toHaveBeenCalledWith(TestComponent, expect.objectContaining({ className: 'container_field1' }), { model: mockColumn, addon: expect.anything(), @@ -434,7 +464,9 @@ describe('SlickRowDetailView', () => { it(`should call "redrawAllViewComponents" when event ${eventName} is triggered`, () => { const mockColumn = { id: 'field1', field: 'field1', width: 100, cssClass: 'red', __collapsed: true }; const handlerSpy = jest.spyOn(plugin.eventHandler, 'subscribe'); - const appendSpy = jest.spyOn(angularUtilServiceStub, 'createAngularComponentAppendToDom').mockReturnValue({ componentRef: { instance: jest.fn(), destroy: jest.fn() } } as any); + const appendSpy = jest + .spyOn(angularUtilServiceStub, 'createAngularComponentAppendToDom') + .mockReturnValue({ componentRef: { instance: jest.fn(), destroy: jest.fn() } } as any); plugin.init(gridStub); const redrawSpy = jest.spyOn(plugin, 'redrawAllViewComponents'); @@ -507,7 +539,9 @@ describe('SlickRowDetailView', () => { const mockColumn = { id: 'field1', field: 'field1', width: 100, cssClass: 'red', __collapsed: true }; const handlerSpy = jest.spyOn(plugin.eventHandler, 'subscribe'); const getElementSpy = jest.spyOn(document.body, 'getElementsByClassName'); - const appendSpy = jest.spyOn(angularUtilServiceStub, 'createAngularComponentAppendToDom').mockReturnValue({ componentRef: { instance: jest.fn(), destroy: jest.fn() } } as any); + const appendSpy = jest + .spyOn(angularUtilServiceStub, 'createAngularComponentAppendToDom') + .mockReturnValue({ componentRef: { instance: jest.fn(), destroy: jest.fn() } } as any); plugin.init(gridStub); plugin.onAfterRowDetailToggle = new SlickEvent(); @@ -533,7 +567,9 @@ describe('SlickRowDetailView', () => { const mockColumn = { id: 'field1', field: 'field1', width: 100, cssClass: 'red', __collapsed: true }; const handlerSpy = jest.spyOn(plugin.eventHandler, 'subscribe'); const getElementSpy = jest.spyOn(document.body, 'getElementsByClassName'); - const appendSpy = jest.spyOn(angularUtilServiceStub, 'createAngularComponentAppendToDom').mockReturnValue({ componentRef: { instance: jest.fn(), destroy: jest.fn() } } as any); + const appendSpy = jest + .spyOn(angularUtilServiceStub, 'createAngularComponentAppendToDom') + .mockReturnValue({ componentRef: { instance: jest.fn(), destroy: jest.fn() } } as any); const redrawSpy = jest.spyOn(plugin, 'redrawAllViewComponents'); plugin.init(gridStub); @@ -683,7 +719,9 @@ describe('SlickRowDetailView', () => { copyGridOptionsMock.rowDetailView!.process = undefined as any; jest.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock); - expect(() => plugin.init(gridStub)).toThrowError(`[Angular-Slickgrid] You need to provide a "process" function for the Row Detail Extension to work properly`); + expect(() => plugin.init(gridStub)).toThrowError( + `[Angular-Slickgrid] You need to provide a "process" function for the Row Detail Extension to work properly` + ); }); it('should throw an error when creating with "register" and the row detail is without a "process" method defined', () => { @@ -691,8 +729,10 @@ describe('SlickRowDetailView', () => { copyGridOptionsMock.rowDetailView!.process = undefined as any; jest.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock); - expect(() => plugin.register()).toThrowError(`[Angular-Slickgrid] You need to provide a "process" function for the Row Detail Extension to work properly`); + expect(() => plugin.register()).toThrowError( + `[Angular-Slickgrid] You need to provide a "process" function for the Row Detail Extension to work properly` + ); }); }); }); -}); \ No newline at end of file +}); diff --git a/src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts b/src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts index 656a88382..f27c6f731 100644 --- a/src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts +++ b/src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts @@ -1,6 +1,19 @@ import type { ApplicationRef, ComponentRef, Type, ViewContainerRef } from '@angular/core'; -import type { EventSubscription, OnBeforeRowDetailToggleArgs, OnRowBackToViewportRangeArgs, RxJsFacade, SlickEventData, SlickEventHandler, SlickGrid } from '@slickgrid-universal/common'; -import { addToArrayWhenNotExists, castObservableToPromise, SlickRowSelectionModel, unsubscribeAll } from '@slickgrid-universal/common'; +import type { + EventSubscription, + OnBeforeRowDetailToggleArgs, + OnRowBackToViewportRangeArgs, + RxJsFacade, + SlickEventData, + SlickEventHandler, + SlickGrid, +} from '@slickgrid-universal/common'; +import { + addToArrayWhenNotExists, + castObservableToPromise, + SlickRowSelectionModel, + unsubscribeAll, +} from '@slickgrid-universal/common'; import type { EventPubSubService } from '@slickgrid-universal/event-pub-sub'; import { SlickRowDetailView as UniversalSlickRowDetailView } from '@slickgrid-universal/row-detail-view-plugin'; import { Observable, type Subject } from 'rxjs'; @@ -30,7 +43,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { protected readonly appRef: ApplicationRef, protected readonly eventPubSubService: EventPubSubService, protected readonly gridContainerElement: HTMLDivElement, - protected rxjs?: RxJsFacade, + protected rxjs?: RxJsFacade ) { super(eventPubSubService); } @@ -95,10 +108,12 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { if (typeof this.gridOptions.rowDetailView?.process === 'function') { // we need to keep the user "process" method and replace it with our own execution method // we do this because when we get the item detail, we need to call "onAsyncResponse.notify" for the plugin to work - this._userProcessFn = this.gridOptions.rowDetailView.process as (item: any) => Promise; // keep user's process method - this.addonOptions.process = (item) => this.onProcessing(item); // replace process method & run our internal one + this._userProcessFn = this.gridOptions.rowDetailView.process as (item: any) => Promise; // keep user's process method + this.addonOptions.process = (item) => this.onProcessing(item); // replace process method & run our internal one } else { - throw new Error('[Angular-Slickgrid] You need to provide a "process" function for the Row Detail Extension to work properly'); + throw new Error( + '[Angular-Slickgrid] You need to provide a "process" function for the Row Detail Extension to work properly' + ); } if (this._grid && this.gridOptions?.rowDetailView) { @@ -106,11 +121,15 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { // when those are Angular View/ViewModel, we need to create View Component & provide the html containers to the Plugin (preTemplate/postTemplate methods) if (!this.gridOptions.rowDetailView.preTemplate) { this._preloadComponent = this.gridOptions?.rowDetailView?.preloadComponent; - this.addonOptions.preTemplate = () => this._grid.sanitizeHtmlString(`
    `) as string; + this.addonOptions.preTemplate = () => + this._grid.sanitizeHtmlString(`
    `) as string; } if (!this.gridOptions.rowDetailView.postTemplate) { this._viewComponent = this.gridOptions?.rowDetailView?.viewComponent; - this.addonOptions.postTemplate = (itemDetail: any) => this._grid.sanitizeHtmlString(`
    `) as string; + this.addonOptions.postTemplate = (itemDetail: any) => + this._grid.sanitizeHtmlString( + `
    ` + ) as string; } // this also requires the Row Selection Model to be registered as well @@ -145,16 +164,19 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { } if (this.onAfterRowDetailToggle) { - this.eventHandler.subscribe(this.onAfterRowDetailToggle, (e: any, args: { grid: SlickGrid; item: any; expandedRows: Array; }) => { - // display preload template & re-render all the other Detail Views after toggling - // the preload View will eventually go away once the data gets loaded after the "onAsyncEndUpdate" event - this.renderPreloadView(); - this.renderAllViewComponents(); - - if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAfterRowDetailToggle === 'function') { - this.rowDetailViewOptions.onAfterRowDetailToggle(e, args); + this.eventHandler.subscribe( + this.onAfterRowDetailToggle, + (e: any, args: { grid: SlickGrid; item: any; expandedRows: Array }) => { + // display preload template & re-render all the other Detail Views after toggling + // the preload View will eventually go away once the data gets loaded after the "onAsyncEndUpdate" event + this.renderPreloadView(); + this.renderAllViewComponents(); + + if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAfterRowDetailToggle === 'function') { + this.rowDetailViewOptions.onAfterRowDetailToggle(e, args); + } } - }); + ); } if (this.onBeforeRowDetailToggle) { @@ -204,8 +226,13 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { // redraw all Views whenever certain events are triggered this._subscriptions.push( - this.eventPubSubService?.subscribe(['onFilterChanged', 'onGridMenuColumnsChanged', 'onColumnPickerColumnsChanged'], this.redrawAllViewComponents.bind(this)), - this.eventPubSubService?.subscribe(['onGridMenuClearAllFilters', 'onGridMenuClearAllSorting'], () => window.setTimeout(() => this.redrawAllViewComponents())), + this.eventPubSubService?.subscribe( + ['onFilterChanged', 'onGridMenuColumnsChanged', 'onColumnPickerColumnsChanged'], + this.redrawAllViewComponents.bind(this) + ), + this.eventPubSubService?.subscribe(['onGridMenuClearAllFilters', 'onGridMenuClearAllSorting'], () => + window.setTimeout(() => this.redrawAllViewComponents()) + ) ); } } @@ -238,25 +265,36 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { /** Render (or re-render) the View Component (Row Detail) */ renderPreloadView() { - const containerElements = this.gridContainerElement.getElementsByClassName(`${PRELOAD_CONTAINER_PREFIX}`) as HTMLCollectionOf; + const containerElements = this.gridContainerElement.getElementsByClassName( + `${PRELOAD_CONTAINER_PREFIX}` + ) as HTMLCollectionOf; if (this._preloadComponent && containerElements?.length >= 0) { - this.angularUtilService.createAngularComponentAppendToDom(this._preloadComponent, containerElements[containerElements.length - 1]); + this.angularUtilService.createAngularComponentAppendToDom( + this._preloadComponent, + containerElements[containerElements.length - 1] + ); } } /** Render (or re-render) the View Component (Row Detail) */ renderViewModel(item: any): CreatedView | undefined { - const containerElements = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`) as HTMLCollectionOf; + const containerElements = this.gridContainerElement.getElementsByClassName( + `${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}` + ) as HTMLCollectionOf; if (this._viewComponent && containerElements?.length > 0) { - const componentOutput = this.angularUtilService.createAngularComponentAppendToDom(this._viewComponent, containerElements[containerElements.length - 1], { - model: item, - addon: this, - grid: this._grid, - dataView: this.dataView, - parent: this.rowDetailViewOptions?.parent, - }); + const componentOutput = this.angularUtilService.createAngularComponentAppendToDom( + this._viewComponent, + containerElements[containerElements.length - 1], + { + model: item, + addon: this, + grid: this._grid, + dataView: this.dataView, + parent: this.rowDetailViewOptions?.parent, + } + ); if (componentOutput?.componentRef) { - const viewObj = this._views.find(obj => obj.id === item[this.datasetIdPropName]); + const viewObj = this._views.find((obj) => obj.id === item[this.datasetIdPropName]); if (viewObj) { viewObj.componentRef = componentOutput.componentRef; } @@ -306,7 +344,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { if (this.datasetIdPropName in response) { awaitedItemDetail = response; // from Promise - } else if (response && response instanceof Observable || response instanceof Promise) { + } else if ((response && response instanceof Observable) || response instanceof Promise) { awaitedItemDetail = await castObservableToPromise(this.rxjs as RxJsFacade, response); // from Angular-http-client } @@ -326,13 +364,13 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { * if it's expanding we will add it to our View Components reference array if we don't already have it * or if it's collapsing we will remove it from our View Components reference array */ - protected handleOnBeforeRowDetailToggle(_e: SlickEventData, args: { grid: SlickGrid; item: any; }) { + protected handleOnBeforeRowDetailToggle(_e: SlickEventData, args: { grid: SlickGrid; item: any }) { // expanding if (args?.item?.__collapsed) { // expanding row detail const viewInfo: CreatedView = { id: args.item[this.datasetIdPropName], - dataContext: args.item + dataContext: args.item, }; const idPropName = this.gridOptions.datasetIdPropertyName || 'id'; addToArrayWhenNotExists(this._views, viewInfo, idPropName); diff --git a/src/app/modules/angular-slickgrid/global-grid-options.ts b/src/app/modules/angular-slickgrid/global-grid-options.ts index 79aaa6101..19a47e9c6 100644 --- a/src/app/modules/angular-slickgrid/global-grid-options.ts +++ b/src/app/modules/angular-slickgrid/global-grid-options.ts @@ -1,4 +1,13 @@ -import { type Column, DelimiterType, EventNamingStyle, FileType, Filters, type GridOption as GridOptionUniversal, OperatorType, type TreeDataOption } from '@slickgrid-universal/common'; +import { + type Column, + DelimiterType, + EventNamingStyle, + FileType, + Filters, + type GridOption as GridOptionUniversal, + OperatorType, + type TreeDataOption, +} from '@slickgrid-universal/common'; import type { GridOption, RowDetailView } from './models/index'; /** Global Grid Options Defaults */ @@ -13,16 +22,16 @@ export const GlobalGridOptions: Partial = { bottomPadding: 20, minHeight: 180, minWidth: 300, - rightPadding: 0 + rightPadding: 0, }, cellHighlightCssClass: 'slick-cell-modified', checkboxSelector: { - cssClass: 'slick-cell-checkboxsel' + cssClass: 'slick-cell-checkboxsel', }, columnPicker: { hideForceFitButton: false, hideSyncResizeButton: true, - headerColumnValueExtractor: pickerHeaderColumnValueExtractor + headerColumnValueExtractor: pickerHeaderColumnValueExtractor, }, cellMenu: { autoAdjustDrop: true, @@ -71,13 +80,13 @@ export const GlobalGridOptions: Partial = { itemsSelectedKey: 'ITEMS_SELECTED', of: 'of', ofKey: 'OF', - } + }, }, dataView: { // when enabled, this will preserve the row selection even after filtering/sorting/grouping syncGridSelection: { preserveHidden: false, - preserveHiddenOnSelectionChange: true + preserveHiddenOnSelectionChange: true, }, syncGridSelectionWithBackendService: false, // but disable it when using backend services }, @@ -136,7 +145,7 @@ export const GlobalGridOptions: Partial = { groupingColumnHeaderTitle: 'Group By', groupingAggregatorRowText: '', sanitizeDataExport: false, - useUtf8WithBom: true + useUtf8WithBom: true, }, filterTypingDebounce: 0, forceFitColumns: false, @@ -181,7 +190,7 @@ export const GlobalGridOptions: Partial = { menuWidth: 16, resizeOnShowHeaderRow: true, subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270', - headerColumnValueExtractor: pickerHeaderColumnValueExtractor + headerColumnValueExtractor: pickerHeaderColumnValueExtractor, }, headerMenu: { autoAlign: true, @@ -211,7 +220,7 @@ export const GlobalGridOptions: Partial = { pagination: { pageSizes: [10, 15, 20, 25, 30, 40, 50, 75, 100], pageSize: 25, - totalItems: 0 + totalItems: 0, }, // technically speaking the Row Detail requires the process & viewComponent but we'll ignore it just to set certain options rowDetailView: { @@ -242,7 +251,7 @@ export const GlobalGridOptions: Partial = { treeDataOptions: { exportIndentMarginLeft: 5, exportIndentationLeadingChar: '͏͏͏͏͏͏͏͏͏·', - } as unknown as TreeDataOption + } as unknown as TreeDataOption, }; /** @@ -261,4 +270,4 @@ function pickerHeaderColumnValueExtractor(column: Column, gridOptions?: GridOpti return headerGroup + columnGroupSeparator + colName; } return colName; -} \ No newline at end of file +} diff --git a/src/app/modules/angular-slickgrid/models/angularGridInstance.interface.ts b/src/app/modules/angular-slickgrid/models/angularGridInstance.interface.ts index 7d7a56d0d..5481ba6ff 100644 --- a/src/app/modules/angular-slickgrid/models/angularGridInstance.interface.ts +++ b/src/app/modules/angular-slickgrid/models/angularGridInstance.interface.ts @@ -13,7 +13,7 @@ import type { SlickDataView, SlickGrid, SortService, - TreeDataService + TreeDataService, } from '@slickgrid-universal/common'; import type { EventPubSubService } from '@slickgrid-universal/event-pub-sub'; diff --git a/src/app/modules/angular-slickgrid/models/externalTestingDependencies.interface.ts b/src/app/modules/angular-slickgrid/models/externalTestingDependencies.interface.ts index 5906fd0eb..c8297325b 100644 --- a/src/app/modules/angular-slickgrid/models/externalTestingDependencies.interface.ts +++ b/src/app/modules/angular-slickgrid/models/externalTestingDependencies.interface.ts @@ -13,7 +13,7 @@ import type { RxJsFacade, SharedService, SortService, - TreeDataService + TreeDataService, } from '@slickgrid-universal/common'; import type { EventPubSubService } from '@slickgrid-universal/event-pub-sub'; @@ -34,4 +34,4 @@ export interface ExternalTestingDependencies { sharedService?: SharedService; sortService?: SortService; treeDataService?: TreeDataService; -} \ No newline at end of file +} diff --git a/src/app/modules/angular-slickgrid/models/index.ts b/src/app/modules/angular-slickgrid/models/index.ts index 2cc4858cc..a86f8c83c 100644 --- a/src/app/modules/angular-slickgrid/models/index.ts +++ b/src/app/modules/angular-slickgrid/models/index.ts @@ -2,4 +2,4 @@ export * from './angularComponentOutput.interface'; export * from './angularGridInstance.interface'; export * from './externalTestingDependencies.interface'; export * from './gridOption.interface'; -export * from './rowDetailView.interface'; \ No newline at end of file +export * from './rowDetailView.interface'; diff --git a/src/app/modules/angular-slickgrid/modules/angular-slickgrid.module.ts b/src/app/modules/angular-slickgrid/modules/angular-slickgrid.module.ts index 487157421..f06e3b6bb 100644 --- a/src/app/modules/angular-slickgrid/modules/angular-slickgrid.module.ts +++ b/src/app/modules/angular-slickgrid/modules/angular-slickgrid.module.ts @@ -8,16 +8,9 @@ import { AngularUtilService } from '../services/angularUtil.service'; import { ContainerService } from '../services/container.service'; @NgModule({ - imports: [ - CommonModule, - TranslateModule - ], - declarations: [ - AngularSlickgridComponent, - ], - exports: [ - AngularSlickgridComponent, - ] + imports: [CommonModule, TranslateModule], + declarations: [AngularSlickgridComponent], + exports: [AngularSlickgridComponent], }) export class AngularSlickgridModule { static forRoot(config: GridOption = {}): ModuleWithProviders { @@ -28,7 +21,7 @@ export class AngularSlickgridModule { { provide: 'externalService', useValue: null }, AngularUtilService, ContainerService, - ] + ], }; } } diff --git a/src/app/modules/angular-slickgrid/services/__tests__/angularUtilService.spec.ts b/src/app/modules/angular-slickgrid/services/__tests__/angularUtilService.spec.ts index 743b6fb77..38c40586c 100644 --- a/src/app/modules/angular-slickgrid/services/__tests__/angularUtilService.spec.ts +++ b/src/app/modules/angular-slickgrid/services/__tests__/angularUtilService.spec.ts @@ -11,10 +11,12 @@ const viewContainerRefStub = { } as unknown as ViewContainerRef; @Component({ template: `

    Loading...

    ` }) -class TestPreloadComponent { } +class TestPreloadComponent {} @Component({ template: `

    {{ title }}

    ` }) -class TestComponent { title = ''; } +class TestComponent { + title = ''; +} describe('AngularUtilService', () => { let service: AngularUtilService; @@ -27,11 +29,8 @@ describe('AngularUtilService', () => { await TestBed.configureTestingModule({ declarations: [TestPreloadComponent], - providers: [ - AngularUtilService, - { provide: ViewContainerRef, useValue: viewContainerRefStub }, - ], - teardown: { destroyAfterEach: false } + providers: [AngularUtilService, { provide: ViewContainerRef, useValue: viewContainerRefStub }], + teardown: { destroyAfterEach: false }, }); service = TestBed.inject(AngularUtilService); }); @@ -86,7 +85,7 @@ describe('AngularUtilService', () => { h1Mock.textContent = titleMock; mockComponentFactory.hostView.rootNodes[0] = h1Mock; mockComponentFactory.location = { - nativeElement: h1Mock + nativeElement: h1Mock, }; // @ts-ignore diff --git a/src/app/modules/angular-slickgrid/services/__tests__/translater.service.spec.ts b/src/app/modules/angular-slickgrid/services/__tests__/translater.service.spec.ts index 21e312b94..63d57b786 100644 --- a/src/app/modules/angular-slickgrid/services/__tests__/translater.service.spec.ts +++ b/src/app/modules/angular-slickgrid/services/__tests__/translater.service.spec.ts @@ -11,7 +11,7 @@ describe('Translater Service', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [TranslateModule.forRoot()], - teardown: { destroyAfterEach: false } + teardown: { destroyAfterEach: false }, }); translate = TestBed.inject(TranslateService); service = new TranslaterService(translate); diff --git a/src/app/modules/angular-slickgrid/services/__tests__/utilities.spec.ts b/src/app/modules/angular-slickgrid/services/__tests__/utilities.spec.ts index 38a8b562d..dd6b4f04f 100644 --- a/src/app/modules/angular-slickgrid/services/__tests__/utilities.spec.ts +++ b/src/app/modules/angular-slickgrid/services/__tests__/utilities.spec.ts @@ -1,7 +1,7 @@ import 'jest-extended'; import { of, Subscription } from 'rxjs'; -import { unsubscribeAllObservables, } from '../utilities'; +import { unsubscribeAllObservables } from '../utilities'; describe('Service/Utilies', () => { describe('unsubscribeAllObservables method', () => { diff --git a/src/app/modules/angular-slickgrid/services/angularUtil.service.ts b/src/app/modules/angular-slickgrid/services/angularUtil.service.ts index 1dd68fd4a..a2c4086ba 100644 --- a/src/app/modules/angular-slickgrid/services/angularUtil.service.ts +++ b/src/app/modules/angular-slickgrid/services/angularUtil.service.ts @@ -3,7 +3,6 @@ import type { EmbeddedViewRef, EnvironmentInjector, Injector, NgModuleRef, Type import type { AngularComponentOutput } from '../models/angularComponentOutput.interface'; - interface CreateComponentOption { index?: number; injector?: Injector; @@ -14,10 +13,14 @@ interface CreateComponentOption { @Injectable() export class AngularUtilService { - - constructor(private vcr: ViewContainerRef) { } - - createInteractiveAngularComponent(component: Type, targetElement: Element, data?: any, createCompOptions?: CreateComponentOption): AngularComponentOutput { + constructor(private vcr: ViewContainerRef) {} + + createInteractiveAngularComponent( + component: Type, + targetElement: Element, + data?: any, + createCompOptions?: CreateComponentOption + ): AngularComponentOutput { // Create a component reference from the component const componentRef = this.vcr.createComponent(component, createCompOptions); @@ -28,7 +31,7 @@ export class AngularUtilService { // Get DOM element from component let domElem: HTMLElement | null = null; - const viewRef = (componentRef.hostView as EmbeddedViewRef); + const viewRef = componentRef.hostView as EmbeddedViewRef; if (viewRef && Array.isArray(viewRef.rootNodes) && viewRef.rootNodes[0]) { domElem = viewRef.rootNodes[0] as HTMLElement; @@ -50,7 +53,12 @@ export class AngularUtilService { * @param {CreateComponentOption} [createCompOptions] * @returns */ - createAngularComponent(component: Type, targetElement?: Element, data?: any, createCompOptions?: CreateComponentOption): AngularComponentOutput { + createAngularComponent( + component: Type, + targetElement?: Element, + data?: any, + createCompOptions?: CreateComponentOption + ): AngularComponentOutput { // Create a component reference from the component const componentRef = this.vcr.createComponent(component, createCompOptions); @@ -66,7 +74,7 @@ export class AngularUtilService { // Get DOM element from component let domElem: HTMLElement | null = null; - const viewRef = (componentRef.hostView as EmbeddedViewRef); + const viewRef = componentRef.hostView as EmbeddedViewRef; // get DOM element from the new dynamic Component, make sure this is read after any data and detectChanges() if (viewRef && Array.isArray(viewRef.rootNodes) && viewRef.rootNodes[0]) { @@ -90,7 +98,12 @@ export class AngularUtilService { * @param {CreateComponentOption} [createCompOptions] * @returns */ - createAngularComponentAppendToDom(component: Type, targetElement?: Element, data?: any, createCompOptions?: CreateComponentOption): AngularComponentOutput { + createAngularComponentAppendToDom( + component: Type, + targetElement?: Element, + data?: any, + createCompOptions?: CreateComponentOption + ): AngularComponentOutput { const componentOutput = this.createAngularComponent(component, targetElement, data, createCompOptions); // Append DOM element to the HTML element specified diff --git a/src/app/modules/angular-slickgrid/services/container.service.ts b/src/app/modules/angular-slickgrid/services/container.service.ts index 3c4a7b347..d43bc7f72 100644 --- a/src/app/modules/angular-slickgrid/services/container.service.ts +++ b/src/app/modules/angular-slickgrid/services/container.service.ts @@ -6,7 +6,7 @@ export class ContainerService implements UniversalContainerService { dependencies: ContainerInstance[] = []; get(key: string): T | null { - const dependency = this.dependencies.find(dep => dep.key === key); + const dependency = this.dependencies.find((dep) => dep.key === key); if (dependency?.instance) { return dependency.instance; } @@ -18,7 +18,7 @@ export class ContainerService implements UniversalContainerService { } registerInstance(key: string, instance: any) { - const dependency = this.dependencies.some(dep => dep.key === key); + const dependency = this.dependencies.some((dep) => dep.key === key); if (!dependency) { this.dependencies.push({ key, instance }); } diff --git a/src/app/modules/angular-slickgrid/services/translater.service.ts b/src/app/modules/angular-slickgrid/services/translater.service.ts index bb91e5138..951725f8e 100644 --- a/src/app/modules/angular-slickgrid/services/translater.service.ts +++ b/src/app/modules/angular-slickgrid/services/translater.service.ts @@ -8,7 +8,7 @@ import { TranslaterService as UniversalTranslateService } from '@slickgrid-unive */ @Injectable() export class TranslaterService implements UniversalTranslateService { - constructor(@Optional() private readonly translateService: TranslateService) { } + constructor(@Optional() private readonly translateService: TranslateService) {} /** * Method to return the current language used by the App diff --git a/src/app/modules/angular-slickgrid/services/utilities.ts b/src/app/modules/angular-slickgrid/services/utilities.ts index 913a3d267..9fb89c8a6 100644 --- a/src/app/modules/angular-slickgrid/services/utilities.ts +++ b/src/app/modules/angular-slickgrid/services/utilities.ts @@ -3,7 +3,7 @@ * It will return an empty array if it all went well * @param subscriptions */ -export function unsubscribeAllObservables(subscriptions: Array<{ unsubscribe: ()=> void; }>): any[] { +export function unsubscribeAllObservables(subscriptions: Array<{ unsubscribe: () => void }>): any[] { if (Array.isArray(subscriptions)) { let subscription = subscriptions.pop(); while (subscription) { diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 3612073bc..c9669790b 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,3 +1,3 @@ export const environment = { - production: true + production: true, }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index b7f639aec..cf6bba0df 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -4,5 +4,5 @@ // The list of which env maps to which file can be found in `.angular-cli.json`. export const environment = { - production: false + production: false, }; diff --git a/src/index.html b/src/index.html index 30ec99f6b..37cce74af 100644 --- a/src/index.html +++ b/src/index.html @@ -1,18 +1,16 @@ + + + Datagrid + - - - Datagrid - - - - - - - - - - + + + + + + + diff --git a/src/main.ts b/src/main.ts index 05da7fb0f..94d855220 100644 --- a/src/main.ts +++ b/src/main.ts @@ -10,4 +10,4 @@ if (environment.production) { platformBrowserDynamic() .bootstrapModule(AppModule, { preserveWhitespaces: true }) // preserveWhitespaces is now default to False since Angular 6 - .catch(err => console.log(err)); + .catch((err) => console.log(err)); diff --git a/test/cypress/e2e/example01.cy.ts b/test/cypress/e2e/example01.cy.ts index e995fc792..809f8dfd6 100644 --- a/test/cypress/e2e/example01.cy.ts +++ b/test/cypress/e2e/example01.cy.ts @@ -7,17 +7,17 @@ describe('Example 1 - Basic Grids', () => { }); it('should have 2 grids of size 800 by 225px', () => { - cy.get('#slickGridContainer-grid1') - .should('have.css', 'width', '800px'); + cy.get('#slickGridContainer-grid1').should('have.css', 'width', '800px'); - cy.get('#slickGridContainer-grid1 > .slickgrid-container') - .should($el => expect(parseInt(`${$el.height()}`, 10)).to.eq(225)); + cy.get('#slickGridContainer-grid1 > .slickgrid-container').should(($el) => + expect(parseInt(`${$el.height()}`, 10)).to.eq(225) + ); - cy.get('#slickGridContainer-grid2') - .should('have.css', 'width', '800px'); + cy.get('#slickGridContainer-grid2').should('have.css', 'width', '800px'); - cy.get('#slickGridContainer-grid2 > .slickgrid-container') - .should($el => expect(parseInt(`${$el.height()}`, 10)).to.eq(225)); + cy.get('#slickGridContainer-grid2 > .slickgrid-container').should(($el) => + expect(parseInt(`${$el.height()}`, 10)).to.eq(225) + ); }); it('should have exact column titles on 1st grid', () => { @@ -44,11 +44,7 @@ describe('Example 1 - Basic Grids', () => { .should('contain', 'Sort Descending') .click(); - cy.get('.slick-row') - .first() - .children('.slick-cell') - .first() - .should('contain', 'Task 994'); + cy.get('.slick-row').first().children('.slick-cell').first().should('contain', 'Task 994'); }); it('should hover over the "Title" column of 2nd grid and click on "Sort Ascending" command', () => { @@ -75,9 +71,7 @@ describe('Example 1 - Basic Grids', () => { if (index > tasks.length - 1) { return; } - cy.wrap($row).children('.slick-cell') - .first() - .should('contain', tasks[index]); + cy.wrap($row).children('.slick-cell').first().should('contain', tasks[index]); }); }); @@ -109,10 +103,7 @@ describe('Example 1 - Basic Grids', () => { }); it('should clear sorting of grid2 using the Grid Menu "Clear all Sorting" command', () => { - cy.get('#grid2') - .find('button.slick-grid-menu-button') - .trigger('click') - .click(); + cy.get('#grid2').find('button.slick-grid-menu-button').trigger('click').click(); }); it('should have no sorting in 2nd grid (back to default sorted by id)', () => { @@ -126,20 +117,11 @@ describe('Example 1 - Basic Grids', () => { expect(gridUid).to.not.be.null; }) .then(() => { - cy.get(`.slick-grid-menu.${gridUid}`) - .find('.slick-menu-item') - .first() - .find('span') - .contains('Clear all Sorting') - .click(); + cy.get(`.slick-grid-menu.${gridUid}`).find('.slick-menu-item').first().find('span').contains('Clear all Sorting').click(); - cy.get('#grid2') - .find('.slick-sort-indicator-asc') - .should('have.length', 0); + cy.get('#grid2').find('.slick-sort-indicator-asc').should('have.length', 0); - cy.get('#grid2') - .find('.slick-sort-indicator-desc') - .should('have.length', 0); + cy.get('#grid2').find('.slick-sort-indicator-desc').should('have.length', 0); cy.get('#grid2') .find('.slick-row') @@ -147,61 +129,44 @@ describe('Example 1 - Basic Grids', () => { if (index > grid2Tasks.length - 1) { return; } - cy.wrap($row).children('.slick-cell') - .first() - .should('contain', grid2Tasks[index]); + cy.wrap($row).children('.slick-cell').first().should('contain', grid2Tasks[index]); }); }); }); it('should retain sorting in 1st grid', () => { - cy.get('#grid1') - .find('.slick-sort-indicator-desc') - .should('have.length', 1); + cy.get('#grid1').find('.slick-sort-indicator-desc').should('have.length', 1); }); it('should have Pagination displayed and set on Grid2', () => { cy.get('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('1')); + .then((pageNumber) => expect(pageNumber).to.eq('1')); - cy.get('[data-test=page-count]') - .contains('199'); + cy.get('[data-test=page-count]').contains('199'); - cy.get('[data-test=item-from]') - .contains('1'); + cy.get('[data-test=item-from]').contains('1'); - cy.get('[data-test=item-to]') - .contains('5'); + cy.get('[data-test=item-to]').contains('5'); - cy.get('[data-test=total-items]') - .contains('995'); + cy.get('[data-test=total-items]').contains('995'); }); it('should change Page Number 52 and expect the Pagination to have correct values', () => { - cy.get('[data-test=page-number-input]') - .clear() - .type('52') - .type('{enter}'); + cy.get('[data-test=page-number-input]').clear().type('52').type('{enter}'); - cy.get('[data-test=page-count]') - .contains('199'); + cy.get('[data-test=page-count]').contains('199'); - cy.get('[data-test=item-from]') - .contains('256'); + cy.get('[data-test=item-from]').contains('256'); - cy.get('[data-test=item-to]') - .contains('260'); + cy.get('[data-test=item-to]').contains('260'); - cy.get('[data-test=total-items]') - .contains('995'); + cy.get('[data-test=total-items]').contains('995'); }); it('should open the Grid Menu on 1st Grid and expect all Columns to be checked', () => { let gridUid = ''; - cy.get('#grid1') - .find('button.slick-grid-menu-button') - .click({ force: true }); + cy.get('#grid1').find('button.slick-grid-menu-button').click({ force: true }); cy.get('#grid1') .should(($grid) => { @@ -234,10 +199,7 @@ describe('Example 1 - Basic Grids', () => { .should('contain', 'Title') .click({ force: true }); - cy.get('#grid1') - .get('.slick-grid-menu:visible') - .find('.close') - .click({ force: true }); + cy.get('#grid1').get('.slick-grid-menu:visible').find('.close').click({ force: true }); cy.get('#grid1') .find('.slick-header-columns') @@ -247,9 +209,7 @@ describe('Example 1 - Basic Grids', () => { it('should open the Grid Menu off 2nd Grid and expect all Columns to still be all checked', () => { let gridUid = ''; - cy.get('#grid2') - .find('button.slick-grid-menu-button') - .click({ force: true }); + cy.get('#grid2').find('button.slick-grid-menu-button').click({ force: true }); cy.get('#grid2') .should(($grid) => { @@ -282,10 +242,7 @@ describe('Example 1 - Basic Grids', () => { .should('contain', '% Complete') .click({ force: true }); - cy.get('#grid2') - .get('.slick-grid-menu:visible') - .find('.close') - .click({ force: true }); + cy.get('#grid2').get('.slick-grid-menu:visible').find('.close').click({ force: true }); cy.get('#grid2') .find('.slick-header-columns') @@ -294,9 +251,7 @@ describe('Example 1 - Basic Grids', () => { }); it('should go back to 1st Grid and open its Grid Menu and we expect this grid to stil have the "Title" column be hidden (unchecked)', () => { - cy.get('#grid1') - .find('button.slick-grid-menu-button') - .click({ force: true }); + cy.get('#grid1').find('button.slick-grid-menu-button').click({ force: true }); cy.get('.slick-column-picker-list') .children('li') @@ -324,10 +279,7 @@ describe('Example 1 - Basic Grids', () => { .should('contain', 'Start') .click({ force: true }); - cy.get('#grid1') - .get('.slick-grid-menu:visible') - .find('.close') - .click({ force: true }); + cy.get('#grid1').get('.slick-grid-menu:visible').find('.close').click({ force: true }); cy.get('#grid1') .find('.slick-header-columns') @@ -336,12 +288,7 @@ describe('Example 1 - Basic Grids', () => { }); it('should open Column Picker of 2nd Grid and show the "% Complete" column back to visible', () => { - cy.get('#grid2') - .find('.slick-header-column') - .first() - .trigger('mouseover') - .trigger('contextmenu') - .invoke('show'); + cy.get('#grid2').find('.slick-header-column').first().trigger('mouseover').trigger('contextmenu').invoke('show'); cy.get('.slick-column-picker') .find('.slick-column-picker-list') @@ -368,18 +315,12 @@ describe('Example 1 - Basic Grids', () => { } }); - cy.get('#grid2') - .get('.slick-column-picker:visible') - .find('.close') - .trigger('click') - .click(); + cy.get('#grid2').get('.slick-column-picker:visible').find('.close').trigger('click').click(); }); it('should open the Grid Menu on 2nd Grid and expect all Columns to be checked', () => { let gridUid = ''; - cy.get('#grid2') - .find('button.slick-grid-menu-button') - .click({ force: true }); + cy.get('#grid2').find('button.slick-grid-menu-button').click({ force: true }); cy.get('#grid2') .should(($grid) => { @@ -413,9 +354,7 @@ describe('Example 1 - Basic Grids', () => { it('should open the Grid Menu on 1st Grid and also expect to only have 4 columns checked (visible)', () => { let gridUid = ''; - cy.get('#grid1') - .find('button.slick-grid-menu-button') - .click({ force: true }); + cy.get('#grid1').find('button.slick-grid-menu-button').click({ force: true }); cy.get('#grid1') .should(($grid) => { @@ -441,9 +380,6 @@ describe('Example 1 - Basic Grids', () => { }); }); - cy.get('#grid1') - .get('.slick-grid-menu:visible') - .find('.close') - .click({ force: true }); + cy.get('#grid1').get('.slick-grid-menu:visible').find('.close').click({ force: true }); }); }); diff --git a/test/cypress/e2e/example02.cy.ts b/test/cypress/e2e/example02.cy.ts index 7d0db8321..2c0ad89b0 100644 --- a/test/cypress/e2e/example02.cy.ts +++ b/test/cypress/e2e/example02.cy.ts @@ -9,39 +9,52 @@ describe('Example 2 - Grid with Formatters', () => { }); it('should show a custom text in the grid footer left portion', () => { - cy.get('#slickGridContainer-grid2') - .find('.slick-custom-footer') - .find('.left-footer') - .contains('custom footer text'); + cy.get('#slickGridContainer-grid2').find('.slick-custom-footer').find('.left-footer').contains('custom footer text'); }); it('should have some metrics shown in the grid footer', () => { cy.get('#slickGridContainer-grid2') .find('.slick-custom-footer') .find('.right-footer') - .should($span => { + .should(($span) => { const text = removeExtraSpaces($span.text()); // remove all white spaces expect(text).to.eq('500 items'); }); }); it('should expect "Effort Driven" 1st cell to include fire icon', () => { - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-fire.red').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`) + .find('.mdi.mdi-fire.red') + .should('have.length', 1); }); it('should expect "Effort Driven" 2nd cell to include a snowflake icon', () => { - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-snowflake').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`) + .find('.mdi.mdi-snowflake') + .should('have.length', 1); }); it('should click on a "Completed" cell and expect it to toggle to checked', () => { - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).find('.mdi.mdi-circle').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`) + .find('.mdi.mdi-circle') + .should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).find('.mdi.mdi-circle').should('have.length', 0); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).find('.mdi.mdi-check-circle').should('have.length', 1); - - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).find('.mdi.mdi-circle').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`) + .find('.mdi.mdi-circle') + .should('have.length', 0); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`) + .find('.mdi.mdi-check-circle') + .should('have.length', 1); + + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`) + .find('.mdi.mdi-circle') + .should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).find('.mdi.mdi-circle').should('have.length', 0); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).find('.mdi.mdi-check-circle').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`) + .find('.mdi.mdi-circle') + .should('have.length', 0); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`) + .find('.mdi.mdi-check-circle') + .should('have.length', 1); }); }); diff --git a/test/cypress/e2e/example03.cy.ts b/test/cypress/e2e/example03.cy.ts index 9396f8ae8..155fc4d29 100644 --- a/test/cypress/e2e/example03.cy.ts +++ b/test/cypress/e2e/example03.cy.ts @@ -1,9 +1,19 @@ describe('Example 3 - Grid with Editors', () => { const GRID_ROW_HEIGHT = 35; const fullTitles = [ - '', '', 'Title', 'Title, Custom Editor', 'Duration (days)', '% Complete', - 'Start', 'Finish', 'City of Origin', 'Country of Origin', 'Country of Origin Name', - 'Effort Driven', 'Prerequisites', + '', + '', + 'Title', + 'Title, Custom Editor', + 'Duration (days)', + '% Complete', + 'Start', + 'Finish', + 'City of Origin', + 'Country of Origin', + 'Country of Origin Name', + 'Effort Driven', + 'Prerequisites', ]; it('should display Example title', () => { @@ -19,9 +29,10 @@ describe('Example 3 - Grid with Editors', () => { }); it('should be able to change Title with Custom Editor and expect to save when changing the value and then mouse clicking on a different cell', () => { - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'Task 1').click(); - cy.get('input[type=text].editor-text') - .type('Task 8888'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`) + .should('contain', 'Task 1') + .click(); + cy.get('input[type=text].editor-text').type('Task 8888'); // mouse click on next cell on the right & expect a save cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(4)`).click(); @@ -31,20 +42,19 @@ describe('Example 3 - Grid with Editors', () => { it('should be able to undo the editor and expect it to be opened, then clicking on Escape should reveal the cell to have rolled back text of "Task 1"', () => { cy.get('[data-test="undo-btn"]').click(); - cy.get('input[type=text].editor-text') - .should('exist') - .type('{esc}'); + cy.get('input[type=text].editor-text').should('exist').type('{esc}'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'Task 1'); }); it('should enable "Auto Commit Edit"', () => { - cy.get('[data-test=auto-commit]') - .click(); + cy.get('[data-test=auto-commit]').click(); }); it('should be able to change all values of 3rd row', () => { - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 2').click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`) + .should('contain', 'Task 2') + .click(); // change Title & Custom Title cy.get('.editor-title > textarea').type('Task 2222'); @@ -54,16 +64,15 @@ describe('Example 3 - Grid with Editors', () => { // change duration cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).click(); - cy.get('.slider-editor input[type=range]').as('range') - .invoke('val', 25) - .trigger('change', { force: true }); + cy.get('.slider-editor input[type=range]').as('range').invoke('val', 25).trigger('change', { force: true }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).should('contain', '25'); // change % Complete cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(5)`).click(); cy.get('[data-name=editor-complete].ms-drop > ul > li > label:nth(5)').contains('95').click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(5)`) - .find('.percent-complete-bar[style="background: green; width: 95%;"]'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(5)`).find( + '.percent-complete-bar[style="background: green; width: 95%;"]' + ); // change Finish date cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(6)`).click(); @@ -83,15 +92,26 @@ describe('Example 3 - Grid with Editors', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(11)`).click(); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(11) > input.editor-checkbox.editor-effort-driven`).check(); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('top'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('top'); }); it('should dynamically add 2x new "Title" columns', () => { const updatedTitles = [ - '', '', 'Title', 'Title, Custom Editor', 'Duration (days)', '% Complete', - 'Start', 'Finish', 'City of Origin', 'Country of Origin', 'Country of Origin Name', - 'Effort Driven', 'Prerequisites', 'Title', 'Title' + '', + '', + 'Title', + 'Title, Custom Editor', + 'Duration (days)', + '% Complete', + 'Start', + 'Finish', + 'City of Origin', + 'Country of Origin', + 'Country of Origin Name', + 'Effort Driven', + 'Prerequisites', + 'Title', + 'Title', ]; cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 0'); @@ -107,9 +127,7 @@ describe('Example 3 - Grid with Editors', () => { .children() .each(($child, index) => expect($child.text()).to.eq(updatedTitles[index])); - cy.get('[data-test=add-title-column]') - .click() - .click(); + cy.get('[data-test=add-title-column]').click().click(); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 0'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', 'Task 0'); @@ -118,7 +136,9 @@ describe('Example 3 - Grid with Editors', () => { }); it('should be able to change value of 1st row "Title" column and expect same value set in all 3 "Title" columns', () => { - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 0').click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`) + .should('contain', 'Task 0') + .click(); // change Title & Custom Title cy.get('.editor-title > textarea').type('Task 0000'); @@ -128,16 +148,15 @@ describe('Example 3 - Grid with Editors', () => { // change duration cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).click(); - cy.get('.slider-editor input[type=range]').as('range') - .invoke('val', 50) - .trigger('change', { force: true }); + cy.get('.slider-editor input[type=range]').as('range').invoke('val', 50).trigger('change', { force: true }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '50'); // change % Complete cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).click(); cy.get('[data-name=editor-complete].ms-drop > ul > li > label:nth(5)').contains('95').click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`) - .find('.percent-complete-bar[style="background: green; width: 95%;"]'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).find( + '.percent-complete-bar[style="background: green; width: 95%;"]' + ); // change Finish date cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(6)`).click(); @@ -150,18 +169,17 @@ describe('Example 3 - Grid with Editors', () => { // change Effort Driven cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(11)`).click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(11) > input.editor-checkbox.editor-effort-driven`).check().blur(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(11) > input.editor-checkbox.editor-effort-driven`) + .check() + .blur(); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).click(); // the blur seems to not always work, so just click on another cell cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(11)`).find('.mdi-check.checkmark-icon'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('top'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('top'); }); it('should be able to filter and search "Task 2222" in the new column and expect only 1 row showing in the grid', () => { - cy.get('input.search-filter.filter-title1') - .type('Task 2222', { force: true }) - .should('have.value', 'Task 2222'); + cy.get('input.search-filter.filter-title1').type('Task 2222', { force: true }).should('have.value', 'Task 2222'); cy.get('.slick-row').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 2222'); @@ -186,9 +204,7 @@ describe('Example 3 - Grid with Editors', () => { }); it('should be able to dynamically remove last 2 added Title columns', () => { - cy.get('[data-test=remove-title-column]') - .click() - .click(); + cy.get('[data-test=remove-title-column]').click().click(); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 0'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(13)`).should('not.exist'); @@ -196,7 +212,9 @@ describe('Example 3 - Grid with Editors', () => { }); it('should be able to change values again of 1st row "Title" column and expect same value set in all 3 "Title" columns', () => { - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 0').click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`) + .should('contain', 'Task 0') + .click(); // change Title & Custom Title cy.get('.editor-title > textarea').type('Task 0000'); @@ -206,16 +224,15 @@ describe('Example 3 - Grid with Editors', () => { // change duration cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).click(); - cy.get('.slider-editor input[type=range]').as('range') - .invoke('val', 50) - .trigger('change', { force: true }); + cy.get('.slider-editor input[type=range]').as('range').invoke('val', 50).trigger('change', { force: true }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '50'); // change % Complete cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).click(); cy.get('[data-name=editor-complete].ms-drop > ul > li > label:nth(3)').contains('97').click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`) - .find('.percent-complete-bar[style="background: green; width: 97%;"]'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).find( + '.percent-complete-bar[style="background: green; width: 97%;"]' + ); // change Finish date cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(6)`).click(); @@ -224,12 +241,13 @@ describe('Example 3 - Grid with Editors', () => { // // change Effort Driven cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(11)`).click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(11) > input.editor-checkbox.editor-effort-driven`).uncheck(); + cy.get( + `[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(11) > input.editor-checkbox.editor-effort-driven` + ).uncheck(); }); it('should open the "Prerequisites" Filter then choose "Task 3", "Task 4" and "Task 8" from the list and expect to see 2 rows of data in the grid', () => { - cy.get('div.ms-filter.filter-prerequisites') - .trigger('click'); + cy.get('div.ms-filter.filter-prerequisites').trigger('click'); cy.get('.ms-drop') .contains(/^Task 3$/) // use regexp to avoid finding first Task 3 which is in fact Task 399 @@ -243,11 +261,9 @@ describe('Example 3 - Grid with Editors', () => { .contains(/^Task 8$/) .click(); - cy.get('.ms-ok-button') - .click(); + cy.get('.ms-ok-button').click(); - cy.get('.slick-row') - .should('have.length', 2); + cy.get('.slick-row').should('have.length', 2); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 4'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 8'); diff --git a/test/cypress/e2e/example04.cy.ts b/test/cypress/e2e/example04.cy.ts index 7fdcb1dd1..53ef138af 100644 --- a/test/cypress/e2e/example04.cy.ts +++ b/test/cypress/e2e/example04.cy.ts @@ -19,9 +19,7 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => { const presetUsDateShort = '4/20/25'; it('should have "Duration" fields within the inclusive range of the preset filters and be displayed in the Filter itself', () => { - cy.get('.ms-filter.search-filter.filter-duration.filled') - .find('.ms-choice') - .contains('98, 10'); + cy.get('.ms-filter.search-filter.filter-duration.filled').find('.ms-choice').contains('98, 10'); cy.get('#grid4') .find('.slick-row') @@ -31,7 +29,7 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => { .each(($cell) => { const value = parseInt($cell.text().trim(), 10); if (!isNaN(value)) { - const foundItems = presetDurationValues.filter(acceptedValue => acceptedValue === value); + const foundItems = presetDurationValues.filter((acceptedValue) => acceptedValue === value); expect(foundItems).to.have.length(1); } }); @@ -42,7 +40,7 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => { cy.get('.search-filter.filter-usDateShort') .find('input') .invoke('val') - .then(text => expect(text).to.eq(presetUsDateShort)); + .then((text) => expect(text).to.eq(presetUsDateShort)); cy.get('#grid4') .find('.slick-row') @@ -60,7 +58,7 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => { cy.get('#slickGridContainer-grid4') .find('.slick-custom-footer') .find('.right-footer') - .should($span => { + .should(($span) => { const text = removeExtraSpaces($span.text()); // remove all white spaces expect(text).not.to.eq('10500 of 10500 items'); }); @@ -81,18 +79,11 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => { .siblings('.slick-sort-indicator-numbered') .contains('2'); - cy.get('.slick-row') - .first() - .children('.slick-cell:nth(2)') - .should('contain', '98'); + cy.get('.slick-row').first().children('.slick-cell:nth(2)').should('contain', '98'); - cy.get('[data-test="scroll-bottom-btn"') - .click(); + cy.get('[data-test="scroll-bottom-btn"').click(); - cy.get('.slick-row') - .last() - .children('.slick-cell:nth(2)') - .should('contain', '10'); + cy.get('.slick-row').last().children('.slick-cell:nth(2)').should('contain', '10'); }); }); @@ -102,8 +93,7 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => { const dynamicStartDate = '2001-02-28'; it('should click on Set Dynamic Filters', () => { - cy.get('[data-test=set-dynamic-filter]') - .click(); + cy.get('[data-test=set-dynamic-filter]').click(); }); it('should have "% Complete" fields within the exclusive range of the filters presets', () => { @@ -130,7 +120,7 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => { .each(($cell) => { const value = parseInt($cell.text().trim(), 10); if (!isNaN(value)) { - const foundItems = dynamicDurationValues.filter(acceptedValue => acceptedValue === value); + const foundItems = dynamicDurationValues.filter((acceptedValue) => acceptedValue === value); expect(foundItems).to.have.length(1); } }); @@ -141,7 +131,7 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => { cy.get('.search-filter.filter-start') .find('input') .invoke('val') - .then(text => expect(text).to.eq(dynamicStartDate)); + .then((text) => expect(text).to.eq(dynamicStartDate)); cy.get('#grid4') .find('.slick-row') @@ -149,7 +139,8 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => { cy.wrap($row) .children('.slick-cell:nth(4)') .each(($cell) => { - const isDateValid = isEqual(parse($cell.text()), dynamicStartDate) || isAfter(parse($cell.text()), dynamicStartDate); + const isDateValid = + isEqual(parse($cell.text()), dynamicStartDate) || isAfter(parse($cell.text()), dynamicStartDate); expect(isDateValid).to.eq(true); }); }); @@ -158,18 +149,16 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => { describe('Set Dynamic Sorting', () => { it('should click on "Clear Filters" then "Set Dynamic Sorting" buttons', () => { - cy.get('[data-test=clear-filters]') - .click(); + cy.get('[data-test=clear-filters]').click(); - cy.get('[data-test=set-dynamic-sorting]') - .click(); + cy.get('[data-test=set-dynamic-sorting]').click(); }); it('should have some metrics shown in the grid footer', () => { cy.get('#slickGridContainer-grid4') .find('.slick-custom-footer') .find('.right-footer') - .should($span => { + .should(($span) => { const text = removeExtraSpaces($span.text()); // remove all white spaces expect(text).to.eq('10500 of 10500 items'); }); @@ -190,23 +179,13 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => { .siblings('.slick-sort-indicator-numbered') .contains('2'); - cy.get('.slick-row') - .first() - .children('.slick-cell:nth(2)') - .should('contain', '0'); + cy.get('.slick-row').first().children('.slick-cell:nth(2)').should('contain', '0'); - cy.get('[data-test="scroll-bottom-btn"') - .click(); + cy.get('[data-test="scroll-bottom-btn"').click(); - cy.get('.slick-row') - .last() - .children('.slick-cell:nth(2)') - .should('contain', '100'); + cy.get('.slick-row').last().children('.slick-cell:nth(2)').should('contain', '100'); - cy.get('.slick-row') - .last() - .children('.slick-cell:nth(4)') - .should('contain', ''); + cy.get('.slick-row').last().children('.slick-cell:nth(4)').should('contain', ''); }); }); @@ -214,15 +193,14 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => { const dynamicStartDate = '2001-02-28'; it('should click on Set Dynamic Filters', () => { - cy.get('[data-test=set-dynamic-filter]') - .click(); + cy.get('[data-test=set-dynamic-filter]').click(); }); it('should have Start Date within the range of the dynamic filters', () => { cy.get('.search-filter.filter-start') .find('input') .invoke('val') - .then(text => expect(text).to.eq(dynamicStartDate)); + .then((text) => expect(text).to.eq(dynamicStartDate)); cy.get('#grid4') .find('.slick-row') @@ -230,7 +208,8 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => { cy.wrap($row) .children('.slick-cell:nth(4)') .each(($cell) => { - const isDateValid = isEqual(parse($cell.text()), dynamicStartDate) || isAfter(parse($cell.text()), dynamicStartDate); + const isDateValid = + isEqual(parse($cell.text()), dynamicStartDate) || isAfter(parse($cell.text()), dynamicStartDate); expect(isDateValid).to.eq(true); }); }); @@ -244,7 +223,7 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => { cy.get('.search-filter.filter-start') .find('input') .invoke('val') - .then(text => expect(text).to.eq('')); + .then((text) => expect(text).to.eq('')); cy.window().then((win) => { expect(win.console.log).to.have.callCount(1); @@ -252,8 +231,9 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => { newValues: [ { columnId: 'duration', searchTerms: ['2', '25', '48', '50'], operator: 'IN' }, { columnId: 'complete', searchTerms: ['95'], operator: '<' }, - { columnId: 'effort-driven', searchTerms: ['true'], operator: 'EQ' } - ], type: 'filter' + { columnId: 'effort-driven', searchTerms: ['true'], operator: 'EQ' }, + ], + type: 'filter', }); }); }); @@ -264,14 +244,11 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => { cy.get('.search-filter.filter-start') .find('input') .invoke('val') - .then(text => expect(text).to.eq('')); + .then((text) => expect(text).to.eq('')); - cy.get('.search-filter.filter-start') - .click(); + cy.get('.search-filter.filter-start').click(); - cy.get('.vanilla-calendar:visible') - .find('.vanilla-calendar-day__btn_selected') - .should('not.exist'); + cy.get('.vanilla-calendar:visible').find('.vanilla-calendar-day__btn_selected').should('not.exist'); cy.get('h2').click(); }); diff --git a/test/cypress/e2e/example05.cy.ts b/test/cypress/e2e/example05.cy.ts index 7bef670b3..f7e646c78 100644 --- a/test/cypress/e2e/example05.cy.ts +++ b/test/cypress/e2e/example05.cy.ts @@ -20,10 +20,9 @@ describe('Example 5 - OData Grid', () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$inlinecount=allpages&$top=20&$skip=20&$orderby=Name asc&$filter=(Gender eq 'male')`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$inlinecount=allpages&$top=20&$skip=20&$orderby=Name asc&$filter=(Gender eq 'male')`); + }); }); it('should change Pagination to next page', () => { @@ -34,28 +33,26 @@ describe('Example 5 - OData Grid', () => { cy.get('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('3')); + .then((pageNumber) => expect(pageNumber).to.eq('3')); - cy.get('[data-test=page-count]') - .contains('3'); + cy.get('[data-test=page-count]').contains('3'); - cy.get('[data-test=item-from]') - .contains('41'); + cy.get('[data-test=item-from]').contains('41'); - cy.get('[data-test=item-to]') - .contains('50'); + cy.get('[data-test=item-to]').contains('50'); - cy.get('[data-test=total-items]') - .contains('50'); + cy.get('[data-test=total-items]').contains('50'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$inlinecount=allpages&$top=20&$skip=40&$orderby=Name asc&$filter=(Gender eq 'male')`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$inlinecount=allpages&$top=20&$skip=40&$orderby=Name asc&$filter=(Gender eq 'male')`); + }); cy.window().then((win) => { expect(win.console.log).to.have.callCount(1); - expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: { pageNumber: 3, pageSize: 20 }, type: 'pagination' }); + expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { + newValues: { pageNumber: 3, pageSize: 20 }, + type: 'pagination', + }); }); }); @@ -68,28 +65,26 @@ describe('Example 5 - OData Grid', () => { cy.get('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('1')); + .then((pageNumber) => expect(pageNumber).to.eq('1')); - cy.get('[data-test=page-count]') - .contains('5'); + cy.get('[data-test=page-count]').contains('5'); - cy.get('[data-test=item-from]') - .contains('1'); + cy.get('[data-test=item-from]').contains('1'); - cy.get('[data-test=item-to]') - .contains('10'); + cy.get('[data-test=item-to]').contains('10'); - cy.get('[data-test=total-items]') - .contains('50'); + cy.get('[data-test=total-items]').contains('50'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$orderby=Name asc&$filter=(Gender eq 'male')`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$orderby=Name asc&$filter=(Gender eq 'male')`); + }); cy.window().then((win) => { expect(win.console.log).to.have.callCount(1); - expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: { pageNumber: 1, pageSize: 10 }, type: 'pagination' }); + expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { + newValues: { pageNumber: 1, pageSize: 10 }, + type: 'pagination', + }); }); }); @@ -101,161 +96,137 @@ describe('Example 5 - OData Grid', () => { cy.get('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('5')); + .then((pageNumber) => expect(pageNumber).to.eq('5')); - cy.get('[data-test=page-count]') - .contains('5'); + cy.get('[data-test=page-count]').contains('5'); - cy.get('[data-test=item-from]') - .contains('41'); + cy.get('[data-test=item-from]').contains('41'); - cy.get('[data-test=item-to]') - .contains('50'); + cy.get('[data-test=item-to]').contains('50'); - cy.get('[data-test=total-items]') - .contains('50'); + cy.get('[data-test=total-items]').contains('50'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$skip=40&$orderby=Name asc&$filter=(Gender eq 'male')`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$skip=40&$orderby=Name asc&$filter=(Gender eq 'male')`); + }); cy.window().then((win) => { expect(win.console.log).to.have.callCount(1); - expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: { pageNumber: 5, pageSize: 10 }, type: 'pagination' }); + expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { + newValues: { pageNumber: 5, pageSize: 10 }, + type: 'pagination', + }); }); }); it('should change Pagination to first page using the external button', () => { - cy.get('[data-test=goto-first-page') - .click(); + cy.get('[data-test=goto-first-page').click(); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); cy.get('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('1')); + .then((pageNumber) => expect(pageNumber).to.eq('1')); - cy.get('[data-test=page-count]') - .contains('5'); + cy.get('[data-test=page-count]').contains('5'); - cy.get('[data-test=item-from]') - .contains('1'); + cy.get('[data-test=item-from]').contains('1'); - cy.get('[data-test=item-to]') - .contains('10'); + cy.get('[data-test=item-to]').contains('10'); - cy.get('[data-test=total-items]') - .contains('50'); + cy.get('[data-test=total-items]').contains('50'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$orderby=Name asc&$filter=(Gender eq 'male')`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$orderby=Name asc&$filter=(Gender eq 'male')`); + }); cy.window().then((win) => { expect(win.console.log).to.have.callCount(1); - expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: { pageNumber: 1, pageSize: 10 }, type: 'pagination' }); + expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { + newValues: { pageNumber: 1, pageSize: 10 }, + type: 'pagination', + }); }); }); it('should change Pagination to last page using the external button', () => { - cy.get('[data-test=goto-last-page') - .click(); + cy.get('[data-test=goto-last-page').click(); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); cy.get('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('5')); + .then((pageNumber) => expect(pageNumber).to.eq('5')); - cy.get('[data-test=page-count]') - .contains('5'); + cy.get('[data-test=page-count]').contains('5'); - cy.get('[data-test=item-from]') - .contains('41'); + cy.get('[data-test=item-from]').contains('41'); - cy.get('[data-test=item-to]') - .contains('50'); + cy.get('[data-test=item-to]').contains('50'); - cy.get('[data-test=total-items]') - .contains('50'); + cy.get('[data-test=total-items]').contains('50'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$skip=40&$orderby=Name asc&$filter=(Gender eq 'male')`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$skip=40&$orderby=Name asc&$filter=(Gender eq 'male')`); + }); cy.window().then((win) => { expect(win.console.log).to.have.callCount(1); - expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: { pageNumber: 5, pageSize: 10 }, type: 'pagination' }); + expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { + newValues: { pageNumber: 5, pageSize: 10 }, + type: 'pagination', + }); }); }); it('should Clear all Filters and expect to go back to first page', () => { - cy.get('#grid5') - .find('button.slick-grid-menu-button') - .click({ force: true }); - - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item') - .first() - .find('span') - .contains('Clear all Filters') - .click(); + cy.get('#grid5').find('button.slick-grid-menu-button').click({ force: true }); + + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click(); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); cy.get('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('1')); + .then((pageNumber) => expect(pageNumber).to.eq('1')); - cy.get('[data-test=page-count]') - .contains('10'); + cy.get('[data-test=page-count]').contains('10'); - cy.get('[data-test=item-from]') - .contains('1'); + cy.get('[data-test=item-from]').contains('1'); - cy.get('[data-test=item-to]') - .contains('10'); + cy.get('[data-test=item-to]').contains('10'); - cy.get('[data-test=total-items]') - .contains('100'); + cy.get('[data-test=total-items]').contains('100'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$orderby=Name asc`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$orderby=Name asc`); + }); cy.window().then((win) => { // TODO look into, this should be called 2x times not 3x times // expect(win.console.log).to.have.callCount(2); expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: [], type: 'filter' }); - expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: { pageNumber: 1, pageSize: 10 }, type: 'pagination' }); + expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { + newValues: { pageNumber: 1, pageSize: 10 }, + type: 'pagination', + }); }); }); it('should Clear all Sorting', () => { - cy.get('#grid5') - .find('button.slick-grid-menu-button') - .click({ force: true }); + cy.get('#grid5').find('button.slick-grid-menu-button').click({ force: true }); - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item:nth(1)') - .find('span') - .contains('Clear all Sorting') - .click(); + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item:nth(1)').find('span').contains('Clear all Sorting').click(); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$inlinecount=allpages&$top=10`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$inlinecount=allpages&$top=10`); + }); cy.window().then((win) => { expect(win.console.log).to.have.callCount(1); @@ -264,56 +235,42 @@ describe('Example 5 - OData Grid', () => { }); it('should use "substringof" when OData version is set to 2', () => { - cy.get('.search-filter.filter-name') - .find('input') - .type('John'); + cy.get('.search-filter.filter-name').find('input').type('John'); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$filter=(substringof('John', Name))`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$filter=(substringof('John', Name))`); + }); - cy.get('#grid5') - .find('.slick-row') - .should('have.length', 1); + cy.get('#grid5').find('.slick-row').should('have.length', 1); }); it('should use "contains" when OData version is set to 4', () => { - cy.get('[data-test=version4]') - .click(); + cy.get('[data-test=version4]').click(); - cy.get('.search-filter.filter-name') - .find('input') - .type('John'); + cy.get('.search-filter.filter-name').find('input').type('John'); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$count=true&$top=10&$filter=(contains(Name, 'John'))`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=10&$filter=(contains(Name, 'John'))`); + }); - cy.get('#grid5') - .find('.slick-row') - .should('have.length', 1); + cy.get('#grid5').find('.slick-row').should('have.length', 1); }); it('should return 3 rows using "C*n" (starts with "C" + ends with "n")', () => { - cy.get('input.filter-name') - .clear() - .type('C*n'); + cy.get('input.filter-name').clear().type('C*n'); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$count=true&$top=10&$filter=(startswith(Name, 'C') and endswith(Name, 'n'))`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=10&$filter=(startswith(Name, 'C') and endswith(Name, 'n'))`); + }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Carroll Buchanan'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Consuelo Dickson'); @@ -321,100 +278,72 @@ describe('Example 5 - OData Grid', () => { }); it('should perform filterQueryOverride when operator "%%" is selected', () => { - cy.get('.search-filter.filter-name select').find('option').last().then((element) => { - cy.get('.search-filter.filter-name select').select(element.val()); - }); + cy.get('.search-filter.filter-name select') + .find('option') + .last() + .then((element) => { + cy.get('.search-filter.filter-name select').select(element.val()); + }); - cy.get('.search-filter.filter-name') - .find('input') - .clear() - .type('Jo%yn%er'); + cy.get('.search-filter.filter-name').find('input').clear().type('Jo%yn%er'); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$count=true&$top=10&$filter=(matchesPattern(Name, '%5EJo%25yn%25er$'))`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=10&$filter=(matchesPattern(Name, '%5EJo%25yn%25er$'))`); + }); - cy.get('.slick-row') - .should('have.length', 1); + cy.get('.slick-row').should('have.length', 1); }); it('should click on Set Dynamic Filter and expect query and filters to be changed', () => { - cy.get('[data-test=set-dynamic-filter]') - .click(); + cy.get('[data-test=set-dynamic-filter]').click(); - cy.get('.search-filter.filter-name select') - .should('have.value', 'a*'); + cy.get('.search-filter.filter-name select').should('have.value', 'a*'); cy.get('.search-filter.filter-name') .find('input') .invoke('val') - .then(text => expect(text).to.eq('A')); + .then((text) => expect(text).to.eq('A')); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$count=true&$top=10&$filter=(startswith(Name, 'A'))`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=10&$filter=(startswith(Name, 'A'))`); + }); - cy.get('#grid5') - .find('.slick-row') - .should('have.length', 5); + cy.get('#grid5').find('.slick-row').should('have.length', 5); }); it('should use a range filter when searching with ".."', () => { - cy.get('.slick-header-columns') - .children('.slick-header-column:nth(1)') - .contains('Name') - .click(); + cy.get('.slick-header-columns').children('.slick-header-column:nth(1)').contains('Name').click(); - cy.get('.search-filter.filter-name') - .find('input') - .clear() - .type('Anthony Joyner..Ayers Hood'); + cy.get('.search-filter.filter-name').find('input').clear().type('Anthony Joyner..Ayers Hood'); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$count=true&$top=10&$orderby=Name asc&$filter=(Name ge 'Anthony%20Joyner' and Name le 'Ayers%20Hood')`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq( + `$count=true&$top=10&$orderby=Name asc&$filter=(Name ge 'Anthony%20Joyner' and Name le 'Ayers%20Hood')` + ); + }); - cy.get('#grid5') - .find('.slick-row') - .should('have.length', 3); + cy.get('#grid5').find('.slick-row').should('have.length', 3); }); }); describe('when "enableCount" is unchecked (not set)', () => { it('should Clear all Filters and Sortings, set 20 items per page & uncheck "enableCount"', () => { - cy.get('#grid5') - .find('button.slick-grid-menu-button') - .click({ force: true }); - - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item') - .first() - .find('span') - .contains('Clear all Filters') - .click(); + cy.get('#grid5').find('button.slick-grid-menu-button').click({ force: true }); - cy.get('#grid5') - .find('button.slick-grid-menu-button') - .trigger('click') - .click({ force: true }); - - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item:nth(1)') - .find('span') - .contains('Clear all Sorting') - .click(); + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click(); + + cy.get('#grid5').find('button.slick-grid-menu-button').trigger('click').click({ force: true }); + + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item:nth(1)').find('span').contains('Clear all Sorting').click(); cy.get('#items-per-page-label').select('20'); @@ -424,10 +353,9 @@ describe('Example 5 - OData Grid', () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=20`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=20`); + }); }); it('should change Pagination to next page', () => { @@ -436,10 +364,9 @@ describe('Example 5 - OData Grid', () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=20&$skip=20`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=20&$skip=20`); + }); }); it('should change Pagination to first page with 10 items', () => { @@ -449,10 +376,9 @@ describe('Example 5 - OData Grid', () => { cy.get('[data-test=status]').should('contain', 'loading'); cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10`); + }); }); it('should change Pagination to last page', () => { @@ -461,16 +387,13 @@ describe('Example 5 - OData Grid', () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$skip=90`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$skip=90`); + }); }); it('should click on "Name" column to sort it Ascending', () => { - cy.get('.slick-header-columns') - .children('.slick-header-column:nth(1)') - .click(); + cy.get('.slick-header-columns').children('.slick-header-column:nth(1)').click(); cy.get('.slick-header-columns') .children('.slick-header-column:nth(1)') @@ -480,229 +403,184 @@ describe('Example 5 - OData Grid', () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$skip=90&$orderby=Name asc`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$skip=90&$orderby=Name asc`); + }); }); it('should Clear all Sorting', () => { - cy.get('#grid5') - .find('button.slick-grid-menu-button') - .click({ force: true }); + cy.get('#grid5').find('button.slick-grid-menu-button').click({ force: true }); - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item:nth(1)') - .find('span') - .contains('Clear all Sorting') - .click(); + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item:nth(1)').find('span').contains('Clear all Sorting').click(); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$skip=90`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$skip=90`); + }); }); it('should click on Set Dynamic Filter and expect query and filters to be changed', () => { - cy.get('[data-test=set-dynamic-filter]') - .click(); + cy.get('[data-test=set-dynamic-filter]').click(); - cy.get('.search-filter.filter-name select') - .should('have.value', 'a*'); + cy.get('.search-filter.filter-name select').should('have.value', 'a*'); cy.get('.search-filter.filter-name') .find('input') .invoke('val') - .then(text => expect(text).to.eq('A')); + .then((text) => expect(text).to.eq('A')); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$filter=(startswith(Name, 'A'))`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$filter=(startswith(Name, 'A'))`); + }); - cy.get('#grid5') - .find('.slick-row') - .should('have.length', 5); + cy.get('#grid5').find('.slick-row').should('have.length', 5); }); it('should use "substringof" when OData version is set to 2', () => { - cy.get('[data-test=version2]') - .click(); + cy.get('[data-test=version2]').click(); - cy.get('.search-filter.filter-name') - .find('input') - .type('John'); + cy.get('.search-filter.filter-name').find('input').type('John'); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$filter=(substringof('John', Name))`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$filter=(substringof('John', Name))`); + }); - cy.get('#grid5') - .find('.slick-row') - .should('have.length', 1); + cy.get('#grid5').find('.slick-row').should('have.length', 1); }); it('should use "contains" when OData version is set to 4', () => { - cy.get('[data-test=version4]') - .click(); + cy.get('[data-test=version4]').click(); - cy.get('.search-filter.filter-name') - .find('input') - .type('John'); + cy.get('.search-filter.filter-name').find('input').type('John'); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$filter=(contains(Name, 'John'))`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$filter=(contains(Name, 'John'))`); + }); - cy.get('#grid5') - .find('.slick-row') - .should('have.length', 1); + cy.get('#grid5').find('.slick-row').should('have.length', 1); }); }); describe('General Pagination Behaviors', () => { it('should type a filter which returns an empty dataset', () => { - cy.get('.search-filter.filter-name') - .find('input') - .clear() - .type('xy'); + cy.get('.search-filter.filter-name').find('input').clear().type('xy'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$filter=(contains(Name, 'xy'))`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$filter=(contains(Name, 'xy'))`); + }); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('.slick-empty-data-warning:visible') - .contains('No data to display.'); + cy.get('.slick-empty-data-warning:visible').contains('No data to display.'); }); it('should display page 0 of 0 but hide pagination from/to numbers when filtered data "xy" returns an empty dataset', () => { - cy.get('[data-test=page-count]') - .contains('0'); + cy.get('[data-test=page-count]').contains('0'); - cy.get('[data-test=item-from]') - .should('not.be.visible'); + cy.get('[data-test=item-from]').should('not.be.visible'); - cy.get('[data-test=item-to]') - .should('not.be.visible'); + cy.get('[data-test=item-to]').should('not.be.visible'); - cy.get('[data-test=total-items]') - .contains('0'); + cy.get('[data-test=total-items]').contains('0'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$filter=(contains(Name, 'xy'))`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$filter=(contains(Name, 'xy'))`); + }); cy.get('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('0')); + .then((pageNumber) => expect(pageNumber).to.eq('0')); }); it('should erase part of the filter so that it filters with "x"', () => { - cy.get('.search-filter.filter-name') - .find('input') - .type('{backspace}'); + cy.get('.search-filter.filter-name').find('input').type('{backspace}'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$filter=(contains(Name, 'x'))`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$filter=(contains(Name, 'x'))`); + }); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('.slick-empty-data-warning') - .contains('No data to display.') - .should('not.be.visible'); + cy.get('.slick-empty-data-warning').contains('No data to display.').should('not.be.visible'); cy.window().then((win) => { expect(win.console.log).to.have.callCount(2); - expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: [{ columnId: 'name', operator: 'Contains', searchTerms: ['x'], targetSelector: 'input.form-control.filter-name.compound-input.filled' }], type: 'filter' }); - expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: { pageNumber: 1, pageSize: 10 }, type: 'pagination' }); + expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { + newValues: [ + { + columnId: 'name', + operator: 'Contains', + searchTerms: ['x'], + targetSelector: 'input.form-control.filter-name.compound-input.filled', + }, + ], + type: 'filter', + }); + expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { + newValues: { pageNumber: 1, pageSize: 10 }, + type: 'pagination', + }); }); }); it('should display page 1 of 1 with 2 items after erasing part of the filter to be "x" which should return 1 page', () => { cy.wait(50); - cy.get('[data-test=page-count]') - .contains('1'); + cy.get('[data-test=page-count]').contains('1'); - cy.get('[data-test=item-from]') - .contains('1'); + cy.get('[data-test=item-from]').contains('1'); - cy.get('[data-test=item-to]') - .contains('2'); + cy.get('[data-test=item-to]').contains('2'); - cy.get('[data-test=total-items]') - .contains('2'); + cy.get('[data-test=total-items]').contains('2'); cy.get('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('1')); + .then((pageNumber) => expect(pageNumber).to.eq('1')); }); }); describe('Set Dynamic Sorting', () => { it('should click on "Set Filters Dynamically" then on "Set Sorting Dynamically"', () => { - cy.get('[data-test=set-dynamic-filter]') - .click(); + cy.get('[data-test=set-dynamic-filter]').click(); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'loading'); cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=set-dynamic-sorting]') - .click(); + cy.get('[data-test=set-dynamic-sorting]').click(); cy.get('[data-test=status]').should('contain', 'loading'); cy.get('[data-test=status]').should('contain', 'finished'); }); it('should expect the grid to be sorted by "Name" descending', () => { - cy.get('#grid5') - .get('.slick-header-column:nth(1)') - .find('.slick-sort-indicator-desc') - .should('have.length', 1); + cy.get('#grid5').get('.slick-header-column:nth(1)').find('.slick-sort-indicator-desc').should('have.length', 1); - cy.get('.slick-row') - .first() - .children('.slick-cell:nth(1)') - .should('contain', 'Ayers Hood'); + cy.get('.slick-row').first().children('.slick-cell:nth(1)').should('contain', 'Ayers Hood'); - cy.get('.slick-row') - .last() - .children('.slick-cell:nth(1)') - .should('contain', 'Alexander Foley'); + cy.get('.slick-row').last().children('.slick-cell:nth(1)').should('contain', 'Alexander Foley'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$filter=(startswith(Name, 'A'))`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$filter=(startswith(Name, 'A'))`); + }); }); it('should display an error when trying to sort by "Company" and the query & sort icons should remain the same', () => { - cy.get('.slick-header-columns') - .children('.slick-header-column:nth(3)') - .click(); + cy.get('.slick-header-columns').children('.slick-header-column:nth(3)').click(); cy.get('.slick-header-columns') .children('.slick-header-column:nth(3)') @@ -714,49 +592,38 @@ describe('Example 5 - OData Grid', () => { cy.get('[data-test=status]').should('contain', 'ERROR!!'); // same query string as prior test - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$filter=(startswith(Name, 'A'))`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$filter=(startswith(Name, 'A'))`); + }); }); it('should change Gender filter to "female" and still expect previous sort (before the error) to still be in query', () => { cy.get('.ms-filter.filter-gender:visible').click(); - cy.get('[data-name="filter-gender"].ms-drop') - .find('li:visible:nth(2)') - .contains('female') - .click(); + cy.get('[data-name="filter-gender"].ms-drop').find('li:visible:nth(2)').contains('female').click(); - cy.get('#grid5') - .find('.slick-row') - .should('have.length', 1); + cy.get('#grid5').find('.slick-row').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Alisha Myers'); // query should still contain previous sort by + new gender filter - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$filter=(startswith(Name, 'A') and Gender eq 'female')`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$filter=(startswith(Name, 'A') and Gender eq 'female')`); + }); }); it('should try the "Company" filter and expect an error to throw and also expect the filter to reset to empty after the error is displayed', () => { - cy.get('input.search-filter.filter-company') - .type('Core'); + cy.get('input.search-filter.filter-company').type('Core'); // wait for the query to finish cy.get('[data-test=error-status]').should('contain', 'Server could not filter using the field "Company"'); cy.get('[data-test=status]').should('contain', 'ERROR!!'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$filter=(startswith(Name, 'A') and Gender eq 'female')`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$filter=(startswith(Name, 'A') and Gender eq 'female')`); + }); - cy.get('#grid5') - .find('.slick-row') - .should('have.length', 1); + cy.get('#grid5').find('.slick-row').should('have.length', 1); }); it('should clear the "Name" filter and expect query to be successfull with just 1 filter "Gender" to be filled but without the previous failed filter', () => { @@ -777,26 +644,21 @@ describe('Example 5 - OData Grid', () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$filter=(Gender eq 'female')`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$filter=(Gender eq 'female')`); + }); cy.get('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('1')); + .then((pageNumber) => expect(pageNumber).to.eq('1')); - cy.get('[data-test=page-count]') - .contains('5'); + cy.get('[data-test=page-count]').contains('5'); - cy.get('[data-test=item-from]') - .contains('1'); + cy.get('[data-test=item-from]').contains('1'); - cy.get('[data-test=item-to]') - .contains('10'); + cy.get('[data-test=item-to]').contains('10'); - cy.get('[data-test=total-items]') - .contains('50'); + cy.get('[data-test=total-items]').contains('50'); }); it('should display error when clicking on the "Throw Error..." button and not expect query and page to change', () => { @@ -806,26 +668,21 @@ describe('Example 5 - OData Grid', () => { cy.get('[data-test=error-status]').should('contain', 'Server timed out trying to retrieve data for the last page'); cy.get('[data-test=status]').should('contain', 'ERROR!!'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$filter=(Gender eq 'female')`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$filter=(Gender eq 'female')`); + }); cy.get('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('1')); + .then((pageNumber) => expect(pageNumber).to.eq('1')); - cy.get('[data-test=page-count]') - .contains('5'); + cy.get('[data-test=page-count]').contains('5'); - cy.get('[data-test=item-from]') - .contains('1'); + cy.get('[data-test=item-from]').contains('1'); - cy.get('[data-test=item-to]') - .contains('10'); + cy.get('[data-test=item-to]').contains('10'); - cy.get('[data-test=total-items]') - .contains('50'); + cy.get('[data-test=total-items]').contains('50'); }); it('should display error when trying to change items per to 50,000 items and expect query & page to remain the same', () => { @@ -834,26 +691,21 @@ describe('Example 5 - OData Grid', () => { cy.get('[data-test=error-status]').should('contain', 'Server timed out retrieving 50,000 rows'); cy.get('[data-test=status]').should('contain', 'ERROR!!'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$filter=(Gender eq 'female')`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$filter=(Gender eq 'female')`); + }); cy.get('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('1')); + .then((pageNumber) => expect(pageNumber).to.eq('1')); - cy.get('[data-test=page-count]') - .contains('5'); + cy.get('[data-test=page-count]').contains('5'); - cy.get('[data-test=item-from]') - .contains('1'); + cy.get('[data-test=item-from]').contains('1'); - cy.get('[data-test=item-to]') - .contains('10'); + cy.get('[data-test=item-to]').contains('10'); - cy.get('[data-test=total-items]') - .contains('50'); + cy.get('[data-test=total-items]').contains('50'); }); it('should now go to next page without anymore problems and query & page should change as normal', () => { @@ -862,26 +714,21 @@ describe('Example 5 - OData Grid', () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$skip=10&$orderby=Name desc&$filter=(Gender eq 'female')`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$skip=10&$orderby=Name desc&$filter=(Gender eq 'female')`); + }); cy.get('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('2')); + .then((pageNumber) => expect(pageNumber).to.eq('2')); - cy.get('[data-test=page-count]') - .contains('5'); + cy.get('[data-test=page-count]').contains('5'); - cy.get('[data-test=item-from]') - .contains('11'); + cy.get('[data-test=item-from]').contains('11'); - cy.get('[data-test=item-to]') - .contains('20'); + cy.get('[data-test=item-to]').contains('20'); - cy.get('[data-test=total-items]') - .contains('50'); + cy.get('[data-test=total-items]').contains('50'); }); }); @@ -894,10 +741,9 @@ describe('Example 5 - OData Grid', () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$expand=category`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$expand=category`); + }); cy.get('[data-test=enable-select]').click(); cy.get('[data-test=enable-select]').should('be.checked'); @@ -905,37 +751,21 @@ describe('Example 5 - OData Grid', () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$select=id,name,gender,company&$expand=category($select=name)`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$select=id,name,gender,company&$expand=category($select=name)`); + }); }); it('should try to sort and filter on "Category" and expect the query to be succesful', () => { - cy.get('#grid5') - .find('button.slick-grid-menu-button') - .click({ force: true }); - - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item') - .first() - .find('span') - .contains('Clear all Filters') - .click(); + cy.get('#grid5').find('button.slick-grid-menu-button').click({ force: true }); - cy.get('#grid5') - .find('button.slick-grid-menu-button') - .click({ force: true }); + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click(); - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item') - .find('span') - .contains('Clear all Sorting') - .click(); + cy.get('#grid5').find('button.slick-grid-menu-button').click({ force: true }); - cy.get('.slick-header-columns') - .children('.slick-header-column:nth(4)') - .click(); + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').find('span').contains('Clear all Sorting').click(); + + cy.get('.slick-header-columns').children('.slick-header-column:nth(4)').click(); cy.get('.slick-header-columns') .children('.slick-header-column:nth(4)') @@ -945,37 +775,34 @@ describe('Example 5 - OData Grid', () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$orderby=Category/name asc&$select=id,name,gender,company&$expand=category($select=name)`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq( + `$top=10&$orderby=Category/name asc&$select=id,name,gender,company&$expand=category($select=name)` + ); + }); - cy.get('input.search-filter.filter-category_name') - .type('Silver'); + cy.get('input.search-filter.filter-category_name').type('Silver'); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$top=10&$orderby=Category/name asc&$filter=(contains(Category/name, 'Silver'))&$select=id,name,gender,company&$expand=category($select=name)`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq( + `$top=10&$orderby=Category/name asc&$filter=(contains(Category/name, 'Silver'))&$select=id,name,gender,company&$expand=category($select=name)` + ); + }); cy.get('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('1')); + .then((pageNumber) => expect(pageNumber).to.eq('1')); - cy.get('[data-test=page-count]') - .contains('4'); + cy.get('[data-test=page-count]').contains('4'); - cy.get('[data-test=item-from]') - .contains('1'); + cy.get('[data-test=item-from]').contains('1'); - cy.get('[data-test=item-to]') - .contains('10'); + cy.get('[data-test=item-to]').contains('10'); - cy.get('[data-test=total-items]') - .contains('32'); + cy.get('[data-test=total-items]').contains('32'); }); }); -}); \ No newline at end of file +}); diff --git a/test/cypress/e2e/example06.cy.ts b/test/cypress/e2e/example06.cy.ts index 84ced3df6..6f29c67b8 100644 --- a/test/cypress/e2e/example06.cy.ts +++ b/test/cypress/e2e/example06.cy.ts @@ -16,37 +16,33 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { }); it('should have a grid of size 900 by 200px', () => { - cy.get('#slickGridContainer-grid6') - .should('have.css', 'width', '900px'); + cy.get('#slickGridContainer-grid6').should('have.css', 'width', '900px'); - cy.get('#slickGridContainer-grid6 > .slickgrid-container') - .should($el => expect(parseInt(`${$el.height()}`, 10)).to.eq(200)); + cy.get('#slickGridContainer-grid6 > .slickgrid-container').should(($el) => + expect(parseInt(`${$el.height()}`, 10)).to.eq(200) + ); }); it('should have English Text inside some of the Filters', () => { - cy.get('.search-filter.filter-gender .ms-choice > span') - .contains('Male'); + cy.get('.search-filter.filter-gender .ms-choice > span').contains('Male'); }); it('should have GraphQL query with defined Grid Presets', () => { - cy.get('.search-filter.filter-name select') - .should('not.have.value'); + cy.get('.search-filter.filter-name select').should('not.have.value'); cy.get('.search-filter.filter-name') .find('input') .invoke('val') - .then(text => expect(text).to.eq('Joh*oe')); + .then((text) => expect(text).to.eq('Joh*oe')); - cy.get('.search-filter.filter-gender .ms-choice > span') - .contains('Male'); + cy.get('.search-filter.filter-gender .ms-choice > span').contains('Male'); - cy.get('.search-filter.filter-company .ms-choice > span') - .contains('Company XYZ'); + cy.get('.search-filter.filter-company .ms-choice > span').contains('Company XYZ'); cy.get('.search-filter.filter-finish') .find('input') .invoke('val') - .then(text => expect(text).to.eq(`${presetLowestDay} — ${presetHighestDay}`)); + .then((text) => expect(text).to.eq(`${presetLowestDay} — ${presetHighestDay}`)); cy.get('[data-test=alert-graphql-query]').should('exist'); cy.get('[data-test=alert-graphql-query]').should('contain', 'GraphQL Query'); @@ -54,24 +50,23 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query{users(first:20,offset:20, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query{users(first:20,offset:20, orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}], filterBy:[ {field:"gender",operator:EQ,value:"male"}, {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"}, {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"} ],locale:"en",userId:123){ - totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)); - }); + totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`) + ); + }); }); it('should use fake smaller server wait delay for faster E2E tests', () => { - cy.get('[data-test="server-delay"]') - .clear() - .type('20'); + cy.get('[data-test="server-delay"]').clear().type('20'); }); it('should change Pagination to next page', () => { @@ -80,17 +75,18 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query{users(first:20,offset:40, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query{users(first:20,offset:40, orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}], filterBy:[ {field:"gender",operator:EQ,value:"male"}, {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"}, {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"} - ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)); - }); + ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`) + ); + }); }); it('should change Pagination to last page', () => { @@ -99,30 +95,30 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query{users(first:20,offset:80, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query{users(first:20,offset:80, orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}], filterBy:[ {field:"gender",operator:EQ,value:"male"}, {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"}, {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"} - ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)); - }); + ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`) + ); + }); }); it('should change Pagination to first page using the external button', () => { - cy.get('[data-test=goto-first-page') - .click(); + cy.get('[data-test=goto-first-page').click(); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query { users (first:20,offset:0, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query { users (first:20,offset:0, orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}], filterBy:[ {field:"gender",operator:EQ,value:"male"}, @@ -130,28 +126,29 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { {field:"company",operator:IN,value:"xyz"}, {field:"finish",operator:GE,value:"${presetLowestDay}"}, {field:"finish",operator:LE,value:"${presetHighestDay}"} - ],locale:"en",userId:123) { totalCount, nodes { id,name,gender,company,billing{address{street,zip}},finish } } }`)); - }); + ],locale:"en",userId:123) { totalCount, nodes { id,name,gender,company,billing{address{street,zip}},finish } } }`) + ); + }); }); it('should change Pagination to last page using the external button', () => { - cy.get('[data-test=goto-last-page') - .click(); + cy.get('[data-test=goto-last-page').click(); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query{users(first:20,offset:80, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query{users(first:20,offset:80, orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}], filterBy:[ {field:"gender",operator:EQ,value:"male"}, {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"}, {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"} - ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)); - }); + ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`) + ); + }); }); it('should change Pagination to first page with 30 items', () => { @@ -162,17 +159,18 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query{users(first:30,offset:0, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query{users(first:30,offset:0, orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}], filterBy:[ {field:"gender",operator:EQ,value:"male"}, {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"}, {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"} - ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)); - }); + ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`) + ); + }); }); it('should clear a single filter, that is not empty, by the header menu and expect query change', () => { @@ -194,22 +192,21 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query{users(first:30,offset:0, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query{users(first:30,offset:0, orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}], filterBy:[ {field:"gender",operator:EQ,value:"male"},{field:"company",operator:IN,value:"xyz"}, {field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"} - ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)); - }); + ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`) + ); + }); }); it('should try clearing same filter, which is now empty, by the header menu and expect same query without loading spinner', () => { - cy.get('[data-test="server-delay"]') - .clear() - .type('250'); + cy.get('[data-test="server-delay"]').clear().type('250'); cy.get('#grid6') .find('.slick-header-left .slick-header-column:nth(0)') @@ -228,16 +225,17 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query{users(first:30,offset:0, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query{users(first:30,offset:0, orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}], filterBy:[ {field:"gender",operator:EQ,value:"male"},{field:"company",operator:IN,value:"xyz"}, {field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"} - ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)); - }); + ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`) + ); + }); }); it('should clear the date range filter expect the query to have the 2 "finish" (GE, LE) filters removed', () => { @@ -259,14 +257,15 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query{users(first:30,offset:0, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query{users(first:30,offset:0, orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}], filterBy:[{field:"gender",operator:EQ,value:"male"},{field:"company",operator:IN,value:"xyz"}], - locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)); - }); + locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`) + ); + }); }); it('should Clear all Filters & Sorts', () => { @@ -275,17 +274,18 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query{users(first:30,offset:0,locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)); - }); + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces( + `query{users(first:30,offset:0,locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}` + ) + ); + }); }); it('should click on "Name" column to sort it Ascending', () => { - cy.get('.slick-header-columns') - .children('.slick-header-left .slick-header-column:nth(0)') - .click(); + cy.get('.slick-header-columns').children('.slick-header-left .slick-header-column:nth(0)').click(); cy.get('.slick-header-columns') .children('.slick-header-left .slick-header-column:nth(0)') @@ -295,165 +295,140 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query{users(first:30,offset:0, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query{users(first:30,offset:0, orderBy:[{field:"name",direction:ASC}], - locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)); - }); + locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`) + ); + }); }); it('should perform filterQueryOverride when operator "%%" is selected', () => { - cy.get('.search-filter.filter-name select').find('option').last().then((element) => { - cy.get('.search-filter.filter-name select').select(element.val()); - }); + cy.get('.search-filter.filter-name select') + .find('option') + .last() + .then((element) => { + cy.get('.search-filter.filter-name select').select(element.val()); + }); - cy.get('.search-filter.filter-name') - .find('input') - .clear() - .type('Jo%yn%er'); + cy.get('.search-filter.filter-name').find('input').clear().type('Jo%yn%er'); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeSpaces($span.text()); // remove all white spaces - expect(text).to.eq(removeSpaces(`query { users (first:30,offset:0, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeSpaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeSpaces(`query { users (first:30,offset:0, orderBy:[{field:"name",direction:ASC}], filterBy:[{field:"name",operator:Like,value:"Jo%yn%er"}], - locale:"en",userId:123) { totalCount, nodes { id,name,gender,company,billing{address{street,zip}},finish } } }`)); - }); + locale:"en",userId:123) { totalCount, nodes { id,name,gender,company,billing{address{street,zip}},finish } } }`) + ); + }); }); it('should click on Set Dynamic Filter and expect query and filters to be changed', () => { - cy.get('[data-test=set-dynamic-filter]') - .click(); + cy.get('[data-test=set-dynamic-filter]').click(); - cy.get('.search-filter.filter-name select') - .should('have.value', 'a*'); + cy.get('.search-filter.filter-name select').should('have.value', 'a*'); cy.get('.search-filter.filter-name') .find('input') .invoke('val') - .then(text => expect(text).to.eq('Jane')); + .then((text) => expect(text).to.eq('Jane')); - cy.get('.search-filter.filter-gender .ms-choice > span') - .contains('Female'); + cy.get('.search-filter.filter-gender .ms-choice > span').contains('Female'); - cy.get('.search-filter.filter-company .ms-choice > span') - .contains('Acme'); + cy.get('.search-filter.filter-company .ms-choice > span').contains('Acme'); - cy.get('.search-filter.filter-billingAddressZip select') - .should('have.value', '>='); + cy.get('.search-filter.filter-billingAddressZip select').should('have.value', '>='); cy.get('.search-filter.filter-billingAddressZip') .find('input') .invoke('val') - .then(text => expect(text).to.eq('11')); + .then((text) => expect(text).to.eq('11')); cy.get('.search-filter.filter-finish') .find('input') .invoke('val') - .then(text => expect(text).to.eq(`${presetLowestDay} — ${presetHighestDay}`)); + .then((text) => expect(text).to.eq(`${presetLowestDay} — ${presetHighestDay}`)); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query{users(first:30,offset:0, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query{users(first:30,offset:0, orderBy:[{field:"name",direction:ASC}], filterBy:[{field:"gender",operator:EQ,value:"female"},{field:"name",operator:StartsWith,value:"Jane"}, {field:"company",operator:IN,value:"acme"},{field:"billing.address.zip",operator:GE,value:"11"}, {field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}],locale:"en",userId:123) - {totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)); - }); + {totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`) + ); + }); }); it('should use a range filter when searching with ".."', () => { - cy.get('.slick-header-columns') - .children('.slick-header-left .slick-header-column:nth(0)') - .contains('Name') - .click(); + cy.get('.slick-header-columns').children('.slick-header-left .slick-header-column:nth(0)').contains('Name').click(); - cy.get('.search-filter.filter-name') - .find('input') - .clear() - .type('Anthony Joyner..Ayers Hood'); + cy.get('.search-filter.filter-name').find('input').clear().type('Anthony Joyner..Ayers Hood'); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query { users (first:30,offset:0, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query { users (first:30,offset:0, orderBy:[{field:"name",direction:DESC}], filterBy:[{field:"gender",operator:EQ,value:"female"},{field:"name",operator:GE,value:"Anthony Joyner"},{field:"name",operator:LE,value:"Ayers Hood"}, {field:"company",operator:IN,value:"acme"},{field:"billing.address.zip",operator:GE,value:"11"}, {field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}],locale:"en",userId:123) - {totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)); - }); + {totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`) + ); + }); }); it('should open Date picker and expect date range between 01-Jan to 15-Feb', () => { - cy.get('.search-filter.filter-finish.filled input') - .click({ force: true }); + cy.get('.search-filter.filter-finish.filled input').click({ force: true }); cy.get('.vanilla-calendar:visible'); - cy.get('.vanilla-calendar-column:nth(0) .vanilla-calendar-month') - .should('have.text', 'January'); + cy.get('.vanilla-calendar-column:nth(0) .vanilla-calendar-month').should('have.text', 'January'); - cy.get('.vanilla-calendar-column:nth(1) .vanilla-calendar-month') - .should('have.text', 'February'); + cy.get('.vanilla-calendar-column:nth(1) .vanilla-calendar-month').should('have.text', 'February'); - cy.get('.vanilla-calendar-year:nth(0)') - .should('have.text', currentYear); + cy.get('.vanilla-calendar-year:nth(0)').should('have.text', currentYear); - cy.get('.vanilla-calendar:visible') - .find('.vanilla-calendar-day__btn_selected') - .should('have.length', 46); + cy.get('.vanilla-calendar:visible').find('.vanilla-calendar-day__btn_selected').should('have.length', 46); - cy.get('.vanilla-calendar:visible') - .find('.vanilla-calendar-day__btn_selected') - .first() - .should('have.text', '1'); + cy.get('.vanilla-calendar:visible').find('.vanilla-calendar-day__btn_selected').first().should('have.text', '1'); - cy.get('.vanilla-calendar:visible') - .find('.vanilla-calendar-day__btn_selected') - .last() - .should('have.text', '15'); + cy.get('.vanilla-calendar:visible').find('.vanilla-calendar-day__btn_selected').last().should('have.text', '15'); }); describe('Set Dynamic Sorting', () => { it('should use slower server wait delay to test loading widget', () => { - cy.get('[data-test="server-delay"]') - .clear() - .type('250'); + cy.get('[data-test="server-delay"]').clear().type('250'); }); it('should click on "Clear all Filters & Sorting" then "Set Dynamic Sorting" buttons', () => { - cy.get('[data-test=clear-filters-sorting]') - .click(); + cy.get('[data-test=clear-filters-sorting]').click(); cy.get('[data-test=status]').should('contain', 'processing'); cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=set-dynamic-sorting]') - .click(); + cy.get('[data-test=set-dynamic-sorting]').click(); cy.get('[data-test=status]').should('contain', 'processing'); cy.get('[data-test=status]').should('contain', 'finished'); }); it('should use smaller server wait delay for faster E2E tests', () => { - cy.get('[data-test="server-delay"]') - .clear() - .type('20'); + cy.get('[data-test="server-delay"]').clear().type('20'); }); it('should expect the grid to be sorted by "Zip" descending then by "Company" ascending', () => { @@ -471,26 +446,22 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { .siblings('.slick-sort-indicator-numbered') .contains('1'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query{users(first:30,offset:0, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query{users(first:30,offset:0, orderBy:[{field:"billing.address.zip",direction:DESC},{field:"company",direction:ASC}],locale:"en",userId:123){ - totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)); - }); + totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`) + ); + }); }); it('should open Date picker and no longer expect date range selection in the picker', () => { - cy.get('.search-filter.filter-finish') - .should('not.have.class', 'filled') - .click(); + cy.get('.search-filter.filter-finish').should('not.have.class', 'filled').click(); - cy.get('.vanilla-calendar-year:nth(0)') - .should('have.text', currentYear); + cy.get('.vanilla-calendar-year:nth(0)').should('have.text', currentYear); - cy.get('.vanilla-calendar:visible') - .find('.vanilla-calendar-day__btn_selected') - .should('not.exist'); + cy.get('.vanilla-calendar:visible').find('.vanilla-calendar-day__btn_selected').should('not.exist'); }); }); @@ -556,41 +527,29 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { }); it('should open the Grid Menu and expect all commands be displayed in English', () => { - cy.get('#grid6') - .find('button.slick-grid-menu-button') - .trigger('click'); + cy.get('#grid6').find('button.slick-grid-menu-button').trigger('click'); - cy.get('.slick-grid-menu .slick-menu-title:nth(0)') - .contains('Commands'); + cy.get('.slick-grid-menu .slick-menu-title:nth(0)').contains('Commands'); - cy.get('.slick-grid-menu .slick-menu-item:nth(0) > span') - .contains('Clear all Filters'); + cy.get('.slick-grid-menu .slick-menu-item:nth(0) > span').contains('Clear all Filters'); - cy.get('.slick-grid-menu .slick-menu-item:nth(1) > span') - .contains('Clear all Sorting'); + cy.get('.slick-grid-menu .slick-menu-item:nth(1) > span').contains('Clear all Sorting'); - cy.get('.slick-grid-menu .slick-menu-title:nth(1)') - .contains('Columns'); + cy.get('.slick-grid-menu .slick-menu-title:nth(1)').contains('Columns'); - cy.get('.slick-grid-menu .slick-column-picker-list li:nth(0)') - .contains('Customer Information - Name'); + cy.get('.slick-grid-menu .slick-column-picker-list li:nth(0)').contains('Customer Information - Name'); - cy.get('.slick-grid-menu .slick-column-picker-list li:nth(1)') - .contains('Customer Information - Gender'); + cy.get('.slick-grid-menu .slick-column-picker-list li:nth(1)').contains('Customer Information - Gender'); - cy.get('.slick-grid-menu [data-dismiss=slick-grid-menu].close') - .click({ force: true }); + cy.get('.slick-grid-menu [data-dismiss=slick-grid-menu].close').click({ force: true }); }); it('should switch locale from English to French', () => { - cy.get('[data-test=selected-locale]') - .should('contain', 'en.json'); + cy.get('[data-test=selected-locale]').should('contain', 'en.json'); - cy.get('[data-test=language-button]') - .click(); + cy.get('[data-test=language-button]').click(); - cy.get('[data-test=selected-locale]') - .should('contain', 'fr.json'); + cy.get('[data-test=selected-locale]').should('contain', 'fr.json'); }); it('should have French Column Titles in the grid after switching locale', () => { @@ -611,23 +570,17 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { }); it('should display Pagination in French', () => { - cy.get('.slick-pagination-settings > span') - .contains('éléments par page'); + cy.get('.slick-pagination-settings > span').contains('éléments par page'); - cy.get('.page-info-from-to') - .contains('de'); + cy.get('.page-info-from-to').contains('de'); - cy.get('[data-test=item-from]') - .contains('1'); + cy.get('[data-test=item-from]').contains('1'); - cy.get('[data-test=item-to]') - .contains('30'); + cy.get('[data-test=item-to]').contains('30'); - cy.get('[data-test=total-items]') - .contains('100'); + cy.get('[data-test=total-items]').contains('100'); - cy.get('.page-info-total-items') - .contains('éléments'); + cy.get('.page-info-total-items').contains('éléments'); }); it('should hover over the "Title" column header menu and expect all commands be displayed in French', () => { @@ -667,95 +620,78 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { }); it('should open the Grid Menu and expect all commands be displayed in French', () => { - cy.get('#grid6') - .find('button.slick-grid-menu-button') - .trigger('click'); + cy.get('#grid6').find('button.slick-grid-menu-button').trigger('click'); - cy.get('.slick-grid-menu .slick-menu-title:nth(0)') - .contains('Commandes'); + cy.get('.slick-grid-menu .slick-menu-title:nth(0)').contains('Commandes'); - cy.get('.slick-grid-menu .slick-menu-item:nth(0) > span') - .contains('Supprimer tous les filtres'); + cy.get('.slick-grid-menu .slick-menu-item:nth(0) > span').contains('Supprimer tous les filtres'); - cy.get('.slick-grid-menu .slick-menu-item:nth(1) > span') - .contains('Supprimer tous les tris'); + cy.get('.slick-grid-menu .slick-menu-item:nth(1) > span').contains('Supprimer tous les tris'); - cy.get('.slick-grid-menu .slick-menu-title:nth(1)') - .contains('Colonnes'); + cy.get('.slick-grid-menu .slick-menu-title:nth(1)').contains('Colonnes'); - cy.get('.slick-grid-menu .slick-column-picker-list li:nth(0)') - .contains('Information Client - Nom'); + cy.get('.slick-grid-menu .slick-column-picker-list li:nth(0)').contains('Information Client - Nom'); - cy.get('.slick-grid-menu .slick-column-picker-list li:nth(1)') - .contains('Information Client - Sexe'); + cy.get('.slick-grid-menu .slick-column-picker-list li:nth(1)').contains('Information Client - Sexe'); - cy.get('.slick-grid-menu [data-dismiss=slick-grid-menu].close') - .click({ force: true }); + cy.get('.slick-grid-menu [data-dismiss=slick-grid-menu].close').click({ force: true }); }); it('should click on Set Dynamic Filter and expect query and filters to be changed', () => { - cy.get('[data-test=set-dynamic-filter]') - .click(); + cy.get('[data-test=set-dynamic-filter]').click(); - cy.get('.search-filter.filter-name select') - .should('have.value', 'a*'); + cy.get('.search-filter.filter-name select').should('have.value', 'a*'); cy.get('.search-filter.filter-name') .find('input') .invoke('val') - .then(text => expect(text).to.eq('Jane')); + .then((text) => expect(text).to.eq('Jane')); - cy.get('.search-filter.filter-gender .ms-choice > span') - .contains('Féminin'); + cy.get('.search-filter.filter-gender .ms-choice > span').contains('Féminin'); - cy.get('.search-filter.filter-company .ms-choice > span') - .contains('Acme'); + cy.get('.search-filter.filter-company .ms-choice > span').contains('Acme'); - cy.get('.search-filter.filter-billingAddressZip select') - .should('have.value', '>='); + cy.get('.search-filter.filter-billingAddressZip select').should('have.value', '>='); cy.get('.search-filter.filter-billingAddressZip') .find('input') .invoke('val') - .then(text => expect(text).to.eq('11')); + .then((text) => expect(text).to.eq('11')); cy.get('.search-filter.filter-finish') .find('input') .invoke('val') - .then(text => expect(text).to.eq(`${presetLowestDay} — ${presetHighestDay}`)); + .then((text) => expect(text).to.eq(`${presetLowestDay} — ${presetHighestDay}`)); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query{users(first:30,offset:0, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query{users(first:30,offset:0, filterBy:[{field:"gender",operator:EQ,value:"female"},{field:"name",operator:StartsWith,value:"Jane"}, {field:"company",operator:IN,value:"acme"},{field:"billing.address.zip",operator:GE,value:"11"}, {field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}],locale:"fr",userId:123) - {totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`)); - }); + {totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`) + ); + }); }); it('should have French Text inside some of the Filters', () => { - cy.get('div.ms-filter.filter-gender') - .trigger('click'); + cy.get('div.ms-filter.filter-gender').trigger('click'); cy.get('.ms-drop') .contains('Masculin') // use regexp to avoid finding first Task 3 which is in fact Task 399 .click(); - cy.get('.search-filter.filter-gender .ms-choice > span') - .contains('Masculin'); + cy.get('.search-filter.filter-gender .ms-choice > span').contains('Masculin'); }); it('should switch locale to English', () => { - cy.get('[data-test=language-button]') - .click(); + cy.get('[data-test=language-button]').click(); - cy.get('[data-test=selected-locale]') - .should('contain', 'en.json'); + cy.get('[data-test=selected-locale]').should('contain', 'en.json'); }); }); @@ -777,17 +713,18 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query{users(last:20, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query{users(last:20, orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}], filterBy:[ {field:"gender",operator:EQ,value:"male"}, {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"}, {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"} - ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish},pageInfo{hasNextPage,hasPreviousPage,endCursor,startCursor},edges{cursor}}}`)); - }); + ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish},pageInfo{hasNextPage,hasPreviousPage,endCursor,startCursor},edges{cursor}}}`) + ); + }); }); it('should change Pagination to the first page', () => { @@ -798,17 +735,18 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query{users(first:20, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query{users(first:20, orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}], filterBy:[ {field:"gender",operator:EQ,value:"male"}, {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"}, {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"} - ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish},pageInfo{hasNextPage,hasPreviousPage,endCursor,startCursor},edges{cursor}}}`)); - }); + ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish},pageInfo{hasNextPage,hasPreviousPage,endCursor,startCursor},edges{cursor}}}`) + ); + }); }); it('should change Pagination to next page and all the way to the last', () => { @@ -819,26 +757,29 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { // on page 1, click 4 times to get to page 5 (the last page) cy.wrap([0, 1, 2, 3]).each((el, i) => { cy.wait(25); // Avoid clicking too fast and hitting race conditions because of the setTimeout in the example page (this timeout should be greater than in the page) - cy.get('.icon-seek-next').click().then(() => { - // wait for the query to finish - cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { + cy.get('.icon-seek-next') + .click() + .then(() => { + // wait for the query to finish + cy.get('[data-test=status]').should('contain', 'finished'); + cy.get('[data-test=graphql-query-result]').should(($span) => { // First page is A-B // first click is to get page after A-B // => get first 20 after 'B' const afterCursor = String.fromCharCode('B'.charCodeAt(0) + i); const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query{users(first:20,after:"${afterCursor}", + expect(text).to.eq( + removeWhitespaces(`query{users(first:20,after:"${afterCursor}", orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}], filterBy:[ {field:"gender",operator:EQ,value:"male"}, {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"}, {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"} - ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish},pageInfo{hasNextPage,hasPreviousPage,endCursor,startCursor},edges{cursor}}}`)); + ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish},pageInfo{hasNextPage,hasPreviousPage,endCursor,startCursor},edges{cursor}}}`) + ); }); - }); + }); }); }); @@ -849,26 +790,29 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { // on page 5 (last page), click 4 times to go to page 1 cy.wrap([0, 1, 2, 3]).each((el, i) => { cy.wait(25); // Avoid clicking too fast and hitting race conditions because of the setTimeout in the example page (this timeout should be greater than in the page) - cy.get('.icon-seek-prev').click().then(() => { - // wait for the query to finish - cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { + cy.get('.icon-seek-prev') + .click() + .then(() => { + // wait for the query to finish + cy.get('[data-test=status]').should('contain', 'finished'); + cy.get('[data-test=graphql-query-result]').should(($span) => { // Last page is E-F // first click is to get page before E-F // => get last 20 before 'E' const beforeCursor = String.fromCharCode('E'.charCodeAt(0) - i); const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query{users(last:20,before:"${beforeCursor}", + expect(text).to.eq( + removeWhitespaces(`query{users(last:20,before:"${beforeCursor}", orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}], filterBy:[ {field:"gender",operator:EQ,value:"male"}, {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"}, {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"} - ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish},pageInfo{hasNextPage,hasPreviousPage,endCursor,startCursor},edges{cursor}}}`)); + ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish},pageInfo{hasNextPage,hasPreviousPage,endCursor,startCursor},edges{cursor}}}`) + ); }); - }); + }); }); }); }); @@ -887,39 +831,35 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { .invoke('show') .click(); - cy.get('[data-command=filter-shortcuts-root-menu]') - .trigger('mouseover'); + cy.get('[data-command=filter-shortcuts-root-menu]').trigger('mouseover'); cy.get('.slick-header-menu.slick-menu-level-1') .find('[data-command=next-20-days]') .should('contain', 'Next 20 days') .click(); - cy.get('.search-filter.filter-finish input.date-picker') - .invoke('val') - .should('equal', `${today} — ${next20Day}`); + cy.get('.search-filter.filter-finish input.date-picker').invoke('val').should('equal', `${today} — ${next20Day}`); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeSpaces($span.text()); // remove all white spaces - expect(text).to.eq(removeSpaces(`query { users (first:20,offset:0,orderBy:[{field:"name",direction:ASC}, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeSpaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeSpaces(`query { users (first:20,offset:0,orderBy:[{field:"name",direction:ASC}, {field:"company",direction:DESC}],filterBy:[{field:"gender",operator:EQ,value:"male"}, {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"}, {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${today}"}, {field:"finish",operator:LE,value:"${next20Day}"}],locale:"en",userId:123) { - totalCount, nodes { id,name,gender,company,billing{address{street,zip}},finish}}}`)); - }); + totalCount, nodes { id,name,gender,company,billing{address{street,zip}},finish}}}`) + ); + }); }); it('should switch locale to French', () => { - cy.get('[data-test=language-button]') - .click(); + cy.get('[data-test=language-button]').click(); - cy.get('[data-test=selected-locale]') - .should('contain', 'fr.json'); + cy.get('[data-test=selected-locale]').should('contain', 'fr.json'); }); it('should open header menu of "Finish" again now expect French translations "Filter Shortcuts -> In the Future" and expect date range of the next 20 days', () => { @@ -930,32 +870,29 @@ describe('Example 6 - GraphQL Grid', { retries: 0 }, () => { .invoke('show') .click(); - cy.get('[data-command=filter-shortcuts-root-menu]') - .should('contain', 'Raccourcis de filtre') - .trigger('mouseover'); + cy.get('[data-command=filter-shortcuts-root-menu]').should('contain', 'Raccourcis de filtre').trigger('mouseover'); cy.get('.slick-header-menu.slick-menu-level-1') .find('[data-command=next-20-days]') .should('contain', '20 prochain jours') .click(); - cy.get('.search-filter.filter-finish input.date-picker') - .invoke('val') - .should('equal', `${today} — ${next20Day}`); + cy.get('.search-filter.filter-finish input.date-picker').invoke('val').should('equal', `${today} — ${next20Day}`); // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeSpaces($span.text()); // remove all white spaces - expect(text).to.eq(removeSpaces(`query { users (first:20,offset:0,orderBy:[{field:"name",direction:ASC}, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeSpaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeSpaces(`query { users (first:20,offset:0,orderBy:[{field:"name",direction:ASC}, {field:"company",direction:DESC}],filterBy:[{field:"gender",operator:EQ,value:"male"}, {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"}, {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${today}"}, {field:"finish",operator:LE,value:"${next20Day}"}],locale:"fr",userId:123) { - totalCount, nodes { id,name,gender,company,billing{address{street,zip}},finish}}}`)); - }); + totalCount, nodes { id,name,gender,company,billing{address{street,zip}},finish}}}`) + ); + }); }); }); }); diff --git a/test/cypress/e2e/example07.cy.ts b/test/cypress/e2e/example07.cy.ts index 4a56e866b..b27930418 100644 --- a/test/cypress/e2e/example07.cy.ts +++ b/test/cypress/e2e/example07.cy.ts @@ -1,5 +1,16 @@ describe('Example 7 - Header Button Plugin', () => { - const titles = ['Resize me!', 'Hover me!', 'Column C', 'Column D', 'Column E', 'Column F', 'Column G', 'Column H', 'Column I', 'Column J']; + const titles = [ + 'Resize me!', + 'Hover me!', + 'Column C', + 'Column D', + 'Column E', + 'Column F', + 'Column G', + 'Column H', + 'Column I', + 'Column J', + ]; beforeEach(() => { // create a console.log spy for later use @@ -21,9 +32,7 @@ describe('Example 7 - Header Button Plugin', () => { }); it('should go over the 3rd column "Column C" and expect to see negative number in red after clicking on the red header button', () => { - cy.get('#grid7-1 .slick-header-columns') - .children('.slick-header-column:nth(2)') - .should('contain', 'Column C'); + cy.get('#grid7-1 .slick-header-columns').children('.slick-header-column:nth(2)').should('contain', 'Column C'); cy.get('#grid7-1 .slick-header-columns') .children('.slick-header-column:nth(2)') @@ -40,28 +49,26 @@ describe('Example 7 - Header Button Plugin', () => { expect(win.console.log).to.be.calledWith(`execute a callback action to "toggle-highlight" on Column C`); }); - cy.get('#grid7-1 .slick-row') - .each(($row, index) => { - if (index > 10) { - return; // check only the first 10 rows is enough - } - cy.wrap($row).children('.slick-cell:nth(2)') - .each($cell => { - const numberValue = $cell.text(); - const htmlValue = $cell.html(); - if (+numberValue < 0) { - expect(htmlValue).to.eq(`
    ${numberValue}
    `); - } else { - expect(htmlValue).to.eq(numberValue); - } - }); - }); + cy.get('#grid7-1 .slick-row').each(($row, index) => { + if (index > 10) { + return; // check only the first 10 rows is enough + } + cy.wrap($row) + .children('.slick-cell:nth(2)') + .each(($cell) => { + const numberValue = $cell.text(); + const htmlValue = $cell.html(); + if (+numberValue < 0) { + expect(htmlValue).to.eq(`
    ${numberValue}
    `); + } else { + expect(htmlValue).to.eq(numberValue); + } + }); + }); }); it('should go over the 5th column "Column E" and not find the red header button', () => { - cy.get('#grid7-1 .slick-header-columns') - .children('.slick-header-column:nth(4)') - .should('contain', 'Column E'); + cy.get('#grid7-1 .slick-header-columns').children('.slick-header-column:nth(4)').should('contain', 'Column E'); // column E should not have the icon cy.get('#grid7-1 .slick-header-columns') @@ -71,9 +78,7 @@ describe('Example 7 - Header Button Plugin', () => { }); it('should go over the last "Column J" and expect to find the button to have the disabled class and clicking it should not turn the negative numbers to red neither expect console log after clicking the disabled button', () => { - cy.get('#grid7-1 .slick-viewport-top.slick-viewport-left') - .scrollTo('right') - .wait(50); + cy.get('#grid7-1 .slick-viewport-top.slick-viewport-left').scrollTo('right').wait(50); cy.get('#grid7-1 .slick-header-columns') .children('.slick-header-column:nth(9)') @@ -92,14 +97,14 @@ describe('Example 7 - Header Button Plugin', () => { .find('.slick-header-button.slick-header-button-disabled.mdi-lightbulb-outline.text-warning.faded') .should('exist'); // should still be faded after previous click - cy.get('#grid7-1 .slick-row') - .each(($row, index) => { - if (index > 10) { - return; - } - cy.wrap($row).children('.slick-cell:nth(9)') - .each($cell => expect($cell.html()).to.eq($cell.text())); - }); + cy.get('#grid7-1 .slick-row').each(($row, index) => { + if (index > 10) { + return; + } + cy.wrap($row) + .children('.slick-cell:nth(9)') + .each(($cell) => expect($cell.html()).to.eq($cell.text())); + }); cy.window().then((win) => { expect(win.console.log).to.have.callCount(0); @@ -107,13 +112,9 @@ describe('Example 7 - Header Button Plugin', () => { }); it('should resize 1st column and make it wider', () => { - cy.get('#grid7-1 .slick-viewport-top.slick-viewport-left') - .scrollTo('left') - .wait(50); + cy.get('#grid7-1 .slick-viewport-top.slick-viewport-left').scrollTo('left').wait(50); - cy.get('#grid7-1 .slick-header-columns') - .children('.slick-header-column:nth(0)') - .should('contain', 'Resize me!'); + cy.get('#grid7-1 .slick-header-columns').children('.slick-header-column:nth(0)').should('contain', 'Resize me!'); cy.get('#grid7-1 .slick-header-columns') .children('.slick-header-column:nth(0)') @@ -124,17 +125,16 @@ describe('Example 7 - Header Button Plugin', () => { // this is not ideal since it only resizes the cell not the entire column but it's enough to test the functionality cy.get('#grid7-1 .slick-header-column:nth(0)') // resize the 1st column - .each($elm => $elm.width(140)) + .each(($elm) => $elm.width(140)) .find('.slick-resizable-handle') .should('be.visible') .invoke('show'); - cy.get('#grid7-1 .slick-header-column:nth(0)') - .should(($el) => { - const expectedWidth = 140; // calculate with a calculated width including a (+/-)1px precision - expect($el.width()).greaterThan(expectedWidth - 1); - expect($el.width()).lessThan(expectedWidth + 1); - }); + cy.get('#grid7-1 .slick-header-column:nth(0)').should(($el) => { + const expectedWidth = 140; // calculate with a calculated width including a (+/-)1px precision + expect($el.width()).greaterThan(expectedWidth - 1); + expect($el.width()).lessThan(expectedWidth + 1); + }); cy.get('#grid7-1 .slick-header-columns') .children('.slick-header-column:nth(0)') @@ -145,7 +145,7 @@ describe('Example 7 - Header Button Plugin', () => { it('should resize column to its previous size and still expect some icons to be hidden', () => { cy.get('#grid7-1 .slick-header-column:nth(0)') // resize the 1st column - .each($elm => $elm.width(50)) + .each(($elm) => $elm.width(50)) .find('.slick-resizable-handle') .should('be.visible') .invoke('show'); @@ -162,9 +162,7 @@ describe('Example 7 - Header Button Plugin', () => { }); it('should go on the 2nd column "Hover me!" and expect the header button to appear only when doing hover over it', () => { - cy.get('#grid7-1 .slick-header-columns') - .children('.slick-header-column:nth(1)') - .should('contain', 'Hover me!'); + cy.get('#grid7-1 .slick-header-columns').children('.slick-header-column:nth(1)').should('contain', 'Hover me!'); cy.get('#grid7-1 .slick-header-columns') .children('.slick-header-column:nth(1)') @@ -182,9 +180,7 @@ describe('Example 7 - Header Button Plugin', () => { }); it('should go over the 3rd column "Column C" and expect to see negative number in red after clicking on the red header button', () => { - cy.get('#grid7-2 .slick-header-columns') - .children('.slick-header-column:nth(2)') - .should('contain', 'Column C'); + cy.get('#grid7-2 .slick-header-columns').children('.slick-header-column:nth(2)').should('contain', 'Column C'); cy.get('#grid7-2 .slick-header-columns') .children('.slick-header-column:nth(2)') @@ -201,28 +197,26 @@ describe('Example 7 - Header Button Plugin', () => { expect(win.console.log).to.be.calledWith(`execute a callback action to "toggle-highlight" on Column C`); }); - cy.get('#grid7-2 .slick-row') - .each(($row, index) => { - if (index > 10) { - return; // check only the first 10 rows is enough - } - cy.wrap($row).children('.slick-cell:nth(2)') - .each($cell => { - const numberValue = $cell.text(); - const htmlValue = $cell.html(); - if (+numberValue < 0) { - expect(htmlValue).to.eq(`
    ${numberValue}
    `); - } else { - expect(htmlValue).to.eq(numberValue); - } - }); - }); + cy.get('#grid7-2 .slick-row').each(($row, index) => { + if (index > 10) { + return; // check only the first 10 rows is enough + } + cy.wrap($row) + .children('.slick-cell:nth(2)') + .each(($cell) => { + const numberValue = $cell.text(); + const htmlValue = $cell.html(); + if (+numberValue < 0) { + expect(htmlValue).to.eq(`
    ${numberValue}
    `); + } else { + expect(htmlValue).to.eq(numberValue); + } + }); + }); }); it('should go over the 5th column "Column E" and not find the red header button', () => { - cy.get('#grid7-2 .slick-header-columns') - .children('.slick-header-column:nth(4)') - .should('contain', 'Column E'); + cy.get('#grid7-2 .slick-header-columns').children('.slick-header-column:nth(4)').should('contain', 'Column E'); // column E should not have the icon cy.get('#grid7-2 .slick-header-columns') @@ -232,9 +226,7 @@ describe('Example 7 - Header Button Plugin', () => { }); it('should go over the last "Column J" and expect to find the button to have the disabled class and clicking it should not turn the negative numbers to red neither expect console log after clicking the disabled button', () => { - cy.get('#grid7-2 .slick-viewport-top.slick-viewport-left') - .scrollTo('right') - .wait(50); + cy.get('#grid7-2 .slick-viewport-top.slick-viewport-left').scrollTo('right').wait(50); cy.get('#grid7-2 .slick-header-columns') .children('.slick-header-column:nth(9)') @@ -253,14 +245,14 @@ describe('Example 7 - Header Button Plugin', () => { .find('.slick-header-button.slick-header-button-disabled.mdi-lightbulb-outline.text-warning.faded') .should('exist'); // should still be faded after previous click - cy.get('#grid7-2 .slick-row') - .each(($row, index) => { - if (index > 10) { - return; - } - cy.wrap($row).children('.slick-cell:nth(9)') - .each($cell => expect($cell.html()).to.eq($cell.text())); - }); + cy.get('#grid7-2 .slick-row').each(($row, index) => { + if (index > 10) { + return; + } + cy.wrap($row) + .children('.slick-cell:nth(9)') + .each(($cell) => expect($cell.html()).to.eq($cell.text())); + }); cy.window().then((win) => { expect(win.console.log).to.have.callCount(0); @@ -268,13 +260,9 @@ describe('Example 7 - Header Button Plugin', () => { }); it('should resize 1st column and make it wider', () => { - cy.get('#grid7-2 .slick-viewport-top.slick-viewport-left') - .scrollTo('left') - .wait(50); + cy.get('#grid7-2 .slick-viewport-top.slick-viewport-left').scrollTo('left').wait(50); - cy.get('#grid7-2 .slick-header-columns') - .children('.slick-header-column:nth(0)') - .should('contain', 'Resize me!'); + cy.get('#grid7-2 .slick-header-columns').children('.slick-header-column:nth(0)').should('contain', 'Resize me!'); cy.get('#grid7-2 .slick-header-columns') .children('.slick-header-column:nth(0)') @@ -285,17 +273,16 @@ describe('Example 7 - Header Button Plugin', () => { // this is not ideal since it only resizes the cell not the entire column but it's enough to test the functionality cy.get('#grid7-2 .slick-header-column:nth(0)') // resize the 1st column - .each($elm => $elm.width(140)) + .each(($elm) => $elm.width(140)) .find('.slick-resizable-handle') .should('be.visible') .invoke('show'); - cy.get('#grid7-2 .slick-header-column:nth(0)') - .should(($el) => { - const expectedWidth = 140; // calculate with a calculated width including a (+/-)1px precision - expect($el.width()).greaterThan(expectedWidth - 1); - expect($el.width()).lessThan(expectedWidth + 1); - }); + cy.get('#grid7-2 .slick-header-column:nth(0)').should(($el) => { + const expectedWidth = 140; // calculate with a calculated width including a (+/-)1px precision + expect($el.width()).greaterThan(expectedWidth - 1); + expect($el.width()).lessThan(expectedWidth + 1); + }); cy.get('#grid7-2 .slick-header-columns') .children('.slick-header-column:nth(0)') @@ -306,7 +293,7 @@ describe('Example 7 - Header Button Plugin', () => { it('should resize column to its previous size and still expect some icons to be hidden', () => { cy.get('#grid7-2 .slick-header-column:nth(0)') // resize the 1st column - .each($elm => $elm.width(50)) + .each(($elm) => $elm.width(50)) .find('.slick-resizable-handle') .should('be.visible') .invoke('show'); @@ -323,9 +310,7 @@ describe('Example 7 - Header Button Plugin', () => { }); it('should go on the 2nd column "Hover me!" and expect the header button to appear only when doing hover over it', () => { - cy.get('#grid7-2 .slick-header-columns') - .children('.slick-header-column:nth(1)') - .should('contain', 'Hover me!'); + cy.get('#grid7-2 .slick-header-columns').children('.slick-header-column:nth(1)').should('contain', 'Hover me!'); cy.get('#grid7-2 .slick-header-columns') .children('.slick-header-column:nth(1)') @@ -335,20 +320,19 @@ describe('Example 7 - Header Button Plugin', () => { }); it('should filter "Column C" with positive number only and not expect any more red values', () => { - cy.get('#grid7-2 .search-filter.filter-2') - .type('>0'); - - cy.get('#grid7-2 .slick-row') - .each(($row, index) => { - if (index > 10) { - return; // check only the first 10 rows is enough - } - cy.wrap($row).children('.slick-cell:nth(2)') - .each($cell => { - const numberValue = $cell.text(); - expect(+numberValue).to.be.greaterThan(0); - }); - }); + cy.get('#grid7-2 .search-filter.filter-2').type('>0'); + + cy.get('#grid7-2 .slick-row').each(($row, index) => { + if (index > 10) { + return; // check only the first 10 rows is enough + } + cy.wrap($row) + .children('.slick-cell:nth(2)') + .each(($cell) => { + const numberValue = $cell.text(); + expect(+numberValue).to.be.greaterThan(0); + }); + }); }); it('should hover over the "Column C" and click on "Clear Filter" and expect grid to have all rows shown', () => { @@ -370,24 +354,13 @@ describe('Example 7 - Header Button Plugin', () => { }); it('should Clear all Sorting', () => { - cy.get('#grid7-2') - .find('button.slick-grid-menu-button') - .trigger('click') - .click({ force: true }); + cy.get('#grid7-2').find('button.slick-grid-menu-button').trigger('click').click({ force: true }); - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item:nth(1)') - .find('span') - .contains('Clear all Sorting') - .click(); + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item:nth(1)').find('span').contains('Clear all Sorting').click(); }); it('should hover over the "Column C" and click on "Sort Ascending"', () => { - cy.get('#grid7-2 .slick-header-column:nth(2)') - .first() - .trigger('mouseover') - .children('.slick-header-menu-button') - .click(); + cy.get('#grid7-2 .slick-header-column:nth(2)').first().trigger('mouseover').children('.slick-header-menu-button').click(); cy.get('#grid7-2 .slick-header-menu .slick-menu-command-list') .should('be.visible') @@ -398,22 +371,20 @@ describe('Example 7 - Header Button Plugin', () => { }); it('should expect first few items of "Column C" to be negative numbers and be red', () => { - cy.get('#grid7-2 .slick-viewport-top.slick-viewport-left') - .scrollTo('top') - .wait(50); - - cy.get('#grid7-2 .slick-row') - .each(($row, index) => { - if (index > 10) { - return; // check only the first 10 rows is enough - } - cy.wrap($row).children('.slick-cell:nth(2)') - .each($cell => { - const numberValue = $cell.text(); - const htmlValue = $cell.html(); - expect(htmlValue).to.eq(`
    ${numberValue}
    `); - }); - }); + cy.get('#grid7-2 .slick-viewport-top.slick-viewport-left').scrollTo('top').wait(50); + + cy.get('#grid7-2 .slick-row').each(($row, index) => { + if (index > 10) { + return; // check only the first 10 rows is enough + } + cy.wrap($row) + .children('.slick-cell:nth(2)') + .each(($cell) => { + const numberValue = $cell.text(); + const htmlValue = $cell.html(); + expect(htmlValue).to.eq(`
    ${numberValue}
    `); + }); + }); }); }); -}); \ No newline at end of file +}); diff --git a/test/cypress/e2e/example08.cy.ts b/test/cypress/e2e/example08.cy.ts index a8931820c..11985f071 100644 --- a/test/cypress/e2e/example08.cy.ts +++ b/test/cypress/e2e/example08.cy.ts @@ -30,16 +30,11 @@ describe('Example 8 - Header Menu Plugin', () => { .invoke('show') .click(); - cy.get('.slick-menu-item.slick-menu-item-disabled') - .contains('Help') - .should('exist'); + cy.get('.slick-menu-item.slick-menu-item-disabled').contains('Help').should('exist'); - cy.get('.slick-menu-item .slick-menu-content') - .contains('Hide Column') - .should('exist'); + cy.get('.slick-menu-item .slick-menu-content').contains('Hide Column').should('exist'); - cy.get('[data-test=selected-locale]') - .click(); + cy.get('[data-test=selected-locale]').click(); }); it(`should be still be able to click on the Help command of 2nd column "Duration" and expect an alert`, () => { @@ -58,7 +53,7 @@ describe('Example 8 - Header Menu Plugin', () => { .find('.slick-menu-content.blue') .contains('Help') .click() - .then(() => expect(alertStub.getCall(0)).to.be.calledWith('Please help!!!')) + .then(() => expect(alertStub.getCall(0)).to.be.calledWith('Please help!!!')); cy.window().then((win) => { expect(win.console.log).to.have.callCount(1); @@ -74,9 +69,7 @@ describe('Example 8 - Header Menu Plugin', () => { .invoke('show') .click(); - cy.get('.slick-menu-item .slick-menu-content') - .contains('Sort Ascending') - .click(); + cy.get('.slick-menu-item .slick-menu-content').contains('Sort Ascending').click(); cy.get('.slick-header-column:nth(1).slick-header-sortable.slick-header-column-sorted') .find('.slick-sort-indicator.slick-sort-indicator-asc') @@ -92,22 +85,15 @@ describe('Example 8 - Header Menu Plugin', () => { .invoke('show') .click(); - cy.get('.slick-header-menu .slick-menu-command-list') - .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list').should('exist'); - cy.get('.slick-menu-item .slick-menu-content') - .contains('Help') - .should('not.exist'); + cy.get('.slick-menu-item .slick-menu-content').contains('Help').should('not.exist'); }); it('should execute "Sort Descending" command from the menu left open and expect 2 sort icons afterward and "% Completed" to be descending with >80', () => { - cy.get('.slick-header-menu .slick-menu-command-list') - .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list').should('exist'); - cy.get('.slick-menu-item .slick-menu-content') - .contains('Sort Descending') - .click() - .wait(10); + cy.get('.slick-menu-item .slick-menu-content').contains('Sort Descending').click().wait(10); cy.get('.slick-header-column:nth(1).slick-header-sortable.slick-header-column-sorted') .find('.slick-sort-indicator.slick-sort-indicator-asc') @@ -117,13 +103,11 @@ describe('Example 8 - Header Menu Plugin', () => { .find('.slick-sort-indicator.slick-sort-indicator-desc') .should('exist'); - cy.get('#grid8') - .find('.slick-row .slick-cell:nth(1)') - .contains('0 days'); + cy.get('#grid8').find('.slick-row .slick-cell:nth(1)').contains('0 days'); cy.get('#grid8') .find('.slick-row .slick-cell:nth(2)') - .each($row => { + .each(($row) => { expect(+$row.text()).to.be.greaterThan(60); }); }); @@ -137,17 +121,13 @@ describe('Example 8 - Header Menu Plugin', () => { .invoke('show') .click(); - cy.get('.slick-menu-item.slick-menu-item-disabled') - .contains('Help') - .should('exist'); + cy.get('.slick-menu-item.slick-menu-item-disabled').contains('Help').should('exist'); }); it('should remain in the "Completed" column and execute "Hide Column" command and expect it gone from the grid', () => { const titles = ['Title', 'Duration', '% Complete', 'Start', 'Finish']; - cy.get('.slick-menu-item.slick-menu-item') - .contains('Hide Column') - .click(); + cy.get('.slick-menu-item.slick-menu-item').contains('Hide Column').click(); cy.get('#grid8') .find('.slick-header-columns') diff --git a/test/cypress/e2e/example09.cy.ts b/test/cypress/e2e/example09.cy.ts index 00b62512d..7a632a5d4 100644 --- a/test/cypress/e2e/example09.cy.ts +++ b/test/cypress/e2e/example09.cy.ts @@ -23,24 +23,13 @@ describe('Example 9 - Grid Menu', () => { }); it('should open the Grid Menu and expect a title for "Custom Menus" and for "Columns"', () => { - cy.get('#grid9') - .find('button.slick-grid-menu-button') - .trigger('click') - .click({ force: true }); + cy.get('#grid9').find('button.slick-grid-menu-button').trigger('click').click({ force: true }); - cy.get('.slick-menu-command-list') - .find('.slick-menu-title') - .contains('Custom Commands'); + cy.get('.slick-menu-command-list').find('.slick-menu-title').contains('Custom Commands'); - cy.get('.slick-grid-menu') - .find('.slick-menu-title') - .contains('Columns'); + cy.get('.slick-grid-menu').find('.slick-menu-title').contains('Columns'); - cy.get('#grid9') - .get('.slick-grid-menu:visible') - .find('.close') - .trigger('click') - .click({ force: true }); + cy.get('#grid9').get('.slick-grid-menu:visible').find('.close').trigger('click').click({ force: true }); }); it('should hover over the Title column and click on "Hide Column" command and remove 1st column from grid', () => { @@ -72,10 +61,7 @@ describe('Example 9 - Grid Menu', () => { const alertStub = cy.stub(); cy.on('window:alert', alertStub); - cy.get('#grid9') - .find('button.slick-grid-menu-button') - .trigger('click') - .click({ force: true }); + cy.get('#grid9').find('button.slick-grid-menu-button').trigger('click').click({ force: true }); cy.get('.slick-menu-item.orange') .find('.slick-menu-content') @@ -83,57 +69,33 @@ describe('Example 9 - Grid Menu', () => { .click() .then(() => expect(alertStub.getCall(0)).to.be.null); - cy.get('#grid9') - .get('.slick-grid-menu:visible') - .find('.close') - .trigger('click') - .click({ force: true }); + cy.get('#grid9').get('.slick-grid-menu:visible').find('.close').trigger('click').click({ force: true }); }); it('should type a filter and then open the Grid Menu and expect the "Command 2" to NOT be visible', () => { - cy.get('input.search-filter.filter-duration') - .type('10'); + cy.get('input.search-filter.filter-duration').type('10'); - cy.get('#grid9') - .find('button.slick-grid-menu-button') - .trigger('click') - .click({ force: true }); + cy.get('#grid9').find('button.slick-grid-menu-button').trigger('click').click({ force: true }); - cy.get('.slick-menu-item.red') - .should('not.exist'); + cy.get('.slick-menu-item.red').should('not.exist'); }); it('should clear all filters and expect no filters in the grid', () => { - cy.get('#grid9') - .find('button.slick-grid-menu-button') - .trigger('click') - .click({ force: true }); + cy.get('#grid9').find('button.slick-grid-menu-button').trigger('click').click({ force: true }); - cy.get('.slick-menu-item') - .find('.slick-menu-content') - .contains('Clear all Filters') - .click(); + cy.get('.slick-menu-item').find('.slick-menu-content').contains('Clear all Filters').click(); - cy.get('input.search-filter.filter-duration') - .each(($elm) => expect($elm.text()).to.eq('')); + cy.get('input.search-filter.filter-duration').each(($elm) => expect($elm.text()).to.eq('')); }); it('should clear the filters and then open the Grid Menu and expect the "Command 2" to now be visible', () => { - cy.get('#grid9') - .find('button.slick-grid-menu-button') - .trigger('click') - .click({ force: true }); + cy.get('#grid9').find('button.slick-grid-menu-button').trigger('click').click({ force: true }); - cy.get('.slick-menu-item.red') - .find('.slick-menu-content.italic') - .should('contain', 'Command 2'); + cy.get('.slick-menu-item.red').find('.slick-menu-content.italic').should('contain', 'Command 2'); }); it('should click on the Grid Menu to show the Title as 1st column again', () => { - cy.get('#grid9') - .find('button.slick-grid-menu-button') - .trigger('click') - .click({ force: true }); + cy.get('#grid9').find('button.slick-grid-menu-button').trigger('click').click({ force: true }); cy.get('#grid9') .get('.slick-grid-menu:visible') @@ -143,11 +105,7 @@ describe('Example 9 - Grid Menu', () => { .should('contain', 'Title') .click({ force: true }); - cy.get('#grid9') - .get('.slick-grid-menu:visible') - .find('.close') - .trigger('click') - .click({ force: true }); + cy.get('#grid9').get('.slick-grid-menu:visible').find('.close').trigger('click').click({ force: true }); cy.get('#grid9') .find('.slick-header-columns') @@ -159,10 +117,7 @@ describe('Example 9 - Grid Menu', () => { const alertStub = cy.stub(); cy.on('window:alert', alertStub); - cy.get('#grid9') - .find('button.slick-grid-menu-button') - .trigger('click') - .click({ force: true }); + cy.get('#grid9').find('button.slick-grid-menu-button').trigger('click').click({ force: true }); cy.get('.slick-menu-item.orange') .find('.slick-menu-content') @@ -197,9 +152,7 @@ describe('Example 9 - Grid Menu', () => { }); it('should click on the External Grid Menu to show the Title as 1st column again', () => { - cy.get('[data-test=external-gridmenu]') - .trigger('click') - .click({ force: true }); + cy.get('[data-test=external-gridmenu]').trigger('click').click({ force: true }); cy.get('#grid9') .get('.slick-grid-menu:visible') @@ -209,11 +162,7 @@ describe('Example 9 - Grid Menu', () => { .should('contain', 'Title') .click({ force: true }); - cy.get('#grid9') - .get('.slick-grid-menu:visible') - .find('.close') - .trigger('click') - .click({ force: true }); + cy.get('#grid9').get('.slick-grid-menu:visible').find('.close').trigger('click').click({ force: true }); cy.get('#grid9') .find('.slick-header-columns') @@ -224,11 +173,9 @@ describe('Example 9 - Grid Menu', () => { describe('switch to French language', () => { it('should switch locale to French and have column header titles in French', () => { - cy.get('[data-test=language]') - .click({ force: true }); + cy.get('[data-test=language]').click({ force: true }); - cy.get('[data-test=selected-locale]') - .should('contain', 'fr.json'); + cy.get('[data-test=selected-locale]').should('contain', 'fr.json'); cy.get('#grid9') .find('.slick-header-columns') @@ -262,10 +209,7 @@ describe('Example 9 - Grid Menu', () => { }); it('should click on the Grid Menu to show the Title as 1st column again', () => { - cy.get('#grid9') - .find('button.slick-grid-menu-button') - .trigger('click') - .click({ force: true }); + cy.get('#grid9').find('button.slick-grid-menu-button').trigger('click').click({ force: true }); cy.get('#grid9') .get('.slick-grid-menu:visible') @@ -307,9 +251,7 @@ describe('Example 9 - Grid Menu', () => { }); it('should click on the External Grid Menu to show the Title as 1st column again', () => { - cy.get('[data-test=external-gridmenu]') - .trigger('click') - .click({ force: true }); + cy.get('[data-test=external-gridmenu]').trigger('click').click({ force: true }); cy.get('#grid9') .get('.slick-grid-menu:visible') @@ -319,27 +261,20 @@ describe('Example 9 - Grid Menu', () => { .should('contain', 'Titre') .click({ force: true }); - cy.get('#grid9') - .get('.slick-grid-menu:visible') - .find('.close') - .trigger('click') - .click({ force: true }); + cy.get('#grid9').get('.slick-grid-menu:visible').find('.close').trigger('click').click({ force: true }); cy.get('#grid9') .find('.slick-header-columns') .children() .each(($child, index) => expect($child.text()).to.eq(fullFrenchTitles[index])); - }); }); describe('Grid Menu with sub-menus', () => { it('should switch locale back to English', () => { - cy.get('[data-test=language]') - .click({ force: true }); + cy.get('[data-test=language]').click({ force: true }); - cy.get('[data-test=selected-locale]') - .should('contain', 'en.json'); + cy.get('[data-test=selected-locale]').should('contain', 'en.json'); cy.get('#grid9') .find('.slick-header-columns') @@ -352,14 +287,9 @@ describe('Example 9 - Grid Menu', () => { const stub = cy.stub(); cy.on('window:alert', stub); - cy.get('#grid9') - .find('button.slick-grid-menu-button') - .click({ force: true }); + cy.get('#grid9').find('button.slick-grid-menu-button').click({ force: true }); - cy.get('.slick-grid-menu.slick-menu-level-0 .slick-menu-command-list') - .find('.slick-menu-item') - .contains('Exports') - .click(); + cy.get('.slick-grid-menu.slick-menu-level-0 .slick-menu-command-list').find('.slick-menu-item').contains('Exports').click(); cy.get('.slick-grid-menu.slick-menu-level-1 .slick-menu-command-list') .should('exist') @@ -379,14 +309,9 @@ describe('Example 9 - Grid Menu', () => { const stub = cy.stub(); cy.on('window:alert', stub); - cy.get('#grid9') - .find('button.slick-grid-menu-button') - .click({ force: true }); + cy.get('#grid9').find('button.slick-grid-menu-button').click({ force: true }); - cy.get('.slick-grid-menu.slick-menu-level-0 .slick-menu-command-list') - .find('.slick-menu-item') - .contains('Exports') - .click(); + cy.get('.slick-grid-menu.slick-menu-level-0 .slick-menu-command-list').find('.slick-menu-item').contains('Exports').click(); cy.get('.slick-grid-menu.slick-menu-level-1 .slick-menu-command-list') .should('exist') @@ -394,16 +319,11 @@ describe('Example 9 - Grid Menu', () => { .each(($command, index) => expect($command.text()).to.contain(subCommands1[index])); cy.get('.slick-submenu').should('have.length', 1); - cy.get('.slick-grid-menu.slick-menu-level-1 .slick-menu-command-list') - .find('.slick-menu-item') - .contains('Excel') - .click(); + cy.get('.slick-grid-menu.slick-menu-level-1 .slick-menu-command-list').find('.slick-menu-item').contains('Excel').click(); cy.get('.slick-grid-menu.slick-menu-level-2 .slick-menu-command-list').as('subMenuList2'); - cy.get('@subMenuList2') - .find('.slick-menu-title') - .contains('available formats'); + cy.get('@subMenuList2').find('.slick-menu-title').contains('available formats'); cy.get('@subMenuList2') .should('exist') @@ -427,13 +347,9 @@ describe('Example 9 - Grid Menu', () => { const stub = cy.stub(); cy.on('window:alert', stub); - cy.get('[data-test=external-gridmenu]') - .click(); + cy.get('[data-test=external-gridmenu]').click(); - cy.get('.slick-grid-menu.slick-menu-level-0 .slick-menu-command-list') - .find('.slick-menu-item') - .contains('Export') - .click(); + cy.get('.slick-grid-menu.slick-menu-level-0 .slick-menu-command-list').find('.slick-menu-item').contains('Export').click(); cy.get('.slick-grid-menu.slick-menu-level-1 .slick-menu-command-list') .should('exist') diff --git a/test/cypress/e2e/example10.cy.ts b/test/cypress/e2e/example10.cy.ts index 3fa54954c..57e70f1ea 100644 --- a/test/cypress/e2e/example10.cy.ts +++ b/test/cypress/e2e/example10.cy.ts @@ -4,7 +4,7 @@ describe('Example 10 - Multiple Grids with Row Selection', () => { beforeEach(() => { // create a console.log spy for later use cy.window().then((win) => { - cy.spy(win.console, "log"); + cy.spy(win.console, 'log'); }); }); @@ -19,14 +19,14 @@ describe('Example 10 - Multiple Grids with Row Selection', () => { cy.get('@grid1') .find('.slickgrid-container') - .should($el => expect(parseInt(`${$el.height()}`, 10)).to.eq(225)); + .should(($el) => expect(parseInt(`${$el.height()}`, 10)).to.eq(225)); cy.get('#slickGridContainer-grid2').as('grid2'); cy.get('@grid2').should('have.css', 'width', '800px'); cy.get('@grid2') .find('.slickgrid-container') - .should($el => expect(parseInt(`${$el.height()}`, 10)).to.eq(255)); + .should(($el) => expect(parseInt(`${$el.height()}`, 10)).to.eq(255)); }); it('should have exact Titles on 1st grid', () => { @@ -41,36 +41,21 @@ describe('Example 10 - Multiple Grids with Row Selection', () => { it('should have 1 rows (Task 3) pre-selected in 2nd grid on its first page but 5 rows selected in the entire dataset', () => { cy.get('[data-test=grid2-selections]').should('contain', 'Task 3,Task 12,Task 13,Task 522'); - cy.get('#grid2') - .find('.slick-row') - .children() - .filter('.slick-cell-checkboxsel.selected') - .should('have.length', 1); + cy.get('#grid2').find('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 1); }); it('should have 2 rows (Task 12,Task 13) selected in 2nd grid after typing in a search filter', () => { - cy.get('#grid2') - .find('.filter-title') - .type('Task 1'); + cy.get('#grid2').find('.filter-title').type('Task 1'); - cy.get('#grid2') - .find('.slick-row') - .should('not.have.length', 0); + cy.get('#grid2').find('.slick-row').should('not.have.length', 0); cy.get('[data-test=grid2-selections]').should('contain', ''); - cy.get('#grid2') - .find('.slick-row') - .children() - .filter('.slick-cell-checkboxsel.selected') - .should('have.length', 2); + cy.get('#grid2').find('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 2); }); it('should make sure that first column is hidden from the Grid Menu (1st column definition has "excludeFromGridMenu" set) on 1st grid', () => { - cy.get('#grid1') - .find('button.slick-grid-menu-button') - .trigger('click') - .click(); + cy.get('#grid1').find('button.slick-grid-menu-button').trigger('click').click(); cy.get('.slick-grid-menu') .find('.slick-column-picker-list') @@ -103,20 +88,11 @@ describe('Example 10 - Multiple Grids with Row Selection', () => { expect($child.text()).to.eq(newTitleList[index]); }); - cy.get('#grid1') - .get('.slick-grid-menu:visible') - .find('.close') - .trigger('click') - .click(); + cy.get('#grid1').get('.slick-grid-menu:visible').find('.close').trigger('click').click(); }); it('should show the Title column again from the Column Picker in the 1st grid', () => { - cy.get('#grid1') - .find('.slick-header-column') - .first() - .trigger('mouseover') - .trigger('contextmenu') - .invoke('show'); + cy.get('#grid1').find('.slick-header-column').first().trigger('mouseover').trigger('contextmenu').invoke('show'); cy.get('.slick-column-picker') .find('.slick-column-picker-list') @@ -144,26 +120,14 @@ describe('Example 10 - Multiple Grids with Row Selection', () => { expect($child.text()).to.eq(titles[index]); }); - cy.get('#grid1') - .get('.slick-column-picker:visible') - .find('.close') - .trigger('click') - .click(); + cy.get('#grid1').get('.slick-column-picker:visible').find('.close').trigger('click').click(); }); describe('Pagination', () => { it('should Clear all Filters on 2nd Grid', () => { - cy.get('#grid2') - .find('button.slick-grid-menu-button') - .trigger('click') - .click(); + cy.get('#grid2').find('button.slick-grid-menu-button').trigger('click').click(); - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item') - .first() - .find('span') - .contains('Clear all Filters') - .click(); + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click(); }); it('should have Pagination displayed and set on Grid1 and Grid2', () => { @@ -174,202 +138,116 @@ describe('Example 10 - Multiple Grids with Row Selection', () => { cy.get('@grid1') .find('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('2')); + .then((pageNumber) => expect(pageNumber).to.eq('2')); - cy.get('@grid1') - .find('[data-test=page-count]') - .contains('99'); + cy.get('@grid1').find('[data-test=page-count]').contains('99'); - cy.get('@grid1') - .find('[data-test=item-from]') - .contains('6'); + cy.get('@grid1').find('[data-test=item-from]').contains('6'); - cy.get('@grid1') - .find('[data-test=item-to]') - .contains('10'); + cy.get('@grid1').find('[data-test=item-to]').contains('10'); - cy.get('@grid1') - .find('[data-test=total-items]') - .contains('495'); + cy.get('@grid1').find('[data-test=total-items]').contains('495'); // 2nd Grid - cy.get('@grid2') - .find('[data-test=page-count]') - .contains('105'); + cy.get('@grid2').find('[data-test=page-count]').contains('105'); - cy.get('@grid2') - .find('[data-test=item-from]') - .contains('1'); + cy.get('@grid2').find('[data-test=item-from]').contains('1'); - cy.get('@grid2') - .find('[data-test=item-to]') - .contains('5'); + cy.get('@grid2').find('[data-test=item-to]').contains('5'); - cy.get('@grid2') - .find('[data-test=total-items]') - .contains('525'); + cy.get('@grid2').find('[data-test=total-items]').contains('525'); }); it('should change Page Number in Grid1 and expect the Pagination to have correct values', () => { cy.get('#slickGridContainer-grid1').as('grid1'); - cy.get('@grid1') - .find('[data-test=page-number-input]') - .clear() - .type('52') - .type('{enter}'); + cy.get('@grid1').find('[data-test=page-number-input]').clear().type('52').type('{enter}'); - cy.get('@grid1') - .find('[data-test=page-count]') - .contains('99'); + cy.get('@grid1').find('[data-test=page-count]').contains('99'); - cy.get('@grid1') - .find('[data-test=item-from]') - .contains('256'); + cy.get('@grid1').find('[data-test=item-from]').contains('256'); - cy.get('@grid1') - .find('[data-test=item-to]') - .contains('260'); + cy.get('@grid1').find('[data-test=item-to]').contains('260'); - cy.get('@grid1') - .find('[data-test=total-items]') - .contains('495'); + cy.get('@grid1').find('[data-test=total-items]').contains('495'); }); it('should change Page Number and Page Size in Grid2 and expect the Pagination to have correct values', () => { cy.get('#slickGridContainer-grid2').as('grid2'); - cy.get('@grid2') - .find('[data-test=page-number-input]') - .clear() - .type('34') - .type('{enter}'); + cy.get('@grid2').find('[data-test=page-number-input]').clear().type('34').type('{enter}'); - cy.get('@grid2') - .find('[data-test=page-count]') - .contains('105'); + cy.get('@grid2').find('[data-test=page-count]').contains('105'); - cy.get('@grid2') - .find('[data-test=item-from]') - .contains('166'); + cy.get('@grid2').find('[data-test=item-from]').contains('166'); - cy.get('@grid2') - .find('[data-test=item-to]') - .contains('170'); + cy.get('@grid2').find('[data-test=item-to]').contains('170'); - cy.get('@grid2') - .find('[data-test=total-items]') - .contains('525'); + cy.get('@grid2').find('[data-test=total-items]').contains('525'); - cy.get('@grid2') - .find('#items-per-page-label').select('75'); + cy.get('@grid2').find('#items-per-page-label').select('75'); - cy.get('@grid2') - .find('[data-test=page-count]') - .contains('7'); + cy.get('@grid2').find('[data-test=page-count]').contains('7'); - cy.get('@grid2') - .find('[data-test=item-from]') - .contains('1'); + cy.get('@grid2').find('[data-test=item-from]').contains('1'); - cy.get('@grid2') - .find('[data-test=item-to]') - .contains('75'); + cy.get('@grid2').find('[data-test=item-to]').contains('75'); }); it('should go back to Grid1 and expect the same value before changing Pagination of Grid2', () => { cy.get('#slickGridContainer-grid1').as('grid1'); - cy.get('@grid1') - .find('[data-test=page-count]') - .contains('99'); + cy.get('@grid1').find('[data-test=page-count]').contains('99'); - cy.get('@grid1') - .find('[data-test=item-from]') - .contains('256'); + cy.get('@grid1').find('[data-test=item-from]').contains('256'); - cy.get('@grid1') - .find('[data-test=item-to]') - .contains('260'); + cy.get('@grid1').find('[data-test=item-to]').contains('260'); - cy.get('@grid1') - .find('[data-test=total-items]') - .contains('495'); + cy.get('@grid1').find('[data-test=total-items]').contains('495'); }); it('should display page 0 of 0 with 0 items when applied filter returning an empty dataset', () => { cy.get('#slickGridContainer-grid1').as('grid1'); - cy.get('@grid1') - .find('.filter-title') - .type('000'); + cy.get('@grid1').find('.filter-title').type('000'); - cy.get('.slick-empty-data-warning:visible') - .contains('No data to display.'); + cy.get('.slick-empty-data-warning:visible').contains('No data to display.'); - cy.get('@grid1') - .find('[data-test=page-count]') - .contains('0'); + cy.get('@grid1').find('[data-test=page-count]').contains('0'); - cy.get('@grid1') - .find('[data-test=item-from]') - .should('not.be.visible'); + cy.get('@grid1').find('[data-test=item-from]').should('not.be.visible'); - cy.get('@grid1') - .find('[data-test=item-to]') - .should('not.be.visible'); + cy.get('@grid1').find('[data-test=item-to]').should('not.be.visible'); - cy.get('@grid1') - .find('[data-test=total-items]') - .contains('0'); + cy.get('@grid1').find('[data-test=total-items]').contains('0'); }); it('should erase part of the filter to have "00" and expect 4 items in total with 1 page', () => { cy.get('#slickGridContainer-grid1').as('grid1'); - cy.get('@grid1') - .find('.filter-title') - .type('{backspace}'); + cy.get('@grid1').find('.filter-title').type('{backspace}'); - cy.get('.slick-empty-data-warning') - .contains('No data to display.') - .should('not.be.visible'); + cy.get('.slick-empty-data-warning').contains('No data to display.').should('not.be.visible'); - cy.get('@grid1') - .find('[data-test=page-count]') - .contains('1'); + cy.get('@grid1').find('[data-test=page-count]').contains('1'); - cy.get('@grid1') - .find('[data-test=item-from]') - .contains('1'); + cy.get('@grid1').find('[data-test=item-from]').contains('1'); - cy.get('@grid1') - .find('[data-test=item-to]') - .contains('4'); + cy.get('@grid1').find('[data-test=item-to]').contains('4'); - cy.get('@grid1') - .find('[data-test=total-items]') - .contains('4'); + cy.get('@grid1').find('[data-test=total-items]').contains('4'); }); it('should also expect Grid2 to be unchanged (after changing Pagination in Grid1 in previous tests)', () => { cy.get('#slickGridContainer-grid2').as('grid2'); - cy.get('@grid2') - .find('[data-test=page-count]') - .contains('7'); + cy.get('@grid2').find('[data-test=page-count]').contains('7'); - cy.get('@grid2') - .find('[data-test=item-from]') - .contains('1'); + cy.get('@grid2').find('[data-test=item-from]').contains('1'); - cy.get('@grid2') - .find('[data-test=item-to]') - .contains('75'); + cy.get('@grid2').find('[data-test=item-to]').contains('75'); - cy.get('@grid2') - .find('[data-test=total-items]') - .contains('525'); + cy.get('@grid2').find('[data-test=total-items]').contains('525'); }); it('should have 4 rows (Task 3,Task 12,Task 13,Task 522) selected in the entire 2nd grid BUT only 1 selected in current Page 1', () => { @@ -380,13 +258,9 @@ describe('Example 10 - Multiple Grids with Row Selection', () => { cy.get('@grid2') .find('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('1')); + .then((pageNumber) => expect(pageNumber).to.eq('1')); - cy.get('#grid2') - .find('.slick-row') - .children() - .filter('.slick-cell-checkboxsel.selected') - .should('have.length', 1); + cy.get('#grid2').find('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 1); }); it('should go to Page 3 of 2nd Grid and have 2 rows selected in that Page and also have 4 rows selected in the entire grid (Task 3,Task 12,Task 13,Task 522)', () => { @@ -394,66 +268,46 @@ describe('Example 10 - Multiple Grids with Row Selection', () => { cy.get('[data-test=grid2-selections]').should('contain', 'Task 3,Task 12,Task 13,Task 522'); - cy.get('@grid2') - .find('#items-per-page-label').select('5'); + cy.get('@grid2').find('#items-per-page-label').select('5'); - cy.get('@grid2') - .find('[data-test=page-number-input]') - .clear() - .type('3') - .type('{enter}'); + cy.get('@grid2').find('[data-test=page-number-input]').clear().type('3').type('{enter}'); - cy.get('@grid2') - .find('.slick-row') - .children() - .filter('.slick-cell-checkboxsel.selected') - .should('have.length', 2); + cy.get('@grid2').find('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 2); }); it('should go to last Page of 2nd Grid and have 1 rows selected in that Page and also have 4 rows selected in the entire grid (Task 3,Task 12,Task 13,Task 522)', () => { cy.get('#slickGridContainer-grid2').as('grid2'); - cy.get('@grid2') - .find('.icon-seek-end') - .click(); + cy.get('@grid2').find('.icon-seek-end').click(); - cy.get('[data-test=grid2-selections]') - .should('contain', 'Task 3,Task 12,Task 13,Task 522'); + cy.get('[data-test=grid2-selections]').should('contain', 'Task 3,Task 12,Task 13,Task 522'); - cy.get('@grid2') - .find('.slick-row') - .children() - .filter('.slick-cell-checkboxsel.selected') - .should('have.length', 1); + cy.get('@grid2').find('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 1); }); it(`should go to first Page of 2nd Grid and select another row (Task 1) in that Page, wich will now be (Task1,Task3) and now have 5 rows selected in the entire grid (Task 1,Task 3,Task 12,Task 13,Task 522)`, () => { cy.get('#slickGridContainer-grid2').as('grid2'); - cy.get('@grid2') - .find('.icon-seek-first') - .click() - .wait(10); + cy.get('@grid2').find('.icon-seek-first').click().wait(10); - cy.get('@grid2') - .find('.slick-row:nth(1) .slick-cell:nth(0) input[type=checkbox]') - .click({ force: true }); + cy.get('@grid2').find('.slick-row:nth(1) .slick-cell:nth(0) input[type=checkbox]').click({ force: true }); - cy.get('[data-test=grid2-selections]') - .should('contain', 'Task 1,Task 3,Task 12,Task 13,Task 522'); + cy.get('[data-test=grid2-selections]').should('contain', 'Task 1,Task 3,Task 12,Task 13,Task 522'); - cy.get('@grid2') - .find('.slick-row') - .children() - .filter('.slick-cell-checkboxsel.selected') - .should('have.length', 2); + cy.get('@grid2').find('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 2); cy.window().then((win) => { expect(win.console.log).to.have.callCount(6); // going to 1st page - expect(win.console.log).to.be.calledWith('Grid State changed:: ', { newValues: { gridRowIndexes: [3], dataContextIds: [12, 13, 3, 522], filteredDataContextIds: [3, 12, 13, 522] }, type: 'rowSelection' }); + expect(win.console.log).to.be.calledWith('Grid State changed:: ', { + newValues: { gridRowIndexes: [3], dataContextIds: [12, 13, 3, 522], filteredDataContextIds: [3, 12, 13, 522] }, + type: 'rowSelection', + }); // after selecting 1st row - expect(win.console.log).to.be.calledWith('Grid State changed:: ', { newValues: { gridRowIndexes: [1, 3], dataContextIds: [1, 12, 13, 3, 522], filteredDataContextIds: [1, 3, 12, 13, 522] }, type: 'rowSelection' }); + expect(win.console.log).to.be.calledWith('Grid State changed:: ', { + newValues: { gridRowIndexes: [1, 3], dataContextIds: [1, 12, 13, 3, 522], filteredDataContextIds: [1, 3, 12, 13, 522] }, + type: 'rowSelection', + }); }); }); @@ -462,37 +316,21 @@ describe('Example 10 - Multiple Grids with Row Selection', () => { cy.get('[data-test=grid2-selections]').should('contain', 'Task 1,Task 3,Task 12,Task 13,Task 522'); - cy.get('@grid2') - .find('#items-per-page-label').select('5'); + cy.get('@grid2').find('#items-per-page-label').select('5'); - cy.get('@grid2') - .find('[data-test=page-number-input]') - .clear() - .type('3') - .type('{enter}'); + cy.get('@grid2').find('[data-test=page-number-input]').clear().type('3').type('{enter}'); - cy.get('@grid2') - .find('.slick-row') - .children() - .filter('.slick-cell-checkboxsel.selected') - .should('have.length', 2); + cy.get('@grid2').find('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 2); }); it('should go to last Page of 2nd Grid and still have 1 row selected in that Page and also retain 5 selected rows in the entire grid (Task 1,Task 3,Task 12,Task 13,Task 522)', () => { cy.get('#slickGridContainer-grid2').as('grid2'); - cy.get('@grid2') - .find('.icon-seek-end') - .click(); + cy.get('@grid2').find('.icon-seek-end').click(); - cy.get('[data-test=grid2-selections]') - .should('contain', 'Task 1,Task 3,Task 12,Task 13,Task 522'); + cy.get('[data-test=grid2-selections]').should('contain', 'Task 1,Task 3,Task 12,Task 13,Task 522'); - cy.get('@grid2') - .find('.slick-row') - .children() - .filter('.slick-cell-checkboxsel.selected') - .should('have.length', 1); + cy.get('@grid2').find('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 1); }); }); @@ -500,16 +338,17 @@ describe('Example 10 - Multiple Grids with Row Selection', () => { it('should click on 3rd row and of the Grid1 and expect to see "Task 300" selected', () => { cy.get('#slickGridContainer-grid1').as('grid1'); - cy.get('@grid1') - cy.get('.slick-row:nth(2) .slick-cell:nth(0) input[type=checkbox]') - .click({ force: true }); + cy.get('@grid1'); + cy.get('.slick-row:nth(2) .slick-cell:nth(0) input[type=checkbox]').click({ force: true }); - cy.get('[data-test=grid1-selections]') - .contains('Task 300'); + cy.get('[data-test=grid1-selections]').contains('Task 300'); cy.window().then((win) => { expect(win.console.log).to.have.callCount(2); - expect(win.console.log).to.be.calledWith('Grid State changed:: ', { newValues: { gridRowIndexes: [2], dataContextIds: [300], filteredDataContextIds: [300] }, type: 'rowSelection' }); + expect(win.console.log).to.be.calledWith('Grid State changed:: ', { + newValues: { gridRowIndexes: [2], dataContextIds: [300], filteredDataContextIds: [300] }, + type: 'rowSelection', + }); }); }); @@ -519,89 +358,69 @@ describe('Example 10 - Multiple Grids with Row Selection', () => { cy.get('@grid1') .find('.filter-title') .type('{backspace}{backspace}') - .invoke('text').then((text => { - expect(text.trim()).to.eq('') - })); + .invoke('text') + .then((text) => { + expect(text.trim()).to.eq(''); + }); }); it('should go to Page 61 of Grid1 and expect to find "Task 300" still be selected', () => { cy.get('#slickGridContainer-grid1').as('grid1'); - cy.get('@grid1') - .find('[data-test=page-number-input]') - .clear() - .type('61') - .type('{enter}'); + cy.get('@grid1').find('[data-test=page-number-input]').clear().type('61').type('{enter}'); - cy.get('[data-test=grid1-selections]') - .contains('Task 300'); + cy.get('[data-test=grid1-selections]').contains('Task 300'); - cy.get('.slick-cell.l0.r0.slick-cell-checkboxsel.selected') - .should('exist'); + cy.get('.slick-cell.l0.r0.slick-cell-checkboxsel.selected').should('exist'); - cy.get('[data-test=grid1-selections]') - .contains('Task 300'); + cy.get('[data-test=grid1-selections]').contains('Task 300'); }); it('should go to a different page for next test to confirm that it will then go to page 1', () => { cy.get('#slickGridContainer-grid2').as('grid2'); - cy.get('@grid2') - .find('[data-test=page-number-input]') - .clear() - .type('22') - .type('{enter}'); + cy.get('@grid2').find('[data-test=page-number-input]').clear().type('22').type('{enter}'); - cy.get('@grid2') - .find('[data-test=page-count]') - .contains('105'); + cy.get('@grid2').find('[data-test=page-count]').contains('105'); - cy.get('@grid2') - .find('[data-test=item-from]') - .contains('106'); + cy.get('@grid2').find('[data-test=item-from]').contains('106'); - cy.get('@grid2') - .find('[data-test=item-to]') - .contains('110'); + cy.get('@grid2').find('[data-test=item-to]').contains('110'); - cy.get('@grid2') - .find('[data-test=total-items]') - .contains('525'); + cy.get('@grid2').find('[data-test=total-items]').contains('525'); }); it('should have 2 rows (Task 3,Task 13) selected in 2nd grid after typing in a search filter (3)', () => { cy.get('#slickGridContainer-grid2').as('grid2'); - cy.get('@grid2') - .find('.filter-title') - .type('3') - .wait(100); + cy.get('@grid2').find('.filter-title').type('3').wait(100); cy.get('@grid2') .find('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('1')); + .then((pageNumber) => expect(pageNumber).to.eq('1')); - cy.get('@grid2') - .find('.slick-row') - .should('not.have.length', 0); + cy.get('@grid2').find('.slick-row').should('not.have.length', 0); cy.get('[data-test=grid2-selections]').should('contain', 'Task 3,Task 13'); - cy.get('@grid2') - .find('.slick-row') - .children() - .filter('.slick-cell-checkboxsel.selected') - .should('have.length', 2); + cy.get('@grid2').find('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 2); cy.window().then((win) => { - expect(win.console.log).to.be.calledWith('Grid State changed:: ', { newValues: { gridRowIndexes: [1, 0], dataContextIds: [1, 12, 13, 3, 522], filteredDataContextIds: [3, 13] }, type: 'rowSelection' }); expect(win.console.log).to.be.calledWith('Grid State changed:: ', { - newValues: [{ - columnId: 'title', operator: 'Contains', searchTerms: ['3'], - targetSelector: 'input.form-control.filter-title.search-filter.slick-filter.filled' - }], - type: 'filter' + newValues: { gridRowIndexes: [1, 0], dataContextIds: [1, 12, 13, 3, 522], filteredDataContextIds: [3, 13] }, + type: 'rowSelection', + }); + expect(win.console.log).to.be.calledWith('Grid State changed:: ', { + newValues: [ + { + columnId: 'title', + operator: 'Contains', + searchTerms: ['3'], + targetSelector: 'input.form-control.filter-title.search-filter.slick-filter.filled', + }, + ], + type: 'filter', }); }); }); @@ -609,23 +428,26 @@ describe('Example 10 - Multiple Grids with Row Selection', () => { it('should remove filter from Grid2', () => { cy.get('#slickGridContainer-grid2').as('grid2'); - cy.get('@grid2') - .find('.filter-title') - .type('{backspace}'); + cy.get('@grid2').find('.filter-title').type('{backspace}'); }); }); describe('Remove Pagination', () => { it('should remove Pagination and not expect any DOM elements of it', () => { - cy.get('[data-test=toggle-pagination-grid2]') - .click(); + cy.get('[data-test=toggle-pagination-grid2]').click(); - cy.get('#slickGridContainer-grid2 .slick-pagination') - .should('not.exist'); + cy.get('#slickGridContainer-grid2 .slick-pagination').should('not.exist'); cy.window().then((win) => { expect(win.console.log).to.have.callCount(2); - expect(win.console.log).to.be.calledWith('Grid State changed:: ', { newValues: { gridRowIndexes: [1, 12, 13, 3, 522], dataContextIds: [1, 12, 13, 3, 522], filteredDataContextIds: [1, 3, 12, 13, 522] }, type: 'rowSelection' }); + expect(win.console.log).to.be.calledWith('Grid State changed:: ', { + newValues: { + gridRowIndexes: [1, 12, 13, 3, 522], + dataContextIds: [1, 12, 13, 3, 522], + filteredDataContextIds: [1, 3, 12, 13, 522], + }, + type: 'rowSelection', + }); }); }); @@ -634,11 +456,7 @@ describe('Example 10 - Multiple Grids with Row Selection', () => { cy.get('[data-test=grid2-selections]').should('contain', 'Task 1,Task 3,Task 12,Task 13,Task 522'); - cy.get('@grid2') - .find('.slick-row') - .children() - .filter('.slick-cell-checkboxsel.selected') - .should('have.length', 2); + cy.get('@grid2').find('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 2); }); it('should scroll to the bottom of 2nd Grid and still have 5 rows (Task 1,Task 3,Task 12,Task 13,Task 522) selected and find 2 row selected because we now have 2 rows that got rendered (first and last)', () => { @@ -646,51 +464,40 @@ describe('Example 10 - Multiple Grids with Row Selection', () => { cy.get('[data-test=grid2-selections]').should('contain', 'Task 1,Task 3,Task 12,Task 13,Task 522'); - cy.get('@grid2') - .find('.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom') - .wait(10); + cy.get('@grid2').find('.slick-viewport-top.slick-viewport-left').scrollTo('bottom').wait(10); - cy.get('@grid2') - .find('.slick-row') - .children() - .filter('.slick-cell-checkboxsel.selected') - .should('have.length', 2); + cy.get('@grid2').find('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 2); }); it('should have 2 rows (Task 3,Task 13) selected in 2nd grid after typing in a search filter (3)', () => { cy.get('#slickGridContainer-grid2').as('grid2'); - cy.get('@grid2') - .find('.filter-title') - .type('3'); + cy.get('@grid2').find('.filter-title').type('3'); - cy.get('@grid2') - .find('.slick-viewport-top.slick-viewport-left') - .scrollTo('top') - .wait(10); + cy.get('@grid2').find('.slick-viewport-top.slick-viewport-left').scrollTo('top').wait(10); - cy.get('@grid2') - .find('.slick-row') - .should('not.have.length', 0); + cy.get('@grid2').find('.slick-row').should('not.have.length', 0); cy.get('[data-test=grid2-selections]').should('contain', 'Task 3,Task 13'); - cy.get('@grid2') - .find('.slick-row') - .children() - .filter('.slick-cell-checkboxsel.selected') - .should('have.length', 2); + cy.get('@grid2').find('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 2); cy.window().then((win) => { expect(win.console.log).to.have.callCount(4); - expect(win.console.log).to.be.calledWith('Grid State changed:: ', { newValues: { gridRowIndexes: [1, 0], dataContextIds: [1, 12, 13, 3, 522], filteredDataContextIds: [3, 13] }, type: 'rowSelection' }); expect(win.console.log).to.be.calledWith('Grid State changed:: ', { - newValues: [{ - columnId: 'title', operator: 'Contains', searchTerms: ['3'], - targetSelector: 'input.form-control.filter-title.search-filter.slick-filter.filled' - }], - type: 'filter' + newValues: { gridRowIndexes: [1, 0], dataContextIds: [1, 12, 13, 3, 522], filteredDataContextIds: [3, 13] }, + type: 'rowSelection', + }); + expect(win.console.log).to.be.calledWith('Grid State changed:: ', { + newValues: [ + { + columnId: 'title', + operator: 'Contains', + searchTerms: ['3'], + targetSelector: 'input.form-control.filter-title.search-filter.slick-filter.filled', + }, + ], + type: 'filter', }); }); }); @@ -698,9 +505,7 @@ describe('Example 10 - Multiple Grids with Row Selection', () => { it('should remove filter from Grid2', () => { cy.get('#slickGridContainer-grid2').as('grid2'); - cy.get('@grid2') - .find('.filter-title') - .type('{backspace}'); + cy.get('@grid2').find('.filter-title').type('{backspace}'); }); }); @@ -708,192 +513,138 @@ describe('Example 10 - Multiple Grids with Row Selection', () => { it('should re-enable the Pagination and expect to see it show it again below the grid at Page 1', () => { cy.get('#slickGridContainer-grid2').as('grid2'); - cy.get('[data-test=toggle-pagination-grid2]') - .click(); + cy.get('[data-test=toggle-pagination-grid2]').click(); - cy.get('#slickGridContainer-grid2 .slick-pagination') - .should('exist'); + cy.get('#slickGridContainer-grid2 .slick-pagination').should('exist'); cy.get('@grid2') .find('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('1')); + .then((pageNumber) => expect(pageNumber).to.eq('1')); - cy.get('@grid2') - .find('[data-test=page-number-input]') - .click(); + cy.get('@grid2').find('[data-test=page-number-input]').click(); - cy.get('@grid2') - .find('[data-test=page-count]') - .contains('105'); + cy.get('@grid2').find('[data-test=page-count]').contains('105'); - cy.get('@grid2') - .find('[data-test=item-from]') - .contains('1'); + cy.get('@grid2').find('[data-test=item-from]').contains('1'); - cy.get('@grid2') - .find('[data-test=item-to]') - .contains('5'); + cy.get('@grid2').find('[data-test=item-to]').contains('5'); - cy.get('@grid2') - .find('[data-test=total-items]') - .contains('525'); + cy.get('@grid2').find('[data-test=total-items]').contains('525'); cy.window().then((win) => { expect(win.console.log).to.have.callCount(4); - expect(win.console.log).to.be.calledWith('Grid State changed:: ', { newValues: { gridRowIndexes: [1, 3], dataContextIds: [1, 12, 13, 3, 522], filteredDataContextIds: [1, 3, 12, 13, 522] }, type: 'rowSelection' }); - expect(win.console.log).to.be.calledWith('Grid State changed:: ', { newValues: { pageNumber: 1, pageSize: 5 }, type: 'pagination' }); + expect(win.console.log).to.be.calledWith('Grid State changed:: ', { + newValues: { gridRowIndexes: [1, 3], dataContextIds: [1, 12, 13, 3, 522], filteredDataContextIds: [1, 3, 12, 13, 522] }, + type: 'rowSelection', + }); + expect(win.console.log).to.be.calledWith('Grid State changed:: ', { + newValues: { pageNumber: 1, pageSize: 5 }, + type: 'pagination', + }); }); }); it('should have 2 rows (Task 3,Task 13) selected in 2nd grid after typing in a search filter (3)', () => { cy.get('#slickGridContainer-grid2').as('grid2'); - cy.get('@grid2') - .find('.filter-title') - .type('3'); + cy.get('@grid2').find('.filter-title').type('3'); - cy.get('@grid2') - .find('.slick-row') - .should('not.have.length', 0); + cy.get('@grid2').find('.slick-row').should('not.have.length', 0); cy.get('[data-test=grid2-selections]').should('contain', 'Task 3,Task 13'); - cy.get('@grid2') - .find('.slick-row') - .children() - .filter('.slick-cell-checkboxsel.selected') - .should('have.length', 2); + cy.get('@grid2').find('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 2); cy.window().then((win) => { expect(win.console.log).to.have.callCount(4); - expect(win.console.log).to.be.calledWith('Grid State changed:: ', { newValues: { gridRowIndexes: [1, 0], dataContextIds: [1, 12, 13, 3, 522], filteredDataContextIds: [3, 13] }, type: 'rowSelection' }); expect(win.console.log).to.be.calledWith('Grid State changed:: ', { - newValues: [{ - columnId: 'title', operator: 'Contains', searchTerms: ['3'], - targetSelector: 'input.form-control.filter-title.search-filter.slick-filter.filled' - }], - type: 'filter' + newValues: { gridRowIndexes: [1, 0], dataContextIds: [1, 12, 13, 3, 522], filteredDataContextIds: [3, 13] }, + type: 'rowSelection', + }); + expect(win.console.log).to.be.calledWith('Grid State changed:: ', { + newValues: [ + { + columnId: 'title', + operator: 'Contains', + searchTerms: ['3'], + targetSelector: 'input.form-control.filter-title.search-filter.slick-filter.filled', + }, + ], + type: 'filter', }); }); cy.get('@grid2') .find('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('1')); + .then((pageNumber) => expect(pageNumber).to.eq('1')); - cy.get('@grid2') - .find('[data-test=page-count]') - .contains('3'); + cy.get('@grid2').find('[data-test=page-count]').contains('3'); - cy.get('@grid2') - .find('[data-test=item-from]') - .contains('1'); + cy.get('@grid2').find('[data-test=item-from]').contains('1'); - cy.get('@grid2') - .find('[data-test=item-to]') - .contains('5'); + cy.get('@grid2').find('[data-test=item-to]').contains('5'); - cy.get('@grid2') - .find('[data-test=total-items]') - .contains('179'); + cy.get('@grid2').find('[data-test=total-items]').contains('179'); }); it('should Select All and expect all pages to no longer have any row selected', () => { - cy.get('#filter-checkbox-selectall-container input[type=checkbox]') - .click({ force: true }); + cy.get('#filter-checkbox-selectall-container input[type=checkbox]').click({ force: true }); }); it('should go to the next 2 pages and expect all rows selected in each page', () => { cy.get('#slickGridContainer-grid2').as('grid2'); - cy.get('@grid2') - .find('.icon-seek-next') - .click(); + cy.get('@grid2').find('.icon-seek-next').click(); - cy.get('@grid2') - .find('.slick-cell-checkboxsel input:checked') - .should('have.length', 5); + cy.get('@grid2').find('.slick-cell-checkboxsel input:checked').should('have.length', 5); - cy.get('@grid2') - .find('.icon-seek-next') - .click(); + cy.get('@grid2').find('.icon-seek-next').click(); - cy.get('@grid2') - .find('.slick-cell-checkboxsel input:checked') - .should('have.length', 5); + cy.get('@grid2').find('.slick-cell-checkboxsel input:checked').should('have.length', 5); }); it('should uncheck 1 row and expect current and next page to have "Select All" uncheck', () => { cy.get('#slickGridContainer-grid2').as('grid2'); - cy.get('@grid2') - .find('.slick-row:nth(0) .slick-cell:nth(0) input[type=checkbox]') - .click({ force: true }); + cy.get('@grid2').find('.slick-row:nth(0) .slick-cell:nth(0) input[type=checkbox]').click({ force: true }); - cy.get('@grid2') - .find('#filter-checkbox-selectall-container input[type=checkbox]') - .should('not.be.checked', true); + cy.get('@grid2').find('#filter-checkbox-selectall-container input[type=checkbox]').should('not.be.checked', true); - cy.get('@grid2') - .find('.icon-seek-next') - .click(); + cy.get('@grid2').find('.icon-seek-next').click(); - cy.get('@grid2') - .find('#filter-checkbox-selectall-container input[type=checkbox]') - .should('not.be.checked', true); + cy.get('@grid2').find('#filter-checkbox-selectall-container input[type=checkbox]').should('not.be.checked', true); }); it('should go back to previous page, select the row that was unchecked and expect "Select All" to be selected again', () => { cy.get('#slickGridContainer-grid2').as('grid2'); - cy.get('@grid2') - .find('.icon-seek-prev') - .click(); + cy.get('@grid2').find('.icon-seek-prev').click(); - cy.get('@grid2') - .find('.slick-row:nth(0) .slick-cell:nth(0) input[type=checkbox]') - .click({ force: true }); + cy.get('@grid2').find('.slick-row:nth(0) .slick-cell:nth(0) input[type=checkbox]').click({ force: true }); - cy.get('@grid2') - .find('#filter-checkbox-selectall-container input[type=checkbox]') - .should('be.checked', true); + cy.get('@grid2').find('#filter-checkbox-selectall-container input[type=checkbox]').should('be.checked', true); - cy.get('@grid2') - .find('.icon-seek-next') - .click(); + cy.get('@grid2').find('.icon-seek-next').click(); - cy.get('@grid2') - .find('#filter-checkbox-selectall-container input[type=checkbox]') - .should('be.checked', true); + cy.get('@grid2').find('#filter-checkbox-selectall-container input[type=checkbox]').should('be.checked', true); }); it('should Unselect All and expect all pages to no longer have any row selected', () => { cy.get('#slickGridContainer-grid2').as('grid2'); - cy.get('@grid2') - .find('#filter-checkbox-selectall-container input[type=checkbox]') - .click({ force: true }); + cy.get('@grid2').find('#filter-checkbox-selectall-container input[type=checkbox]').click({ force: true }); - cy.get('@grid2') - .find('.slick-cell-checkboxsel input:checked') - .should('have.length', 0); + cy.get('@grid2').find('.slick-cell-checkboxsel input:checked').should('have.length', 0); - cy.get('@grid2') - .find('.icon-seek-prev') - .click(); + cy.get('@grid2').find('.icon-seek-prev').click(); - cy.get('@grid2') - .find('.slick-cell-checkboxsel input:checked') - .should('have.length', 0); + cy.get('@grid2').find('.slick-cell-checkboxsel input:checked').should('have.length', 0); - cy.get('@grid2') - .find('.icon-seek-prev') - .click(); + cy.get('@grid2').find('.icon-seek-prev').click(); - cy.get('@grid2') - .find('.slick-cell-checkboxsel input:checked') - .should('have.length', 0); + cy.get('@grid2').find('.slick-cell-checkboxsel input:checked').should('have.length', 0); }); }); }); diff --git a/test/cypress/e2e/example11.cy.ts b/test/cypress/e2e/example11.cy.ts index 9b369392c..bebf886b6 100644 --- a/test/cypress/e2e/example11.cy.ts +++ b/test/cypress/e2e/example11.cy.ts @@ -23,19 +23,14 @@ describe('Example 11 - Add / Update / Highlight a Datagrid Item', () => { if (index > expectedTasks.length - 1) { return; } - cy.wrap($row).children('.slick-cell:nth(1)') - .should('contain', expectedTasks[index]); + cy.wrap($row).children('.slick-cell:nth(1)').should('contain', expectedTasks[index]); }); }); it('should delete first row Task 0 from the grid', () => { const expectedTasks = ['Task 1', 'Task 2', 'Task 3', 'Task 4']; - cy.get('#grid11') - .find('.slick-row') - .first() - .children('.slick-cell:nth(0)') - .click(); + cy.get('#grid11').find('.slick-row').first().children('.slick-cell:nth(0)').click(); cy.get('#grid11') .find('.slick-row') @@ -43,16 +38,14 @@ describe('Example 11 - Add / Update / Highlight a Datagrid Item', () => { if (index > expectedTasks.length - 1) { return; } - cy.wrap($row).children('.slick-cell:nth(1)') - .should('contain', expectedTasks[index]); + cy.wrap($row).children('.slick-cell:nth(1)').should('contain', expectedTasks[index]); }); }); it('should add 2 rows on the top of the grid', () => { const expectedTasks = ['Task 1001', 'Task 1000', 'Task 1', 'Task 2', 'Task 3', 'Task 4']; - cy.get('[data-test="add-new-item-top-btn"]') - .click().click(); + cy.get('[data-test="add-new-item-top-btn"]').click().click(); cy.get('#grid11') .find('.slick-row') @@ -60,41 +53,31 @@ describe('Example 11 - Add / Update / Highlight a Datagrid Item', () => { if (index > expectedTasks.length - 1) { return; } - cy.wrap($row).children('.slick-cell:nth(1)') - .should('contain', expectedTasks[index]); + cy.wrap($row).children('.slick-cell:nth(1)').should('contain', expectedTasks[index]); }); }); it('should add 2 rows on the bottom of the grid', () => { - cy.get('[data-test="add-new-item-bottom-btn"]') - .click(); + cy.get('[data-test="add-new-item-bottom-btn"]').click(); - cy.get('#grid11') - .find('.slick-row') - .last() - .should('contain.text', 'Task 1002'); + cy.get('#grid11').find('.slick-row').last().should('contain.text', 'Task 1002'); }); it('should click on highlight "Duration over 40" and expect few rows being highlighted in purple', () => { cy.get('[data-test="highlight-duration40-btn"]').click(); - cy.get('.slick-row.duration-bg') - .should('have.length.greaterThan', 1); + cy.get('.slick-row.duration-bg').should('have.length.greaterThan', 1); }); it('should scroll to bottom and expect last row to be "Task 1002"', () => { cy.get('[data-test="scroll-bottom-btn"]').click(); - cy.get('#grid11') - .find('.slick-row') - .last() - .should('contain.text', 'Task 1002'); + cy.get('#grid11').find('.slick-row').last().should('contain.text', 'Task 1002'); }); it('should scroll to top and expect certain rows on top', () => { // cy.get('[data-test="scroll-top-btn"]').click(); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('top'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('top'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 1001'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 100'); diff --git a/test/cypress/e2e/example12.cy.ts b/test/cypress/e2e/example12.cy.ts index c4e9faa8c..62ee641e3 100644 --- a/test/cypress/e2e/example12.cy.ts +++ b/test/cypress/e2e/example12.cy.ts @@ -11,7 +11,7 @@ describe('Example 12: Localization (i18n)', () => { // create a console.log spy for later use cy.window().then((win) => { - cy.spy(win.console, "log"); + cy.spy(win.console, 'log'); }); }); @@ -21,8 +21,7 @@ describe('Example 12: Localization (i18n)', () => { it('should display Example title', () => { cy.visit(`${Cypress.config('baseUrl')}/localization`); - cy.get('h2') - .should('contain', 'Example 12: Localization (i18n)'); + cy.get('h2').should('contain', 'Example 12: Localization (i18n)'); }); describe('English Locale', () => { @@ -37,7 +36,7 @@ describe('Example 12: Localization (i18n)', () => { cy.get('#slickGridContainer-grid12') .find('.slick-custom-footer') .find('div.left-footer') - .should($span => { + .should(($span) => { const text = removeExtraSpaces($span.text()); // remove all white spaces expect(text).to.eq(`0 items selected`); }); @@ -47,7 +46,7 @@ describe('Example 12: Localization (i18n)', () => { cy.get('#slickGridContainer-grid12') .find('.slick-custom-footer') .find('.right-footer') - .should($span => { + .should(($span) => { const text = removeExtraSpaces($span.text()); // remove all white spaces const dateFormatted = format(new Date(), 'YYYY-MM-DD, hh:mm a'); expect(text).to.eq(`Last Update ${dateFormatted} | 1500 of 1500 items`); @@ -57,12 +56,9 @@ describe('Example 12: Localization (i18n)', () => { it('should filter certain tasks with the word "ask 1" and expect filter to use contain/include text', () => { const tasks = ['Task 1', 'Task 10', 'Task 11', 'Task 12']; - cy.get('.grid-canvas') - .find('.slick-row') - .should('be.visible'); + cy.get('.grid-canvas').find('.slick-row').should('be.visible'); - cy.get('input.filter-title') - .type('ask 1'); + cy.get('input.filter-title').type('ask 1'); cy.get('#grid12') .find('.slick-row') @@ -70,30 +66,20 @@ describe('Example 12: Localization (i18n)', () => { if (index > tasks.length - 1) { return; } - cy.wrap($row).children('.slick-cell:nth(1)') - .should('contain', tasks[index]); + cy.wrap($row).children('.slick-cell:nth(1)').should('contain', tasks[index]); }); }); }); describe('French locale', () => { it('should reset filters and switch locale to French', () => { - cy.get('#grid12') - .find('button.slick-grid-menu-button') - .click(); + cy.get('#grid12').find('button.slick-grid-menu-button').click(); - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item') - .first() - .find('span') - .contains('Clear all Filters') - .click(); + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click(); - cy.get('[data-test=language-button]') - .click(); + cy.get('[data-test=language-button]').click(); - cy.get('[data-test=selected-locale]') - .should('contain', 'fr.json'); + cy.get('[data-test=selected-locale]').should('contain', 'fr.json'); }); it('should have French Column Titles in the grid after switching locale', () => { @@ -107,7 +93,7 @@ describe('Example 12: Localization (i18n)', () => { cy.get('#slickGridContainer-grid12') .find('.slick-custom-footer') .find('div.left-footer') - .should($span => { + .should(($span) => { const text = removeExtraSpaces($span.text()); // remove all white spaces expect(text).to.eq(`0 éléments sélectionnés`); }); @@ -117,7 +103,7 @@ describe('Example 12: Localization (i18n)', () => { cy.get('#slickGridContainer-grid12') .find('.slick-custom-footer') .find('.right-footer') - .should($span => { + .should(($span) => { const text = removeExtraSpaces($span.text()); // remove all white spaces const dateFormatted = format(new Date(), 'YYYY-MM-DD, hh:mm a'); expect(text).to.eq(`Dernière mise à jour ${dateFormatted} | 1500 de 1500 éléments`); @@ -127,12 +113,9 @@ describe('Example 12: Localization (i18n)', () => { it('should filter certain tasks', () => { const tasks = ['Tâche 1', 'Tâche 10', 'Tâche 11', 'Tâche 12']; - cy.get('.grid-canvas') - .find('.slick-row') - .should('be.visible'); + cy.get('.grid-canvas').find('.slick-row').should('be.visible'); - cy.get('input.filter-title') - .type('âche 1'); + cy.get('input.filter-title').type('âche 1'); cy.get('#grid12') .find('.slick-row') @@ -140,15 +123,12 @@ describe('Example 12: Localization (i18n)', () => { if (index > tasks.length - 1) { return; } - cy.wrap($row).children('.slick-cell:nth(1)') - .should('contain', tasks[index]); + cy.wrap($row).children('.slick-cell:nth(1)').should('contain', tasks[index]); }); }); it('should reset filters before filtering duration', () => { - cy.get('#grid12') - .find('button.slick-grid-menu-button') - .click(); + cy.get('#grid12').find('button.slick-grid-menu-button').click(); cy.get(`.slick-grid-menu:visible`) .find('.slick-menu-item') @@ -159,9 +139,7 @@ describe('Example 12: Localization (i18n)', () => { }); it('should filter duration with slider filter', () => { - cy.get('.filter-duration input[type=range]').as('range') - .invoke('val', 30) - .trigger('change', { force: true }); + cy.get('.filter-duration input[type=range]').as('range').invoke('val', 30).trigger('change', { force: true }); cy.wait(10); @@ -176,10 +154,10 @@ describe('Example 12: Localization (i18n)', () => { } // get full cell width of the first cell, then return - cy.wrap($row).children('.slick-cell:nth(3)') + cy.wrap($row) + .children('.slick-cell:nth(3)') .first() - .then(($cell) => fullCellWidth = $cell.width() as number); - + .then(($cell) => (fullCellWidth = $cell.width() as number)); cy.wrap($row) .children('.slick-cell:nth(3)') @@ -187,8 +165,8 @@ describe('Example 12: Localization (i18n)', () => { .should('not.have.css', 'background-color', 'rgb(255, 0, 0)') .should(($el) => { // calculate 25% and expect the element width to be about the calculated size with a (+/-)1px precision - const expectedWidth = (fullCellWidth * .30); - expect($el.width() as number + 1).greaterThan(expectedWidth); + const expectedWidth = fullCellWidth * 0.3; + expect(($el.width() as number) + 1).greaterThan(expectedWidth); }); }); }); @@ -196,22 +174,13 @@ describe('Example 12: Localization (i18n)', () => { describe('Row Selection', () => { it('should switch locale back to English and reset all Filters', () => { - cy.get('[data-test=language-button]') - .click(); + cy.get('[data-test=language-button]').click(); - cy.get('[data-test=selected-locale]') - .should('contain', 'en.json'); + cy.get('[data-test=selected-locale]').should('contain', 'en.json'); - cy.get('#grid12') - .find('button.slick-grid-menu-button') - .click(); + cy.get('#grid12').find('button.slick-grid-menu-button').click(); - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item') - .first() - .find('span') - .contains('Clear all Filters') - .click(); + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click(); }); it('should hover over the Title column and click on "Sort Descending" command', () => { @@ -230,10 +199,7 @@ describe('Example 12: Localization (i18n)', () => { .should('contain', 'Sort Descending') .click(); - cy.get('.slick-row') - .children('.slick-cell:nth(1)') - .first() - .should('contain', 'Task 1499'); + cy.get('.slick-row').children('.slick-cell:nth(1)').first().should('contain', 'Task 1499'); }); it('should select the row with "Task 1497" and expect the Grid State to be called with it in the console', () => { @@ -248,17 +214,17 @@ describe('Example 12: Localization (i18n)', () => { cy.window().then((win) => { expect(win.console.log).to.have.callCount(2); - expect(win.console.log).to.be.calledWith("Grid State changed:: ", { newValues: { gridRowIndexes: [2], dataContextIds: [1497], filteredDataContextIds: [1497] }, type: 'rowSelection' }); + expect(win.console.log).to.be.calledWith('Grid State changed:: ', { + newValues: { gridRowIndexes: [2], dataContextIds: [1497], filteredDataContextIds: [1497] }, + type: 'rowSelection', + }); }); }); it('should scroll to bottom of the grid then select "Task 4"', () => { cy.get('#slickGridContainer-grid12').as('grid12'); - cy.get('@grid12') - .find('.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom') - .wait(10); + cy.get('@grid12').find('.slick-viewport-top.slick-viewport-left').scrollTo('bottom').wait(10); cy.get('#grid12') .contains('Task 4') @@ -269,63 +235,42 @@ describe('Example 12: Localization (i18n)', () => { cy.window().then((win) => { expect(win.console.log).to.have.callCount(2); - expect(win.console.log).to.be.calledWith("Grid State changed:: ", { newValues: { gridRowIndexes: [1495, 2], dataContextIds: [1497, 4], filteredDataContextIds: [1497, 4] }, type: 'rowSelection' }); + expect(win.console.log).to.be.calledWith('Grid State changed:: ', { + newValues: { gridRowIndexes: [1495, 2], dataContextIds: [1497, 4], filteredDataContextIds: [1497, 4] }, + type: 'rowSelection', + }); }); }); it('should filter the Tasks column with number 4 and expect only "Task 4" visible in the grid', () => { cy.get('#slickGridContainer-grid12').as('grid12'); - cy.get('.grid-canvas') - .find('.slick-row') - .should('be.visible'); + cy.get('.grid-canvas').find('.slick-row').should('be.visible'); - cy.get('input.filter-title') - .type('4'); + cy.get('input.filter-title').type('4'); - cy.get('@grid12') - .find('.slick-row') - .children() - .filter('.slick-cell-checkboxsel.selected') - .should('have.length', 1); + cy.get('@grid12').find('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 1); - cy.get('@grid12') - .find('.slick-row') - .children() - .filter('.slick-cell.selected:nth(1)') - .contains('Task 4'); + cy.get('@grid12').find('.slick-row').children().filter('.slick-cell.selected:nth(1)').contains('Task 4'); }); it('should scroll back to the top and expect to see "Task 1497" still selected', () => { cy.get('#slickGridContainer-grid12').as('grid12'); - cy.get('.grid-canvas') - .find('.slick-row') - .should('be.visible'); + cy.get('.grid-canvas').find('.slick-row').should('be.visible'); - cy.get('@grid12') - .find('.slick-viewport-top.slick-viewport-left') - .scrollTo('top') - .wait(10); + cy.get('@grid12').find('.slick-viewport-top.slick-viewport-left').scrollTo('top').wait(10); - cy.get('@grid12') - .find('.slick-row') - .children() - .filter('.slick-cell-checkboxsel.selected') - .should('have.length', 1); + cy.get('@grid12').find('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 1); - cy.get('@grid12') - .find('.slick-row') - .children() - .filter('.slick-cell.selected:nth(1)') - .contains('Task 1497'); + cy.get('@grid12').find('.slick-row').children().filter('.slick-cell.selected:nth(1)').contains('Task 1497'); }); it('should have 2 row selection count shown in the grid left footer', () => { cy.get('#slickGridContainer-grid12') .find('.slick-custom-footer') .find('div.left-footer') - .should($span => { + .should(($span) => { const text = removeExtraSpaces($span.text()); // remove all white spaces expect(text).to.eq(`2 items selected`); }); diff --git a/test/cypress/e2e/example13.cy.ts b/test/cypress/e2e/example13.cy.ts index 3fc484c79..a375a1d03 100644 --- a/test/cypress/e2e/example13.cy.ts +++ b/test/cypress/e2e/example13.cy.ts @@ -16,61 +16,54 @@ describe('Example 13 - Custom Backend Server Pagination', () => { it('should be on 1st page and have default query string', () => { cy.get('.slick-pagination-nav input') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('1')); + .then((pageNumber) => expect(pageNumber).to.eq('1')); - cy.get('[data-test="query-string"]') - .contains('http://127.0.0.1:8080/grid!display.do?¤tPage=1'); + cy.get('[data-test="query-string"]').contains('http://127.0.0.1:8080/grid!display.do?¤tPage=1'); }); it('should go on next page and expect query to be updated accordingly', () => { cy.get('.icon-seek-next').click(); - cy.get('.page-spin') - .should('be.visible', true); + cy.get('.page-spin').should('be.visible', true); cy.get('.slick-pagination-nav input') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('2')); + .then((pageNumber) => expect(pageNumber).to.eq('2')); - cy.get('[data-test="query-string"]') - .contains('http://127.0.0.1:8080/grid!display.do?¤tPage=2&selectedSort=&selectedFilter='); + cy.get('[data-test="query-string"]').contains('http://127.0.0.1:8080/grid!display.do?¤tPage=2&selectedSort=&selectedFilter='); - cy.get('.page-spin') - .should('be.visible', false); + cy.get('.page-spin').should('be.visible', false); }); xit('should filter with "New" Status and expect query string to contains the search and the page to be back to Page 1', () => { - cy.get('input.search-filter.filter-status') - .type('New'); + cy.get('input.search-filter.filter-status').type('New'); - cy.get('.page-spin') - .should('be.visible', true); + cy.get('.page-spin').should('be.visible', true); - cy.get('[data-test="query-string"]') - .contains('http://127.0.0.1:8080/grid!display.do?¤tPage=1&selectedSort=&selectedFilter=All|New|All|All|All|All|'); + cy.get('[data-test="query-string"]').contains( + 'http://127.0.0.1:8080/grid!display.do?¤tPage=1&selectedSort=&selectedFilter=All|New|All|All|All|All|' + ); cy.get('.slick-pagination-nav input') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('1')); + .then((pageNumber) => expect(pageNumber).to.eq('1')); - cy.get('.page-spin') - .should('be.visible', false); + cy.get('.page-spin').should('be.visible', false); }); xit('should go to last page 5 and expect query to be updated accordingly', () => { cy.get('.icon-seek-end').click(); - cy.get('.page-spin') - .should('be.visible', true); + cy.get('.page-spin').should('be.visible', true); cy.get('.slick-pagination-nav input') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('5')); + .then((pageNumber) => expect(pageNumber).to.eq('5')); - cy.get('[data-test="query-string"]') - .contains('http://127.0.0.1:8080/grid!display.do?¤tPage=5&selectedSort=&selectedFilter=All|New|All|All|All|All|'); + cy.get('[data-test="query-string"]').contains( + 'http://127.0.0.1:8080/grid!display.do?¤tPage=5&selectedSort=&selectedFilter=All|New|All|All|All|All|' + ); - cy.get('.page-spin') - .should('be.visible', false); + cy.get('.page-spin').should('be.visible', false); }); }); diff --git a/test/cypress/e2e/example14.cy.ts b/test/cypress/e2e/example14.cy.ts index 3f496e6ca..1e9347825 100644 --- a/test/cypress/e2e/example14.cy.ts +++ b/test/cypress/e2e/example14.cy.ts @@ -20,7 +20,10 @@ describe('Example 14 - Grouping & Aggregators', () => { cy.get('[data-test="group-duration-sort-value-btn"]').click(); cy.get('[data-test="collapse-all-btn"]').click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should( + 'have.length', + 1 + ); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 1'); @@ -34,7 +37,10 @@ describe('Example 14 - Grouping & Aggregators', () => { cy.get('[data-test="group-duration-sort-value-btn"]').click(); cy.get('[data-test="expand-all-btn"]').click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should( + 'have.length', + 1 + ); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Task'); @@ -44,33 +50,70 @@ describe('Example 14 - Grouping & Aggregators', () => { it('should "Group by Duration then Effort-Driven" and expect 1st row to be expanded, 2nd row to be collapsed and 3rd row to have group totals', () => { cy.get('[data-test="group-duration-effort-btn"]').click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); - - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: False'); - - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: True'); - - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"].slick-group-totals.slick-group-level-0 .slick-cell:nth(2)`).should('contain', 'Total: 0'); + cy.get( + `[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded` + ).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should( + 'contain', + 'Duration: 0' + ); + + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.collapsed`).should( + 'have.length', + 1 + ); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should( + 'contain', + 'Effort-Driven: False' + ); + + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-1 .slick-group-toggle.collapsed`).should( + 'have.length', + 1 + ); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-1 .slick-group-title`).should( + 'contain', + 'Effort-Driven: True' + ); + + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"].slick-group-totals.slick-group-level-0 .slick-cell:nth(2)`).should( + 'contain', + 'Total: 0' + ); }); it('should "Group by Duration then Effort-Driven then Percent" and expect fist 2 rows to be expanded, 3rd row to be collapsed then 4th row to have group total', () => { cy.get('[data-test="group-duration-effort-percent-btn"]').click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); - - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: False'); - - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-2 .slick-group-toggle.collapsed`).should('have.length', 1); + cy.get( + `[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded` + ).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should( + 'contain', + 'Duration: 0' + ); + + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.expanded`).should( + 'have.length', + 1 + ); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should( + 'contain', + 'Effort-Driven: False' + ); + + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-2 .slick-group-toggle.collapsed`).should( + 'have.length', + 1 + ); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-2 .slick-group-title`).contains(/^% Complete: [0-9]/); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"].slick-group-totals.slick-group-level-2 .slick-cell:nth(3)`).contains(/^Avg: [0-9]%$/); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"].slick-group-totals.slick-group-level-2 .slick-cell:nth(3)`).contains( + /^Avg: [0-9]%$/ + ); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"].slick-group-totals.slick-group-level-2`) - .find('.slick-cell:nth(3)').contains('Avg: '); + .find('.slick-cell:nth(3)') + .contains('Avg: '); }); }); @@ -80,19 +123,13 @@ describe('Example 14 - Grouping & Aggregators', () => { }); it('should return 500 rows using "Ta*33" (starts with "Ta" + ends with 33)', () => { - cy.get('.search-filter.filter-title') - .clear() - .type('Ta*3'); + cy.get('.search-filter.filter-title').clear().type('Ta*3'); - cy.get('.item-count') - .should('contain', 5000); + cy.get('.item-count').should('contain', 5000); - cy.get('.search-filter.filter-title') - .clear() - .type('Ta*33'); + cy.get('.search-filter.filter-title').clear().type('Ta*33'); - cy.get('.item-count') - .should('contain', 500); + cy.get('.item-count').should('contain', 500); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 33'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 133'); @@ -101,12 +138,9 @@ describe('Example 14 - Grouping & Aggregators', () => { }); it('should return 40000 rows using "Ta*" (starts with "Ta")', () => { - cy.get('.search-filter.filter-title') - .clear() - .type('Ta*'); + cy.get('.search-filter.filter-title').clear().type('Ta*'); - cy.get('.item-count') - .should('contain', 50000); + cy.get('.item-count').should('contain', 50000); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 0'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 1'); @@ -115,12 +149,9 @@ describe('Example 14 - Grouping & Aggregators', () => { }); it('should return 500 rows using "*11" (ends with "11")', () => { - cy.get('.search-filter.filter-title') - .clear() - .type('*11'); + cy.get('.search-filter.filter-title').clear().type('*11'); - cy.get('.item-count') - .should('contain', 500); + cy.get('.item-count').should('contain', 500); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 1'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 11'); @@ -129,12 +160,9 @@ describe('Example 14 - Grouping & Aggregators', () => { }); it('should return 497 rows using ">222" (greater than 222)', () => { - cy.get('.search-filter.filter-sel') - .clear() - .type('>222'); + cy.get('.search-filter.filter-sel').clear().type('>222'); - cy.get('.item-count') - .should('contain', 497); + cy.get('.item-count').should('contain', 497); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 311'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 411'); @@ -143,19 +171,13 @@ describe('Example 14 - Grouping & Aggregators', () => { }); it('should return 499 rows using "<>311" (not equal to 311)', () => { - cy.get('.search-filter.filter-sel') - .clear() - .type('<>311'); + cy.get('.search-filter.filter-sel').clear().type('<>311'); - cy.get('.item-count') - .should('contain', 499); + cy.get('.item-count').should('contain', 499); - cy.get('.search-filter.filter-sel') - .clear() - .type('!=311'); + cy.get('.search-filter.filter-sel').clear().type('!=311'); - cy.get('.item-count') - .should('contain', 499); + cy.get('.item-count').should('contain', 499); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 11'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 111'); @@ -165,19 +187,13 @@ describe('Example 14 - Grouping & Aggregators', () => { }); it('should return 1 rows using "=311" or "==311" (equal to 311)', () => { - cy.get('.search-filter.filter-sel') - .clear() - .type('=311'); + cy.get('.search-filter.filter-sel').clear().type('=311'); - cy.get('.item-count') - .should('contain', 1); + cy.get('.item-count').should('contain', 1); - cy.get('.search-filter.filter-sel') - .clear() - .type('==311'); + cy.get('.search-filter.filter-sel').clear().type('==311'); - cy.get('.item-count') - .should('contain', 1); + cy.get('.item-count').should('contain', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 311'); }); @@ -194,12 +210,7 @@ describe('Example 14 - Grouping & Aggregators', () => { }); it('should open Column Picker and have a "Custom Label" as the 1st column label', () => { - cy.get('#grid14') - .find('.slick-header-column') - .first() - .trigger('mouseover') - .trigger('contextmenu') - .invoke('show'); + cy.get('#grid14').find('.slick-header-column').first().trigger('mouseover').trigger('contextmenu').invoke('show'); cy.get('.slick-column-picker') .find('.slick-column-picker-list li:nth-child(1) .checkbox-label') @@ -207,17 +218,13 @@ describe('Example 14 - Grouping & Aggregators', () => { }); it('should open Grid Menu and have a "Custom Label" as the 1st column label', () => { - cy.get('#grid14') - .find('button.slick-grid-menu-button') - .trigger('click') - .click({ force: true }); + cy.get('#grid14').find('button.slick-grid-menu-button').trigger('click').click({ force: true }); cy.get(`.slick-grid-menu:visible`) .find('.slick-column-picker-list li:nth-child(1) .checkbox-label') .should('have.text', 'Custom Label'); - cy.get('[data-dismiss="slick-grid-menu"]') - .click(); + cy.get('[data-dismiss="slick-grid-menu"]').click(); }); }); }); diff --git a/test/cypress/e2e/example15.cy.ts b/test/cypress/e2e/example15.cy.ts index 75bf194f3..6ccd1060d 100644 --- a/test/cypress/e2e/example15.cy.ts +++ b/test/cypress/e2e/example15.cy.ts @@ -46,8 +46,7 @@ describe('Example 15 - Column Span & Header Grouping', () => { }); it('should click on the "Remove Frozen Columns" button to switch to a regular grid without frozen columns and expect 7 columns on the left container', () => { - cy.contains('Remove Frozen Columns') - .click({ force: true }); + cy.contains('Remove Frozen Columns').click({ force: true }); cy.get('#grid2').find('[style="top: 0px;"]').should('have.length', 1); cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 7); @@ -72,8 +71,7 @@ describe('Example 15 - Column Span & Header Grouping', () => { }); it('should click on the "Set 3 Frozen Columns" button to switch frozen columns grid and expect 3 frozen columns on the left and 4 columns on the right', () => { - cy.contains('Set 3 Frozen Columns') - .click({ force: true }); + cy.contains('Set 3 Frozen Columns').click({ force: true }); cy.get('#grid2').find('[style="top: 0px;"]').should('have.length', 2); cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3); @@ -100,12 +98,9 @@ describe('Example 15 - Column Span & Header Grouping', () => { }); it('should click on the Grid Menu command "Unfreeze Columns/Rows" to switch to a regular grid without frozen columns and expect 7 columns on the left container', () => { - cy.get('#grid2') - .find('button.slick-grid-menu-button') - .click({ force: true }); + cy.get('#grid2').find('button.slick-grid-menu-button').click({ force: true }); - cy.contains('Unfreeze Columns/Rows') - .click({ force: true }); + cy.contains('Unfreeze Columns/Rows').click({ force: true }); cy.get('#grid2').find('[style="top: 0px;"]').should('have.length', 1); cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 7); diff --git a/test/cypress/e2e/example16.cy.ts b/test/cypress/e2e/example16.cy.ts index ae574ab33..13f2d2b97 100644 --- a/test/cypress/e2e/example16.cy.ts +++ b/test/cypress/e2e/example16.cy.ts @@ -38,32 +38,21 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { cy.get('@grid16') .find('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('1')); + .then((pageNumber) => expect(pageNumber).to.eq('1')); - cy.get('@grid16') - .find('[data-test=page-count]') - .contains('20'); + cy.get('@grid16').find('[data-test=page-count]').contains('20'); - cy.get('@grid16') - .find('[data-test=item-from]') - .contains('1'); + cy.get('@grid16').find('[data-test=item-from]').contains('1'); - cy.get('@grid16') - .find('[data-test=item-to]') - .contains('25'); + cy.get('@grid16').find('[data-test=item-to]').contains('25'); - cy.get('@grid16') - .find('[data-test=total-items]') - .contains('500'); + cy.get('@grid16').find('[data-test=total-items]').contains('500'); }); it('should drag "Title" column to 3rd position in the grid', () => { const expectedTitles = ['', 'Description', 'Duration', 'Title', '% Complete', 'Start', 'Completed']; - cy.get('.slick-header-columns') - .children('.slick-header-column:nth(1)') - .contains('Title') - .drag('.slick-header-column:nth(3)'); + cy.get('.slick-header-columns').children('.slick-header-column:nth(1)').contains('Title').drag('.slick-header-column:nth(3)'); cy.get('.slick-header-column:nth(3)').contains('Title'); @@ -98,12 +87,7 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { it('should hide the "Start" column from the Column Picker', () => { const expectedTitles = ['', 'Description', 'Duration', 'Title', '% Complete', 'Start', 'Completed']; - cy.get('#grid16') - .find('.slick-header-column') - .first() - .trigger('mouseover') - .trigger('contextmenu') - .invoke('show'); + cy.get('#grid16').find('.slick-header-column').first().trigger('mouseover').trigger('contextmenu').invoke('show'); cy.get('.slick-column-picker') .find('.slick-column-picker-list') @@ -125,27 +109,19 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { .should('contain', 'Start') .click(); - cy.get('.slick-column-picker:visible') - .find('.close') - .trigger('click') - .click(); + cy.get('.slick-column-picker:visible').find('.close').trigger('click').click(); }); it('should filter certain tasks', () => { - cy.get('.grid-canvas') - .find('.slick-row') - .should('be.visible'); + cy.get('.grid-canvas').find('.slick-row').should('be.visible'); - cy.get('.filter-title input') - .type('Task 1'); + cy.get('.filter-title input').type('Task 1'); }); it('should click on "Title" column to sort it Ascending', () => { const expectedTasks = ['Task 1', 'Task 10', 'Task 100', 'Task 101']; - cy.get('.slick-header-columns') - .children('.slick-header-column:nth(3)') - .click(); + cy.get('.slick-header-columns').children('.slick-header-column:nth(3)').click(); cy.get('.slick-header-columns') .children('.slick-header-column:nth(3)') @@ -158,8 +134,7 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { if (index > expectedTasks.length - 1) { return; } - cy.wrap($row).children('.slick-cell:nth(3)') - .should('contain', expectedTasks[index]); + cy.wrap($row).children('.slick-cell:nth(3)').should('contain', expectedTasks[index]); }); }); @@ -211,8 +186,7 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { cy.get('#slickGridContainer-grid16').as('grid16'); - cy.get('@grid16') - .find('#items-per-page-label').select('20'); + cy.get('@grid16').find('#items-per-page-label').select('20'); cy.get('@grid16'); cy.get('.icon-seek-next').click().click(); @@ -222,23 +196,15 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { cy.get('@grid16') .find('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('3')); + .then((pageNumber) => expect(pageNumber).to.eq('3')); - cy.get('@grid16') - .find('[data-test=page-count]') - .contains('6'); + cy.get('@grid16').find('[data-test=page-count]').contains('6'); - cy.get('@grid16') - .find('[data-test=item-from]') - .contains('41'); + cy.get('@grid16').find('[data-test=item-from]').contains('41'); - cy.get('@grid16') - .find('[data-test=item-to]') - .contains('60'); + cy.get('@grid16').find('[data-test=item-to]').contains('60'); - cy.get('@grid16') - .find('[data-test=total-items]') - .contains('111'); + cy.get('@grid16').find('[data-test=total-items]').contains('111'); cy.get('@grid16') .find('.slick-row') @@ -246,8 +212,7 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { if (index > expectedTasks.length - 1) { return; } - cy.wrap($row).children('.slick-cell:nth(3)') - .should('contain', expectedTasks[index]); + cy.wrap($row).children('.slick-cell:nth(3)').should('contain', expectedTasks[index]); }); }); @@ -267,10 +232,7 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { it('should expect the same Grid State to persist after the page got reloaded', () => { const expectedTitles = ['', 'Description', 'Duration', 'Title', '% Complete', 'Completed']; - cy.get('#grid16') - .find('.grid-canvas') - .find('.slick-row') - .should('be.visible'); + cy.get('#grid16').find('.grid-canvas').find('.slick-row').should('be.visible'); cy.get('#grid16') .find('.slick-header-columns') @@ -286,23 +248,15 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { cy.get('@grid16') .find('[data-test=page-number-input]') .invoke('val') - .then(pageNumber => expect(pageNumber).to.eq('3')); + .then((pageNumber) => expect(pageNumber).to.eq('3')); - cy.get('@grid16') - .find('[data-test=page-count]') - .contains('6'); + cy.get('@grid16').find('[data-test=page-count]').contains('6'); - cy.get('@grid16') - .find('[data-test=item-from]') - .contains('41'); + cy.get('@grid16').find('[data-test=item-from]').contains('41'); - cy.get('@grid16') - .find('[data-test=item-to]') - .contains('60'); + cy.get('@grid16').find('[data-test=item-to]').contains('60'); - cy.get('@grid16') - .find('[data-test=total-items]') - .contains('111'); + cy.get('@grid16').find('[data-test=total-items]').contains('111'); cy.get('@grid16') .find('.slick-row') @@ -310,8 +264,7 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { if (index > expectedTasks.length - 1) { return; } - cy.wrap($row).children('.slick-cell:nth(3)') - .should('contain', expectedTasks[index]); + cy.wrap($row).children('.slick-cell:nth(3)').should('contain', expectedTasks[index]); }); }); @@ -320,7 +273,7 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { .contains('Task 144') .parent() .children() - .each($child => { + .each(($child) => { console.log($child); expect($child.attr('class')).to.contain('selected'); }); @@ -329,18 +282,11 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { it('should have French titles in Column Picker after switching to Language', () => { const expectedTitles = ['', 'Description', 'Durée', 'Titre', '% Achevée', 'Début', 'Terminé']; - cy.get('[data-test=language-button]') - .click(); + cy.get('[data-test=language-button]').click(); - cy.get('[data-test=selected-locale]') - .should('contain', 'fr.json'); + cy.get('[data-test=selected-locale]').should('contain', 'fr.json'); - cy.get('#grid16') - .find('.slick-header-column') - .first() - .trigger('mouseover') - .trigger('contextmenu') - .invoke('show'); + cy.get('#grid16').find('.slick-header-column').first().trigger('mouseover').trigger('contextmenu').invoke('show'); cy.get('.slick-column-picker') .find('.slick-column-picker-list') @@ -355,18 +301,13 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { expect($child.text()).to.eq(expectedTitles[index]); }); - cy.get('.slick-column-picker:visible') - .find('.close') - .trigger('click') - .click(); + cy.get('.slick-column-picker:visible').find('.close').trigger('click').click(); }); it('should have French titles in Grid Menu after switching to Language', () => { const expectedTitles = ['', 'Description', 'Durée', 'Titre', '% Achevée', 'Début', 'Terminé']; - cy.get('#grid16') - .find('button.slick-grid-menu-button') - .click({ force: true }); + cy.get('#grid16').find('button.slick-grid-menu-button').click({ force: true }); cy.get('.slick-grid-menu') .find('.slick-column-picker-list') @@ -381,10 +322,7 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { expect($child.text()).to.eq(expectedTitles[index]); }); - cy.get('.slick-grid-menu:visible') - .find('.close') - .trigger('click') - .click(); + cy.get('.slick-grid-menu:visible').find('.close').trigger('click').click(); }); it('should hover over the "Terminé" column and click on "Cacher la colonne" remove the column from grid', () => { @@ -435,10 +373,7 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { it('should expect the same Grid State to persist after the page got reloaded, however we always load in English', () => { const expectedTitles = ['', 'Description', 'Duration', 'Title', '% Complete']; - cy.get('#grid16') - .find('.grid-canvas') - .find('.slick-row') - .should('be.visible'); + cy.get('#grid16').find('.grid-canvas').find('.slick-row').should('be.visible'); cy.get('.slick-header-columns') .children('.slick-header-column:nth(2)') @@ -468,7 +403,7 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { .contains('Task 144') .parent() .children() - .each($child => { + .each(($child) => { console.log($child); expect($child.attr('class')).to.contain('selected'); }); @@ -477,16 +412,13 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { it('should go back to first page and expect row selection (Task 105) to be persisted', () => { cy.get('#slickGridContainer-grid16').as('grid16'); - cy.get('@grid16') - .find('.icon-seek-first') - .click() - .wait(10); + cy.get('@grid16').find('.icon-seek-first').click().wait(10); cy.get('#grid16') .contains('Task 105') .parent() .children() - .each($child => { + .each(($child) => { console.log($child); expect($child.attr('class')).to.contain('selected'); }); @@ -501,8 +433,7 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { it('should click on the reset button and have exact Column Titles position as in beginning', () => { cy.get('#slickGridContainer-grid16').as('grid16'); - cy.get('[data-test="reset-button"]') - .click(); + cy.get('[data-test="reset-button"]').click(); cy.get('@grid16') .find('.slick-header-columns') @@ -582,11 +513,9 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { cy.clearLocalStorage(); cy.get('[data-test=reset-button]').click(); - cy.get('[data-test=language-button]') - .click(); + cy.get('[data-test=language-button]').click(); - cy.get('[data-test="selected-locale"]') - .should('contain', 'fr.json'); + cy.get('[data-test="selected-locale"]').should('contain', 'fr.json'); }); it('should open header menu of "Start" column and choose "Filter Shortcuts -> Past" and expect over 200 rows', () => { @@ -597,26 +526,17 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { .invoke('show') .click(); - cy.get('[data-command=filter-shortcuts-root-menu]') - .should('contain', 'Raccourcis de filtre') - .trigger('mouseover'); + cy.get('[data-command=filter-shortcuts-root-menu]').should('contain', 'Raccourcis de filtre').trigger('mouseover'); - cy.get('.slick-header-menu.slick-menu-level-1') - .find('[data-command=past]') - .should('contain', 'Passé') - .click(); + cy.get('.slick-header-menu.slick-menu-level-1').find('[data-command=past]').should('contain', 'Passé').click(); - cy.get('.search-filter.filter-start .input-group-prepend.operator select') - .contains('<'); + cy.get('.search-filter.filter-start .input-group-prepend.operator select').contains('<'); - cy.get('.search-filter.filter-start input.date-picker') - .invoke('val') - .should('equal', format(new Date(), 'YYYY-MM-DD')); + cy.get('.search-filter.filter-start input.date-picker').invoke('val').should('equal', format(new Date(), 'YYYY-MM-DD')); - cy.get('[data-test="total-items"]') - .should($span => { - expect(Number($span.text())).to.gt(200); - }); + cy.get('[data-test="total-items"]').should(($span) => { + expect(Number($span.text())).to.gt(200); + }); }); it('should open header menu of "Start" column and choose "Filter Shortcuts -> Future" and expect over 100 rows', () => { @@ -627,25 +547,17 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { .invoke('show') .click(); - cy.get('[data-command=filter-shortcuts-root-menu]') - .should('contain', 'Raccourcis de filtre') - .trigger('mouseover'); + cy.get('[data-command=filter-shortcuts-root-menu]').should('contain', 'Raccourcis de filtre').trigger('mouseover'); - cy.get('.slick-header-menu.slick-menu-level-1') - .find('[data-command=future]') - .click(); + cy.get('.slick-header-menu.slick-menu-level-1').find('[data-command=future]').click(); - cy.get('.search-filter.filter-start .input-group-prepend.operator select') - .contains('>'); + cy.get('.search-filter.filter-start .input-group-prepend.operator select').contains('>'); - cy.get('.search-filter.filter-start input.date-picker') - .invoke('val') - .should('equal', format(new Date(), 'YYYY-MM-DD')); + cy.get('.search-filter.filter-start input.date-picker').invoke('val').should('equal', format(new Date(), 'YYYY-MM-DD')); - cy.get('[data-test="total-items"]') - .should($span => { - expect(Number($span.text())).to.gt(100); - }); + cy.get('[data-test="total-items"]').should(($span) => { + expect(Number($span.text())).to.gt(100); + }); }); it('should open header menu of "Description" column and choose "Filter Shortcuts -> Blank Values" and expect over 10 rows', () => { @@ -656,31 +568,24 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { .invoke('show') .click(); - cy.get('[data-command=filter-shortcuts-root-menu]') - .should('contain', 'Raccourcis de filtre') - .trigger('mouseover'); + cy.get('[data-command=filter-shortcuts-root-menu]').should('contain', 'Raccourcis de filtre').trigger('mouseover'); cy.get('.slick-header-menu.slick-menu-level-1') .find('[data-command=blank-values]') .should('contain', 'Valeurs nulles') .click(); - cy.get('.search-filter.filter-description') - .invoke('val') - .should('equal', '< A'); + cy.get('.search-filter.filter-description').invoke('val').should('equal', '< A'); - cy.get('[data-test="total-items"]') - .should($span => { - expect(Number($span.text())).to.gt(10); - }); + cy.get('[data-test="total-items"]').should(($span) => { + expect(Number($span.text())).to.gt(10); + }); }); it('should switch back to English', () => { - cy.get('[data-test=language-button]') - .click(); + cy.get('[data-test=language-button]').click(); - cy.get('[data-test="selected-locale"]') - .should('contain', 'en.json'); + cy.get('[data-test="selected-locale"]').should('contain', 'en.json'); }); it('should open header menu of "Description" column and choose "Filter Shortcuts -> Non-Blank Values" and expect over 80 rows', () => { @@ -691,23 +596,18 @@ describe('Example 16: Grid State & Presets using Local Storage', () => { .invoke('show') .click(); - cy.get('[data-command=filter-shortcuts-root-menu]') - .should('contain', 'Filter Shortcuts') - .trigger('mouseover'); + cy.get('[data-command=filter-shortcuts-root-menu]').should('contain', 'Filter Shortcuts').trigger('mouseover'); cy.get('.slick-header-menu.slick-menu-level-1') .find('[data-command=non-blank-values]') .should('contain', 'Non-Blank Values') .click(); - cy.get('.search-filter.filter-description') - .invoke('val') - .should('equal', '> A'); + cy.get('.search-filter.filter-description').invoke('val').should('equal', '> A'); - cy.get('[data-test="total-items"]') - .should($span => { - expect(Number($span.text())).to.gt(80); - }); + cy.get('[data-test="total-items"]').should(($span) => { + expect(Number($span.text())).to.gt(80); + }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).contains('desc'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).contains('desc'); diff --git a/test/cypress/e2e/example17.cy.ts b/test/cypress/e2e/example17.cy.ts index 4d8d7a1f1..b663c58aa 100644 --- a/test/cypress/e2e/example17.cy.ts +++ b/test/cypress/e2e/example17.cy.ts @@ -7,7 +7,6 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => { cy.get('h2').should('contain', 'Example 17: Row Move & Checkbox Selector'); }); - it('should have exact Column Titles in the grid', () => { cy.get('#grid17') .find('.slick-header-columns') @@ -18,7 +17,7 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => { it('should have 4 rows selected count shown in the grid left footer', () => { cy.get('.slick-custom-footer') .find('div.left-footer') - .should($span => { + .should(($span) => { expect($span.text()).to.eq(`4 items selected`); }); }); @@ -30,23 +29,17 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => { cy.get('@moveIconTask3').should('have.length', 1); - cy.get('@moveIconTask3') - .trigger('mousedown', { which: 1, force: true }) - .trigger('mousemove', 'bottomRight'); + cy.get('@moveIconTask3').trigger('mousedown', { which: 1, force: true }).trigger('mousemove', 'bottomRight'); - cy.get('@moveIconTask1') - .trigger('mousemove', 'bottomRight') - .trigger('mouseup', 'bottomRight', { which: 1, force: true }); + cy.get('@moveIconTask1').trigger('mousemove', 'bottomRight').trigger('mouseup', 'bottomRight', { which: 1, force: true }); cy.get('@moveIconTask2').trigger('mouseover', { force: true }); - cy.get('input[type="checkbox"]:checked') - .should('have.length', 4); + cy.get('input[type="checkbox"]:checked').should('have.length', 4); }); it('should expect the row to have moved to another row index', () => { - cy.get('.slick-viewport-top.slick-viewport-left') - .scrollTo('top'); + cy.get('.slick-viewport-top.slick-viewport-left').scrollTo('top'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 0'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 1'); @@ -54,21 +47,18 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 2'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 4'); - cy.get('input[type="checkbox"]:checked') - .should('have.length', 4); + cy.get('input[type="checkbox"]:checked').should('have.length', 4); }); it('should uncheck all rows', () => { // click twice to check then uncheck all - cy.get('.slick-headerrow-column input[type=checkbox]') - .click({ force: true }) - .click({ force: true }); + cy.get('.slick-headerrow-column input[type=checkbox]').click({ force: true }).click({ force: true }); }); it('should have 0 row selected count shown in the grid left footer', () => { cy.get('.slick-custom-footer') .find('div.left-footer') - .should($span => { + .should(($span) => { expect($span.text()).to.eq(`0 items selected`); }); }); @@ -82,16 +72,11 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => { cy.get('@moveIconTask3').should('have.length', 1); - cy.get('@moveIconTask3') - .trigger('mousedown', { which: 1, force: true }) - .trigger('mousemove', 'bottomRight'); + cy.get('@moveIconTask3').trigger('mousedown', { which: 1, force: true }).trigger('mousemove', 'bottomRight'); - cy.get('@moveIconTask5') - .trigger('mousemove', 'bottomRight') - .trigger('mouseup', 'bottomRight', { which: 1, force: true }); + cy.get('@moveIconTask5').trigger('mousemove', 'bottomRight').trigger('mouseup', 'bottomRight', { which: 1, force: true }); - cy.get('.slick-viewport-top.slick-viewport-left') - .scrollTo('top'); + cy.get('.slick-viewport-top.slick-viewport-left').scrollTo('top'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 0'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 1'); @@ -102,8 +87,14 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => { // Task 4 and 3 should be selected cy.get('input[type="checkbox"]:checked').should('have.length', 2); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1) input[type="checkbox"]:checked`).should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(1) input[type="checkbox"]:checked`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1) input[type="checkbox"]:checked`).should( + 'have.length', + 1 + ); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(1) input[type="checkbox"]:checked`).should( + 'have.length', + 1 + ); }); it('should move "Duration" column to a different position in the grid', () => { @@ -152,10 +143,7 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => { it('should expect "Clear all Filters" command to be hidden in the Grid Menu', () => { const expectedFullHeaderMenuCommands = ['Clear all Filters', 'Clear all Sorting', 'Toggle Filter Row', 'Export to Excel']; - cy.get('#grid17') - .find('button.slick-grid-menu-button') - .trigger('click') - .click({ force: true }); + cy.get('#grid17').find('button.slick-grid-menu-button').trigger('click').click({ force: true }); cy.get('.slick-menu-command-list') .find('.slick-menu-item') @@ -193,7 +181,16 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => { }); it('should be able to toggle Sorting functionality (disable) and expect all header menu Sorting commands to be hidden and also not show Sort hint while hovering a column', () => { - const expectedFullHeaderMenuCommands = ['Resize by Content', '', 'Sort Ascending', 'Sort Descending', '', 'Remove Filter', 'Remove Sort', 'Hide Column']; + const expectedFullHeaderMenuCommands = [ + 'Resize by Content', + '', + 'Sort Ascending', + 'Sort Descending', + '', + 'Remove Filter', + 'Remove Sort', + 'Hide Column', + ]; cy.get('.slick-sort-indicator').should('have.length.greaterThan', 0); // sort icon hints cy.get('[data-test="toggle-sorting-btn"]').click(); // disable it @@ -223,10 +220,7 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => { it('should expect "Clear Sorting" command to be hidden in the Grid Menu', () => { const expectedFullHeaderMenuCommands = ['Clear all Filters', 'Clear all Sorting', 'Toggle Filter Row', 'Export to Excel']; - cy.get('#grid17') - .find('button.slick-grid-menu-button') - .trigger('click') - .click(); + cy.get('#grid17').find('button.slick-grid-menu-button').trigger('click').click(); cy.get('.slick-menu-command-list') .find('.slick-menu-item') @@ -242,7 +236,16 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => { }); it('should be able to toggle Sorting functionality (re-enable) and expect all Sorting header menu commands to be hidden and also not show Sort hint while hovering a column', () => { - const expectedFullHeaderMenuCommands = ['Resize by Content', '', 'Sort Ascending', 'Sort Descending', '', 'Remove Filter', 'Remove Sort', 'Hide Column']; + const expectedFullHeaderMenuCommands = [ + 'Resize by Content', + '', + 'Sort Ascending', + 'Sort Descending', + '', + 'Remove Filter', + 'Remove Sort', + 'Hide Column', + ]; cy.get('.slick-sort-indicator').should('have.length', 0); // sort icon hints cy.get('[data-test="toggle-sorting-btn"]').click(); // enable it back @@ -268,10 +271,7 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => { it('should expect "Clear Sorting" command to be hidden in the Grid Menu', () => { const expectedFullHeaderMenuCommands = ['Clear all Filters', 'Clear all Sorting', 'Toggle Filter Row', 'Export to Excel']; - cy.get('#grid17') - .find('button.slick-grid-menu-button') - .trigger('click') - .click(); + cy.get('#grid17').find('button.slick-grid-menu-button').trigger('click').click(); cy.get('.slick-menu-command-list') .find('.slick-menu-item') @@ -287,7 +287,16 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => { }); it('should be able to click disable Sorting functionality button and expect all Sorting commands to be hidden and also not show Sort hint while hovering a column', () => { - const expectedFullHeaderMenuCommands = ['Resize by Content', '', 'Sort Ascending', 'Sort Descending', '', 'Remove Filter', 'Remove Sort', 'Hide Column']; + const expectedFullHeaderMenuCommands = [ + 'Resize by Content', + '', + 'Sort Ascending', + 'Sort Descending', + '', + 'Remove Filter', + 'Remove Sort', + 'Hide Column', + ]; cy.get('.slick-sort-indicator').should('have.length.greaterThan', 0); // sort icon hints cy.get('[data-test="disable-sorting-btn"]').click().click(); // even clicking twice should have same result @@ -315,7 +324,16 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => { }); it('should be able to click disable Filter functionality button and expect all Filter commands to be hidden and also not show Sort hint while hovering a column', () => { - const expectedFullHeaderMenuCommands = ['Resize by Content', '', 'Sort Ascending', 'Sort Descending', '', 'Remove Filter', 'Remove Sort', 'Hide Column']; + const expectedFullHeaderMenuCommands = [ + 'Resize by Content', + '', + 'Sort Ascending', + 'Sort Descending', + '', + 'Remove Filter', + 'Remove Sort', + 'Hide Column', + ]; cy.get('[data-test="disable-filters-btn"]').click().click(); // even clicking twice should have same result @@ -343,10 +361,7 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => { it('should expect "Clear all Filters" command to be hidden in the Grid Menu', () => { const expectedFullHeaderMenuCommands = ['Clear all Filters', 'Clear all Sorting', 'Toggle Filter Row', 'Export to Excel']; - cy.get('#grid17') - .find('button.slick-grid-menu-button') - .trigger('click') - .click(); + cy.get('#grid17').find('button.slick-grid-menu-button').trigger('click').click(); cy.get('.slick-menu-command-list') .find('.slick-menu-item') @@ -365,12 +380,7 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => { // first 2 cols are hidden but they do count as li item const expectedFullPickerTitles = ['', '', 'Title', '% Complete', 'Start', 'Finish', 'Duration', 'Completed']; - cy.get('#grid17') - .find('.slick-header-column') - .first() - .trigger('mouseover') - .trigger('contextmenu') - .invoke('show'); + cy.get('#grid17').find('.slick-header-column').first().trigger('mouseover').trigger('contextmenu').invoke('show'); cy.get('.slick-column-picker') .find('.slick-column-picker-list') @@ -388,11 +398,7 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => { .should('contain', 'Duration') .click(); - cy.get('#grid17') - .get('.slick-column-picker:visible') - .find('.close') - .trigger('click') - .click(); + cy.get('#grid17').get('.slick-column-picker:visible').find('.close').trigger('click').click(); cy.get('#grid17') .find('.slick-header-columns') @@ -417,16 +423,8 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => { } }); - cy.get('.slick-row') - .first() - .children('.slick-cell') - .children('.mdi.mdi-pencil') - .should('have.length', 1); - - cy.get('.slick-row') - .first() - .children('.slick-cell:nth(1)') - .children('.mdi.mdi-trash-can') - .should('have.length', 1); + cy.get('.slick-row').first().children('.slick-cell').children('.mdi.mdi-pencil').should('have.length', 1); + + cy.get('.slick-row').first().children('.slick-cell:nth(1)').children('.mdi.mdi-trash-can').should('have.length', 1); }); }); diff --git a/test/cypress/e2e/example19.cy.ts b/test/cypress/e2e/example19.cy.ts index 1a5dbbee1..db60b976e 100644 --- a/test/cypress/e2e/example19.cy.ts +++ b/test/cypress/e2e/example19.cy.ts @@ -37,7 +37,10 @@ describe('Example 19 - Draggable Grouping & Aggregators', () => { cy.get('.grouping-selects select:nth(0)').should('have.value', '2: duration'); cy.get('.grouping-selects select:nth(1)').should('not.have.value'); cy.get('.grouping-selects select:nth(2)').should('not.have.value'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should( + 'have.length', + 1 + ); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 1'); @@ -51,7 +54,10 @@ describe('Example 19 - Draggable Grouping & Aggregators', () => { cy.get('[data-test="group-duration-sort-value-btn"]').click(); cy.get('[data-test="expand-all-btn"]').click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should( + 'have.length', + 1 + ); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Task'); @@ -68,11 +74,22 @@ describe('Example 19 - Draggable Grouping & Aggregators', () => { it('should "Group by Duration then Effort-Driven" and expect 1st row to be expanded, 2nd row to be expanded and 3rd row to be a regular row', () => { cy.get('[data-test="group-duration-effort-btn"]').click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); - - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: False'); + cy.get( + `[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded` + ).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should( + 'contain', + 'Duration: 0' + ); + + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.expanded`).should( + 'have.length', + 1 + ); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should( + 'contain', + 'Effort-Driven: False' + ); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'Task'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', '0'); @@ -87,9 +104,7 @@ describe('Example 19 - Draggable Grouping & Aggregators', () => { }); it('should be able to drag and swap grouped column titles inside the pre-header', () => { - cy.get('.slick-dropped-grouping:nth(0) div') - .contains('Duration') - .drag('.slick-dropped-grouping:nth(1) div'); + cy.get('.slick-dropped-grouping:nth(0) div').contains('Duration').drag('.slick-dropped-grouping:nth(1) div'); cy.get('.slick-dropped-grouping:nth(0) div').contains('Effort-Driven'); cy.get('.slick-dropped-grouping:nth(1) div').contains('Duration'); @@ -99,10 +114,18 @@ describe('Example 19 - Draggable Grouping & Aggregators', () => { }); it('should expect the grouping to be swapped as well in the grid', () => { - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: False'); - - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1); + cy.get( + `[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded` + ).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should( + 'contain', + 'Effort-Driven: False' + ); + + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.expanded`).should( + 'have.length', + 1 + ); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Duration: 0'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'Task'); @@ -110,9 +133,7 @@ describe('Example 19 - Draggable Grouping & Aggregators', () => { }); it('should expand all rows with "Expand All" from context menu and expect all the Groups to be expanded and the Toogle All icon to be collapsed', () => { - cy.get('#grid19') - .find('.slick-row .slick-cell:nth(1)') - .rightclick({ force: true }); + cy.get('#grid19').find('.slick-row .slick-cell:nth(1)').rightclick({ force: true }); cy.get('.slick-context-menu .slick-menu-command-list') .find('.slick-menu-item') @@ -120,22 +141,17 @@ describe('Example 19 - Draggable Grouping & Aggregators', () => { .contains('Expand all Groups') .click(); - cy.get('#grid19') - .find('.slick-group-toggle.collapsed') - .should('have.length', 0); + cy.get('#grid19').find('.slick-group-toggle.collapsed').should('have.length', 0); cy.get('#grid19') .find('.slick-group-toggle.expanded') .should(($rows) => expect($rows).to.have.length.greaterThan(0)); - cy.get('.slick-group-toggle-all-icon.expanded') - .should('exist'); + cy.get('.slick-group-toggle-all-icon.expanded').should('exist'); }); it('should collapse all rows with "Collapse All" from context menu and expect all the Groups to be collapsed and the Toogle All icon to be collapsed', () => { - cy.get('#grid19') - .find('.slick-row .slick-cell:nth(1)') - .rightclick({ force: true }); + cy.get('#grid19').find('.slick-row .slick-cell:nth(1)').rightclick({ force: true }); cy.get('.slick-context-menu .slick-menu-command-list') .find('.slick-menu-item') @@ -143,42 +159,54 @@ describe('Example 19 - Draggable Grouping & Aggregators', () => { .contains('Collapse all Groups') .click(); - cy.get('#grid19') - .find('.slick-group-toggle.expanded') - .should('have.length', 0); + cy.get('#grid19').find('.slick-group-toggle.expanded').should('have.length', 0); cy.get('#grid19') .find('.slick-group-toggle.collapsed') .should(($rows) => expect($rows).to.have.length.greaterThan(0)); - cy.get('.slick-group-toggle-all-icon.collapsed') - .should('exist'); + cy.get('.slick-group-toggle-all-icon.collapsed').should('exist'); }); it('should use the topheader Toggle All button and expect all groups to now be expanded', () => { cy.get('.slick-topheader-panel .slick-group-toggle-all').click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: False'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should( + 'have.length', + 1 + ); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should( + 'contain', + 'Effort-Driven: False' + ); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`) - .should('have.css', 'marginLeft').and('eq', `0px`); + .should('have.css', 'marginLeft') + .and('eq', `0px`); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`) - .should('have.css', 'marginLeft').and('eq', `15px`); + .should('have.css', 'marginLeft') + .and('eq', `15px`); }); it('should use the topheader Toggle All button again and expect all groups to now be collapsed', () => { cy.get('.slick-topheader-panel .slick-group-toggle-all').click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: False'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: True'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should( + 'have.length', + 1 + ); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should( + 'contain', + 'Effort-Driven: False' + ); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should( + 'contain', + 'Effort-Driven: True' + ); }); it('should clear all groups with "Clear all Grouping" from context menu and expect all the Groups to be collapsed and the Toogle All icon to be collapsed', () => { - cy.get('#grid19') - .find('.slick-row .slick-cell:nth(1)') - .rightclick({ force: true }); + cy.get('#grid19').find('.slick-row .slick-cell:nth(1)').rightclick({ force: true }); cy.get('.slick-context-menu .slick-menu-command-list') .find('.slick-menu-item') @@ -186,9 +214,7 @@ describe('Example 19 - Draggable Grouping & Aggregators', () => { .contains('Clear all Grouping') .click(); - cy.get('#grid19') - .find('.slick-group-toggle-all') - .should('be.hidden'); + cy.get('#grid19').find('.slick-group-toggle-all').should('be.hidden'); cy.get('#grid19') .find('.slick-draggable-dropzone-placeholder') @@ -197,11 +223,9 @@ describe('Example 19 - Draggable Grouping & Aggregators', () => { }); it('should add 500 items and expect 500 of 500 items displayed', () => { - cy.get('[data-test="add-500-rows-btn"]') - .click(); + cy.get('[data-test="add-500-rows-btn"]').click(); - cy.get('.right-footer') - .contains('500 of 500 items'); + cy.get('.right-footer').contains('500 of 500 items'); }); it('should clear all grouping and expect all select dropdown to be cleared too', () => { @@ -212,30 +236,31 @@ describe('Example 19 - Draggable Grouping & Aggregators', () => { }); it('should be able to toggle draggable grouping row (top-header panel)', () => { - cy.get('.slick-topheader-panel') - .should('be.visible'); + cy.get('.slick-topheader-panel').should('be.visible'); cy.get('[data-test="toggle-draggable-grouping-row"]').click(); - cy.get('.slick-topheader-panel') - .should('be.hidden'); + cy.get('.slick-topheader-panel').should('be.hidden'); cy.get('[data-test="toggle-draggable-grouping-row"]').click(); - cy.get('.slick-topheader-panel') - .should('be.visible'); + cy.get('.slick-topheader-panel').should('be.visible'); }); }); describe('Column Picker tests', () => { it('should open Column Picker from 2nd header column and hide Title & Duration which will hide Common Factor Group as well', () => { - const fullTitlesWithGroupNames = ['Common Factor - Title', 'Common Factor - Duration', 'Period - Start', 'Period - Finish', 'Analysis - Cost', 'Analysis - % Complete', 'Analysis - Effort-Driven']; - - cy.get('#grid19') - .find('.slick-header-column:nth(1)') - .trigger('mouseover') - .trigger('contextmenu') - .invoke('show'); + const fullTitlesWithGroupNames = [ + 'Common Factor - Title', + 'Common Factor - Duration', + 'Period - Start', + 'Period - Finish', + 'Analysis - Cost', + 'Analysis - % Complete', + 'Analysis - Effort-Driven', + ]; + + cy.get('#grid19').find('.slick-header-column:nth(1)').trigger('mouseover').trigger('contextmenu').invoke('show'); cy.get('.slick-column-picker') .find('.slick-column-picker-list') @@ -253,12 +278,19 @@ describe('Example 19 - Draggable Grouping & Aggregators', () => { .should('contain', 'Title') .click(); - cy.get('.slick-column-picker .close') - .click(); + cy.get('.slick-column-picker .close').click(); }); it('should open Column Picker from 2nd header column name and hide Duration which will hide Common Factor Group as well', () => { - const fullTitlesWithGroupNames = ['Common Factor - Title', 'Common Factor - Duration', 'Period - Start', 'Period - Finish', 'Analysis - Cost', 'Analysis - % Complete', 'Analysis - Effort-Driven']; + const fullTitlesWithGroupNames = [ + 'Common Factor - Title', + 'Common Factor - Duration', + 'Period - Start', + 'Period - Finish', + 'Analysis - Cost', + 'Analysis - % Complete', + 'Analysis - Effort-Driven', + ]; cy.get('#grid19') .find('.slick-header-column:nth(1) .slick-column-name') @@ -282,8 +314,7 @@ describe('Example 19 - Draggable Grouping & Aggregators', () => { .should('contain', 'Duration') .click(); - cy.get('.slick-column-picker .close') - .click(); + cy.get('.slick-column-picker .close').click(); }); it('should expect headers to be without Title/Duration and pre-headers without Common Factor Group header titles', () => { @@ -304,7 +335,15 @@ describe('Example 19 - Draggable Grouping & Aggregators', () => { }); it('should open Column Picker from Pre-Header column and show again Title column', () => { - const fullTitlesWithGroupNames = ['Common Factor - Title', 'Common Factor - Duration', 'Period - Start', 'Period - Finish', 'Analysis - Cost', 'Analysis - % Complete', 'Analysis - Effort-Driven']; + const fullTitlesWithGroupNames = [ + 'Common Factor - Title', + 'Common Factor - Duration', + 'Period - Start', + 'Period - Finish', + 'Analysis - Cost', + 'Analysis - % Complete', + 'Analysis - Effort-Driven', + ]; cy.get('#grid19') .find('.slick-preheader-panel .slick-header-column:nth(1)') @@ -329,12 +368,19 @@ describe('Example 19 - Draggable Grouping & Aggregators', () => { .click(); // close picker & reopen from a pre-header column name instead - cy.get('.slick-column-picker .close') - .click(); + cy.get('.slick-column-picker .close').click(); }); it('should open Column Picker from Pre-Header column name and show again Duration column', () => { - const fullTitlesWithGroupNames = ['Common Factor - Title', 'Common Factor - Duration', 'Period - Start', 'Period - Finish', 'Analysis - Cost', 'Analysis - % Complete', 'Analysis - Effort-Driven']; + const fullTitlesWithGroupNames = [ + 'Common Factor - Title', + 'Common Factor - Duration', + 'Period - Start', + 'Period - Finish', + 'Analysis - Cost', + 'Analysis - % Complete', + 'Analysis - Effort-Driven', + ]; cy.get('#grid19') .find('.slick-preheader-panel .slick-header-column:nth(1)') @@ -358,8 +404,7 @@ describe('Example 19 - Draggable Grouping & Aggregators', () => { .should('contain', 'Duration') .click(); - cy.get('.slick-column-picker .close') - .click(); + cy.get('.slick-column-picker .close').click(); }); it('should expect header titles to show again Title/Duration and pre-headers with Common Factor Group header titles', () => { @@ -379,4 +424,4 @@ describe('Example 19 - Draggable Grouping & Aggregators', () => { .each(($child, index) => expect($child.text()).to.eq(preHeadersWithFactor[index])); }); }); -}); \ No newline at end of file +}); diff --git a/test/cypress/e2e/example20.cy.ts b/test/cypress/e2e/example20.cy.ts index b638d3929..796b54685 100644 --- a/test/cypress/e2e/example20.cy.ts +++ b/test/cypress/e2e/example20.cy.ts @@ -1,7 +1,19 @@ describe('Example 20 - Frozen Grid', () => { // NOTE: everywhere there's a * 2 is because we have a top+bottom (frozen rows) containers even after Unfreeze Columns/Rows - const fullTitles = ['#', 'Title', '% Complete', 'Start', 'Finish', 'Cost | Duration', 'Effort Driven', 'Title 1', 'Title 2', 'Title 3', 'Title 4']; + const fullTitles = [ + '#', + 'Title', + '% Complete', + 'Start', + 'Finish', + 'Cost | Duration', + 'Effort Driven', + 'Title 1', + 'Title 2', + 'Title 3', + 'Title 4', + ]; it('should display Example title', () => { cy.visit(`${Cypress.config('baseUrl')}/frozen`); @@ -24,8 +36,12 @@ describe('Example 20 - Frozen Grid', () => { it('should have a frozen grid with 4 containers on page load with 3 columns on the left and 4 columns on the right', () => { cy.get('[style="top: 0px;"]').should('have.length', 2 * 2); - cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3 * 2); - cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 8 * 2); + cy.get('.grid-canvas-left > [style="top: 0px;"]') + .children() + .should('have.length', 3 * 2); + cy.get('.grid-canvas-right > [style="top: 0px;"]') + .children() + .should('have.length', 8 * 2); cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '0'); cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0'); @@ -35,11 +51,20 @@ describe('Example 20 - Frozen Grid', () => { }); it('should hide "Title" column from Grid Menu and expect last frozen column to be "% Complete"', () => { - const newColumnList = ['#', '% Complete', 'Start', 'Finish', 'Cost | Duration', 'Effort Driven', 'Title 1', 'Title 2', 'Title 3', 'Title 4']; - - cy.get('#grid20') - .find('button.slick-grid-menu-button') - .click({ force: true }); + const newColumnList = [ + '#', + '% Complete', + 'Start', + 'Finish', + 'Cost | Duration', + 'Effort Driven', + 'Title 1', + 'Title 2', + 'Title 3', + 'Title 4', + ]; + + cy.get('#grid20').find('button.slick-grid-menu-button').click({ force: true }); cy.get('#grid20') .get('.slick-grid-menu:visible') @@ -54,8 +79,12 @@ describe('Example 20 - Frozen Grid', () => { .children() .each(($child, index) => expect($child.text()).to.eq(newColumnList[index])); - cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 2 * 2); - cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 8 * 2); + cy.get('.grid-canvas-left > [style="top: 0px;"]') + .children() + .should('have.length', 2 * 2); + cy.get('.grid-canvas-right > [style="top: 0px;"]') + .children() + .should('have.length', 8 * 2); cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', ''); @@ -72,18 +101,19 @@ describe('Example 20 - Frozen Grid', () => { .should('contain', 'Title') .click({ force: true }); - cy.get('#grid20') - .get('.slick-grid-menu:visible') - .find('.close') - .click({ force: true }); + cy.get('#grid20').get('.slick-grid-menu:visible').find('.close').click({ force: true }); cy.get('#grid20') .find('.slick-header-columns') .children() .each(($child, index) => expect($child.text()).to.eq(fullTitles[index])); - cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3 * 2); - cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 8 * 2); + cy.get('.grid-canvas-left > [style="top: 0px;"]') + .children() + .should('have.length', 3 * 2); + cy.get('.grid-canvas-right > [style="top: 0px;"]') + .children() + .should('have.length', 8 * 2); cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', ''); cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0'); @@ -93,7 +123,18 @@ describe('Example 20 - Frozen Grid', () => { }); it('should hide "Title" column from Header Menu and expect last frozen column to be "% Complete"', () => { - const newColumnList = ['#', '% Complete', 'Start', 'Finish', 'Cost | Duration', 'Effort Driven', 'Title 1', 'Title 2', 'Title 3', 'Title 4']; + const newColumnList = [ + '#', + '% Complete', + 'Start', + 'Finish', + 'Cost | Duration', + 'Effort Driven', + 'Title 1', + 'Title 2', + 'Title 3', + 'Title 4', + ]; cy.get('#grid20') .find('.slick-header-column:nth(1)') @@ -115,8 +156,12 @@ describe('Example 20 - Frozen Grid', () => { .children() .each(($child, index) => expect($child.text()).to.eq(newColumnList[index])); - cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 2 * 2); - cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 8 * 2); + cy.get('.grid-canvas-left > [style="top: 0px;"]') + .children() + .should('have.length', 2 * 2); + cy.get('.grid-canvas-right > [style="top: 0px;"]') + .children() + .should('have.length', 8 * 2); cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', ''); @@ -125,11 +170,7 @@ describe('Example 20 - Frozen Grid', () => { }); it('should show again "Title" column from Column Picker and expect last frozen column to still be "% Complete"', () => { - cy.get('#grid20') - .find('.slick-header-column:nth(5)') - .trigger('mouseover') - .trigger('contextmenu') - .invoke('show'); + cy.get('#grid20').find('.slick-header-column:nth(5)').trigger('mouseover').trigger('contextmenu').invoke('show'); cy.get('.slick-column-picker') .find('.slick-column-picker-list') @@ -138,18 +179,19 @@ describe('Example 20 - Frozen Grid', () => { .should('contain', 'Title') .click(); - cy.get('.slick-column-picker:visible') - .find('.close') - .trigger('click') - .click(); + cy.get('.slick-column-picker:visible').find('.close').trigger('click').click(); cy.get('#grid20') .find('.slick-header-columns') .children() .each(($child, index) => expect($child.text()).to.eq(fullTitles[index])); - cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3 * 2); - cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 8 * 2); + cy.get('.grid-canvas-left > [style="top: 0px;"]') + .children() + .should('have.length', 3 * 2); + cy.get('.grid-canvas-right > [style="top: 0px;"]') + .children() + .should('have.length', 8 * 2); cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', ''); cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0'); @@ -159,11 +201,12 @@ describe('Example 20 - Frozen Grid', () => { }); it('should click on the "Remove Frozen Columns" button to switch to a regular grid without frozen columns and expect 7 columns on the left container', () => { - cy.get('[data-test=remove-frozen-column-button]') - .click({ force: true }); + cy.get('[data-test=remove-frozen-column-button]').click({ force: true }); cy.get('[style="top: 0px;"]').should('have.length', 1 * 2); - cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 11 * 2); + cy.get('.grid-canvas-left > [style="top: 0px;"]') + .children() + .should('have.length', 11 * 2); cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '0'); cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0'); @@ -180,12 +223,15 @@ describe('Example 20 - Frozen Grid', () => { }); it('should click on the "Set 3 Frozen Columns" button to switch frozen columns grid and expect 3 frozen columns on the left and 4 columns on the right', () => { - cy.get('[data-test=set-3frozen-columns]') - .click({ force: true }); + cy.get('[data-test=set-3frozen-columns]').click({ force: true }); cy.get('[style="top: 0px;"]').should('have.length', 2 * 2); - cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3 * 2); - cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 8 * 2); + cy.get('.grid-canvas-left > [style="top: 0px;"]') + .children() + .should('have.length', 3 * 2); + cy.get('.grid-canvas-right > [style="top: 0px;"]') + .children() + .should('have.length', 8 * 2); cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '0'); cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0'); @@ -202,12 +248,9 @@ describe('Example 20 - Frozen Grid', () => { }); it('should click on the Grid Menu command "Unfreeze Columns/Rows" to switch to a regular grid without frozen columns and expect 7 columns on the left container', () => { - cy.get('#grid20') - .find('button.slick-grid-menu-button') - .click({ force: true }); + cy.get('#grid20').find('button.slick-grid-menu-button').click({ force: true }); - cy.contains('Unfreeze Columns/Rows') - .click({ force: true }); + cy.contains('Unfreeze Columns/Rows').click({ force: true }); cy.get('[style="top: 0px;"]').should('have.length', 1); cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 11); diff --git a/test/cypress/e2e/example21.cy.ts b/test/cypress/e2e/example21.cy.ts index 7cbe10536..9b538e33c 100644 --- a/test/cypress/e2e/example21.cy.ts +++ b/test/cypress/e2e/example21.cy.ts @@ -22,24 +22,16 @@ describe('Example 21 - Row Detail View', () => { if (index > expectedTasks.length - 1) { return; } - cy.wrap($row).children('.slick-cell:nth(1)') - .first() - .should('contain', expectedTasks[index]); + cy.wrap($row).children('.slick-cell:nth(1)').first().should('contain', expectedTasks[index]); }); }); it('should click anywhere on 3rd row to open its Row Detail and expect its title to be Task 2 in an H2 tag', () => { - cy.get('#grid21') - .find('.slick-row:nth(2)') - .click(); + cy.get('#grid21').find('.slick-row:nth(2)').click(); - cy.get('#grid21') - .find('.slick-cell + .dynamic-cell-detail .innerDetailView_2 .container_2') - .as('detailContainer'); + cy.get('#grid21').find('.slick-cell + .dynamic-cell-detail .innerDetailView_2 .container_2').as('detailContainer'); - cy.get('@detailContainer') - .find('h3') - .contains('Task 2'); + cy.get('@detailContainer').find('h3').contains('Task 2'); }); it('should click on the "Click Me" button and expect the assignee name to showing in uppercase in an Alert', () => { @@ -47,14 +39,12 @@ describe('Example 21 - Row Detail View', () => { const alertStub = cy.stub(); cy.on('window:alert', alertStub); - cy.get('#grid21') - .find('.slick-cell + .dynamic-cell-detail .innerDetailView_2 .container_2') - .as('detailContainer'); + cy.get('#grid21').find('.slick-cell + .dynamic-cell-detail .innerDetailView_2 .container_2').as('detailContainer'); cy.get('@detailContainer') .find('input') .invoke('val') - .then(text => assignee = text as string); + .then((text) => (assignee = text as string)); cy.get('@detailContainer') .find('[data-test=assignee-btn]') @@ -69,31 +59,23 @@ describe('Example 21 - Row Detail View', () => { }); it('should click on the "Call Parent Method" button and expect a Bootstrap Alert to show up with some text containing the Task 2', () => { - cy.get('#grid21') - .find('.slick-cell + .dynamic-cell-detail .innerDetailView_2 .container_2') - .as('detailContainer'); + cy.get('#grid21').find('.slick-cell + .dynamic-cell-detail .innerDetailView_2 .container_2').as('detailContainer'); - cy.get('@detailContainer') - .find('[data-test=parent-btn]') - .click(); + cy.get('@detailContainer').find('[data-test=parent-btn]').click(); - cy.get('.alert-info[data-test=flash-msg]') - .contains('We just called Parent Method from the Row Detail Child Component on Task 2'); + cy.get('.alert-info[data-test=flash-msg]').contains( + 'We just called Parent Method from the Row Detail Child Component on Task 2' + ); }); it('should click on the "Delete Row" button and expect the Task 2 to be deleted from the grid', () => { const expectedTasks = ['Task 0', 'Task 1', 'Task 3', 'Task 4', 'Task 5']; - cy.get('#grid21') - .find('.slick-cell + .dynamic-cell-detail .innerDetailView_2 .container_2') - .as('detailContainer'); + cy.get('#grid21').find('.slick-cell + .dynamic-cell-detail .innerDetailView_2 .container_2').as('detailContainer'); - cy.get('@detailContainer') - .find('[data-test=delete-btn]') - .click(); + cy.get('@detailContainer').find('[data-test=delete-btn]').click(); - cy.get('.slick-viewport-top.slick-viewport-left') - .scrollTo('top'); + cy.get('.slick-viewport-top.slick-viewport-left').scrollTo('top'); cy.get('#grid21') .find('.slick-row') @@ -101,55 +83,34 @@ describe('Example 21 - Row Detail View', () => { if (index > expectedTasks.length - 1) { return; } - cy.wrap($row).children('.slick-cell:nth(1)') - .first() - .should('contain', expectedTasks[index]); + cy.wrap($row).children('.slick-cell:nth(1)').first().should('contain', expectedTasks[index]); }); - cy.get('.alert-danger[data-test=flash-msg]') - .contains('Deleted row with Task 2'); + cy.get('.alert-danger[data-test=flash-msg]').contains('Deleted row with Task 2'); }); it('should open a few Row Details and expect them to be closed after clicking on the "Close All Row Details" button', () => { const expectedTasks = ['Task 0', 'Task 1', 'Task 3', 'Task 4', 'Task 5']; - cy.get('#grid21') - .find('.slick-row:nth(2)') - .click(); + cy.get('#grid21').find('.slick-row:nth(2)').click(); - cy.get('#grid21') - .find('.slick-cell + .dynamic-cell-detail .innerDetailView_3 .container_3') - .as('detailContainer3'); + cy.get('#grid21').find('.slick-cell + .dynamic-cell-detail .innerDetailView_3 .container_3').as('detailContainer3'); - cy.get('@detailContainer3') - .find('h3') - .contains('Task 3'); + cy.get('@detailContainer3').find('h3').contains('Task 3'); - cy.get('#grid21') - .find('.slick-row:nth(0)') - .click(); + cy.get('#grid21').find('.slick-row:nth(0)').click(); - cy.get('#grid21') - .find('.slick-cell + .dynamic-cell-detail .innerDetailView_0 .container_0') - .as('detailContainer0'); + cy.get('#grid21').find('.slick-cell + .dynamic-cell-detail .innerDetailView_0 .container_0').as('detailContainer0'); - cy.get('@detailContainer0') - .find('h3') - .contains('Task 0'); + cy.get('@detailContainer0').find('h3').contains('Task 0'); - cy.get('[data-test=collapse-all-btn]') - .click(); + cy.get('[data-test=collapse-all-btn]').click(); - cy.get('.slick-viewport-top.slick-viewport-left') - .scrollTo('top'); + cy.get('.slick-viewport-top.slick-viewport-left').scrollTo('top'); - cy.get('#grid21') - .find('.slick-cell + .dynamic-cell-detail .innerDetailView_0 .container_0') - .should('not.exist'); + cy.get('#grid21').find('.slick-cell + .dynamic-cell-detail .innerDetailView_0 .container_0').should('not.exist'); - cy.get('#grid21') - .find('.slick-cell + .dynamic-cell-detail .innerDetailView_1 .container_1') - .should('not.exist'); + cy.get('#grid21').find('.slick-cell + .dynamic-cell-detail .innerDetailView_1 .container_1').should('not.exist'); cy.get('#grid21') .find('.slick-row') @@ -157,38 +118,24 @@ describe('Example 21 - Row Detail View', () => { if (index > expectedTasks.length - 1) { return; } - cy.wrap($row).children('.slick-cell:nth(1)') - .first() - .should('contain', expectedTasks[index]); + cy.wrap($row).children('.slick-cell:nth(1)').first().should('contain', expectedTasks[index]); }); }); it('should open a few Row Details, then sort by Title and expect all Row Details to be closed afterward', () => { const expectedTasks = ['Task 0', 'Task 1', 'Task 10', 'Task 100', 'Task 101', 'Task 102', 'Task 103', 'Task 104']; - cy.get('#grid21') - .find('.slick-row:nth(0)') - .click(); + cy.get('#grid21').find('.slick-row:nth(0)').click(); - cy.get('#grid21') - .find('.slick-cell + .dynamic-cell-detail .innerDetailView_0 .container_0') - .as('detailContainer0'); + cy.get('#grid21').find('.slick-cell + .dynamic-cell-detail .innerDetailView_0 .container_0').as('detailContainer0'); - cy.get('@detailContainer0') - .find('h3') - .contains('Task 0'); + cy.get('@detailContainer0').find('h3').contains('Task 0'); - cy.get('#grid21') - .find('.slick-row:nth(9)') - .click(); + cy.get('#grid21').find('.slick-row:nth(9)').click(); - cy.get('#grid21') - .find('.slick-cell + .dynamic-cell-detail .innerDetailView_3 .container_3') - .as('detailContainer3'); + cy.get('#grid21').find('.slick-cell + .dynamic-cell-detail .innerDetailView_3 .container_3').as('detailContainer3'); - cy.get('@detailContainer3') - .find('h3') - .contains('Task 3'); + cy.get('@detailContainer3').find('h3').contains('Task 3'); cy.get('#slickGridContainer-grid21') .find('.slick-header-column:nth(1)') @@ -219,21 +166,13 @@ describe('Example 21 - Row Detail View', () => { .should('contain', 'Sort Ascending') .click(); - cy.get('#grid21') - .find('.slick-header-column:nth(1)') - .find('.slick-sort-indicator-asc') - .should('have.length', 1); + cy.get('#grid21').find('.slick-header-column:nth(1)').find('.slick-sort-indicator-asc').should('have.length', 1); - cy.get('.slick-viewport-top.slick-viewport-left') - .scrollTo('top'); + cy.get('.slick-viewport-top.slick-viewport-left').scrollTo('top'); - cy.get('#grid21') - .find('.slick-cell + .dynamic-cell-detail .innerDetailView_0 .container_0') - .should('not.exist'); + cy.get('#grid21').find('.slick-cell + .dynamic-cell-detail .innerDetailView_0 .container_0').should('not.exist'); - cy.get('#grid21') - .find('.slick-cell + .dynamic-cell-detail .innerDetailView_3 .container_3') - .should('not.exist'); + cy.get('#grid21').find('.slick-cell + .dynamic-cell-detail .innerDetailView_3 .container_3').should('not.exist'); cy.get('#grid21') .find('.slick-row') @@ -241,70 +180,38 @@ describe('Example 21 - Row Detail View', () => { if (index > expectedTasks.length - 1) { return; } - cy.wrap($row).children('.slick-cell:nth(1)') - .first() - .should('contain', expectedTasks[index]); + cy.wrap($row).children('.slick-cell:nth(1)').first().should('contain', expectedTasks[index]); }); }); it('should click open Row Detail of Task 1 and Task 101 then type a title filter of "Task 101" and expect Row Detail to be opened and still be rendered', () => { - cy.get('#grid21') - .find('.slick-row:nth(4)') - .click(); + cy.get('#grid21').find('.slick-row:nth(4)').click(); - cy.get('#grid21') - .find('.slick-row:nth(1)') - .click(); + cy.get('#grid21').find('.slick-row:nth(1)').click(); - cy.get('#grid21') - .find('.slick-cell + .dynamic-cell-detail .innerDetailView_101') - .as('detailContainer'); + cy.get('#grid21').find('.slick-cell + .dynamic-cell-detail .innerDetailView_101').as('detailContainer'); - cy.get('@detailContainer') - .find('h3') - .contains('Task 101'); + cy.get('@detailContainer').find('h3').contains('Task 101'); - cy.get('.search-filter.filter-title') - .type('Task 101'); + cy.get('.search-filter.filter-title').type('Task 101'); }); it('should call "Clear all Filters" from Grid Menu and expect "Task 101" to still be rendered correctly', () => { - cy.get('#grid21') - .find('button.slick-grid-menu-button') - .trigger('click') - .click(); + cy.get('#grid21').find('button.slick-grid-menu-button').trigger('click').click(); - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item') - .first() - .find('span') - .contains('Clear all Filters') - .click(); + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click(); - cy.get('#grid21') - .find('.slick-cell + .dynamic-cell-detail .innerDetailView_101') - .as('detailContainer'); + cy.get('#grid21').find('.slick-cell + .dynamic-cell-detail .innerDetailView_101').as('detailContainer'); - cy.get('@detailContainer') - .find('h3') - .contains('Task 101'); + cy.get('@detailContainer').find('h3').contains('Task 101'); }); it('should call "Clear all Sorting" from Grid Menu and expect all row details to be collapsed', () => { - cy.get('#grid21') - .find('button.slick-grid-menu-button') - .trigger('click') - .click(); + cy.get('#grid21').find('button.slick-grid-menu-button').trigger('click').click(); - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item') - .find('span') - .contains('Clear all Sorting') - .click(); + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').find('span').contains('Clear all Sorting').click(); - cy.get('#grid21') - .find('.slick-sort-indicator-asc') - .should('have.length', 0); + cy.get('#grid21').find('.slick-sort-indicator-asc').should('have.length', 0); cy.get('.dynamic-cell-detail').should('have.length', 0); }); @@ -315,30 +222,20 @@ describe('Example 21 - Row Detail View', () => { }); it('should click on 5th row detail open icon and expect it to open', () => { - cy.get('#grid21') - .find('.slick-row:nth(4) .slick-cell:nth(0)') - .click(); + cy.get('#grid21').find('.slick-row:nth(4) .slick-cell:nth(0)').click(); - cy.get('#grid21') - .find('.slick-cell + .dynamic-cell-detail .innerDetailView_101') - .as('detailContainer'); + cy.get('#grid21').find('.slick-cell + .dynamic-cell-detail .innerDetailView_101').as('detailContainer'); - cy.get('@detailContainer') - .find('h3') - .contains('Task 101'); + cy.get('@detailContainer').find('h3').contains('Task 101'); }); it('should click on 2nd row "Title" cell to edit it and expect Task 5 row detail to get closed', () => { - cy.get('#grid21') - .find('.slick-row:nth(1) .slick-cell:nth(1)') - .click(); + cy.get('#grid21').find('.slick-row:nth(1) .slick-cell:nth(1)').click(); cy.get('.editor-title') .invoke('val') - .then(text => expect(text).to.eq('Task 1')); + .then((text) => expect(text).to.eq('Task 1')); - cy.get('#grid21') - .find('.slick-cell + .dynamic-cell-detail .innerDetailView_101') - .should('not.exist'); + cy.get('#grid21').find('.slick-cell + .dynamic-cell-detail .innerDetailView_101').should('not.exist'); }); }); diff --git a/test/cypress/e2e/example22.cy.ts b/test/cypress/e2e/example22.cy.ts index dbe3fc068..1290142ce 100644 --- a/test/cypress/e2e/example22.cy.ts +++ b/test/cypress/e2e/example22.cy.ts @@ -1,5 +1,14 @@ describe('Example 22 - Use of Angular Components', () => { - const fullTitles = ['Title', 'Title with Angular Component', 'Assignee', 'Assignee with Angular Component', '% Complete', 'Start', 'Finish', 'Action']; + const fullTitles = [ + 'Title', + 'Title with Angular Component', + 'Assignee', + 'Assignee with Angular Component', + '% Complete', + 'Start', + 'Finish', + 'Action', + ]; it('should display Example title', () => { cy.visit(`${Cypress.config('baseUrl')}/angular-components`); @@ -14,9 +23,9 @@ describe('Example 22 - Use of Angular Components', () => { }); it('should have a 2nd column title with an interactive angular component rendering a button and showing an alert on click', () => { - const stub = cy.stub() + const stub = cy.stub(); - cy.on('window:alert', stub) + cy.on('window:alert', stub); cy.get('#grid22') .find('.slick-row') @@ -40,15 +49,10 @@ describe('Example 22 - Use of Angular Components', () => { if (index > expectationRowBefore.length - 1) { return; } - cy.wrap($row).children('.slick-cell') - .first() - .should('contain', expectationRowBefore[index]); + cy.wrap($row).children('.slick-cell').first().should('contain', expectationRowBefore[index]); }); - cy.get('#grid22') - .find('.slick-row:nth(1) .slick-cell:nth(7)') - .contains('Action') - .click({ force: true }); + cy.get('#grid22').find('.slick-row:nth(1) .slick-cell:nth(7)').contains('Action').click({ force: true }); cy.get('.slick-cell-menu .slick-menu-command-list') .find('.slick-menu-item.red') @@ -63,36 +67,29 @@ describe('Example 22 - Use of Angular Components', () => { if (index > expectationRowAfter.length - 1) { return; } - cy.wrap($row).children('.slick-cell') - .first() - .should('contain', expectationRowAfter[index]); + cy.wrap($row).children('.slick-cell').first().should('contain', expectationRowAfter[index]); }); }); it('should expect a Custom Angular ng-Select Dropdown Editor then select 1st option of 3 Assignee names', () => { - cy.get('.slick-row:nth(0)') - .children('.slick-cell:nth(2)') - .click().click(); + cy.get('.slick-row:nth(0)').children('.slick-cell:nth(2)').click().click(); - cy.get('.ng-dropdown-panel-items .ng-option') - .should('have.length', 4); + cy.get('.ng-dropdown-panel-items .ng-option').should('have.length', 4); - cy.get('.ng-dropdown-panel-items .ng-option:nth(1)') - .click(); + cy.get('.ng-dropdown-panel-items .ng-option:nth(1)').click(); - cy.get('.slick-row:nth(1)') - .children('.slick-cell:nth(2)') - .click().click(); + cy.get('.slick-row:nth(1)').children('.slick-cell:nth(2)').click().click(); - cy.get('.ng-dropdown-panel-items .ng-option:nth(2)') - .click(); + cy.get('.ng-dropdown-panel-items .ng-option:nth(2)').click(); - cy.get('[data-test=auto-commit]') - .click(); + cy.get('[data-test=auto-commit]').click(); }); it('should have 2 first rows with "Assignee" of "John" (0) then "Pierre" (1)', () => { - const tasks = [['Task 0', 'John', 'John'], ['Task 2', 'Pierre', 'Pierre']]; + const tasks = [ + ['Task 0', 'John', 'John'], + ['Task 2', 'Pierre', 'Pierre'], + ]; cy.get('#grid22') .find('.slick-row') @@ -113,8 +110,6 @@ describe('Example 22 - Use of Angular Components', () => { it('should remove Angular Component rendered for AsyncPostRender once content is copied', () => { cy.visit(`${Cypress.config('baseUrl')}/angular-components`); - cy.get('router-outlet') - .siblings() - .should('have.length', 1); + cy.get('router-outlet').siblings().should('have.length', 1); }); }); diff --git a/test/cypress/e2e/example23.cy.ts b/test/cypress/e2e/example23.cy.ts index ee636522e..845d27c5b 100644 --- a/test/cypress/e2e/example23.cy.ts +++ b/test/cypress/e2e/example23.cy.ts @@ -15,14 +15,11 @@ describe('Example 23 - Grid AutoHeight', () => { }); it('should search for Duration over 50 and expect rows to be that', () => { - cy.get('[data-test="search-column-list"]') - .select('Duration (days)', { force: true }); + cy.get('[data-test="search-column-list"]').select('Duration (days)', { force: true }); - cy.get('[data-test="search-operator-list"]') - .select('>', { force: true }); + cy.get('[data-test="search-operator-list"]').select('>', { force: true }); - cy.get('[data-test="search-value-input"]') - .type('50', { force: true }); + cy.get('[data-test="search-value-input"]').type('50', { force: true }); cy.get('#grid23') .find('.slick-row .slick-cell:nth(1)') @@ -35,8 +32,7 @@ describe('Example 23 - Grid AutoHeight', () => { }); it('should search for Duration below 50 and expect rows to be that', () => { - cy.get('[data-test="search-operator-list"]') - .select('<', { force: true }); + cy.get('[data-test="search-operator-list"]').select('<', { force: true }); cy.wait(200); @@ -51,40 +47,31 @@ describe('Example 23 - Grid AutoHeight', () => { }); it('should search for Title ending with text "5" expect rows to be (Task 5, 15, 25, ...)', () => { - cy.get('[data-test="clear-search-value"]') - .click(); + cy.get('[data-test="clear-search-value"]').click(); - cy.get('[data-test="search-column-list"]') - .select('Title', { force: true }); + cy.get('[data-test="search-column-list"]').select('Title', { force: true }); - cy.get('[data-test="search-operator-list"]') - .select('EndsWith', { force: true }); + cy.get('[data-test="search-operator-list"]').select('EndsWith', { force: true }); - cy.get('[data-test="search-value-input"]') - .type('5', { force: true }); + cy.get('[data-test="search-value-input"]').type('5', { force: true }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 5'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 15'); }); it('should type a filter which returns an empty dataset', () => { - cy.get('[data-test="search-value-input"]') - .clear() - .type('zzz'); + cy.get('[data-test="search-value-input"]').clear().type('zzz'); - cy.get('.slick-empty-data-warning:visible') - .contains('No data to display.'); + cy.get('.slick-empty-data-warning:visible').contains('No data to display.'); }); it('should clear search input and expect empty dataset warning to go away and also expect data back (Task 0, 1, 2, ...)', () => { - cy.get('[data-test="clear-search-value"]') - .click(); + cy.get('[data-test="clear-search-value"]').click(); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 0'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 1'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 2'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 3'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 4'); - }); }); diff --git a/test/cypress/e2e/example24.cy.ts b/test/cypress/e2e/example24.cy.ts index 5ef3851b0..8bad3f421 100644 --- a/test/cypress/e2e/example24.cy.ts +++ b/test/cypress/e2e/example24.cy.ts @@ -16,17 +16,34 @@ describe('Example 24 - Grids in Bootstrap Tabs', () => { }); it('should have "Task 0" incremented by 1 after each row', () => { - cy.get(`[data-test="javascript-tab"] [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 0'); - cy.get(`[data-test="javascript-tab"] [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 1'); - cy.get(`[data-test="javascript-tab"] [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 2'); - cy.get(`[data-test="javascript-tab"] [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 3'); - cy.get(`[data-test="javascript-tab"] [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 4'); - cy.get(`[data-test="javascript-tab"] [style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 5'); + cy.get(`[data-test="javascript-tab"] [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'Task 0' + ); + cy.get(`[data-test="javascript-tab"] [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'Task 1' + ); + cy.get(`[data-test="javascript-tab"] [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'Task 2' + ); + cy.get(`[data-test="javascript-tab"] [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'Task 3' + ); + cy.get(`[data-test="javascript-tab"] [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'Task 4' + ); + cy.get(`[data-test="javascript-tab"] [style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'Task 5' + ); }); it('should change open next Tab "Http-Client" and expect a grid with 3 columns', () => { - cy.get('.tab-container') - .contains('Http-Client').click(); + cy.get('.tab-container').contains('Http-Client').click(); cy.get('#slickGridContainer-grid2:visible') .find('.slick-header-columns') diff --git a/test/cypress/e2e/example25.cy.ts b/test/cypress/e2e/example25.cy.ts index 828824086..1c5a08acb 100644 --- a/test/cypress/e2e/example25.cy.ts +++ b/test/cypress/e2e/example25.cy.ts @@ -92,18 +92,15 @@ describe('Example 25 - Range Filters', () => { const allowedBuffer = 0.5; // first input is the lowest range - cy.get('.slider-filter-input:nth(0)') - .as('range').invoke('val', 10).trigger('change', { force: true }); + cy.get('.slider-filter-input:nth(0)').as('range').invoke('val', 10).trigger('change', { force: true }); - cy.get('.lowest-range-percentComplete') - .then(($lowest) => { - newLowest = parseInt($lowest.text(), 10); - }); + cy.get('.lowest-range-percentComplete').then(($lowest) => { + newLowest = parseInt($lowest.text(), 10); + }); - cy.get('.highest-range-percentComplete') - .then(($highest) => { - newHighest = parseInt($highest.text(), 10); - }); + cy.get('.highest-range-percentComplete').then(($highest) => { + newHighest = parseInt($highest.text(), 10); + }); cy.wait(5); @@ -115,37 +112,30 @@ describe('Example 25 - Range Filters', () => { .each(($cell) => { const value = parseInt($cell.text().trim(), 10); if (!isNaN(value) && $cell.text() !== '') { - expect(value >= (newLowest - allowedBuffer)).to.eq(true); - expect(value <= (newHighest + allowedBuffer)).to.eq(true); + expect(value >= newLowest - allowedBuffer).to.eq(true); + expect(value <= newHighest + allowedBuffer).to.eq(true); } }); }); }); it('should change the "Finish" date in the picker and expect all rows to be within new dates range', () => { - cy.get('.date-picker.search-filter.filter-finish') - .click(); + cy.get('.date-picker.search-filter.filter-finish').click(); - cy.get('.vanilla-calendar-day_selected-first') - .should('exist'); + cy.get('.vanilla-calendar-day_selected-first').should('exist'); - cy.get('.vanilla-calendar-day_selected-intermediate') - .should('have.length.gte', 2); + cy.get('.vanilla-calendar-day_selected-intermediate').should('have.length.gte', 2); - cy.get('.vanilla-calendar-day_selected-last') - .should('exist'); + cy.get('.vanilla-calendar-day_selected-last').should('exist'); }); it('should change the "Duration" input filter and expect all rows to be within new range', () => { const newMin = 10; const newMax = 40; - cy.contains('Clear Filters') - .click({ force: true }); + cy.contains('Clear Filters').click({ force: true }); - cy.get('.search-filter.filter-duration') - .focus() - .type(`${newMin}..${newMax}`); + cy.get('.search-filter.filter-duration').focus().type(`${newMin}..${newMax}`); cy.get('#grid25') .find('.slick-row') @@ -175,8 +165,7 @@ describe('Example 25 - Range Filters', () => { const dynamicHighestDay = format(addDay(new Date(), 25), 'YYYY-MM-DD'); it('should click on Set Dynamic Filters', () => { - cy.get('[data-test=set-dynamic-filter]') - .click(); + cy.get('[data-test=set-dynamic-filter]').click(); }); it('should have "% Complete" fields within the exclusive range of the filters presets', () => { @@ -215,7 +204,7 @@ describe('Example 25 - Range Filters', () => { cy.get('.search-filter.filter-finish') .find('input') .invoke('val') - .then(text => expect(text).to.eq(`${dynamicLowestDay} — ${dynamicHighestDay}`)); + .then((text) => expect(text).to.eq(`${dynamicLowestDay} — ${dynamicHighestDay}`)); cy.get('#grid25') .find('.slick-row') @@ -230,26 +219,22 @@ describe('Example 25 - Range Filters', () => { }); it('should change dynamic filters from the select and choose "Current Year Completed Tasks" and expect 2 filters set', () => { - cy.get('[data-test=select-dynamic-filter]') - .select('1: currentYearTasks'); + cy.get('[data-test=select-dynamic-filter]').select('1: currentYearTasks'); cy.get('.search-filter.filter-finish') .find('input') .invoke('val') - .then(text => expect(text).to.eq(`${currentYear}-01-01 — ${currentYear}-12-31`)); + .then((text) => expect(text).to.eq(`${currentYear}-01-01 — ${currentYear}-12-31`)); - cy.get('.ms-parent.search-filter.filter-completed > button > span') - .should('contain', 'True'); + cy.get('.ms-parent.search-filter.filter-completed > button > span').should('contain', 'True'); }); }); describe('Set Dynamic Sorting', () => { it('should click on "Clear Filters" then "Set Dynamic Sorting" buttons', () => { - cy.get('[data-test=clear-filters]') - .click(); + cy.get('[data-test=clear-filters]').click(); - cy.get('[data-test=set-dynamic-sorting]') - .click(); + cy.get('[data-test=set-dynamic-sorting]').click(); }); it('should expect the grid to be sorted by "Duration" ascending and "Start" descending', () => { diff --git a/test/cypress/e2e/example26.cy.ts b/test/cypress/e2e/example26.cy.ts index 8733f73e7..80ac52606 100644 --- a/test/cypress/e2e/example26.cy.ts +++ b/test/cypress/e2e/example26.cy.ts @@ -17,36 +17,23 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { }); it('should have first row with "Task 0" and a Priority set to a Yellow Star (low) with the Action cell disabled and not clickable', () => { - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(1)') - .contains('Task 0'); + cy.get('#grid26').find('.slick-row .slick-cell:nth(1)').contains('Task 0'); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(5)') - .find('.mdi-star.yellow'); + cy.get('#grid26').find('.slick-row .slick-cell:nth(5)').find('.mdi-star.yellow'); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(6)') - .find('.mdi-check.checkmark-icon'); + cy.get('#grid26').find('.slick-row .slick-cell:nth(6)').find('.mdi-check.checkmark-icon'); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(7) .disabled') - .contains('Action'); + cy.get('#grid26').find('.slick-row .slick-cell:nth(7) .disabled').contains('Action'); - cy.get('.slick-cell-menu') - .should('not.exist') + cy.get('.slick-cell-menu').should('not.exist'); }); it('should expect the Context Menu to not have the "Help" menu when there is Completed set to True', () => { const commands = ['Copy', 'Export to Excel', '', 'Delete Row', '', 'Disabled Command', '', 'Exports', 'Feedback']; - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(1)') - .contains('Task 0'); + cy.get('#grid26').find('.slick-row .slick-cell:nth(1)').contains('Task 0'); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(1)') - .rightclick({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(1)').rightclick({ force: true }); cy.get('.slick-context-menu.dropright .slick-menu-command-list') .find('.slick-menu-item') @@ -57,60 +44,38 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { }); it('should be able to click on the Context Menu (x) close button, on top right corner, to close the menu', () => { - cy.get('.slick-context-menu.dropright') - .should('exist'); + cy.get('.slick-context-menu.dropright').should('exist'); - cy.get('.slick-context-menu button.close') - .click(); + cy.get('.slick-context-menu button.close').click(); }); it('should change "Task 0" Priority to "High" with Context Menu and expect the Action Menu to become clickable and usable', () => { - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(1)') - .contains('Task 0'); + cy.get('#grid26').find('.slick-row .slick-cell:nth(1)').contains('Task 0'); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(5)') - .rightclick({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(5)').rightclick({ force: true }); - cy.get('.slick-context-menu .slick-menu-option-list') - .contains('High') - .click(); + cy.get('.slick-context-menu .slick-menu-option-list').contains('High').click(); - cy.get('.slick-context-menu .slick-menu-command-list') - .should('not.exist'); + cy.get('.slick-context-menu .slick-menu-command-list').should('not.exist'); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(7)') - .contains('Action') - .click({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(7)').contains('Action').click({ force: true }); - cy.get('.slick-cell-menu.dropleft') - .should('exist'); + cy.get('.slick-cell-menu.dropleft').should('exist'); }); it('should expect a "Command 2" to be disabled and not clickable (menu will remain open), in that same Action menu', () => { - cy.get('.slick-cell-menu .slick-menu-item.slick-menu-item-disabled') - .contains('Command 2') - .click({ force: true }); + cy.get('.slick-cell-menu .slick-menu-item.slick-menu-item-disabled').contains('Command 2').click({ force: true }); - cy.get('.slick-cell-menu.dropleft') - .should('exist'); + cy.get('.slick-cell-menu.dropleft').should('exist'); }); it('should change the Completed to "False" in that same Action and then expect the "Command 2" to enabled and clickable', () => { const alertStub = cy.stub(); cy.on('window:alert', alertStub); - cy.get('.slick-cell-menu .slick-menu-option-list') - .find('.slick-menu-item') - .contains('False') - .click(); + cy.get('.slick-cell-menu .slick-menu-option-list').find('.slick-menu-item').contains('False').click(); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(7)') - .contains('Action') - .click({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(7)').contains('Action').click({ force: true }); cy.get('.slick-cell-menu .slick-menu-item') .contains('Command 2') @@ -121,49 +86,33 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { it('should expect the Context Menu now have the "Help" menu when Completed is set to False', () => { const commands = ['Copy', 'Export to Excel', '', 'Delete Row', '', 'Help', 'Disabled Command', '', 'Exports', 'Feedback']; - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(1)') - .contains('Task 0'); + cy.get('#grid26').find('.slick-row .slick-cell:nth(1)').contains('Task 0'); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(6)') - .rightclick({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(6)').rightclick({ force: true }); cy.get('.slick-context-menu.dropleft .slick-menu-command-list') .find('.slick-menu-item') .each(($command, index) => expect($command.text()).to.contain(commands[index])); - cy.get('.slick-context-menu button.close') - .click(); + cy.get('.slick-context-menu button.close').click(); }); it('should be able to click on the Action Cell Menu (x) close button, on top right corner, to close the menu', () => { - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(7)') - .contains('Action') - .click({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(7)').contains('Action').click({ force: true }); - cy.get('.slick-cell-menu.dropleft') - .should('exist'); + cy.get('.slick-cell-menu.dropleft').should('exist'); - cy.get('.slick-cell-menu button.close') - .click(); + cy.get('.slick-cell-menu button.close').click(); - cy.get('.slick-cell-menu.dropleft') - .should('not.exist'); + cy.get('.slick-cell-menu.dropleft').should('not.exist'); }); it('should click on the "Show Commands & Priority Options" button and see both list when opening Context Menu', () => { - cy.get('[data-test=context-menu-commands-and-priority-button]') - .click(); + cy.get('[data-test=context-menu-commands-and-priority-button]').click(); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(5)') - .rightclick({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(5)').rightclick({ force: true }); - cy.get('.slick-context-menu .slick-menu-option-list') - .should('exist') - .contains('High'); + cy.get('.slick-context-menu .slick-menu-option-list').should('exist').contains('High'); cy.get('.slick-context-menu .slick-menu-command-list') .find('.slick-menu-item.red') @@ -171,58 +120,37 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { .should('exist') .contains('Delete Row'); - cy.get('.slick-context-menu button.close') - .click(); + cy.get('.slick-context-menu button.close').click(); }); it('should click on the "Show Priority Options Only" button and see both list when opening Context Menu', () => { - cy.get('[data-test=context-menu-priority-only-button]') - .click(); + cy.get('[data-test=context-menu-priority-only-button]').click(); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(5)') - .rightclick({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(5)').rightclick({ force: true }); - cy.get('.slick-context-menu .slick-menu-option-list') - .should('exist') - .contains('High'); + cy.get('.slick-context-menu .slick-menu-option-list').should('exist').contains('High'); - cy.get('.slick-context-menu .slick-menu-command-list') - .should('not.exist'); + cy.get('.slick-context-menu .slick-menu-command-list').should('not.exist'); - cy.get('.slick-context-menu button.close') - .click(); + cy.get('.slick-context-menu button.close').click(); }); it('should click on the "Show Actions Commands & Completed Options" button and see both list when opening Action Cell Menu', () => { - cy.get('[data-test=cell-menu-commands-and-options-true-button]') - .click(); + cy.get('[data-test=cell-menu-commands-and-options-true-button]').click(); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(7)') - .contains('Action') - .click({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(7)').contains('Action').click({ force: true }); - cy.get('.slick-cell-menu .slick-menu-option-list') - .should('exist') - .contains('True'); + cy.get('.slick-cell-menu .slick-menu-option-list').should('exist').contains('True'); - cy.get('.slick-cell-menu .slick-menu-command-list') - .should('exist') - .contains('Delete Row'); + cy.get('.slick-cell-menu .slick-menu-command-list').should('exist').contains('Delete Row'); - cy.get('.slick-cell-menu button.close') - .click(); + cy.get('.slick-cell-menu button.close').click(); }); it('should open the Action Cell Menu and expect the Completed "null" option when this Effort is set to False', () => { - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(7)') - .contains('Action') - .click({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(7)').contains('Action').click({ force: true }); - cy.get('.slick-cell-menu.dropleft') - .should('exist'); + cy.get('.slick-cell-menu.dropleft').should('exist'); cy.get('.slick-cell-menu') .find('.slick-menu-option-list') @@ -232,63 +160,42 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { }); it('should open the Action Cell Menu and not expect the Completed "null" option when this Effort is set to True', () => { - cy.get('.slick-cell-menu.dropleft') - .should('exist'); + cy.get('.slick-cell-menu.dropleft').should('exist'); - cy.get('.slick-cell-menu') - .find('.slick-menu-option-list') - .contains('True') - .click(); + cy.get('.slick-cell-menu').find('.slick-menu-option-list').contains('True').click(); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(7)') - .contains('Action') - .click({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(7)').contains('Action').click({ force: true }); - cy.get('.slick-cell-menu') - .each($row => { - expect($row.text()).not.include('null'); - }); + cy.get('.slick-cell-menu').each(($row) => { + expect($row.text()).not.include('null'); + }); }); it('should reset Completed to False for the next test to include all commands', () => { - cy.get('.slick-cell-menu') - .find('.slick-menu-option-list') - .contains('False') - .click(); + cy.get('.slick-cell-menu').find('.slick-menu-option-list').contains('False').click(); }); it('should click on the "Show Action Commands Only" button and see both list when opening Context Menu', () => { const commands = ['Command 1', 'Command 2', '', 'Delete Row', 'Help', 'Disabled Command', '', 'Exports', 'Feedback']; - cy.get('[data-test=cell-menu-commands-and-options-false-button]') - .click(); + cy.get('[data-test=cell-menu-commands-and-options-false-button]').click(); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(7)') - .contains('Action') - .click({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(7)').contains('Action').click({ force: true }); cy.get('.slick-cell-menu .slick-menu-command-list') .should('exist') .find('.slick-menu-item') .each(($command, index) => expect($command.text()).to.contain(commands[index])); - cy.get('.slick-cell-menu .slick-menu-option-list') - .should('not.exist'); + cy.get('.slick-cell-menu .slick-menu-option-list').should('not.exist'); - cy.get('.slick-cell-menu button.close') - .click(); + cy.get('.slick-cell-menu button.close').click(); }); it('should be able to delete first row by using the "Delete Row" command from the Context Menu', () => { - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(1)') - .contains('Task 0'); + cy.get('#grid26').find('.slick-row .slick-cell:nth(1)').contains('Task 0'); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(1)') - .rightclick({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(1)').rightclick({ force: true }); cy.get('.slick-context-menu .slick-menu-command-list') .find('.slick-menu-item.red') @@ -299,20 +206,15 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { cy.get('#grid26') .find('.slick-row .slick-cell:nth(1)') - .each($row => { + .each(($row) => { expect($row.text()).not.include('Task 0'); }); }); it('should be able to delete the 3rd row "Task 3" by using the "Delete Row" command from the Action Cell Menu', () => { - cy.get('#grid26') - .find('.slick-row:nth(2) .slick-cell:nth(1)') - .contains('Task 3'); + cy.get('#grid26').find('.slick-row:nth(2) .slick-cell:nth(1)').contains('Task 3'); - cy.get('#grid26') - .find('.slick-row:nth(2) .slick-cell:nth(7)') - .contains('Action') - .click({ force: true }); + cy.get('#grid26').find('.slick-row:nth(2) .slick-cell:nth(7)').contains('Action').click({ force: true }); cy.get('.slick-cell-menu .slick-menu-command-list') .find('.slick-menu-item.red') @@ -323,53 +225,39 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { cy.get('#grid26') .find('.slick-row:nth(2) .slick-cell:nth(1)') - .each($row => { + .each(($row) => { expect($row.text()).not.include('Task 3'); }); }); it('should check Context Menu "menuUsabilityOverride" condition and expect to not be able to open Context Menu from rows than are >= to Task 21', () => { - cy.get('.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom') - .wait(50); + cy.get('.slick-viewport-top.slick-viewport-left').scrollTo('bottom').wait(50); - cy.get('#grid26') - .find('.slick-row:nth(3) .slick-cell:nth(1)') - .rightclick({ force: true }); + cy.get('#grid26').find('.slick-row:nth(3) .slick-cell:nth(1)').rightclick({ force: true }); - cy.get('.slick-context-menu .slick-menu-command-list') - .should('not.exist'); + cy.get('.slick-context-menu .slick-menu-command-list').should('not.exist'); }); it('should scroll back to top row and be able to open Context Menu', () => { - cy.get('.slick-viewport-top.slick-viewport-left') - .scrollTo('top') - .wait(50); + cy.get('.slick-viewport-top.slick-viewport-left').scrollTo('top').wait(50); - cy.get('#grid26') - .find('.slick-row:nth(1) .slick-cell:nth(1)') - .rightclick({ force: true }); + cy.get('#grid26').find('.slick-row:nth(1) .slick-cell:nth(1)').rightclick({ force: true }); - cy.get('.slick-context-menu .slick-menu-command-list') - .should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list').should('exist'); - cy.get('.slick-context-menu button.close') - .click(); + cy.get('.slick-context-menu button.close').click(); }); }); describe('French Locale', () => { it('should switch locale to French', () => { - cy.get('[data-test=language-button]') - .click(); + cy.get('[data-test=language-button]').click(); - cy.get('[data-test=selected-locale]') - .should('contain', 'fr.json'); + cy.get('[data-test=selected-locale]').should('contain', 'fr.json'); }); it('should show both Commands & Options on the Action Cell Menu', () => { - cy.get('[data-test=cell-menu-commands-and-options-true-button]') - .click(); + cy.get('[data-test=cell-menu-commands-and-options-true-button]').click(); }); it('should have exact Column Titles in the grid', () => { @@ -380,32 +268,32 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { }); it('should have first row with "Tâche 1" and a Priority set to a Orange Star (medium) with the Action cell disabled and not clickable', () => { - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(1)') - .contains('Tâche 1'); + cy.get('#grid26').find('.slick-row .slick-cell:nth(1)').contains('Tâche 1'); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(5)') - .find('.mdi-star.orange'); + cy.get('#grid26').find('.slick-row .slick-cell:nth(5)').find('.mdi-star.orange'); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(7) .disabled') - .contains('Action'); + cy.get('#grid26').find('.slick-row .slick-cell:nth(7) .disabled').contains('Action'); - cy.get('.slick-cell-menu') - .should('not.exist') + cy.get('.slick-cell-menu').should('not.exist'); }); it('should expect the Context Menu to not have the "Aide" menu when there is Completed set to False', () => { - const commands = ['Copier', 'Exporter vers Excel', '', 'Supprimer la ligne', '', 'Aide', 'Commande désactivée', '', 'Exports', 'Feedback']; - - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(1)') - .contains('Tâche 1'); - - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(1)') - .rightclick({ force: true }); + const commands = [ + 'Copier', + 'Exporter vers Excel', + '', + 'Supprimer la ligne', + '', + 'Aide', + 'Commande désactivée', + '', + 'Exports', + 'Feedback', + ]; + + cy.get('#grid26').find('.slick-row .slick-cell:nth(1)').contains('Tâche 1'); + + cy.get('#grid26').find('.slick-row .slick-cell:nth(1)').rightclick({ force: true }); cy.get('.slick-context-menu.dropright .slick-menu-command-list') .find('.slick-menu-item') @@ -413,46 +301,30 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { }); it('should be able to click on the Context Menu (x) close button, on top right corner, to close the menu', () => { - cy.get('.slick-context-menu.dropright') - .should('exist'); + cy.get('.slick-context-menu.dropright').should('exist'); - cy.get('.slick-context-menu button.close') - .click(); + cy.get('.slick-context-menu button.close').click(); }); it('should change "Tâche 1" Priority to "Haut" with Context Menu and expect the Action Menu to become clickable and usable', () => { - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(1)') - .contains('Tâche 1'); + cy.get('#grid26').find('.slick-row .slick-cell:nth(1)').contains('Tâche 1'); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(5)') - .rightclick({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(5)').rightclick({ force: true }); - cy.get('.slick-context-menu .slick-menu-option-list') - .contains('Haut') - .click(); + cy.get('.slick-context-menu .slick-menu-option-list').contains('Haut').click(); - cy.get('.slick-context-menu .slick-menu-command-list') - .should('not.exist'); + cy.get('.slick-context-menu .slick-menu-command-list').should('not.exist'); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(7)') - .contains('Action') - .click({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(7)').contains('Action').click({ force: true }); - cy.get('.slick-cell-menu.dropleft') - .should('exist'); + cy.get('.slick-cell-menu.dropleft').should('exist'); }); it('should expect a "Command 2" to be enabled and clickable in that same Action menu', () => { const stub = cy.stub(); cy.on('window:alert', stub); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(7)') - .contains('Action') - .click({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(7)').contains('Action').click({ force: true }); cy.get('.slick-cell-menu .slick-menu-item') .contains('Command 2') @@ -461,51 +333,46 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { }); it('should expect the Context Menu now have the "Aide" menu when Completed is set to False', () => { - const commands = ['Copier', 'Exporter vers Excel', '', 'Supprimer la ligne', '', 'Aide', 'Commande désactivée', '', 'Exports', 'Feedback']; - - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(1)') - .contains('Tâche 1'); - - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(6)') - .rightclick({ force: true }); + const commands = [ + 'Copier', + 'Exporter vers Excel', + '', + 'Supprimer la ligne', + '', + 'Aide', + 'Commande désactivée', + '', + 'Exports', + 'Feedback', + ]; + + cy.get('#grid26').find('.slick-row .slick-cell:nth(1)').contains('Tâche 1'); + + cy.get('#grid26').find('.slick-row .slick-cell:nth(6)').rightclick({ force: true }); cy.get('.slick-context-menu.dropleft .slick-menu-command-list') .find('.slick-menu-item') .each(($command, index) => expect($command.text()).to.contain(commands[index])); - cy.get('.slick-context-menu button.close') - .click(); + cy.get('.slick-context-menu button.close').click(); }); it('should be able to click on the Action Cell Menu (x) close button, on top right corner, to close the menu', () => { - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(7)') - .contains('Action') - .click({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(7)').contains('Action').click({ force: true }); - cy.get('.slick-cell-menu.dropleft') - .should('exist'); + cy.get('.slick-cell-menu.dropleft').should('exist'); - cy.get('.slick-cell-menu button.close') - .click(); + cy.get('.slick-cell-menu button.close').click(); - cy.get('.slick-cell-menu.dropleft') - .should('not.exist'); + cy.get('.slick-cell-menu.dropleft').should('not.exist'); }); it('should click on the "Show Commands & Priority Options" button and see both list when opening Context Menu', () => { - cy.get('[data-test=context-menu-commands-and-priority-button]') - .click(); + cy.get('[data-test=context-menu-commands-and-priority-button]').click(); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(5)') - .rightclick({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(5)').rightclick({ force: true }); - cy.get('.slick-context-menu .slick-menu-option-list') - .should('exist') - .contains('Haut'); + cy.get('.slick-context-menu .slick-menu-option-list').should('exist').contains('Haut'); cy.get('.slick-context-menu .slick-menu-command-list') .find('.slick-menu-item.red') @@ -513,58 +380,37 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { .should('exist') .contains('Supprimer la ligne'); - cy.get('.slick-context-menu button.close') - .click(); + cy.get('.slick-context-menu button.close').click(); }); it('should click on the "Show Priority Options Only" button and see both list when opening Context Menu', () => { - cy.get('[data-test=context-menu-priority-only-button]') - .click(); + cy.get('[data-test=context-menu-priority-only-button]').click(); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(5)') - .rightclick({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(5)').rightclick({ force: true }); - cy.get('.slick-context-menu .slick-menu-option-list') - .should('exist') - .contains('Haut'); + cy.get('.slick-context-menu .slick-menu-option-list').should('exist').contains('Haut'); - cy.get('.slick-context-menu .slick-menu-command-list') - .should('not.exist'); + cy.get('.slick-context-menu .slick-menu-command-list').should('not.exist'); - cy.get('.slick-context-menu button.close') - .click(); + cy.get('.slick-context-menu button.close').click(); }); it('should click on the "Show Actions Commands & Completed Options" button and see both list when opening Action Cell Menu', () => { - cy.get('[data-test=cell-menu-commands-and-options-true-button]') - .click(); + cy.get('[data-test=cell-menu-commands-and-options-true-button]').click(); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(7)') - .contains('Action') - .click({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(7)').contains('Action').click({ force: true }); - cy.get('.slick-cell-menu .slick-menu-option-list') - .should('exist') - .contains('Vrai'); + cy.get('.slick-cell-menu .slick-menu-option-list').should('exist').contains('Vrai'); - cy.get('.slick-cell-menu .slick-menu-command-list') - .should('exist') - .contains('Supprimer la ligne'); + cy.get('.slick-cell-menu .slick-menu-command-list').should('exist').contains('Supprimer la ligne'); - cy.get('.slick-cell-menu button.close') - .click(); + cy.get('.slick-cell-menu button.close').click(); }); it('should open the Action Cell Menu and expect the Completed "null" option when this Effort is set to Faux', () => { - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(7)') - .contains('Action') - .click({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(7)').contains('Action').click({ force: true }); - cy.get('.slick-cell-menu.dropleft') - .should('exist'); + cy.get('.slick-cell-menu.dropleft').should('exist'); cy.get('.slick-cell-menu') .find('.slick-menu-option-list') @@ -574,63 +420,52 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { }); it('should open the Action Cell Menu and not expect the Completed "null" option when this Effort is set to True', () => { - cy.get('.slick-cell-menu.dropleft') - .should('exist'); + cy.get('.slick-cell-menu.dropleft').should('exist'); - cy.get('.slick-cell-menu') - .find('.slick-menu-option-list') - .contains('Vrai') - .click(); + cy.get('.slick-cell-menu').find('.slick-menu-option-list').contains('Vrai').click(); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(7)') - .contains('Action') - .click({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(7)').contains('Action').click({ force: true }); - cy.get('.slick-cell-menu') - .each($row => { - expect($row.text()).not.include('null'); - }); + cy.get('.slick-cell-menu').each(($row) => { + expect($row.text()).not.include('null'); + }); }); it('should reset Completed to Faux for the next test to include all commands', () => { - cy.get('.slick-cell-menu') - .find('.slick-menu-option-list') - .contains('Faux') - .click(); + cy.get('.slick-cell-menu').find('.slick-menu-option-list').contains('Faux').click(); }); it('should click on the "Show Action Commands Only" button and see both list when opening Context Menu', () => { - const commands = ['Command 1', 'Command 2', '', 'Supprimer la ligne', 'Aide', 'Commande désactivée', '', 'Exports', 'Feedback']; - - cy.get('[data-test=cell-menu-commands-and-options-false-button]') - .click(); - - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(7)') - .contains('Action') - .click({ force: true }); + const commands = [ + 'Command 1', + 'Command 2', + '', + 'Supprimer la ligne', + 'Aide', + 'Commande désactivée', + '', + 'Exports', + 'Feedback', + ]; + + cy.get('[data-test=cell-menu-commands-and-options-false-button]').click(); + + cy.get('#grid26').find('.slick-row .slick-cell:nth(7)').contains('Action').click({ force: true }); cy.get('.slick-cell-menu .slick-menu-command-list') .should('exist') .find('.slick-menu-item') .each(($command, index) => expect($command.text()).to.contain(commands[index])); - cy.get('.slick-cell-menu .slick-menu-option-list') - .should('not.exist'); + cy.get('.slick-cell-menu .slick-menu-option-list').should('not.exist'); - cy.get('.slick-cell-menu button.close') - .click(); + cy.get('.slick-cell-menu button.close').click(); }); it('should be able to delete first row by using the "Supprimer la ligne" command from the Context Menu', () => { - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(1)') - .contains('Tâche 1'); + cy.get('#grid26').find('.slick-row .slick-cell:nth(1)').contains('Tâche 1'); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(1)') - .rightclick({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(1)').rightclick({ force: true }); cy.get('.slick-context-menu .slick-menu-command-list') .find('.slick-menu-item.red') @@ -641,20 +476,15 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { cy.get('#grid26') .find('.slick-row .slick-cell:nth(1)') - .each($row => { + .each(($row) => { expect($row.text()).not.include('Tâche 1'); }); }); it('should be able to delete the 4th row "Tâche 6" by using the "Supprimer la ligne" command from the Action Cell Menu', () => { - cy.get('#grid26') - .find('.slick-row:nth(3) .slick-cell:nth(1)') - .contains('Tâche 6'); + cy.get('#grid26').find('.slick-row:nth(3) .slick-cell:nth(1)').contains('Tâche 6'); - cy.get('#grid26') - .find('.slick-row:nth(3) .slick-cell:nth(7)') - .contains('Action') - .click({ force: true }); + cy.get('#grid26').find('.slick-row:nth(3) .slick-cell:nth(7)').contains('Action').click({ force: true }); cy.get('.slick-cell-menu .slick-menu-command-list') .find('.slick-menu-item.red') @@ -665,7 +495,7 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { cy.get('#grid26') .find('.slick-row:nth(3) .slick-cell:nth(1)') - .each($row => { + .each(($row) => { expect($row.text()).not.include('Tâche 6'); }); }); @@ -673,23 +503,17 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { describe('with sub-menus', () => { it('should switch back locale to English', () => { - cy.get('#grid26') - .find('button.slick-grid-menu-button') - .trigger('click') - .click(); + cy.get('#grid26').find('button.slick-grid-menu-button').trigger('click').click(); - cy.get('[data-test=language-button]') - .click(); + cy.get('[data-test=language-button]').click(); - cy.get('[data-test=selected-locale]') - .should('contain', 'en.json'); + cy.get('[data-test=selected-locale]').should('contain', 'en.json'); }); it('should reopen Context Menu hover "Priority" column then open options sub-menu & select "High" option and expect Task to be set to High in the UI', () => { const subOptions = ['Low', 'Medium', 'High']; - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(5)`) - .rightclick({ force: true }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(5)`).rightclick({ force: true }); cy.get('.slick-context-menu.slick-menu-level-0 .slick-menu-option-list') .find('.slick-menu-item .slick-menu-content') @@ -703,13 +527,9 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { .find('.slick-menu-item .slick-menu-content') .each(($command, index) => expect($command.text()).to.eq(subOptions[index])); - cy.get('@subMenuList') - .find('.slick-menu-item .slick-menu-content') - .contains('High') - .click(); + cy.get('@subMenuList').find('.slick-menu-item .slick-menu-content').contains('High').click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(5)`) - .find('.mdi-star.red'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(5)`).find('.mdi-star.red'); }); it('should be able to open Context Menu from any other cell and click on Export->Text and expect alert triggered with Text Export', () => { @@ -717,10 +537,8 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { const stub = cy.stub(); cy.on('window:alert', stub); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(1)`) - .should('contain', 'Task 2'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(1)`) - .rightclick({ force: true }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(1)`).should('contain', 'Task 2'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(1)`).rightclick({ force: true }); cy.get('.slick-context-menu.slick-menu-level-0 .slick-menu-command-list') .find('.slick-menu-item .slick-menu-content') @@ -746,8 +564,7 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { cy.on('window:alert', stub); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(1)`).should('contain', 'Task 2'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(1)`) - .rightclick({ force: true }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(1)`).rightclick({ force: true }); cy.get('.slick-context-menu.slick-menu-level-0 .slick-menu-command-list') .find('.slick-menu-item .slick-menu-content') @@ -766,9 +583,7 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { cy.get('.slick-context-menu.slick-menu-level-2 .slick-menu-command-list').as('subMenuList2'); - cy.get('@subMenuList2') - .find('.slick-menu-title') - .contains('available formats'); + cy.get('@subMenuList2').find('.slick-menu-title').contains('available formats'); cy.get('@subMenuList2') .should('exist') @@ -783,16 +598,11 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { }); it('should click on the "Show Commands & Priority Options" button and see both list when opening Context Menu', () => { - cy.get('[data-test=context-menu-commands-and-priority-button]') - .click(); + cy.get('[data-test=context-menu-commands-and-priority-button]').click(); - cy.get('#grid26') - .find('.slick-row .slick-cell:nth(5)') - .rightclick({ force: true }); + cy.get('#grid26').find('.slick-row .slick-cell:nth(5)').rightclick({ force: true }); - cy.get('.slick-context-menu .slick-menu-option-list') - .should('exist') - .contains('High'); + cy.get('.slick-context-menu .slick-menu-option-list').should('exist').contains('High'); cy.get('.slick-context-menu .slick-menu-command-list') .find('.slick-menu-item.red') @@ -800,8 +610,7 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { .should('exist') .contains('Delete Row'); - cy.get('.slick-context-menu button.close') - .click(); + cy.get('.slick-context-menu button.close').click(); }); it('should open Export->Excel sub-menu & open again Sub-Options on top and expect sub-menu to be recreated with that Sub-Options list instead of the Export->Excel list', () => { @@ -810,8 +619,7 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { const subOptions = ['Low', 'Medium', 'High']; cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`) - .rightclick({ force: true }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).rightclick({ force: true }); cy.get('.slick-context-menu.slick-menu-level-0 .slick-menu-command-list') .find('.slick-menu-item .slick-menu-content') @@ -840,9 +648,7 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { cy.get('.slick-context-menu.slick-menu-level-1 .slick-menu-option-list').as('optionSubList2'); - cy.get('@optionSubList2') - .find('.slick-menu-title') - .contains('Change Priority'); + cy.get('@optionSubList2').find('.slick-menu-title').contains('Change Priority'); cy.get('@optionSubList2') .should('exist') @@ -859,8 +665,7 @@ describe('Example 26 - Cell Menu & Context Menu Plugins', () => { cy.on('window:alert', stub); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`) - .rightclick({ force: true }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).rightclick({ force: true }); cy.get('.slick-context-menu.slick-menu-level-0 .slick-menu-command-list') .find('.slick-menu-item .slick-menu-content') diff --git a/test/cypress/e2e/example27.cy.ts b/test/cypress/e2e/example27.cy.ts index 6af4c2703..de5a897d6 100644 --- a/test/cypress/e2e/example27.cy.ts +++ b/test/cypress/e2e/example27.cy.ts @@ -1,7 +1,19 @@ describe('Example 27 - GraphQL Basic API without Pagination', () => { const GRID_ROW_HEIGHT = 35; const fullPreTitles = ['Country', 'Language', 'Continent']; - const fullTitles = ['Code', 'Name', 'Native', 'Phone Area Code', 'Currency', 'Emoji', 'Names', 'Native', 'Codes', 'Name', 'Code']; + const fullTitles = [ + 'Code', + 'Name', + 'Native', + 'Phone Area Code', + 'Currency', + 'Emoji', + 'Names', + 'Native', + 'Codes', + 'Name', + 'Code', + ]; it('should display Example title', () => { cy.visit(`${Cypress.config('baseUrl')}/graphql-nopage`); @@ -26,8 +38,7 @@ describe('Example 27 - GraphQL Basic API without Pagination', () => { }); it('should expect first 3 rows to be an exact match of data provided by the external GraphQL API', () => { - cy.get('.right-footer.metrics') - .contains('250 of 250 items'); + cy.get('.right-footer.metrics').contains('250 of 250 items'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'AD'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Andorra'); @@ -78,11 +89,9 @@ describe('Example 27 - GraphQL Basic API without Pagination', () => { }); it('should filter by Language Codes "fr, de" and expect 2 rows of data in the grid', () => { - cy.get('.search-filter.filter-languageCode') - .type('fr, de'); + cy.get('.search-filter.filter-languageCode').type('fr, de'); - cy.get('.right-footer.metrics') - .contains('2 of 250 items'); + cy.get('.right-footer.metrics').contains('2 of 250 items'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'BE'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Belgium'); @@ -101,26 +110,21 @@ describe('Example 27 - GraphQL Basic API without Pagination', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', '352'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(4)`).should('contain', 'EUR'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(6)`).should('contain', 'French, German, Luxembourgish'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).should('contain', 'Français, Deutsch, Lëtzebuergesch'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).should( + 'contain', + 'Français, Deutsch, Lëtzebuergesch' + ); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('contain', 'fr, de, lb'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(9)`).should('contain', 'Europe'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', 'EU'); }); it('should Clear all Filters and expect all rows to be back', () => { - cy.get('#grid27') - .find('button.slick-grid-menu-button') - .click(); - - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item') - .first() - .find('span') - .contains('Clear all Filters') - .click(); - - cy.get('.right-footer.metrics') - .contains('250 of 250 items'); + cy.get('#grid27').find('button.slick-grid-menu-button').click(); + + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click(); + + cy.get('.right-footer.metrics').contains('250 of 250 items'); }); it('should be able to filter "Country of Origin" with a text range filter "b..e" and expect to see only Canada showing up', () => { @@ -132,21 +136,15 @@ describe('Example 27 - GraphQL Basic API without Pagination', () => { }); it('should filter Language Native with "Aymar" and expect only 1 row in the grid', () => { - cy.get('div.ms-filter.filter-languageNative') - .trigger('click'); + cy.get('div.ms-filter.filter-languageNative').trigger('click'); - cy.get('.ms-search:visible') - .type('Aymar'); + cy.get('.ms-search:visible').type('Aymar'); - cy.get('.ms-drop:visible') - .contains('Aymar') - .click(); + cy.get('.ms-drop:visible').contains('Aymar').click(); - cy.get('.ms-ok-button:visible') - .click(); + cy.get('.ms-ok-button:visible').click(); - cy.get('.right-footer.metrics') - .contains('1 of 250 items'); + cy.get('.right-footer.metrics').contains('1 of 250 items'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'BO'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Bolivia'); @@ -161,38 +159,23 @@ describe('Example 27 - GraphQL Basic API without Pagination', () => { }); it('should Clear all Filters and expect all rows to be back', () => { - cy.get('#grid27') - .find('button.slick-grid-menu-button') - .trigger('click') - .click(); - - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item') - .first() - .find('span') - .contains('Clear all Filters') - .click(); - - cy.get('.right-footer.metrics') - .contains('250 of 250 items'); + cy.get('#grid27').find('button.slick-grid-menu-button').trigger('click').click(); + + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click(); + + cy.get('.right-footer.metrics').contains('250 of 250 items'); }); it('should filter Language Native with "French" language and expect only 40 rows in the grid', () => { - cy.get('div.ms-filter.filter-languageName') - .trigger('click'); + cy.get('div.ms-filter.filter-languageName').trigger('click'); - cy.get('.ms-search:visible') - .type('French'); + cy.get('.ms-search:visible').type('French'); - cy.get('.ms-drop:visible') - .contains('French') - .click(); + cy.get('.ms-drop:visible').contains('French').click(); - cy.get('.ms-ok-button:visible') - .click(); + cy.get('.ms-ok-button:visible').click(); - cy.get('.right-footer.metrics') - .contains('44 of 250 items'); + cy.get('.right-footer.metrics').contains('44 of 250 items'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Belgium'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(6)`).should('contain', 'Dutch, French, German'); diff --git a/test/cypress/e2e/example28.cy.ts b/test/cypress/e2e/example28.cy.ts index 018910a11..3344c8284 100644 --- a/test/cypress/e2e/example28.cy.ts +++ b/test/cypress/e2e/example28.cy.ts @@ -19,9 +19,7 @@ describe('Example 28 - Tree Data (from a flat dataset with parentId references)' }); it('should expect all rows to be collapsed on first page load', () => { - cy.get('#grid28') - .find('.slick-group-toggle.expanded') - .should('have.length', 0); + cy.get('#grid28').find('.slick-group-toggle.expanded').should('have.length', 0); cy.get('#grid28') .find('.slick-group-toggle.collapsed') @@ -29,22 +27,15 @@ describe('Example 28 - Tree Data (from a flat dataset with parentId references)' }); it('should have a Grid Preset Filter on 3rd column "% Complete" and expect all rows to be filtered as well', () => { - cy.get('.input-group-text.highest-range-percentComplete') - .contains('25'); + cy.get('.input-group-text.highest-range-percentComplete').contains('25'); - cy.get('.search-filter.filter-percentComplete') - .find('.input-group-addon.operator select') - .contains('>='); + cy.get('.search-filter.filter-percentComplete').find('.input-group-addon.operator select').contains('>='); }); it('should expand all rows from "Expand All" button', () => { - cy.get('[data-test=expand-all-btn]') - .contains('Expand All') - .click(); + cy.get('[data-test=expand-all-btn]').contains('Expand All').click(); - cy.get('#grid28') - .find('.slick-group-toggle.collapsed') - .should('have.length', 0); + cy.get('#grid28').find('.slick-group-toggle.collapsed').should('have.length', 0); cy.get('#grid28') .find('.slick-group-toggle.expanded') @@ -52,13 +43,9 @@ describe('Example 28 - Tree Data (from a flat dataset with parentId references)' }); it('should collapsed all rows from "Collapse All" button', () => { - cy.get('[data-test=collapse-all-btn]') - .contains('Collapse All') - .click(); + cy.get('[data-test=collapse-all-btn]').contains('Collapse All').click(); - cy.get('#grid28') - .find('.slick-group-toggle.expanded') - .should('have.length', 0); + cy.get('#grid28').find('.slick-group-toggle.expanded').should('have.length', 0); cy.get('#grid28') .find('.slick-group-toggle.collapsed') @@ -66,12 +53,9 @@ describe('Example 28 - Tree Data (from a flat dataset with parentId references)' }); it('should collapsed all rows from "Collapse All" context menu', () => { - cy.get('#grid28') - .contains('5 days'); + cy.get('#grid28').contains('5 days'); - cy.get('#grid28') - .find('.slick-row .slick-cell:nth(1)') - .rightclick({ force: true }); + cy.get('#grid28').find('.slick-row .slick-cell:nth(1)').rightclick({ force: true }); cy.get('.slick-context-menu.dropright .slick-menu-command-list') .find('.slick-menu-item') @@ -79,9 +63,7 @@ describe('Example 28 - Tree Data (from a flat dataset with parentId references)' .contains('Collapse all Groups') .click(); - cy.get('#grid28') - .find('.slick-group-toggle.expanded') - .should('have.length', 0); + cy.get('#grid28').find('.slick-group-toggle.expanded').should('have.length', 0); cy.get('#grid28') .find('.slick-group-toggle.collapsed') @@ -89,12 +71,9 @@ describe('Example 28 - Tree Data (from a flat dataset with parentId references)' }); it('should collapsed all rows from "Expand All" context menu', () => { - cy.get('#grid28') - .contains('5 days'); + cy.get('#grid28').contains('5 days'); - cy.get('#grid28') - .find('.slick-row .slick-cell:nth(1)') - .rightclick({ force: true }); + cy.get('#grid28').find('.slick-row .slick-cell:nth(1)').rightclick({ force: true }); cy.get('.slick-context-menu.dropright .slick-menu-command-list') .find('.slick-menu-item') @@ -102,9 +81,7 @@ describe('Example 28 - Tree Data (from a flat dataset with parentId references)' .contains('Expand all Groups') .click(); - cy.get('#grid28') - .find('.slick-group-toggle.collapsed') - .should('have.length', 0); + cy.get('#grid28').find('.slick-group-toggle.collapsed').should('have.length', 0); cy.get('#grid28') .find('.slick-group-toggle.expanded') @@ -112,106 +89,74 @@ describe('Example 28 - Tree Data (from a flat dataset with parentId references)' }); it('should have data filtered, with "% Complete" >=25, and not show the full item count in the footer', () => { - cy.get('.search-filter.filter-percentComplete .operator .form-control') - .should('have.value', '>='); + cy.get('.search-filter.filter-percentComplete .operator .form-control').should('have.value', '>='); cy.get('input.slider-filter-input') .invoke('val') - .then(text => expect(text).to.eq('25')); + .then((text) => expect(text).to.eq('25')); - cy.get('.search-filter .input-group-text') - .should($span => expect($span.text()).to.eq('25')); + cy.get('.search-filter .input-group-text').should(($span) => expect($span.text()).to.eq('25')); - cy.get('.right-footer') - .should($span => { - const text = removeExtraSpaces($span.text()); // remove all white spaces - expect(text).not.to.eq('500 of 500 items'); - }); + cy.get('.right-footer').should(($span) => { + const text = removeExtraSpaces($span.text()); // remove all white spaces + expect(text).not.to.eq('500 of 500 items'); + }); }); it('should open the Grid Menu "Clear all Filters" command', () => { - cy.get('#grid28') - .find('button.slick-grid-menu-button') - .trigger('click') - .click(); + cy.get('#grid28').find('button.slick-grid-menu-button').trigger('click').click(); - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item') - .first() - .find('span') - .contains('Clear all Filters') - .click(); + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click(); }); it('should no longer have filters and it should show the full item count in the footer', () => { - cy.get('.search-filter.filter-percentComplete .operator .form-control') - .should('have.value', ''); + cy.get('.search-filter.filter-percentComplete .operator .form-control').should('have.value', ''); cy.get('input.slider-filter-input') .invoke('val') - .then(text => expect(text).to.eq('0')); + .then((text) => expect(text).to.eq('0')); - cy.get('.search-filter .input-group-text') - .should($span => expect($span.text()).to.eq('0')); + cy.get('.search-filter .input-group-text').should(($span) => expect($span.text()).to.eq('0')); - cy.get('.right-footer') - .should($span => { - const text = removeExtraSpaces($span.text()); // remove all white spaces - expect(text).to.eq('500 of 500 items'); - }); + cy.get('.right-footer').should(($span) => { + const text = removeExtraSpaces($span.text()); // remove all white spaces + expect(text).to.eq('500 of 500 items'); + }); }); it('should click on the "Dynamically Change Filter" button and expect all child items to have a "% Complete" lower than 40', () => { cy.get('[data-test="change-filter-dynamically"]').click(); - cy.get('[data-test=expand-all-btn]') - .contains('Expand All') - .click(); + cy.get('[data-test=expand-all-btn]').contains('Expand All').click(); const readLineCount = 10; for (let row = 0; row < readLineCount; row++) { - cy.get(`[style="top: ${GRID_ROW_HEIGHT * row}px;"]`) - .should($elm => { - // only read the percent complete value if it's not a parent - const $slickGroupToggleNotExpanded = $elm.children('.slick-cell:nth(0)').children('.slick-group-toggle:not(.expanded)'); - if ($slickGroupToggleNotExpanded.length > 1) { - const percentComplete = $elm.children('.slick-cell:nth(2)').first().text(); - expect(+percentComplete).to.be.lt(40) - } - }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * row}px;"]`).should(($elm) => { + // only read the percent complete value if it's not a parent + const $slickGroupToggleNotExpanded = $elm.children('.slick-cell:nth(0)').children('.slick-group-toggle:not(.expanded)'); + if ($slickGroupToggleNotExpanded.length > 1) { + const percentComplete = $elm.children('.slick-cell:nth(2)').first().text(); + expect(+percentComplete).to.be.lt(40); + } + }); } }); it('should open the Grid Menu "Clear all Filters" command', () => { - cy.get('#grid28') - .find('button.slick-grid-menu-button') - .trigger('click') - .click(); + cy.get('#grid28').find('button.slick-grid-menu-button').trigger('click').click(); - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item') - .first() - .find('span') - .contains('Clear all Filters') - .click(); + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click(); }); it('should add an item (Task 500) in the first parent it finds and so we should expect it to be inserted at tree level 1', () => { - cy.get('[data-test=add-item-btn]') - .contains('Add New Item') - .click(); + cy.get('[data-test=add-item-btn]').contains('Add New Item').click(); - cy.get('.slick-tree-title[level=1]') - .get('.slick-cell') - .contains('Task 500'); + cy.get('.slick-tree-title[level=1]').get('.slick-cell').contains('Task 500'); }); it('should be able to update the 1st row item (Task 0)', () => { - cy.get('[data-test=update-item-btn]') - .contains('Update 1st Row Item') - .click(); + cy.get('[data-test=update-item-btn]').contains('Update 1st Row Item').click(); - cy.get('.slick-viewport-top.slick-viewport-left') - .scrollTo('top'); + cy.get('.slick-viewport-top.slick-viewport-left').scrollTo('top'); const now = new Date(); const tz = Intl.DateTimeFormat().resolvedOptions().timeZone; @@ -227,17 +172,20 @@ describe('Example 28 - Tree Data (from a flat dataset with parentId references)' cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 0'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', '11 days'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '77%'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', `${currentYear}-${zeroPadding(currentMonth)}-${zeroPadding(currentDate)}`); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', `${currentYear}-${zeroPadding(currentMonth)}-${zeroPadding(currentDate)}`); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should( + 'contain', + `${currentYear}-${zeroPadding(currentMonth)}-${zeroPadding(currentDate)}` + ); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should( + 'contain', + `${currentYear}-${zeroPadding(currentMonth)}-${zeroPadding(currentDate)}` + ); }); it('should collapse the Tree and not expect to see the newly inserted item (Task 500) because all child will be collapsed', () => { - cy.get('[data-test=collapse-all-btn]') - .contains('Collapse All') - .click(); + cy.get('[data-test=collapse-all-btn]').contains('Collapse All').click(); - cy.get('.slick-tree-title[level=1]') - .should('have.length', 0); + cy.get('.slick-tree-title[level=1]').should('have.length', 0); cy.get('.slick-tree-title') .get('.slick-cell') @@ -245,20 +193,11 @@ describe('Example 28 - Tree Data (from a flat dataset with parentId references)' }); it('should open the Grid Menu "Clear all Filters" command', () => { - cy.get('#grid28') - .find('button.slick-grid-menu-button') - .trigger('click') - .click(); + cy.get('#grid28').find('button.slick-grid-menu-button').trigger('click').click(); - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item') - .first() - .find('span') - .contains('Clear all Filters') - .click(); + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click(); - cy.get('.slick-viewport-top.slick-viewport-left') - .scrollTo('top'); + cy.get('.slick-viewport-top.slick-viewport-left').scrollTo('top'); }); it('should be able to open "Task 1" and "Task 3" parents', () => { @@ -272,25 +211,27 @@ describe('Example 28 - Tree Data (from a flat dataset with parentId references)' ... */ cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 1'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should( + 'have.length', + 1 + ); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).click({ force: true }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 2'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 3'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should( + 'have.length', + 1 + ); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).click({ force: true }); }); it('should be able to click on the "Collapse All (wihout event)" button', () => { - cy.get('[data-test=collapse-all-noevent-btn]') - .contains('Collapse All (without triggering event)') - .click(); + cy.get('[data-test=collapse-all-noevent-btn]').contains('Collapse All (without triggering event)').click(); }); it('should be able to click on the "Reapply Previous Toggled Items" button and expect "Task 1" and "Task 3" parents to become open (via Grid State change) while every other parents remains collapsed', () => { - cy.get('[data-test=reapply-toggled-items-btn]') - .contains('Reapply Previous Toggled Items') - .click({ force: true }); + cy.get('[data-test=reapply-toggled-items-btn]').contains('Reapply Previous Toggled Items').click({ force: true }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 1'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); @@ -303,9 +244,7 @@ describe('Example 28 - Tree Data (from a flat dataset with parentId references)' }); it('should be able to click on "Dynamically Toggle First Parent" expect only the first parent item to get collapsed', () => { - cy.get('[data-test=dynamically-toggle-first-parent-btn]') - .contains('Dynamically Toggle First Parent') - .click(); + cy.get('[data-test=dynamically-toggle-first-parent-btn]').contains('Dynamically Toggle First Parent').click(); cy.get(`#grid28 .slick-group-toggle.expanded`).should('have.length', 0); }); diff --git a/test/cypress/e2e/example29.cy.ts b/test/cypress/e2e/example29.cy.ts index 3960c2ddc..3bb244820 100644 --- a/test/cypress/e2e/example29.cy.ts +++ b/test/cypress/e2e/example29.cy.ts @@ -3,12 +3,71 @@ describe('Example 29 - Tree Data with Aggregators (from a Hierarchical Dataset)' const titles = ['Files', 'Date Modified', 'Description', 'Size']; // const defaultSortAscList = ['bucket-list.txt', 'documents', 'misc', 'warranties.txt', 'pdf', 'internet-bill.pdf', 'map.pdf', 'map2.pdf', 'phone-bill.pdf', 'txt', 'todo.txt', 'unclassified.csv', 'unresolved.csv', 'xls', 'compilation.xls', 'music', 'mp3', 'other', 'pop', 'song.mp3', 'theme.mp3', 'rock', 'soft.mp3', 'something.txt']; // const defaultSortDescList = ['something.txt', 'music', 'mp3', 'rock', 'soft.mp3', 'other', 'pop', 'theme.mp3', 'song.mp3', 'documents', 'xls', 'compilation.xls', 'txt', 'todo.txt', 'unclassified.csv', 'unresolved.csv', 'pdf', 'phone-bill.pdf', 'map2.pdf', 'map.pdf', 'internet-bill.pdf', 'misc', 'todo.txt', 'bucket-list.txt']; - const defaultGridPresetWithoutPdfDocs = ['bucket-list.txt', 'documents', 'misc', 'warranties.txt', 'pdf', 'txt', 'todo.txt', 'unclassified.csv', 'unresolved.csv', 'xls', 'compilation.xls']; - const defaultSortAscList = ['bucket-list.txt', 'documents', 'misc', 'warranties.txt', 'pdf', 'internet-bill.pdf', 'map.pdf', 'map2.pdf', 'phone-bill.pdf']; + const defaultGridPresetWithoutPdfDocs = [ + 'bucket-list.txt', + 'documents', + 'misc', + 'warranties.txt', + 'pdf', + 'txt', + 'todo.txt', + 'unclassified.csv', + 'unresolved.csv', + 'xls', + 'compilation.xls', + ]; + const defaultSortAscList = [ + 'bucket-list.txt', + 'documents', + 'misc', + 'warranties.txt', + 'pdf', + 'internet-bill.pdf', + 'map.pdf', + 'map2.pdf', + 'phone-bill.pdf', + ]; // const defaultSortDescList = ['something.txt', 'music', 'mp3', 'rock', 'soft.mp3', 'other', 'pop', 'theme.mp3', 'song.mp3', 'documents', 'xls', 'compilation.xls', 'txt', 'todo.txt']; - const defaultSortDescListWithExtraSongs = ['something.txt', 'recipes', 'coffee-cake', 'chocolate-cake', 'cheesecake', 'music', 'mp3', 'rock', 'soft.mp3', 'pop', 'theme.mp3', 'song.mp3', 'pop-80.mp3', 'pop-79.mp3', 'other', 'documents', 'xls']; - const popMusicWith3ExtraSongs = ['music', 'mp3', 'other', 'pop', 'pop-79.mp3', 'pop-80.mp3', 'pop-81.mp3', 'song.mp3', 'theme.mp3',]; - const popMusicWith3ExtraSongsWithoutEmpty = ['music', 'mp3', 'pop', 'pop-79.mp3', 'pop-80.mp3', 'pop-81.mp3', 'song.mp3', 'theme.mp3',]; + const defaultSortDescListWithExtraSongs = [ + 'something.txt', + 'recipes', + 'coffee-cake', + 'chocolate-cake', + 'cheesecake', + 'music', + 'mp3', + 'rock', + 'soft.mp3', + 'pop', + 'theme.mp3', + 'song.mp3', + 'pop-80.mp3', + 'pop-79.mp3', + 'other', + 'documents', + 'xls', + ]; + const popMusicWith3ExtraSongs = [ + 'music', + 'mp3', + 'other', + 'pop', + 'pop-79.mp3', + 'pop-80.mp3', + 'pop-81.mp3', + 'song.mp3', + 'theme.mp3', + ]; + const popMusicWith3ExtraSongsWithoutEmpty = [ + 'music', + 'mp3', + 'pop', + 'pop-79.mp3', + 'pop-80.mp3', + 'pop-81.mp3', + 'song.mp3', + 'theme.mp3', + ]; describe('without Auto-Recalc feature', () => { it('should display Example title', () => { @@ -27,28 +86,46 @@ describe('Example 29 - Tree Data with Aggregators (from a Hierarchical Dataset)' it('should expect the "pdf" folder to be closed by the collapsed items grid preset with aggregators of Sum(8.8MB) / Avg(2.2MB)', () => { cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0)`).should('contain', 'pdf'); cy.get(`.slick-group-toggle.collapsed`).should('have.length', 1); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 8.8 MB / avg: 2.2 MB'); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 8.8 MB / avg: 2.2 MB' + ); defaultGridPresetWithoutPdfDocs.forEach((_colName, rowIdx) => { if (rowIdx < defaultGridPresetWithoutPdfDocs.length - 1) { - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should('contain', defaultGridPresetWithoutPdfDocs[rowIdx]); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should( + 'contain', + defaultGridPresetWithoutPdfDocs[rowIdx] + ); } }); }); it('should have documents folder with aggregation of Sum(14.46MB) / Avg(1.45MB)', () => { - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'documents'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 14.46 MB / avg: 1.45 MB'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'misc'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 0.4 MB / avg: 0.4 MB'); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'documents' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 14.46 MB / avg: 1.45 MB' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'misc' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 0.4 MB / avg: 0.4 MB' + ); }); it('should expand "pdf" folder and expect all folders to be expanded', () => { - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`) - .click(); + cy.get( + `#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed` + ).click(); - cy.get('.slick-viewport-top.slick-viewport-left') - .scrollTo('top', { force: true } as any); + cy.get('.slick-viewport-top.slick-viewport-left').scrollTo('top', { force: true } as any); }); it('should have default Files list', () => { @@ -56,59 +133,87 @@ describe('Example 29 - Tree Data with Aggregators (from a Hierarchical Dataset)' if (rowIdx > defaultSortAscList.length - 1) { return; } - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should('contain', defaultSortAscList[rowIdx]); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should( + 'contain', + defaultSortAscList[rowIdx] + ); }); }); it('should have pop songs folder with aggregations of Sum(53.3MB) / Avg(26.65MB)', () => { - cy.get('.slick-viewport-top.slick-viewport-left') - .scrollTo('center', { force: true } as any); - - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(0)`).should('contain', 'music'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 151.3 MB / avg: 50.43 MB'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 17}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 151.3 MB / avg: 50.43 MB'); + cy.get('.slick-viewport-top.slick-viewport-left').scrollTo('center', { force: true } as any); + + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'music' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 151.3 MB / avg: 50.43 MB' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 17}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 151.3 MB / avg: 50.43 MB' + ); // next folder is "other" and is empty without aggregations - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(0)`).should('contain', 'pop'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 53.3 MB / avg: 26.65 MB'); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'pop' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 53.3 MB / avg: 26.65 MB' + ); }); it('should be able to add 2 new pop songs into the Music folder', () => { - cy.get('[data-test=add-item-btn]') - .contains('Add New Pop Song') - .click() - .click(); - - cy.get('.slick-group-toggle[level=3]') - .get('.slick-cell') - .contains('pop-79.mp3'); + cy.get('[data-test=add-item-btn]').contains('Add New Pop Song').click().click(); - cy.get('.slick-group-toggle[level=3]') - .get('.slick-cell') - .contains('pop-80.mp3'); + cy.get('.slick-group-toggle[level=3]').get('.slick-cell').contains('pop-79.mp3'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 20}px;"] > .slick-cell:nth(3)`).should('contain', '82 MB'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 21}px;"] > .slick-cell:nth(3)`).should('contain', '83 MB'); + cy.get('.slick-group-toggle[level=3]').get('.slick-cell').contains('pop-80.mp3'); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 20}px;"] > .slick-cell:nth(3)`).should( + 'contain', + '82 MB' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 21}px;"] > .slick-cell:nth(3)`).should( + 'contain', + '83 MB' + ); }); it('should have pop songs folder with updated aggregations including new pop songs of Sum(218.3MB) / Avg(54.58MB)', () => { - cy.get('.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom', { force: true } as any); - - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(0)`).should('contain', 'music'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 17}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB'); + cy.get('.slick-viewport-top.slick-viewport-left').scrollTo('bottom', { force: true } as any); + + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'music' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 316.3 MB / avg: 63.26 MB' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 17}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 316.3 MB / avg: 63.26 MB' + ); // next folder is "other" and is empty without aggregations - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(0)`).should('contain', 'pop'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 218.3 MB / avg: 54.58 MB'); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'pop' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 218.3 MB / avg: 54.58 MB' + ); }); it('should filter the Files column with the word "map" and expect only 4 rows left', () => { const filteredFiles = ['documents', 'pdf', 'map.pdf', 'map2.pdf']; const filteredSizes = ['', '', '3.1', '2.9']; - cy.get('.search-filter.filter-file') - .type('map'); + cy.get('.search-filter.filter-file').type('map'); cy.get('#slickGridContainer-grid29') .find('.slick-row') @@ -121,13 +226,9 @@ describe('Example 29 - Tree Data with Aggregators (from a Hierarchical Dataset)' it('should add filter with "Size < 3" and expect 3 rows left', () => { const filteredFiles = ['documents', 'pdf', 'map2.pdf']; - cy.get('.search-filter.filter-size') - .find('input') - .type('3'); + cy.get('.search-filter.filter-size').find('input').type('3'); - cy.get('.search-filter.filter-size') - .find('.input-group-addon.operator select') - .select('<'); + cy.get('.search-filter.filter-size').find('.input-group-addon.operator select').select('<'); cy.get('#slickGridContainer-grid29') .find('.slick-row .slick-cell:nth(0)') @@ -139,9 +240,7 @@ describe('Example 29 - Tree Data with Aggregators (from a Hierarchical Dataset)' it('should add filter with Size >3 and expect 3 rows left', () => { const filteredFiles = ['documents', 'pdf', 'map.pdf']; - cy.get('.search-filter.filter-size') - .find('.input-group-addon.operator select') - .select('>'); + cy.get('.search-filter.filter-size').find('.input-group-addon.operator select').select('>'); cy.get('#slickGridContainer-grid29') .find('.slick-row .slick-cell:nth(0)') @@ -153,13 +252,9 @@ describe('Example 29 - Tree Data with Aggregators (from a Hierarchical Dataset)' it('should add filter with Size <=3.1 and expect 3 rows left', () => { const filteredFiles = ['documents', 'pdf', 'map.pdf', 'map2.pdf']; - cy.get('.search-filter.filter-size') - .find('input') - .type('.1'); + cy.get('.search-filter.filter-size').find('input').type('.1'); - cy.get('.search-filter.filter-size') - .find('.input-group-addon.operator select') - .select('<='); + cy.get('.search-filter.filter-size').find('.input-group-addon.operator select').select('<='); cy.get('#slickGridContainer-grid29') .find('.slick-row .slick-cell:nth(0)') @@ -169,10 +264,7 @@ describe('Example 29 - Tree Data with Aggregators (from a Hierarchical Dataset)' }); it('should Clear all Filters and expect default list', () => { - cy.get('#slickGridContainer-grid29') - .find('button.slick-grid-menu-button') - .trigger('click') - .click({ force: true }); + cy.get('#slickGridContainer-grid29').find('button.slick-grid-menu-button').trigger('click').click({ force: true }); cy.get(`.slick-grid-menu:visible`) .find('.slick-menu-item') @@ -183,18 +275,23 @@ describe('Example 29 - Tree Data with Aggregators (from a Hierarchical Dataset)' defaultSortAscList.forEach((_colName, rowIdx) => { if (rowIdx < defaultSortAscList.length - 1) { - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should('contain', defaultSortAscList[rowIdx]); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should( + 'contain', + defaultSortAscList[rowIdx] + ); } }); }); it('should click on "Files" column to sort descending', () => { - cy.get('.slick-header-columns .slick-header-column:nth(0)') - .click(); + cy.get('.slick-header-columns .slick-header-column:nth(0)').click(); defaultSortDescListWithExtraSongs.forEach((_colName, rowIdx) => { if (rowIdx < defaultSortDescListWithExtraSongs.length - 1) { - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should('contain', defaultSortDescListWithExtraSongs[rowIdx]); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should( + 'contain', + defaultSortDescListWithExtraSongs[rowIdx] + ); } }); }); @@ -202,13 +299,11 @@ describe('Example 29 - Tree Data with Aggregators (from a Hierarchical Dataset)' it('should filter the Files by the input search string and expect 4 rows and 1st column to have ', () => { const filteredFiles = ['documents', 'pdf', 'map2.pdf', 'map.pdf']; - cy.get('[data-test=search-string]') - .type('map'); + cy.get('[data-test=search-string]').type('map'); - cy.get('.search-filter.filter-file') - .should(($input) => { - expect($input.val()).to.eq('map'); - }); + cy.get('.search-filter.filter-file').should(($input) => { + expect($input.val()).to.eq('map'); + }); cy.get('#slickGridContainer-grid29') .find('.slick-row .slick-cell:nth(0)') @@ -218,119 +313,122 @@ describe('Example 29 - Tree Data with Aggregators (from a Hierarchical Dataset)' }); it('should clear search string and expect default list', () => { - cy.get('[data-test=clear-search-string]') - .click(); + cy.get('[data-test=clear-search-string]').click(); defaultSortDescListWithExtraSongs.forEach((_colName, rowIdx) => { if (rowIdx < defaultSortDescListWithExtraSongs.length - 1) { - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should('contain', defaultSortDescListWithExtraSongs[rowIdx]); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should( + 'contain', + defaultSortDescListWithExtraSongs[rowIdx] + ); } }); }); it('should be able to add a 3rd new pop song into the Music folder and see it show up in the UI', () => { - cy.get('[data-test=add-item-btn]') - .contains('Add New Pop Song') - .click(); + cy.get('[data-test=add-item-btn]').contains('Add New Pop Song').click(); - cy.get('.slick-group-toggle[level=3]') - .get('.slick-cell') - .contains('pop-81.mp3'); + cy.get('.slick-group-toggle[level=3]').get('.slick-cell').contains('pop-81.mp3'); - cy.get('.slick-group-toggle[level=3]') - .get('.slick-cell') - .contains('pop-81.mp3'); + cy.get('.slick-group-toggle[level=3]').get('.slick-cell').contains('pop-81.mp3'); }); it('should have pop songs folder with updated aggregations including 4 pop songs of Sum(400.3MB) / Avg(66.72MB)', () => { - cy.get('.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom', { force: true } as any); - - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(0)`).should('contain', 'music'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 400.3 MB / avg: 66.72 MB'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 17}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 400.3 MB / avg: 66.72 MB'); + cy.get('.slick-viewport-top.slick-viewport-left').scrollTo('bottom', { force: true } as any); + + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'music' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 400.3 MB / avg: 66.72 MB' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 17}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 400.3 MB / avg: 66.72 MB' + ); // next folder is "other" and is empty without aggregations - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(0)`).should('contain', 'pop'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 302.3 MB / avg: 60.46 MB'); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'pop' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 302.3 MB / avg: 60.46 MB' + ); }); it('should return 8 rows when filtering the word "pop" music without excluding children', () => { - cy.get('.search-filter.filter-file') - .type('pop'); + cy.get('.search-filter.filter-file').type('pop'); - cy.get('.right-footer .item-count') - .contains('8'); + cy.get('.right-footer .item-count').contains('8'); popMusicWith3ExtraSongsWithoutEmpty.forEach((_colName, rowIdx) => { if (rowIdx < popMusicWith3ExtraSongsWithoutEmpty.length - 1) { - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should('contain', popMusicWith3ExtraSongsWithoutEmpty[rowIdx]); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should( + 'contain', + popMusicWith3ExtraSongsWithoutEmpty[rowIdx] + ); } }); }); it('should return 6 rows when using same filter "pop" music AND selecting checkbox to "Exclude Children when Filtering Tree"', () => { - cy.get('[data-test="exclude-child-when-filtering"]') - .check(); + cy.get('[data-test="exclude-child-when-filtering"]').check(); - cy.get('.right-footer .item-count') - .contains('6'); + cy.get('.right-footer .item-count').contains('6'); popMusicWith3ExtraSongsWithoutEmpty.forEach((_colName, rowIdx) => { if (rowIdx < popMusicWith3ExtraSongsWithoutEmpty.length - 3) { - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should('contain', popMusicWith3ExtraSongsWithoutEmpty[rowIdx]); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should( + 'contain', + popMusicWith3ExtraSongsWithoutEmpty[rowIdx] + ); } }); }); it('should change filter to the word "music" and expect only 1 row (the music folder) to show up when still Excluding Children from the Tree', () => { - cy.get('#slickGridContainer-grid29') - .find('button.slick-grid-menu-button') - .click(); + cy.get('#slickGridContainer-grid29').find('button.slick-grid-menu-button').click(); - cy.get('.slick-grid-menu:visible') - .find('.slick-menu-item') - .first() - .find('span') - .contains('Clear all Filters') - .click(); + cy.get('.slick-grid-menu:visible').find('.slick-menu-item').first().find('span').contains('Clear all Filters').click(); - cy.get('.search-filter.filter-file') - .type('music'); + cy.get('.search-filter.filter-file').type('music'); - cy.get('.right-footer .item-count') - .contains('1'); + cy.get('.right-footer .item-count').contains('1'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'music'); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'music' + ); }); it('should use same filter "music" and now expect to see 10 rows (entire music folder content) to show up when "Exclude Children when Filtering Tree" becomes uncheck', () => { - cy.get('[data-test="exclude-child-when-filtering"]') - .uncheck(); + cy.get('[data-test="exclude-child-when-filtering"]').uncheck(); - cy.get('.right-footer .item-count') - .contains('11'); + cy.get('.right-footer .item-count').contains('11'); const allMusic = [...popMusicWith3ExtraSongs, 'rock', 'soft.mp3']; allMusic.forEach((_colName, rowIdx) => { if (rowIdx < allMusic.length - 3) { - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should('contain', allMusic[rowIdx]); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should( + 'contain', + allMusic[rowIdx] + ); } }); }); it('should use same filter "music" and add extra filter of "size >= 50" and expect 1+ songs (>=6 rows) to show up in the grid when "Exclude Children when Filtering Tree" is unchecked and "Skip Other Criteria..." is checked', () => { - cy.get('.search-filter.filter-size') - .find('input') - .type('50'); + cy.get('.search-filter.filter-size').find('input').type('50'); - cy.get('.search-filter.filter-size') - .find('.input-group-addon.operator select') - .select('>='); + cy.get('.search-filter.filter-size').find('.input-group-addon.operator select').select('>='); cy.wait(50) .get('.right-footer .item-count') - .then($row => { + .then(($row) => { expect(+$row.text()).to.be.at.least(6); }); @@ -338,152 +436,276 @@ describe('Example 29 - Tree Data with Aggregators (from a Hierarchical Dataset)' expectedFiles.forEach((_colName, rowIdx) => { if (rowIdx < expectedFiles.length - 3) { - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should('contain', expectedFiles[rowIdx]); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should( + 'contain', + expectedFiles[rowIdx] + ); } }); }); it('should use same filter "music" and "size > 70" then unchecked "Skip Other Criteria..." and now expect 0 rows in the grid because there 0 rows having these 2 filters criteria', () => { - cy.get('[data-test="auto-approve-parent-item"]') - .uncheck(); + cy.get('[data-test="auto-approve-parent-item"]').uncheck(); - cy.get('.right-footer .item-count') - .contains('0'); + cy.get('.right-footer .item-count').contains('0'); }); it('should clear all filters', () => { - cy.get('[data-test="clear-filters-btn"]') - .click(); + cy.get('[data-test="clear-filters-btn"]').click(); }); it('should have pop songs folder with updated aggregations including 4 pop songs of Sum(400.3MB) / Avg(66.72MB)', () => { - cy.get('.slick-viewport-top.slick-viewport-left') - .scrollTo('center', { force: true } as any); - - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(0)`).should('contain', 'music'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 400.3 MB / avg: 66.72 MB'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 17}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 400.3 MB / avg: 66.72 MB'); + cy.get('.slick-viewport-top.slick-viewport-left').scrollTo('center', { force: true } as any); + + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'music' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 400.3 MB / avg: 66.72 MB' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 17}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 400.3 MB / avg: 66.72 MB' + ); // next folder is "other" and is empty without aggregations - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(0)`).should('contain', 'pop'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 302.3 MB / avg: 60.46 MB'); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'pop' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 302.3 MB / avg: 60.46 MB' + ); }); it('should remove last inserted pop song 81 and expect aggregations to be updated with Sum(316.3MB) / Avg(63.26MB)', () => { - cy.get('[data-test="remove-item-btn"]') - .click(); - - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(0)`).should('contain', 'music'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 17}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB'); + cy.get('[data-test="remove-item-btn"]').click(); + + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'music' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 316.3 MB / avg: 63.26 MB' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 17}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 316.3 MB / avg: 63.26 MB' + ); // next folder is "other" and is empty without aggregations - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(0)`).should('contain', 'pop'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 218.3 MB / avg: 54.58 MB'); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'pop' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 218.3 MB / avg: 54.58 MB' + ); }); }); describe('Auto-Recalc Tree Totals feature enabled', () => { it('should enable auto-recalc Tree Totals', () => { - cy.get('[data-test="auto-recalc-totals"]') - .check(); + cy.get('[data-test="auto-recalc-totals"]').check(); }); it('should have pop songs folder with aggregation reflecting what is displayed, Sum(316.3MB) / Avg(63.26MB)', () => { - cy.get('.slick-viewport-top.slick-viewport-left') - .scrollTo('center', { force: true } as any); - - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(0)`).should('contain', 'music'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 17}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB'); + cy.get('.slick-viewport-top.slick-viewport-left').scrollTo('center', { force: true } as any); + + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'music' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 316.3 MB / avg: 63.26 MB' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 17}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 316.3 MB / avg: 63.26 MB' + ); // next folder is "other" and is empty without aggregations - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(0)`).should('contain', 'pop'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 218.3 MB / avg: 54.58 MB'); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'pop' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 218.3 MB / avg: 54.58 MB' + ); }); it('should have documents with same Sum as the beginning since auto-recalc is disabled, aggregation should be Sum(14.46MB) / Avg(1.45MB)', () => { - cy.get('.slick-viewport-top.slick-viewport-left') - .scrollTo('top', { force: true } as any); - - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'documents'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 14.46 MB / avg: 1.45 MB (total)'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'misc'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 0.4 MB / avg: 0.4 MB (sub-total)'); + cy.get('.slick-viewport-top.slick-viewport-left').scrollTo('top', { force: true } as any); + + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'documents' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 14.46 MB / avg: 1.45 MB (total)' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'misc' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 0.4 MB / avg: 0.4 MB (sub-total)' + ); }); it('should retype filter "map" and expect totals to be updated with a lower Sum(6MB) / Avg(3MB) of only what is displayed', () => { - cy.get('.search-filter.filter-file') - .type('map'); - - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'documents'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 6 MB / avg: 3 MB (total)'); + cy.get('.search-filter.filter-file').type('map'); + + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'documents' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 6 MB / avg: 3 MB (total)' + ); cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'pdf'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 6 MB / avg: 3 MB (sub-total)'); - + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 6 MB / avg: 3 MB (sub-total)' + ); cy.get('.right-footer .item-count').contains('4'); cy.get('.right-footer .total-count').contains('31'); }); it('should enable auto-recalc Tree Totals', () => { - cy.get('[data-test="clear-filters-btn"]') - .click(); + cy.get('[data-test="clear-filters-btn"]').click(); }); it('should type filter "b" and expect totals to be updated with a lower Sum(6MB) / Avg(3MB) of only what is displayed', () => { - cy.get('.search-filter.filter-file') - .type('b'); - - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'bucket-list.txt'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'documents'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 4.02 MB / avg: 1.34 MB (total)'); + cy.get('.search-filter.filter-file').type('b'); + + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'bucket-list.txt' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'documents' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 4.02 MB / avg: 1.34 MB (total)' + ); cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'pdf'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 2.8 MB / avg: 1.4 MB (sub-total)'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should('contain', 'internet-bill.pdf'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(3)`).should('contain', '1.3 MB'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0)`).should('contain', 'phone-bill.pdf'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(3)`).should('contain', '1.5 MB'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(0)`).should('contain', 'zebra.dll'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(3)`).should('contain', '1.22 MB'); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 2.8 MB / avg: 1.4 MB (sub-total)' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'internet-bill.pdf' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(3)`).should( + 'contain', + '1.3 MB' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'phone-bill.pdf' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(3)`).should( + 'contain', + '1.5 MB' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'zebra.dll' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(3)`).should( + 'contain', + '1.22 MB' + ); cy.get('.right-footer .item-count').contains('6'); cy.get('.right-footer .total-count').contains('31'); }); it('should type filter "b" and expect totals to be updated with a lower Sum(6MB) / Avg(3MB) of only what is displayed', () => { - cy.get('.search-filter.filter-file') - .type('i'); // will become "bi" - - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'documents'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 2.8 MB / avg: 1.4 MB (total)'); + cy.get('.search-filter.filter-file').type('i'); // will become "bi" + + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'documents' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 2.8 MB / avg: 1.4 MB (total)' + ); cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'pdf'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 2.8 MB / avg: 1.4 MB (sub-total)'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'internet-bill.pdf'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', '1.3 MB'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should('contain', 'phone-bill.pdf'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(3)`).should('contain', '1.5 MB'); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 2.8 MB / avg: 1.4 MB (sub-total)' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'internet-bill.pdf' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should( + 'contain', + '1.3 MB' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'phone-bill.pdf' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(3)`).should( + 'contain', + '1.5 MB' + ); cy.get('.right-footer .item-count').contains('4'); cy.get('.right-footer .total-count').contains('31'); }); it('should clear all filters', () => { - cy.get('[data-test="clear-filters-btn"]') - .click(); + cy.get('[data-test="clear-filters-btn"]').click(); }); it('should collapse "pdf" folder and filter with "b" again and expect same updated tree totals as earlier collapsed or expanded should still be Sum(2.8MB) / Avg(1.4MB)', () => { - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`) - .click(); - - cy.get('.search-filter.filter-file') - .type('b'); - - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'bucket-list.txt'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'documents'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 4.02 MB / avg: 1.34 MB (total)'); + cy.get( + `#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded` + ).click(); + + cy.get('.search-filter.filter-file').type('b'); + + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'bucket-list.txt' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'documents' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 4.02 MB / avg: 1.34 MB (total)' + ); cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'pdf'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 2.8 MB / avg: 1.4 MB (sub-total)'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should('contain', 'zebra.dll'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(3)`).should('contain', '1.22 MB'); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 2.8 MB / avg: 1.4 MB (sub-total)' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'zebra.dll' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(3)`).should( + 'contain', + '1.22 MB' + ); cy.get('.right-footer .item-count').contains('4'); cy.get('.right-footer .total-count').contains('31'); @@ -495,12 +717,30 @@ describe('Example 29 - Tree Data with Aggregators (from a Hierarchical Dataset)' cy.get('.search-filter.filter-file').type('so'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'documents'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 0.79 MB / avg: 0.79 MB (total)'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'music'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 104.3 MB / avg: 52.15 MB (total)'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'something.txt'); - cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', '90 MB'); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'documents' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 0.79 MB / avg: 0.79 MB (total)' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'music' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should( + 'contain', + 'sum: 104.3 MB / avg: 52.15 MB (total)' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should( + 'contain', + 'something.txt' + ); + cy.get(`#slickGridContainer-grid29 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should( + 'contain', + '90 MB' + ); cy.get('.right-footer .item-count').contains('3'); cy.get('.right-footer .total-count').contains('31'); diff --git a/test/cypress/e2e/example30.cy.ts b/test/cypress/e2e/example30.cy.ts index 10c1bd160..c82dbdbd7 100644 --- a/test/cypress/e2e/example30.cy.ts +++ b/test/cypress/e2e/example30.cy.ts @@ -2,7 +2,20 @@ import { changeTimezone, zeroPadding } from '../plugins/utilities'; describe('Example 30 Composite Editor Modal', () => { const fullPreTitles = ['', 'Common Factor', 'Analysis', 'Period', 'Item', '']; - const fullTitles = ['', ' Title ', 'Duration', 'Cost', '% Complete', 'Complexity', 'Start', 'Completed', 'Finish', 'Product', 'Country of Origin', 'Action']; + const fullTitles = [ + '', + ' Title ', + 'Duration', + 'Cost', + '% Complete', + 'Complexity', + 'Start', + 'Completed', + 'Finish', + 'Product', + 'Country of Origin', + 'Action', + ]; const GRID_ROW_HEIGHT = 35; const EDITABLE_CELL_RGB_COLOR = 'rgba(227, 240, 251, 0.57)'; @@ -34,23 +47,20 @@ describe('Example 30 Composite Editor Modal', () => { it('should display 2 different tooltips when hovering icons on "Title" column', () => { cy.get('.slick-column-name').as('title-column'); - cy.get('@title-column') - .find('.mdi-alert-outline') - .trigger('mouseover'); + cy.get('@title-column').find('.mdi-alert-outline').trigger('mouseover'); cy.get('.slick-custom-tooltip').should('be.visible'); cy.get('.slick-custom-tooltip .tooltip-body').contains('Task must always be followed by a number'); - cy.get('@title-column') - .find('.mdi-information-outline') - .trigger('mouseover'); + cy.get('@title-column').find('.mdi-information-outline').trigger('mouseover'); cy.get('.slick-custom-tooltip').should('be.visible'); cy.get('.slick-custom-tooltip .tooltip-body').contains('Title is always rendered as UPPERCASE'); }); it('should have "TASK 0" (uppercase) incremented by 1 after each row', () => { - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).contains('TASK 0', { matchCase: false }) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`) + .contains('TASK 0', { matchCase: false }) .should('have.css', 'text-transform', 'uppercase'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).contains('TASK 1', { matchCase: false }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).contains('TASK 2', { matchCase: false }); @@ -61,54 +71,81 @@ describe('Example 30 Composite Editor Modal', () => { it('should be able to change "Duration" values of first 4 rows', () => { // change duration - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'days').click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`) + .should('contain', 'days') + .click(); cy.get('.editor-duration').type('0{enter}'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`) .should('contain', '0 day') - .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); + .should('have.css', 'background-color') + .and('eq', UNSAVED_RGB_COLOR); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).click().type('1{enter}'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', '1 day') - .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`) + .click() + .type('1{enter}'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`) + .should('contain', '1 day') + .should('have.css', 'background-color') + .and('eq', UNSAVED_RGB_COLOR); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).click().type('2{enter}'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).should('contain', '2 days') - .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`) + .click() + .type('2{enter}'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`) + .should('contain', '2 days') + .should('have.css', 'background-color') + .and('eq', UNSAVED_RGB_COLOR); }); it('should be able to change "Title" values of row indexes 1-3', () => { // change title - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).contains('TASK 1', { matchCase: false }).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`) + .contains('TASK 1', { matchCase: false }) + .click(); cy.get('.editor-title').type('task 1111'); cy.get('.editor-title .editor-footer .btn-save').click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).contains('TASK 1111', { matchCase: false }) - .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`) + .contains('TASK 1111', { matchCase: false }) + .should('have.css', 'background-color') + .and('eq', UNSAVED_RGB_COLOR); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).contains('TASK 2', { matchCase: false }).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`) + .contains('TASK 2', { matchCase: false }) + .click(); cy.get('.editor-title').type('task 2222'); cy.get('.editor-title .editor-footer .btn-save').click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).contains('TASK 2222', { matchCase: false }) - .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`) + .contains('TASK 2222', { matchCase: false }) + .should('have.css', 'background-color') + .and('eq', UNSAVED_RGB_COLOR); }); it('should be able to change "% Complete" values of row indexes 2-4', () => { // change % complete cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).click(); cy.get('.slider-editor input[type=range]').as('range').invoke('val', 5).trigger('change', { force: true }); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).should('contain', '5') - .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`) + .should('contain', '5') + .should('have.css', 'background-color') + .and('eq', UNSAVED_RGB_COLOR); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(4)`).click(); cy.get('.slider-editor input[type=range]').as('range').invoke('val', 6).trigger('change', { force: true }); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(4)`).should('contain', '6') - .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(4)`) + .should('contain', '6') + .should('have.css', 'background-color') + .and('eq', UNSAVED_RGB_COLOR); }); it('should not be able to change the "Finish" dates on first 2 rows', () => { - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('contain', '').click({ force: true }); // this date should also always be initially empty + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`) + .should('contain', '') + .click({ force: true }); // this date should also always be initially empty cy.get(`.vanilla-calendar-day__btn_today:visible`).should('not.exist'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('contain', '').click({ force: true }); // this date should also always be initially empty + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`) + .should('contain', '') + .click({ force: true }); // this date should also always be initially empty cy.get(`.vanilla-calendar-day__btn_today:visible`).should('not.exist'); }); @@ -137,58 +174,62 @@ describe('Example 30 Composite Editor Modal', () => { const currentYear = today.getFullYear(); // change Finish date to today's date - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('contain', '').click(); // this date should also always be initially empty + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`) + .should('contain', '') + .click(); // this date should also always be initially empty cy.get(`.vanilla-calendar-day__btn_today:visible`).click('bottom', { force: true }); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('contain', `${zeroPadding(currentMonth)}/${zeroPadding(currentDate)}/${currentYear}`) - .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`) + .should('contain', `${zeroPadding(currentMonth)}/${zeroPadding(currentDate)}/${currentYear}`) + .should('have.css', 'background-color') + .and('eq', UNSAVED_RGB_COLOR); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).click(); cy.get(`.vanilla-calendar-day__btn_today:visible`).click('bottom', { force: true }); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('contain', `${zeroPadding(currentMonth)}/${zeroPadding(currentDate)}/${currentYear}`) - .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`) + .should('contain', `${zeroPadding(currentMonth)}/${zeroPadding(currentDate)}/${currentYear}`) + .should('have.css', 'background-color') + .and('eq', UNSAVED_RGB_COLOR); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`).click(); cy.get(`.vanilla-calendar-day__btn_today:visible`).click('bottom', { force: true }); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`).should('contain', `${zeroPadding(currentMonth)}/${zeroPadding(currentDate)}/${currentYear}`) - .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`) + .should('contain', `${zeroPadding(currentMonth)}/${zeroPadding(currentDate)}/${currentYear}`) + .should('have.css', 'background-color') + .and('eq', UNSAVED_RGB_COLOR); - cy.get('.unsaved-editable-field') - .should('have.length', 13); + cy.get('.unsaved-editable-field').should('have.length', 13); }); it('should undo last edit and expect the date editor to be opened as well when clicking the associated last undo with editor button', () => { cy.get('[data-test=undo-open-editor-btn]').click(); - cy.get('.vanilla-calendar') - .should('exist'); + cy.get('.vanilla-calendar').should('exist'); - cy.get('.unsaved-editable-field') - .should('have.length', 12); + cy.get('.unsaved-editable-field').should('have.length', 12); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`) .should('contain', '') - .should('have.css', 'background-color').and('eq', EDITABLE_CELL_RGB_COLOR); + .should('have.css', 'background-color') + .and('eq', EDITABLE_CELL_RGB_COLOR); }); it('should undo last edit and expect the date editor to NOT be opened when clicking undo last edit button', () => { cy.get('[data-test=undo-last-edit-btn]').click(); - cy.get('.vanilla-calendar') - .should('not.exist'); + cy.get('.vanilla-calendar').should('not.exist'); - cy.get('.unsaved-editable-field') - .should('have.length', 11); + cy.get('.unsaved-editable-field').should('have.length', 11); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`) .should('contain', '') - .should('have.css', 'background-color').and('eq', EDITABLE_CELL_RGB_COLOR); + .should('have.css', 'background-color') + .and('eq', EDITABLE_CELL_RGB_COLOR); }); it('should click on the "Save" button and expect 2 console log calls with the queued items & also expect no more unsaved cells', () => { cy.get('[data-test=save-all-btn]').click(); - cy.get('.unsaved-editable-field') - .should('have.length', 0); + cy.get('.unsaved-editable-field').should('have.length', 0); cy.window().then((win) => { expect(win.console.log).to.have.callCount(2); @@ -198,15 +239,13 @@ describe('Example 30 Composite Editor Modal', () => { it('should be able to toggle the grid to readonly', () => { cy.get('[data-test=toggle-readonly-btn]').click(); - cy.get('.editable-field') - .should('have.length', 0); + cy.get('.editable-field').should('have.length', 0); }); it('should be able to toggle back the grid to editable', () => { cy.get('[data-test=toggle-readonly-btn]').click(); - cy.get('.editable-field') - .should('not.have.length', 0); + cy.get('.editable-field').should('not.have.length', 0); }); it('should open the Composite Editor (Create Item) and expect all form inputs to be empty', () => { @@ -234,7 +273,9 @@ describe('Example 30 Composite Editor Modal', () => { it('should fill in the (Create Item) form inputs and expect a new row in the grid', () => { cy.get('textarea').type('Task'); - cy.get('.item-details-container.editor-title .item-details-validation').contains('* Your title is invalid, it must start with "Task" followed by a number.'); + cy.get('.item-details-container.editor-title .item-details-validation').contains( + '* Your title is invalid, it must start with "Task" followed by a number.' + ); cy.get('textarea').type(' 8888'); cy.get('.item-details-container.editor-title .item-details-validation').should('be.empty'); cy.get('.item-details-container.editor-title .modified').should('have.length', 1); @@ -243,7 +284,10 @@ describe('Example 30 Composite Editor Modal', () => { // .should('have.css', 'border') // .and('eq', `1px solid ${UNSAVED_RGB_COLOR}`); - cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete').as('range').invoke('val', 5).trigger('change', { force: true }); + cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete') + .as('range') + .invoke('val', 5) + .trigger('change', { force: true }); cy.get('.item-details-editor-container .input-group-text').contains('5'); cy.get('.item-details-container.editor-percentComplete .modified').should('have.length', 1); @@ -258,14 +302,18 @@ describe('Example 30 Composite Editor Modal', () => { cy.get('.item-details-container.editor-duration .editor-text').type('22'); cy.get('.item-details-container.editor-duration .modified').should('have.length', 1); - cy.get('.item-details-container.editor-finish > .item-details-validation').contains('* You must provide a "Finish" date when "Completed" is checked.'); + cy.get('.item-details-container.editor-finish > .item-details-validation').contains( + '* You must provide a "Finish" date when "Completed" is checked.' + ); cy.get('.item-details-container.editor-finish input.date-picker').click(); cy.get(`.vanilla-calendar-day__btn_today:visible`).click('bottom', { force: true }); cy.get('.item-details-container.editor-finish .modified').should('have.length', 1); cy.get('.item-details-container.editor-origin .autocomplete').type('c'); cy.get('.slick-autocomplete:visible').find('div:nth(1)').click(); - cy.get('.item-details-container.editor-origin .autocomplete').invoke('val').then(text => expect(text).to.eq('Antarctica')); + cy.get('.item-details-container.editor-origin .autocomplete') + .invoke('val') + .then((text) => expect(text).to.eq('Antarctica')); cy.get('.item-details-container.editor-origin .modified').should('have.length', 1); cy.get('.btn-save').contains('Save').click(); @@ -277,7 +325,9 @@ describe('Example 30 Composite Editor Modal', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '22 days'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '5'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5).editable-field`).should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`) + .find('.mdi.mdi-check.checkmark-icon') + .should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(9)`).should('contain', 'Tasty Granite Table'); @@ -292,8 +342,14 @@ describe('Example 30 Composite Editor Modal', () => { cy.get('.slick-editor-modal-title').contains('Editing - Task 8888 (id: 501)'); cy.get('textarea').contains('Task 8888').type('Task 8899'); - cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete').as('range').invoke('val', 7).trigger('change', { force: true }); - cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete').as('range').invoke('val', 17).trigger('change', { force: true }); + cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete') + .as('range') + .invoke('val', 7) + .trigger('change', { force: true }); + cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete') + .as('range') + .invoke('val', 17) + .trigger('change', { force: true }); cy.get('.item-details-container.editor-percentComplete .modified').should('have.length', 1); cy.get('.item-details-editor-container .editor-checkbox').uncheck(); @@ -311,7 +367,9 @@ describe('Example 30 Composite Editor Modal', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '33 days'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '17'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5).editable-field`).should('have.length', 1); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('not.exist'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`) + .find('.mdi.mdi-check.checkmark-icon') + .should('not.exist'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(9)`).should('contain', 'Tasty Granite Table'); @@ -333,7 +391,9 @@ describe('Example 30 Composite Editor Modal', () => { cy.get('[data-name=editor-complexity].ms-drop > ul > li > label:nth(2)').contains('Straightforward').click(); cy.get('.item-details-container.editor-complexity .modified').should('have.length', 1); - cy.get('.item-details-container.editor-finish > .item-details-validation').contains('* You must provide a "Finish" date when "Completed" is checked.'); + cy.get('.item-details-container.editor-finish > .item-details-validation').contains( + '* You must provide a "Finish" date when "Completed" is checked.' + ); cy.get('.item-details-container.editor-finish .date-picker').click().click(); cy.get(`.vanilla-calendar-day__btn_today:visible`).click(); cy.get('.item-details-container.editor-finish .modified').should('have.length', 1); @@ -341,13 +401,21 @@ describe('Example 30 Composite Editor Modal', () => { cy.get('.item-details-container.editor-origin .autocomplete').type('bel'); cy.get('.slick-autocomplete:visible').find('div:nth(1)').click(); cy.get('.item-details-container.editor-origin .modified').should('have.length', 1); - cy.get('.item-details-container.editor-origin .autocomplete').invoke('val').then(text => expect(text).to.eq('Belgium')); + cy.get('.item-details-container.editor-origin .autocomplete') + .invoke('val') + .then((text) => expect(text).to.eq('Belgium')); cy.get('.btn-save').contains('Apply Mass Update').click(); cy.get('.validation-summary').contains('Unfortunately we only accept a minimum of 50% Completion...'); - cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete').as('range').invoke('val', 5).trigger('change', { force: true }); - cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete').as('range').invoke('val', 51).trigger('change', { force: true }); + cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete') + .as('range') + .invoke('val', 5) + .trigger('change', { force: true }); + cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete') + .as('range') + .invoke('val', 51) + .trigger('change', { force: true }); cy.get('.item-details-editor-container .input-group-text').contains('51'); cy.get('.btn-save').contains('Apply Mass Update').click(); @@ -357,25 +425,33 @@ describe('Example 30 Composite Editor Modal', () => { it('should have updated values in the entire grid', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '51'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`) + .find('.mdi.mdi-check.checkmark-icon') + .should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(4)`).should('contain', '51'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`) + .find('.mdi.mdi-check.checkmark-icon') + .should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).should('contain', '51'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`) + .find('.mdi.mdi-check.checkmark-icon') + .should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(4)`).should('contain', '51'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(7)`) + .find('.mdi.mdi-check.checkmark-icon') + .should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); @@ -393,7 +469,9 @@ describe('Example 30 Composite Editor Modal', () => { cy.get('[data-name=editor-complexity].ms-drop > ul > li > label:nth(2)').contains('Straightforward').click(); cy.get('.item-details-container.editor-complexity .modified').should('have.length', 1); - cy.get('.item-details-container.editor-finish > .item-details-validation').contains('* You must provide a "Finish" date when "Completed" is checked.'); + cy.get('.item-details-container.editor-finish > .item-details-validation').contains( + '* You must provide a "Finish" date when "Completed" is checked.' + ); cy.get('.item-details-container.editor-finish .date-picker').click().click(); cy.get(`.vanilla-calendar-day__btn_today:visible`).click(); cy.get('.item-details-container.editor-finish .modified').should('have.length', 1); @@ -401,14 +479,18 @@ describe('Example 30 Composite Editor Modal', () => { cy.get('.item-details-container.editor-origin .autocomplete').type('bel'); cy.get('.slick-autocomplete:visible').find('div:nth(1)').click(); cy.get('.item-details-container.editor-origin .modified').should('have.length', 1); - cy.get('.item-details-container.editor-origin .autocomplete').invoke('val').then(text => expect(text).to.eq('Belgium')); + cy.get('.item-details-container.editor-origin .autocomplete') + .invoke('val') + .then((text) => expect(text).to.eq('Belgium')); }); it('should be able to clear the "Country of Origin" autocomplete field in the modal form via the Clear button from the editor', () => { cy.get('.item-details-container.editor-origin .modified').should('have.length', 1); cy.get('.item-details-container.editor-origin .autocomplete-container button.btn-clear').click(); cy.get('.item-details-container.editor-origin .modified').should('have.length', 1); - cy.get('.item-details-container.editor-origin .autocomplete').invoke('val').then(text => expect(text).to.eq('')); + cy.get('.item-details-container.editor-origin .autocomplete') + .invoke('val') + .then((text) => expect(text).to.eq('')); }); it('should be able to click on the "Reset Form" button from the (Mass Update) and expect the form to be empty and not be able to Save', () => { @@ -421,10 +503,9 @@ describe('Example 30 Composite Editor Modal', () => { cy.get('.btn-save') .click() - .then(() => expect(alertStub.getCall(0)).to.be.calledWith('Sorry we could not detect any changes.')) + .then(() => expect(alertStub.getCall(0)).to.be.calledWith('Sorry we could not detect any changes.')); - cy.get('.btn-cancel') - .click() + cy.get('.btn-cancel').click(); }); it('should have the "Mass Selection" button disabled when no rows are selected', () => { @@ -445,7 +526,9 @@ describe('Example 30 Composite Editor Modal', () => { cy.get('.item-details-editor-container .editor-checkbox').check(); cy.get('.item-details-container.editor-completed .modified').should('have.length', 1); - cy.get('.item-details-container.editor-finish > .item-details-validation').contains('* You must provide a "Finish" date when "Completed" is checked.'); + cy.get('.item-details-container.editor-finish > .item-details-validation').contains( + '* You must provide a "Finish" date when "Completed" is checked.' + ); cy.get('.item-details-container.editor-finish input.date-picker').click({ force: true }); cy.get(`.vanilla-calendar-day__btn_today:visible`).click('bottom', { force: true }); cy.get('.item-details-container.editor-finish .modified').should('have.length', 1); @@ -453,12 +536,17 @@ describe('Example 30 Composite Editor Modal', () => { cy.get('.item-details-container.editor-origin .autocomplete').type('ze'); cy.get('.slick-autocomplete:visible').find('div:nth(1)').click(); cy.get('.item-details-container.editor-origin .modified').should('have.length', 1); - cy.get('.item-details-container.editor-origin .autocomplete').invoke('val').then(text => expect(text).to.eq('Belize')); + cy.get('.item-details-container.editor-origin .autocomplete') + .invoke('val') + .then((text) => expect(text).to.eq('Belize')); cy.get('.btn-save').contains('Update Selection').click(); cy.get('.validation-summary').contains('Unfortunately we only accept a minimum of 50% Completion...'); - cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete').as('range').invoke('val', 77).trigger('change', { force: true }); + cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete') + .as('range') + .invoke('val', 77) + .trigger('change', { force: true }); cy.get('.item-details-editor-container .input-group-text').contains('77'); cy.get('.btn-save').contains('Update Selection').click(); @@ -466,30 +554,35 @@ describe('Example 30 Composite Editor Modal', () => { }); it('should not have any row selected after the mass-selection save is over', () => { - cy.get('.slick-row') - .children() - .filter('.slick-cell-checkboxsel.selected') - .should('have.length', 0); + cy.get('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 0); }); it('should have updated all the changed values BUT only on the 2 selected rows', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`) + .find('.mdi.mdi-check.checkmark-icon') + .should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(4)`).should('contain', '77'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`) + .find('.mdi.mdi-check.checkmark-icon') + .should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', 'Belize'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).should('contain', '77'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`) + .find('.mdi.mdi-check.checkmark-icon') + .should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(10)`).should('contain', 'Belize'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(7)`) + .find('.mdi.mdi-check.checkmark-icon') + .should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); @@ -510,23 +603,26 @@ describe('Example 30 Composite Editor Modal', () => { cy.get('[data-test="open-modal-mass-update-btn"]').click(); cy.get('.slick-editor-modal-title').contains('Mass Update All Records'); - cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete').as('range').invoke('val', 100).trigger('change', { force: true }); + cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete') + .as('range') + .invoke('val', 100) + .trigger('change', { force: true }); cy.get('.item-details-container.editor-percentComplete .modified').should('have.length', 1); cy.get('.item-details-container.editor-completed input.editor-checkbox:checked').should('have.length', 1); cy.get('.item-details-container.editor-completed .modified').should('have.length', 1); - cy.get('.item-details-container.editor-finish input.date-picker').should('contain.value', `${zeroPadding(currentMonth)}/${zeroPadding(currentDate)}/${currentYear}`); + cy.get('.item-details-container.editor-finish input.date-picker').should( + 'contain.value', + `${zeroPadding(currentMonth)}/${zeroPadding(currentDate)}/${currentYear}` + ); cy.get('.item-details-container.editor-finish .modified').should('have.length', 1); cy.get('.btn-cancel').click(); }); it('should not have any row selected after the mass-update save is over', () => { - cy.get('.slick-row') - .children() - .filter('.slick-cell-checkboxsel.selected') - .should('have.length', 0); + cy.get('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 0); }); it('should focus on first row and open the Composite Editor (Clone Item) and expect all form inputs to be filled with first row data', () => { @@ -537,15 +633,23 @@ describe('Example 30 Composite Editor Modal', () => { cy.get('textarea').contains('Task 8899'); cy.get('.item-details-editor-container .slider-editor .input-group-text').contains('51'); cy.get('.item-details-container.editor-completed input.editor-checkbox:checked').should('have.length', 1); - cy.get('.item-details-container.editor-duration input.editor-text').invoke('val').then(text => expect(text).to.eq('33.00')); + cy.get('.item-details-container.editor-duration input.editor-text') + .invoke('val') + .then((text) => expect(text).to.eq('33.00')); }); it('should change the "Title" & "Duration" from the Clone form, then click on "Cancel" button and expect no changes in the grid', () => { cy.get('.slick-editor-modal-title').contains('Clone - Task 8899'); cy.get('textarea').contains('Task 8899').type('Task 9999'); - cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete').as('range').invoke('val', 7).trigger('change', { force: true }); - cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete').as('range').invoke('val', 17).trigger('change', { force: true }); + cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete') + .as('range') + .invoke('val', 7) + .trigger('change', { force: true }); + cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete') + .as('range') + .invoke('val', 17) + .trigger('change', { force: true }); cy.get('.item-details-container.editor-percentComplete .modified').should('have.length', 1); cy.get('.item-details-editor-container .editor-checkbox').uncheck(); @@ -555,7 +659,9 @@ describe('Example 30 Composite Editor Modal', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).contains('TASK 8899', { matchCase: false }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '33 days'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`) + .find('.mdi.mdi-check.checkmark-icon') + .should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); @@ -568,15 +674,23 @@ describe('Example 30 Composite Editor Modal', () => { cy.get('textarea').contains('Task 8899'); cy.get('.item-details-editor-container .slider-editor .input-group-text').contains('51'); cy.get('.item-details-container.editor-completed input.editor-checkbox:checked').should('have.length', 1); - cy.get('.item-details-container.editor-duration input.editor-text').invoke('val').then(text => expect(text).to.eq('33.00')); + cy.get('.item-details-container.editor-duration input.editor-text') + .invoke('val') + .then((text) => expect(text).to.eq('33.00')); }); it('should change the "Title" & "Duration" from the Clone form, then click on "Clone" button and expect a new row to show up on top of the grid', () => { cy.get('.slick-editor-modal-title').contains('Clone - Task 8899'); cy.get('textarea').contains('Task 8899').type('Task 9999'); - cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete').as('range').invoke('val', 7).trigger('change', { force: true }); - cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete').as('range').invoke('val', 17).trigger('change', { force: true }); + cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete') + .as('range') + .invoke('val', 7) + .trigger('change', { force: true }); + cy.get('.item-details-editor-container .slider-editor-input.editor-percentComplete') + .as('range') + .invoke('val', 17) + .trigger('change', { force: true }); cy.get('.item-details-container.editor-percentComplete .modified').should('have.length', 1); cy.get('.item-details-editor-container .editor-checkbox').uncheck(); @@ -589,7 +703,9 @@ describe('Example 30 Composite Editor Modal', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).contains('TASK 9999', { matchCase: false }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '44 days'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '17'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 0); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`) + .find('.mdi.mdi-check.checkmark-icon') + .should('have.length', 0); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); @@ -598,7 +714,9 @@ describe('Example 30 Composite Editor Modal', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', '8899'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', '33 days'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`) + .find('.mdi.mdi-check.checkmark-icon') + .should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); @@ -616,29 +734,20 @@ describe('Example 30 Composite Editor Modal', () => { it('should open Edit Composite Editor from Cell Menu and expect Task 4 on 6th row', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 6}px;"] > .slick-cell:nth(11)`).click(); - cy.get('.slick-menu-item .slick-menu-content') - .first() - .should('contain', 'Edit Row') - .click(); + cy.get('.slick-menu-item .slick-menu-content').first().should('contain', 'Edit Row').click(); - cy.get('.slick-editor-modal-title') - .should('contain', 'Editing - Task 4'); + cy.get('.slick-editor-modal-title').should('contain', 'Editing - Task 4'); - cy.get('.slick-editor-modal-footer .btn-cancel') - .click(); + cy.get('.slick-editor-modal-footer .btn-cancel').click(); }); it('should open Clone Composite Editor from Cell Menu and expect Task 4 on 6th row', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 6}px;"] > .slick-cell:nth(11)`).click(); - cy.get('.slick-menu-item .slick-menu-content:nth(1)') - .should('contain', 'Clone Row') - .click(); + cy.get('.slick-menu-item .slick-menu-content:nth(1)').should('contain', 'Clone Row').click(); - cy.get('.slick-editor-modal-title') - .should('contain', 'Clone - Task 4'); + cy.get('.slick-editor-modal-title').should('contain', 'Clone - Task 4'); - cy.get('.slick-editor-modal-footer .btn-cancel') - .click(); + cy.get('.slick-editor-modal-footer .btn-cancel').click(); }); }); diff --git a/test/cypress/e2e/example31.cy.ts b/test/cypress/e2e/example31.cy.ts index 04b6d7b5f..f6099e8d4 100644 --- a/test/cypress/e2e/example31.cy.ts +++ b/test/cypress/e2e/example31.cy.ts @@ -63,8 +63,7 @@ describe('Example 31 - Columns Resize by Content', () => { it('should double-click on the "Complexity" column resize handle and expect the column to become wider and show all text', () => { cy.get('.slick-row').find('.slick-cell:nth(5)').invoke('width').should('be.lt', 80); - cy.get('.slick-header-column:nth-child(6) .slick-resizable-handle') - .dblclick(); + cy.get('.slick-header-column:nth-child(6) .slick-resizable-handle').dblclick(); cy.get('.slick-row').find('.slick-cell:nth(5)').invoke('width').should('be.gt', 95); }); @@ -109,11 +108,9 @@ describe('Example 31 - Columns Resize by Content', () => { const expectedRowIds = [11, 3, 4]; // go back to 1st page - cy.get('.icon-seek-prev') - .click(); + cy.get('.icon-seek-prev').click(); - cy.get('#filter-checkbox-selectall-container input[type=checkbox]') - .click({ force: true }); + cy.get('#filter-checkbox-selectall-container input[type=checkbox]').click({ force: true }); cy.window().then((win) => { expect(win.console.log).to.have.callCount(3); @@ -122,79 +119,57 @@ describe('Example 31 - Columns Resize by Content', () => { }); it('should go to the next 2 pages and expect all rows selected in each page', () => { - cy.get('.icon-seek-next') - .click(); + cy.get('.icon-seek-next').click(); - cy.get('.slick-cell-checkboxsel input:checked') - .should('have.length', 10); + cy.get('.slick-cell-checkboxsel input:checked').should('have.length', 10); - cy.get('.icon-seek-next') - .click(); + cy.get('.icon-seek-next').click(); - cy.get('.slick-cell-checkboxsel input:checked') - .should('have.length', 10); + cy.get('.slick-cell-checkboxsel input:checked').should('have.length', 10); }); it('should uncheck 1 row and expect current and next page to have "Select All" uncheck', () => { - cy.get('.slick-row:nth(0) .slick-cell:nth(0) input[type=checkbox]') - .click({ force: true }); + cy.get('.slick-row:nth(0) .slick-cell:nth(0) input[type=checkbox]').click({ force: true }); - cy.get('#filter-checkbox-selectall-container input[type=checkbox]') - .should('not.be.checked', true); + cy.get('#filter-checkbox-selectall-container input[type=checkbox]').should('not.be.checked', true); - cy.get('.icon-seek-next') - .click(); + cy.get('.icon-seek-next').click(); - cy.get('#filter-checkbox-selectall-container input[type=checkbox]') - .should('not.be.checked', true); + cy.get('#filter-checkbox-selectall-container input[type=checkbox]').should('not.be.checked', true); }); it('should go back to previous page, select the row that was unchecked and expect "Select All" to be selected again', () => { - cy.get('.icon-seek-prev') - .click(); + cy.get('.icon-seek-prev').click(); - cy.get('.slick-row:nth(0) .slick-cell:nth(0) input[type=checkbox]') - .click({ force: true }); + cy.get('.slick-row:nth(0) .slick-cell:nth(0) input[type=checkbox]').click({ force: true }); - cy.get('#filter-checkbox-selectall-container input[type=checkbox]') - .should('be.checked', true); + cy.get('#filter-checkbox-selectall-container input[type=checkbox]').should('be.checked', true); - cy.get('.icon-seek-next') - .click(); + cy.get('.icon-seek-next').click(); - cy.get('#filter-checkbox-selectall-container input[type=checkbox]') - .should('be.checked', true); + cy.get('#filter-checkbox-selectall-container input[type=checkbox]').should('be.checked', true); }); it('should Unselect All and expect all pages to no longer have any row selected', () => { - cy.get('#filter-checkbox-selectall-container input[type=checkbox]') - .click({ force: true }); + cy.get('#filter-checkbox-selectall-container input[type=checkbox]').click({ force: true }); - cy.get('.slick-cell-checkboxsel input:checked') - .should('have.length', 0); + cy.get('.slick-cell-checkboxsel input:checked').should('have.length', 0); - cy.get('.icon-seek-prev') - .click(); + cy.get('.icon-seek-prev').click(); - cy.get('.slick-cell-checkboxsel input:checked') - .should('have.length', 0); + cy.get('.slick-cell-checkboxsel input:checked').should('have.length', 0); - cy.get('.icon-seek-prev') - .click(); + cy.get('.icon-seek-prev').click(); - cy.get('.slick-cell-checkboxsel input:checked') - .should('have.length', 0); + cy.get('.slick-cell-checkboxsel input:checked').should('have.length', 0); }); }); describe('Filter Predicate on "Title" column that act similarly to an SQL LIKE matcher', () => { it('should return 4 rows using "%10" (ends with 10)', () => { - cy.get('.search-filter.filter-title') - .clear() - .type('%10'); + cy.get('.search-filter.filter-title').clear().type('%10'); - cy.get('[data-test="total-items"]') - .should('have.text', 4); + cy.get('[data-test="total-items"]').should('have.text', 4); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 10'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 110'); @@ -203,12 +178,9 @@ describe('Example 31 - Columns Resize by Content', () => { }); it('should return 4 rows using "%ask%20" (contains "ask" + ends with 20)', () => { - cy.get('.search-filter.filter-title') - .clear() - .type('%ask%20'); + cy.get('.search-filter.filter-title').clear().type('%ask%20'); - cy.get('[data-test="total-items"]') - .should('have.text', 4); + cy.get('[data-test="total-items"]').should('have.text', 4); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 20'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 120'); @@ -217,12 +189,9 @@ describe('Example 31 - Columns Resize by Content', () => { }); it('should return all 400 rows using "%ask%" (contains "ask")', () => { - cy.get('.search-filter.filter-title') - .clear() - .type('%ask%'); + cy.get('.search-filter.filter-title').clear().type('%ask%'); - cy.get('[data-test="total-items"]') - .should('have.text', 400); + cy.get('[data-test="total-items"]').should('have.text', 400); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 0'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 1'); @@ -231,12 +200,9 @@ describe('Example 31 - Columns Resize by Content', () => { }); it('should return 4 rows using "Ta%30" (starts with "Ta" + ends with 30)', () => { - cy.get('.search-filter.filter-title') - .clear() - .type('Ta%30'); + cy.get('.search-filter.filter-title').clear().type('Ta%30'); - cy.get('[data-test="total-items"]') - .should('have.text', 4); + cy.get('[data-test="total-items"]').should('have.text', 4); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 30'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 130'); @@ -245,12 +211,9 @@ describe('Example 31 - Columns Resize by Content', () => { }); it('should return 14 rows using "Ta%30%" (starts with "Ta" + ends with 30)', () => { - cy.get('.search-filter.filter-title') - .clear() - .type('Ta%30%'); + cy.get('.search-filter.filter-title').clear().type('Ta%30%'); - cy.get('[data-test="total-items"]') - .should('have.text', 14); + cy.get('[data-test="total-items"]').should('have.text', 14); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 30'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 130'); @@ -261,12 +224,9 @@ describe('Example 31 - Columns Resize by Content', () => { }); it('should return all 400 rows using "Ta%" (starts with "Ta")', () => { - cy.get('.search-filter.filter-title') - .clear() - .type('Ta%'); + cy.get('.search-filter.filter-title').clear().type('Ta%'); - cy.get('[data-test="total-items"]') - .should('have.text', 400); + cy.get('[data-test="total-items"]').should('have.text', 400); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 0'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 1'); @@ -275,12 +235,9 @@ describe('Example 31 - Columns Resize by Content', () => { }); it('should return 14 rows using "25" (contains 25)', () => { - cy.get('.search-filter.filter-title') - .clear() - .type('25'); + cy.get('.search-filter.filter-title').clear().type('25'); - cy.get('[data-test="total-items"]') - .should('have.text', 14); + cy.get('[data-test="total-items"]').should('have.text', 14); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 25'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('have.text', 'Task 125'); @@ -291,35 +248,25 @@ describe('Example 31 - Columns Resize by Content', () => { }); it('should not return any row when filtering Title with "%%"', () => { - cy.get('.search-filter.filter-title') - .clear() - .type('%%'); + cy.get('.search-filter.filter-title').clear().type('%%'); - cy.get('[data-test="total-items"]') - .should('have.text', '0'); + cy.get('[data-test="total-items"]').should('have.text', '0'); }); it('return all 400 rows when filtering Title as "%ask%"', () => { cy.get('.search-filter.filter-duration').clear(); - cy.get('.search-filter.filter-title') - .clear() - .type('%ask%'); + cy.get('.search-filter.filter-title').clear().type('%ask%'); - cy.get('[data-test="total-items"]') - .should('have.text', 400); + cy.get('[data-test="total-items"]').should('have.text', 400); }); it('return some rows (not all 400) when filtering Title as "%ask%" AND a Duration ">50" to test few filters still working', () => { cy.get('.search-filter.filter-title').clear(); - cy.get('.search-filter.filter-duration') - .clear() - .type('>50'); + cy.get('.search-filter.filter-duration').clear().type('>50'); - cy.get('[data-test="total-items"]') - .should('not.have.text', 0); + cy.get('[data-test="total-items"]').should('not.have.text', 0); - cy.get('[data-test="total-items"]') - .should('not.have.text', 400); + cy.get('[data-test="total-items"]').should('not.have.text', 400); }); }); }); diff --git a/test/cypress/e2e/example32.cy.ts b/test/cypress/e2e/example32.cy.ts index b068bd258..5914e37de 100644 --- a/test/cypress/e2e/example32.cy.ts +++ b/test/cypress/e2e/example32.cy.ts @@ -1,5 +1,18 @@ describe('Example 32 - Regular & Custom Tooltips', () => { - const titles = ['', 'Title', 'Duration', 'Description', 'Description 2', 'Cost', '% Complete', 'Start', 'Finish', 'Effort Driven', 'Prerequisites', 'Action']; + const titles = [ + '', + 'Title', + 'Duration', + 'Description', + 'Description 2', + 'Cost', + '% Complete', + 'Start', + 'Finish', + 'Effort Driven', + 'Prerequisites', + 'Action', + ]; const GRID_ROW_HEIGHT = 33; it('should display Example title', () => { @@ -98,8 +111,14 @@ describe('Example 32 - Regular & Custom Tooltips', () => { cy.get('@desc6-cell').trigger('mouseover'); cy.get('.slick-custom-tooltip').should('be.visible'); - cy.get('.slick-custom-tooltip').should('not.contain', `regular tooltip (from title attribute)\nTask 6 cell value:\n\nThis is a sample task description.\nIt can be multiline\n\nAnother line...`); - cy.get('.slick-custom-tooltip').should('contain', `This is a sample task description.\nIt can be multiline\n\nAnother line...`); + cy.get('.slick-custom-tooltip').should( + 'not.contain', + `regular tooltip (from title attribute)\nTask 6 cell value:\n\nThis is a sample task description.\nIt can be multiline\n\nAnother line...` + ); + cy.get('.slick-custom-tooltip').should( + 'contain', + `This is a sample task description.\nIt can be multiline\n\nAnother line...` + ); cy.get('@desc6-cell').trigger('mouseout'); }); @@ -110,7 +129,10 @@ describe('Example 32 - Regular & Custom Tooltips', () => { cy.get('@desc2-5-cell').trigger('mouseover'); cy.get('.slick-custom-tooltip').should('be.visible'); - cy.get('.slick-custom-tooltip').should('contain', `regular tooltip (from title attribute)\nTask 6 cell value:\n\nThis is a sample task description.\nIt can be multiline\n\nAnother line...`); + cy.get('.slick-custom-tooltip').should( + 'contain', + `regular tooltip (from title attribute)\nTask 6 cell value:\n\nThis is a sample task description.\nIt can be multiline\n\nAnother line...` + ); cy.get('@desc2-5-cell').trigger('mouseout'); }); @@ -195,7 +217,9 @@ describe('Example 32 - Regular & Custom Tooltips', () => { cy.get('.filter-prerequisites .ms-choice span').contains('15 of 500 selected'); cy.get('.slick-custom-tooltip').should('be.visible'); - cy.get('.slick-custom-tooltip').contains('Task 1, Task 3, Task 5, Task 7, Task 9, Task 12, Task 15, Task 18, Task 21, Task 25, Task 28, Task 29, Task 30, Task 32, Task 34'); + cy.get('.slick-custom-tooltip').contains( + 'Task 1, Task 3, Task 5, Task 7, Task 9, Task 12, Task 15, Task 18, Task 21, Task 25, Task 28, Task 29, Task 30, Task 32, Task 34' + ); cy.get('@checkbox10-header').trigger('mouseout'); }); @@ -231,27 +255,16 @@ describe('Example 32 - Regular & Custom Tooltips', () => { it('should click Prerequisite editor of 1st row (Task 2) and expect Task1 & 2 to be selected in the multiple-select drop', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).as('prereq-cell'); - cy.get('@prereq-cell') - .should('contain', 'Task 2, Task 1') - .click(); + cy.get('@prereq-cell').should('contain', 'Task 2, Task 1').click(); - cy.get('div.ms-drop[data-name=editor-prerequisites]') - .find('li.selected') - .should('have.length', 2); + cy.get('div.ms-drop[data-name=editor-prerequisites]').find('li.selected').should('have.length', 2); - cy.get('div.ms-drop[data-name=editor-prerequisites]') - .find('li.selected:nth(0) span') - .should('contain', 'Task 1'); + cy.get('div.ms-drop[data-name=editor-prerequisites]').find('li.selected:nth(0) span').should('contain', 'Task 1'); - cy.get('div.ms-drop[data-name=editor-prerequisites]') - .find('li.selected:nth(1) span') - .should('contain', 'Task 2'); + cy.get('div.ms-drop[data-name=editor-prerequisites]').find('li.selected:nth(1) span').should('contain', 'Task 2'); - cy.get('div.ms-drop[data-name=editor-prerequisites]') - .find('.ms-ok-button') - .click(); + cy.get('div.ms-drop[data-name=editor-prerequisites]').find('.ms-ok-button').click(); - cy.get('div.ms-drop[data-name=editor-prerequisites]') - .should('not.exist'); + cy.get('div.ms-drop[data-name=editor-prerequisites]').should('not.exist'); }); -}); \ No newline at end of file +}); diff --git a/test/cypress/e2e/example33.cy.ts b/test/cypress/e2e/example33.cy.ts index 0055f3aff..29513947f 100644 --- a/test/cypress/e2e/example33.cy.ts +++ b/test/cypress/e2e/example33.cy.ts @@ -1,5 +1,17 @@ describe('Example 33 - Real-Time Trading Platform', () => { - const titles = ['Currency', 'Symbol', 'Market', 'Company', 'Type', 'Change', 'Price', 'Quantity', 'Amount', 'Price History', 'Execution Timestamp']; + const titles = [ + 'Currency', + 'Symbol', + 'Market', + 'Company', + 'Type', + 'Change', + 'Price', + 'Quantity', + 'Amount', + 'Price History', + 'Execution Timestamp', + ]; const GRID_ROW_HEIGHT = 35; it('should display Example title', () => { @@ -45,19 +57,22 @@ describe('Example 33 - Real-Time Trading Platform', () => { }); it('should Group by 1st column "Currency" and expect 2 groups with Totals when collapsed', () => { - cy.get('.slick-header-column:nth(0)') - .contains('Currency') - .drag('.slick-dropzone', { force: true }); + cy.get('.slick-header-column:nth(0)').contains('Currency').drag('.slick-dropzone', { force: true }); - cy.get('.slick-group-toggle-all') - .click(); + cy.get('.slick-group-toggle-all').click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should( + 'have.length', + 1 + ); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Currency: CAD'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).contains(/\$[0-9,.]*/); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should( + 'have.length', + 1 + ); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Currency: USD'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(8)`).contains(/\$[0-9,.]*/); }); -}); \ No newline at end of file +}); diff --git a/test/cypress/e2e/example34.cy.ts b/test/cypress/e2e/example34.cy.ts index 9c4d0d225..eb1907905 100644 --- a/test/cypress/e2e/example34.cy.ts +++ b/test/cypress/e2e/example34.cy.ts @@ -14,19 +14,17 @@ describe('Example 34 - Custom header & footer', () => { }); it('should have a custom header', () => { - cy.get('#slickGridContainer-grid1') - .find('h3') - .should('contain', 'Grid with header and footer slot'); + cy.get('#slickGridContainer-grid1').find('h3').should('contain', 'Grid with header and footer slot'); }); it('should have a custom footer with a clickable button', () => { cy.get('#slickGridContainer-grid1') .find('custom-footer') .find('button') - .should('contain', 'I\'m a button from an Angular component (click me)') + .should('contain', "I'm a button from an Angular component (click me)") .click() .click() .siblings('div') - .should('contain', 'You\'ve clicked me 2 time(s)') + .should('contain', "You've clicked me 2 time(s)"); }); }); diff --git a/test/cypress/e2e/example35.cy.ts b/test/cypress/e2e/example35.cy.ts index 5e50ff00c..c359630de 100644 --- a/test/cypress/e2e/example35.cy.ts +++ b/test/cypress/e2e/example35.cy.ts @@ -55,7 +55,9 @@ describe('Example 35 - Row Based Editing', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .action-btns--edit`).click({ force: true }); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l0.r0`).click().type('abc{enter}'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l0.r0`) + .click() + .type('abc{enter}'); cy.get('.slick-cell').first().should('have.class', 'slick-rbe-unsaved-cell'); cy.get('[data-id="title"]').click(); cy.get('.slick-cell').first().should('not.have.class', 'slick-rbe-unsaved-cell'); @@ -68,8 +70,12 @@ describe('Example 35 - Row Based Editing', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .action-btns--edit`).click({ force: true }); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l1.r1`).click().type('50{enter}'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l2.r2`).click().type('50'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l1.r1`) + .click() + .type('50{enter}'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l2.r2`) + .click() + .type('50'); cy.get('.action-btns--update').first().click(); cy.on('window:confirm', () => true); @@ -85,13 +91,14 @@ describe('Example 35 - Row Based Editing', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .action-btns--edit`).click({ force: true }); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l1.r1`).click().type('30{enter}'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l1.r1`) + .click() + .type('30{enter}'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l2.r2`).type('30'); cy.get('.action-btns--update').first().click({ force: true }); - cy.get('[data-test="fetch-result"]') - .should('contain', 'success'); + cy.get('[data-test="fetch-result"]').should('contain', 'success'); cy.get('.slick-cell.l1.r1').first().should('contain', '30'); cy.get('.slick-cell.l2.r2').first().should('contain', '30'); @@ -108,7 +115,9 @@ describe('Example 35 - Row Based Editing', () => { it('should revert changes on cancel click', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .action-btns--edit`).click({ force: true }); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l1.r1`).click().type('50{enter}'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l1.r1`) + .click() + .type('50{enter}'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l2.r2`).type('50{enter}'); cy.get('.action-btns--cancel').first().click({ force: true }); @@ -166,4 +175,4 @@ describe('Example 35 - Row Based Editing', () => { cy.get('.slick-custom-tooltip .tooltip-body').contains('Mettre à jour la ligne actuelle'); cy.get('@update-btn').first().click({ force: true }); }); -}); \ No newline at end of file +}); diff --git a/test/cypress/e2e/example36.cy.ts b/test/cypress/e2e/example36.cy.ts index 0e6e65376..06a2e9185 100644 --- a/test/cypress/e2e/example36.cy.ts +++ b/test/cypress/e2e/example36.cy.ts @@ -40,39 +40,57 @@ describe('Example 36 - Excel Export Formula', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).contains('$4.55'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).contains('2'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).contains('$9.10'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).should('have.css', 'color').and('eq', 'rgb(33, 80, 115)'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`) + .should('have.css', 'color') + .and('eq', 'rgb(33, 80, 115)'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(5)`).find('.mdi-check'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(6)`).contains('$0.68'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(6)`).should('have.css', 'color').and('eq', 'rgb(198, 89, 17)'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(6)`) + .should('have.css', 'color') + .and('eq', 'rgb(198, 89, 17)'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).contains('$9.78'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).should('have.css', 'color').and('eq', 'rgb(0, 90, 158)'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`) + .should('have.css', 'color') + .and('eq', 'rgb(0, 90, 158)'); }); it('should change Price & Qty on first 3 rows and expect calculated values to be updated', () => { // 1st row cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).contains('1'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2) input`).clear().type('2.44{enter}'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2) input`) + .clear() + .type('2.44{enter}'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3) input`).clear().type('7{enter}'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3) input`) + .clear() + .type('7{enter}'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).contains('$17.08'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).contains('$17.08'); // 2nd row cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).contains('2'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2) input`).clear().type('1.4{enter}'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2) input`) + .clear() + .type('1.4{enter}'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3) input`).clear().type('3{enter}'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3) input`) + .clear() + .type('3{enter}'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(4)`).contains('$4.20'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).contains('$4.20'); // 3rd row cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).contains('3'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2) input`).clear().type('4.23{enter}'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2) input`) + .clear() + .type('4.23{enter}'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3) input`).clear().type('3{enter}'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3) input`) + .clear() + .type('3{enter}'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).contains('$12.69'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(6)`).contains('$0.95'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).contains('$13.64'); @@ -138,9 +156,13 @@ describe('Example 36 - Excel Export Formula', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0)`).contains('10'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(1)`).contains('Drinkable Yogurt'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(2)`).click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(2) input`).clear().type('1.96{enter}'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(2) input`) + .clear() + .type('1.96{enter}'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(3)`).click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(3) input`).clear().type('4{enter}'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(3) input`) + .clear() + .type('4{enter}'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(4)`).contains('$7.84'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(6)`).contains('$0.49'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(7)`).contains('$8.33'); @@ -149,9 +171,13 @@ describe('Example 36 - Excel Export Formula', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(0)`).contains('11'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(1)`).contains('Milk'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(2)`).click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(2) input`).clear().type('3.85{enter}'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(2) input`) + .clear() + .type('3.85{enter}'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(3)`).click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(3) input`).clear().type('2{enter}'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(3) input`) + .clear() + .type('2{enter}'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(4)`).contains('$7.70'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(6)`).contains('$0.48'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(7)`).contains('$8.18'); diff --git a/test/cypress/e2e/example37.cy.ts b/test/cypress/e2e/example37.cy.ts index 9245ae4d7..11a6ed6c2 100644 --- a/test/cypress/e2e/example37.cy.ts +++ b/test/cypress/e2e/example37.cy.ts @@ -16,15 +16,13 @@ describe('Example 37 - Footer Totals Row', () => { it('should have a total sum displayed in the footer for each column', () => { for (let i = 0; i < 10; i++) { - cy.get(`.slick-footerrow-columns .slick-footerrow-column:nth(${i})`) - .should($span => { - const totalStr = $span.text(); - const totalVal = Number(totalStr.replace('Sum: ', '')); - - expect(totalStr).to.contain('Sum:'); - expect(totalVal).to.gte(400); - }); + cy.get(`.slick-footerrow-columns .slick-footerrow-column:nth(${i})`).should(($span) => { + const totalStr = $span.text(); + const totalVal = Number(totalStr.replace('Sum: ', '')); + expect(totalStr).to.contain('Sum:'); + expect(totalVal).to.gte(400); + }); } }); @@ -33,25 +31,22 @@ describe('Example 37 - Footer Totals Row', () => { let totalVal = 0; const increasingVal = 50; - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`) - .should($span => { - cellVal = Number($span.text()); - expect(cellVal).to.gte(0); - }); - cy.get('.slick-footerrow-columns .slick-footerrow-column:nth(0)') - .should($span => { - totalVal = parseInt($span.text().replace('Sum: ', '')); - expect(totalVal).to.gte(400); - }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should(($span) => { + cellVal = Number($span.text()); + expect(cellVal).to.gte(0); + }); + cy.get('.slick-footerrow-columns .slick-footerrow-column:nth(0)').should(($span) => { + totalVal = parseInt($span.text().replace('Sum: ', '')); + expect(totalVal).to.gte(400); + }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).click(); cy.get('.editor-0').type(`${increasingVal}{enter}`); cy.wait(1); - cy.get('.slick-footerrow-columns .slick-footerrow-column:nth(0)') - .should($span => { - const newTotalVal = parseInt($span.text().replace('Sum: ', '')); - expect(newTotalVal).to.eq(totalVal - cellVal + increasingVal); - }); + cy.get('.slick-footerrow-columns .slick-footerrow-column:nth(0)').should(($span) => { + const newTotalVal = parseInt($span.text().replace('Sum: ', '')); + expect(newTotalVal).to.eq(totalVal - cellVal + increasingVal); + }); }); }); diff --git a/test/cypress/e2e/example38.cy.ts b/test/cypress/e2e/example38.cy.ts index bd9a3d7f7..0ef2f3f51 100644 --- a/test/cypress/e2e/example38.cy.ts +++ b/test/cypress/e2e/example38.cy.ts @@ -12,192 +12,146 @@ describe('Example 38 - Infinite Scroll with OData', () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$count=true&$top=30`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30`); + }); }); it('should scroll to bottom of the grid and expect next batch of 30 items appended to current dataset for a total of 60 items', () => { - cy.get('[data-test="itemCount"]') - .should('have.text', '30'); + cy.get('[data-test="itemCount"]').should('have.text', '30'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('bottom'); - cy.get('[data-test="itemCount"]') - .should('have.text', '60'); + cy.get('[data-test="itemCount"]').should('have.text', '60'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$count=true&$top=30&$skip=30`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30&$skip=30`); + }); }); it('should scroll to bottom of the grid and expect next batch of 30 items appended to current dataset for a new total of 90 items', () => { - cy.get('[data-test="itemCount"]') - .should('have.text', '60'); + cy.get('[data-test="itemCount"]').should('have.text', '60'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('bottom'); - cy.get('[data-test="itemCount"]') - .should('have.text', '90'); + cy.get('[data-test="itemCount"]').should('have.text', '90'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$count=true&$top=30&$skip=60`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30&$skip=60`); + }); }); it('should do one last scroll to reach the end of the data and have a full total of 100 items', () => { - cy.get('[data-test="itemCount"]') - .should('have.text', '90'); + cy.get('[data-test="itemCount"]').should('have.text', '90'); - cy.get('[data-test="data-loaded-tag"]') - .should('be.hidden'); + cy.get('[data-test="data-loaded-tag"]').should('be.hidden'); - cy.get('[data-test="data-loaded-tag"]') - .should('not.have.class', 'fully-loaded'); + cy.get('[data-test="data-loaded-tag"]').should('not.have.class', 'fully-loaded'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('bottom'); - cy.get('[data-test="itemCount"]') - .should('have.text', '100'); + cy.get('[data-test="itemCount"]').should('have.text', '100'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$count=true&$top=30&$skip=90`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30&$skip=90`); + }); - cy.get('[data-test="data-loaded-tag"]') - .should('be.visible'); + cy.get('[data-test="data-loaded-tag"]').should('be.visible'); - cy.get('[data-test="data-loaded-tag"]') - .should('have.class', 'fully-loaded'); + cy.get('[data-test="data-loaded-tag"]').should('have.class', 'fully-loaded'); }); it('should sort by Name column and expect dataset to restart at index zero and have a total of 30 items', () => { - cy.get('[data-test="data-loaded-tag"]') - .should('have.class', 'fully-loaded'); + cy.get('[data-test="data-loaded-tag"]').should('have.class', 'fully-loaded'); - cy.get('[data-id="name"]') - .click(); + cy.get('[data-id="name"]').click(); - cy.get('[data-test="itemCount"]') - .should('have.text', '30'); + cy.get('[data-test="itemCount"]').should('have.text', '30'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$count=true&$top=30&$orderby=Name asc`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30&$orderby=Name asc`); + }); - cy.get('[data-test="data-loaded-tag"]') - .should('not.have.class', 'fully-loaded'); + cy.get('[data-test="data-loaded-tag"]').should('not.have.class', 'fully-loaded'); }); it('should scroll to bottom again and expect next batch of 30 items appended to current dataset for a total of 60 items', () => { - cy.get('[data-test="itemCount"]') - .should('have.text', '30'); + cy.get('[data-test="itemCount"]').should('have.text', '30'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('bottom'); - cy.get('[data-test="itemCount"]') - .should('have.text', '60'); + cy.get('[data-test="itemCount"]').should('have.text', '60'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$count=true&$top=30&$skip=30&$orderby=Name asc`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30&$skip=30&$orderby=Name asc`); + }); - cy.get('[data-test="data-loaded-tag"]') - .should('not.have.class', 'fully-loaded'); + cy.get('[data-test="data-loaded-tag"]').should('not.have.class', 'fully-loaded'); }); it('should change Gender filter to "female" and expect dataset to restart at index zero and have a total of 30 items', () => { cy.get('.ms-filter.filter-gender:visible').click(); - cy.get('[data-name="filter-gender"].ms-drop') - .find('li:visible:nth(2)') - .contains('female') - .click(); + cy.get('[data-name="filter-gender"].ms-drop').find('li:visible:nth(2)').contains('female').click(); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$count=true&$top=30&$orderby=Name asc&$filter=(Gender eq 'female')`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30&$orderby=Name asc&$filter=(Gender eq 'female')`); + }); - cy.get('[data-test="data-loaded-tag"]') - .should('not.have.class', 'fully-loaded'); + cy.get('[data-test="data-loaded-tag"]').should('not.have.class', 'fully-loaded'); }); it('should scroll to bottom again and expect next batch to be only 20 females appended to current dataset for a total of 50 items found in DB', () => { - cy.get('[data-test="itemCount"]') - .should('have.text', '30'); + cy.get('[data-test="itemCount"]').should('have.text', '30'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('bottom'); - cy.get('[data-test="itemCount"]') - .should('have.text', '50'); + cy.get('[data-test="itemCount"]').should('have.text', '50'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$count=true&$top=30&$skip=30&$orderby=Name asc&$filter=(Gender eq 'female')`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30&$skip=30&$orderby=Name asc&$filter=(Gender eq 'female')`); + }); }); it('should "Group by Gender" and expect 30 items grouped', () => { cy.get('[data-test="clear-filters-sorting"]').click(); cy.get('[data-test="group-by-gender"]').click(); - cy.get('[data-test="itemCount"]') - .should('have.text', '30'); + cy.get('[data-test="itemCount"]').should('have.text', '30'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('top'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('top'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$count=true&$top=30`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30`); + }); cy.get(`[style="top: 0px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); cy.get(`[style="top: 0px;"] > .slick-cell:nth(0) .slick-group-title`).contains(/Gender: [female|male]/); }); it('should scroll to the bottom "Group by Gender" and expect 30 more items for a total of 60 items grouped', () => { - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('bottom'); - cy.get('[data-test="itemCount"]') - .should('have.text', '60'); + cy.get('[data-test="itemCount"]').should('have.text', '60'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('top'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('top'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$count=true&$top=30&$skip=30`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30&$skip=30`); + }); cy.get(`[style="top: 0px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); cy.get(`[style="top: 0px;"] > .slick-cell:nth(0) .slick-group-title`).contains(/Gender: [female|male]/); }); it('should sort by Name column again and expect dataset to restart at index zero and have a total of 30 items still having Group Gender', () => { - cy.get('[data-id="name"]') - .click(); + cy.get('[data-id="name"]').click(); - cy.get('[data-test="itemCount"]') - .should('have.text', '30'); + cy.get('[data-test="itemCount"]').should('have.text', '30'); - cy.get('[data-test=odata-query-result]') - .should(($span) => { - expect($span.text()).to.eq(`$count=true&$top=30&$orderby=Name asc`); - }); + cy.get('[data-test=odata-query-result]').should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30&$orderby=Name asc`); + }); cy.get(`[style="top: 0px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); cy.get(`[style="top: 0px;"] > .slick-cell:nth(0) .slick-group-title`).contains(/Gender: [female|male]/); diff --git a/test/cypress/e2e/example39.cy.ts b/test/cypress/e2e/example39.cy.ts index 736d364ea..d6f980be5 100644 --- a/test/cypress/e2e/example39.cy.ts +++ b/test/cypress/e2e/example39.cy.ts @@ -7,9 +7,7 @@ describe('Example 39 - Infinite Scroll with GraphQL', () => { }); it('should use fake smaller server wait delay for faster E2E tests', () => { - cy.get('[data-test="server-delay"]') - .clear() - .type('20'); + cy.get('[data-test="server-delay"]').clear().type('20'); }); it('should have default GraphQL query', () => { @@ -19,154 +17,142 @@ describe('Example 39 - Infinite Scroll with GraphQL', () => { // wait for the query to finish cy.get('[data-test=status]').should('contain', 'finished'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query { users (first:30,offset:0,locale:"en",userId:123) { totalCount, nodes { id,name,gender,company } } }`)); - }); + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces( + `query { users (first:30,offset:0,locale:"en",userId:123) { totalCount, nodes { id,name,gender,company } } }` + ) + ); + }); }); it('should scroll to bottom of the grid and expect next batch of 30 items appended to current dataset for a total of 60 items', () => { - cy.get('[data-test="itemCount"]') - .should('have.text', '30'); + cy.get('[data-test="itemCount"]').should('have.text', '30'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('bottom'); - cy.get('[data-test="itemCount"]') - .should('have.text', '60'); + cy.get('[data-test="itemCount"]').should('have.text', '60'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query { users (first:30,offset:30,locale:"en",userId:123) { totalCount, nodes { id,name,gender,company } } }`)); - }); + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces( + `query { users (first:30,offset:30,locale:"en",userId:123) { totalCount, nodes { id,name,gender,company } } }` + ) + ); + }); }); it('should scroll to bottom of the grid and expect next batch of 30 items appended to current dataset for a new total of 90 items', () => { - cy.get('[data-test="itemCount"]') - .should('have.text', '60'); + cy.get('[data-test="itemCount"]').should('have.text', '60'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('bottom'); - cy.get('[data-test="itemCount"]') - .should('have.text', '90'); + cy.get('[data-test="itemCount"]').should('have.text', '90'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query { users (first:30,offset:60,locale:"en",userId:123) { totalCount, nodes { id,name,gender,company } } }`)); - }); + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces( + `query { users (first:30,offset:60,locale:"en",userId:123) { totalCount, nodes { id,name,gender,company } } }` + ) + ); + }); }); it('should do one last scroll to reach the end of the data and have a full total of 100 items', () => { - cy.get('[data-test="itemCount"]') - .should('have.text', '90'); + cy.get('[data-test="itemCount"]').should('have.text', '90'); - cy.get('[data-test="data-loaded-tag"]') - .should('be.hidden'); + cy.get('[data-test="data-loaded-tag"]').should('be.hidden'); - cy.get('[data-test="data-loaded-tag"]') - .should('not.have.class', 'fully-loaded'); + cy.get('[data-test="data-loaded-tag"]').should('not.have.class', 'fully-loaded'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('bottom'); - cy.get('[data-test="itemCount"]') - .should('have.text', '100'); + cy.get('[data-test="itemCount"]').should('have.text', '100'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query { users (first:30,offset:90,locale:"en",userId:123) { totalCount, nodes { id,name,gender,company } } }`)); - }); + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces( + `query { users (first:30,offset:90,locale:"en",userId:123) { totalCount, nodes { id,name,gender,company } } }` + ) + ); + }); - cy.get('[data-test="data-loaded-tag"]') - .should('be.visible'); + cy.get('[data-test="data-loaded-tag"]').should('be.visible'); - cy.get('[data-test="data-loaded-tag"]') - .should('have.class', 'fully-loaded'); + cy.get('[data-test="data-loaded-tag"]').should('have.class', 'fully-loaded'); }); it('should sort by Name column and expect dataset to restart at index zero and have a total of 30 items', () => { - cy.get('[data-test="data-loaded-tag"]') - .should('have.class', 'fully-loaded'); + cy.get('[data-test="data-loaded-tag"]').should('have.class', 'fully-loaded'); - cy.get('[data-id="name"]') - .click(); + cy.get('[data-id="name"]').click(); - cy.get('[data-test="itemCount"]') - .should('have.text', '30'); + cy.get('[data-test="itemCount"]').should('have.text', '30'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query { users (first:30,offset:0,orderBy:[{field:name,direction:ASC}],locale:"en",userId:123) { - totalCount, nodes { id,name,gender,company } } }`)); - }); + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query { users (first:30,offset:0,orderBy:[{field:name,direction:ASC}],locale:"en",userId:123) { + totalCount, nodes { id,name,gender,company } } }`) + ); + }); - cy.get('[data-test="data-loaded-tag"]') - .should('not.have.class', 'fully-loaded'); + cy.get('[data-test="data-loaded-tag"]').should('not.have.class', 'fully-loaded'); }); it('should scroll to bottom again and expect next batch of 30 items appended to current dataset for a total of 60 items', () => { - cy.get('[data-test="itemCount"]') - .should('have.text', '30'); + cy.get('[data-test="itemCount"]').should('have.text', '30'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('bottom'); - cy.get('[data-test="itemCount"]') - .should('have.text', '60'); + cy.get('[data-test="itemCount"]').should('have.text', '60'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query { users (first:30,offset:30,orderBy:[{field:name,direction:ASC}],locale:"en",userId:123) { - totalCount, nodes { id,name,gender,company } } }`)); - }); + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query { users (first:30,offset:30,orderBy:[{field:name,direction:ASC}],locale:"en",userId:123) { + totalCount, nodes { id,name,gender,company } } }`) + ); + }); - cy.get('[data-test="data-loaded-tag"]') - .should('not.have.class', 'fully-loaded'); + cy.get('[data-test="data-loaded-tag"]').should('not.have.class', 'fully-loaded'); }); it('should change Gender filter to "female" and expect dataset to restart at index zero and have a total of 30 items', () => { cy.get('.ms-filter.filter-gender:visible').click(); - cy.get('[data-name="filter-gender"].ms-drop') - .find('li:visible:nth(2)') - .contains('Female') - .click(); + cy.get('[data-name="filter-gender"].ms-drop').find('li:visible:nth(2)').contains('Female').click(); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query { users (first:30,offset:0, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query { users (first:30,offset:0, orderBy:[{field:name,direction:ASC}], - filterBy:[{field:gender,operator:EQ,value:"female"}],locale:"en",userId:123) { totalCount, nodes { id,name,gender,company } } }`)); - }); + filterBy:[{field:gender,operator:EQ,value:"female"}],locale:"en",userId:123) { totalCount, nodes { id,name,gender,company } } }`) + ); + }); - cy.get('[data-test="data-loaded-tag"]') - .should('not.have.class', 'fully-loaded'); + cy.get('[data-test="data-loaded-tag"]').should('not.have.class', 'fully-loaded'); }); it('should scroll to bottom again and expect next batch to be only 20 females appended to current dataset for a total of 50 items found in DB', () => { - cy.get('[data-test="itemCount"]') - .should('have.text', '30'); + cy.get('[data-test="itemCount"]').should('have.text', '30'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('bottom'); - cy.get('[data-test="itemCount"]') - .should('have.text', '50'); + cy.get('[data-test="itemCount"]').should('have.text', '50'); - cy.get('[data-test=graphql-query-result]') - .should(($span) => { - const text = removeWhitespaces($span.text()); // remove all white spaces - expect(text).to.eq(removeWhitespaces(`query { users (first:30,offset:30, + cy.get('[data-test=graphql-query-result]').should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq( + removeWhitespaces(`query { users (first:30,offset:30, orderBy:[{field:name,direction:ASC}], - filterBy:[{field:gender,operator:EQ,value:"female"}],locale:"en",userId:123) { totalCount, nodes { id,name,gender,company } } }`)); - }); + filterBy:[{field:gender,operator:EQ,value:"female"}],locale:"en",userId:123) { totalCount, nodes { id,name,gender,company } } }`) + ); + }); }); }); diff --git a/test/cypress/e2e/example40.cy.ts b/test/cypress/e2e/example40.cy.ts index 829412dda..72e1965b4 100644 --- a/test/cypress/e2e/example40.cy.ts +++ b/test/cypress/e2e/example40.cy.ts @@ -20,42 +20,35 @@ describe('Example 40 - Infinite Scroll from JSON data', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).contains(/[0-9]/); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).contains(/20[0-9]{2}-[0-9]{2}-[0-9]{2}/); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).contains(/20[0-9]{2}-[0-9]{2}-[0-9]{2}/); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).find('.mdi.mdi-check').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`) + .find('.mdi.mdi-check') + .should('have.length', 1); }); it('should scroll to bottom of the grid and expect next batch of 50 items appended to current dataset for a total of 100 items', () => { - cy.get('[data-test="totalItemCount"]') - .should('have.text', '50'); + cy.get('[data-test="totalItemCount"]').should('have.text', '50'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('bottom'); - cy.get('[data-test="totalItemCount"]') - .should('have.text', '100'); + cy.get('[data-test="totalItemCount"]').should('have.text', '100'); }); it('should scroll to bottom of the grid again and expect 50 more items for a total of now 150 items', () => { - cy.get('[data-test="totalItemCount"]') - .should('have.text', '100'); + cy.get('[data-test="totalItemCount"]').should('have.text', '100'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('bottom'); - cy.get('[data-test="totalItemCount"]') - .should('have.text', '150'); + cy.get('[data-test="totalItemCount"]').should('have.text', '150'); }); it('should disable onSort for data reset and expect same dataset length of 150 items after sorting by Title', () => { cy.get('[data-test="onsort-off"]').click(); - cy.get('[data-id="title"]') - .click(); + cy.get('[data-id="title"]').click(); - cy.get('[data-test="totalItemCount"]') - .should('have.text', '150'); + cy.get('[data-test="totalItemCount"]').should('have.text', '150'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('top'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('top'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 0'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 1'); @@ -66,14 +59,11 @@ describe('Example 40 - Infinite Scroll from JSON data', () => { it('should enable onSort for data reset and expect dataset to be reset to 50 items after sorting by Title', () => { cy.get('[data-test="onsort-on"]').click(); - cy.get('[data-id="title"]') - .click(); + cy.get('[data-id="title"]').click(); - cy.get('[data-test="totalItemCount"]') - .should('have.text', '50'); + cy.get('[data-test="totalItemCount"]').should('have.text', '50'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('top'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('top'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 9'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 8'); @@ -84,25 +74,20 @@ describe('Example 40 - Infinite Scroll from JSON data', () => { it('should "Group by Duration" and expect 50 items grouped', () => { cy.get('[data-test="group-by-duration"]').click(); - cy.get('[data-test="totalItemCount"]') - .should('have.text', '50'); + cy.get('[data-test="totalItemCount"]').should('have.text', '50'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('top'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('top'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).contains(/Duration: [0-9]/); }); it('should scroll to the bottom "Group by Duration" and expect 50 more items for a total of 100 items grouped', () => { - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('bottom'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('bottom'); - cy.get('[data-test="totalItemCount"]') - .should('have.text', '100'); + cy.get('[data-test="totalItemCount"]').should('have.text', '100'); - cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') - .scrollTo('top'); + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('top'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).contains(/Duration: [0-9]/); diff --git a/test/cypress/e2e/example41.cy.ts b/test/cypress/e2e/example41.cy.ts index 283f51603..03927e956 100644 --- a/test/cypress/e2e/example41.cy.ts +++ b/test/cypress/e2e/example41.cy.ts @@ -15,7 +15,9 @@ describe('Example 41 - Drag & Drop', () => { it('should expect first row to include "Task 0" and other specific properties', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Make a list'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).find('.mdi.mdi-check').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`) + .find('.mdi.mdi-check') + .should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Check it twice'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', `Find out who's naughty`); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', `Find out who's nice`); @@ -27,13 +29,9 @@ describe('Example 41 - Drag & Drop', () => { cy.get('@moveIconTask2').should('have.length', 1); - cy.get('@moveIconTask2') - .trigger('mousedown', { which: 1, force: true }) - .trigger('mousemove', 'bottomRight'); + cy.get('@moveIconTask2').trigger('mousedown', { which: 1, force: true }).trigger('mousemove', 'bottomRight'); - cy.get('@moveIconTask1') - .trigger('mousemove', 'bottomRight') - .trigger('mouseup', 'bottomRight', { which: 1, force: true }); + cy.get('@moveIconTask1').trigger('mousemove', 'bottomRight').trigger('mouseup', 'bottomRight', { which: 1, force: true }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Make a list'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', `Find out who's naughty`); @@ -48,8 +46,7 @@ describe('Example 41 - Drag & Drop', () => { .trigger('mousemove', 'bottomRight'); cy.get('.recycle-bin.drag-dropzone').should('have.length', 1); - cy.get('.drag-message') - .contains('Drag to Recycle Bin to delete 1 selected row(s)'); + cy.get('.drag-message').contains('Drag to Recycle Bin to delete 1 selected row(s)'); cy.get('#dropzone').trigger('mousemove', 'center'); cy.get('.recycle-bin.drag-hover').should('have.length', 1); @@ -78,8 +75,7 @@ describe('Example 41 - Drag & Drop', () => { .trigger('mousemove', 'bottomRight'); cy.get('.recycle-bin.drag-dropzone').should('have.length', 1); - cy.get('.drag-message') - .contains('Drag to Recycle Bin to delete 2 selected row(s)'); + cy.get('.drag-message').contains('Drag to Recycle Bin to delete 2 selected row(s)'); cy.get('#dropzone').trigger('mousemove', 'center'); diff --git a/test/cypress/e2e/example43.cy.ts b/test/cypress/e2e/example43.cy.ts index 37c7d01c3..30885dd5f 100644 --- a/test/cypress/e2e/example43.cy.ts +++ b/test/cypress/e2e/example43.cy.ts @@ -8,8 +8,7 @@ describe('Example 43 - Dynamically Create Grid from CSV / Excel import', () => { }); it('should load default CSV file and expect default column titles', () => { - cy.get('[data-test="static-data-btn"]') - .click(); + cy.get('[data-test="static-data-btn"]').click(); cy.get('.slick-header-columns') .children() @@ -34,8 +33,7 @@ describe('Example 43 - Dynamically Create Grid from CSV / Excel import', () => { }); it('should sort by "Age" and expect it to be sorted in ascending order', () => { - cy.get('.slick-header-columns .slick-header-column:nth(2)') - .click(); + cy.get('.slick-header-columns .slick-header-column:nth(2)').click(); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'John'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Doe'); @@ -54,8 +52,7 @@ describe('Example 43 - Dynamically Create Grid from CSV / Excel import', () => { }); it('should click again the "Age" column and expect it to be sorted in descending order', () => { - cy.get('.slick-header-columns .slick-header-column:nth(2)') - .click(); + cy.get('.slick-header-columns .slick-header-column:nth(2)').click(); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Bob'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Smith'); @@ -74,11 +71,9 @@ describe('Example 43 - Dynamically Create Grid from CSV / Excel import', () => { }); it('should filter Smith as "Last Name" and expect only 1 row in the grid', () => { - cy.get('.slick-headerrow .slick-headerrow-column:nth(1) input') - .type('Smith'); + cy.get('.slick-headerrow .slick-headerrow-column:nth(1) input').type('Smith'); - cy.get('.slick-row') - .should('have.length', 1); + cy.get('.slick-row').should('have.length', 1); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Bob'); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Smith'); diff --git a/test/cypress/e2e/home.cy.ts b/test/cypress/e2e/home.cy.ts index 6eea157e6..0695ea26f 100644 --- a/test/cypress/e2e/home.cy.ts +++ b/test/cypress/e2e/home.cy.ts @@ -6,7 +6,6 @@ describe('Home Page', () => { expect($h2, 'text content').to.have.text('Angular-Slickgrid - Demo Site'); }); - cy.get('.subtitle') - .contains('This site is to demo multiple usage of Angular-Slickgrid'); + cy.get('.subtitle').contains('This site is to demo multiple usage of Angular-Slickgrid'); }); }); diff --git a/test/cypress/plugins/index.ts b/test/cypress/plugins/index.ts index d2e05c3d4..e055ed171 100644 --- a/test/cypress/plugins/index.ts +++ b/test/cypress/plugins/index.ts @@ -14,4 +14,4 @@ export default (_on: any, _config: any) => { // `on` is used to hook into various events Cypress emits // `config` is the resolved Cypress config -} +}; diff --git a/test/cypress/plugins/utilities.ts b/test/cypress/plugins/utilities.ts index fcf6ea31e..4533a1511 100644 --- a/test/cypress/plugins/utilities.ts +++ b/test/cypress/plugins/utilities.ts @@ -1,8 +1,10 @@ export function changeTimezone(date: Date, tz: string) { // suppose the date is 12:00 UTC - const invdate = new Date(date.toLocaleString('en-US', { - timeZone: tz - })); + const invdate = new Date( + date.toLocaleString('en-US', { + timeZone: tz, + }) + ); // then invdate will be 07:00 in Toronto // and the diff is 5 hours @@ -23,4 +25,4 @@ export function removeWhitespaces(text: string) { export function zeroPadding(input: string | number) { const number = parseInt(input as string, 10); return number < 10 ? `0${number}` : number; -} \ No newline at end of file +} diff --git a/test/cypress/support/commands.ts b/test/cypress/support/commands.ts index 1d6edb468..791e44886 100644 --- a/test/cypress/support/commands.ts +++ b/test/cypress/support/commands.ts @@ -31,9 +31,19 @@ declare global { namespace Cypress { interface Chainable { // triggerHover: (elements: NodeListOf) => void; - convertPosition(viewport: string): Chainable | { x: string; y: string; }>; - getCell(row: number, col: number, viewport?: string, options?: { parentSelector?: string, rowHeight?: number; }): Chainable>; - getNthCell(row: number, nthCol: number, viewport?: string, options?: { parentSelector?: string, rowHeight?: number; }): Chainable>; + convertPosition(viewport: string): Chainable | { x: string; y: string }>; + getCell( + row: number, + col: number, + viewport?: string, + options?: { parentSelector?: string; rowHeight?: number } + ): Chainable>; + getNthCell( + row: number, + nthCol: number, + viewport?: string, + options?: { parentSelector?: string; rowHeight?: number } + ): Chainable>; saveLocalStorage: () => void; restoreLocalStorage: () => void; } @@ -43,13 +53,13 @@ declare global { const LOCAL_STORAGE_MEMORY: any = {}; Cypress.Commands.add('saveLocalStorage', () => { - Object.keys(localStorage).forEach(key => { + Object.keys(localStorage).forEach((key) => { LOCAL_STORAGE_MEMORY[key] = localStorage[key]; }); }); Cypress.Commands.add('restoreLocalStorage', () => { - Object.keys(LOCAL_STORAGE_MEMORY).forEach(key => { + Object.keys(LOCAL_STORAGE_MEMORY).forEach((key) => { localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]); }); }); @@ -62,7 +72,9 @@ Cypress.Commands.add('getCell', (row, col, viewport = 'topLeft', { parentSelecto const canvasSelectorX = position.x ? `.grid-canvas-${position.x}` : ''; const canvasSelectorY = position.y ? `.grid-canvas-${position.y}` : ''; - return cy.get(`${parentSelector} ${canvasSelectorX}${canvasSelectorY} [style="top: ${row * rowHeight}px;"] > .slick-cell.l${col}.r${col}`); + return cy.get( + `${parentSelector} ${canvasSelectorX}${canvasSelectorY} [style="top: ${row * rowHeight}px;"] > .slick-cell.l${col}.r${col}` + ); }); Cypress.Commands.add('getNthCell', (row, nthCol, viewport = 'topLeft', { parentSelector = '', rowHeight = 35 } = {}) => { @@ -70,5 +82,7 @@ Cypress.Commands.add('getNthCell', (row, nthCol, viewport = 'topLeft', { parentS const canvasSelectorX = position.x ? `.grid-canvas-${position.x}` : ''; const canvasSelectorY = position.y ? `.grid-canvas-${position.y}` : ''; - return cy.get(`${parentSelector} ${canvasSelectorX}${canvasSelectorY} [style="top: ${row * rowHeight}px;"] > .slick-cell:nth(${nthCol})`); -}); \ No newline at end of file + return cy.get( + `${parentSelector} ${canvasSelectorX}${canvasSelectorY} [style="top: ${row * rowHeight}px;"] > .slick-cell:nth(${nthCol})` + ); +}); diff --git a/test/cypress/support/common.ts b/test/cypress/support/common.ts index 51dd73539..fcef9d4e4 100644 --- a/test/cypress/support/common.ts +++ b/test/cypress/support/common.ts @@ -20,8 +20,8 @@ const POSITION = Object.freeze({ TOP: 'top', BOTTOM: 'bottom', LEFT: 'left', - RIGHT: 'right' -}) + RIGHT: 'right', +}); /** * Convert position string to object @@ -44,4 +44,4 @@ export function convertPosition(position: string) { y = POSITION.BOTTOM; } return { x, y }; -} \ No newline at end of file +} diff --git a/test/cypress/support/drag.ts b/test/cypress/support/drag.ts index ca28e66da..52bc327b3 100644 --- a/test/cypress/support/drag.ts +++ b/test/cypress/support/drag.ts @@ -5,16 +5,22 @@ declare global { namespace Cypress { interface Chainable { // triggerHover: (elements: NodeListOf) => void; - dragOutside(viewport?: string, ms?: number, px?: number, options?: { parentSelector?: string, scrollbarDimension?: number; rowHeight?: number; }): Chainable; - dragStart(options?: { cellWidth?: number; cellHeight?: number; }): Chainable; - dragCell(addRow: number, addCell: number, options?: { cellWidth?: number; cellHeight?: number; }): Chainable; + dragOutside( + viewport?: string, + ms?: number, + px?: number, + options?: { parentSelector?: string; scrollbarDimension?: number; rowHeight?: number } + ): Chainable; + dragStart(options?: { cellWidth?: number; cellHeight?: number }): Chainable; + dragCell(addRow: number, addCell: number, options?: { cellWidth?: number; cellHeight?: number }): Chainable; dragEnd(gridSelector?: string): Chainable; } } } // @ts-ignore Cypress.Commands.add('dragStart', { prevSubject: true }, (subject: HTMLElement, { cellWidth = 90, cellHeight = 35 } = {}) => { - return cy.wrap(subject) + return cy + .wrap(subject) .click({ force: true }) .trigger('mousedown', { which: 1 } as any, { force: true }) .trigger('mousemove', cellWidth / 3, cellHeight / 3); @@ -22,50 +28,63 @@ Cypress.Commands.add('dragStart', { prevSubject: true }, (subject: HTMLElement, // use a different command name than 'drag' so that it doesn't conflict with the '@4tw/cypress-drag-drop' lib // @ts-ignore -Cypress.Commands.add('dragCell', { prevSubject: true }, (subject: HTMLElement, addRow: number, addCell: number, { cellWidth = 90, cellHeight = 35 } = {}) => { - return cy.wrap(subject).trigger('mousemove', cellWidth * (addCell + 0.5), cellHeight * (addRow + 0.5), { force: true }); -}); - -Cypress.Commands.add('dragOutside', (viewport = 'topLeft', ms = 0, px = 0, { parentSelector = 'div[class^="slickgrid_"]', scrollbarDimension = 17 } = {}) => { - const $parent = cy.$$(parentSelector); - const gridWidth = $parent.width() as number; - const gridHeight = $parent.height() as number; - let x = gridWidth / 2; - let y = gridHeight / 2; - const position = convertPosition(viewport); - if (position.x === 'left') { - x = -px; - } else if (position.x === 'right') { - x = gridWidth - scrollbarDimension + 3 + px; - } - if (position.y === 'top') { - y = -px; - } else if (position.y === 'bottom') { - y = gridHeight - scrollbarDimension + 3 + px; +Cypress.Commands.add( + 'dragCell', + { prevSubject: true }, + (subject: HTMLElement, addRow: number, addCell: number, { cellWidth = 90, cellHeight = 35 } = {}) => { + return cy.wrap(subject).trigger('mousemove', cellWidth * (addCell + 0.5), cellHeight * (addRow + 0.5), { force: true }); } +); - cy.get(parentSelector).trigger('mousemove', x, y, { force: true }); - if (ms) { - cy.wait(ms); +Cypress.Commands.add( + 'dragOutside', + (viewport = 'topLeft', ms = 0, px = 0, { parentSelector = 'div[class^="slickgrid_"]', scrollbarDimension = 17 } = {}) => { + const $parent = cy.$$(parentSelector); + const gridWidth = $parent.width() as number; + const gridHeight = $parent.height() as number; + let x = gridWidth / 2; + let y = gridHeight / 2; + const position = convertPosition(viewport); + if (position.x === 'left') { + x = -px; + } else if (position.x === 'right') { + x = gridWidth - scrollbarDimension + 3 + px; + } + if (position.y === 'top') { + y = -px; + } else if (position.y === 'bottom') { + y = gridHeight - scrollbarDimension + 3 + px; + } + + cy.get(parentSelector).trigger('mousemove', x, y, { force: true }); + if (ms) { + cy.wait(ms); + } + return; } - return; -}); +); Cypress.Commands.add('dragEnd', { prevSubject: 'optional' }, (_subject, gridSelector = 'div[class^="slickgrid_"]') => { cy.get(gridSelector).trigger('mouseup', { force: true }); return; }); -export function getScrollDistanceWhenDragOutsideGrid(selector: string, viewport: string, dragDirection: string, fromRow: number, fromCol: number, px = 140) { - return (cy as any).convertPosition(viewport).then((_viewportPosition: { x: number; y: number; }) => { +export function getScrollDistanceWhenDragOutsideGrid( + selector: string, + viewport: string, + dragDirection: string, + fromRow: number, + fromCol: number, + px = 140 +) { + return (cy as any).convertPosition(viewport).then((_viewportPosition: { x: number; y: number }) => { const viewportSelector = `${selector} .slick-viewport-${_viewportPosition.x}.slick-viewport-${_viewportPosition.y}`; - (cy as any).getNthCell(fromRow, fromCol, viewport, { parentSelector: selector }) - .dragStart(); - return cy.get(viewportSelector).then($viewport => { + (cy as any).getNthCell(fromRow, fromCol, viewport, { parentSelector: selector }).dragStart(); + return cy.get(viewportSelector).then(($viewport) => { const scrollTopBefore = $viewport.scrollTop(); const scrollLeftBefore = $viewport.scrollLeft(); cy.dragOutside(dragDirection, 300, px, { parentSelector: selector }); - return cy.get(viewportSelector).then($viewportAfter => { + return cy.get(viewportSelector).then(($viewportAfter) => { cy.dragEnd(selector); const scrollTopAfter = $viewportAfter.scrollTop(); const scrollLeftAfter = $viewportAfter.scrollLeft(); @@ -74,7 +93,7 @@ export function getScrollDistanceWhenDragOutsideGrid(selector: string, viewport: scrollTopBefore, scrollLeftBefore, scrollTopAfter, - scrollLeftAfter + scrollLeftAfter, }); }); }); diff --git a/test/cypress/support/index.ts b/test/cypress/support/index.ts index d68db96df..37a498fb5 100644 --- a/test/cypress/support/index.ts +++ b/test/cypress/support/index.ts @@ -14,7 +14,7 @@ // *********************************************************** // Import commands.js using ES2015 syntax: -import './commands' +import './commands'; // Alternatively you can use CommonJS syntax: // require('./commands') diff --git a/test/jest-global-mocks.ts b/test/jest-global-mocks.ts index 74e5da56d..29128ea1f 100644 --- a/test/jest-global-mocks.ts +++ b/test/jest-global-mocks.ts @@ -1,17 +1,17 @@ const mock = () => { let storage: any = {}; return { - getItem: (key: any) => key in storage ? storage[key] : null, - setItem: (key: any, value: any) => storage[key] = value || '', + getItem: (key: any) => (key in storage ? storage[key] : null), + setItem: (key: any, value: any) => (storage[key] = value || ''), removeItem: (key: any) => delete storage[key], - clear: () => storage = {}, + clear: () => (storage = {}), }; }; Object.defineProperty(window, 'localStorage', { value: mock() }); Object.defineProperty(window, 'sessionStorage', { value: mock() }); Object.defineProperty(window, 'getComputedStyle', { - value: () => ['-webkit-appearance'] + value: () => ['-webkit-appearance'], }); Object.defineProperty(window, '__env', { value: { env: { backendUrl: 'mocked URL' } } }); @@ -20,8 +20,8 @@ Object.defineProperty(window, 'getComputedStyle', { value: () => ({ getPropertyValue: () => { return ''; - } - }) + }, + }), }); // Mock diff --git a/test/jest.config.ts b/test/jest.config.ts index 5fb569ca7..4af78013c 100644 --- a/test/jest.config.ts +++ b/test/jest.config.ts @@ -21,48 +21,34 @@ const config: Config.InitialOptions = { 'setup-jest.ts', 'slickgrid-config.ts', '\\.d\\.ts$', - '/node_modules/' - ], - moduleDirectories: [ - 'node_modules', - 'src/app', - ], - moduleFileExtensions: [ - 'ts', - 'json', - 'js' + '/node_modules/', ], + moduleDirectories: ['node_modules', 'src/app'], + moduleFileExtensions: ['ts', 'json', 'js'], moduleNameMapper: { 'app/(.*)': '/src/app/$1', '@common/(.*)': '/src/app/common/$1', }, - modulePathIgnorePatterns: [ - 'dist', - 'node_modules' - ], + modulePathIgnorePatterns: ['dist', 'node_modules'], preset: 'jest-preset-angular', globalSetup: '/test/jest-global-setup.ts', setupFiles: ['/test/jest-pretest.ts'], setupFilesAfterEnv: ['jest-extended/all', '/test/setup-jest.ts'], transform: { - '^.+\\.ts$': ['jest-preset-angular', { - allowSyntheticDefaultImports: true, - diagnostics: false, - isolatedModules: true, - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.html$' - }], + '^.+\\.ts$': [ + 'jest-preset-angular', + { + allowSyntheticDefaultImports: true, + diagnostics: false, + isolatedModules: true, + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.html$', + }, + ], }, - transformIgnorePatterns: [ - '/node_modules/angular-slickgrid/', - '/node_modules/slickgrid/' - ], + transformIgnorePatterns: ['/node_modules/angular-slickgrid/', '/node_modules/slickgrid/'], testMatch: ['**/__tests__/**/*.+(ts|js)', '**/+(*.)+(spec|test).+(ts|js)'], - testPathIgnorePatterns: [ - '/node_modules/', - '/test/cypress/', - '/node_modules/', - ] + testPathIgnorePatterns: ['/node_modules/', '/test/cypress/', '/node_modules/'], }; export default config; diff --git a/test/mockSlickEvent.ts b/test/mockSlickEvent.ts index fe574ee4a..536efeb03 100644 --- a/test/mockSlickEvent.ts +++ b/test/mockSlickEvent.ts @@ -1,5 +1,5 @@ import type { Handler, SlickEvent, SlickEventData } from '@slickgrid-universal/common'; -type MergeTypes = { [key in keyof A]: key extends keyof B ? B[key] : A[key]; } & B; +type MergeTypes = { [key in keyof A]: key extends keyof B ? B[key] : A[key] } & B; // @ts-ignore export class MockSlickEvent implements SlickEvent { @@ -33,7 +33,7 @@ export class MockSlickEventHandler { protected handlers: any[] = []; notify(eventName: string, data?: any) { - const pubSub = this.handlers.find(subscription => subscription.name === eventName); + const pubSub = this.handlers.find((subscription) => subscription.name === eventName); if (typeof pubSub?.handler === 'function') { pubSub.handler(data); } @@ -51,8 +51,7 @@ export class MockSlickEventHandler { unsubscribe(event: MockSlickEvent, handler: Handler) { let i = this.handlers.length; while (i--) { - if (this.handlers[i].event === event && - this.handlers[i].handler === handler) { + if (this.handlers[i].event === event && this.handlers[i].handler === handler) { this.handlers.splice(i, 1); if (event.unsubscribe) { event.unsubscribe(handler); @@ -61,7 +60,7 @@ export class MockSlickEventHandler { } } - return this; // allow chaining + return this; // allow chaining } unsubscribeAll() { @@ -73,6 +72,6 @@ export class MockSlickEventHandler { } this.handlers = []; - return this; // allow chaining + return this; // allow chaining } } diff --git a/test/rxjsResourceStub.ts b/test/rxjsResourceStub.ts index 05e955dae..1a88b72e3 100644 --- a/test/rxjsResourceStub.ts +++ b/test/rxjsResourceStub.ts @@ -1,5 +1,17 @@ import type { RxJsFacade } from '@slickgrid-universal/common'; -import { EMPTY, iif, isObservable, firstValueFrom, Observable, type ObservableInput, of, type OperatorFunction, type ObservedValueOf, Subject, switchMap, } from 'rxjs'; +import { + EMPTY, + iif, + isObservable, + firstValueFrom, + Observable, + type ObservableInput, + of, + type OperatorFunction, + type ObservedValueOf, + Subject, + switchMap, +} from 'rxjs'; import { takeUntil } from 'rxjs/operators'; export class RxJsResourceStub implements RxJsFacade { @@ -54,4 +66,4 @@ export class RxJsResourceStub implements RxJsFacade { takeUntil(notifier: Observable): any { return takeUntil(notifier); } -} \ No newline at end of file +} diff --git a/test/setup-jest.ts b/test/setup-jest.ts index 52afd64c2..ac3159f29 100644 --- a/test/setup-jest.ts +++ b/test/setup-jest.ts @@ -3,4 +3,4 @@ import './jest-global-mocks'; setupZonelessTestEnv({ //...options -}); \ No newline at end of file +}); diff --git a/test/translateServiceStub.ts b/test/translateServiceStub.ts index bb7ac75d8..bc1423b3a 100644 --- a/test/translateServiceStub.ts +++ b/test/translateServiceStub.ts @@ -2,83 +2,228 @@ export class TranslateServiceStub { currentLang = 'en'; use(locale: string) { - return new Promise(resolve => resolve(this.currentLang = locale)); + return new Promise((resolve) => resolve((this.currentLang = locale))); } instant(translationKey: string): string { let output = translationKey; switch (translationKey) { - case 'ALL_SELECTED': output = this.currentLang === 'en' ? 'All Selected' : 'Tout sélectionnés'; break; - case 'ALL_X_RECORDS_SELECTED': output = this.currentLang === 'en' ? 'All {{x}} records selected' : 'Sur tous les {{x}} éléments sélectionnés'; break; - case 'APPLY_MASS_UPDATE': output = this.currentLang === 'en' ? 'Apply Mass Update' : 'Mettre à jour en masse'; break; - case 'APPLY_TO_SELECTION': output = this.currentLang === 'en' ? 'Update Selection' : 'Mettre à jour la sélection'; break; - case 'CANCEL': output = this.currentLang === 'en' ? 'Cancel' : 'Annuler'; break; - case 'CLEAR_ALL_GROUPING': output = this.currentLang === 'en' ? 'Clear all Grouping' : 'Supprimer tous les groupes'; break; - case 'CLEAR_ALL_FILTERS': output = this.currentLang === 'en' ? 'Clear all Filters' : 'Supprimer tous les filtres'; break; - case 'CLEAR_ALL_SORTING': output = this.currentLang === 'en' ? 'Clear all Sorting' : 'Supprimer tous les tris'; break; - case 'CLEAR_PINNING': output = this.currentLang === 'en' ? 'Unfreeze Columns/Rows' : 'Dégeler les colonnes/rangées'; break; - case 'COLUMNS': output = this.currentLang === 'en' ? 'Columns' : 'Colonnes'; break; - case 'COMMANDS': output = this.currentLang === 'en' ? 'Commands' : 'Commandes'; break; - case 'COLLAPSE_ALL_GROUPS': output = this.currentLang === 'en' ? 'Collapse all Groups' : 'Réduire tous les groupes'; break; - case 'CONTAINS': output = this.currentLang === 'en' ? 'Contains' : 'Contient'; break; - case 'COPY': output = this.currentLang === 'en' ? 'Copy' : 'Copier'; break; - case 'DURATION': output = this.currentLang === 'en' ? 'Duration' : 'Durée'; break; - case 'EMPTY_DATA_WARNING_MESSAGE': output = this.currentLang === 'en' ? 'No data to display.' : 'Aucune donnée à afficher.'; break; - case 'ENDS_WITH': output = this.currentLang === 'en' ? 'Ends With' : 'Se termine par'; break; - case 'EQUALS': output = this.currentLang === 'en' ? 'Equals' : 'Égale'; break; - case 'EQUAL_TO': output = this.currentLang === 'en' ? 'Equal to' : 'Égal à'; break; - case 'EXPAND_ALL_GROUPS': output = this.currentLang === 'en' ? 'Expand all Groups' : 'Étendre tous les groupes'; break; - case 'EXPORT_TO_CSV': output = this.currentLang === 'en' ? 'Export in CSV format' : 'Exporter en format CSV'; break; - case 'EXPORT_TO_EXCEL': output = this.currentLang === 'en' ? 'Export to Excel' : 'Exporter vers Excel'; break; - case 'EXPORT_TO_TAB_DELIMITED': output = this.currentLang === 'en' ? 'Export in Text format (Tab delimited)' : 'Exporter en format texte (délimité par tabulation)'; break; - case 'EXPORT_TO_TEXT_FORMAT': output = this.currentLang === 'en' ? 'Export in Text format' : 'Exporter en format texte'; break; - case 'FEMALE': output = this.currentLang === 'en' ? 'Female' : 'Femme'; break; - case 'FIRST_NAME': output = this.currentLang === 'en' ? 'First Name' : 'Prénom'; break; - case 'FORCE_FIT_COLUMNS': output = this.currentLang === 'en' ? 'Force fit columns' : 'Ajustement forcé des colonnes'; break; - case 'FREEZE_COLUMNS': output = this.currentLang === 'en' ? 'Freeze Columns' : 'Geler les colonnes'; break; - case 'GREATER_THAN': output = this.currentLang === 'en' ? 'Greater than' : 'Plus grand que'; break; - case 'GREATER_THAN_OR_EQUAL_TO': output = this.currentLang === 'en' ? 'Greater than or equal to' : 'Plus grand ou égal à'; break; - case 'GROUP_BY': output = this.currentLang === 'en' ? 'Grouped By' : 'Groupé par'; break; - case 'GROUP_NAME': output = this.currentLang === 'en' ? 'Group Name' : 'Nom du Groupe'; break; - case 'HELLO': output = this.currentLang === 'en' ? 'Hello' : 'Bonjour'; break; - case 'HELP': output = this.currentLang === 'en' ? 'Help' : 'Aide'; break; - case 'HIDE_COLUMN': output = this.currentLang === 'en' ? 'Hide Column' : 'Cacher la colonne'; break; - case 'LAST_NAME': output = this.currentLang === 'en' ? 'Last Name' : 'Nom de famille'; break; - case 'LAST_UPDATE': output = this.currentLang === 'en' ? 'Last Update' : 'Dernière mise à jour'; break; - case 'LESS_THAN': output = this.currentLang === 'en' ? 'Less than or equal to' : 'Plus petit que'; break; - case 'LESS_THAN_OR_EQUAL_TO': output = this.currentLang === 'en' ? 'Less than or equal to' : 'Plus petit ou égal à'; break; - case 'MALE': output = this.currentLang === 'en' ? 'Male' : 'Mâle'; break; - case 'ITEMS': output = this.currentLang === 'en' ? 'items' : 'éléments'; break; - case 'ITEMS_PER_PAGE': output = this.currentLang === 'en' ? 'items per page' : 'éléments par page'; break; - case 'NOT_EQUAL_TO': output = this.currentLang === 'en' ? 'Not equal to' : 'Non égal à'; break; - case 'OF': output = this.currentLang === 'en' ? 'of' : 'de'; break; - case 'OK': output = this.currentLang === 'en' ? 'OK' : 'Terminé'; break; - case 'OPTIONS_LIST': output = this.currentLang === 'en' ? 'Options List' : 'Liste d\'options'; break; - case 'OTHER': output = this.currentLang === 'en' ? 'Other' : 'Autre'; break; - case 'PAGE': output = this.currentLang === 'en' ? 'Page' : 'Page'; break; - case 'REFRESH_DATASET': output = this.currentLang === 'en' ? 'Refresh Dataset' : 'Rafraîchir les données'; break; - case 'REMOVE_FILTER': output = this.currentLang === 'en' ? 'Remove Filter' : 'Supprimer le filtre'; break; - case 'REMOVE_SORT': output = this.currentLang === 'en' ? 'Remove Sort' : 'Supprimer le tri'; break; - case 'SORT_ASCENDING': output = this.currentLang === 'en' ? 'Sort Ascending' : 'Trier par ordre croissant'; break; - case 'SORT_DESCENDING': output = this.currentLang === 'en' ? 'Sort Descending' : 'Trier par ordre décroissant'; break; - case 'SAVE': output = this.currentLang === 'en' ? 'Save' : 'Sauvegarder'; break; - case 'STARTS_WITH': output = this.currentLang === 'en' ? 'Starts With' : 'Commence par'; break; - case 'SYNCHRONOUS_RESIZE': output = this.currentLang === 'en' ? 'Synchronous resize' : 'Redimension synchrone'; break; - case 'TITLE': output = this.currentLang === 'en' ? 'Title' : 'Titre'; break; - case 'TOGGLE_FILTER_ROW': output = this.currentLang === 'en' ? 'Toggle Filter Row' : 'Basculer la ligne des filtres'; break; - case 'TOGGLE_PRE_HEADER_ROW': output = this.currentLang === 'en' ? 'Toggle Pre-Header Row' : 'Basculer la ligne de pré-en-tête'; break; - case 'TRUE': output = this.currentLang === 'en' ? 'True' : 'Vrai'; break; - case 'USER_PROFILE': output = this.currentLang === 'en' ? 'User Profile' : `Profile d'usager`; break; - case 'COMPANY_PROFILE': output = this.currentLang === 'en' ? 'Company Profile' : `Profile de compagnie`; break; - case 'SALES': output = this.currentLang === 'en' ? 'Sales' : 'Ventes'; break; - case 'SALES_REP': output = this.currentLang === 'en' ? 'Sales Rep.' : 'Représentant des ventes'; break; - case 'SELECT_ALL': output = this.currentLang === 'en' ? 'Select All' : 'Sélectionner tout'; break; - case 'FINANCE_MANAGER': output = this.currentLang === 'en' ? 'Finance Manager' : 'Responsable des finances'; break; - case 'HUMAN_RESOURCES': output = this.currentLang === 'en' ? 'Human Resources' : 'Ressources humaines'; break; - case 'IT_ADMIN': output = this.currentLang === 'en' ? 'IT Admin' : 'Administrateur IT'; break; - case 'DEVELOPER': output = this.currentLang === 'en' ? 'Developer' : 'Développeur'; break; - case 'X_OF_Y_SELECTED': output = this.currentLang === 'en' ? '# of % selected' : '# de % sélectionnés'; break; - case 'X_OF_Y_MASS_SELECTED': output = this.currentLang === 'en' ? '{{x}} of {{y}} records selected' : '{{x}} de {{y}} éléments sélectionnés'; break; + case 'ALL_SELECTED': + output = this.currentLang === 'en' ? 'All Selected' : 'Tout sélectionnés'; + break; + case 'ALL_X_RECORDS_SELECTED': + output = this.currentLang === 'en' ? 'All {{x}} records selected' : 'Sur tous les {{x}} éléments sélectionnés'; + break; + case 'APPLY_MASS_UPDATE': + output = this.currentLang === 'en' ? 'Apply Mass Update' : 'Mettre à jour en masse'; + break; + case 'APPLY_TO_SELECTION': + output = this.currentLang === 'en' ? 'Update Selection' : 'Mettre à jour la sélection'; + break; + case 'CANCEL': + output = this.currentLang === 'en' ? 'Cancel' : 'Annuler'; + break; + case 'CLEAR_ALL_GROUPING': + output = this.currentLang === 'en' ? 'Clear all Grouping' : 'Supprimer tous les groupes'; + break; + case 'CLEAR_ALL_FILTERS': + output = this.currentLang === 'en' ? 'Clear all Filters' : 'Supprimer tous les filtres'; + break; + case 'CLEAR_ALL_SORTING': + output = this.currentLang === 'en' ? 'Clear all Sorting' : 'Supprimer tous les tris'; + break; + case 'CLEAR_PINNING': + output = this.currentLang === 'en' ? 'Unfreeze Columns/Rows' : 'Dégeler les colonnes/rangées'; + break; + case 'COLUMNS': + output = this.currentLang === 'en' ? 'Columns' : 'Colonnes'; + break; + case 'COMMANDS': + output = this.currentLang === 'en' ? 'Commands' : 'Commandes'; + break; + case 'COLLAPSE_ALL_GROUPS': + output = this.currentLang === 'en' ? 'Collapse all Groups' : 'Réduire tous les groupes'; + break; + case 'CONTAINS': + output = this.currentLang === 'en' ? 'Contains' : 'Contient'; + break; + case 'COPY': + output = this.currentLang === 'en' ? 'Copy' : 'Copier'; + break; + case 'DURATION': + output = this.currentLang === 'en' ? 'Duration' : 'Durée'; + break; + case 'EMPTY_DATA_WARNING_MESSAGE': + output = this.currentLang === 'en' ? 'No data to display.' : 'Aucune donnée à afficher.'; + break; + case 'ENDS_WITH': + output = this.currentLang === 'en' ? 'Ends With' : 'Se termine par'; + break; + case 'EQUALS': + output = this.currentLang === 'en' ? 'Equals' : 'Égale'; + break; + case 'EQUAL_TO': + output = this.currentLang === 'en' ? 'Equal to' : 'Égal à'; + break; + case 'EXPAND_ALL_GROUPS': + output = this.currentLang === 'en' ? 'Expand all Groups' : 'Étendre tous les groupes'; + break; + case 'EXPORT_TO_CSV': + output = this.currentLang === 'en' ? 'Export in CSV format' : 'Exporter en format CSV'; + break; + case 'EXPORT_TO_EXCEL': + output = this.currentLang === 'en' ? 'Export to Excel' : 'Exporter vers Excel'; + break; + case 'EXPORT_TO_TAB_DELIMITED': + output = + this.currentLang === 'en' + ? 'Export in Text format (Tab delimited)' + : 'Exporter en format texte (délimité par tabulation)'; + break; + case 'EXPORT_TO_TEXT_FORMAT': + output = this.currentLang === 'en' ? 'Export in Text format' : 'Exporter en format texte'; + break; + case 'FEMALE': + output = this.currentLang === 'en' ? 'Female' : 'Femme'; + break; + case 'FIRST_NAME': + output = this.currentLang === 'en' ? 'First Name' : 'Prénom'; + break; + case 'FORCE_FIT_COLUMNS': + output = this.currentLang === 'en' ? 'Force fit columns' : 'Ajustement forcé des colonnes'; + break; + case 'FREEZE_COLUMNS': + output = this.currentLang === 'en' ? 'Freeze Columns' : 'Geler les colonnes'; + break; + case 'GREATER_THAN': + output = this.currentLang === 'en' ? 'Greater than' : 'Plus grand que'; + break; + case 'GREATER_THAN_OR_EQUAL_TO': + output = this.currentLang === 'en' ? 'Greater than or equal to' : 'Plus grand ou égal à'; + break; + case 'GROUP_BY': + output = this.currentLang === 'en' ? 'Grouped By' : 'Groupé par'; + break; + case 'GROUP_NAME': + output = this.currentLang === 'en' ? 'Group Name' : 'Nom du Groupe'; + break; + case 'HELLO': + output = this.currentLang === 'en' ? 'Hello' : 'Bonjour'; + break; + case 'HELP': + output = this.currentLang === 'en' ? 'Help' : 'Aide'; + break; + case 'HIDE_COLUMN': + output = this.currentLang === 'en' ? 'Hide Column' : 'Cacher la colonne'; + break; + case 'LAST_NAME': + output = this.currentLang === 'en' ? 'Last Name' : 'Nom de famille'; + break; + case 'LAST_UPDATE': + output = this.currentLang === 'en' ? 'Last Update' : 'Dernière mise à jour'; + break; + case 'LESS_THAN': + output = this.currentLang === 'en' ? 'Less than or equal to' : 'Plus petit que'; + break; + case 'LESS_THAN_OR_EQUAL_TO': + output = this.currentLang === 'en' ? 'Less than or equal to' : 'Plus petit ou égal à'; + break; + case 'MALE': + output = this.currentLang === 'en' ? 'Male' : 'Mâle'; + break; + case 'ITEMS': + output = this.currentLang === 'en' ? 'items' : 'éléments'; + break; + case 'ITEMS_PER_PAGE': + output = this.currentLang === 'en' ? 'items per page' : 'éléments par page'; + break; + case 'NOT_EQUAL_TO': + output = this.currentLang === 'en' ? 'Not equal to' : 'Non égal à'; + break; + case 'OF': + output = this.currentLang === 'en' ? 'of' : 'de'; + break; + case 'OK': + output = this.currentLang === 'en' ? 'OK' : 'Terminé'; + break; + case 'OPTIONS_LIST': + output = this.currentLang === 'en' ? 'Options List' : "Liste d'options"; + break; + case 'OTHER': + output = this.currentLang === 'en' ? 'Other' : 'Autre'; + break; + case 'PAGE': + output = this.currentLang === 'en' ? 'Page' : 'Page'; + break; + case 'REFRESH_DATASET': + output = this.currentLang === 'en' ? 'Refresh Dataset' : 'Rafraîchir les données'; + break; + case 'REMOVE_FILTER': + output = this.currentLang === 'en' ? 'Remove Filter' : 'Supprimer le filtre'; + break; + case 'REMOVE_SORT': + output = this.currentLang === 'en' ? 'Remove Sort' : 'Supprimer le tri'; + break; + case 'SORT_ASCENDING': + output = this.currentLang === 'en' ? 'Sort Ascending' : 'Trier par ordre croissant'; + break; + case 'SORT_DESCENDING': + output = this.currentLang === 'en' ? 'Sort Descending' : 'Trier par ordre décroissant'; + break; + case 'SAVE': + output = this.currentLang === 'en' ? 'Save' : 'Sauvegarder'; + break; + case 'STARTS_WITH': + output = this.currentLang === 'en' ? 'Starts With' : 'Commence par'; + break; + case 'SYNCHRONOUS_RESIZE': + output = this.currentLang === 'en' ? 'Synchronous resize' : 'Redimension synchrone'; + break; + case 'TITLE': + output = this.currentLang === 'en' ? 'Title' : 'Titre'; + break; + case 'TOGGLE_FILTER_ROW': + output = this.currentLang === 'en' ? 'Toggle Filter Row' : 'Basculer la ligne des filtres'; + break; + case 'TOGGLE_PRE_HEADER_ROW': + output = this.currentLang === 'en' ? 'Toggle Pre-Header Row' : 'Basculer la ligne de pré-en-tête'; + break; + case 'TRUE': + output = this.currentLang === 'en' ? 'True' : 'Vrai'; + break; + case 'USER_PROFILE': + output = this.currentLang === 'en' ? 'User Profile' : `Profile d'usager`; + break; + case 'COMPANY_PROFILE': + output = this.currentLang === 'en' ? 'Company Profile' : `Profile de compagnie`; + break; + case 'SALES': + output = this.currentLang === 'en' ? 'Sales' : 'Ventes'; + break; + case 'SALES_REP': + output = this.currentLang === 'en' ? 'Sales Rep.' : 'Représentant des ventes'; + break; + case 'SELECT_ALL': + output = this.currentLang === 'en' ? 'Select All' : 'Sélectionner tout'; + break; + case 'FINANCE_MANAGER': + output = this.currentLang === 'en' ? 'Finance Manager' : 'Responsable des finances'; + break; + case 'HUMAN_RESOURCES': + output = this.currentLang === 'en' ? 'Human Resources' : 'Ressources humaines'; + break; + case 'IT_ADMIN': + output = this.currentLang === 'en' ? 'IT Admin' : 'Administrateur IT'; + break; + case 'DEVELOPER': + output = this.currentLang === 'en' ? 'Developer' : 'Développeur'; + break; + case 'X_OF_Y_SELECTED': + output = this.currentLang === 'en' ? '# of % selected' : '# de % sélectionnés'; + break; + case 'X_OF_Y_MASS_SELECTED': + output = this.currentLang === 'en' ? '{{x}} of {{y}} records selected' : '{{x}} de {{y}} éléments sélectionnés'; + break; } return output; } diff --git a/test/translaterServiceStub.ts b/test/translaterServiceStub.ts index 598adcb56..3d1df0b8f 100644 --- a/test/translaterServiceStub.ts +++ b/test/translaterServiceStub.ts @@ -10,83 +10,228 @@ export class TranslaterServiceStub implements TranslaterService { translate(translationKey: string): string { let output = translationKey; switch (translationKey) { - case 'ALL_SELECTED': output = this._locale === 'en' ? 'All Selected' : 'Tout sélectionnés'; break; - case 'ALL_X_RECORDS_SELECTED': output = this._locale === 'en' ? 'All {{x}} records selected' : 'Sur tous les {{x}} éléments sélectionnés'; break; - case 'APPLY_MASS_UPDATE': output = this._locale === 'en' ? 'Apply Mass Update' : 'Mettre à jour en masse'; break; - case 'APPLY_TO_SELECTION': output = this._locale === 'en' ? 'Update Selection' : 'Mettre à jour la sélection'; break; - case 'CANCEL': output = this._locale === 'en' ? 'Cancel' : 'Annuler'; break; - case 'CLEAR_ALL_GROUPING': output = this._locale === 'en' ? 'Clear all Grouping' : 'Supprimer tous les groupes'; break; - case 'CLEAR_ALL_FILTERS': output = this._locale === 'en' ? 'Clear all Filters' : 'Supprimer tous les filtres'; break; - case 'CLEAR_ALL_SORTING': output = this._locale === 'en' ? 'Clear all Sorting' : 'Supprimer tous les tris'; break; - case 'CLEAR_FROZEN_COLUMNS': output = this._locale === 'en' ? 'Unfreeze Columns/Rows' : 'Dégeler les colonnes/rangées'; break; - case 'COLUMNS': output = this._locale === 'en' ? 'Columns' : 'Colonnes'; break; - case 'COMMANDS': output = this._locale === 'en' ? 'Commands' : 'Commandes'; break; - case 'COLLAPSE_ALL_GROUPS': output = this._locale === 'en' ? 'Collapse all Groups' : 'Réduire tous les groupes'; break; - case 'CONTAINS': output = this._locale === 'en' ? 'Contains' : 'Contient'; break; - case 'COPY': output = this._locale === 'en' ? 'Copy' : 'Copier'; break; - case 'DURATION': output = this._locale === 'en' ? 'Duration' : 'Durée'; break; - case 'EMPTY_DATA_WARNING_MESSAGE': output = this._locale === 'en' ? 'No data to display.' : 'Aucune donnée à afficher.'; break; - case 'ENDS_WITH': output = this._locale === 'en' ? 'Ends With' : 'Se termine par'; break; - case 'EQUALS': output = this._locale === 'en' ? 'Equals' : 'Égale'; break; - case 'EQUAL_TO': output = this._locale === 'en' ? 'Equal to' : 'Égal à'; break; - case 'EXPAND_ALL_GROUPS': output = this._locale === 'en' ? 'Expand all Groups' : 'Étendre tous les groupes'; break; - case 'EXPORT_TO_CSV': output = this._locale === 'en' ? 'Export in CSV format' : 'Exporter en format CSV'; break; - case 'EXPORT_TO_EXCEL': output = this._locale === 'en' ? 'Export to Excel' : 'Exporter vers Excel'; break; - case 'EXPORT_TO_TAB_DELIMITED': output = this._locale === 'en' ? 'Export in Text format (Tab delimited)' : 'Exporter en format texte (délimité par tabulation)'; break; - case 'EXPORT_TO_TEXT_FORMAT': output = this._locale === 'en' ? 'Export in Text format' : 'Exporter en format texte'; break; - case 'FEMALE': output = this._locale === 'en' ? 'Female' : 'Femme'; break; - case 'FIRST_NAME': output = this._locale === 'en' ? 'First Name' : 'Prénom'; break; - case 'FORCE_FIT_COLUMNS': output = this._locale === 'en' ? 'Force fit columns' : 'Ajustement forcé des colonnes'; break; - case 'FREEZE_COLUMNS': output = this._locale === 'en' ? 'Freeze Columns' : 'Geler les colonnes'; break; - case 'GREATER_THAN': output = this._locale === 'en' ? 'Greater than' : 'Plus grand que'; break; - case 'GREATER_THAN_OR_EQUAL_TO': output = this._locale === 'en' ? 'Greater than or equal to' : 'Plus grand ou égal à'; break; - case 'GROUP_BY': output = this._locale === 'en' ? 'Grouped By' : 'Groupé par'; break; - case 'GROUP_NAME': output = this._locale === 'en' ? 'Group Name' : 'Nom du Groupe'; break; - case 'HELLO': output = this._locale === 'en' ? 'Hello' : 'Bonjour'; break; - case 'HELP': output = this._locale === 'en' ? 'Help' : 'Aide'; break; - case 'HIDE_COLUMN': output = this._locale === 'en' ? 'Hide Column' : 'Cacher la colonne'; break; - case 'LAST_NAME': output = this._locale === 'en' ? 'Last Name' : 'Nom de famille'; break; - case 'LAST_UPDATE': output = this._locale === 'en' ? 'Last Update' : 'Dernière mise à jour'; break; - case 'LESS_THAN': output = this._locale === 'en' ? 'Less than or equal to' : 'Plus petit que'; break; - case 'LESS_THAN_OR_EQUAL_TO': output = this._locale === 'en' ? 'Less than or equal to' : 'Plus petit ou égal à'; break; - case 'MALE': output = this._locale === 'en' ? 'Male' : 'Mâle'; break; - case 'ITEMS': output = this._locale === 'en' ? 'items' : 'éléments'; break; - case 'ITEMS_PER_PAGE': output = this._locale === 'en' ? 'items per page' : 'éléments par page'; break; - case 'ITEMS_SELECTED': output = this._locale === 'en' ? 'items selected' : 'éléments sélectionnés'; break; - case 'NOT_EQUAL_TO': output = this._locale === 'en' ? 'Not equal to' : 'Non égal à'; break; - case 'OF': output = this._locale === 'en' ? 'of' : 'de'; break; - case 'OK': output = this._locale === 'en' ? 'OK' : 'Terminé'; break; - case 'OPTIONS_LIST': output = this._locale === 'en' ? 'Options List' : 'Liste d\'options'; break; - case 'OTHER': output = this._locale === 'en' ? 'Other' : 'Autre'; break; - case 'PAGE': output = this._locale === 'en' ? 'Page' : 'Page'; break; - case 'REFRESH_DATASET': output = this._locale === 'en' ? 'Refresh Dataset' : 'Rafraîchir les données'; break; - case 'REMOVE_FILTER': output = this._locale === 'en' ? 'Remove Filter' : 'Supprimer le filtre'; break; - case 'REMOVE_SORT': output = this._locale === 'en' ? 'Remove Sort' : 'Supprimer le tri'; break; - case 'SORT_ASCENDING': output = this._locale === 'en' ? 'Sort Ascending' : 'Trier par ordre croissant'; break; - case 'SORT_DESCENDING': output = this._locale === 'en' ? 'Sort Descending' : 'Trier par ordre décroissant'; break; - case 'SAVE': output = this._locale === 'en' ? 'Save' : 'Sauvegarder'; break; - case 'STARTS_WITH': output = this._locale === 'en' ? 'Starts With' : 'Commence par'; break; - case 'SYNCHRONOUS_RESIZE': output = this._locale === 'en' ? 'Synchronous resize' : 'Redimension synchrone'; break; - case 'TITLE': output = this._locale === 'en' ? 'Title' : 'Titre'; break; - case 'TOGGLE_FILTER_ROW': output = this._locale === 'en' ? 'Toggle Filter Row' : 'Basculer la ligne des filtres'; break; - case 'TOGGLE_PRE_HEADER_ROW': output = this._locale === 'en' ? 'Toggle Pre-Header Row' : 'Basculer la ligne de pré-en-tête'; break; - case 'TRUE': output = this._locale === 'en' ? 'True' : 'Vrai'; break; - case 'USER_PROFILE': output = this._locale === 'en' ? 'User Profile' : `Profile d'usager`; break; - case 'COMPANY_PROFILE': output = this._locale === 'en' ? 'Company Profile' : `Profile de compagnie`; break; - case 'SALES': output = this._locale === 'en' ? 'Sales' : 'Ventes'; break; - case 'SALES_REP': output = this._locale === 'en' ? 'Sales Rep.' : 'Représentant des ventes'; break; - case 'SELECT_ALL': output = this._locale === 'en' ? 'Select All' : 'Sélectionner tout'; break; - case 'FINANCE_MANAGER': output = this._locale === 'en' ? 'Finance Manager' : 'Responsable des finances'; break; - case 'HUMAN_RESOURCES': output = this._locale === 'en' ? 'Human Resources' : 'Ressources humaines'; break; - case 'IT_ADMIN': output = this._locale === 'en' ? 'IT Admin' : 'Administrateur IT'; break; - case 'DEVELOPER': output = this._locale === 'en' ? 'Developer' : 'Développeur'; break; - case 'X_OF_Y_SELECTED': output = this._locale === 'en' ? '# of % selected' : '# de % sélectionnés'; break; - case 'X_OF_Y_MASS_SELECTED': output = this._locale === 'en' ? '{{x}} of {{y}} records selected' : '{{x}} de {{y}} éléments sélectionnés'; break; + case 'ALL_SELECTED': + output = this._locale === 'en' ? 'All Selected' : 'Tout sélectionnés'; + break; + case 'ALL_X_RECORDS_SELECTED': + output = this._locale === 'en' ? 'All {{x}} records selected' : 'Sur tous les {{x}} éléments sélectionnés'; + break; + case 'APPLY_MASS_UPDATE': + output = this._locale === 'en' ? 'Apply Mass Update' : 'Mettre à jour en masse'; + break; + case 'APPLY_TO_SELECTION': + output = this._locale === 'en' ? 'Update Selection' : 'Mettre à jour la sélection'; + break; + case 'CANCEL': + output = this._locale === 'en' ? 'Cancel' : 'Annuler'; + break; + case 'CLEAR_ALL_GROUPING': + output = this._locale === 'en' ? 'Clear all Grouping' : 'Supprimer tous les groupes'; + break; + case 'CLEAR_ALL_FILTERS': + output = this._locale === 'en' ? 'Clear all Filters' : 'Supprimer tous les filtres'; + break; + case 'CLEAR_ALL_SORTING': + output = this._locale === 'en' ? 'Clear all Sorting' : 'Supprimer tous les tris'; + break; + case 'CLEAR_FROZEN_COLUMNS': + output = this._locale === 'en' ? 'Unfreeze Columns/Rows' : 'Dégeler les colonnes/rangées'; + break; + case 'COLUMNS': + output = this._locale === 'en' ? 'Columns' : 'Colonnes'; + break; + case 'COMMANDS': + output = this._locale === 'en' ? 'Commands' : 'Commandes'; + break; + case 'COLLAPSE_ALL_GROUPS': + output = this._locale === 'en' ? 'Collapse all Groups' : 'Réduire tous les groupes'; + break; + case 'CONTAINS': + output = this._locale === 'en' ? 'Contains' : 'Contient'; + break; + case 'COPY': + output = this._locale === 'en' ? 'Copy' : 'Copier'; + break; + case 'DURATION': + output = this._locale === 'en' ? 'Duration' : 'Durée'; + break; + case 'EMPTY_DATA_WARNING_MESSAGE': + output = this._locale === 'en' ? 'No data to display.' : 'Aucune donnée à afficher.'; + break; + case 'ENDS_WITH': + output = this._locale === 'en' ? 'Ends With' : 'Se termine par'; + break; + case 'EQUALS': + output = this._locale === 'en' ? 'Equals' : 'Égale'; + break; + case 'EQUAL_TO': + output = this._locale === 'en' ? 'Equal to' : 'Égal à'; + break; + case 'EXPAND_ALL_GROUPS': + output = this._locale === 'en' ? 'Expand all Groups' : 'Étendre tous les groupes'; + break; + case 'EXPORT_TO_CSV': + output = this._locale === 'en' ? 'Export in CSV format' : 'Exporter en format CSV'; + break; + case 'EXPORT_TO_EXCEL': + output = this._locale === 'en' ? 'Export to Excel' : 'Exporter vers Excel'; + break; + case 'EXPORT_TO_TAB_DELIMITED': + output = + this._locale === 'en' ? 'Export in Text format (Tab delimited)' : 'Exporter en format texte (délimité par tabulation)'; + break; + case 'EXPORT_TO_TEXT_FORMAT': + output = this._locale === 'en' ? 'Export in Text format' : 'Exporter en format texte'; + break; + case 'FEMALE': + output = this._locale === 'en' ? 'Female' : 'Femme'; + break; + case 'FIRST_NAME': + output = this._locale === 'en' ? 'First Name' : 'Prénom'; + break; + case 'FORCE_FIT_COLUMNS': + output = this._locale === 'en' ? 'Force fit columns' : 'Ajustement forcé des colonnes'; + break; + case 'FREEZE_COLUMNS': + output = this._locale === 'en' ? 'Freeze Columns' : 'Geler les colonnes'; + break; + case 'GREATER_THAN': + output = this._locale === 'en' ? 'Greater than' : 'Plus grand que'; + break; + case 'GREATER_THAN_OR_EQUAL_TO': + output = this._locale === 'en' ? 'Greater than or equal to' : 'Plus grand ou égal à'; + break; + case 'GROUP_BY': + output = this._locale === 'en' ? 'Grouped By' : 'Groupé par'; + break; + case 'GROUP_NAME': + output = this._locale === 'en' ? 'Group Name' : 'Nom du Groupe'; + break; + case 'HELLO': + output = this._locale === 'en' ? 'Hello' : 'Bonjour'; + break; + case 'HELP': + output = this._locale === 'en' ? 'Help' : 'Aide'; + break; + case 'HIDE_COLUMN': + output = this._locale === 'en' ? 'Hide Column' : 'Cacher la colonne'; + break; + case 'LAST_NAME': + output = this._locale === 'en' ? 'Last Name' : 'Nom de famille'; + break; + case 'LAST_UPDATE': + output = this._locale === 'en' ? 'Last Update' : 'Dernière mise à jour'; + break; + case 'LESS_THAN': + output = this._locale === 'en' ? 'Less than or equal to' : 'Plus petit que'; + break; + case 'LESS_THAN_OR_EQUAL_TO': + output = this._locale === 'en' ? 'Less than or equal to' : 'Plus petit ou égal à'; + break; + case 'MALE': + output = this._locale === 'en' ? 'Male' : 'Mâle'; + break; + case 'ITEMS': + output = this._locale === 'en' ? 'items' : 'éléments'; + break; + case 'ITEMS_PER_PAGE': + output = this._locale === 'en' ? 'items per page' : 'éléments par page'; + break; + case 'ITEMS_SELECTED': + output = this._locale === 'en' ? 'items selected' : 'éléments sélectionnés'; + break; + case 'NOT_EQUAL_TO': + output = this._locale === 'en' ? 'Not equal to' : 'Non égal à'; + break; + case 'OF': + output = this._locale === 'en' ? 'of' : 'de'; + break; + case 'OK': + output = this._locale === 'en' ? 'OK' : 'Terminé'; + break; + case 'OPTIONS_LIST': + output = this._locale === 'en' ? 'Options List' : "Liste d'options"; + break; + case 'OTHER': + output = this._locale === 'en' ? 'Other' : 'Autre'; + break; + case 'PAGE': + output = this._locale === 'en' ? 'Page' : 'Page'; + break; + case 'REFRESH_DATASET': + output = this._locale === 'en' ? 'Refresh Dataset' : 'Rafraîchir les données'; + break; + case 'REMOVE_FILTER': + output = this._locale === 'en' ? 'Remove Filter' : 'Supprimer le filtre'; + break; + case 'REMOVE_SORT': + output = this._locale === 'en' ? 'Remove Sort' : 'Supprimer le tri'; + break; + case 'SORT_ASCENDING': + output = this._locale === 'en' ? 'Sort Ascending' : 'Trier par ordre croissant'; + break; + case 'SORT_DESCENDING': + output = this._locale === 'en' ? 'Sort Descending' : 'Trier par ordre décroissant'; + break; + case 'SAVE': + output = this._locale === 'en' ? 'Save' : 'Sauvegarder'; + break; + case 'STARTS_WITH': + output = this._locale === 'en' ? 'Starts With' : 'Commence par'; + break; + case 'SYNCHRONOUS_RESIZE': + output = this._locale === 'en' ? 'Synchronous resize' : 'Redimension synchrone'; + break; + case 'TITLE': + output = this._locale === 'en' ? 'Title' : 'Titre'; + break; + case 'TOGGLE_FILTER_ROW': + output = this._locale === 'en' ? 'Toggle Filter Row' : 'Basculer la ligne des filtres'; + break; + case 'TOGGLE_PRE_HEADER_ROW': + output = this._locale === 'en' ? 'Toggle Pre-Header Row' : 'Basculer la ligne de pré-en-tête'; + break; + case 'TRUE': + output = this._locale === 'en' ? 'True' : 'Vrai'; + break; + case 'USER_PROFILE': + output = this._locale === 'en' ? 'User Profile' : `Profile d'usager`; + break; + case 'COMPANY_PROFILE': + output = this._locale === 'en' ? 'Company Profile' : `Profile de compagnie`; + break; + case 'SALES': + output = this._locale === 'en' ? 'Sales' : 'Ventes'; + break; + case 'SALES_REP': + output = this._locale === 'en' ? 'Sales Rep.' : 'Représentant des ventes'; + break; + case 'SELECT_ALL': + output = this._locale === 'en' ? 'Select All' : 'Sélectionner tout'; + break; + case 'FINANCE_MANAGER': + output = this._locale === 'en' ? 'Finance Manager' : 'Responsable des finances'; + break; + case 'HUMAN_RESOURCES': + output = this._locale === 'en' ? 'Human Resources' : 'Ressources humaines'; + break; + case 'IT_ADMIN': + output = this._locale === 'en' ? 'IT Admin' : 'Administrateur IT'; + break; + case 'DEVELOPER': + output = this._locale === 'en' ? 'Developer' : 'Développeur'; + break; + case 'X_OF_Y_SELECTED': + output = this._locale === 'en' ? '# of % selected' : '# de % sélectionnés'; + break; + case 'X_OF_Y_MASS_SELECTED': + output = this._locale === 'en' ? '{{x}} of {{y}} records selected' : '{{x}} de {{y}} éléments sélectionnés'; + break; } return output; } use(locale: string) { - return new Promise(resolve => resolve(this._locale = locale)); + return new Promise((resolve) => resolve((this._locale = locale))); } } diff --git a/yarn.lock b/yarn.lock index d603a34d7..21af5c77c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9169,6 +9169,11 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== +prettier@^3.4.2: + version "3.4.2" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.4.2.tgz#a5ce1fb522a588bf2b78ca44c6e6fe5aa5a2b13f" + integrity sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ== + pretty-bytes@^5.6.0: version "5.6.0" resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"