From 1447bae0e24016f0c4fde772235d3e60f2b3555c Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 12 Jul 2024 14:44:48 -0400
Subject: basic doc creation from templates working

---
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 68 ++++++++++++++++------
 1 file changed, 49 insertions(+), 19 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 3ebf97570..88308c226 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IReactionDisposer, ObservableMap, action, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
+import { returnAll, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
 import { Doc } from '../../../../fields/Doc';
 import { DocCast, ImageCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
@@ -15,6 +15,15 @@ import { DataVizBox } from './DataVizBox';
 import './DocCreatorMenu.scss';
 import { Id } from '../../../../fields/FieldSymbols';
 import { Colors } from 'browndash-components';
+import { MakeTemplate } from '../../../util/DropConverter';
+
+export enum LayoutType {
+    Stacked = 'stacked', 
+    Grid = 'grid', 
+    Row = 'row', 
+    Column = 'column', 
+    Custom = 'custom'
+}
 
 @observer
 export class DocCreatorMenu extends ObservableReactComponent<{}> {
@@ -25,9 +34,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     @observable _templateDocs: Doc[] = [];
     @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
-    @observable _selectedTemplateID?: Doc;
+    @observable _selectedTemplate?: Doc;
 
-    @observable _selectedLayout?: 'stacked' | 'grid' | 'row' | 'column' | 'custom';
+    @observable _selectedLayout?: LayoutType;
 
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
@@ -49,9 +58,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     }
 
     @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz };
-    @action setTemplateDocs = (docs: Doc[]) => {
-         this._templateDocs = docs.map(doc => doc.annotationOn ? DocCast(doc.annotationOn):doc);
-    };
+    @action setTemplateDocs = (docs: Doc[]) => {this._templateDocs = docs.map(doc => doc.annotationOn ? DocCast(doc.annotationOn):doc)};
+
 
     @action
     onPointerDown = (e: PointerEvent) => {
@@ -126,17 +134,22 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                 {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
                     if (renderedTemplates.includes(info.doc)) return undefined;
                     renderedTemplates.push(info.doc);
+                    //let ref: any = undefined;
                     return (<div 
+                    //ref={r => ref = r}
                     className='docCreatorMenu-preview-window'
                     style={{
-                        background: this._selectedTemplateID === info.doc ? Colors.MEDIUM_BLUE : '',
-                        boxShadow: this._selectedTemplateID === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
+                        background: this._selectedTemplate === info.doc ? Colors.MEDIUM_BLUE : '',
+                        boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
                     }}
                     onPointerDown={e =>
                         setupMoveUpEvents(this, e, returnFalse, emptyFunction,
                             undoable(clickEv => {
                                 clickEv.stopPropagation();
-                                this._selectedTemplateID = info.doc;
+                                this._selectedTemplate = info.doc;
+                                MakeTemplate(info.doc);
+                                // ref.style.background = Colors.MEDIUM_BLUE;
+                                // ref.style.boxShadow = `0 0 15px rgba(68, 118, 247, .8)`;
                                 this.forceUpdate();
                             }, 'open actions menu')
                         )
@@ -150,7 +163,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     get optionsMenuContents(){
 
-        const layoutOption = (option: 'stacked' | 'grid' | 'row' | 'column' | 'custom', optStyle?: {}) => {
+        const layoutOption = (option: LayoutType, optStyle?: {}) => {
             return (
                 <div 
                     className="docCreatorMenu-dropdown-option" 
@@ -173,11 +186,11 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                 <div className='docCreatorMenu-dropdown-hoverable'>
                     <div className="docCreatorMenu-dropdown-title">Choose Layout</div>
                     <div className="docCreatorMenu-dropdown-content">
-                        {layoutOption('stacked')}
-                        {layoutOption('grid')}
-                        {layoutOption('row')}
-                        {layoutOption('column')}
-                        {layoutOption('custom', {borderBottom: `0px`})}
+                        {layoutOption(LayoutType.Stacked)}
+                        {layoutOption(LayoutType.Grid)}
+                        {layoutOption(LayoutType.Row)}
+                        {layoutOption(LayoutType.Column)}
+                        {layoutOption(LayoutType.Custom, {borderBottom: `0px`})}
                     </div>
                 </div>
                 <div className='docCreatorMenu-layout-preview-window'>
@@ -242,7 +255,22 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         >
                             <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'magnifying-glass'}/>
                         </button>
-                        <button className='docCreatorMenu-menu-button right'>
+                        <button 
+                        className='docCreatorMenu-menu-button right'
+                        onPointerDown={e =>
+                            setupMoveUpEvents(
+                                this,
+                                e,
+                                returnFalse,
+                                emptyFunction,
+                                undoable(clickEv => {
+                                    clickEv.stopPropagation();
+                                    if (!this._selectedTemplate) return;
+                                    const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate};
+                                    this._dataViz?.createDocsFromTemplate(templateInfo);
+                                }, 'make docs')
+                            )
+                        }>
                             <FontAwesomeIcon icon={'plus'}/>
                         </button>
                         <button 
@@ -258,8 +286,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                         this.closeMenu();
                                     }, 'close menu')
                                 )
-                            }
-                        >
+                            }>
                             <FontAwesomeIcon icon={'minus'}/>
                         </button>
                     </div>
@@ -270,6 +297,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
             </div>
             )
         }
-    
+}
 
+export interface DataVizTemplateInfo {
+    doc: Doc;
+    layout?: LayoutType;
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2