@@ -17,10 +17,10 @@ export default function RequestList() {
17
17
redirect ( "/" ) ; // Or you can return a message like "Access Denied"
18
18
}
19
19
const router = useRouter ( ) ;
20
- // const TABLE_HEAD_REQ = ["ID", "Title", "Describe", "Last Update", "Status"];
21
20
const TABLE_HEAD_REQ = [ "Project Name" , "Describe" , "Type" , "Status PM" , "Status Ops" ] ;
22
21
const [ TABLE_ROWS_REQ , setTableRowsReq ] = useState ( [ ] ) ;
23
22
const [ sortAsc , setSortAsc ] = useState ( true ) ;
23
+ const [ sortKey , setSortKey ] = useState ( "statuspm" ) ;
24
24
25
25
useEffect ( ( ) => {
26
26
// Fetch request data from the API
@@ -40,7 +40,7 @@ export default function RequestList() {
40
40
} ,
41
41
} ) ;
42
42
43
- if ( resProjects . ok ) {
43
+ if ( resProjects . ok && resRequesttype . ok ) {
44
44
const ProjectData = await resProjects . json ( ) ;
45
45
const RequesttypeData = await resRequesttype . json ( ) ;
46
46
@@ -57,7 +57,6 @@ export default function RequestList() {
57
57
statuspm : element . statuspm ,
58
58
statusops : element . statusops ,
59
59
} ) ) ;
60
- console . log ( "rows" , rows )
61
60
setTableRowsReq ( rows ) ;
62
61
}
63
62
} catch ( error ) {
@@ -69,23 +68,36 @@ export default function RequestList() {
69
68
70
69
71
70
72
- const sortOrder = [ "Request" , "Under Review" , "Rejected" , "Approved" ] ;
71
+ const statusSortOrder = [ "Request" , "Under Review" , "Rejected" , "Approved" ] ;
72
+ const typeSortOrder = [ "create" , "destroy" ] ;
73
73
74
74
// Sorting function
75
- const sortRows = ( rows , sortAsc ) => {
75
+ const sortRows = ( rows , key , asc ) => {
76
76
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 ] ;
79
79
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 ;
81
88
} ) ;
82
89
} ;
83
90
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
+ }
86
98
} ;
87
99
88
- const sortedRows = sortRows ( TABLE_ROWS_REQ , sortAsc ) ;
100
+ const sortedRows = sortRows ( TABLE_ROWS_REQ , sortKey , sortAsc ) ;
89
101
90
102
return (
91
103
< div >
@@ -96,34 +108,40 @@ export default function RequestList() {
96
108
< table className = "table-fixed w-full" >
97
109
< thead >
98
110
< 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 }
108
122
>
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
+ } ) }
123
142
</ tr >
124
143
</ thead >
125
144
< tbody >
126
-
127
145
{ userRole === 'pm' &&
128
146
sortedRows . map ( ( { projectid, projectname, describe, type, statuspm, statusops } , index ) => {
129
147
const isOdd = index % 2 === 1 ;
0 commit comments