aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx')
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx162
1 files changed, 58 insertions, 104 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 3253cefb9..e3854e0e4 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -878,7 +878,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
) : (
this._suggestedTemplates.map(template => (
<div
- key={template.toString()}
+ key={template.title}
className="docCreatorMenu-preview-window"
style={{
border: this._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
@@ -1237,82 +1237,56 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
}
get dashboardContents() {
- const sizes: string[] = ['tiny', 'small', 'medium', 'large', 'huge'];
-
- const fieldPanel = (field: Col, id: number) => {
- return (
- <div className="field-panel" key={id}>
- <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.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)} />
- </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>
+ const fieldPanel = (field: Col, id: number) => (
+ <div className="field-panel" key={id}>
+ <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.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)} />
</div>
- <div className="sizes-box">
- <div className="top-bar"> Valid Sizes </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">
- {sizes.map(size => (
- <>
- <input
- className="bubble"
- type="checkbox"
- name="type"
- checked={field.sizes.includes(size as TemplateFieldSize)}
- onChange={e => {
- this.modifyColSizes(field, size as TemplateFieldSize, e.target.checked);
- }}
- />
- <div className="text">{size}</div>
- </>
- ))}
+ <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 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 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>
</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>
+ );
return (
<div className="docCreatorMenu-dashboard-view">
@@ -1331,15 +1305,11 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
get renderSelectedViewType() {
switch (this._menuContent) {
- case 'templates':
- return this.templatesPreviewContents;
- case 'options':
- return this.optionsMenuContents;
- case 'dashboard':
- return this.dashboardContents;
- default:
- return undefined;
- }
+ case 'templates': return this.templatesPreviewContents;
+ case 'options': return this.optionsMenuContents;
+ case 'dashboard': return this.dashboardContents;
+ } // prettier-ignore
+ return undefined;
}
get resizePanes() {
@@ -1360,30 +1330,16 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
}
render() {
- const topButton = (icon: string, opt: string, func: () => void, tag: string) => {
- return (
- <div className={`top-button-container ${tag} ${opt === this._menuContent ? 'selected' : ''}`}>
- <div
- className="top-button-content"
- onPointerDown={e =>
- this.setUpButtonClick(e, () =>
- runInAction(() => {
- func();
- })
- )
- }>
- <FontAwesomeIcon icon={icon as IconProp} />
- </div>
+ const topButton = (icon: string, opt: string, func: () => void, tag: string) => (
+ <div className={`top-button-container ${tag} ${opt === this._menuContent ? 'selected' : ''}`}>
+ <div className="top-button-content" onPointerDown={e => this.setUpButtonClick(e, action(func))}>
+ <FontAwesomeIcon icon={icon as IconProp} />
</div>
- );
- };
+ </div>
+ );
- const onPreviewSelected = () => {
- this._menuContent = 'templates';
- };
- const onSavedSelected = () => {
- this._menuContent = 'dashboard';
- };
+ const onPreviewSelected = () => (this._menuContent = 'templates');
+ const onSavedSelected = () => (this._menuContent = 'dashboard');
const onOptionsSelected = () => {
this._menuContent = 'options';
if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
@@ -1420,9 +1376,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
return true;
},
emptyFunction,
- undoable(clickEv => {
- clickEv.stopPropagation();
- }, 'drag menu')
+ undoable(clickEv => clickEv.stopPropagation(), 'drag menu')
)
}>
<div className="docCreatorMenu-top-buttons-container">
@@ -1431,7 +1385,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
{topButton('bars', 'saved', onSavedSelected, 'right')}
</div>
<button className="docCreatorMenu-menu-button close-menu" onPointerDown={e => this.setUpButtonClick(e, this.closeMenu)}>
- <FontAwesomeIcon icon={'minus'} />
+ <FontAwesomeIcon icon="minus" />
</button>
</div>
{this.renderSelectedViewType}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 15:20:16 +0000