started work on template editing within docCreatorMenu; fixed deleting fields in the dashboard

2 files changed, 93 insertions, 55 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 9d82ada37..4ea904b8e 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -289,19 +289,27 @@
 }
 
 .docCreatorMenu-expanded-template-preview {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
     position: relative;
     width: 100%;
     height: 100%;
 
+    .top-panel{
+        width: 100%;
+        height: 10px;
+    }
+
     .right-buttons-panel {
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         height: 100%;
-        width: 40px;
         position: absolute;
         right: 0px;
         top: 0px;
+        width: 40px;
         padding: 5px;
         gap: 2px;
     }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 43e9248a7..44f743a97 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -5,11 +5,11 @@ import { observer } from 'mobx-react';
 import { IDisposer } from 'mobx-utils';
 import * as React from 'react';
 import ReactLoading from 'react-loading';
-import { ClientUtils, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
+import { ClientUtils, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
-import { Doc, NumListCast, StrListCast } from '../../../../fields/Doc';
+import { Doc, NumListCast, StrListCast, returnEmptyDoclist } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
-import { DocCast, ImageCast, StrCast } from '../../../../fields/Types';
+import { Cast, DocCast, ImageCast, StrCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
 import { Networking } from '../../../Network';
 import { GPTCallType, gptAPICall, gptImageCall } from '../../../apis/gpt/GPT';
@@ -26,6 +26,8 @@ import { FieldViewProps } from '../FieldView';
 import { OpenWhere } from '../OpenWhere';
 import { DataVizBox } from './DataVizBox';
 import './DocCreatorMenu.scss';
+import { DefaultStyleProvider, returnEmptyDocViewList } from '../../StyleProvider';
+import { Transform } from '../../../util/Transform';
 
 export enum LayoutType {
     Stacked = 'stacked',
@@ -218,11 +220,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         document.addEventListener('pointerup', this.onPointerUp);
         this._disposers.templates = reaction(
             () => this._templateDocs.slice(),
-            docs => docs.map(this.getIcon)
+            docs => this.updateIcons(docs)
         );
         this._disposers.gpt = reaction(
             () => this._suggestedTemplates.slice(),
-            docs => docs.map(this.getIcon)
+            docs => this.updateIcons(docs)
         );
         //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')})
         this._disposers.lightbox = reaction(
@@ -241,6 +243,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     updateIcons = (docs: Doc[]) => {
+        console.log('called')
         docs.map(this.getIcon);
     };
 
@@ -442,43 +445,20 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     testTemplate = async () => {
-        // const temp = TemplateLayouts.FourField001;
-        // const title: Doc = FieldFuncs.TextField({tl: temp.fields[0].tl, br: temp.fields[0].br}, temp.height, temp.width, 'title', 'Title', {backgroundColor: 'transparent'});
-        // const image: Doc = FieldFuncs.ImageField({tl: temp.fields[1].tl, br: temp.fields[1].br}, temp.height, temp.width, 'title', '', {borderColor: '#159fe4', borderWidth: '10', cornerRounding: 10, rotation: 40});
-        // const caption: Doc = FieldFuncs.TextField({tl: temp.fields[2].tl, br: temp.fields[2].br}, temp.height, temp.width, 'title', 'Caption', {backgroundColor: 'transparent'});
-        // const desc: Doc = FieldFuncs.TextField({tl: temp.fields[3].tl, br: temp.fields[3].br}, temp.height, temp.width, 'title', '', {backgroundColor: 'lightblue', borderColor: '#159fe4', borderWidth: '10', cornerRounding: 10});
-
-        // const doc = Docs.Create.FreeformDocument([title, image, caption, desc], { _height: temp.height, _width: temp.width, title: 'hey', x: 400, y: 400 });
-
-        // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        // mainCollection.addDocument(doc);
-
-        // const temp = TemplateLayouts.FourField001;
-
-        // const img: Col = {type: TemplateFieldType.TEXT, title: 'Type', desc: 'description whpoo', size: TemplateFieldSize.LARGE, defaultContent: ''};
-        // const capt1: Col = {type: TemplateFieldType.TEXT, title: 'Image', desc: 'description hey', size: TemplateFieldSize.TINY};
-        // const capt2: Col = {type: TemplateFieldType.TEXT, title: 'Locality', desc: '', size: TemplateFieldSize.TINY, defaultContent: ''};
-        // const desc: Col = {type: TemplateFieldType.TEXT, title: 'Description', desc: '', size: TemplateFieldSize.LARGE, defaultContent: 'This is a description of a rock. It is kind of long. It is very long. It is gratuitous. This description should be shorter. Oh well. This is a description of a rock. It is kind of long. It is very long. It is gratuitous. This description should be shorter. Oh well. This is a description of a rock. It is kind of long. It is very long. It is gratuitous. This description should be shorter. Oh well.'};
-
-        // const assignments = {'0': img, '1': capt1, '2': capt2, '3': desc}
-
-        // this.createEmptyTemplate(temp, assignments);
-        // console.log(this.findValidTemplates(this.fieldsInfos, TemplateLayouts.allTemplates));
+        this.updateIcons(this._suggestedTemplates.slice());
+        this.forceUpdate();
 
-        // console.log(this._dataViz?.colsInfo.get("IMG")?.size, this._dataViz?.colsInfo.get("IMG")?.type)
-        // console.log(this.fieldsInfos)
+        // try {
+        //     const res = await gptImageCall('Image of panda eating a cookie');
 
-        try {
-            const res = await gptImageCall('Image of panda eating a cookie');
+        //     if (res) {
+        //         const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res });
 
-            if (res) {
-                const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res });
-
-                console.log(result);
-            }
-        } catch (e) {
-            console.log(e);
-        }
+        //         console.log(result);
+        //     }
+        // } catch (e) {
+        //     console.log(e);
+        // }
     };
 
     @action addField = () => {
@@ -935,9 +915,69 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     @action setExpandedView = (info: { icon: ImageField; doc: Doc } | undefined) => {
-        this._expandedPreview = info;
+        if (info) {
+            const doc = info.doc;
+            const wrapper: Doc = Docs.Create.FreeformDocument([info.doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''});
+            const newInfo = {icon: new ImageField(''), doc: wrapper}
+            this._expandedPreview = newInfo;
+        } else {
+            this._expandedPreview = info;
+        }
     };
 
+    get editingWindow(){
+        const doc = this._expandedPreview?.doc ?? new Doc();
+        const rendered = 
+            <div className="docCreatorMenu-expanded-template-preview">
+                <CollectionFreeFormView
+                    Document={this._expandedPreview!.doc}
+                    docViewPath={returnEmptyDocViewList}
+                    childLayoutTemplate={() => Cast(doc.childLayoutTemplate, Doc, null)}
+                    isContentActive={emptyFunction}
+                    isAnyChildContentActive={() => true}
+                    select={emptyFunction}
+                    isSelected={returnFalse}
+                    fieldKey={Doc.LayoutFieldKey(doc)}
+                    addDocument={returnFalse}
+                    moveDocument={returnFalse}
+                    removeDocument={returnFalse}
+                    PanelWidth={() => this._menuDimensions.width - 10}
+                    PanelHeight={() => this._menuDimensions.height - 60}
+                    ScreenToLocalTransform={Transform.Identity}
+                    renderDepth={5}
+                    whenChildContentsActiveChanged={emptyFunction}
+                    focus={emptyFunction}
+                    styleProvider={DefaultStyleProvider}
+                    addDocTab={this._props.addDocTab}
+                    // eslint-disable-next-line no-use-before-define
+                    pinToPres={() => undefined}
+                    childFilters={returnEmptyFilter}
+                    childFiltersByRanges={returnEmptyFilter}
+                    searchFilterDocs={returnEmptyDoclist}
+                    fitContentsToBox={returnTrue}
+                    xPadding={0}
+                    yPadding={0}
+                />
+            </div>
+
+
+        return (
+            <div className="docCreatorMenu-expanded-template-preview">
+                <div className="top-panel"/>
+                {rendered}
+                <div className="right-buttons-panel">
+                    <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => {this._expandedPreview && this.updateIcons(this._suggestedTemplates.slice()); this.setExpandedView(undefined)})}>
+                        <FontAwesomeIcon icon="minimize" />
+                    </button>
+                    <button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => this._expandedPreview && this._templateDocs.push(this._expandedPreview.doc))}>
+                        <FontAwesomeIcon icon="plus" color="white" />
+                    </button>
+                </div>
+            </div>
+
+        );
+    }
+
     get templatesPreviewContents() {
         const renderedTemplates: Doc[] = [];
 
@@ -948,17 +988,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         return (
             <div className={`docCreatorMenu-templates-view`}>
                 {this._expandedPreview ? (
-                    <div className="docCreatorMenu-expanded-template-preview">
-                        <img className="docCreatorMenu-preview-image expanded" src={this._expandedPreview.icon!.url.href.replace('.png', '_o.png')} />
-                        <div className="right-buttons-panel">
-                            <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => this.setExpandedView(undefined))}>
-                                <FontAwesomeIcon icon="minimize" />
-                            </button>
-                            <button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => this._expandedPreview && this._templateDocs.push(this._expandedPreview.doc))}>
-                                <FontAwesomeIcon icon="plus" color="white" />
-                            </button>
-                        </div>
-                    </div>
+                    this.editingWindow
                 ) : (
                     <div>
                         <div className="docCreatorMenu-section" style={{ height: this._GPTOpt ? 200 : 200 }}>
@@ -1355,7 +1385,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 <div className="field-panel">
                     <div className="top-bar">
                         <span className="field-title">{`${field.title} Field`}</span>
-                        <button className="docCreatorMenu-menu-button section-reveal-options no-margin" onPointerDown={e => this.setUpButtonClick(e, this.addField)} style={{ position: 'absolute', right: '0px' }}>
+                        <button className="docCreatorMenu-menu-button section-reveal-options no-margin" onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))} style={{ position: 'absolute', right: '0px' }}>
                             <FontAwesomeIcon icon="minus" />
                         </button>
                     </div>
@@ -1413,12 +1443,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                         </div>
                     </div>
                     <div className="desc-box">
-                        <div className="top-bar"> Description </div>
+                        <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 to help with template generation.'}
+                            placeholder={this._dataViz?.GPTSummary?.get(field.title)?.desc ?? 'Add a description/prompt to help with template generation.'}
                         />
                     </div>
                 </div>