New UI Feature: Show the # of active units in Timetable (#3460)

Co-authored-by: Zhang Yi Jiang <[email protected]>

Author: HollaG

website/src/views/timetable/ModulesTableFooter.tsx

@@ -30,12 +30,17 @@ type Props = {
   semester: Semester;
   moduleTableOrder: ModuleTableOrder;
   modules: Module[];
+  hiddenInTimetable: string[];
 
   setModuleTableOrder: (moduleTableOrder: ModuleTableOrder) => void;
 };
 
 const ModulesTableFooter: React.FC<Props> = (props) => {
   const totalMCs = sumBy(props.modules, (module) => parseFloat(module.moduleCredit));
+  const shownMCs = sumBy(
+    props.modules.filter((module) => !props.hiddenInTimetable.includes(module.moduleCode)),
+    (module) => parseFloat(module.moduleCredit),
+  );
 
   return (
     <div className={classnames(styles.footer, 'row align-items-center')}>
@@ -49,7 +54,14 @@ const ModulesTableFooter: React.FC<Props> = (props) => {
         <hr />
       </div>
       <div className="col">
-        Total Units: <strong>{renderMCs(totalMCs)}</strong>
+        {shownMCs !== totalMCs && (
+          <div>
+            Active Units: <strong>{renderMCs(shownMCs)}</strong>
+          </div>
+        )}
+        <div>
+          Total Units: <strong>{renderMCs(totalMCs)}</strong>
+        </div>
       </div>
       <div className={classnames(styles.moduleOrder, 'col no-export')}>
         <label htmlFor="moduleOrder">Order</label>

website/src/views/timetable/TimetableContent.tsx

@@ -269,8 +269,16 @@ class TimetableContent extends React.Component<Props, State> {
   }
 
   render() {
-    const { semester, modules, colors, activeLesson, timetableOrientation, showTitle, readOnly } =
-      this.props;
+    const {
+      semester,
+      modules,
+      colors,
+      activeLesson,
+      timetableOrientation,
+      showTitle,
+      readOnly,
+      hiddenInTimetable,
+    } = this.props;
 
     const { showExamCalendar } = this.state;
 
@@ -417,7 +425,11 @@ class TimetableContent extends React.Component<Props, State> {
                 {this.renderModuleSections(addedModules, !isVerticalOrientation)}
               </div>
               <div className="col-12">
-                <ModulesTableFooter modules={addedModules} semester={semester} />
+                <ModulesTableFooter
+                  modules={addedModules}
+                  semester={semester}
+                  hiddenInTimetable={hiddenInTimetable}
+                />
               </div>
             </div>
           </div>