work on fields dashboard

3 files changed, 83 insertions, 8 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 6a5103af9..c0b05b082 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -129,7 +129,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
     selectAxes = (axes: string[]) => {
         this.layoutDoc._dataViz_axes = new List<string>(axes);
-        DocCreatorMenu.Instance.generateTemplates('');
+        //axes.forEach(axis => console.log(axis)) 
+        //DocCreatorMenu.Instance.generateTemplates('');
     };
     @computed.struct get titleCol() {
         return StrCast(this.layoutDoc._dataViz_titleCol);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 763de0eba..baed9009b 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -774,6 +774,50 @@
                 align-items: center;
                 color: whitesmoke;
             }
+
+            .field-type-selection-container {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                background-color: rgb(40, 40, 40);
+                border: 1px solid rgb(100, 100, 100);
+                border-radius: 3px;
+                width: 30%;
+                height: 25px;
+                padding-left: 3px;
+                color: whitesmoke;
+
+                .bubbles {
+                    display: none;
+                }
+
+                .text {
+                    margin-top: 5px;
+                    margin-bottom: 5px;
+                }
+
+                &:hover {
+                    width: 30% + 8;
+                }
+
+                &:hover .bubbles {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: flex-start;
+                }
+
+                &:hover .type-display {
+                    display: none;
+                }
+
+                .bubble {
+                    margin: 5px;
+                }
+
+                &:hover .bubble {
+                    margin-top: 7px;
+                }
+            }
         }
 
         .field-description-container {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 19881f4d2..d3117da22 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -763,6 +763,29 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         this._fields = newFields;
     }
 
+    @action removeField = (field: {title: string, type: string, id: number}) => {
+        if (this._dataViz?.axes.includes(field.title)) {
+            this._dataViz.selectAxes(this._dataViz.axes.filter(col => col !== field.title));
+        } else {
+            const toRemove = this._fields.filter(f => f.id === field.id);
+            if (!toRemove) return;
+
+            if (toRemove.length > 1) {
+                while (toRemove.length > 1) {
+                    toRemove.pop();
+                }
+            }
+
+            if (this._fields.length === 1) {
+                this._fields = []  
+            } else {
+                console.log(this._fields)
+                this._fields.splice(this._fields.indexOf(toRemove[0]), 1);
+                console.log(this._fields)
+            }
+        }   
+    }
+
     get dashboardContents(){
         return (
         <div className='docCreatorMenu-dashboard-view'>
@@ -771,16 +794,23 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
                 <FontAwesomeIcon icon='plus'/>
             </button>
             </div>
-            {this.fieldsInfos.map(field => 
-                <div className='field-panel'>
+            {this.fieldsInfos.map((field, index) => 
+                <div className='field-panel' id={`${index}`}>
                     <div className='properties-wrapper'>
-                        <input className='field-property-container' defaultValue={field.title} placeholder={'Enter title'} style={{width: field.title === '' ? '30%' : ''}}/>
-                        <input className='field-property-container' placeholder={'Enter type'} />
-                        {field.type === 'Text' ? 
-                        <input className='field-property-container' placeholder={'Enter description'} /> : null}
+                        <input className='field-property-container' id={`${Math.random() * 100}`} defaultValue={field.title} placeholder={'Enter title'} style={{width: field.title === '' ? '30%' : ''}}/>
+                        <div className='field-type-selection-container'>
+                            <span>Type:</span><span>&nbsp;</span>
+                            <span className='type-display'>{field.type ? field.type === 'text' ? 'Text' : 'File' : ''}</span>
+                            <div className='bubbles'>
+                                <input className='bubble' type="radio" name="type" onClick={() => {field.type = 'text'; this.forceUpdate()}}/> 
+                                <div className='text'>Text</div>
+                                <input className='bubble' type="radio" name="type" onClick={() => {field.type = 'visual'; this.forceUpdate()}}/> 
+                                <div className='text'>File</div>
+                            </div>
+                        </div>
                     </div>
                     <textarea className='field-description-container' placeholder={'Enter description to enhance template generation'} />
-                    <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {console.log(this._fields); this._fields = this._fields.splice(this._fields.indexOf(field), 1); console.log(this._fields); this.forceUpdate()}))}>
+                    <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}>
                         <FontAwesomeIcon icon='trash'/>
                     </button>
                 </div>