From 756a8ad735937bf68ec6a9d4125774d396b1b060 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 9 Apr 2025 22:05:31 -0400
Subject: added option to collapse field panels

---
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.scss  |  8 ++-
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx   | 82 +++++++++++++---------
 .../TemplateFieldTypes/TemplateField.ts            |  1 -
 3 files changed, 55 insertions(+), 36 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
index 48e09d12f..2881fbb66 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
@@ -816,6 +816,7 @@
     scrollbar-width: none;
 
     .panels-container {
+        display: flex;
         height: 100%;
         width: 100%;
         flex-direction: column;
@@ -936,7 +937,7 @@
         flex-direction: column;
         align-items: center;
         justify-content: flex-start;
-        height: 285px;
+        height: fit-content;
         width: calc(100% - 10px);
         border: 1px solid rgb(180, 180, 180);
         margin: 5px;
@@ -964,6 +965,11 @@
             .field-title {
                 color: whitesmoke;
             }
+
+            &:hover {
+                background-color: rgb(72, 72, 72);
+                cursor: pointer;
+            }
         }  
         
         .opts-bar {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 6d8d810aa..daba990e4 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -89,6 +89,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
 
     @observable _userCreatedFields: Col[] = [];
     @observable _selectedCols: { title: string; type: string; desc: string }[] | undefined = [];
+    @observable _collapsedCols: String[] = []; //any columns whose options panels are hidden
 
     @observable _layout: { type: LayoutType; yMargin: number; xMargin: number; columns?: number; repeat: number } = { type: LayoutType.FREEFORM, yMargin: 10, xMargin: 10, columns: 3, repeat: 0 };
     @observable _savedLayouts: DataVizTemplateLayout[] = [];
@@ -1327,52 +1328,65 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     get dashboardContents() {
         const fieldPanel = (field: Col, id: number) => (
             <div className="field-panel" key={id}>
-                <div className="top-bar">
+                <div className="top-bar" onPointerDown={e => this.setUpButtonClick(e, runInAction(() => () => {
+                    if (this._collapsedCols.includes(field.title)) {
+                        this._collapsedCols = this._collapsedCols.filter(col => col !== field.title);
+                    } else {
+                        this._collapsedCols.push(field.title);
+                    }
+                }))}>
                     <span className="field-title">{`${field.title} Field`}</span>
                     <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>
-                <div className="opts-bar">
-                    <div className="opt-box">
-                        <div className="top-bar"> Title </div>
-                        <textarea className="content" style={{ width: '100%', height: 'calc(100% - 20px)' }} value={field.title} placeholder={'Enter title'} onChange={e => this.setColTitle(field, e.target.value)} />
+                { this._collapsedCols.includes(field.title) ? null :
+                    <>
+                    <div className="opts-bar">
+                        <div className="opt-box">
+                            <div className="top-bar"> Title </div>
+                            <textarea className="content" style={{ width: '100%', height: 'calc(100% - 20px)' }} value={field.title} placeholder={'Enter title'} onChange={e => this.setColTitle(field, e.target.value)} />
+                        </div>
+                        <div className="opt-box">
+                            <div className="top-bar"> Type </div>
+                            <div className="content">
+                                <span className="type-display">{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}</span>
+                                <div className="bubbles">
+                                    <input className="bubble" type="radio" name="type" onClick={() => this.setColType(field, TemplateFieldType.TEXT)} />
+                                    <div className="text">Text</div>
+                                    <input className="bubble" type="radio" name="type" onClick={() => this.setColType(field, TemplateFieldType.VISUAL)} />
+                                    <div className="text">File</div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <div className="opt-box">
-                        <div className="top-bar"> Type </div>
+                    <div className="sizes-box">
+                        <div className="top-bar"> Valid Sizes </div>
                         <div className="content">
-                            <span className="type-display">{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}</span>
                             <div className="bubbles">
-                                <input className="bubble" type="radio" name="type" onClick={() => this.setColType(field, TemplateFieldType.TEXT)} />
-                                <div className="text">Text</div>
-                                <input className="bubble" type="radio" name="type" onClick={() => this.setColType(field, TemplateFieldType.VISUAL)} />
-                                <div className="text">File</div>
+                                {Object.values(TemplateFieldSize).map(size => (
+                                    <div key={field + size}>
+                                        <input className="bubble" type="checkbox" name="type" checked={field.sizes.includes(size)} onChange={e => this.modifyColSizes(field, size, e.target.checked)} />
+                                        <div className="text">{size}</div>
+                                    </div>
+                                ))}
                             </div>
                         </div>
                     </div>
-                </div>
-                <div className="sizes-box">
-                    <div className="top-bar"> Valid Sizes </div>
-                    <div className="content">
-                        <div className="bubbles">
-                            {Object.values(TemplateFieldSize).map(size => (
-                                <div key={field + size}>
-                                    <input className="bubble" type="checkbox" name="type" checked={field.sizes.includes(size)} onChange={e => this.modifyColSizes(field, size, e.target.checked)} />
-                                    <div className="text">{size}</div>
-                                </div>
-                            ))}
-                        </div>
+                    <div className="desc-box">
+                        <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/prompt to help with template generation.'}
+                        />
                     </div>
-                </div>
-                <div className="desc-box">
-                    <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/prompt to help with template generation.'}
-                    />
-                </div>
+                    <div>
+
+                    </div>
+                    </>
+                }
             </div>
         );
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts
index 48e01d6ef..f7a91bbd8 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts
@@ -78,7 +78,6 @@ export abstract class TemplateField {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     changeFieldType = (newType: ViewType): TemplateField => {
-        console.log('chaning field', this._title, 'to type:', newType)
         const newSettings = this._settings;
         newSettings.viewType = newType;
         const newField = TemplateField.CreateField(newSettings, this._id, this._parent, true);
-- 
cgit v1.2.3-70-g09d2