blob: a126218c45c00bea1ae4bd860b192226eb8c9d6e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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>
}
}
|
