diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 37 |
1 files changed, 21 insertions, 16 deletions
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, |