cleanup dashboardview code and disable delete dashbaord since it's not easily undoable.

1 files changed, 54 insertions, 102 deletions

diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index 34c752eec..c574e266f 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -1,10 +1,10 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, ColorPicker, EditableText, FontSize, IconButton, Size, Type } from 'browndash-components';
+import { Button, ColorPicker, EditableText, Size, Type } from 'browndash-components';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { FaPlus } from 'react-icons/fa';
-import { Doc, DocListCast, DocListCastAsync } from '../../fields/Doc';
+import { Doc, DocListCast } from '../../fields/Doc';
 import { AclPrivate, DocAcl } from '../../fields/DocSymbols';
 import { Id } from '../../fields/FieldSymbols';
 import { List } from '../../fields/List';
@@ -14,9 +14,9 @@ import { ScriptField } from '../../fields/ScriptField';
 import { Cast, ImageCast, StrCast } from '../../fields/Types';
 import { DocServer } from '../DocServer';
 import { Docs, DocumentOptions, DocUtils } from '../documents/Documents';
-import { CollectionViewType } from '../documents/DocumentTypes';
 import { HistoryUtil } from '../util/History';
 import { ScriptingGlobals } from '../util/ScriptingGlobals';
+import { SettingsManager } from '../util/SettingsManager';
 import { SharingManager } from '../util/SharingManager';
 import { undoable, undoBatch, UndoManager } from '../util/UndoManager';
 import { CollectionDockingView } from './collections/CollectionDockingView';
