feat(units): improved appearance of unit cards

package.json

@@ -14,7 +14,7 @@
     "build:angular17": "ng build",
     "lint:fix": "ng lint --fix",
     "lint": "ng lint",
-    "serve:angular17": "export NODE_OPTIONS=--max_old_space_size=4096 && ng serve --configuration $NODE_ENV",
+    "serve:angular17": "export NODE_OPTIONS=--max_old_space_size=4096 && ng serve --poll=2000 --configuration $NODE_ENV",
     "start": "npm-run-all -l -s build:angular1 -p watch:angular1 serve:angular17",
     "watch:angular1": "grunt delta",
     "deploy:build2api": "ng build --delete-output-path=true --optimization=true --configuration production --output-path dist",
@@ -81,7 +81,7 @@
     "ng-csv": "0.2.3",
     "ng-file-upload": "~5.0.9",
     "ng-flex-layout": "^17.3.7-beta.1",
-    "ng2-pdf-viewer": "^10.2",
+    "ng2-pdf-viewer": "10.2.2",
     "ngx-bootstrap": "^6.1.0",
     "ngx-entity-service": "^0.0.39",
     "ngx-lottie": "^11.0.2",

src/app/admin/modals/create-new-unit-modal/create-new-unit-modal-content.component.html

@@ -12,27 +12,32 @@ <h3 mat-dialog-title>Create Unit</h3>
       <input matInput placeholder="Introduction to OnTrack" name="unitName" ngModel />
     </mat-form-field>
 
+    <mat-form-field appearance="outline">
+      <mat-label>Credit Points</mat-label>
+      <input matInput type="number" placeholder="e.g., 1" name="creditpoint" ngModel min="0" />
+    </mat-form-field>
+
     <mat-form-field appearance="outline">
       <mat-label>Teaching Period</mat-label>
       <mat-select (valueChange)="handleChangeTeachingPeriod($event)" name="selectedTeachingPeriod" ngModel>
