@@ -6,71 +6,87 @@ import ReportsTable from '../Reports/ReportsTable'
66import IssuesTable from '../Reports/IssuesTable'
77import ProgressIcon from '../Icons/ProgressIcon'
88import '../ReportsPage.css'
9+ import { analyzeReport } from '../../Services/Report'
910
1011export default function ReportsPage ( {
1112 t,
1213 settings,
1314 filters,
1415 selectedCourse
1516} ) {
17+ const [ groupedReports , setGroupedReports ] = useState ( null )
18+ const [ issues , setIssues ] = useState ( null )
1619
17- const [ reports , setReports ] = useState ( null )
18- const [ issues , setIssues ] = useState ( null )
20+ const ISSUE_STATE = {
21+ UNCHANGED : 0 ,
22+ SAVING : 1 ,
23+ RESOLVING : 2 ,
24+ SAVED : 3 ,
25+ RESOLVED : 4 ,
26+ ERROR : 5 ,
27+ }
1928
20- const getReportHistory = ( ) => {
21- const api = new Api ( settings )
22- if ( selectedCourse === null ) {
23- api . getAdminReportHistory ( filters )
24- . then ( ( responseStr ) => responseStr . json ( ) )
25- . then ( ( response ) => {
26- if ( ! Array . isArray ( response . data ) ) {
27- let tempReports = Object . values ( response . data . reports )
28- for ( let report of tempReports ) {
29- report . id = report . created
30- }
31- setReports ( tempReports )
32- setIssues ( response . data . issues )
33- }
34- else {
35- setReports ( null )
36- setIssues ( null )
37- }
38-
39- } )
40- }
41- else {
42- api . getCourseReport ( selectedCourse . id )
43- . then ( ( responseStr ) => responseStr . json ( ) )
44- . then ( ( response ) => {
45- if ( response . data ) {
46- let tempReports = Object . values ( response . data . reports )
47- for ( let report of tempReports ) {
48- report . id = report . created
49- }
50- setReports ( tempReports )
51- setIssues ( response . data . issues )
52- }
53- else {
54- setReports ( null )
55- setIssues ( null )
56- }
57- } )
58- }
29+ const getReportHistory = ( ) => {
30+ const api = new Api ( settings ) ;
31+ api . getAdminReportHistory ( filters )
32+ . then ( ( responseStr ) => responseStr . json ( ) )
33+ . then ( ( response ) => {
34+ if ( ! Array . isArray ( response . data ) ) {
35+
36+ const groupedReports = { } ; // Initialize groupedReports
37+ // Iterate through each course
38+ Object . entries ( response . data . reports ) . forEach ( ( [ courseName , courseDates ] ) => {
39+ groupedReports [ courseName ] = { } ; // Initialize course in groupedReports
40+
41+ // Iterate through each date in this course
42+ Object . entries ( courseDates ) . forEach ( ( [ date , reportData ] ) => {
43+ const analyzedReport = analyzeReport ( reportData , ISSUE_STATE ) ;
44+
45+ if ( date . match ( / ^ \d { 4 } - \d { 2 } - \d { 2 } $ / ) || date . match ( / ^ \d { 2 } \/ \d { 2 } \/ \d { 4 } $ / ) ) {
46+ // Update groupedReports with the analyzed report
47+ groupedReports [ courseName ] [ date ] = {
48+ ...analyzedReport ,
49+ } ;
50+ }
51+ } ) ;
52+ } ) ;
5953
60- }
54+ // Update state with analyzed reports
55+ setGroupedReports ( groupedReports ) ;
56+ setIssues ( response . data . issues ) ;
57+ } else {
58+ setGroupedReports ( null ) ;
59+ setIssues ( null ) ;
60+ }
61+ } )
62+ . catch ( ( error ) => {
63+ console . error ( "Error fetching reports:" , error ) ;
64+ } ) ;
65+ } ;
6166
6267 useEffect ( ( ) => {
63- if ( reports === null ) {
68+ if ( groupedReports === null ) {
6469 getReportHistory ( )
6570 }
6671 } , [ ] )
6772
6873 return (
69- < div className = "p-0 scrollable h-100 " >
74+ < div className = "report-page-container scrollable" >
7075 < div className = "flex-row justify-content-center mt-3" >
71- < h1 className = "mt-0 mb-0 primary-dark" > { selectedCourse ?. title || t ( 'report.header.all_courses' ) } </ h1 >
76+ < div className = "flex-column w-100" >
77+ < h1 className = "mt-0 mb-0 primary-dark" style = { { textAlign : "center" } } >
78+ { selectedCourse ?. title || t ( 'report.header.all_courses' ) }
79+ </ h1 >
80+ < hr
81+ style = { {
82+ margin : "8px auto 0 auto" ,
83+ borderTop : "1px solid" ,
84+ width : "90%"
85+ } }
86+ />
87+ </ div >
7288 </ div >
73- { ( reports === null ) ? (
89+ { ( groupedReports === null ) ? (
7490 < div className = "mt-3 mb-3 flex-row justify-content-center" >
7591 < div className = "flex-column justify-content-center me-3" >
7692 < ProgressIcon className = "icon-lg udoit-suggestion spinner" />
@@ -81,31 +97,33 @@ export default function ReportsPage({
8197 </ div >
8298 ) : (
8399 < div >
84- { ( reports . length === 0 ) ?
100+ { ( groupedReports . length === 0 ) ?
85101 < div className = "flex-row justify-content-center mt-3" >
86102 < div > { t ( 'report.label.no_results' ) } </ div >
87103 </ div >
88104 :
89105 < div className = "flex-column" >
90106 < div className = "mt-4" >
91- < div className = "flex-row w-100 justify-content-center" >
92- < h2 className = "primary-dark mt-0 mb-2" > { t ( 'report.title.barriers_remaining' ) } </ h2 >
93- </ div >
94107 < div id = "resolutionsReport" className = "graph-container" >
95- < ResolutionsReport t = { t } reports = { reports } />
108+ < ResolutionsReport
109+ t = { t }
110+ reports = { groupedReports }
111+ selectedCourse = { selectedCourse }
112+ />
96113 </ div >
97114 </ div >
98115 < div className = "mt-3" >
99116 < IssuesTable
100117 t = { t }
101118 issues = { issues }
102119 isAdmin = { true }
120+ selectedCourse = { selectedCourse }
103121 />
104122 </ div >
105123 < div className = "mt-3" >
106124 < ReportsTable
107125 t = { t }
108- reports = { reports }
126+ reports = { groupedReports }
109127 isAdmin = { true }
110128 />
111129 </ div >
0 commit comments