diff options
Diffstat (limited to 'src')
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]; } |