refactor: use table to show all units instead of cards

thoth-tech · May 28, 2024 · 7673f34 · 7673f34
1 parent c76e7c1
commit 7673f34
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 66 deletions.
diff --git a/src/app/admin/states/f-units/f-units.component.html b/src/app/admin/states/f-units/f-units.component.html
@@ -98,15 +98,15 @@ <h3>{{ title }}</h3>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      @if (mode === 'tutor') {
+      @if (mode === 'tutor' || mode === 'auditor') {
         <tr
           mat-row
           *matRowDef="let row; columns: displayedColumns"
           uiSref="units/tasks/inbox"
           [uiParams]="{unitId: row.id}"
         ></tr>
       }
-      @if (mode === 'admin' || mode === 'auditor') {
+      @if (mode === 'admin') {
         <tr
           mat-row
           *matRowDef="let row; columns: displayedColumns"
@@ -126,7 +126,7 @@ <h3>{{ title }}</h3>
     <span class="flex items-center">
       <mat-paginator class="mat-elevation-z0" [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
       <span class="flex-grow"></span>
-      @if (mode === 'admin' || mode === 'auditor') {
+      @if (mode === 'admin') {
         <button mat-raised-button color="primary" (click)="createUnit()">
           <mat-icon class="icon_display">add</mat-icon>
           Create Unit

diff --git a/src/app/admin/states/f-units/f-units.component.ts b/src/app/admin/states/f-units/f-units.component.ts
@@ -79,9 +79,17 @@ export class FUnitsComponent implements OnInit, AfterViewInit {
         });
       });
     }
-    if (this.mode === 'admin' || this.mode === 'auditor') {
+    if (this.mode === 'admin') {
       this.title = 'Administer units';
 
+      this.unitService.query(undefined, {params: {include_in_active: true}}).subscribe({
+        next: (units) => {
+          this.dataSource.data = this.mapUnitOrProjectsToColumns(units);
+        },
+      });
+    } else if (this.mode === 'auditor') {
+      this.title = 'View all units';
+
       this.unitService.query(undefined, {params: {include_in_active: true}}).subscribe({
         next: (units) => {
           this.dataSource.data = this.mapUnitOrProjectsToColumns(units);

diff --git a/src/app/doubtfire.states.ts b/src/app/doubtfire.states.ts
@@ -270,11 +270,30 @@ const AdministerUnits: NgHybridStateDeclaration = {
   },
 };
 
-
 const ViewAllUnits: NgHybridStateDeclaration = {
   name: 'view-all-units',
   url: '/view-all-units',
   // passes 'mode' as @Input to the component
+  resolve: {
+    'mode': function () {
+      return 'auditor';
+    },
+  },
+  views: {
+    main: {
+      component: FUnitsComponent,
+    },
+  },
+  data: {
+    pageTitle: 'View all units',
+    roleWhitelist: ['Admin', 'Auditor'],
+  },
+};
+
+const ViewTutorUnits: NgHybridStateDeclaration = {
+  name: 'view-tutor-units',
+  url: '/view-tutor-units',
+  // passes 'mode' as @Input to the component
   resolve: {
     'mode': function () {
       return 'tutor';
@@ -306,5 +325,6 @@ export const doubtfireStates = [
   usersState,
   ViewAllProjectsState,
   ViewAllUnits,
+  ViewTutorUnits,
   AdministerUnits,
 ];
diff --git a/src/app/home/states/home/home.component.html b/src/app/home/states/home/home.component.html
@@ -63,14 +63,14 @@ <h2>Units you teach</h2>
         </mat-card-content></mat-card
       >
 
-      <a uiSref="view-all-units">
+      <a uiSref="view-tutor-units">
         <button
           matTooltip="View previous units"
           matTooltipPosition="above"
           color="primary"
           mat-fab
           extended
-          aria-label="view all units"
+          aria-label="view taught units"
         >
           <mat-icon class="items-center" style="color: white; padding-right: 1px">history</mat-icon
           >View all
@@ -134,48 +134,17 @@ <h2>Enrolled units</h2>
   </div>
   <div [hidden]="!ifAdmin">
     <h2>All Units</h2>
-    <div [hidden]="!loadingUnits" style="height: 185px">
-      <mat-spinner diameter="40" color="accent"></mat-spinner>
-    </div>
-    <div [hidden]="loadingUnits" class="flex flex-row flex-wrap items-center">
-      <div *ngFor="let unit of units">
-        <div
-          uiSref="units/tasks/inbox"
-          [uiParams]="{unitId: unit.id}"
-          class="removeStyle"
-          *ngIf="!unit.teachingPeriod || unit.teachingPeriod?.active"
-        >
-          <mat-card class="unit-card">
-            <mat-card-header>
-              <mat-card-title class="f-card-title">{{ unit.name }}</mat-card-title>
-              <mat-card-subtitle>{{ unit.code }}</mat-card-subtitle>
-            </mat-card-header>
-            <mat-card-content>
-              <mat-divider></mat-divider>
-            </mat-card-content>
-            <mat-card-actions>
-              <f-chip>
-                {{ unit.teachingPeriod?.name || showDate(unit.startDate) }}
-              </f-chip>
-              <f-chip>{{ currentUser.role }}</f-chip>
-            </mat-card-actions>
-            <mat-card-footer
-              matTooltip="{{ unit.teachingPeriodProgress }}% through the teaching period."
-            >
-              <mat-progress-bar
-                class="unit-progress-slider"
-                mode="determinate"
-                [value]="unit.teachingPeriodProgress"
-              ></mat-progress-bar>
-            </mat-card-footer>
-          </mat-card>
-        </div>
-      </div>
-      <mat-card appearance="outlined" class="unit-card" [hidden]="units.length > 0">
-        <mat-card-content>
-          <p>No available units</p>
-        </mat-card-content></mat-card
+    <a uiSref="view-all-units">
+      <button
+        matTooltip="View all units"
+        matTooltipPosition="above"
+        color="primary"
+        mat-fab
+        extended
+        aria-label="view all units"
       >
-    </div>
+        <mat-icon style="color: white">apps</mat-icon> View all
+      </button>
+    </a>
   </div>
 </div>
diff --git a/src/app/home/states/home/home.component.ts b/src/app/home/states/home/home.component.ts
@@ -14,13 +14,11 @@ import {Subscription} from 'rxjs';
 export class HomeComponent implements OnInit, OnDestroy {
   projects: Project[];
   unitRoles: UnitRole[];
-  units: Unit[] = [];
   showSpinner: boolean;
   dataLoaded: boolean;
   notEnrolled: boolean;
   ifAdmin: boolean;
   ifConvenor: boolean;
-  loadingUnits: boolean;
   loadingUnitRoles: boolean;
   loadingProjects: boolean;
 
@@ -80,27 +78,12 @@ export class HomeComponent implements OnInit, OnDestroy {
 
     this.ifAdmin = this.currentUser.role === 'Admin' || this.currentUser.role === 'Auditor';
     this.ifConvenor = this.currentUser.role === 'Convenor';
-
-    if (this.ifAdmin) {
-      this.loadingUnits = true;
-      this.subscriptions.push(
-        this.unitService.query().subscribe({
-          next: (units) => this.unitsLoaded(units),
-          error: (err) => {},
-        }),
-      );
-    }
   }
 
   get currentUser(): User {
     return this.userService.currentUser;
   }
 
-  unitsLoaded(units: Unit[]): void {
-    this.units = units;
-    this.loadingUnits = false;
-  }
-
   unitRolesLoaded(unitRoles: UnitRole[]): void {
     this.unitRoles = unitRoles;
     this.loadingUnitRoles = false;