Skip to content

Commit cce24f2

Browse files
silviyabotevasilviyaboteva
committed
chore: add task id page
1 parent a71411e commit cce24f2

File tree

4 files changed

+172
-7
lines changed

4 files changed

+172
-7
lines changed

‎examples/kendo-react-freemium/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Projects from "./pages/Projects";
77
import Tasks from "./pages/Tasks";
88
import Settings from "./pages/Settings";
99
import Team from "./pages/Team";
10+
import Task from "./pages/Task";
1011

1112
export default function App() {
1213
return (
@@ -18,6 +19,7 @@ export default function App() {
1819
<Route path="/" element={<Home />} />
1920
<Route path="/projects" element={<Projects />} />
2021
<Route path="/tasks" element={<Tasks />} />
22+
<Route path="/tasks/:taskId" element={<Task />} />
2123
<Route path="/team-management" element={<TeamManagement />} />
2224
<Route path="/team-management/:teamId" element={<Team />} />
2325
<Route path="/settings" element={<Settings />} />

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

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import { useParams } from "react-router";
2+
import { useNavigate } from "react-router-dom";
3+
import { tasksData, teamsData } from "./data";
4+
import { ButtonGroup, Button, FloatingActionButton } from "@progress/kendo-react-buttons";
5+
import { Breadcrumb, Card, CardBody, Avatar, CardTitle, CardSubtitle, CardFooter, BreadcrumbLinkMouseEvent, GridLayout } from "@progress/kendo-react-layout";
6+
import { groupIcon, listUnorderedSquareIcon, homeIcon, detailSectionIcon, plusIcon, folderIcon, trashIcon, checkIcon } from "@progress/kendo-svg-icons";
7+
import { SvgIcon } from "@progress/kendo-react-common";
8+
import { Window } from '@progress/kendo-react-dialogs';
9+
import React from "react";
10+
import { TextArea } from "@progress/kendo-react-inputs";
11+
12+
interface DataModel {
13+
id: string;
14+
text?: string;
15+
icon?: React.ReactNode;
16+
}
17+
18+
export default function Task() {
19+
let params = useParams();
20+
const navigate = useNavigate();
21+
const task = tasksData.filter(task => task.taskId === params.taskId)[0];
22+
23+
const breadcrumbItems: DataModel[] = [
24+
{
25+
id: "home",
26+
icon: <SvgIcon icon={homeIcon} />,
27+
},
28+
{
29+
id: "tasks",
30+
text: "Tasks",
31+
},
32+
{
33+
id: `${params.taskId}`,
34+
text: `${tasksData.filter(task => task.taskId === params.taskId)[0].taskName}`,
35+
}
36+
];
37+
38+
const handleItemSelect = (e: BreadcrumbLinkMouseEvent) => {
39+
if (e.id === 'home') {
40+
navigate('/');
41+
} else if (e.id === 'tasks') {
42+
navigate('/tasks');
43+
}
44+
}
45+
46+
return (
47+
<>
48+
<div style={{minHeight: 'calc(100vh - 106px)'}} className="flex flex-col p-10 gap-6">
49+
<Breadcrumb data={breadcrumbItems} onItemSelect={handleItemSelect} className="!bg-app-surface" />
50+
51+
<h1 className="text-4xl">{tasksData.map(task => { return task.taskId === params.taskId ? task.taskName : '' })}</h1>
52+
53+
<div className="grid grid-cols-12 gap-6">
54+
<div className="col-span-6 lg:col-span-8">
55+
<TextArea rows={30} className="rounded-t-2xl" value='As part of a learning management system, we need to implement content management features that enable instructors to easily create, manage, and organize their course materials.
56+
Objectives:
57+
1. Enhance User Experience: Streamline the process for instructors to create, manage, and distribute course content effectively.
58+
2. Facilitate Content Accessibility: Ensure that all content management features are user-friendly and accessible to instructors with varying levels of technical expertise.
59+
3. Boost Engagement: Provide tools that enable instructors to create more engaging and interactive content for students.
60+
61+
Key Responsibilities:
62+
1. Requirements Gathering: Collaborate with instructors to understand their needs and pain points regarding current content management practices.
63+
2. Feature Development: Design and implement features such as modular content creation, media embedding, version control, and scheduling for content release.
64+
3. User Testing: Conduct thorough testing sessions with instructors to ensure the new features meet their expectations and are easy to use.
65+
4. Documentation and Training: Develop user manuals and training materials to assist instructors in utilizing the new content management features.
66+
5. Feedback Incorporation: Set up a process for collecting user feedback post-implementation to make adjustments and improvements as necessary.
67+
68+
Deliverables:
69+
1. Feature Specifications Document: A comprehensive document outlining the requirements, features, and functionalities based on instructor feedback.
70+
2. Developed Features: A functioning implementation of content management features that includes:
71+
3. Course content creation tools (text, video, quizzes)
72+
4. Media upload and embedding options
73+
5. Version control and history tracking for content changes
74+
6. Scheduling and automation for content release
75+
7. User Acceptance Testing (UAT) Report: Document summarizing feedback from testing sessions and any identified issues or suggestions for improvement.
76+
8. Training Materials: User guides, video tutorials, and training sessions scheduled for instructors to familiarize them with the new features.
77+
9. Feedback Mechanism: An established method for instructors to provide ongoing feedback on the content management system.
78+
79+
Comments/Notes:
80+
It’s important to involve a diverse group of instructors in the testing phase to capture a wide range of feedback.
81+
Consider accessibility best practices to ensure all instructors, including those with disabilities, can effectively utilize the new features.
82+
Regular check-ins with stakeholders should be scheduled to ensure continued alignment with instructional goals and user needs.
83+
Monitor key metrics post-launch to evaluate the effectiveness of the content management features in enhancing instructor performance and student engagement.
84+
'/>
85+
<div className="bg-surface-alt border-1 border-t-0 border-border rounded-b-2xl px-4 py-2">
86+
<div className="hidden lg:flex gap-1">
87+
<Button svgIcon={checkIcon} themeColor="primary" size="large">Save changes</Button>
88+
<Button svgIcon={folderIcon} fillMode="flat" size="large" className="ml-auto">Archive Task</Button>
89+
<Button svgIcon={trashIcon} fillMode="flat" themeColor="error" size="large">Delete task</Button>
90+
</div>
91+
<div className="flex lg:hidden gap-1">
92+
<Button svgIcon={checkIcon} themeColor="primary" size="large">Save changes</Button>
93+
<Button svgIcon={folderIcon} fillMode="flat" size="large" className="ml-auto">Archive Task</Button>
94+
<Button svgIcon={trashIcon} fillMode="flat" themeColor="error" size="large">Delete task</Button>
95+
</div>
96+
</div>
97+
</div>
98+
99+
{/* <div className="col-span-6 lg:col-span-4 flex flex-col gap-2">
100+
<ExpansionPanel title="Project" expanded className="rounded-2xl">
101+
<label>Choose project</label>
102+
<DropdownList value="Online Learning Management System (LMS)" size="large" />
103+
</ExpansionPanel>
104+
<ExpansionPanel title="Due Date" expanded className="rounded-2xl">
105+
<label>Set due date</label>
106+
<DateInput value="05/03/2025" />
107+
</ExpansionPanel>
108+
<ExpansionPanel title="Assigned to" expanded className="rounded-2xl">
109+
<label>Select assignee(s)</label>
110+
<MultiSelect size="large" tags={(
111+
<>
112+
<Chip actions={ <ChipAction type="remove"/> } text="Alden_Upton" size="large" />
113+
</>
114+
)} />
115+
</ExpansionPanel>
116+
<ExpansionPanel title="Status" expanded className="rounded-2xl">
117+
<label>Select assignee(s)</label>
118+
<DropdownList value="l🚧 On Hold" size="large" />
119+
</ExpansionPanel>
120+
<ExpansionPanel title="Tags" expanded className="rounded-2xl">
121+
<label>Select tags</label>
122+
<MultiSelect size="large" tags={(
123+
<>
124+
<Chip actions={ <ChipAction type="remove"/> } text="Compliance" size="large" />
125+
<Chip actions={ <ChipAction type="remove"/> } text="Maintenance" size="large" />
126+
</>
127+
)} />
128+
</ExpansionPanel>
129+
</div> */}
130+
131+
</div>
132+
133+
</div>
134+
<div className="bg-surface-alt color-subtle p-2 text-center">
135+
<span>Copyright &#169; 2025 Progress Software. All rights reserved.</span>
136+
</div>
137+
</>
138+
)
139+
}

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,11 @@ export default function Tasks() {
4949
);
5050

5151
setData(newData);
52-
};
52+
};
53+
54+
const handleRowDoubleClick = (event: any) => {
55+
navigate(`/tasks/${event.dataItem.taskId}`);
56+
};
5357

5458
return (
5559
<div
@@ -94,6 +98,8 @@ export default function Tasks() {
9498
dataItemKey={"ProjectID"}
9599
editable={true}
96100

101+
onRowDoubleClick={handleRowDoubleClick}
102+
97103
>
98104
<GridToolbar>
99105
<GridSearchBox />
@@ -106,33 +112,38 @@ export default function Tasks() {
106112
Print
107113
</Button>
108114
</GridToolbar>
109-
<GridColumn field="taskName" title="Task Name" width={350} />
115+
<GridColumn field="taskName" title="Task Name" width={350} editable={false} />
110116
<GridColumn
111117
field="assignedTo"
112118
title="Assigned To"
113119
width={195}
120+
editable={false}
114121
/>
115122
<GridColumn
116123
field="dueDate"
117124
title="Due Date"
118125
width={195}
119126
format="{0:d}"
120127
filter="date"
128+
editable={false}
121129
/>
122130
<GridColumn
123131
field="priority"
124132
title="Priority"
125133
width={195}
134+
editable={false}
126135
/>
127136
<GridColumn
128137
field="status"
129138
title="Status"
130139
width={200}
140+
editable={false}
131141
/>
132142
<GridColumn
133143
field="tags"
134144
title="Tags"
135145
width={270}
146+
editable={false}
136147
/>
137148
</Grid>
138149
</div>

‎examples/kendo-react-freemium/src/pages/data.ts‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -617,6 +617,7 @@ export const projectsData = [
617617
// TASKS PAGE
618618
export const tasksData = [
619619
{
620+
taskId: '2213',
620621
taskName: '#2213 Define project scope and objectives.',
621622
assignedTo: 'Fabiola.Cassin90',
622623
dueDate: '07/31/2025',
@@ -625,14 +626,16 @@ export const tasksData = [
625626
priority: 'High priority'
626627
},
627628
{
628-
taskName: '#2213 Conduct market research to assess existing LMS solutions.',
629+
taskId: '2214',
630+
taskName: '#2214 Conduct market research to assess existing LMS solutions.',
629631
assignedTo: 'Marlon66',
630632
dueDate: '08/11/2025',
631633
status: '✅ Completed',
632634
tags: ['Research', 'Q1 Release'],
633635
priority: 'Medium priority'
634636
},
635637
{
638+
taskId: '5342',
636639
taskName: '#5342 Identify target audience and their specific needs.',
637640
assignedTo: 'Maegan_Dietrich56',
638641
dueDate: '08/21/2025',
@@ -641,6 +644,7 @@ export const tasksData = [
641644
priority: 'Urgent'
642645
},
643646
{
647+
taskId: '7211',
644648
taskName: '#7211 Create a project timeline with milestones and deliverables.',
645649
assignedTo: 'Howell69',
646650
dueDate: '07/17/2025',
@@ -649,14 +653,16 @@ export const tasksData = [
649653
priority: 'High priority'
650654
},
651655
{
652-
taskName: '#2213 Review and update the incident response plan to incorporate new threats and vulnerabilities.',
656+
taskId: '2215',
657+
taskName: '#2215 Review and update the incident response plan to incorporate new threats and vulnerabilities.',
653658
assignedTo: 'Kory.Lockman',
654659
dueDate: '05/24/2025',
655660
status: '❌ Cancelled',
656661
tags: ['Feature Development', 'Internal'],
657662
priority: 'Low priority'
658663
},
659664
{
665+
taskId: '2811',
660666
taskName: '#2811 Gather requirements from stakeholders through interviews or surveys.',
661667
assignedTo: 'Nolan.Kling13',
662668
dueDate: '07/01/2025',
@@ -665,14 +671,16 @@ export const tasksData = [
665671
priority: 'Medium priority'
666672
},
667673
{
668-
taskName: '#2811 Set up monitoring tools and analyze system performance metrics to identify and address potential bottlenecks.',
674+
taskId: '2812',
675+
taskName: '#2812 Set up monitoring tools and analyze system performance metrics to identify and address potential bottlenecks.',
669676
assignedTo: 'Antoinette_Hills',
670677
dueDate: '12/15/2025',
671678
status: '⚠ Delayed',
672679
tags: ['Research', 'Innovation'],
673680
priority: 'Low priority'
674681
},
675682
{
683+
taskId: '3516',
676684
taskName: '#3516 Develop a budget for the project, including potential software and hardware needs.',
677685
assignedTo: 'Alden_Upton',
678686
dueDate: '05/03/2025',
@@ -681,6 +689,7 @@ export const tasksData = [
681689
priority: 'Routine'
682690
},
683691
{
692+
taskId: '1415',
684693
taskName: '#1415 Conduct a SWOT analysis to assess strengths, weaknesses, opportunities, and threats.',
685694
assignedTo: 'Travis.Gerhold80',
686695
dueDate: '09/05/2025',
@@ -689,6 +698,7 @@ export const tasksData = [
689698
priority: 'Medium priority'
690699
},
691700
{
701+
taskId: '1536',
692702
taskName: '#1536 Implement Content Management Features for Instructors.',
693703
assignedTo: 'Jamaal41',
694704
dueDate: '07/12/2025',
@@ -697,6 +707,7 @@ export const tasksData = [
697707
priority: 'High priority'
698708
},
699709
{
710+
taskId: '1541',
700711
taskName: '#1541 Select a suitable technology stack or platform for the LMS.',
701712
assignedTo: 'Fabiola.Cassin90',
702713
dueDate: '07/31/2025',
@@ -705,15 +716,17 @@ export const tasksData = [
705716
priority: 'High priority'
706717
},
707718
{
708-
taskName: '#2213 Evaluate potential third-party integrations (e.g., payment gateways, content libraries).',
719+
taskId: '2216',
720+
taskName: '#2216 Evaluate potential third-party integrations (e.g., payment gateways, content libraries).',
709721
assignedTo: 'Fabiola.Cassin90',
710722
dueDate: '08/11/2025',
711723
status: '✅ Completed',
712724
tags: ['Feature Development', 'Innovation'],
713725
priority: 'Urgent'
714726
},
715727
{
716-
taskName: '#2213 Create wireframes for user interface (UI) elements and navigation.',
728+
taskId: '2217',
729+
taskName: '#2217 Create wireframes for user interface (UI) elements and navigation.',
717730
assignedTo: 'Marlon66',
718731
dueDate: '08/21/2025',
719732
status: '⏳ In Progress',

0 commit comments

Comments
 (0)