Skip to content

Commit 96010fe

Browse files
HasinduWelarathneHasinduWelarathne
committed
Migrate students-list component
1 parent bf59661 commit 96010fe

3 files changed

Lines changed: 24 additions & 37 deletions

File tree

‎src/app/units/states/students-list/students-list.component.html‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
(click)="showSearchOptions = !showSearchOptions"
2020
aria-label="Toggle search options"
2121
[attr.aria-expanded]="showSearchOptions"
22-
class="w-10 h-10 ml-2 flex items-center justify-center border border-gray-300 rounded focus:outline-none focus:ring-0 bg-white"
22+
class="h-full flex items-center justify-center border-1 border-gray-300 rounded-r focus:outline-none focus:ring-0 bg-white"
2323
>
2424
<mat-icon>
2525
{{ showSearchOptions ? 'expand_less' : 'expand_more' }}
@@ -42,10 +42,10 @@
4242
<div
4343
*ngIf="showSearchOptions"
4444
id="students-list-search-options"
45-
class="border rounded p-4 mb-4 bg-white shadow-sm"
45+
class="border rounded p-4 mb-4 bg-gray-50 shadow-sm"
4646
>
4747
<fieldset id="students-list-filter">
48-
<legend class="font-medium mb-2">Show Students From…</legend>
48+
<legend class="text-s font-medium mb-2">Show Students From…</legend>
4949
<div class="inline-flex rounded-md shadow-sm" role="group">
5050
<button
5151
type="button"
@@ -79,7 +79,7 @@
7979
</fieldset>
8080

8181
<fieldset id="students-list-flag-sort" class="mt-4">
82-
<legend class="font-medium mb-2">Sort Flags By…</legend>
82+
<legend class="text-s font-medium mb-2">Sort Flags By…</legend>
8383
<div class="inline-flex rounded-md shadow-sm" role="group">
8484
<button
8585
type="button"
@@ -143,43 +143,43 @@
143143
<thead class="bg-gray-50">
144144
<tr>
145145
<th class="sticky left-0 px-3 py-2"></th>
146-
<th class="px-3 py-2 cursor-pointer" (click)="sortTableBy('student.username')">
146+
<th class="px-3 py-2 cursor-pointer" font-bold (click)="sortTableBy('student.username')">
147147
Username
148-
<mat-icon inline *ngIf="tableSort.order==='student.username'">
148+
<mat-icon inline *ngIf="tableSort.order==='student.username'" class="align-middle text-lg font-semibold ml-1">
149149
{{ tableSort.reverse ? 'expand_more' : 'expand_less' }}
150150
</mat-icon>
151151
</th>
152-
<th class="px-3 py-2 cursor-pointer" (click)="sortTableBy('student.name')">
152+
<th class="px-3 py-2 cursor-pointer" font-bold (click)="sortTableBy('student.name')">
153153
Name
154-
<mat-icon inline *ngIf="tableSort.order==='student.name'">
154+
<mat-icon inline *ngIf="tableSort.order==='student.name'" class="align-middle text-lg font-semibold ml-1">
155155
{{ tableSort.reverse ? 'expand_more' : 'expand_less' }}
156156
</mat-icon>
157157
</th>
158-
<th class="px-3 py-2 cursor-pointer" (click)="sortTableBy('orderScale')">
158+
<th class="px-3 py-2 cursor-pointer" font-bold (click)="sortTableBy('orderScale')">
159159
Stats
160-
<mat-icon inline *ngIf="tableSort.order==='orderScale'">
160+
<mat-icon inline *ngIf="tableSort.order==='orderScale'" class="align-middle text-lg font-semibold ml-1">
161161
{{ tableSort.reverse ? 'expand_more' : 'expand_less' }}
162162
</mat-icon>
163163
</th>
164-
<th class="px-3 py-2 text-center cursor-pointer" (click)="sortTableBy('flags')">
164+
<th class="px-3 py-2 text-center cursor-pointer" font-bold (click)="sortTableBy('flags')">
165165
Flags
166166
<mat-icon inline *ngIf="
167167
tableSort.order==='similarityFlag'||
168168
tableSort.order==='targetGrade'||
169169
tableSort.order==='portfolioStatus'
170-
">
170+
" class="align-middle text-lg font-semibold ml-1">
171171
{{ tableSort.reverse ? 'expand_more' : 'expand_less' }}
172172
</mat-icon>
173173
</th>
174-
<th class="px-3 py-2 cursor-pointer" (click)="sortTableBy('campus.name')">
174+
<th class="px-3 py-2 cursor-pointer" font-bold (click)="sortTableBy('campus.name')">
175175
Campus
176-
<mat-icon inline *ngIf="tableSort.order==='campus.name'">
176+
<mat-icon inline *ngIf="tableSort.order==='campus.name'" class="align-middle text-lg font-semibold ml-1">
177177
{{ tableSort.reverse ? 'expand_more' : 'expand_less' }}
178178
</mat-icon>
179179
</th>
180-
<th class="px-3 py-2 cursor-pointer" (click)="sortTableBy('tutorial.abbreviation')">
180+
<th class="px-3 py-2 cursor-pointer" font-bold (click)="sortTableBy('tutorial.abbreviation')">
181181
Tutorial
182-
<mat-icon inline *ngIf="tableSort.order==='tutorial.abbreviation'">
182+
<mat-icon inline *ngIf="tableSort.order==='tutorial.abbreviation'" class="align-middle text-lg font-semibold ml-1">
183183
{{ tableSort.reverse ? 'expand_more' : 'expand_less' }}
184184
</mat-icon>
185185
</th>
@@ -197,7 +197,7 @@
197197
<span class="truncate">{{ project.student.name }}</span>
198198
</td>
199199
<td class="px-3 py-2" (click)="viewStudent(project)">
200-
<div class="task-progress flex w-full bg-gray-200 h-6 rounded-full overflow-hidden">
200+
<div class="task-progress flex w-full bg-gray-200 h-8 rounded-full overflow-hidden">
201201
<div
202202
*ngFor="let bar of project.taskStats"
203203
class="progress-segment flex items-center justify-center text-xs"

