option to remove saved layout

1 files changed, 14 insertions, 5 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index fdf623150..cb10de65b 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -244,7 +244,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                     }}
                     onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedSavedLayout(layout)))}
                     >
-                    {this.layoutPreviewContents(87, layout, false, true, index)}
+                    {this.layoutPreviewContents(87, layout, true, index)}
                 </div>
                )}
             </div>
@@ -296,7 +296,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     }
 
-    layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, zoomOption: boolean = true, small: boolean = false, id?: number) => {
+    layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, small: boolean = false, id?: number) => {
         const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplate;
         if (!doc) return;
 
@@ -312,7 +312,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
         return (
             <div className='docCreatorMenu-layout-preview-window-wrapper' id={String(id) ?? undefined}>
-                {!zoomOption ? null : <div className='docCreatorMenu-zoom-button-container'>
+                <div className='docCreatorMenu-zoom-button-container'>
                     <button 
                         className='docCreatorMenu-zoom-button'
                         onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= 1.25))}>
@@ -323,7 +323,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= .75))}>
                             <FontAwesomeIcon icon={'plus'}/>
                     </button>
-                </div>}
+                    {altLayout ? <button 
+                        className='docCreatorMenu-zoom-button zoom-in'
+                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._savedLayouts.splice(this._savedLayouts.indexOf(altLayout), 1)))}>
+                            <FontAwesomeIcon icon={'trash'}/>
+                    </button> : null}
+                </div>
                 <div 
                 id={String(id) ?? undefined}
                 className={`docCreatorMenu-layout-preview-window ${small ? 'small' : ''}`}
@@ -366,6 +371,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     }
 
     get optionsMenuContents(){
+        const layoutEquals = (layout: DataVizTemplateLayout) => {
+
+        } //TODO: ADD LATER
+
         const layoutOption = (option: LayoutType, optStyle?: {}, specialFunc?: Function) => {
             return (
                 <div 
@@ -423,7 +432,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 clickEv.stopPropagation();
                                 if (!this._selectedTemplate) return;
                                 const layout: DataVizTemplateLayout = {template: this._selectedTemplate, layout: {type: this._layout.type, xMargin: this._layout.xMargin, yMargin:this._layout.yMargin, repeat: 0}, columns: this.columnsCount, rows: this.rowsCount, docsNumList: this.docsToRender};
-                                this._savedLayouts.push(layout);
+                                if (!this._savedLayouts.includes(layout)) { this._savedLayouts.push(layout) };
                             }, 'make docs') 
                         )
                     }>