diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 47 |
1 files changed, 32 insertions, 15 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index 3218b9765..50d6b7fe0 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -50,6 +50,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co @observable _templateDocs: Doc[] = []; @observable _selectedTemplate: Doc | undefined = undefined; @observable _fields: {title: string, type: string, id: number}[] = []; + @observable _selectedCols: {title: string, type: string, id: number}[] | undefined = []; @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns?: number, repeat: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, repeat: 0}; @observable _layoutPreview: boolean = true; @@ -133,7 +134,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co } @computed get fieldsInfos(): {title: string, type: string, id: number}[] { - return this.selectedFields.map(field => {return {title: field, type: '', id: Math.random() * 100000}}).concat(this._fields); + return this.selectedFields.map(field => {return {title: field, type: this._dataViz?.getFieldType(field) ?? '', id: Math.random() * 100000}}).concat(this._fields); } @computed get canMakeDocs(){ @@ -195,7 +196,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co this._disposers.templates = reaction(() => this._templateDocs.slice(), (docs) => docs.map(this.getIcon)); this._disposers.gpt = reaction(() => this._GPTTemplates.slice(), (docs) => docs.map(this.getIcon)); //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')}) - this._disposers.lightbox = reaction(() => LightboxView.LightboxDoc(), doc => { doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu()}) + this._disposers.lightbox = reaction(() => LightboxView.LightboxDoc(), doc => { doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu()}); + this._disposers.fields = reaction(() => this._dataViz?.axes, cols => this._selectedCols = cols?.map(col => { return {title: col, type: '', id: Math.random() * 100000}})) } componentWillUnmount() { @@ -207,6 +209,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co updateIcons = (docs: Doc[]) => { docs.map(this.getIcon) } @action + updateSelectedCols = (cols: string[]) => { + this._selectedCols + } + + @action toggleDisplay = (x: number, y: number) => { if (this._shouldDisplay) { this._shouldDisplay = false; @@ -414,7 +421,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; // mainCollection.addDocument(doc); //this._dataViz?.getRandomSample(); - console.log(this._dataViz?._GPTSummary?.get('IMG')) + console.log(this._dataViz?.GPTSummary?.get('IMG')) } get templatesPreviewContents(){ @@ -788,6 +795,15 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co } } + setFieldType = (field: {title: string, type: string, id: number}, type: string) => { + if (this.selectedFields.includes(field.title)) { + this._dataViz?.setFieldType(field.title, type); + } else { + field.type = type; + } + this.forceUpdate(); + } + get dashboardContents(){ return ( <div className='docCreatorMenu-dashboard-view'> @@ -801,24 +817,25 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co <div className='properties-wrapper'> <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> </span> - <span className='type-display'>{field.type ? field.type === 'text' ? 'Text' : 'File' : ''}</span> + {field.type ? null : <span className='placeholder'>Select media type</span>} + <span className='type-display'>{field.type ? field.type === 'text' ? 'Text Field' : 'File Field' : ''}</span> <div className='bubbles'> - <input className='bubble' type="radio" name="type" onClick={() => {field.type = 'text'; this.forceUpdate()}}/> + <input className='bubble' type="radio" name="type" onClick={() => {this.setFieldType(field, 'text')}}/> <div className='text'>Text</div> - <input className='bubble' type="radio" name="type" onClick={() => {field.type = 'visual'; this.forceUpdate()}}/> + <input className='bubble' type="radio" name="type" onClick={() => {this.setFieldType(field, 'visual')}}/> <div className='text'>File</div> </div> </div> </div> - <textarea className='field-description-container' placeholder={'Add a description to help with template generation.'} /> - this._dataViz?._GPTSummary?.get(field.title) ?? - <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}> - <FontAwesomeIcon icon='trash'/> - </button> - <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}> - <FontAwesomeIcon icon='lightbulb'/> - </button> + <textarea className='field-description-container' placeholder={this._dataViz?.GPTSummary?.get(field.title) ?? 'Add a description to help with template generation.'} /> + <div> + <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}> + <FontAwesomeIcon icon='trash'/> + </button> + {/* <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}> + <FontAwesomeIcon icon='lightbulb'/> + </button> */} + </div> </div> )} </div> |