Skip to content

Commit 75d026e

Browse files
committed
2 parents 239ba5b + d1775b6 commit 75d026e

File tree

1 file changed

+53
-35
lines changed

1 file changed

+53
-35
lines changed

src/app/requestlist/page.js

Lines changed: 53 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ export default function RequestList() {
1717
redirect("/"); // Or you can return a message like "Access Denied"
1818
}
1919
const router = useRouter();
20-
// const TABLE_HEAD_REQ = ["ID", "Title", "Describe", "Last Update", "Status"];
2120
const TABLE_HEAD_REQ = ["Project Name", "Describe", "Type", "Status PM", "Status Ops"];
2221
const [TABLE_ROWS_REQ, setTableRowsReq] = useState([]);
2322
const [sortAsc, setSortAsc] = useState(true);
23+
const [sortKey, setSortKey] = useState("statuspm");
2424

2525
useEffect(() => {
2626
// Fetch request data from the API
@@ -40,7 +40,7 @@ export default function RequestList() {
4040
},
4141
});
4242

43-
if (resProjects.ok) {
43+
if (resProjects.ok && resRequesttype.ok) {
4444
const ProjectData = await resProjects.json();
4545
const RequesttypeData = await resRequesttype.json();
4646

@@ -57,7 +57,6 @@ export default function RequestList() {
5757
statuspm: element.statuspm,
5858
statusops: element.statusops,
5959
}));
60-
console.log("rows", rows)
6160
setTableRowsReq(rows);
6261
}
6362
} catch (error) {
@@ -69,23 +68,36 @@ export default function RequestList() {
6968

7069

7170

72-
const sortOrder = ["Request", "Under Review", "Rejected", "Approved"];
71+
const statusSortOrder = ["Request", "Under Review", "Rejected", "Approved"];
72+
const typeSortOrder = ["create", "destroy"];
7373

7474
// Sorting function
75-
const sortRows = (rows, sortAsc) => {
75+
const sortRows = (rows, key, asc) => {
7676
return [...rows].sort((a, b) => {
77-
const orderA = sortOrder.indexOf(a.statuspm);
78-
const orderB = sortOrder.indexOf(b.statuspm);
77+
let valA = a[key];
78+
let valB = b[key];
7979

80-
return sortAsc ? orderA - orderB : orderB - orderA;
80+
if (key === "statuspm" || key === "statusops") {
81+
valA = statusSortOrder.indexOf(valA);
82+
valB = statusSortOrder.indexOf(valB);
83+
} else if (key === "type") {
84+
valA = typeSortOrder.indexOf(valA);
85+
valB = typeSortOrder.indexOf(valB);
86+
}
87+
return asc ? valA - valB : valB - valA;
8188
});
8289
};
8390

84-
const toggleSortOrder = () => {
85-
setSortAsc((prev) => !prev);
91+
const handleSort = (key) => {
92+
if (sortKey === key) {
93+
setSortAsc(!sortAsc);
94+
} else {
95+
setSortKey(key);
96+
setSortAsc(true);
97+
}
8698
};
8799

88-
const sortedRows = sortRows(TABLE_ROWS_REQ, sortAsc);
100+
const sortedRows = sortRows(TABLE_ROWS_REQ, sortKey, sortAsc);
89101

90102
return (
91103
<div>
@@ -96,34 +108,40 @@ export default function RequestList() {
96108
<table className="table-fixed w-full">
97109
<thead>
98110
<tr>
99-
{TABLE_HEAD_REQ.map((head) => (
100-
<th
101-
key={head}
102-
className="border-b border-blue-gray-100 bg-gray-100 p-4 text-black font-semibold"
103-
>
104-
<Typography
105-
variant="small"
106-
className="font-medium text-sm leading-none opacity-70 flex flex-row items-center"
107-
onClick={["Status PM", "Status Ops"].includes(head) ? toggleSortOrder : undefined}
111+
{TABLE_HEAD_REQ.map((head, index) => {
112+
const sortColumn =
113+
head === "Type" ? "type" :
114+
head === "Status PM" ? "statuspm" :
115+
head === "Status Ops" ? "statusops" :
116+
null;
117+
return (
118+
<th
119+
key={index}
120+
className="border-b border-blue-gray-100 bg-gray-100 p-4 text-black font-semibold"
121+
onClick={sortColumn ? () => handleSort(sortColumn) : undefined}
108122
>
109-
{["Status PM", "Status Ops"].includes(head) && (
110-
<span className="mr-2">
111-
<Image
112-
src={sortAsc ? filter : unfilter}
113-
alt="filter"
114-
height="20"
115-
width="20"
116-
/>
117-
</span>
118-
)}
119-
{head}
120-
</Typography>
121-
</th>
122-
))}
123+
<Typography
124+
variant="small"
125+
className="font-medium text-sm leading-none opacity-70 flex flex-row items-center"
126+
>
127+
{sortColumn && (
128+
<span className="mr-2">
129+
<Image
130+
src={sortKey === sortColumn && sortAsc ? filter : unfilter}
131+
alt="filter"
132+
height="20"
133+
width="20"
134+
/>
135+
</span>
136+
)}
137+
{head}
138+
</Typography>
139+
</th>
140+
);
141+
})}
123142
</tr>
124143
</thead>
125144
<tbody>
126-
127145
{userRole === 'pm' &&
128146
sortedRows.map(({ projectid, projectname, describe, type, statuspm, statusops }, index) => {
129147
const isOdd = index % 2 === 1;

0 commit comments

Comments
 (0)