a lot of code cleanup for doc creators templates

1 files changed, 42 insertions, 47 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index a702218b0..97faf01c2 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -27,7 +27,7 @@ import { DocumentView, DocumentViewInternal } from '../../DocumentView';
 import { OpenWhere } from '../../OpenWhere';
 import { DataVizBox } from '../DataVizBox';
 import './DocCreatorMenu.scss';
-import { Field, ViewType } from './FieldTypes/Field';
+import { TemplateField, ViewType } from './TemplateFieldTypes/TemplateField';
 import { Template } from './Template';
 import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from './TemplateBackend';
 import { TemplateManager } from './TemplateManager';
@@ -371,7 +371,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     }
 
     @action updateRenderedPreviewCollection = async (template: Template) => {
-        this._fullyRenderedDocs = (await this.createDocsFromTemplate(template)) ?? [];
+        this._fullyRenderedDocs = ((await this.createDocsFromTemplate(template)) ?? []).filter(doc => doc).map(doc => doc!);
         console.log(this._fullyRenderedDocs);
         this.updateRenderedDocCollection();
     };
@@ -630,7 +630,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
             await Promise.all(renderedTemplatePromises);
         }
 
-        templates.forEach(template => template.mainField.initializeDocument({ subfields: [], title: template.title, opts: {}, viewType: ViewType.FREEFORM, tl: [0, 0], br: [900, 900] }));
+        templates.forEach(template => template.mainField.initializeDocument({ title: template.title, opts: {}, viewType: ViewType.FREEFORM, tl: [0, 0], br: [900, 900] }, []));
 
         setTimeout(() => {
             this.setSuggestedTemplates(templates);
@@ -638,10 +638,10 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         });
     };
 
