UI for adding basic conditional logic

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>
                     </>
                 }