‎src/app/units/states/students-list/students-list.component.scss‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,39 +16,33 @@
1616
}
1717
th {
1818
color: #3b82f6;
19-
font-size: 1.25rem; /* smaller header labels */
19+
font-size: 1.25rem;
2020
font-weight: 500;
2121
}
2222
}
2323

24-
/* 2) PROGRESS BAR (Stats) */
25-
.task-progress {
26-
max-width: 350px; /* cap overall width */
27-
/* height, bg-color & border-radius are handled by Tailwind */
28-
}
29-
3024
/* segment colors & text */
3125
.not_started,
3226
.not-started {
33-
background-color: #d1d5db; /* gray */
34-
color: #374151; /* dark text */
27+
background-color: #d1d5db;
28+
color: #374151;
3529
}
3630
.working_on_it,
3731
.working-on-it {
38-
background-color: #3b82f6; /* blue */
32+
background-color: #3b82f6;
3933
color: #fff;
4034
}
4135
.ready_for_feedback,
4236
.ready-for-feedback {
43-
background-color: #f59e0b; /* amber */
37+
background-color: #f59e0b;
4438
color: #fff;
4539
}
4640
.complete {
47-
background-color: #4caf50; /* green */
41+
background-color: #4caf50;
4842
color: #fff;
4943
}
5044
.fail {
51-
background-color: #dc3545; /* red */
45+
background-color: #dc3545;
5246
color: #fff;
5347
}
5448

@@ -60,7 +54,6 @@
6054
font-size: 0.75rem;
6155
line-height: 1;
6256
white-space: nowrap;
63-
/* corners come from .rounded-full in your HTML */
6457
}
6558

6659
/* 3) FILTER BUTTONS ICON CENTERING */

‎src/app/units/states/students-list/students-list.component.ts‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { UserService } from 'src/app/api/services/user.service';
1111
})
1212
export class FStudentsListComponent implements OnInit, AfterViewInit {
1313
@Input() unit!: Unit;
14-
// Removed unused @Input() tutor
1514

1615
@ViewChild('searchInput', { static: false })
1716
searchInput!: ElementRef<HTMLInputElement>;
@@ -64,7 +63,6 @@ export class FStudentsListComponent implements OnInit, AfterViewInit {
6463
}
6564

6665
ngAfterViewInit(): void {
67-
// Keep the existing focus behavior on the search input
6866
this.searchInput?.nativeElement.focus();
6967
}
7068

@@ -155,10 +153,6 @@ export class FStudentsListComponent implements OnInit, AfterViewInit {
155153
this.applyFilters();
156154
}
157155

158-
displayOption(option: string): string {
159-
return option;
160-
}
161-
162156
totalProgress(project: Project): number {
163157
return (project.taskStats || []).reduce((sum, bar) => sum + bar.value, 0);
164158
}

0 commit comments

Comments
 (0)