[ProgressTab] Readd ablity to read progress data based on programme start year

Author: santeri0200

services/backend/src/services/populations/formatStatisticsForApi.ts

@@ -131,9 +131,12 @@ const getProgressCriteria = (
   })
 
   yearMap.forEach(([yearToAdd, criteriaYear]) => {
+    criteriaChecked[yearToAdd].totalSatisfied +=
+      Object.values(criteriaChecked[yearToAdd].coursesSatisfied).filter(course => !!course).length ?? 0
     // UPDATE CREDIT CRITERIA
     if (!!criteria.credits[criteriaYear] && criteria.credits[criteriaYear] < academicYears[yearToAdd]) {
       criteriaChecked[yearToAdd].credits = true
+      criteriaChecked[yearToAdd].totalSatisfied += 1
     }
   })
 

services/frontend/src/components/OodiTable/components/Cell.tsx

@@ -8,8 +8,6 @@ import type { FC } from 'react'
 import { getCommonPinningStyles } from '../styles'
 
 const OodiTableCell: FC<TableCellProps> = ({ children, ...props }) => {
-  // console.log(props)
-
   return (
     <TableCell
       {...props}

services/frontend/src/components/PopulationStudents/StudentTable/GeneralTab/columnHelpers/semestersPresent.css

@@ -1,4 +1,4 @@
-/* These should inherit the width and height from .enrollment-label-no-margin */
+/* These should inherit the width and height from .enrollment-label */
 
 /* Instead we inflate the size and offset the svg... */
 

services/frontend/src/components/PopulationStudents/StudentTable/ProgressTab/index.css

@@ -5,6 +5,10 @@
   border-radius: 0.25em;
 }
 
+.enrollment-label-no-margin {
+  margin: 0 !important;
+}
+
 .enrollment-label:nth-of-type(even):not(:last-child) {
   margin-right: 6px;
 }

services/frontend/src/components/PopulationStudents/StudentTable/ProgressTab/index.jsx

@@ -286,8 +286,8 @@ export const ProgressTable = ({ curriculum, criteria, students, months, programm
     const springText = `Spring: ${helpTexts[spring]}`
     return (
       <div style={{ display: 'flex', justifyContent: 'center', gap: '0.2rem' }}>
-        <div className={`enrollment-label-no-margin ${enrollmentTypes[fall]?.className}`} title={fallText} />
-        <div className={`enrollment-label-no-margin ${enrollmentTypes[spring]?.className}`} title={springText} />
+        <div className={`enrollment-label ${enrollmentTypes[fall]?.className}`} title={fallText} />
+        <div className={`enrollment-label ${enrollmentTypes[spring]?.className}`} title={springText} />
       </div>
     )
   }
@@ -347,8 +347,7 @@ export const ProgressTable = ({ curriculum, criteria, students, months, programm
       const semesters = Object.values(allSemesters)
         .filter(
           semester =>
-            dayjs(semester.startdate).isSameOrAfter(startYear) &&
-            dayjs(semester.enddate).isSameOrBefore(endYear.add(1, 'day'))
+            dayjs(semester.startdate).isSameOrAfter(startYear) && dayjs(semester.enddate).isSameOrBefore(endYear)
         )
         .map(semester => semester.semestercode)
       return {
@@ -476,9 +475,6 @@ export const ProgressTable = ({ curriculum, criteria, students, months, programm
 
   const isCriteriaSet =
     criteria && Object.keys(criteria.courses).some(yearCourses => criteria.courses[yearCourses].length > 0)
-  const studentData = useMemo(() => {
-    return students
-  }, [students])
 
   return (
     <>
@@ -488,30 +484,39 @@ export const ProgressTable = ({ curriculum, criteria, students, months, programm
           after changes.
         </h5>
       )}
-      <Message style={{ fontSize: '16px', maxWidth: '700px' }}>
-        <p>
-          <Icon color="green" fitted name="check" />: Student has passed the course in the academic year. <br />
-          <Icon color="grey" fitted name="check" />: Student has passed the course outside of the corresponding academic
-          year. <br />
-          <Icon color="green" fitted name="clipboard check" />: Student has credit transfer for the course. <br />
-          <Icon color="red" fitted name="times" />: Student has failed the course. <br />
-          <Icon color="grey" fitted name="minus" />: Student has enrolled, but has not received any grade from the
-          course. <br />
-          <span className="enrollment-label-no-margin label-present" />: Student has an active semester enrollment.
-          <br />
-          <span className="enrollment-label-no-margin label-absent" />: Student has enrolled as absent. <br />
-          <span className="enrollment-label-no-margin label-passive" />: Inactive: Student did not enroll at all. <br />
-          <span className="enrollment-label-no-margin label-none" />: Student has no enrollment, but also no study right
-          for the semester.
-        </p>
+      <Message>
+        <Icon color="green" fitted name="check" />: Student has passed the course in the academic year. <br />
+        <Icon color="grey" fitted name="check" />: Student has passed the course outside of the corresponding academic
+        year. <br />
+        <Icon color="green" fitted name="clipboard check" />: Student has credit transfer for the course. <br />
+        <Icon color="red" fitted name="times" />: Student has failed the course. <br />
+        <Icon color="grey" fitted name="minus" />: Student has enrolled, but has not received any grade from the course.{' '}
+        <br />
+        <span
+          className="enrollment-label enrollment-label-no-margin label-present"
+          style={{ display: 'inline-block' }}
+        />
+        : Student has an active semester enrollment. <br />
+        <span
+          className="enrollment-label enrollment-label-no-margin label-absent"
+          style={{ display: 'inline-block' }}
+        />
+        : Student has enrolled as absent. <br />
+        <span
+          className="enrollment-label enrollment-label-no-margin label-passive"
+          style={{ display: 'inline-block' }}
+        />
+        : Inactive: Student did not enroll at all. <br />
+        <span className="enrollment-label enrollment-label-no-margin label-none" style={{ display: 'inline-block' }} />:
+        Student has no enrollment, but also no study right for the semester. <br />
       </Message>
       <Tab.Pane>
         <div style={{ display: 'flex' }}>
           <div style={{ maxHeight: '80vh', width: '100%' }}>
             {isCriteriaSet ? (
               <SortableTable
                 columns={columns}
-                data={studentData}
+                data={students}
                 featureName="progress"
                 style={{ height: '80vh' }}
                 tableId="progress-of-population-students"

services/frontend/src/components/PopulationStudents/index.tsx

@@ -8,6 +8,7 @@ import { useTabChangeAnalytics } from '@/hooks/tabChangeAnalytics'
 import { useToggle } from '@/hooks/toggle'
 import { ExtendedCurriculumDetails } from '@/hooks/useCurriculums'
 import { useGetAuthorizedUserQuery } from '@/redux/auth'
+import { parseQueryParams } from '@/util/queryparams'
 import { isBachelorOrLicentiateProgramme } from '@/util/studyProgramme'
 import { ProgressCriteria } from '@oodikone/shared/types'
 import { CheckStudentList } from './CheckStudentList'
@@ -83,6 +84,13 @@ export const PopulationStudents = ({
   if (!['population', 'customPopulation', 'coursePopulation', 'studyGuidanceGroupPopulation'].includes(variant))
     throw new Error(`${variant} is not a proper variant!`)
 
+  const { years } = parseQueryParams(location.search)
+  const months = years
+    ? dayjs().diff(dayjs(`${Math.min(years)}-08-01`), 'months')
+    : studyGuidanceGroup?.tags?.year
+      ? dayjs().diff(dayjs(`${studyGuidanceGroup?.tags?.year}-08-01`), 'months')
+      : undefined
+
   const availableTabs = {
     General: () => (
       <GeneralTab
@@ -109,11 +117,7 @@ export const PopulationStudents = ({
       <ProgressTab
         criteria={criteria}
         curriculum={curriculum}
-        months={
-          studyGuidanceGroup?.tags?.year
-            ? dayjs().diff(dayjs(`${studyGuidanceGroup?.tags?.year}-08-01`), 'months')
-            : undefined
-        }
+        months={months}
         programme={programme}
         students={filteredStudents}
         studyGuidanceGroupProgramme={programme}