From a83dfdf011d7f5c7d8874c1f6cd776b4909d0a79 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 25 Apr 2025 12:03:05 -0400
Subject: c

---
 .../Menu/ExpandedTemplatePreview.tsx               |  0
 .../DocCreatorMenu/Menu/FieldOptionsScreen.tsx     |  0
 .../Menu/SuggestedTemplatesWindow.tsx              | 81 ++++++++++++++++++++++
 .../DocCreatorMenu/Menu/TemplateEditingScreen.tsx  |  0
 .../DocCreatorMenu/Menu/TemplatePreviewBox.tsx     | 48 +++++++++++++
 5 files changed, 129 insertions(+)
 create mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/ExpandedTemplatePreview.tsx
 create mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/FieldOptionsScreen.tsx
 create mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/SuggestedTemplatesWindow.tsx
 create mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingScreen.tsx
 create mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx

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

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/ExpandedTemplatePreview.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/ExpandedTemplatePreview.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/FieldOptionsScreen.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/FieldOptionsScreen.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/SuggestedTemplatesWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/SuggestedTemplatesWindow.tsx
new file mode 100644
index 000000000..517a998d9
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/SuggestedTemplatesWindow.tsx
@@ -0,0 +1,81 @@
+import { Colors } from "@dash/components/src";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { action, observable, runInAction } from "mobx";
+import React from "react";
+import ReactLoading from "react-loading";
+import { Doc } from "../../../../../../fields/Doc";
+import { StrCast } from "../../../../../../fields/Types";
+import { ObservableReactComponent } from "../../../../ObservableReactComponent";
+import { Template } from "../Template";
+import { observer } from "mobx-react";
+import { DocCreatorMenu } from "../DocCreatorMenu";
+import { TemplatePreviewBox } from "./TemplatePreviewBox";
+
+export interface SuggestedTemplatesProps {
+    menu: DocCreatorMenu;
+    setupButtonClick: (e: React.PointerEvent, func: () => void) => void;
+}
+
+@observer
+export class SuggestedTemplatesWindow extends ObservableReactComponent<SuggestedTemplatesProps> {
+
+    @observable _GPTLoading: boolean = false;
+
+    @observable _suggestedTemplates: Template[] = [];
+    @observable _userTemplates: Template[] = [];
+
+    @action addUserTemplate = (template: Template) => { this._userTemplates.push(template) };
+    @action removeUserTemplate = (template: Template) => { this._userTemplates.splice(this._userTemplates.indexOf(template), 1) };
+
+    render() {
+        return (
+            <div className='docCreatorMenu-templates-view'>
+                <div className="docCreatorMenu-templates-displays">
+                    <div className="docCreatorMenu-section">
+                        <div className="docCreatorMenu-section-topbar">
+                            <div className="docCreatorMenu-section-title">Suggested Templates</div>
+                            <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.props.setupButtonClick(e, () => runInAction(() => (this.props.menu._menuContent = 'dashboard')))}>
+                                <FontAwesomeIcon icon="gear" />
+                            </button>
+                        </div>
+                        <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this.props.menu._menuDimensions.width > 400 ? 'center' : '' }}>
+                            {this._suggestedTemplates.map(template => (
+                                <TemplatePreviewBox 
+                                template={template} 
+                                menu={this.props.menu} 
+                                leftButtonOpts={["magnifying-glass", (template: Template) => { this.props.menu.setExpandedView(template); this.forceUpdate(); }]}
+                                rightButtonOpts={["plus", (template: Template) => this.addUserTemplate(template)]}
+                                />
+                            ))}
+                        </div>
+                        <div className="docCreatorMenu-GPT-options">
+                            <div className="docCreatorMenu-GPT-options-container">
+                                <button className="docCreatorMenu-menu-button" onPointerDown={e => this.props.setupButtonClick(e, () => this.props.menu.generatePresetTemplates())}>
+                                    <FontAwesomeIcon icon="arrows-rotate" />
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <hr className="docCreatorMenu-option-divider full no-margin" />
+                    <div className="docCreatorMenu-section">
+                        <div className="docCreatorMenu-section-topbar">
+                            <div className="docCreatorMenu-section-title">Your Templates</div>
+                            <button className="docCreatorMenu-menu-button section-reveal-options">
+                                <FontAwesomeIcon icon="gear" />
+                            </button>
+                        </div>
+                        <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this.props.menu._menuDimensions.width > 400 ? 'center' : '' }}>
+                            {this._userTemplates.map(template => (
+                                <TemplatePreviewBox 
+                                template={template} 
+                                menu={this.props.menu} 
+                                
+                                />
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingScreen.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingScreen.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
new file mode 100644
index 000000000..e40192fa8
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
@@ -0,0 +1,48 @@
+import { Colors } from "@dash/components/src";
+import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
+import { Template } from "../Template";
+import { runInAction } from "mobx";
+import React from "react";
+import { ObservableReactComponent } from "../../../../ObservableReactComponent";
+import { DocCreatorMenu } from "../DocCreatorMenu";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+
+export interface TemplatePreviewBoxProps {
+    template: Template;
+    menu: DocCreatorMenu;
+    leftButtonOpts?: [icon: IconProp, func: (template: Template) => void]
+    rightButtonOpts?: [icon: IconProp, func: (template: Template) => void]
+}
+
+export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> {
+
+    render() {
+        const template = this.props.template;
+
+        return (
+            <div
+                key={template.title}
+                className="docCreatorMenu-preview-window"
+                style={{
+                    border: this.props.menu._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                    boxShadow: this.props.menu._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
+                }}
+                onPointerDown={e => this.props.menu.setUpButtonClick(e, () => runInAction(() => this.props.menu._selectedTemplate = template))}>
+                { this.props.leftButtonOpts ? 
+                <button
+                    className="option-button left"
+                    onPointerDown={e =>
+                        this.props.menu.setUpButtonClick(e, () => this.props.leftButtonOpts![1](template))
+                    }>
+                    <FontAwesomeIcon icon={this.props.leftButtonOpts![0]} color="white" />
+                </button> : null
+                }
+                { this.props.rightButtonOpts ? 
+                <button className="option-button right" onPointerDown={e => this.props.menu.setUpButtonClick(e, () => this.props.rightButtonOpts![1](template))}>
+                    <FontAwesomeIcon icon={this.props.rightButtonOpts![0]} color="white" />
+                </button> : null }
+                {this.props.menu.docPreview(template.getRenderedDoc())}
+            </div>
+        )
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2