fields set properly

6 files changed, 47 insertions, 21 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
index 98d630dae..c2e59b4a4 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
@@ -695,6 +695,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    color: black;
     width: calc(100% - 50px);
     height: calc(100% - 50px);
     position: relative;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index ea38430ca..fe91254f8 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -56,6 +56,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _fullyRenderedDocs: Doc[] = [];
     @observable _renderedDocCollectionPreview: Doc | undefined = undefined;
     @observable _renderedDocCollection: Doc | undefined = undefined;
+    @observable _docsRendering: boolean = false;
 
     @observable _userTemplates: {template: Template, doc: Doc}[] = []; //!!! used to keep track of all templates, should be refactored to work with actual templates and not docs
     @observable _selectedTemplate: Template | undefined = undefined;
@@ -109,21 +110,20 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this._dataViz = dataViz;
     };
     @action addUserTemplate = (template: Template) => {
-        this._userTemplates.push({template: template, doc: template.mainField.renderedDoc()});
+        this._userTemplates.push({template: template, doc: template.getRenderedDoc()});
     };
     @action removeUserTemplate = (template: Template) => {
         this._userTemplates = this._userTemplates.filter(info => info.template !== template);
     }
     @action updateTemplatePreview = (template: Template) => {
         template.renderUpdates();
-        const preview = {template: template, doc: template.mainField.renderedDoc()};
-        const doc = template.mainField.renderedDoc();
-        this._suggestedTemplatePreviews.map(t => { return t.template === preview.template ? {doc: doc, template: template} : t }); //prettier-ignore
-        this._userTemplates = this._userTemplates.map(t => { return t.template === preview.template ? {doc: doc, template: template} : t }); //prettier-ignore
+        const preview = {template: template, doc: template.getRenderedDoc()};
+        this._suggestedTemplatePreviews.map(t => { return t.template === preview.template ? preview : t }); //prettier-ignore
+        this._userTemplates = this._userTemplates.map(t => { return t.template === preview.template ? preview : t }); //prettier-ignore
     };
     @action setSuggestedTemplates = (templates: Template[]) => {
         this._suggestedTemplates = templates;
-        this._suggestedTemplatePreviews = templates.map(template => {return {template: template, doc: template.mainField.renderedDoc()}}); //prettier-ignore
+        this._suggestedTemplatePreviews = templates.map(template => {return {template: template, doc: template.getRenderedDoc()}}); //prettier-ignore
     };
 
     @computed get docsToRender() {
@@ -682,6 +682,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     createDocsFromTemplate = async (template: Template) => {
         const dv = this._dataViz;
         if (!dv) return;
+
+        this._docsRendering = true;
+
         const fields: string[] = Array.from(Object.keys(dv.records[0]));  
         const selectedRows = NumListCast(dv.layoutDoc.dataViz_selectedRows);
     
@@ -696,12 +699,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     
         const processContent = async (content: {[title: string]: string}) => {
             const templateCopy = template.cloneBase(); 
-    
-            console.log('rows: ', content, '---------------- fields: ', fields)
 
             fields.filter(title => title).forEach(title => {
                 const field = templateCopy.getFieldByTitle(title);
-                console.log('field: ', field);
                 if (field === undefined) { return };
                 field.setContent(content[title]);
             });
@@ -717,14 +717,15 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     
             await Promise.all(gptPromises);
     
-            console.log(templateCopy);
-            return templateCopy.mainField.renderedDoc();
+            return templateCopy.getRenderedDoc();
         };
     
         const promises = rowContents.map(content => processContent(content));
     
         const renderedDocs = await Promise.all(promises);
 
+        this._docsRendering = false;
+
         return renderedDocs;
     }
     
@@ -831,7 +832,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                                     className="option-button left"
                                                     onPointerDown={e =>
                                                         this.setUpButtonClick(e, () => {
-                                                            this.setExpandedView(template.mainField.renderedDoc());
+                                                            this.setExpandedView(template.getRenderedDoc());
                                                         })
                                                     }>
                                                     <FontAwesomeIcon icon="magnifying-glass" color="white" />
@@ -900,7 +901,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                                 className="option-button left"
                                                 onPointerDown={e =>
                                                     this.setUpButtonClick(e, () => {
-                                                        this.setExpandedView(template.mainField.renderedDoc());
+                                                        this.setExpandedView(template.getRenderedDoc());
                                                     })
                                                 }>
                                                 <FontAwesomeIcon icon="magnifying-glass" color="white" />
@@ -1105,7 +1106,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const doc: Doc | undefined = altLayout ? altLayout.template : this._fullyRenderedDocs[0]; //!!! might cause a slow down
         if (!doc) return;
 
-        return !this._renderedDocCollection? null : (
+        return this._docsRendering ? (
+            <div className="loading-spinner">
+                <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
+            </div> 
+            ) : !this._renderedDocCollection? null : (
             <div className="docCreatorMenu-layout-preview-window-wrapper" id={String(id) ?? undefined}>
                 <DocumentView
                     Document={this._renderedDocCollection}
@@ -1131,7 +1136,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     hideDecorations={true}
                 />
             </div>
-        );
+        )
     };
 
     get optionsMenuContents() {
@@ -1213,7 +1218,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                     clickEv.stopPropagation();
                                     if (!this._selectedTemplate) return;
                                     const layout: DataVizTemplateLayout = {
-                                        template: this._selectedTemplate.mainField.renderedDoc(),
+                                        template: this._selectedTemplate.getRenderedDoc(),
                                         layout: { type: this._layout.type, xMargin: this._layout.xMargin, yMargin: this._layout.yMargin, repeat: 0 },
                                         columns: this.columnsCount,
                                         rows: this.rowsCount,
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
index 12c0bea9a..68cf027b0 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
@@ -81,7 +81,8 @@ export class DynamicField implements Field {
     }
 
     applyAttributes = (field: Field) => {
-        return;
+        field.setTitle(this.title);
+        field.updateRenderedDoc(this.renderedDoc());
     }
 
     getChildDimensions = (coords: { tl: [number, number]; br: [number, number] }): FieldDimensions => {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
index de542b40b..bb8489c21 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
@@ -25,7 +25,7 @@ export class FieldUtils {
         doc._height = oldDoc ? oldDoc.height : parentDimensions.height;
         doc._width = oldDoc ? oldDoc.width : parentDimensions.width;
         doc.backgroundColor = oldDoc ? oldDoc.backgroundColor : opts.backgroundColor ?? '';
-        doc._layout_borderRounding = !opts.cornerRounding ? '0px' : ScriptField.MakeScript(`${opts.cornerRounding * parentDimensions.width}px`);
+        doc._layout_borderRounding = !opts.cornerRounding ? '0px' : ScriptField.MakeFunction(`${opts.cornerRounding} * this.width + 'px'`);
         doc.borderColor = oldDoc ? oldDoc.borderColor : opts.borderColor;
         doc.borderWidth = oldDoc ? oldDoc.borderWidth : opts.borderWidth;
         doc.opacity = oldDoc ? oldDoc.opacity : opts.opacity;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
index 133954d3c..e55c127e7 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
@@ -73,6 +73,7 @@ export class StaticField {
     applyAttributes = (field: Field) => { //!!! can be updated later for more robust clonign; this is all ythat's needed now
         field.setTitle(this.title);
         field.setContent('', this.contentType);
+        field.updateRenderedDoc(this.renderedDoc());
     }
 
     setupSubfields = (): Field[] => {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
index 21344dfeb..292c20a10 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -1,5 +1,5 @@
 
-import { Doc } from "../../../../../fields/Doc";
+import { Doc, FieldType } from "../../../../../fields/Doc";
 import { Docs } from "../../../../documents/Documents";
 import { Col } from "./DocCreatorMenu";
 import { DynamicField } from "./FieldTypes/DynamicField";
@@ -24,13 +24,31 @@ export class Template {
 
     cloneBase = () => {
         const clone: Template = new Template(this.settings);
-        clone.contentFields.forEach(field => {
-            const matchingField: Field = this.contentFields.filter(f => f.getID === field.getID)[0];
+        clone.allFields.forEach(field => {
+            const matchingField: Field = this.allFields.filter(f => f.getID === field.getID)[0];
             matchingField.applyAttributes(field);
         })
         return clone;
     }
 
+    applyFields = () => {
+        this.contentFields.forEach(field => {
+            this.mainField
+        });
+    }
+
+    getRenderedDoc = () => {
+        const doc: Doc = this.mainField.renderedDoc();
+        this.contentFields.forEach(field => {
+            const title: string = field.getTitle();
+            const val: FieldType = field.getContent() as FieldType;
+            doc[title] = val;
+            console.log(doc[title])
+            console.log(doc['title']);
+        });
+        return doc;
+    }
+
     getFieldByID = (id: number): Field => {
         return this.allFields.filter(field => field.getID === id)[0];
     }