re organized files for consistency

2026-05-20 07:37:38 +00:00 · 2026-03-02 14:12:15 -08:00
parent 328a44043f
commit 4493d772bb
7 changed files with 4 additions and 4 deletions
@@ -0,0 +1,14 @@
+<div class="toolbar">
+    <button class="toolbar-btn" (click)="onAddStudent()">+ Add a Student</button>
+</div>
+
+@if (displayMode() === 'card') {
+<div class="card-grid">
+    @for (student of students(); track student.studentId) {
+    <app-student-card [student]="student" />
+    }
+</div>
+} @else {
+<!-- List mode — to be implemented -->
+<p>List view coming soon.</p>
+}
@@ -0,0 +1,41 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    height: 40px;
+    padding-right: 0.5rem;
+    border-radius: 8px;
+    background: #fff;
+    border-bottom: 1px solid #ddd;
+    margin-bottom: 1rem;
+    flex-shrink: 0;
+}
+
+.toolbar-btn {
+    padding: 0.375rem 0.75rem;
+    background: transparent;
+    color: #4f46e5;
+    border: 1px solid #4f46e5;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.toolbar-btn:hover {
+    background: #eef2ff;
+}
+
+.card-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    overflow-y: auto;
+    flex: 1;
+}
@@ -0,0 +1,59 @@
+import { Component, inject, signal } from '@angular/core';
+import { StudentCard } from '../student-card/student-card';
+import { StudentService } from '../../../shared/services/dummy-student.service';
+import { StudentCardDto } from '../../../shared/classes/student-card.dto';
+
+export type DisplayMode = 'card' | 'list';
+
+@Component({
+  selector: 'app-student-card-list',
+  imports: [StudentCard],
+  templateUrl: './student-card-list.html',
+  styleUrl: './student-card-list.scss',
+})
+export class StudentCardList {
+
+  // ************************** Constructor **************************
+
+  constructor() {
+    this.loadStudents();
+  }
+
+  // ************************** Declarations *************************
+
+  private readonly studentService = inject(StudentService);
+  protected readonly students = signal<StudentCardDto[]>([]);
+  protected readonly displayMode = signal<DisplayMode>('card');
+
+  public errorMessage = signal<String | null>(null);
+
+  // ************************** Properties ***************************
+
+  // ************************ Public Methods *************************
+
+  // ************************ Event Handlers *************************
+
+  onAddStudent() {
+    // TODO: navigate to add-student form
+  }
+
+  // ********************** Support Procedures ***********************
+
+  // *****************************************************************
+  // Loads students from the service and populates the students signal.
+  // *****************************************************************
+  private loadStudents() {
+    this.studentService.getStudentCards().then(data => {
+      
+      if(!data.success)
+      {
+        this.errorMessage.set(data.message);
+      }
+      else
+      {
+        this.students.set(data.payload || [])
+      }
+
+    });
+  }
+}
@@ -0,0 +1,19 @@
+<div class="card">
+    <h2 class="identifier">🎓 {{ student().identifier }}</h2>
+
+    <div class="meta">
+        <span class="badge">Age: {{ student().age }}</span>
+        <span class="last-entry">
+            @if (student().lastEntryDate) {
+            Last entry: {{ student().lastEntryDate | date:'M/d/yy' }}
+            } @else {
+            No entries yet
+            }
+        </span>
+    </div>
+
+    <div class="stats">
+        <span>Goals: {{ student().goalCount }}</span>
+        <span>Events: {{ student().progressEventCount }}</span>
+    </div>
+</div>
@@ -0,0 +1,42 @@
+:host {
+    display: block;
+    width: 280px;
+}
+
+.card {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    padding: 1.5rem;
+}
+
+.identifier {
+    margin: 0 0 0.75rem;
+    font-size: 1.5rem;
+    text-align: center;
+}
+
+.meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    font-size: 0.875rem;
+    color: #666;
+}
+
+.badge {
+    padding: 0.25rem 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    font-size: 0.8125rem;
+    color: #333;
+}
+
+.stats {
+    display: flex;
+    justify-content: space-around;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #333;
+}
@@ -0,0 +1,26 @@
+import { Component, input } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { StudentCardDto } from '../../../shared/classes/student-card.dto';
+
+@Component({
+  selector: 'app-student-card',
+  imports: [DatePipe],
+  templateUrl: './student-card.html',
+  styleUrl: './student-card.scss',
+})
+export class StudentCard {
+
+  // ************************** Constructor **************************
+
+  // ************************** Declarations *************************
+
+  readonly student = input.required<StudentCardDto>();
+
+  // ************************** Properties ***************************
+
+  // ************************ Public Methods *************************
+
+  // ************************ Event Handlers *************************
+
+  // ********************** Support Procedures ***********************
+}