conditionals

3 files changed, 44 insertions, 13 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index e6db79339..1e54c0628 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -914,12 +914,30 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         );
     }
 
+    @observable private _newCondCache: Record<string, Conditional> = {};
+
+    getParams = (title: string, parameters?: Conditional): Conditional => {
+        if (parameters) return parameters;
+
+        if (!this._newCondCache[title]) {
+            this._newCondCache[title] = observable<Conditional>({
+                field: title,
+                operator: '=',
+                condition: '',
+                target: '',
+                attribute: '',
+                value: ''
+            });
+        }
+        return this._newCondCache[title];
+    };
+
     get dashboardContents() {
         const contentFieldTitles = this.fieldsInfos.filter(field => field.type !== TemplateFieldType.DATA).map(field => field.title).concat('Template');
 
         const conditionForm = (title: string, parameters?: Conditional, empty: boolean = false) => {
 
-            const params: Conditional = parameters ?? this._currEditingConditional;
+            var params: Conditional = this.getParams(title, parameters);
 
             return (
             <div className='form'>
@@ -937,31 +955,41 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                         className="form-row-textarea"
                         onChange={e => runInAction(() => params.condition = e.target.value)}
                         placeholder='value'
-                        defaultValue={params.condition}
+                        value={params.condition}
                     />
                     <div className='form-row-plain-text'>then</div>
                     <div className="operator-options-dropdown">
-                        <span className="operator-dropdown-current">{params.target ?? 'Own'}</span>
+                        <span className="operator-dropdown-current">{params.target}</span>
                         {contentFieldTitles.map(fieldTitle => 
                             <div className='operator-dropdown-option' onPointerDown={() => {params.target = fieldTitle}}>{fieldTitle === title ? 'Own' : fieldTitle}</div>
                         )}
                     </div>
-                    <textarea
+                    <input
                         className="form-row-textarea"
                         onChange={e => runInAction(() => params.attribute = e.target.value)}
                         placeholder='attribute'
-                        defaultValue={params.attribute}
+                        value={params.attribute}
                     />
                     <div className='form-row-plain-text'>{'becomes'}</div>
-                    <textarea
+                    <input
                         className="form-row-textarea"
                         onChange={e => runInAction(() => params.value = e.target.value)}
                         placeholder='value'
-                        defaultValue={params.value}
+                        value={params.value}
                     />
                 </div>
                 {empty ? 
-                <DocCreatorMenuButton icon={'plus'} styles={'float-right border'} function={() => this.templateManager.addFieldCondition(title, params)}/>
+                <DocCreatorMenuButton icon={'plus'} styles={'float-right border'} function={() => {
+                    this._newCondCache[title] = observable<Conditional>({
+                        field: title,
+                        operator: '=',
+                        condition: '',
+                        target: '',
+                        attribute: '',
+                        value: ''
+                    });
+                    this.templateManager.addFieldCondition(title, params);
+                }}/>
                 :
                 <DocCreatorMenuButton icon={'minus'} styles={'float-right border'} function={() => this.templateManager.removeFieldCondition(title, params)}/>
                 }
@@ -1036,7 +1064,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                     }
                     <div className="conditionals-section">
                         <span className="conditionals-title">Conditional Logic</span>
-                        {conditionForm(field.title, this._currEditingConditional, true)}
+                        {conditionForm(field.title, undefined, true)}
                         {this.templateManager.conditionalFieldLogic[field.title]?.map(condition => conditionForm(condition.field, condition))}
                     </div>
                     </>
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
index 19be65351..fd87ae973 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
@@ -104,12 +104,15 @@ export class Template {
         fieldStatements && fieldStatements.forEach(statement => {
             console.log(statement);
             if (content === statement.condition) {
-                if (statement.target === 'template') {
-                    console.log('on template')
+                if (statement.target === 'Template') {
                     this._mainField.renderedDoc![statement.attribute] = statement.value;
+                    Object.assign(this._mainField.settings.opts, {[statement.attribute]: statement.value});
                 } else {
                     const targetField: TemplateField = this.getFieldByTitle(statement.target) as TemplateField;
-                    targetField && (targetField.renderedDoc![statement.attribute] = statement.value);
+                    if (targetField) {
+                        targetField.renderedDoc![statement.attribute] = statement.value;
+                        Object.assign(targetField.settings.opts, {[statement.attribute]: statement.value});
+                    } 
                 }
             }
         })
diff --git a/src/client/views/smartdraw/DrawingFillHandler.tsx b/src/client/views/smartdraw/DrawingFillHandler.tsx
index 8918d1b0e..194c3d87b 100644
--- a/src/client/views/smartdraw/DrawingFillHandler.tsx
+++ b/src/client/views/smartdraw/DrawingFillHandler.tsx
@@ -42,7 +42,7 @@ export class DrawingFillHandler {
                 const { href } = ImageCast(imageField).url;
                 const hrefParts = href.split('.');
                 const structureUrl = `${hrefParts.slice(0, -1).join('.')}_o.${hrefParts.lastElement()}`;
-                const styleUrl = `${hrefParts.slice(0, -1).join('.')}_o.${hrefParts.lastElement()}`;
+                const styleUrl = styleDoc ? `${hrefParts.slice(0, -1).join('.')}_o.${hrefParts.lastElement()}` : undefined;
                 return imageUrlToBase64(structureUrl)
                     .then(gptDescribeImage)
                     .then((prompt, newPrompt = user_prompt || prompt) =>