From 4a617f6c9f0fa8b67699baa472b5bbd711f926c2 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 6 Sep 2023 16:07:50 -0400 Subject: cleanup dashboardview code and disable delete dashbaord since it's not easily undoable. --- src/client/views/DashboardView.tsx | 156 +++++++++++++------------------------ 1 file changed, 54 insertions(+), 102 deletions(-) (limited to 'src') 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 (
Create New Dashboard
- this.setNewDashboardName(val as string)} fillWidth /> + this.setNewDashboardName(val as string)} fillWidth />
-
); } + @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 ( <>
-
{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)}>
@@ -225,16 +189,12 @@ export class DashboardView extends React.Component { ); })} {this.selectedDashboardGroup === DashboardGroup.SharedDashboards ? null : ( -
{ - this.setNewDashboardName(''); - }}> +
+
@@ -242,13 +202,7 @@ export class DashboardView extends React.Component { )}
- + ); } @@ -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) => { -- cgit v1.2.3-70-g09d2