TableBox editable headers start

1 files changed, 107 insertions, 1 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 500e7b639..aaedba202 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -1,4 +1,4 @@
-import { action, computed } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc } from '../../../../../fields/Doc';
@@ -10,6 +10,7 @@ import { DocumentView } from '../../DocumentView';
 import { DataVizView } from '../DataVizBox';
 import { LinkManager } from '../../../../util/LinkManager';
 import { DocCast } from '../../../../../fields/Types';
+import { EditableText, Size, Type } from 'browndash-components';
 
 interface TableBoxProps {
     rootDoc: Doc;
@@ -21,6 +22,8 @@ interface TableBoxProps {
 
 @observer
 export class TableBox extends React.Component<TableBoxProps> {
+    @observable editableHeaders = this.columns;
+    @observable editableCells = this._tableData;
 
     @computed get _tableData() {
         if (this.incomingLinks.length! <= 0) return this.props.pairs;
@@ -39,6 +42,106 @@ export class TableBox extends React.Component<TableBoxProps> {
         return this._tableData.length ? Array.from(Object.keys(this._tableData[0])) : [];
     }
 
+    // render() {
+    //     return (
+    //         <div className="table-container">
+    //             <table className="table">
+    //                 <thead>
+    //                     <tr className="table-row">
+    //                         {this.editableHeaders
+    //                             .filter(col => !col.startsWith('select'))
+    //                             .map(col => {
+    //                                 const header = React.createRef<HTMLElement>();
+    //                                 const displayColName = col;
+    //                                 return (
+    //                                     <th
+    //                                         key={this.editableHeaders.indexOf(col)}
+    //                                         ref={header as any}
+    //                                         style={{
+    //                                             color: this.props.axes.slice().reverse().lastElement() === col ? 'green' : this.props.axes.lastElement() === col ? 'red' : undefined,
+    //                                             fontWeight: this.props.axes.includes(col) ? 'bolder' : 'normal',
+    //                                         }}
+    //                                         onPointerDown={e => {
+    //                                             const downX = e.clientX;
+    //                                             const downY = e.clientY;
+    //                                             setupMoveUpEvents(
+    //                                                 {},
+    //                                                 e,
+    //                                                 e => {
+    //                                                     const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!;
+    //                                                     const targetCreator = (annotationOn: Doc | undefined) => {
+    //                                                         const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!);
+    //                                                         embedding._dataVizView = DataVizView.LINECHART;
+    //                                                         embedding._data_vizAxes = new List<string>([col, col]);
+    //                                                         embedding._draggedFrom = this.props.docView?.()!.rootDoc!;
+    //                                                         embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!;
+    //                                                         return embedding;
+    //                                                     };
+    //                                                     if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) {
+    //                                                         DragManager.StartAnchorAnnoDrag([header.current!], new DragManager.AnchorAnnoDragData(this.props.docView()!, sourceAnchorCreator, targetCreator), downX, downY, {
+    //                                                             dragComplete: e => {
+    //                                                                 if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) {
+    //                                                                     e.linkDocument.link_displayLine = true;
+    //                                                                     e.linkDocument.link_matchEmbeddings = true;
+    //                                                                     // e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.rootDoc;
+    //                                                                     // e.annoDragData.linkSourceDoc.followLinkZoom = false;
+    //                                                                 }
+    //                                                             },
+    //                                                         });
+    //                                                         return true;
+    //                                                     }
+    //                                                     return false;
+    //                                                 },
+    //                                                 emptyFunction,
+    //                                                 action(e => {
+    //                                                     const newAxes = this.props.axes;
+    //                                                     if (newAxes.includes(col)) {
+    //                                                         newAxes.splice(newAxes.indexOf(col), 1);
+    //                                                     } else if (newAxes.length >= 1) {
+    //                                                         newAxes[1] = col;
+    //                                                     } else {
+    //                                                         newAxes[0] = col;
+    //                                                     }
+    //                                                     this.props.selectAxes(newAxes);
+    //                                                 })
+    //                                             );
+    //                                         }}>
+    //                                         <EditableText
+    //                                             val={displayColName}
+    //                                             setVal={action(val => {
+    //                                                 this.editableHeaders[this.editableHeaders.indexOf(col)] = val as string
+    //                                                 this.props.pairs.map(pair => {
+    //                                                     pair[val as string] = pair[col];
+    //                                                     delete pair[col]
+    //                                                 })
+    //                                             })}
+    //                                             color={"black"}
+    //                                             size={Size.LARGE}
+    //                                         />
+    //                                     </th>
+    //                                 );
+    //                             })}
+    //                     </tr>
+    //                 </thead>
+    //                 <tbody>
+    //                     {this._tableData?.map((p, i) => {
+    //                         return (
+    //                             <tr key={i} className="table-row" onClick={action(e => (p['select' + this.props.docView?.()?.rootDoc![Id]] = !p['select' + this.props.docView?.()?.rootDoc![Id]]))}>
+    //                                 {this.editableHeaders.map(col => (
+    //                                     <td key={this.editableHeaders.indexOf(col)} style={{ fontWeight: p['select' + this.props.docView?.()?.rootDoc![Id]] ? 'bold' : '' }}>
+    //                                         {p[col]}
+    //                                     </td>
+    //                                 ))}
+    //                             </tr>
+    //                         );
+    //                     })}
+    //                 </tbody>
+    //             </table>
+    //         </div>
+    //     );
+    // }
+
+
     render() {
         return (
             <div className="table-container">
@@ -125,4 +228,7 @@ export class TableBox extends React.Component<TableBoxProps> {
             </div>
         );
     }
+
+
+
 }