Skip to content

Commit bed6172

Browse files
silviyabotevasilviyaboteva
committed
chore: use real d ata in home page and interactable
1 parent 57994f3 commit bed6172

File tree

1 file changed

+72
-80
lines changed
  • examples/kendo-react-freemium/src/pages

1 file changed

+72
-80
lines changed

‎examples/kendo-react-freemium/src/pages/Home.tsx‎

Lines changed: 72 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { Button } from "@progress/kendo-react-buttons";
2-
import { Grid, GridColumn, GridCustomCellProps } from "@progress/kendo-react-grid";
2+
import { Grid, GridColumn } from "@progress/kendo-react-grid";
33
import { Badge } from "@progress/kendo-react-indicators";
44
import { Checkbox } from "@progress/kendo-react-inputs";
55
import { Avatar, Card, CardBody, CardFooter, CardHeader, CardSubtitle, CardTitle } from "@progress/kendo-react-layout";
66
import { Calendar } from "@progress/kendo-react-dateinputs";
77
import { ListView, ListViewItemWrapper } from "@progress/kendo-react-listview";
88
import { pencilIcon, plusIcon, trashIcon } from "@progress/kendo-svg-icons";
9-
import { gridData, listData } from "./data";
9+
import { tasksData, listData, projectsData, teamsData } from "./data";
10+
import React from "react";
11+
import { useNavigate } from "react-router-dom";
1012

