merge with mehek video

1 files changed, 69 insertions, 0 deletions

diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
new file mode 100644
index 000000000..a126218c4
--- /dev/null
+++ b/src/client/views/DashboardView.tsx
@@ -0,0 +1,69 @@
+import { action, observable } from "mobx";
+import { extname } from 'path';
+import { observer } from "mobx-react";
+import * as React from 'react';
+import { Doc, DocListCast } from "../../fields/Doc";
+import { Id } from "../../fields/FieldSymbols";
+import { Cast, ImageCast, StrCast } from "../../fields/Types";
+import { CurrentUserUtils } from "../util/CurrentUserUtils";
+import { UndoManager } from "../util/UndoManager";
+import "./DashboardView.scss"
+
+enum DashboardGroup {
+      MyDashboards, SharedDashboards
+}
+
+@observer
+export class DashboardView extends React.Component {
+
+      //TODO: delete dashboard, share dashboard, etc.
+
+      @observable
+      private selectedDashboardGroup = DashboardGroup.MyDashboards;
+
+      @action
+      selectDashboardGroup = (group: DashboardGroup) => {
+            this.selectedDashboardGroup = group
+      }
+
+      newDashboard = async () => {
+            const batch = UndoManager.StartBatch("new dash");
+            await CurrentUserUtils.createNewDashboard();
+            batch.end();
+      }
+
+      clickDashboard = async (e: React.MouseEvent, dashboard: Doc) => {
+            if (e.detail === 2) {
+                  CurrentUserUtils.ActiveDashboard = dashboard;
+                  CurrentUserUtils.ActivePage = "dashboard";
+            }
+      }
+
+      getDashboards = () => {
+            const allDashbaords = DocListCast(CurrentUserUtils.MyDashboards.data);
+            // TODO: filter the dashboards
+            // return allDashbaords.filter(...)
+            return allDashbaords
+      }
+
+      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>
+
+                        })}
+
+                  </div>
+            </div>
+      }
+}