data fields

1 files changed, 49 insertions, 44 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 2565a9332..873bfa734 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -30,7 +30,7 @@ import './DocCreatorMenu.scss';
 import { TemplateField, ViewType } from './TemplateFieldTypes/TemplateField';
 import { Template } from './Template';
 import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from './TemplateBackend';
-import { TemplateManager } from './Backend/TemplateManager';
+import { Conditional, TemplateManager } from './Backend/TemplateManager';
 import { DrawingFillHandler } from '../../../smartdraw/DrawingFillHandler';
 import { CgPathIntersect } from 'react-icons/cg';
 import { StaticContentField } from './TemplateFieldTypes/StaticContentField';
@@ -71,15 +71,6 @@ export type Col = {
     AIGenerated?: boolean;
 };
 
-export type Conditional = {
-    field: string;
-    operator: '=' | '>' | '<';
-    condition: string;
-    target: 'self' | 'template';
-    attribute: string;
-    value: string;
-}
-
 interface DocCreateMenuProps {
     addDocTab: (doc: Doc | Doc[], where: OpenWhere) => boolean;
 }
@@ -364,15 +355,6 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         this._pageY = y + translation.y;
     };
 
-    async getIcon(doc: Doc) {
-        const docView = DocumentView.getDocumentView(doc);
-        if (docView) {
-            docView.ComponentView?.updateIcon?.();
-            return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));
-        }
-        return undefined;
-    }
-
     @action updateRenderedPreviewCollection = async (template: Template) => {
         this._docsRendering = true;
         this._fullyRenderedDocs = this._dataViz ? ((await this.templateManager.createDocsFromTemplate(this._dataViz, template, this.fieldsInfos, this.DEBUG_MODE)).filter(doc => doc).map(doc => doc!) ?? []) as unknown as Doc[] : [];
@@ -469,11 +451,18 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     };
 
     @action setColType = (column: Col, type: TemplateFieldType) => {
+        if (type === TemplateFieldType.DATA) {
+            this.templateManager.addDataField(column.title);
+        } else if (column.type === TemplateFieldType.DATA) {
+            this.templateManager.removeDataField(column.title);
+        }
+
         if (this.selectedFields.includes(column.title)) {
             this._dataViz?.setColumnType(column.title, type);
         } else {
             column.type = type;
         }
+
         this.forceUpdate();
     };
 
@@ -576,9 +565,11 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         } else {
             this._dataViz?.updateColDefaults();
 
-            templates.push(...this.templateManager.getValidTemplates(this.fieldsInfos));
+            const contentFields = this.fieldsInfos.filter(field => field.type !== TemplateFieldType.DATA);
+
+            templates.push(...this.templateManager.getValidTemplates(contentFields));
 
-            const assignments = await this.assignColsToFields(templates, this.fieldsInfos);
+            const assignments = await this.assignColsToFields(templates, contentFields);
 
             const renderedTemplatePromises = assignments.map(([template, assgns]) => TemplateMenuAIUtils.applyGPTContentToTemplate(template, assgns));
 
@@ -918,6 +909,8 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     }
 
     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;
@@ -942,8 +935,9 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                     <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'}}>{'own'}</div>
-                        <div className='operator-dropdown-option' onPointerDown={() => {params.target = 'template'}}>{`template's`}</div>
+                        {contentFieldTitles.map(fieldTitle => 
+                            <div className='operator-dropdown-option' onPointerDown={() => {params.target = fieldTitle}}>{fieldTitle === title ? 'own' : fieldTitle}</div>
+                        )}
                     </div>
                     <textarea
                         className="form-row-textarea"
@@ -990,38 +984,49 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                         <div className="opt-box">
                             <div className="top-bar"> Type </div>
                             <div className="content">
-                                <span className="type-display">{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}</span>
+                                <span className="type-display">{
+                                    field.type === TemplateFieldType.TEXT ? 'Text Field' 
+                                    : field.type === TemplateFieldType.VISUAL ? 'File Field' 
+                                    : field.type === TemplateFieldType.DATA ? 'Data Field' 
+                                    : ''
+                                }</span>
                                 <div className="bubbles">
                                     <input className="bubble" type="radio" name="type" onClick={() => this.setColType(field, TemplateFieldType.TEXT)} />
                                     <div className="text">Text</div>
                                     <input className="bubble" type="radio" name="type" onClick={() => this.setColType(field, TemplateFieldType.VISUAL)} />
                                     <div className="text">File</div>
+                                    <input className="bubble" type="radio" name="type" onClick={() => this.setColType(field, TemplateFieldType.DATA)} />
+                                    <div className="text">Data</div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div className="sizes-box">
-                        <div className="top-bar"> Valid Sizes </div>
-                        <div className="content">
-                            <div className="bubbles">
-                                {Object.values(TemplateFieldSize).map(size => (
-                                    <div key={field + size}>
-                                        <input className="bubble" type="checkbox" name="type" checked={field.sizes.includes(size)} onChange={e => this.modifyColSizes(field, size, e.target.checked)} />
-                                        <div className="text">{size}</div>
+                    { field.type === TemplateFieldType.DATA ? null :
+                        (<> 
+                            <div className="sizes-box">
+                                <div className="top-bar"> Valid Sizes </div>
+                                <div className="content">
+                                    <div className="bubbles">
+                                        {Object.values(TemplateFieldSize).map(size => (
+                                            <div key={field + size}>
+                                                <input className="bubble" type="checkbox" name="type" checked={field.sizes.includes(size)} onChange={e => this.modifyColSizes(field, size, e.target.checked)} />
+                                                <div className="text">{size}</div>
+                                            </div>
+                                        ))}
                                     </div>
-                                ))}
+                                </div>
                             </div>
-                        </div>
-                    </div>
-                    <div className="desc-box">
-                        <div className="top-bar"> Prompt </div>
-                        <textarea
-                            className="content"
-                            onChange={e => this.setColDesc(field, e.target.value)}
-                            defaultValue={field.desc === this._dataViz?.GPTSummary?.get(field.title)?.desc ? '' : field.desc}
-                            placeholder={this._dataViz?.GPTSummary?.get(field.title)?.desc ?? 'Add a description/prompt to help with template generation.'}
-                        />
-                    </div>
+                            <div className="desc-box">
+                                <div className="top-bar"> Prompt </div>
+                                <textarea
+                                    className="content"
+                                    onChange={e => this.setColDesc(field, e.target.value)}
+                                    defaultValue={field.desc === this._dataViz?.GPTSummary?.get(field.title)?.desc ? '' : field.desc}
+                                    placeholder={this._dataViz?.GPTSummary?.get(field.title)?.desc ?? 'Add a description/prompt to help with template generation.'}
+                                />
+                            </div> 
+                        </>)
+                    }
                     <div className="conditionals-section">
                         <span className="conditionals-title">Conditional Logic</span>
                         {conditionForm(field.title, this._currEditingConditional, true)}