Skip to content

Commit 3d9ac4e

Browse files
Ashish0243Ashish0243
authored
Merge pull request #10 from spec-nith/TaskAllocated-Page
Task Allocated Page changes
2 parents feabb8b + db46679 commit 3d9ac4e

2 files changed

Lines changed: 110 additions & 82 deletions

File tree

‎frontend/src/components/task_allocator/TaskAllocator.js‎

Lines changed: 90 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -94,77 +94,100 @@ const TaskAllocator = ({ workspaceId }) => {
9494

9595
return (
9696
<Box p={5} maxWidth="1200px" mx="auto">
97-
<Stack spacing={4} mb={8}>
98-
<FormControl id="heading" isRequired>
99-
<FormLabel>Heading</FormLabel>
100-
<Input
101-
value={heading}
102-
onChange={(e) => setHeading(e.target.value)}
103-
maxWidth="100%"
104-
/>
105-
</FormControl>
106-
<FormControl id="description" isRequired>
107-
<FormLabel>Description</FormLabel>
108-
<Textarea
109-
value={description}
110-
onChange={(e) => setDescription(e.target.value)}
111-
maxWidth="100%"
112-
resize="vertical"
113-
/>
114-
</FormControl>
115-
<FormControl id="email" isRequired>
116-
<FormLabel>Assignee Email</FormLabel>
117-
<Input
118-
value={email}
119-
onChange={(e) => setEmail(e.target.value)}
120-
maxWidth="100%"
121-
/>
122-
</FormControl>
123-
<FormControl id="attachments">
124-
<FormLabel>Attachments</FormLabel>
125-
<Input
126-
value={attachments}
127-
onChange={(e) => setAttachments(e.target.value.split(","))}
128-
maxWidth="100%"
129-
/>
130-
</FormControl>
97+
<Stack
98+
direction={{ base: "column", md: "row" }} // Column on small screens, row on larger screens
99+
spacing={{ base: 8, md: 12 }}
100+
align="center"
101+
>
102+
{/* Left Side - Task Input Form */}
103+
<Stack spacing={4} w={{ base: "90%", md: "50%" }} mb={0} textAlign="center">
104+
<FormControl id="heading" isRequired>
105+
<FormLabel>Heading</FormLabel>
106+
<Input
107+
value={heading}
108+
onChange={(e) => setHeading(e.target.value)}
109+
w="100%"
110+
/>
111+
</FormControl>
112+
<FormControl id="description" isRequired>
113+
<FormLabel>Description</FormLabel>
114+
<Textarea
115+
value={description}
116+
onChange={(e) => setDescription(e.target.value)}
117+
w="100%"
118+
resize="vertical"
119+
/>
120+
</FormControl>
121+
<FormControl id="email" isRequired>
122+
<FormLabel>Assignee Email</FormLabel>
123+
<Input
124+
value={email}
125+
onChange={(e) => setEmail(e.target.value)}
126+
w="100%"
127+
/>
128+
</FormControl>
129+
<FormControl id="attachments">
130+
<FormLabel>Attachments</FormLabel>
131+
<Input
132+
value={attachments}
133+
onChange={(e) => setAttachments(e.target.value.split(","))}
134+
w="100%"
135+
/>
136+
</FormControl>
137+
<Button
138+
colorScheme="blue"
139+
size="md"
140+
width={{ base: "80%", md: "50%" }} // Wider button on mobile, controlled on larger screens
141+
alignSelf="center"
142+
mb={8}
143+
onClick={allocateTask}
144+
>
145+
Allocate Task
146+
</Button>
147+
</Stack>
148+
149+
{/* Right Side - Status Panels */}
150+
<Flex
151+
wrap="wrap"
152+
direction="column"
153+
w={{ base: "100%", md: "50%" }}
154+
align="center"
155+
gap={6}
156+
>
157+
<Box flex="1" minWidth={{ base: "80%", md: "40vh" }}>
158+
<StatusPanel
159+
title="To Do"
160+
tasks={tasks.filter((task) => task.status === "to-do")}
161+
fetchTasks={fetchTasks}
162+
config={config}
163+
onTaskClick={handleTaskClick}
164+
/>
165+
</Box>
166+
<Box flex="1" minWidth={{ base: "80%", md: "40vh" }}>
167+
<StatusPanel
168+
title="In Progress"
169+
tasks={tasks.filter((task) => task.status === "in-progress")}
170+
fetchTasks={fetchTasks}
171+
config={config}
172+
onTaskClick={handleTaskClick}
173+
/>
174+
</Box>
175+
<Box flex="1" minWidth={{ base: "80%", md: "40vh" }}>
176+
<StatusPanel
177+
title="Done"
178+
tasks={tasks.filter((task) => task.status === "done")}
179+
fetchTasks={fetchTasks}
180+
config={config}
181+
onTaskClick={handleTaskClick}
182+
/>
183+
</Box>
184+
</Flex>
131185
</Stack>
132-
<Button colorScheme="blue" mb={8} onClick={allocateTask}>
133-
Allocate Task
134-
</Button>
135-
<Flex wrap="wrap" gap={6}>
136-
<Box flex="1" minWidth="250px">
137-
<StatusPanel
138-
title="To Do"
139-
tasks={tasks.filter((task) => task.status === "to-do")}
140-
fetchTasks={fetchTasks}
141-
config={config}
142-
onTaskClick={handleTaskClick}
143-
/>
144-
</Box>
145-
<Box flex="1" minWidth="250px">
146-
<StatusPanel
147-
title="In Progress"
148-
tasks={tasks.filter((task) => task.status === "in-progress")}
149-
fetchTasks={fetchTasks}
150-
config={config}
151-
onTaskClick={handleTaskClick}
152-
/>
153-
</Box>
154-
<Box flex="1" minWidth="250px">
155-
<StatusPanel
156-
title="Done"
157-
tasks={tasks.filter((task) => task.status === "done")}
158-
fetchTasks={fetchTasks}
159-
config={config}
160-
onTaskClick={handleTaskClick}
161-
/>
162-
</Box>
163-
</Flex>
186+
187+
{/* Allocated Tasks Section */}
164188
<Box mt={8}>
165189
<AllocatedTasks />
166190
</Box>
167-
{/* Add modal for task details here */}
168191
</Box>
169192
);
170193
};

