-
-
Notifications
You must be signed in to change notification settings - Fork 29
/
Overview.jsx
121 lines (109 loc) · 3.52 KB
/
Overview.jsx
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
// #region ---------------- Imports ----------------
import React, { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom";
import Icon from "react-crud-icons";
import { getModel } from "utils/moMa";
import { fieldInCharts } from "utils/dico";
import { views } from "utils/dicoViews";
import { capitalize } from "utils/format";
import { lcWrite, lcRead } from "utils/localStorage";
import ErrorBoundary from "components/ErrorBoundary";
import { i18n_actions as i18n } from "i18n/i18n";
import ViewHeader from "components/views/ViewHeader/ViewHeader";
import Chart from "components/views/analytics/Charts/Chart";
import SearchBox from "./SearchBox";
import Activity from "./Activity";
import InvalidRoute from "./InvalidRoute";
// #endregion
import "./Overview.scss";
const Overview = () => {
const { entity } = useParams();
const m = getModel(entity);
const title = capitalize(m.namePlural) + " " + i18n.overview;
useEffect(() => {
window.scrollTo(0, 0);
document.title = title;
}, [title]);
const chartFields = m?.fields.filter(fieldInCharts);
const lcKey = `../${entity}-overview-chart`;
const lcChartField = lcRead(lcKey);
const [chartField, setChartField] = useState(
!!m && lcChartField ? m.fieldsH[lcChartField] : chartFields?.[0] || ""
);
if (m === null) {
return <InvalidRoute entity={entity} />;
} else {
const chartFieldChanged = (evt) => {
const target = evt.currentTarget;
const fid = target.selectedOptions[0].value;
lcWrite(lcKey, fid);
setChartField(m.fieldsH[fid]);
};
const urlBegin = `../${entity}/`;
const ViewLink = ({ id, label, icon }) => (
<Link to={urlBegin + id}>
<Icon name={icon} theme="light" />
<span>{label}</span>
</Link>
);
const Actions = () => (
<div className="ovw-actions">
<div>
<ViewLink {...views.list} />
<ViewLink {...views.cards} />
</div>
<div>
{!m.noCharts && <ViewLink {...views.charts} />}
{!m.noStats && <ViewLink {...views.stats} />}
</div>
<div>
<ViewLink id="edit/0" label={"New " + m.name} icon="add" />
</div>
</div>
);
const placeHolder = i18n.searchX.replace("{0}", m.namePlural);
const body = (
<div className="ovw-body">
<Actions />
<SearchBox entity={entity} placeHolder={placeHolder} />
<div className="ovw-text"></div>
<div className="cols-2">
<Activity entity={entity} />
{!m.noCharts && (
<ErrorBoundary>
<div className="ovw-chart">
<Chart
entity={entity}
field={chartField}
title=""
chartType="pie"
size="small"
canExpand={false}
className="panel"
/>
<select
value={chartField?.id}
onChange={chartFieldChanged}
className="form-control"
>
{chartFields?.map((f) => (
<option key={f.id} value={f.id}>
{f.label}
</option>
))}
</select>
</div>
</ErrorBoundary>
)}
</div>
</div>
);
return (
<div className="evol-overview">
<ViewHeader entity={entity} title={title} view="overview" />
{body}
</div>
);
}
};
export default Overview;