Skip to content

Commit 9fda53e

Browse files
PenginYYPenginYY
authored
Merge pull request #22 from PenginYY/main
fix: requestlist show type of request
2 parents 9c18c76 + f77b19f commit 9fda53e

File tree

1 file changed

+28
-226
lines changed

1 file changed

+28
-226
lines changed

‎src/app/requestlist/page.js

Lines changed: 28 additions & 226 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function RequestList() {
1818
}
1919
const router = useRouter();
2020
// const TABLE_HEAD_REQ = ["ID", "Title", "Describe", "Last Update", "Status"];
21-
const TABLE_HEAD_REQ = ["Project Name", "Describe", "Status PM", "Status Ops"];
21+
const TABLE_HEAD_REQ = ["Project Name", "Describe", "Type", "Status PM", "Status Ops"];
2222
const [TABLE_ROWS_REQ, setTableRowsReq] = useState([]);
2323
const [sortAsc, setSortAsc] = useState(true);
2424

@@ -33,13 +33,27 @@ export default function RequestList() {
3333
},
3434
});
3535

36+
const resRequesttype = await fetch("/api/requesttype", {
37+
method: "GET",
38+
headers: {
39+
"Content-Type": "application/json",
40+
},
41+
});
42+
3643
if (resProjects.ok) {
37-
const data = await resProjects.json();
38-
console.log("data", data)
39-
const rows = data.map((element) => ({
44+
const ProjectData = await resProjects.json();
45+
const RequesttypeData = await resRequesttype.json();
46+
47+
const projectStatusMap = {};
48+
RequesttypeData.forEach(requesttype => {
49+
projectStatusMap[requesttype.projectid] = requesttype.status;
50+
});
51+
52+
const rows = ProjectData.map((element) => ({
4053
projectid: element._id,
4154
projectname: element.projectName,
4255
describe: element.projectDescription,
56+
type: projectStatusMap[element._id],
4357
statuspm: element.statuspm,
4458
statusops: element.statusops,
4559
}));
@@ -53,63 +67,6 @@ export default function RequestList() {
5367
fetchRequests();
5468
}, []);
5569

56-
// useEffect(() => {
57-
// // Fetch request data from the API
58-
// const fetchRequests = async () => {
59-
// try {
60-
// // First, fetch all requests
61-
// const resRequests = await fetch("/api/request", {
62-
// method: "GET",
63-
// headers: {
64-
// "Content-Type": "application/json",
65-
// },
66-
// });
67-
68-
// if (!resRequests.ok) {
69-
// throw new Error("Failed to fetch requests");
70-
// }
71-
72-
// const requestsData = await resRequests.json();
73-
74-
// // Then, fetch all projects
75-
// const resProjects = await fetch("/api/project", {
76-
// method: "GET",
77-
// headers: {
78-
// "Content-Type": "application/json",
79-
// },
80-
// });
81-
82-
// if (!resProjects.ok) {
83-
// throw new Error("Failed to fetch projects");
84-
// }
85-
86-
// const projectsData = await resProjects.json();
87-
88-
// // Create a map of project IDs to project names for quick lookup
89-
// const projectMap = {};
90-
// projectsData.forEach(project => {
91-
// projectMap[project._id] = project.projectName;
92-
// });
93-
94-
// // Now map request data and include project names
95-
// const rows = requestsData.map((element) => ({
96-
// id: element.requestid,
97-
// projectid: element.projectid,
98-
// projectname: projectMap[element.projectid] || "Unknown Project", // Add project name
99-
// requestname: element.name,
100-
// type: element.type,
101-
// statuspm: element.statuspm,
102-
// statusops: element.statusops,
103-
// }));
104-
105-
// console.log("Requests with project names:", rows);
106-
// setTableRowsReq(rows);
107-
// } catch (error) {
108-
// console.error("Failed to fetch data:", error.message);
109-
// }
110-
// };
111-
// fetchRequests();
112-
// }, []);
11370

11471

11572
const sortOrder = ["Request", "Under Review", "Rejected", "Approved"];
@@ -132,7 +89,7 @@ export default function RequestList() {
13289

13390
return (
13491
<div>
135-
<p className="text-5xl font-bold mx-16 my-5">Create Requests</p>
92+
<p className="text-5xl font-bold mx-16 my-5">Requests</p>
13693

13794
{/* Details box */}
13895
<div className="overflow-hidden bg-white mx-16 my-8 text-black text-x1 font-normal rounded-lg">
@@ -168,7 +125,7 @@ export default function RequestList() {
168125
<tbody>
169126

170127
{userRole === 'pm' &&
171-
sortedRows.map(({ projectid, projectname, describe, statuspm, statusops }, index) => {
128+
sortedRows.map(({ projectid, projectname, describe, type, statuspm, statusops }, index) => {
172129
const isOdd = index % 2 === 1;
173130
const rowBgColor = isOdd ? "bg-gray-50" : "bg-white";
174131

@@ -198,75 +155,17 @@ export default function RequestList() {
198155
</td>
199156
<td className="p-4 border-b border-blue-gray-50">
200157
<Link href={{ pathname: "/projectpm", query: { projectid } }}>
201-
<Typography
202-
variant="small"
203-
className={`font-normal px-2 py-1 rounded-md
204-
${statuspm === "Approved"
205-
? "text-green-600 bg-green-100 px-2"
206-
: statuspm === "Under Review"
207-
? "text-amber-600 bg-amber-100"
208-
: statuspm === "Request"
209-
? "text-gray-600 bg-gray-100"
210-
: "text-red-600 bg-red-100"
211-
}`}
212-
>
213-
{statuspm}
214-
</Typography>
215-
</Link>
216-
</td>
217-
<td className="p-4 border-b border-blue-gray-50">
218-
<Link href={{ pathname: "/projectpm", query: { projectid } }}>
219-
<Typography
220-
variant="small"
221-
className={`font-normal px-2 py-1 rounded-md
222-
${statusops === "Approved"
223-
? "text-green-600 bg-green-100 px-2"
224-
: statusops === "Under Review"
225-
? "text-amber-600 bg-amber-100"
226-
: statusops === "Request"
227-
? "text-gray-600 bg-gray-100"
228-
: "text-red-600 bg-red-100"
229-
}`}
230-
>
231-
{statusops}
232-
</Typography>
233-
</Link>
234-
</td>
235-
</tr>
236-
);
237-
})}
238-
239-
{userRole === 'ops' &&
240-
sortedRows.map(({ projectid, projectname, describe, statuspm, statusops }, index) => {
241-
const isOdd = index % 2 === 1;
242-
const rowBgColor = isOdd ? "bg-gray-50" : "bg-white";
243-
244-
return (
245-
<tr key={projectid} className={`${rowBgColor} cursor-pointer`}>
246-
<td className="p-4 border-b border-blue-gray-50">
247-
<Link href={{ pathname: "/projectops", query: { projectid } }}>
248158
<Typography
249159
variant="small"
250160
color="blue-gray"
251161
className="font-normal"
252162
>
253-
{projectname}
163+
{type}
254164
</Typography>
255165
</Link>
256166
</td>
257167
<td className="p-4 border-b border-blue-gray-50">
258-
<Link href={{ pathname: "/projectops", query: { projectid } }}>
259-
<Typography
260-
variant="small"
261-
color="blue-gray"
262-
className="font-normal"
263-
>
264-
{describe}
265-
</Typography>
266-
</Link>
267-
</td>
268-
<td className="p-4 border-b border-blue-gray-50">
269-
<Link href={{ pathname: "/projectops", query: { projectid } }}>
168+
<Link href={{ pathname: "/projectpm", query: { projectid } }}>
270169
<Typography
271170
variant="small"
272171
className={`font-normal px-2 py-1 rounded-md
@@ -284,7 +183,7 @@ export default function RequestList() {
284183
</Link>
285184
</td>
286185
<td className="p-4 border-b border-blue-gray-50">
287-
<Link href={{ pathname: "/projectops", query: { projectid } }}>
186+
<Link href={{ pathname: "/projectpm", query: { projectid } }}>
288187
<Typography
289188
variant="small"
290189
className={`font-normal px-2 py-1 rounded-md
@@ -305,54 +204,15 @@ export default function RequestList() {
305204
);
306205
})}
307206

308-
</tbody>
309-
</table>
310-
</div>
311-
312-
<p className="text-5xl font-bold mx-16 my-5">Delete Requests</p>
313-
314-
{/* Details box */}
315-
<div className="overflow-hidden bg-white mx-16 my-8 text-black text-x1 font-normal rounded-lg">
316-
<table className="table-fixed w-full">
317-
<thead>
318-
<tr>
319-
{TABLE_HEAD_REQ.map((head) => (
320-
<th
321-
key={head}
322-
className="border-b border-blue-gray-100 bg-gray-100 p-4 text-black font-semibold"
323-
>
324-
<Typography
325-
variant="small"
326-
className="font-medium text-sm leading-none opacity-70 flex flex-row items-center"
327-
onClick={["Status PM", "Status Ops"].includes(head) ? toggleSortOrder : undefined}
328-
>
329-
{["Status PM", "Status Ops"].includes(head) && (
330-
<span className="mr-2">
331-
<Image
332-
src={sortAsc ? filter : unfilter}
333-
alt="filter"
334-
height="20"
335-
width="20"
336-
/>
337-
</span>
338-
)}
339-
{head}
340-
</Typography>
341-
</th>
342-
))}
343-
</tr>
344-
</thead>
345-
<tbody>
346-
347-
{userRole === 'pm' &&
348-
sortedRows.map(({ projectid, projectname, describe, statuspm, statusops }, index) => {
207+
{userRole === 'ops' &&
208+
sortedRows.map(({ projectid, projectname, describe, type, statuspm, statusops }, index) => {
349209
const isOdd = index % 2 === 1;
350210
const rowBgColor = isOdd ? "bg-gray-50" : "bg-white";
351211

352212
return (
353213
<tr key={projectid} className={`${rowBgColor} cursor-pointer`}>
354214
<td className="p-4 border-b border-blue-gray-50">
355-
<Link href={{ pathname: "/projectpm", query: { projectid } }}>
215+
<Link href={{ pathname: "/projectops", query: { projectid } }}>
356216
<Typography
357217
variant="small"
358218
color="blue-gray"
@@ -362,72 +222,14 @@ export default function RequestList() {
362222
</Typography>
363223
</Link>
364224
</td>
365-
<td className="p-4 border-b border-blue-gray-50">
366-
<Link href={{ pathname: "/projectpm", query: { projectid } }}>
367-
<Typography
368-
variant="small"
369-
color="blue-gray"
370-
className="font-normal"
371-
>
372-
{describe}
373-
</Typography>
374-
</Link>
375-
</td>
376-
<td className="p-4 border-b border-blue-gray-50">
377-
<Link href={{ pathname: "/projectpm", query: { projectid } }}>
378-
<Typography
379-
variant="small"
380-
className={`font-normal px-2 py-1 rounded-md
381-
${statuspm === "Approved"
382-
? "text-green-600 bg-green-100 px-2"
383-
: statuspm === "Under Review"
384-
? "text-amber-600 bg-amber-100"
385-
: statuspm === "Request"
386-
? "text-gray-600 bg-gray-100"
387-
: "text-red-600 bg-red-100"
388-
}`}
389-
>
390-
{statuspm}
391-
</Typography>
392-
</Link>
393-
</td>
394-
<td className="p-4 border-b border-blue-gray-50">
395-
<Link href={{ pathname: "/projectpm", query: { projectid } }}>
396-
<Typography
397-
variant="small"
398-
className={`font-normal px-2 py-1 rounded-md
399-
${statusops === "Approved"
400-
? "text-green-600 bg-green-100 px-2"
401-
: statusops === "Under Review"
402-
? "text-amber-600 bg-amber-100"
403-
: statusops === "Request"
404-
? "text-gray-600 bg-gray-100"
405-
: "text-red-600 bg-red-100"
406-
}`}
407-
>
408-
{statusops}
409-
</Typography>
410-
</Link>
411-
</td>
412-
</tr>
413-
);
414-
})}
415-
416-
{userRole === 'ops' &&
417-
sortedRows.map(({ projectid, projectname, describe, statuspm, statusops }, index) => {
418-
const isOdd = index % 2 === 1;
419-
const rowBgColor = isOdd ? "bg-gray-50" : "bg-white";
420-
421-
return (
422-
<tr key={projectid} className={`${rowBgColor} cursor-pointer`}>
423225
<td className="p-4 border-b border-blue-gray-50">
424226
<Link href={{ pathname: "/projectops", query: { projectid } }}>
425227
<Typography
426228
variant="small"
427229
color="blue-gray"
428230
className="font-normal"
429231
>
430-
{projectname}
232+
{describe}
431233
</Typography>
432234
</Link>
433235
</td>
@@ -438,7 +240,7 @@ export default function RequestList() {
438240
color="blue-gray"
439241
className="font-normal"
440242
>
441-
{describe}
243+
{type}
442244
</Typography>
443245
</Link>
444246
</td>

0 commit comments

Comments
 (0)