Skip to content

Commit bd560dc

Browse files
WissamProgressWissamProgress
committed
chore: convert dashboard and planning to server components
1 parent 8410af8 commit bd560dc

File tree

12 files changed

+459
-422
lines changed

12 files changed

+459
-422
lines changed

‎examples/coffee-warehouse-nextjs/app/assets/user-avatar.jpg‎

-10.4 KB
Binary file not shown.

‎examples/coffee-warehouse-nextjs/app/globalization-and-header.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ loadMessages(frMessages, "fr");
5656

5757
import { Header } from "./components/Header";
5858

59-
export function GlobalizationTest(props) {
59+
export function GlobalizationAndHeader(props) {
6060
const [language, setLanguage] = React.useState("en");
6161
const onButtonClick = (event) => {
6262
setLanguage(event.value.localeId);

‎examples/coffee-warehouse-nextjs/app/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from "react";
33
import "./App.scss";
44

55
import type { Metadata } from "next";
6-
import { GlobalizationTest } from "./globalization-and-header";
6+
import { GlobalizationAndHeader } from "./globalization-and-header";
77

88
export const metadata: Metadata = {
99
title: "Create Next App",
@@ -25,7 +25,7 @@ export default function RootLayout({
2525
/>
2626
</head>
2727
<body>
28-
<GlobalizationTest>{children}</GlobalizationTest>
28+
<GlobalizationAndHeader>{children}</GlobalizationAndHeader>
2929
</body>
3030
</html>
3131
);

‎examples/coffee-warehouse-nextjs/app/warehouse/dashboard/dashboard-page.jsx‎

Lines changed: 272 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
"use client";
2+
import * as React from "react";
3+
4+
import { ButtonGroup, Button } from "@progress/kendo-react-buttons";
5+
import { DateRangePicker } from "@progress/kendo-react-dateinputs";
6+
7+
import { useLocalization } from "@progress/kendo-react-intl";
8+
import { filterBy } from "@progress/kendo-data-query";
9+
10+
import { Grid, Column, ColumnMenu } from "../../components/Grid";
11+
import { Chart } from "../../components/Chart";
12+
import {
13+
FullNameCell,
14+
FlagCell,
15+
OnlineCell,
16+
RatingCell,
17+
EngagementCell,
18+
CurrencyCell,
19+
} from "../../components/GridCells";
20+
21+
import { teams } from "../../resources/teams";
22+
import { orders } from "../../resources/orders";
23+
const noMessage = "message not defined";
24+
25+
export default function DashBoard(props) {
26+
const [data, setData] = React.useState(props.employees);
27+
const [isTrend, setIsTrend] = React.useState(true);
28+
const [isMyTeam, setIsMyTeam] = React.useState(true);
29+
const localizationService = useLocalization();
30+
31+
const isChartChangeRef = React.useRef(false);
32+
const onChartRefresh = React.useCallback(() => null, []);
33+
34+
React.useEffect(() => {
35+
isChartChangeRef.current = false;
36+
});
37+
38+
const teamId = "1";
39+
const gridFilterExpression = isMyTeam
40+
? {
41+
logic: "and",
42+
filters: [{ field: "teamId", operator: "eq", value: teamId }],
43+
}
44+
: null;
45+
46+
const [range, setRange] = React.useState({
47+
start: new Date("2020-01-01T21:00:00.000Z"),
48+
end: new Date("2020-04-29T21:00:00.000Z"),
49+
});
50+
const onRangeChange = React.useCallback(
51+
(event) => {
52+
setRange({
53+
start: event.value.start,
54+
end: event.value.end,
55+
});
56+
},
57+
[setRange]
58+
);
59+
const trendOnClick = React.useCallback(() => {
60+
isChartChangeRef.current = true;
61+
setIsTrend(true);
62+
}, [setIsTrend]);
63+
const volumeOnClick = React.useCallback(() => {
64+
isChartChangeRef.current = true;
65+
setIsTrend(false);
66+
}, [setIsTrend]);
67+
const myTeamOnClick = React.useCallback(
68+
() => setIsMyTeam(true),
69+
[setIsMyTeam]
70+
);
71+
const allTeamOnClick = React.useCallback(
72+
() => setIsMyTeam(false),
73+
[setIsMyTeam]
74+
);
75+
76+
return (
77+
<div id="Dashboard" className="dashboard-page main-content">
78+
<div className="card-container grid">
79+
<h3 className="card-title">
80+
{localizationService.toLanguageString(
81+
"custom.teamEfficiency",
82+
noMessage
83+
)}
84+
</h3>
85+
<div className="card-buttons">
86+
<ButtonGroup>
87+
<Button togglable={true} selected={isTrend} onClick={trendOnClick}>
88+
{localizationService.toLanguageString("custom.trend", noMessage)}
89+
</Button>
90+
<Button
91+
togglable={true}
92+
selected={!isTrend}
93+
onClick={volumeOnClick}
94+
>
95+
{localizationService.toLanguageString("custom.volume", noMessage)}
96+
</Button>
97+
</ButtonGroup>
98+
</div>
99+
<div className="card-ranges">
100+
<DateRangePicker value={range} onChange={onRangeChange} />
101+
</div>
102+
<div className="card-component">
103+
<Chart
104+
data={orders}
105+
filterStart={range.start}
106+
filterEnd={range.end}
107+
groupByField={"teamID"}
108+
groupResourceData={teams}
109+
groupTextField={"teamName"}
110+
groupColorField={"teamColor"}
111+
seriesCategoryField={"orderDate"}
112+
seriesField={"orderTotal"}
113+
seriesType={isTrend ? "line" : "column"}
114+
onRefresh={isChartChangeRef.current ? null : onChartRefresh}
115+
/>
116+
</div>
117+
</div>
118+
<div className="card-container grid">
119+
<h3 className="card-title">
120+
{localizationService.toLanguageString(
121+
"custom.teamMembers",
122+
noMessage
123+
)}
124+
</h3>
125+
<div className="card-buttons">
126+
<ButtonGroup>
127+
<Button
128+
togglable={true}
129+
selected={isMyTeam}
130+
onClick={myTeamOnClick}
131+
>
132+
{localizationService.toLanguageString("custom.myTeam", noMessage)}
133+
</Button>
134+
<Button
135+
togglable={true}
136+
selected={!isMyTeam}
137+
onClick={allTeamOnClick}
138+
>
139+
{localizationService.toLanguageString(
140+
"custom.allTeams",
141+
noMessage
142+
)}
143+
</Button>
144+
</ButtonGroup>
145+
</div>
146+
<span></span>
147+
<div className="card-component">
148+
<Grid
149+
data={filterBy(data, gridFilterExpression)}
150+
style={{ height: 450 }}
151+
onDataChange={(data) => setData(data)}
152+
>
153+
<Column
154+
title={localizationService.toLanguageString(
155+
"custom.employee",
156+
noMessage
157+
)}
158+
groupable={false}
159+
>
160+
<Column
161+
field={"fullName"}
162+
title={localizationService.toLanguageString(
163+
"custom.contactName",
164+
noMessage
165+
)}
166+
columnMenu={ColumnMenu}
167+
width={230}
168+
cell={FullNameCell}
169+
/>
170+
<Column
171+
field={"jobTitle"}
172+
title={localizationService.toLanguageString(
173+
"custom.jobTitle",
174+
noMessage
175+
)}
176+
columnMenu={ColumnMenu}
177+
width={230}
178+
/>
179+
<Column
180+
field={"country"}
181+
title={localizationService.toLanguageString(
182+
"custom.country",
183+
noMessage
184+
)}
185+
columnMenu={ColumnMenu}
186+
width={100}
187+
cell={FlagCell}
188+
/>
189+
<Column
190+
field={"isOnline"}
191+
title={localizationService.toLanguageString(
192+
"custom.status",
193+
noMessage
194+
)}
195+
columnMenu={ColumnMenu}
196+
width={100}
197+
cell={OnlineCell}
198+
filter={"boolean"}
199+
/>
200+
</Column>
201+
<Column
202+
title={localizationService.toLanguageString(
203+
"custom.performance",
204+
noMessage
205+
)}
206+
groupable={false}
207+
>
208+
<Column
209+
field={"rating"}
210+
title={localizationService.toLanguageString(
211+
"custom.rating",
212+
noMessage
213+
)}
214+
columnMenu={ColumnMenu}
215+
width={110}
216+
cell={RatingCell}
217+
filter={"numeric"}
218+
/>
219+
<Column
220+
field={"target"}
221+
title={localizationService.toLanguageString(
222+
"custom.engagement",
223+
noMessage
224+
)}
225+
columnMenu={ColumnMenu}
226+
width={200}
227+
cell={EngagementCell}
228+
filter={"numeric"}
229+
/>
230+
<Column
231+
field={"budget"}
232+
title={localizationService.toLanguageString(
233+
"custom.budget",
234+
noMessage
235+
)}
236+
columnMenu={ColumnMenu}
237+
width={100}
238+
cell={CurrencyCell}
239+
filter={"numeric"}
240+
/>
241+
</Column>
242+
<Column
243+
title={localizationService.toLanguageString(
244+
"custom.contacts",
245+
noMessage
246+
)}
247+
groupable={false}
248+
>
249+
<Column
250+
field={"phone"}
251+
title={localizationService.toLanguageString(
252+
"custom.phone",
253+
noMessage
254+
)}
255+
columnMenu={ColumnMenu}
256+
width={130}
257+
/>
258+
<Column
259+
field={"address"}
260+
title={localizationService.toLanguageString(
261+
"custom.address",
262+
noMessage
263+
)}
264+
columnMenu={ColumnMenu}
265+
/>
266+
</Column>
267+
</Grid>
268+
</div>
269+
</div>
270+
</div>
271+
);
272+
}

‎examples/coffee-warehouse-nextjs/app/warehouse/dashboard/loading.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function Loading() {
2+
return 'Loading dashboard...';
3+
}

0 commit comments

Comments
 (0)