Merge branch 'master' of https://github.com/brown-dash/Dash-Web

1 files changed, 90 insertions, 21 deletions

diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index 11bb0c6a8..7ebe8d0e3 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -163,18 +163,7 @@ export class DashboardView extends React.Component {
                 <div className="dashboard-view">
                     <div className="left-menu">
                         <div className="new-dashboard-button">
-                            <Button
-                                icon={<FaPlus />}
-                                hoverStyle="darken"
-                                backgroundColor={Colors.LIGHT_BLUE}
-                                size={Size.MEDIUM}
-                                fontSize={FontSize.HEADER}
-                                text="New"
-                                onClick={() => {
-                                    this.setNewDashboardName('');
-                                }}
-                                borderRadius={50}
-                            />
+                            <Button icon={<FaPlus />} hoverStyle="darken" backgroundColor={Colors.LIGHT_BLUE} size={Size.MEDIUM} fontSize={FontSize.HEADER} text="New" onClick={() => this.setNewDashboardName('')} borderRadius={50} />
                         </div>
                         <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.MyDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards)}>
                             My Dashboards
@@ -187,19 +176,14 @@ export class DashboardView extends React.Component {
                         {this.getDashboards().map(dashboard => {
                             const href = ImageCast(dashboard.thumb)?.url.href;
                             return (
-                                <div
-                                    className="dashboard-container"
-                                    key={dashboard[Id]}
-                                    onContextMenu={e => {
-                                        this.onContextMenu(dashboard, e);
-                                    }}
-                                    onClick={e => this.clickDashboard(e, dashboard)}>
+                                <div className="dashboard-container" key={dashboard[Id]} onContextMenu={e => this.onContextMenu(dashboard, e)} onClick={e => this.clickDashboard(e, dashboard)}>
                                     <img
                                         src={
                                             href ?? 'https://media.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?b=1&k=20&m=1297349747&s=170667a&w=0&h=oH31fJty_4xWl_JQ4OIQWZKP8C6ji9Mz7L4XmEnbqRU='
-                                        }></img>
+                                        }
+                                    />
                                     <div className="info">
-                                        <div className="title"> {StrCast(dashboard.title)} </div>
+                                        <input style={{ border: 'unset' }} className="input" onClick={e => e.stopPropagation()} defaultValue={StrCast(dashboard.title)} onChange={e => (Doc.GetProto(dashboard).title = (e.target as any).value)} />
                                         {this.selectedDashboardGroup === DashboardGroup.SharedDashboards && this.isUnviewedSharedDashboard(dashboard) ? <div>unviewed</div> : <div></div>}
                                         <div
                                             className="more"
@@ -294,6 +278,88 @@ export class DashboardView extends React.Component {
         }
     };
 
+    public static resetDashboard = (dashboard: Doc) => {
+        const config = StrCast(dashboard.dockingConfig);
+        const matches = config.match(/\"documentId\":\"[a-z0-9-]+\"/g);
+        const docids = matches?.map(m => m.replace('"documentId":"', '').replace('"', '')) ?? [];
+
+        const components =
+            docids.map(docid => ({
+                type: 'component',
+                component: 'DocumentFrameRenderer',
+                title: 'Untitled Tab 1',
+                width: 600,
+                props: {
+                    documentId: docid,
+                },
+                componentName: 'lm-react-component',
+                isClosable: true,
+                reorderEnabled: true,
+                componentState: null,
+            })) ?? [];
+        const reset = {
+            isClosable: true,
+            reorderEnabled: true,
+            title: '',
+            openPopouts: [],
+            maximisedItemId: null,
+            settings: {
+                hasHeaders: true,
+                constrainDragToContainer: true,
+                reorderEnabled: true,
+                selectionEnabled: false,
+                popoutWholeStack: false,
+                blockedPopoutsThrowError: true,
+                closePopoutsOnUnload: true,
+                showPopoutIcon: true,
+                showMaximiseIcon: true,
+                showCloseIcon: true,
+                responsiveMode: 'onload',
+                tabOverlapAllowance: 0,
+                reorderOnTabMenuClick: false,
+                tabControlOffset: 10,
+            },
+            dimensions: {
+                borderWidth: 3,
+                borderGrabWidth: 5,
+                minItemHeight: 10,
+                minItemWidth: 20,
+                headerHeight: 27,
+                dragProxyWidth: 300,
+                dragProxyHeight: 200,
+            },
+            labels: {
+                close: 'close',
+                maximise: 'maximise',
+                minimise: 'minimise',
+                popout: 'new tab',
+                popin: 'pop in',
+                tabDropdown: 'additional tabs',
+            },
+            content: [
+                {
+                    type: 'row',
+                    isClosable: true,
+                    reorderEnabled: true,
+                    title: '',
+                    content: [
+                        {
+                            type: 'stack',
+                            width: 100,
+                            isClosable: true,
+                            reorderEnabled: true,
+                            title: '',
+                            activeItemIndex: 0,
+                            content: components,
+                        },
+                    ],
+                },
+            ],
+        };
+        Doc.SetInPlace(dashboard, 'dockingConfig', JSON.stringify(reset), true);
+        return reset;
+    };
+
     public static createNewDashboard = (id?: string, name?: string, background?: string) => {
         const dashboards = Doc.MyDashboards;
         const dashboardCount = DocListCast(dashboards.data).length + 1;
@@ -393,6 +459,9 @@ ScriptingGlobals.add(function shareDashboard(dashboard: Doc) {
 ScriptingGlobals.add(function removeDashboard(dashboard: Doc) {
     DashboardView.removeDashboard(dashboard);
 }, 'Remove Dashboard from Dashboards');
+ScriptingGlobals.add(function resetDashboard(dashboard: Doc) {
+    DashboardView.resetDashboard(dashboard);
+}, 'move all dashboard tabs to single stack');
 ScriptingGlobals.add(function addToDashboards(dashboard: Doc) {
     DashboardView.openDashboard(Doc.MakeAlias(dashboard));
 }, 'adds Dashboard to set of Dashboards');