diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss | 121 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 72 |
2 files changed, 188 insertions, 5 deletions
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> </> } |