-        <mat-option value="custom"> Custom teaching period </mat-option>
+        <mat-option value="custom">Custom teaching period</mat-option>
         <mat-option *ngFor="let tp of teachingPeriods; let i = index" [value]="tp.id">
           {{ tp.name }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
     @if(showDates) {
-    <mat-form-field appearance="outline">
-      <mat-label>Enter a date range</mat-label>
-      <mat-date-range-input [rangePicker]="picker">
-        <input matStartDate placeholder="Start date" name="customStardDate" [(ngModel)]="startDate" />
-        <input matEndDate placeholder="End date" name="customEndDate" [(ngModel)]="endDate" />
-      </mat-date-range-input>
-      <mat-hint>DD/MM/YYYY - DD/MM/YYYY</mat-hint>
-      <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-      <mat-date-range-picker #picker></mat-date-range-picker>
-    </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Enter a date range</mat-label>
+        <mat-date-range-input [rangePicker]="picker">
+          <input matStartDate placeholder="Start date" name="customStartDate" [(ngModel)]="startDate" />
+          <input matEndDate placeholder="End date" name="customEndDate" [(ngModel)]="endDate" />
+        </mat-date-range-input>
+        <mat-hint>DD/MM/YYYY - DD/MM/YYYY</mat-hint>
+        <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-date-range-picker #picker></mat-date-range-picker>
+      </mat-form-field>
     }
 
     <mat-dialog-actions align="end">

src/app/admin/modals/create-new-unit-modal/create-new-unit-modal-content.component.ts

@@ -19,15 +19,15 @@ export class CreateNewUnitModalContentComponent implements OnInit {
   startDate: Date;
   endDate: Date;
   selectedTeachingPeriod: number = null;
+  corequisite: string = "null";
   teachingPeriods: TeachingPeriod[];
-
   ngOnInit(): void {
     this.teachingPeriodsService.fetchAll().subscribe((teachingPeriods) => {
       this.teachingPeriods = teachingPeriods;
     });
   }
 
-  public createUnit(unit: { unitName: string; unitCode: string; selectedTeachingPeriod: number }): void {
+  public createUnit(unit: { unitName: string; unitCode: string; selectedTeachingPeriod: number; creditpoint: number; prerequisite: string }): void {
     let newUnit;
 
     if (this.selectedTeachingPeriod === null) {
@@ -36,12 +36,18 @@ export class CreateNewUnitModalContentComponent implements OnInit {
         name: unit.unitName,
         start_date: this.startDate,
         end_date: this.endDate,
+        creditpoint: unit.creditpoint,
+        prerequisite: unit.prerequisite,
+        corequisite: this.corequisite
       };
     } else {
       newUnit = {
         code: unit.unitCode,
         name: unit.unitName,
         teaching_period_id: this.selectedTeachingPeriod,
+        creditpoint: unit.creditpoint,
+        prerequisite: unit.prerequisite,
+        corequisite: this.corequisite
       };
     }
 

src/app/admin/modals/create-unit-modal/create-unit-modal.tpl.html

@@ -16,9 +16,16 @@ <h3>Create Unit</h3>
           <input type="text" class="form-control" ng-model="unit.code" placeholder="COS123456"/>
         </div>
       </div>
+      <div class="form-group" required>
+        <label class="col-sm-3 control-label">Credit Points</label>
+        <div class="col-sm-7">
+          <input type="number" class="form-control" ng-model="unit.creditPoints" placeholder="e.g., 1" min="0"/>
+        </div>
+      </div>
     </div>
     <div class="modal-footer text-right">
-      <input type="submit" class="btn btn-primary" value="Create" ng-disabled="unit.name == null || unit.code == null"/>
+      <input type="submit" class="btn btn-primary" value="Create"
+             ng-disabled="unit.name == null || unit.code == null || unit.creditPoints == null"/>
     </div>
   </form>
 </div>

src/app/api/models/unit-definition.ts

@@ -3,5 +3,7 @@ export interface UnitDefinition {
   name: string;
   description: string;
   code: string;
+  creditpoint: number;
+  prerequisite: string;
+  corequisite: string;
 }
-

src/app/api/services/unit-definition.service.ts

@@ -4,6 +4,7 @@ import {Observable} from 'rxjs';
 import {HttpClient, HttpParams} from '@angular/common/http';
 
 import API_URL from 'src/app/config/constants/apiURL';
+import { param } from 'jquery';
 
 @Injectable({
   providedIn: 'root'
@@ -41,12 +42,18 @@ export class UnitDefinitionService {
     description: string,
     code: string,
     version: string,
+    tasknum: number,
+    unitTutorFirstName: string,
+    unitTutorLastName: string,
   ): Observable<UnitDefinition> {
     let params = new HttpParams();
     params.set('name', name);
     params.set('description', description);
     params.set('code', code);
     params.set('version', version);
+    params.set('Number of Tasks', tasknum);
+    params.set('Unit Tutor first name', unitTutorFirstName);
+    params.set('Unit Tutor last name', unitTutorLastName);
     console.log("added unit definition");
     return this.http.post<UnitDefinition>(this.baseUrl, {params});
   }
@@ -56,13 +63,18 @@ export class UnitDefinitionService {
     name: string,
     description: string,
     code: string,
+    tasknum: number,
+    unitTutorFirstName: string,
+    unitTutorLastName: string,
   ): Observable<UnitDefinition> {
     const params = new HttpParams();
     params.set('unitDefinitionId', unitDefinitionId.toString());
     params.set('name', name);
     params.set('description', description);
     params.set('code', code);
-
+    params.set('Number of Tasks', tasknum);
+    params.set('Unit Tutor first name', unitTutorFirstName);
+    params.set('Unit Tutor last name', unitTutorLastName);
     const url = `${this.baseUrl}/:id:`;
     return this.http.put<UnitDefinition>(url, {params});
   }

src/app/courseflow/coursemap/coursemap.component.html

@@ -27,7 +27,7 @@ <h3 class="electives-title">Elective Units</h3>
         [id]="electiveUnits"
       >
         <div class="text" *ngFor="let unit of electiveUnits" cdkDrag class="unit">
-          <p >
+          <p>
             <strong>{{ unit.code }}</strong> - {{ unit.name }}
           </p>
         </div>
@@ -73,7 +73,10 @@ <h3 class="year-title">{{ year.year }}</h3>
         <h5 class="trimester-heading">Trimester 1</h5>
 
         <div *ngFor="let unit of year.trimester1" cdkDrag class="unit">
-          <strong>{{ unit.code }}</strong> - {{ unit.name }}
+          <strong>{{ unit.code }}</strong> - {{ unit.name }} <br>
+          <strong>Credit Points </strong> - {{ unit.creditpoint }} <br>
+          <strong>Prerequisite Units</strong> - {{ unit.prerequisite }} <br>
+          <strong>Corequisite Units</strong> - {{ unit.corequisite }}
         </div>
         <button class="delete-button" mat-icon-button (click)="deleteTrimester(i, 0)">
           <mat-icon>delete</mat-icon>
@@ -92,7 +95,10 @@ <h5 class="trimester-heading">Trimester 1</h5>
         <h5 class="trimester-heading">Trimester 2</h5>
 
         <div *ngFor="let unit of year.trimester2" cdkDrag class="unit">
-          <strong>{{ unit.code }}</strong> - {{ unit.name }}
+          <strong>{{ unit.code }}</strong> - {{ unit.name }} <br>
+          <strong>Credit Points </strong> - {{ unit.creditpoint }} <br>
+          <strong>Prerequisite Units</strong> - {{ unit.prerequisite }} <br>
+          <strong>Corequisite Units</strong> - {{ unit.corequisite }}
         </div>
         <button class="delete-button" mat-icon-button (click)="deleteTrimester(i, 1)">
           <mat-icon>delete</mat-icon>
@@ -111,7 +117,10 @@ <h5 class="trimester-heading">Trimester 2</h5>
         <h5 class="trimester-heading">Trimester 3</h5>
 
         <div *ngFor="let unit of year.trimester3" cdkDrag class="unit">
-          <strong>{{ unit.code }}</strong> - {{ unit.name }}
+          <strong>{{ unit.code }}</strong> - {{ unit.name }} <br>
+          <strong>Credit Points </strong> - {{ unit.creditpoint }} <br>
+          <strong>Prerequisite Units</strong> - {{ unit.prerequisite }} <br>
+          <strong>Corequisite Units</strong> - {{ unit.corequisite }}
         </div>
         <button class="delete-button" mat-icon-button (click)="deleteTrimester(i, 2)">
           <mat-icon>delete</mat-icon>

src/app/courseflow/coursemap/coursemap.component.scss

@@ -35,14 +35,14 @@
 }
 
 .unit {
-  padding: 8px;
+  padding: 4px;
   margin: 8px 0 8px 5%;
   background-color: #357bb9a8;
   color: white;
   border-radius: 6px;
   cursor: move;
   align-content: center;
-  height: 8vh;
+  height: 12vh;
   width: 90%;
 }
 

src/app/courseflow/coursemap/coursemap.component.ts

@@ -99,7 +99,6 @@ export class CoursemapComponent implements OnInit {
     url: 'http://university.edu/courses/cs101',
   };
 
-
   ngOnInit(): void {
     this.formData = {
       username: '',
@@ -136,6 +135,9 @@ export class CoursemapComponent implements OnInit {
       'Data capture technologies',
       'SIT115',
       '1',
+      1,
+      'ABCD',
+      'EFHG'
     );
     this.formData = {
       username: '',
@@ -158,6 +160,7 @@ export class CoursemapComponent implements OnInit {
     this.unitDefinitionService.getDefinitions().subscribe({
       next: (data: UnitDefinition[]) => {
         this.requiredUnits = data;
+        console.log('Unit Definitions:', data);
         this.errorMessage = null;
       },
       error: (err) => {
@@ -309,10 +312,7 @@ export class CoursemapComponent implements OnInit {
         event.previousIndex,
         event.currentIndex,
       );
-
-
     }
-
   }
 
   fetchUnitByCode(): void {