-    renderGPTImageCall = async (template: Template, col: Col, fieldNumber: number): Promise<boolean> => {
+    renderGPTImageCall = async (template: Template, col: Col, fieldNumber: number | undefined): Promise<boolean> => {
         const generateAndLoadImage = async (fieldNum: string, column: Col, prompt: string) => {
             const url = await this.generateGPTImage(prompt);
-            const field: Field = template.getFieldByID(Number(fieldNum));
+            const field: TemplateField = template.getFieldByID(Number(fieldNum));
 
             field.setContent(url ?? '', ViewType.IMG);
             field.setTitle(col.title);
@@ -665,7 +665,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         return true;
     };
 
-    renderGPTTextCall = async (template: Template, col: Col, fieldNum: number): Promise<boolean> => {
+    renderGPTTextCall = async (template: Template, col: Col, fieldNum: number | undefined): Promise<boolean> => {
         const wordLimit = (size: TemplateFieldSize) => {
             switch (size) {
                 case TemplateFieldSize.TINY:
@@ -697,7 +697,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
             if (res) {
                 const assignments: { [title: string]: { number: string; content: string } } = JSON.parse(res);
                 Object.entries(assignments).forEach(([, /* title */ info]) => {
-                    const field: Field = template.getFieldByID(Number(info.number));
+                    const field: TemplateField = template.getFieldByID(Number(info.number));
                     // const column = this.getColByTitle(title);
 
                     field.setContent(info.content ?? '', ViewType.TEXT);
@@ -771,7 +771,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
             return templateCopy.mainField.renderedDoc;
         };
 
-        let docs: Promise<Doc>[];
+        let docs: Promise<Doc | undefined>[];
         if (this.DEBUG_MODE) {
             docs = [1, 2, 3, 4].map(() => processContent({}));
         } else {
@@ -868,30 +868,31 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     get templatesPreviewContents() {
         const GPTOptions = <div></div>;
 
-        const previewDoc = (doc: Doc, template: Template) => (
-            <DocumentView
-                Document={doc}
-                isContentActive={emptyFunction} // !!! should be return false
-                addDocument={returnFalse}
-                moveDocument={returnFalse}
-                removeDocument={returnFalse}
-                PanelWidth={() => (this._selectedTemplate === template ? 104 : 111)}
-                PanelHeight={() => (this._selectedTemplate === template ? 104 : 111)}
-                ScreenToLocalTransform={() => new Transform(-this._pageX - 5, -this._pageY - 35, 1)}
-                renderDepth={1}
-                whenChildContentsActiveChanged={emptyFunction}
-                focus={emptyFunction}
-                styleProvider={DefaultStyleProvider}
-                addDocTab={this._props.addDocTab}
-                pinToPres={() => undefined}
-                childFilters={returnEmptyFilter}
-                childFiltersByRanges={returnEmptyFilter}
-                searchFilterDocs={returnEmptyDoclist}
-                fitContentsToBox={returnFalse}
-                fitWidth={returnFalse}
-                hideDecorations={true}
-            />
-        );
+        const previewDoc = (doc: Doc | undefined, template: Template) =>
+            !doc ? null : (
+                <DocumentView
+                    Document={doc}
+                    isContentActive={emptyFunction} // !!! should be return false
+                    addDocument={returnFalse}
+                    moveDocument={returnFalse}
+                    removeDocument={returnFalse}
+                    PanelWidth={() => (this._selectedTemplate === template ? 104 : 111)}
+                    PanelHeight={() => (this._selectedTemplate === template ? 104 : 111)}
+                    ScreenToLocalTransform={() => new Transform(-this._pageX - 5, -this._pageY - 35, 1)}
+                    renderDepth={1}
+                    whenChildContentsActiveChanged={emptyFunction}
+                    focus={emptyFunction}
+                    styleProvider={DefaultStyleProvider}
+                    addDocTab={this._props.addDocTab}
+                    pinToPres={() => undefined}
+                    childFilters={returnEmptyFilter}
+                    childFiltersByRanges={returnEmptyFilter}
+                    searchFilterDocs={returnEmptyDoclist}
+                    fitContentsToBox={returnFalse}
+                    fitWidth={returnFalse}
+                    hideDecorations={true}
+                />
+            );
 
         //<img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} />
 
@@ -1096,19 +1097,13 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
 
         const collectionFactory = (): ((docs: Doc[], options: DocumentOptions) => Doc) => {
             switch (this._layout.type) {
-                case LayoutType.CAROUSEL3D:
-                    return Docs.Create.Carousel3DDocument;
-                case LayoutType.FREEFORM:
-                    return Docs.Create.FreeformDocument;
-                case LayoutType.CARD:
-                    return Docs.Create.CardDeckDocument;
-                case LayoutType.MASONRY:
-                    return Docs.Create.MasonryDocument;
-                case LayoutType.CAROUSEL:
-                    return Docs.Create.CarouselDocument;
-                default:
-                    return Docs.Create.FreeformDocument;
-            }
+                case LayoutType.CAROUSEL3D: return Docs.Create.Carousel3DDocument;
+                case LayoutType.FREEFORM:   return Docs.Create.FreeformDocument;
+                case LayoutType.CARD:       return Docs.Create.CardDeckDocument;
+                case LayoutType.MASONRY:    return Docs.Create.MasonryDocument;
+                case LayoutType.CAROUSEL:   return Docs.Create.CarouselDocument;
+                default:                    return Docs.Create.FreeformDocument;
+            } // prettier-ignore
         };
 
         const collection = collectionFactory()(this._fullyRenderedDocs, {
@@ -1241,9 +1236,9 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                                 emptyFunction,
                                 undoable(clickEv => {
                                     clickEv.stopPropagation();
-                                    if (!this._selectedTemplate) return;
+                                    if (!this._selectedTemplate || !this._selectedTemplate.getRenderedDoc()) return;
                                     const layout: DataVizTemplateLayout = {
-                                        template: this._selectedTemplate.getRenderedDoc(),
+                                        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,