diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 72 |
1 files changed, 70 insertions, 2 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index daba990e4..3cf9baa2c 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -65,6 +65,15 @@ export type Col = { defaultContent?: string; }; +export type Conditional = { + field: string; + operator: '=' | '>' | '<'; + condition: string; + target: 'self' | 'template'; + attribute: string; + value: string; +} + interface DocCreateMenuProps { addDocTab: (doc: Doc | Doc[], where: OpenWhere) => boolean; } @@ -90,6 +99,8 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> @observable _userCreatedFields: Col[] = []; @observable _selectedCols: { title: string; type: string; desc: string }[] | undefined = []; @observable _collapsedCols: String[] = []; //any columns whose options panels are hidden + @observable _conditions: Conditional[] = []; + @observable _currEditingConditional: Conditional = {} as Conditional; @observable _layout: { type: LayoutType; yMargin: number; xMargin: number; columns?: number; repeat: number } = { type: LayoutType.FREEFORM, yMargin: 10, xMargin: 10, columns: 3, repeat: 0 }; @observable _savedLayouts: DataVizTemplateLayout[] = []; @@ -1326,6 +1337,61 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> } get dashboardContents() { + const conditionForm = (title: String, parameters?: Conditional) => { + + const params: Conditional = parameters ?? this._currEditingConditional; + + return ( + <div className='form'> + <div className='form-row'> + <div className='form-row-plain-text'>If</div> + <div className='form-row-plain-text'>{title}</div> + <div className="operator-options-dropdown"> + <span className="operator-dropdown-current">{params.operator ?? '='}</span> + <div className='operator-dropdown-option' onPointerDown={() => {params.operator = '='}}>{'='}</div> + <div className='operator-dropdown-option' onPointerDown={() => {params.operator = '>'}}>{'>'}</div> + <div className='operator-dropdown-option' onPointerDown={() => {params.operator = '<'}}>{'<'}</div> + </div> + <textarea + className="form-row-textarea" + onChange={e => runInAction(() => params.condition = e.target.value)} + placeholder='value' + defaultValue={params.condition} + /> + <div className='form-row-plain-text'>Then</div> + <div className="operator-options-dropdown"> + <span className="operator-dropdown-current">{params.target ?? 'self'}</span> + <div className='operator-dropdown-option' onPointerDown={() => {params.target = 'self'}}>{'self'}</div> + <div className='operator-dropdown-option' onPointerDown={() => {params.target = 'template'}}>{'template'}</div> + </div> + <textarea + className="form-row-textarea" + onChange={e => runInAction(() => params.attribute = e.target.value)} + placeholder='attribute' + defaultValue={params.attribute} + /> + <div className='form-row-plain-text'>{'becomes'}</div> + <textarea + className="form-row-textarea" + onChange={e => runInAction(() => params.value = e.target.value)} + placeholder='value' + defaultValue={params.value} + /> + </div> + <div className='form-action-button' onPointerDown={e => this.setUpButtonClick(e, runInAction(() => () => { + if (this._currEditingConditional === params) { + this._conditions.push(params); + this._currEditingConditional = {} as Conditional; + } else { + this._conditions = this._conditions.filter(cond => cond !== params); + } + }))}> + <FontAwesomeIcon icon={this._currEditingConditional === params ? 'plus' : 'minus'} color='white'/> + </div> + </div> + ) + } + const fieldPanel = (field: Col, id: number) => ( <div className="field-panel" key={id}> <div className="top-bar" onPointerDown={e => this.setUpButtonClick(e, runInAction(() => () => { @@ -1382,8 +1448,10 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> placeholder={this._dataViz?.GPTSummary?.get(field.title)?.desc ?? 'Add a description/prompt to help with template generation.'} /> </div> - <div> - + <div className="conditionals-section"> + <span className="conditionals-title">Conditional Logic</span> + {conditionForm(field.title, this._currEditingConditional)} + {this._conditions.map(condition => conditionForm(condition.field, condition))} </div> </> } |