@@ -36,28 +36,16 @@ enum DashboardGroup {
 
 @observer
 export class DashboardView extends React.Component {
-    //TODO: delete dashboard, share dashboard, etc.
-
     public static _urlState: HistoryUtil.DocUrl;
 
+    @observable private openModal = false;
     @observable private selectedDashboardGroup = DashboardGroup.MyDashboards;
-
-    @observable private newDashboardName: string | undefined = undefined;
-    @observable private newDashboardColor: string | undefined = '#AFAFAF';
-    @action abortCreateNewDashboard = () => {
-        this.newDashboardName = undefined;
-    };
-    @action setNewDashboardName = (name: string) => {
-        this.newDashboardName = name;
-    };
-    @action setNewDashboardColor = (color: string) => {
-        this.newDashboardColor = color;
-    };
-
-    @action
-    selectDashboardGroup = (group: DashboardGroup) => {
-        this.selectedDashboardGroup = group;
-    };
+    @observable private newDashboardName = '';
+    @observable private newDashboardColor = '#AFAFAF';
+    @action abortCreateNewDashboard = () => (this.openModal = false);
+    @action setNewDashboardName = (name: string) => (this.newDashboardName = name);
+    @action setNewDashboardColor = (color: string) => (this.newDashboardColor = color);
+    @action selectDashboardGroup = (group: DashboardGroup) => (this.selectedDashboardGroup = group);
 
     clickDashboard = (e: React.MouseEvent, dashboard: Doc) => {
         if (this.selectedDashboardGroup === DashboardGroup.SharedDashboards) {
@@ -69,45 +57,31 @@ export class DashboardView extends React.Component {
     };
 
     getDashboards = (whichGroup: DashboardGroup) => {
-        const allDashboards = DocListCast(Doc.MyDashboards.data);
         if (whichGroup === DashboardGroup.MyDashboards) {
-            return allDashboards.filter(dashboard => Doc.GetProto(dashboard).author === Doc.CurrentUserEmail);
+            return DocListCast(Doc.MyDashboards.data).filter(dashboard => Doc.GetProto(dashboard).author === Doc.CurrentUserEmail);
         }
-        const sharedDashboards = DocListCast(Doc.MySharedDocs.data_dashboards).filter(doc => doc.dockingConfig);
-        return sharedDashboards;
-    };
-
-    isUnviewedSharedDashboard = (dashboard: Doc): boolean => {
-        // const sharedDashboards = DocListCast(Doc.MySharedDocs.data_dashboards).filter(doc => doc._type_collection === CollectionViewType.Docking);
-        return !DocListCast(Doc.MySharedDocs.viewed).includes(dashboard);
+        return DocListCast(Doc.MySharedDocs.data_dashboards).filter(doc => doc.dockingConfig);
     };
 
-    getSharedDashboards = () => {
-        const sharedDashs = DocListCast(Doc.MySharedDocs.data_dashboards).filter(doc => doc._type_collection === CollectionViewType.Docking);
-        return sharedDashs.filter(dashboard => !DocListCast(Doc.MySharedDocs.viewed).includes(dashboard));
-    };
+    isUnviewedSharedDashboard = (dashboard: Doc) => !DocListCast(Doc.MySharedDocs.viewed).includes(dashboard);
 
     @undoBatch
-    createNewDashboard = async (name: string, background?: string) => {
-        setTimeout(() => {
-            this.abortCreateNewDashboard();
-        }, 100);
+    createNewDashboard = (name: string, background?: string) => {
         DashboardView.createNewDashboard(undefined, name, background);
+        this.abortCreateNewDashboard();
     };
 
     @computed
     get namingInterface() {
-        const dashboardCount = DocListCast(Doc.MyDashboards.data).length + 1;
-        const placeholder = `Dashboard ${dashboardCount}`;
         return (
             <div
                 className="new-dashboard"
                 style={{
-                    background: StrCast(Doc.UserDoc().userBackgroundColor),
-                    color: StrCast(Doc.UserDoc().userColor),
+                    background: SettingsManager.userBackgroundColor,
+                    color: SettingsManager.userColor,
                 }}>
                 <div className="header">Create New Dashboard</div>
-                <EditableText formLabel="Title" placeholder={placeholder} type={Type.SEC} color={StrCast(Doc.UserDoc().userColor)} setVal={val => this.setNewDashboardName(val as string)} fillWidth />
+                <EditableText formLabel="Title" placeholder={this.newDashboardName} type={Type.SEC} color={SettingsManager.userColor} setVal={val => this.setNewDashboardName(val as string)} fillWidth />
                 <ColorPicker
                     formLabel="Background" //
                     colorPickerType="github"
@@ -117,63 +91,57 @@ export class DashboardView extends React.Component {
                     setSelectedColor={this.setNewDashboardColor}
                 />
                 <div className="button-bar">
-                    <Button text="Cancel" color={StrCast(Doc.UserDoc().userColor)} onClick={this.abortCreateNewDashboard} />
-                    <Button type={Type.TERT} text="Create" color={StrCast(Doc.UserDoc().userVariantColor)} onClick={() => this.createNewDashboard(this.newDashboardName!, this.newDashboardColor)} />
+                    <Button text="Cancel" color={SettingsManager.userColor} onClick={this.abortCreateNewDashboard} />
+                    <Button text="Create" color={SettingsManager.userVariantColor} type={Type.TERT} onClick={() => this.createNewDashboard(this.newDashboardName, this.newDashboardColor)} />
                 </div>
             </div>
         );
     }
+    @action
+    openNewDashboardModal = () => {
+        this.openModal = true;
+        this.setNewDashboardName(`Dashboard ${DocListCast(Doc.MyDashboards.data).length + 1}`);
+    };
 
     _downX: number = 0;
     _downY: number = 0;
-    @action
-    onContextMenu = (dashboard: Doc, e?: React.MouseEvent, pageX?: number, pageY?: number) => {
+    onContextMenu = (dashboard: Doc, e: React.MouseEvent) => {
         // the touch onContextMenu is button 0, the pointer onContextMenu is button 2
-        if (e) {
+        if (navigator.userAgent.includes('Mozilla') || (Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3)) {
             e.preventDefault();
             e.stopPropagation();
-            e.persist();
 
-            if (!navigator.userAgent.includes('Mozilla') && (Math.abs(this._downX - e?.clientX) > 3 || Math.abs(this._downY - e?.clientY) > 3)) {
-                return;
-            }
-            const cm = ContextMenu.Instance;
-            cm.addItem({
-                description: 'Share Dashboard',
-                event: async () => {
-                    SharingManager.Instance.open(undefined, dashboard);
-                },
+            ContextMenu.Instance.addItem({
+                description: `Share Dashboard`,
+                event: () => SharingManager.Instance.open(undefined, dashboard),
                 icon: 'edit',
             });
-            cm.addItem({
-                description: 'Delete Dashboard',
-                event: async () => {
-                    DashboardView.removeDashboard(dashboard);
-                },
+            ContextMenu.Instance.addItem({
+                description: `Delete Dashboard ${Doc.noviceMode ? '(disabled)' : ''}`,
+                event: () => !Doc.noviceMode && DashboardView.removeDashboard(dashboard),
                 icon: 'trash',
             });
-            cm.displayMenu((e?.pageX || pageX || 0) - 15, (e?.pageY || pageY || 0) - 15);
+            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
         }
     };
 
     render() {
-        const color = StrCast(Doc.UserDoc().userColor);
-        const variant = StrCast(Doc.UserDoc().userVariantColor);
+        const color = SettingsManager.userColor;
+        const variant = SettingsManager.userVariantColor;
         return (
             <>
                 <div className="dashboard-view">
                     <div className="left-menu">
-                        <Button text={'My Dashboards'} active={this.selectedDashboardGroup === DashboardGroup.MyDashboards} color={color} align={'flex-start'} onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards)} fillWidth />
+                        <Button text="My Dashboards" active={this.selectedDashboardGroup === DashboardGroup.MyDashboards} color={color} align={'flex-start'} onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards)} fillWidth />
                         <Button
                             text={'Shared Dashboards' + ' (' + this.getDashboards(DashboardGroup.SharedDashboards).length + ')'}
                             active={this.selectedDashboardGroup === DashboardGroup.SharedDashboards}
                             color={this.getDashboards(DashboardGroup.SharedDashboards).some(dash => !DocListCast(Doc.MySharedDocs.viewed).includes(dash)) ? 'green' : color}
-                            align={'flex-start'}
+                            align="flex-start"
                             onClick={() => this.selectDashboardGroup(DashboardGroup.SharedDashboards)}
                             fillWidth
                         />
-                        {}
-                        <Button icon={<FaPlus />} color={variant} iconPlacement="left" text="New Dashboard" type={Type.TERT} onClick={() => this.setNewDashboardName('')} />
+                        <Button icon={<FaPlus />} color={variant} iconPlacement="left" text="New Dashboard" type={Type.TERT} onClick={this.openNewDashboardModal} />
                     </div>
                     <div className="all-dashboards">
                         {this.selectedDashboardGroup === DashboardGroup.SharedDashboards && !this.getDashboards(this.selectedDashboardGroup).length
@@ -205,18 +173,14 @@ export class DashboardView extends React.Component {
                                                       this._downX = e.clientX;
                                                       this._downY = e.clientY;
                                                   }}
-                                                  onClick={e => {
-                                                      e.preventDefault();
-                                                      e.stopPropagation();
-                                                      this.onContextMenu(dashboard, e);
-                                                  }}>
+                                                  onClick={e => this.onContextMenu(dashboard, e)}>
                                                   <Button size={Size.SMALL} color={color} icon={<FontAwesomeIcon color={color} icon="bars" />} />
                                               </div>
                                           </div>
                                           <div
-                                              className={`background`}
+                                              className="background"
                                               style={{
-                                                  background: StrCast(Doc.UserDoc().userColor),
+                                                  background: SettingsManager.userColor,
                                                   filter: 'opacity(0.2)',
                                               }}
                                           />
@@ -225,16 +189,12 @@ export class DashboardView extends React.Component {
                                   );
                               })}
                         {this.selectedDashboardGroup === DashboardGroup.SharedDashboards ? null : (
-                            <div
-                                className="dashboard-container-new"
-                                onClick={() => {
-                                    this.setNewDashboardName('');
-                                }}>
+                            <div className="dashboard-container-new" onClick={this.openNewDashboardModal}>
                                 +
                                 <div
-                                    className={`background`}
+                                    className="background"
                                     style={{
-                                        background: StrCast(Doc.UserDoc().userColor),
+                                        background: SettingsManager.userColor,
                                         filter: 'opacity(0.2)',
                                     }}
                                 />
@@ -242,13 +202,7 @@ export class DashboardView extends React.Component {
                         )}
                     </div>
                 </div>
-                <MainViewModal
-                    contents={this.namingInterface}
-                    isDisplayed={this.newDashboardName !== undefined}
-                    interactive={true}
-                    closeOnExternalClick={this.abortCreateNewDashboard}
-                    dialogueBoxStyle={{ width: '400px', height: '180px', color: Colors.LIGHT_GRAY }}
-                />
+                <MainViewModal contents={this.namingInterface} isDisplayed={this.openModal} interactive={true} closeOnExternalClick={this.abortCreateNewDashboard} dialogueBoxStyle={{ width: '400px', height: '180px', color: Colors.LIGHT_GRAY }} />
             </>
         );
     }
@@ -305,16 +259,14 @@ export class DashboardView extends React.Component {
         return true;
     };
 
-    public static removeDashboard = async (dashboard: Doc) => {
-        const dashboards = await DocListCastAsync(Doc.MyDashboards.data);
-        if (dashboards?.length) {
-            undoable(() => {
-                if (dashboard === Doc.ActiveDashboard) DashboardView.openDashboard(dashboards.find(doc => doc !== dashboard));
-                Doc.RemoveDocFromList(Doc.MyDashboards, 'data', dashboard);
-                Doc.AddDocToList(Doc.MyRecentlyClosed, 'data', dashboard, undefined, true, true);
-                if (!dashboards.length) Doc.ActivePage = 'home';
-            }, 'remove dashboard')();
-        }
+    public static removeDashboard = (dashboard: Doc) => {
+        const dashboards = DocListCast(Doc.MyDashboards.data).filter(dash => dash !== dashboard);
+        undoable(() => {
+            if (dashboard === Doc.ActiveDashboard) DashboardView.openDashboard(dashboards.lastElement());
+            Doc.RemoveDocFromList(Doc.MyDashboards, 'data', dashboard);
+            Doc.AddDocToList(Doc.MyRecentlyClosed, 'data', dashboard, undefined, true, true);
+            if (!dashboards.length) Doc.ActivePage = 'home';
+        }, 'remove dashboard')();
     };
 
     public static resetDashboard = (dashboard: Doc) => {