feat: pop up modal for naming dashboard

3 files changed, 55 insertions, 27 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 60bfc165b..aa7c2a39b 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -1222,7 +1222,8 @@ export class CurrentUserUtils {
           Doc.UserDoc().activeDashboard = undefined;
     }
 
-    public static createNewDashboard = async (userDoc: Doc, id?: string) => {
+    public static createNewDashboard = async (userDoc: Doc, id?: string, name?: string) => {
+          console.log(name)
         const presentation = Doc.MakeCopy(userDoc.emptyPresentation as Doc, true);
         const dashboards = await Cast(userDoc.myDashboards, Doc) as Doc;
         const dashboardCount = DocListCast(dashboards.data).length + 1;
@@ -1235,8 +1236,9 @@ export class CurrentUserUtils {
             _backgroundGridShow: true,
             title: `Untitled Tab 1`,
         };
+        const title = name ? name : `Dashboard ${dashboardCount}`
         const freeformDoc = CurrentUserUtils.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions);
-        const dashboardDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: `Dashboard ${dashboardCount}` }, id, "row");
+        const dashboardDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: title }, id, "row");
         freeformDoc.context = dashboardDoc;
 
         // switching the tabs from the datadoc to the regular doc
@@ -1247,7 +1249,8 @@ export class CurrentUserUtils {
         userDoc.activePresentation = presentation;
 
         Doc.AddDocToList(dashboards, "data", dashboardDoc);
-      //   CurrentUserUtils.openDashboard(userDoc, dashboardDoc);
+        // open this new dashboard 
+      //   Doc.UserDoc().activeDashboard = dashboardDoc;
     }
 
     public static GetNewTextDoc(title: string, x: number, y: number, width?: number, height?: number, noMargins?: boolean, annotationOn?: Doc, maxHeight?: number, backgroundColor?: string) {
diff --git a/src/client/views/DashboardView.scss b/src/client/views/DashboardView.scss
index 67587dd2b..06f331c13 100644
--- a/src/client/views/DashboardView.scss
+++ b/src/client/views/DashboardView.scss
@@ -2,6 +2,8 @@
       padding: 50px;
       display: flex;
       flex-direction: row;
+      width: 100%;
+      position: absolute;
 
       .left-menu {
             display: flex;
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index 5aacec61f..fa8a98402 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -1,4 +1,4 @@
-import { action, observable } from "mobx";
+import { action, computed, observable } from "mobx";
 import { extname } from 'path';
 import { observer } from "mobx-react";
 import * as React from 'react';
@@ -8,6 +8,7 @@ import { Cast, ImageCast, StrCast } from "../../fields/Types";
 import { CurrentUserUtils } from "../util/CurrentUserUtils";
 import { UndoManager } from "../util/UndoManager";
 import "./DashboardView.scss"
+import { MainViewModal } from "./MainViewModal";
 
 enum DashboardGroup {
       MyDashboards, SharedDashboards
@@ -18,20 +19,17 @@ export class DashboardView extends React.Component {
 
       //TODO: delete dashboard, share dashboard, etc.
 
-      @observable
-      private selectedDashboardGroup = DashboardGroup.MyDashboards;
+      @observable private selectedDashboardGroup = DashboardGroup.MyDashboards;
+
+      @observable private newDashboardName: string | undefined = undefined;
+      @action abortCreateNewDashboard = () => { this.newDashboardName = undefined }
+      @action setNewDashboardName(name: string) { this.newDashboardName = name}
 
       @action
       selectDashboardGroup = (group: DashboardGroup) => {
             this.selectedDashboardGroup = group
       }
 
-      newDashboard = async () => {
-            const batch = UndoManager.StartBatch("new dash");
-            await CurrentUserUtils.createNewDashboard(Doc.UserDoc());
-            batch.end();
-      }
-
       clickDashboard = async (e: React.MouseEvent, dashboard: Doc) => {
             if (e.detail === 2) {
                   Doc.UserDoc().activeDashboard = dashboard;
@@ -48,24 +46,49 @@ export class DashboardView extends React.Component {
             }
       }
 
+      createNewDashboard = async (name: string) => {
+            const batch = UndoManager.StartBatch("new dash");
+            await CurrentUserUtils.createNewDashboard(Doc.UserDoc(), undefined, name);
+            batch.end();
+            this.abortCreateNewDashboard();
+      }
+
+      @computed
+      get namingInterface() {
+            return <div>
+                  <input className="password-inputs" placeholder="Untitled Dashboard" onChange={e => this.setNewDashboardName((e.target as any).value)} />
+                  <button className="password-submit" onClick={this.abortCreateNewDashboard}>Cancel</button>
+                  <button className="password-submit" onClick={() => { this.createNewDashboard(this.newDashboardName!) }}>Create</button>
+            </div>;
+      }
+
       render() {
-            return <div className="dashboard-view">
-                  <div className="left-menu">
-                        <div className="text-button" onClick={this.newDashboard}>New</div>
-                        <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.MyDashboards && 'selected'}`}onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards) }>My Dashboards</div>
-                        <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.SharedDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.SharedDashboards) }>Shared Dashboards</div>
-                  </div>
-                  <div className="all-dashboards">
-                        {this.getDashboards().map((dashboard) => {
-                              const href = ImageCast((dashboard.thumb as Doc)?.data)?.url.href;
-                              return <div className="dashboard-container" key={dashboard[Id]} 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="title"> {StrCast(dashboard.title)} </div>
-                              </div>
+            return <>
+                  <div className="dashboard-view">
+                        <div className="left-menu">
+                              <div className="text-button" onClick={() => { this.setNewDashboardName("") }}>New</div>
+                              <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.MyDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards)}>My Dashboards</div>
+                              <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.SharedDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.SharedDashboards)}>Shared Dashboards</div>
+                        </div>
+                        <div className="all-dashboards">
+                              {this.getDashboards().map((dashboard) => {
+                                    const href = ImageCast((dashboard.thumb as Doc)?.data)?.url.href;
+                                    return <div className="dashboard-container" key={dashboard[Id]} 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="title"> {StrCast(dashboard.title)} </div>
+                                    </div>
 
-                        })}
+                              })}
 
+                        </div>
                   </div>
-            </div>
+                  <MainViewModal
+                        contents={this.namingInterface}
+                        isDisplayed={this.newDashboardName !== undefined}
+                        interactive={true}
+                        closeOnExternalClick={this.abortCreateNewDashboard}
+                        dialogueBoxStyle={{ width: "500px", height: "300px", background: Cast(Doc.SharingDoc().userColor, "string", null) }} />;
+            </>
+
       }
 }