From 26c4cc26c727f4febba55d3bbb43a150446b7c45 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Sun, 22 Mar 2020 00:09:26 -0400 Subject: [PATCH] refactor(examples): fix Tree View demo with adding new row --- README.md | 6 +- .../src/examples/example01.ts | 4 +- .../src/examples/example02.ts | 4 +- .../src/examples/example04.ts | 77 ++++++++----------- 4 files changed, 38 insertions(+), 53 deletions(-) diff --git a/README.md b/README.md index a4e73ff1e..a13d5078e 100644 --- a/README.md +++ b/README.md @@ -104,7 +104,7 @@ npm run test:watch - [ ] Services - [x] Collection - [ ] Excel Export (**separate package**) - - [ ] Export Text (**separate package?!**) + - [ ] Export Text (**separate package**) - [x] Extension - [x] Filter - [ ] GraphQL (**separate package**) @@ -122,10 +122,10 @@ npm run test:watch - [x] Jest Debugger - [ ] Add Multiple Example Demos with Vanilla implementation - [ ] Add GitHub Demo website - - [ ] Add Cypress E2E tests - [ ] Add CI/CD (CircleCI or GitHub Actions) - [ ] Add Jest Unit tests - - [ ] Build and run on every PR + - [ ] Add Cypress E2E tests - [ ] Add Code Coverage (codecov) + - [ ] Build and run on every PR - [ ] Remove any Deprecated code - [ ] Create a Migration Guide diff --git a/packages/vanilla-bundle-examples/src/examples/example01.ts b/packages/vanilla-bundle-examples/src/examples/example01.ts index 9cfe2cb5c..2dee0af01 100644 --- a/packages/vanilla-bundle-examples/src/examples/example01.ts +++ b/packages/vanilla-bundle-examples/src/examples/example01.ts @@ -1,4 +1,4 @@ -import { Editors, FieldType, GroupTotalFormatters, Formatters, OperatorType, GridOption } from '@slickgrid-universal/common'; +import { Column, Editors, FieldType, GroupTotalFormatters, Formatters, OperatorType, GridOption } from '@slickgrid-universal/common'; import { Slicker } from '@slickgrid-universal/vanilla-bundle'; const actionFormatter = (row, cell, value, columnDef, dataContext) => { @@ -21,7 +21,7 @@ const myCustomTitleValidator = (value, args) => { export class Example1 { gridClass; gridClassName; - columnDefinitions; + columnDefinitions: Column[]; gridOptions: GridOption; dataset; dataviewObj: any; diff --git a/packages/vanilla-bundle-examples/src/examples/example02.ts b/packages/vanilla-bundle-examples/src/examples/example02.ts index ebb299014..5ba5f0314 100644 --- a/packages/vanilla-bundle-examples/src/examples/example02.ts +++ b/packages/vanilla-bundle-examples/src/examples/example02.ts @@ -1,4 +1,4 @@ -import { Aggregators, FieldType, Sorters, SortDirectionNumber, Grouping, GroupTotalFormatters, Formatters, GridOption } from '@slickgrid-universal/common'; +import { Aggregators, Column, FieldType, Sorters, SortDirectionNumber, Grouping, GroupTotalFormatters, Formatters, GridOption } from '@slickgrid-universal/common'; import { Slicker } from '@slickgrid-universal/vanilla-bundle'; const actionFormatter = (row, cell, value, columnDef, dataContext) => { @@ -21,7 +21,7 @@ const myCustomTitleValidator = (value, args) => { export class Example2 { gridClass; gridClassName; - columnDefinitions; + columnDefinitions: Column[]; gridOptions: GridOption; dataset; dataviewObj: any; diff --git a/packages/vanilla-bundle-examples/src/examples/example04.ts b/packages/vanilla-bundle-examples/src/examples/example04.ts index 290638946..6083cc6a2 100644 --- a/packages/vanilla-bundle-examples/src/examples/example04.ts +++ b/packages/vanilla-bundle-examples/src/examples/example04.ts @@ -1,4 +1,4 @@ -import { GridOption } from '@slickgrid-universal/common'; +import { Column, GridOption } from '@slickgrid-universal/common'; import { Slicker } from '@slickgrid-universal/vanilla-bundle'; import './example04.scss'; @@ -6,9 +6,9 @@ export class Example4 { gridClass; gridClassName; _commandQueue = []; - columnDefinitions; + columnDefinitions: Column[]; gridOptions: GridOption; - dataset; + dataset: any[]; dataViewObj: any; gridObj: any; commandQueue = []; @@ -40,29 +40,21 @@ export class Example4 { initializeGrid() { this.columnDefinitions = [ - { id: "title", name: "Title", field: "title", width: 220, cssClass: "cell-title", filterable: true, formatter: this.taskNameFormatter.bind(this), editor: Slicker.Editors.text }, - { id: "duration", name: "Duration", field: "duration", editor: Slicker.Editors.text, minWidth: 90 }, - { id: "%", name: "% Complete", field: "percentComplete", width: 120, resizable: false, formatter: Slicker.Formatters.percentCompleteBar, editor: Slicker.Editors.slider }, - { id: "start", name: "Start", field: "start", minWidth: 60 }, - { id: "finish", name: "Finish", field: "finish", minWidth: 60 }, + { id: 'title', name: 'Title', field: 'title', width: 220, cssClass: 'cell-title', filterable: true, formatter: this.taskNameFormatter.bind(this) }, + { id: 'duration', name: 'Duration', field: 'duration', minWidth: 90 }, + { id: '%', name: '% Complete', field: 'percentComplete', width: 120, resizable: false, formatter: Slicker.Formatters.percentCompleteBar }, + { id: 'start', name: 'Start', field: 'start', minWidth: 60 }, + { id: 'finish', name: 'Finish', field: 'finish', minWidth: 60 }, { - id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", - formatter: Slicker.Formatters.checkmarkMaterial, editor: Slicker.Editors.checkbox, cannotTriggerInsert: true + id: 'effort-driven', name: 'Effort Driven', width: 80, minWidth: 20, maxWidth: 80, cssClass: 'cell-effort-driven', field: 'effortDriven', + formatter: Slicker.Formatters.checkmarkMaterial, cannotTriggerInsert: true } ]; this.gridOptions = { - autoEdit: true, // true single click (false for double-click) - autoCommitEdit: true, - asyncEditorLoading: false, - editable: true, autoResize: { container: '.demo-container', }, - dataView: { - inlineFilters: false - }, - // enableFiltering: true, enableAutoSizeColumns: true, enableAutoResize: true, // enableCellNavigation: true, @@ -99,7 +91,7 @@ export class Example4 { taskNameFormatter(row, cell, value, columnDef, dataContext) { if (value == null || value == undefined || dataContext === undefined) { return ''; } - + console.log('formatter collased', dataContext?._collapsed) value = value.replace(/&/g, '&').replace(//g, '>'); const spacer = ``; const idx = this.dataViewObj.getIdxById(dataContext.id); @@ -109,9 +101,8 @@ export class Example4 { } else { return `${spacer} ${value}`; } - } else { - return `${spacer} ${value}`; } + return `${spacer} ${value}`; } myFilter(item) { @@ -119,17 +110,18 @@ export class Example4 { // return false; // } - if (this.searchString != "" && item["title"].indexOf(this.searchString) == -1) { + if (this.searchString != '' && item['title'].indexOf(this.searchString) == -1) { return false; } if (item.parent != null) { - var parent = this.dataset[item.parent]; + var parent = this.dataset.find(itm => itm.id === `id_${+(item.parent)}`); while (parent) { - if (parent._collapsed || /*(parent["percentComplete"] < percentCompleteThreshold) ||*/ (this.searchString != "" && parent["title"].indexOf(this.searchString) == -1)) { + if (parent._collapsed || /*(parent["percentComplete"] < percentCompleteThreshold) ||*/ (this.searchString != '' && parent['title'].indexOf(this.searchString) == -1)) { return false; } - parent = this.dataset[parent.parent]; + var parentId = parent.parent !== null ? `id_${parent.parent}` : null; + parent = this.dataset.find(itm2 => itm2.id === parentId); } } return true; @@ -220,10 +212,10 @@ export class Example4 { console.log(nextOutsideItemIdx, this.dataset[nextOutsideItemIdx]) const newItem = { - id, + id: 'id_' + id, parent: parentItemFound.id.replace('id_', ''), indent: newIndent, - title: `Task${id}`, + title: `Task ${id}`, duration: '1 day', percentComplete: 0, start: '01/01/2009', @@ -237,18 +229,11 @@ export class Example4 { handleOnClick(event: any) { const eventDetail = event?.detail; const args = event?.detail?.args; - console.log(eventDetail) - console.log('onclick', $(eventDetail.eventData.target), $(eventDetail.eventData).hasClass("toggle")) - if ($(eventDetail.eventData.target).hasClass("toggle")) { + + if ($(eventDetail?.eventData?.target).hasClass('toggle')) { var item = this.dataViewObj.getItem(args.row); - console.log(item) if (item) { - if (!item._collapsed) { - item._collapsed = true; - } else { - item._collapsed = false; - } - + item._collapsed = !item._collapsed ? true : false; this.dataViewObj.updateItem(item.id, item); } event.stopImmediatePropagation(); @@ -316,15 +301,15 @@ export class Example4 { parent = null; } - d["id"] = "id_" + i; - d["indent"] = indent; - d["parent"] = parent; - d["title"] = "Task " + i; - d["duration"] = "5 days"; - d["percentComplete"] = Math.round(Math.random() * 100); - d["start"] = "01/01/2009"; - d["finish"] = "01/05/2009"; - d["effortDriven"] = (i % 5 == 0); + d['id'] = 'id_' + i; + d['indent'] = indent; + d['parent'] = parent; + d['title'] = 'Task ' + i; + d['duration'] = '5 days'; + d['percentComplete'] = Math.round(Math.random() * 100); + d['start'] = '01/01/2009'; + d['finish'] = '01/05/2009'; + d['effortDriven'] = (i % 5 == 0); } return data; }