‎frontend/src/components/task_allocator/TaskAllocatorPage.js‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,26 @@ const TaskAllocatorPage = () => {
77
const { workspaceId } = useParams(); // Get workspaceId from URL
88

99
return (
10-
<Box
11-
position="relative"
12-
zIndex="1000"
13-
overflowY="scroll" // Allows scrolling
14-
maxHeight="100vh" // Ensure it doesn't exceed viewport height
15-
css={{
16-
'&::-webkit-scrollbar': {
17-
display: 'none' // Hide scrollbar for WebKit browsers
18-
},
19-
scrollbarWidth: 'none', // Hide scrollbar for Firefox
20-
msOverflowStyle: 'none' // Hide scrollbar for IE and Edge
21-
}}
22-
>
23-
<TaskAllocator workspaceId={workspaceId} />
24-
</Box>
10+
<div style={{ height: "100%", width: "100%" }}>
11+
<Box
12+
position="relative"
13+
zIndex="1000"
14+
w="100%"
15+
minHeight="100vh"
16+
bg="#04539d" // Corrected background color prop
17+
color="orange"
18+
css={{
19+
"&::-webkit-scrollbar": {
20+
display: "none", // Hide scrollbar for WebKit browsers
21+
},
22+
scrollbarWidth: "none", // Hide scrollbar for Firefox
23+
msOverflowStyle: "none", // Hide scrollbar for IE and Edge
24+
}}
25+
>
26+
<TaskAllocator workspaceId={workspaceId} />
27+
</Box>
28+
</div>
29+
2530
);
2631
};
2732

0 commit comments

Comments
 (0)