1113
const ListItemRender = (props: any) => {
1214
let item = props.dataItem;
@@ -20,13 +22,34 @@ const ListItemRender = (props: any) => {
2022
</ListViewItemWrapper>;
2123
};
2224

23-
const TaskNameCells = (props: GridCustomCellProps) => {
24-
return <td {...props.tdProps}>
25-
<div className="truncate">{props.dataItem.taskName}</div>
26-
</td>;
27-
}
25+
// const TaskNameCells = (props: GridCustomCellProps) => {
26+
// return <td {...props.tdProps}>
27+
// <div className="truncate">{props.dataItem.taskName}</div>
28+
// </td>;
29+
// }
2830

2931
export default function Home() {
32+
const navigate = useNavigate();
33+
const [showAllProjects, setShowAllProjects] = React.useState(false);
34+
const [showAllTeams, setShowAllTeams] = React.useState(false);
35+
const [showAllTasks, setShowAllTasks] = React.useState(false);
36+
37+
const handleSeeAllProjectsClick = () => {
38+
setShowAllProjects(!showAllProjects);
39+
};
40+
41+
const handleSeeAllTeamsClick = () => {
42+
setShowAllTeams(!showAllTeams);
43+
};
44+
45+
const handleSeeAllTasksClick = () => {
46+
setShowAllTasks(!showAllTasks);
47+
}
48+
49+
const projectsToShow = showAllProjects ? projectsData : projectsData.slice(0, 5);
50+
const teamsToShow = showAllTeams ? teamsData : teamsData.slice(0, 4);
51+
52+
const tasksToShow = showAllTasks ? tasksData : tasksData.slice(0, 5);
3053
return (
3154
<>
3255
<div style={{ minHeight: 'calc(100vh - 106px)'}} className="bg-linear-[119deg,_#F8F9FF_-1.78%,_#F3F2FF_47.75%,_#E6F5FF_97.28%] p-10">
@@ -38,41 +61,31 @@ export default function Home() {
3861
<CardTitle className="font-medium">Projects</CardTitle>
3962
</CardHeader>
4063
<CardBody>
41-
<div className="grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2">
42-
<Card>
43-
<CardBody className="flex flex-col justify-between">
44-
<CardTitle className="font-medium line-clamp-5 h-25.5">AI-Powered Bug Tracking and Resolution System</CardTitle>
45-
<div><Badge themeColor="warning" rounded="full" position={'inside'} align={{vertical: 'bottom', horizontal: 'start'}} className="relative z-0">Medium priority</Badge></div>
46-
</CardBody>
47-
</Card>
48-
<Card>
49-
<CardBody className="flex flex-col justify-between">
50-
<CardTitle className="font-medium line-clamp-5 h-25.5">Virtual Reality Training Module for Employee Onboarding</CardTitle>
51-
<div><Badge themeColor="success" rounded="full" position={'inside'} align={{vertical: 'bottom', horizontal: 'start'}} className="relative z-0">Low priority</Badge></div>
52-
</CardBody>
53-
</Card>
54-
<Card>
55-
<CardBody className="flex flex-col justify-between">
56-
<CardTitle className="font-medium line-clamp-5 h-25.5">Online Learning Management System (LMS)</CardTitle>
57-
<div><Badge themeColor="error" rounded="full" position={'inside'} align={{vertical: 'bottom', horizontal: 'start'}} className="relative z-0">Urgent</Badge></div>
58-
</CardBody>
59-
</Card>
60-
<Card className="hidden xl:flex">
61-
<CardBody className="flex flex-col justify-between">
62-
<CardTitle className="font-medium line-clamp-5 h-25.5">Telehealth and Health Tracking Application</CardTitle>
63-
<div><Badge themeColor="success" rounded="full" position={'inside'} align={{vertical: 'bottom', horizontal: 'start'}} className="relative z-0">Low priority</Badge></div>
64-
</CardBody>
65-
</Card>
66-
<Card className="hidden 2xl:flex">
67-
<CardBody className="flex flex-col justify-between">
68-
<CardTitle className="font-medium line-clamp-5 h-25.5">Market Research and Analytics Tool</CardTitle>
69-
<div><Badge themeColor="success" rounded="full" position={'inside'} align={{vertical: 'bottom', horizontal: 'start'}} className="relative z-0">Low priority</Badge></div>
70-
</CardBody>
71-
</Card>
64+
<div className="grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2">
65+
{projectsToShow.map((project, index) => {
66+
return <Card key={'project-' + index}>
67+
<CardBody className="flex flex-col justify-between">
68+
<div onClick={() => navigate('/projects')} className="cursor-pointer">
69+
<CardTitle className="font-medium line-clamp-5 h-25.5">{project.ProjectName}</CardTitle>
70+
<div><Badge themeColor={
71+
project.Priority === "Urgent"
72+
? "error"
73+
: project.Priority === "Medium priority"
74+
? "warning"
75+
: project.Priority === "Low priority"
76+
? "success"
77+
: project.Priority === "Routine"
78+
? "tertiary"
79+
: "primary"
80+
} rounded="full" position={'inside'} align={{ vertical: 'bottom', horizontal: 'start' }} className="relative z-0">{project.Priority}</Badge></div>
81+
</div>
82+
</CardBody>
83+
</Card>
84+
})}
7285
</div>
7386
</CardBody>
7487
<CardFooter className="border-0 p-2">
75-
<Button fillMode="flat" themeColor="primary">See all</Button>
88+
<Button fillMode="flat" themeColor="primary" onClick={handleSeeAllProjectsClick}>See all</Button>
7689
</CardFooter>
7790
</Card>
7891
</div>
@@ -85,45 +98,22 @@ export default function Home() {
8598
<CardTitle className="font-medium">Teams</CardTitle>
8699
</CardHeader>
87100
<CardBody className="flex flex-col gap-2">
88-
<Card>
89-
<CardBody className="flex items-center">
90-
<Avatar>FE</Avatar>
91-
<div className="hidden lg:block">
92-
<CardTitle className="m-0 font-medium">Frontend</CardTitle>
93-
<CardSubtitle className="m-0 truncate text-subtle">10 members</CardSubtitle>
94-
</div>
95-
</CardBody>
96-
</Card>
97-
<Card>
98-
<CardBody className="flex items-center">
99-
<Avatar themeColor="secondary">BE</Avatar>
100-
<div className="hidden lg:block">
101-
<CardTitle className="m-0 font-medium">Backend</CardTitle>
102-
<CardSubtitle className="m-0 truncate text-subtle">10 members</CardSubtitle>
103-
</div>
104-
</CardBody>
105-
</Card>
106-
<Card className="hidden lg:flex">
107-
<CardBody className="flex items-center">
108-
<Avatar themeColor="tertiary">DO</Avatar>
109-
<div className="hidden lg:block">
110-
<CardTitle className="m-0 font-medium">DevOps</CardTitle>
111-
<CardSubtitle className="m-0 truncate text-subtle">10 members</CardSubtitle>
112-
</div>
113-
</CardBody>
114-
</Card>
115-
<Card className="hidden lg:flex">
116-
<CardBody className="flex items-center">
117-
<Avatar>QA</Avatar>
118-
<div className="hidden lg:block">
119-
<CardTitle className="m-0 font-medium">QA</CardTitle>
120-
<CardSubtitle className="m-0 truncate text-subtle">10 members</CardSubtitle>
121-
</div>
122-
</CardBody>
123-
</Card>
101+
{teamsToShow.map((team, index) => {
102+
return <Card key={'team-' + index}>
103+
<div onClick={() => navigate('/team-management')} className="cursor-pointer">
104+
<CardBody className="flex items-center">
105+
<Avatar style={{ background: team.avatarColor }}>{team.teamCode}</Avatar>
106+
<div className="hidden lg:block">
107+
<CardTitle className="m-0 font-medium">{team.teamName.replace("Team", "")}</CardTitle>
108+
<CardSubtitle className="m-0 truncate text-subtle">{team.teamMembers.length} members</CardSubtitle>
109+
</div>
110+
</CardBody>
111+
</div>
112+
</Card>
113+
})}
124114
</CardBody>
125115
<CardFooter className="border-0 p-2">
126-
<Button fillMode="flat" themeColor="primary">See all</Button>
116+
<Button fillMode="flat" themeColor="primary" onClick={handleSeeAllTeamsClick}>See all</Button>
127117
</CardFooter>
128118
</Card>
129119
</div>
@@ -144,13 +134,15 @@ export default function Home() {
144134
<CardTitle className="font-medium">Tasks</CardTitle>
145135
</CardHeader>
146136
<CardBody className="h-full overflow-y-hidden">
147-
<Grid className="h-full" data={gridData}>
148-
<GridColumn field="taskName" title="Task Name" editable={false} filterable={false} cells={{ data: TaskNameCells }} />
149-
<GridColumn field="status" title="Status" editable={false} filterable={false} />
137+
<Grid className="h-full" data={tasksToShow}>
138+
<GridColumn field="taskName" title="Task Name"
139+
// cells={{ data: TaskNameCells }}
140+
/>
141+
<GridColumn field="status" title="Status" width={115} />
150142
</Grid>
151143
</CardBody>
152144
<CardFooter className="border-0 p-2">
153-
<Button fillMode="flat" themeColor="primary">See all</Button>
145+
<Button fillMode="flat" themeColor="primary" onClick={handleSeeAllTasksClick}>See all</Button>
154146
</CardFooter>
155147
</Card>
156148
</div>

0 commit comments

Comments
 (0)