diff options
Diffstat (limited to 'src/client/views/DashboardView.tsx')
| -rw-r--r-- | src/client/views/DashboardView.tsx | 152 |
1 files changed, 124 insertions, 28 deletions
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx index 9a0f25fe3..ebe73ffea 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,62 +8,158 @@ import { Cast, ImageCast, StrCast } from "../../fields/Types"; import { CurrentUserUtils } from "../util/CurrentUserUtils"; import { UndoManager } from "../util/UndoManager"; import "./DashboardView.scss" +import { MainViewModal } from "./MainViewModal"; +import { ContextMenu } from "./ContextMenu"; +import { DocumentManager } from "../util/DocumentManager"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { ContextMenuProps } from "./ContextMenuItem"; +import { simulateMouseClick } from "../../Utils"; +import { SharingManager } from "../util/SharingManager"; +import { CollectionViewType } from "./collections/CollectionView"; enum DashboardGroup { MyDashboards, SharedDashboards } +// DashboardView is the view with the dashboard previews, rendered when the app first loads + @observer 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.AddDocToList(CurrentUserUtils.MySharedDocs, "viewed", dashboard) CurrentUserUtils.ActiveDashboard = dashboard; CurrentUserUtils.ActivePage = "dashboard"; } } getDashboards = () => { - const allDashbaords = DocListCast(CurrentUserUtils.MyDashboards.data); - // TODO: filter the dashboards - // return allDashbaords.filter(...) - return allDashbaords + const allDashboards = DocListCast(CurrentUserUtils.MyDashboards.data); + if (this.selectedDashboardGroup === DashboardGroup.MyDashboards) { + return allDashboards.filter((dashboard) => Doc.GetProto(dashboard).author === Doc.CurrentUserEmail) + } else { + const sharedDashboards = DocListCast(CurrentUserUtils.MySharedDocs.data).filter(doc => doc._viewType === CollectionViewType.Docking); + return sharedDashboards + } + } + + isUnviewedSharedDashboard = (dashboard: Doc): boolean => { + // const sharedDashboards = DocListCast(CurrentUserUtils.MySharedDocs.data).filter(doc => doc._viewType === CollectionViewType.Docking); + return !DocListCast(CurrentUserUtils.MySharedDocs.viewed).includes(dashboard) + } + + getSharedDashboards = () => { + const sharedDashs = DocListCast(CurrentUserUtils.MySharedDocs.data).filter(doc => doc._viewType === CollectionViewType.Docking); + return sharedDashs.filter((dashboard) => !DocListCast(CurrentUserUtils.MySharedDocs.viewed).includes(dashboard)) + } + + 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>; + } + + _downX: number = 0; + _downY: number = 0; + @action + onContextMenu = (dashboard: Doc, e?: React.MouseEvent, pageX?: number, pageY?: number) => { + // the touch onContextMenu is button 0, the pointer onContextMenu is button 2 + if (e) { + 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) + }, icon: "edit" + }); + cm.addItem({ + description: "Delete Dashboard", event: async () => { + CurrentUserUtils.removeDashboard(dashboard) + }, icon: "trash" + }); + cm.displayMenu((e?.pageX || pageX || 0) - 15, (e?.pageY || pageY || 0) - 15); + } + } + + 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]} + 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> + {this.selectedDashboardGroup === DashboardGroup.SharedDashboards && this.isUnviewedSharedDashboard(dashboard) ? + <div>unviewed</div> : <div></div> + } + <div className="more" onPointerDown={e => { + this._downX = e.clientX; + this._downY = e.clientY; + }} + onClick={(e) => {this.onContextMenu(dashboard, e)}} + > + <FontAwesomeIcon color="black" size="lg" icon="bars" /> + </div> + </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) }} />; + </> + } } + +export function AddToList(MySharedDocs: Doc, arg1: string, dash: any) { + throw new Error("Function not implemented."); +} + |