feat: pop up modal for naming dashboard

1 files changed, 47 insertions, 24 deletions

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) }} />;
+            </>
+
       }
 }