feat: add Row Detail feature with new example (#421)

* feat: add Row Detail feature with new example

docs/grid-functionalities/tree-data-grid.md

@@ -305,17 +305,17 @@ There are a few methods available from the `TreeDataService` (only listing the i
 - `applyToggledItemStateChanges(x)`: apply different tree toggle state changes (to ALL rows, the entire dataset) by providing an array of parentIds
 
 For example
-```ts
+```tsx
 export default class Example extends React.Component<Props, State> {
-  aureliaGrid?: AureliaGridInstance;
+  reactGrid?: SlickgridReactInstance;
 
-  reactGridReady(aureliaGrid: AureliaGridInstance) {
-    this.reactGrid = aureliaGrid;
+  reactGridReady(reactGrid: SlickgridReactInstance) {
+    this.reactGrid = reactGrid;
   }
 
   getTreeDataState() {
     // for example get current Tree Data toggled state
-    console.log(this.aureliaGrid.getCurrentToggleState());
+    console.log(this.reactGrid.getCurrentToggleState());
   }
 }
 ```

package.json

@@ -88,6 +88,7 @@
     "@slickgrid-universal/empty-warning-component": "~5.9.0",
     "@slickgrid-universal/event-pub-sub": "~5.9.0",
     "@slickgrid-universal/pagination-component": "~5.9.0",
+    "@slickgrid-universal/row-detail-view-plugin": "~5.9.0",
     "dequal": "^2.0.3",
     "i18next": "^23.16.1",
     "sortablejs": "^1.15.3"

src/examples/slickgrid/App.tsx

@@ -20,6 +20,7 @@ import Example15 from './Example15';
 import Example16 from './Example16';
 import Example17 from './Example17';
 import Example18 from './Example18';
+import Example19 from './Example19';
 import Example20 from './Example20';
 import Example21 from './Example21';
 import Example22 from './Example22';
@@ -62,6 +63,7 @@ const routes: Array<{ path: string; route: string; component: any; title: string
   { path: 'example16', route: '/example16', component: <Example16 />, title: '16- Row Move Plugin' },
   { path: 'example17', route: '/example17', component: <Example17 />, title: '17- Remote Model' },
   { path: 'example18', route: '/example18', component: <Example18 />, title: '18- Draggable Grouping' },
+  { path: 'example19', route: '/example19', component: <Example19 />, title: '19- Row Detail View' },
   { path: 'example20', route: '/example20', component: <Example20 />, title: '20- Pinned Columns/Rows' },
   { path: 'example21', route: '/example21', component: <Example21 />, title: '21- Grid AutoHeight (full height)' },
   { path: 'example22', route: '/example22', component: <Example22 />, title: '22- with Bootstrap Tabs' },

src/examples/slickgrid/Example19-detail-view.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import type { SlickDataView, SlickGrid, SlickRowDetailView } from 'slickgrid-react';
+
+import './example19-detail-view.scss';
+
+interface Props {
+  model: {
+    duration: Date;
+    percentComplete: number;
+    reporter: string;
+    start: Date;
+    finish: Date;
+    effortDriven: boolean;
+    assignee: string;
+    title: string;
+  };
+  addon: SlickRowDetailView;
+  grid: SlickGrid;
+  dataView: SlickDataView;
+  parent: any;
+}
+interface State {
+  assignee: string;
+}
+
+export class Example19DetailView extends React.Component<Props, State> {
+  constructor(public readonly props: Props) {
+    super(props);
+    this.state = {
+      assignee: props.model?.assignee || ''
+    }
+  }
+
+  assigneeChanged(newAssignee: string) {
+    this.setState((props: Props, state: State) => {
+      return { ...state, assignee: newAssignee }
+    });
+  }
+
+  alertAssignee(name: string) {
+    if (typeof name === 'string') {
+      alert(`Assignee on this task is: ${name.toUpperCase()}`);
+    } else {
+      alert('No one is assigned to this task.');
+    }
+  }
+
+  deleteRow(model: any) {
+    if (confirm(`Are you sure that you want to delete ${model.title}?`)) {
+      // you first need to collapse all rows (via the 3rd party addon instance)
+      this.props.addon.collapseAll();
+
+      // then you can delete the item from the dataView
+      this.props.dataView.deleteItem(model.rowId);
+
+      this.props.parent!.showFlashMessage(`Deleted row with ${model.title}`, 'danger');
+    }
+  }
+
+  callParentMethod(model: any) {
+    this.props.parent!.showFlashMessage(`We just called Parent Method from the Row Detail Child Component on ${model.title}`);
+  }
+
+  render() {
+    return (
+      <div className="container-fluid" style={{ marginTop: '10px' }}>
+        <h3>{this.props.model.title}</h3>
+        <div className="row">
+          <div className="col-3 detail-label"><label>Assignee:</label> <input className="form-control" value={this.state.assignee} onInput={($event) => this.assigneeChanged(($event.target as HTMLInputElement).value)} /></div>
+          <div className="col-3 detail-label"><label>Reporter:</label> <span>{this.props.model.reporter}</span></div>
+          <div className="col-3 detail-label"><label>Duration:</label> <span>{this.props.model.duration?.toISOString?.()}</span></div>
+          <div className="col-3 detail-label"><label>% Complete:</label> <span>{this.props.model.percentComplete}</span></div>
+        </div>
+
+        <div className="row">
+          <div className="col-3 detail-label"><label>Start:</label> <span>{this.props.model.start?.toISOString()}</span></div>
+          <div className="col-3 detail-label"><label>Finish:</label> <span>{this.props.model.finish?.toISOString()}</span></div>
+          <div className="col-3 detail-label"><label>Effort Driven:</label> <i className={this.props.model.effortDriven ? 'mdi mdi-check' : ''}></i>
+          </div>
+        </div>
+
+        <hr />
+
+        <div className="col-sm-8">
+          <h4>
+            Find out who is the Assignee
+            <small>
+              <button className="btn btn-primary btn-sm" onClick={() => this.alertAssignee(this.props.model.assignee)} data-test="assignee-btn">
+                Click Me
+              </button>
+            </small>
+          </h4>
+        </div>
+
+        <div className="col-sm-4">
+          <button className="btn btn-primary btn-danger btn-sm" onClick={() => this.deleteRow(this.props.model)} data-test="delete-btn">
+            Delete Row
+          </button>
+          <button className="btn btn-outline-secondary btn-sm" onClick={() => this.callParentMethod(this.props.model)} data-test="parent-btn">
+            Call Parent Method
+          </button>
+        </div>
+      </div>
+    );
+  }
+}

src/examples/slickgrid/Example19-preload.tsx

@@ -0,0 +1,12 @@
+import { forwardRef } from 'react';
+
+export const Example19Preload = forwardRef((props: any, ref: any) => {
+  return (
+    <div ref={ref} className="container-fluid" style={{ marginTop: '10px' }}>
+      <h4>
+        <i className="mdi mdi-sync mdi-spin mdi-50px"></i>
+        Loading...
+      </h4>
+    </div>
+  );
+});