opelly/WinStudentGoalTracker
1
0
Fork 0
mirror of https://github.com/opelly27/WinStudentGoalTracker.git synced 2026-05-20 05:17:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updates to see others' students

Browse Source
This commit is contained in:
ivan-pelly
2026-04-08 07:56:04 -07:00
parent 0a8d2ebb59
commit 59de3bb2e5
15 changed files with 278 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.html
+14 -1
View File
@@ -1,6 +1,13 @@
<div class="toolbar">
<h1 class= "page-title"> My Students - <span class="student-count"> {{ students().length}}</span></h1>
<h1 class="page-title">{{ showAll() ? 'All Students' : 'My Students' }} - <span class="student-count">{{ students().length }}</span></h1>
<div class="toolbar-right">
<label class="scope-toggle" title="Toggle between My Students and All Students">
<span class="scope-label">All Students</span>
<span class="toggle-track" [class.active]="showAll()">
<span class="toggle-thumb"></span>
</span>
<input type="checkbox" [checked]="showAll()" (change)="onToggleScope()" hidden>
</label>
<div class="view-toggle">
<button
class="toggle-btn"
@@ -60,6 +67,9 @@
<div class="student-list">
<div class="list-header">
<span class="col-name">Student</span>
@if (showAll()) {
<span class="col-owner">Owner</span>
}
<span class="col-iep">IEP Date</span>
<span class="col-entry">Last Entry</span>
<span class="col-stat">Goals</span>
@@ -69,6 +79,9 @@
@for (student of students(); track student.studentId) {
<div class="list-row" [routerLink]="['/students', student.studentId]">
<span class="col-name">🎓 {{ student.identifier }}</span>
@if (showAll()) {
<span class="col-owner">{{ student.ownerName }}</span>
}
<span class="col-iep">{{ student.nextIepDate | date:'M/d/yy' }}</span>
<span class="col-entry">
@if (student.lastEntryDate) {
ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.scss
+43
View File
@@ -164,4 +164,47 @@
background: #fff;
border-radius: 8px;
border: 1px solid #ddd;
}
.scope-toggle {
display: flex;
align-items: center;
gap: 0.375rem;
cursor: pointer;
font-size: 0.875rem;
color: #4b5563;
user-select: none;
}
.toggle-track {
display: inline-flex;
align-items: center;
width: 36px;
height: 20px;
background: #d1d5db;
border-radius: 10px;
padding: 2px;
transition: background 0.2s;
&.active {
background: #4f46e5;
}
}
.toggle-thumb {
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s;
.active > & {
transform: translateX(16px);
}
}
.col-owner {
flex: 1;
color: #4b5563;
font-size: 0.875rem;
}
ui/winstudentgoaltracker/src/app/desktop/components/student-card-list/student-card-list.ts
+15 -1
View File
@@ -31,6 +31,7 @@ export class StudentCardList {
protected readonly displayMode = signal<DisplayMode>('card');
protected readonly showAddModal = signal(false);
protected readonly loaded = signal(false);
protected readonly showAll = signal(false);
public errorMessage = signal<String | null>(null);
@@ -48,6 +49,17 @@ export class StudentCardList {
this.showAddModal.set(true);
}
// *****************************************************************
// Toggles between "My Students" and "All Students" scope, then
// reloads the student list from the API with the new scope.
// *****************************************************************
onToggleScope() {
this.showAll.update(v => !v);
this.loaded.set(false);
this.loadStudents();
this.studentService.notifyDataChanged();
}
onStudentCreated(student: StudentCardDto) {
this.students.update(list => this.sortByIdentifier([...list, student]));
this.showAddModal.set(false);
@@ -72,9 +84,11 @@ export class StudentCardList {
// *****************************************************************
// Loads students from the service and populates the students signal.
// Uses scope 'all' when the toggle is active.
// *****************************************************************
private loadStudents() {
this.studentService.getMyStudents().then(data => {
const scope = this.showAll() ? 'all' : undefined;
this.studentService.getMyStudents(scope).then(data => {
if (!data.success) {
this.errorMessage.set(data.message);
ui/winstudentgoaltracker/src/app/desktop/pages/home/home.ts
+66 -17
View File
@@ -99,9 +99,12 @@ export class Home implements OnDestroy {
// *****************************************************************
// Loads student list, sorts by identifier, and builds the sidebar
// tree with lazy-loading callbacks for goals and benchmarks.
// When scope is 'all', groups students by owning user.
// *****************************************************************
private loadStudents() {
this.studentService.getMyStudents().then(data => {
// Fetch with 'all' scope so the sidebar can show grouped nodes
// when the StudentCardList toggle is active.
this.studentService.getMyStudents('all').then(data => {
if (data.success) {
const sorted = (data.payload || []).sort((a, b) =>
a.identifier.localeCompare(b.identifier, undefined, { sensitivity: 'base' })
@@ -114,31 +117,77 @@ export class Home implements OnDestroy {
// *****************************************************************
// Builds the sidebar node tree from a list of students.
// Groups students by ownerName — "My Students" first, then other
// owners' groups sorted alphabetically.
// *****************************************************************
private buildTree(students: StudentCardDto[]): SidebarNode[] {
return [{
// Group students by ownerName. Students with isMine go into "My Students".
const myStudents: StudentCardDto[] = [];
const otherGroups = new Map<string, StudentCardDto[]>();
for (const s of students) {
if (s.isMine !== false) {
myStudents.push(s);
} else {
const key = s.ownerName ?? 'Unknown';
if (!otherGroups.has(key)) otherGroups.set(key, []);
otherGroups.get(key)!.push(s);
}
}
const nodes: SidebarNode[] = [{
label: 'My Students',
routerLink: ['/students'],
expanded: true,
childCount: students.length,
children: students.map(s => ({
label: s.identifier,
routerLink: ['/students', s.studentId],
childCount: s.goalCount > 0 ? 1 : 0,
children: s.goalCount > 0 ? [{
label: 'Goals',
routerLink: ['/students', s.studentId, 'goals'],
childCount: s.goalCount,
loadChildren: () => this.loadGoalNodes(s.studentId),
}] : undefined,
})),
},
{
childCount: myStudents.length,
children: myStudents.map(s => this.buildStudentNode(s)),
}];
// Add other users' groups sorted by owner name.
const sortedOwners = [...otherGroups.keys()].sort((a, b) =>
a.localeCompare(b, undefined, { sensitivity: 'base' })
);
for (const ownerName of sortedOwners) {
const group = otherGroups.get(ownerName)!;
const firstName = ownerName.split(' ')[0];
nodes.push({
label: `${firstName}'s Students`,
routerLink: ['/students'],
expanded: false,
childCount: group.length,
children: group.map(s => this.buildStudentNode(s)),
});
}
nodes.push({
label: 'Reports',
routerLink: ['/reports'],
}];
});
return nodes;
}
// *****************************************************************
// Builds a single student sidebar node with lazy-loaded goal
// children.
// *****************************************************************
private buildStudentNode(s: StudentCardDto): SidebarNode {
return {
label: s.identifier,
routerLink: ['/students', s.studentId],
childCount: s.goalCount > 0 ? 1 : 0,
children: s.goalCount > 0 ? [{
label: 'Goals',
routerLink: ['/students', s.studentId, 'goals'],
childCount: s.goalCount,
loadChildren: () => this.loadGoalNodes(s.studentId),
}] : undefined,
};
}
// *****************************************************************
// Lazy-loads individual goal nodes for a student. Called when
// the "Goals" node is expanded for the first time.
ui/winstudentgoaltracker/src/app/mobile/pages/students/students.html
+10
View File
@@ -1,3 +1,13 @@
<div class="scope-bar">
<label class="scope-toggle">
<span>All Students</span>
<span class="toggle-track" [class.active]="showAll()">
<span class="toggle-thumb"></span>
</span>
<input type="checkbox" [checked]="showAll()" (change)="onToggleScope()" hidden>
</label>
</div>
@if (loaded() && students().length === 0) {
<div class="empty-state">
<p>You don't currently have any students.</p>
ui/winstudentgoaltracker/src/app/mobile/pages/students/students.scss
+43
View File
@@ -16,4 +16,47 @@
background: #fff;
border-radius: 10px;
border: 1px solid #e5e5e5;
}
.scope-bar {
display: flex;
justify-content: flex-end;
margin-bottom: 0.75rem;
}
.scope-toggle {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
color: #4b5563;
cursor: pointer;
user-select: none;
}
.toggle-track {
display: inline-flex;
align-items: center;
width: 36px;
height: 20px;
background: #d1d5db;
border-radius: 10px;
padding: 2px;
transition: background 0.2s;
&.active {
background: #4f46e5;
}
}
.toggle-thumb {
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s;
.active > & {
transform: translateX(16px);
}
}
ui/winstudentgoaltracker/src/app/mobile/pages/students/students.ts
+13 -1
View File
@@ -23,6 +23,7 @@ export class Students {
private readonly studentService = inject(StudentService);
protected readonly students = signal<StudentCardDto[]>([]);
protected readonly loaded = signal(false);
protected readonly showAll = signal(false);
public errorMessage = signal<String | null>(null);
@@ -32,13 +33,24 @@ export class Students {
// ************************ Event Handlers *************************
// *****************************************************************
// Toggles between "My Students" and "All Students" scope, then
// reloads the student list from the API.
// *****************************************************************
onToggleScope() {
this.showAll.update(v => !v);
this.loaded.set(false);
this.loadStudents();
}
// ********************** Support Procedures ***********************
// *****************************************************************
// Loads the list of students assigned to the current user.
// *****************************************************************
private loadStudents() {
this.studentService.getMyStudents().then(data => {
const scope = this.showAll() ? 'all' : undefined;
this.studentService.getMyStudents(scope).then(data => {
if (!data.success)
{
ui/winstudentgoaltracker/src/app/shared/classes/student-card.dto.ts
+2
View File
@@ -7,4 +7,6 @@ export interface StudentCardDto {
goalCount: number;
progressEventCount: number;
benchmarkCount: number;
ownerName?: string;
isMine?: boolean;
}
ui/winstudentgoaltracker/src/app/shared/services/student.service.ts
+6 -2
View File
@@ -53,11 +53,15 @@ export class StudentService {
// *****************************************************************
// Returns student card summaries for the authenticated user.
// When scope is 'all', returns all students in the program.
// *****************************************************************
async getMyStudents(): Promise<ApiResult<StudentCardDto[]>> {
async getMyStudents(scope?: 'all'): Promise<ApiResult<StudentCardDto[]>> {
try {
const params: any = {};
if (scope) params.scope = scope;
const result = await firstValueFrom(
this.http.get<ResponseResult<StudentCardDto[]>>(`${this.base}/api/Student/my`)
this.http.get<ResponseResult<StudentCardDto[]>>(`${this.base}/api/Student/my`, { params })
);
return result.success && result.data
? ApiResult.ok(result.data)