From 3d363bf74ab276c0d4c77b2f673281c096e62c64 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 10 Apr 2025 00:54:23 -0400
Subject: UI for adding basic conditional logic

---
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.scss  | 121 ++++++++++++++++++++-
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx   |  72 +++++++++++-
 2 files changed, 188 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
index 2881fbb66..8f182d37f 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
@@ -958,12 +958,14 @@
             border-top-right-radius: 5px;
             border-top-left-radius: 5px;
             width: 100%;
-            height: 20px;
+            height: fit-content;
             background-color: rgb(50, 50, 50);
             color: rgb(168, 167, 167);
+            font-size: medium;
 
             .field-title {
                 color: whitesmoke;
+                font-size: large;
             }
 
             &:hover {
@@ -1063,14 +1065,14 @@
 
         .desc-box {
             width: 88%;
-            height: 50px;
+            height: fit-content;
             border: 1px solid rgb(180, 180, 180);
             border-radius: 5px;
             background-color: rgb(50, 50, 50);
             box-shadow: 5px 5px rgb(29, 29, 31);
 
             .content {
-                height: calc(100% - 20px);
+                height: fit-content;
                 width: 100%;
                 background-color: rgb(50, 50, 50);
                 border-bottom-right-radius: 5px;
@@ -1082,4 +1084,117 @@
 
     }
 
+    .conditionals-section {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        width: 100%;
+
+        .conditionals-title {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+            justify-content: center;
+            align-items: center;
+            margin: 5px;
+            margin-bottom: 20px;
+            font-size: large;
+        }
+    }
+
+    .form-row {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: flex-start;
+        color: whitesmoke; 
+        width: 100%;
+        height: fit-content;
+        margin-bottom: 15px;
+        flex-wrap: wrap;
+        gap: 5px;
+
+        .form-row-plain-text {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            width: fit-content;
+            padding-top: 2px;
+            padding-bottom: 2px;
+        }
+
+        .operator-options-dropdown {
+            display: flex;
+            flex-direction: column;
+            height: fit-content;
+
+            .operator-dropdown-option {
+                display: none;
+            }
+
+            .operator-dropdown-current {
+                border-radius: 5px;
+                background-color: rgb(50, 50, 50);
+                border: 1px solid rgb(180, 180, 180);
+                text-align: center;
+                padding: 2.25px;
+                padding-left: 4px;
+                padding-right: 4px;
+            }
+
+            &:hover .operator-dropdown-current {
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &:hover .operator-dropdown-option {
+                display: flex;
+                height: fit-content;
+                align-items: center;
+                border: 1px solid rgb(180, 180, 180);
+                background-color: rgb(50, 50, 50);
+                padding: 2.25px;
+                padding-left: 8px;
+                padding-right: 8px;
+                text-align: center;
+
+                &:hover {
+                    background-color: rgb(70, 70, 70);
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .form-row-textarea {
+            height: 24px;
+            width: 70px;
+            border-radius: 5px;
+            background-color: rgb(50, 50, 50);
+            border: 1px solid rgb(180, 180, 180);
+            resize: none;
+            overflow-y: scroll;
+            white-space: nowrap;
+        }
+
+    }
+
+    .form {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: flex-start;
+        width: 80%;
+
+        .form-action-button {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 3px;
+            cursor: pointer;
+
+        }
+    }
+
 }
\ No newline at end of file
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>
                     </>
                 }
-- 
cgit v1.2.3-70-g09d2