feature/90-student-database-connection

uniplanWeb/public/i18n/bg.json

@@ -44,8 +44,27 @@
     "faculty-number-label": "Факултетен номер",
     "course-label": "Курс",
     "qualification-level-label": "Квалификационна степен",
+    "first-name-label": "Първо име",
+    "last-name-label": "Фамилия",
+    "major-label": "Специалност",
+    "study-mode-label": "Форма на обучение",
     "add": {
       "title": "Добави студент"
+    },
+    "edit": {
+      "title": "Редактирай студент"
+    },
+    "delete": {
+      "title": "Изтрий студент"
+    },
+    "warnings": {
+      "first-name": "Моля въведете първо име на студента.",
+      "last-name": "Моля въведете фамилия на студента.",
+      "faculty-number": "Моля въведете факултетен номер.",
+      "major": "Моля изберете специалност.",
+      "study-mode": "Моля изберете форма на обучение.",
+      "qualification": "Моля изберете квалификационна степен.",
+      "course": "Моля изберете курс."
     }
   },
   "settings": {

uniplanWeb/public/i18n/en.json

@@ -44,8 +44,27 @@
         "faculty-number-label": "Student ID",
         "course-label": "Course",
         "qualification-level-label": "Qualification level",
+        "first-name-label": "First name",
+        "last-name-label": "Last name",
+        "major-label": "Major",
+        "study-mode-label": "Study mode",
         "add": {
             "title": "Add student"
+        },
+        "edit": {
+            "title": "Edit student"
+        },
+        "delete":{
+            "title": "Delete student"
+        },
+        "warnings": {
+            "first-name": "Please enter the student's first name.",
+            "last-name": "Please enter the student's last name.",
+            "faculty-number": "Please enter the faculty number.",
+            "major": "Please select a major.",
+            "study-mode": "Please select a study mode.",
+            "qualification": "Please select a qualification level.",
+            "course": "Please select a course."
         }
     },
     "settings": {

uniplanWeb/src/app/config/endpoints.ts

@@ -5,4 +5,5 @@ export const API_ENDPOINTS = {
   courses: `${environment.baseUrl}/courses`,
   faculties: `${environment.baseUrl}/faculties`,
   majors: `${environment.baseUrl}/majors`,
+  students: `${environment.baseUrl}/students`,
 };

uniplanWeb/src/app/core/interfaces/course-elm.ts

@@ -0,0 +1,7 @@
+export interface CourseElm {
+  id: string;
+  majorId: string;
+  courseYear: number;
+  courseType: string;
+  courseSubtype: string;
+}

uniplanWeb/src/app/core/interfaces/student-elm.ts

@@ -1,9 +1,13 @@
+import { CourseSubtype } from "../../features/course/course-subtype";
+
 export interface StudentElm {
+  id: string;
   position: number;
   name: string;
   facultyNumber: string;
-  major: string;
-  majorType: string;
-  course: string;
-  subtype: 'редовно' | 'задочно';
+  majorId: string;
+  majorName: string;
+  courseType: string;
+  courseSubtype: CourseSubtype;
+  courseYear: number;
 }

uniplanWeb/src/app/features/course/course-service.ts

@@ -0,0 +1,18 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable, inject } from '@angular/core';
+import { Observable } from 'rxjs';
+import { CourseElm } from '../../core/interfaces/course-elm';
+import { API_ENDPOINTS } from '../../config/endpoints';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CourseService {
+  private http = inject(HttpClient);
+
+  getCoursesByMajorId(majorId: string): Observable<CourseElm[]> {
+    return this.http.get<CourseElm[]>(`${API_ENDPOINTS.courses}/major/${majorId}`);
+  }
+}
+//placeholder course service to make student form dropdowns work,
+//when replacing this please provide a getCoursesByMajorId-like method

uniplanWeb/src/app/features/course/course-subtype.ts

@@ -0,0 +1,6 @@
+export const CourseSubtypeLabels = {
+  FullTime: 'редовно',
+  PartTime: 'задочно',
+} as const;
+
+export type CourseSubtype = typeof CourseSubtypeLabels[keyof typeof CourseSubtypeLabels];

uniplanWeb/src/app/features/student/student-panel/student-panel.html

@@ -18,6 +18,7 @@
     [searchFacNum]="searchFacNum"
     [searchMajor]="searchMajor"
     [subtype]="selectedStudentSubtype"
-    [subtypes]="studentSubtypes">
+    [subtypes]="studentSubtypes"
+    (subtypesLoaded)="studentSubtypes=$event">
   </app-student-table>
 </div>

uniplanWeb/src/app/features/student/student-panel/student-panel.ts

@@ -1,9 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
-import { StudentElm } from '../../../core/interfaces/student-elm';
 import { StudentOptions } from '../student-options/student-options';
 import { StudentFilters } from '../student-filters/student-filters';
-import { StudentTable, ELEMENT_STUDENT_DATA } from '../student-table/student-table';
+import { StudentTable } from '../student-table/student-table';
 
 @Component({
   selector: 'app-student-panel',
@@ -19,7 +18,6 @@ export class StudentPanel implements OnInit {
   studentSubtypes: string[] = [];
 
   ngOnInit(): void {
-    const students: StudentElm[] = ELEMENT_STUDENT_DATA;
-    this.studentSubtypes = StudentTable.getFilterOptions(students).subtypes;
+
   }
 }

uniplanWeb/src/app/features/student/student-service.ts

@@ -0,0 +1,61 @@
+import { inject, Injectable } from '@angular/core';
+import { map, Observable, Subject } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { StudentElm } from '../../core/interfaces/student-elm';
+import { API_ENDPOINTS } from '../../config/endpoints';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class StudentService {
+    private apiUrl = API_ENDPOINTS.students;
+
+    refreshNeeded = new Subject<void>();
+
+    private http = inject(HttpClient);
+
+    getStudents(): Observable<StudentElm[]> {
+        return this.http.get<StudentElm[]>(this.apiUrl).pipe(
+            map((students) =>
+                students.map((student, index) => ({
+                    id: student.id,
+                    position: index + 1,
+                    name: student.name,
+                    facultyNumber: student.facultyNumber,
+                    majorId: student.majorId,
+                    majorName: student.majorName,
+                    courseType: student.courseType,
+                    courseSubtype: student.courseSubtype,
+                    courseYear: student.courseYear,
+                }))
+            )
+        );
+    }
+    createStudent(student: Omit<StudentElm, 'position' | 'id'>): Observable<void> {
+        return this.http.post<void>(`${this.apiUrl}`, student).pipe(
+            map((res) => {
+                this.refreshNeeded.next();
+                return res;
+            })
+        );
+    }
+
+    editStudent(id: string,
+         updatedStudent: Omit<StudentElm, 'position' | 'id'>): Observable<void> {
+        return this.http.put<void>(`${this.apiUrl}/${id}`, updatedStudent).pipe(
+            map((res) => {
+                this.refreshNeeded.next();
+                return res;
+            })
+        );
+    }
+
+    deleteStudent(id: string): Observable<void> {
+        return this.http.delete<void>(`${this.apiUrl}/${id}`).pipe(
+            map((res) => {
+                this.refreshNeeded.next();
+                return res;
+            })
+        );
+    }
+}

uniplanWeb/src/app/features/student/student-table/student-table.html

@@ -1,104 +1,66 @@
 <div class="table-wrapper">
-    <table mat-table [dataSource]="dataSourceFilter"
-        class="mat-elevation-z8 table-header">
+    <table mat-table [dataSource]="dataSourceFilter" class="mat-elevation-z8 table-header">
         <ng-container matColumnDef="position">
             <th mat-header-cell *matHeaderCellDef class="col-position"> {{ 'features.number-label' | translate }}
             </th>
         </ng-container>
-
         <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef class="col-name">{{ 'features.name-label' | translate }}
-            </th>
+            <th mat-header-cell *matHeaderCellDef class="col-name"> {{ 'features.name-label' | translate }} </th>
         </ng-container>
-
         <ng-container matColumnDef="facultyNumber">
-            <th mat-header-cell *matHeaderCellDef class="col-fac-number">
-                {{ 'student.faculty-number-label' | translate }}
-            </th>
+            <th mat-header-cell *matHeaderCellDef class="col-fac-number"> {{ 'student.faculty-number-label' | translate }} </th>
         </ng-container>
-
-        <ng-container matColumnDef="major">
-            <th mat-header-cell *matHeaderCellDef class="col-major">
-                {{ 'features.major-label' | translate }}
-            </th>
+        <ng-container matColumnDef="majorName">
+            <th mat-header-cell *matHeaderCellDef class="col-major"> {{ 'features.major-label' | translate }} </th>
         </ng-container>
-
-        <ng-container matColumnDef="majorType">
-            <th mat-header-cell *matHeaderCellDef class="col-major-type">
-                {{'student.qualification-level-label' | translate}}
-            </th>
+        <ng-container matColumnDef="courseType">
+            <th mat-header-cell *matHeaderCellDef class="col-course-type"> {{ 'student.qualification-level-label' | translate }} </th>
         </ng-container>
-
-        <ng-container matColumnDef="course">
-            <th mat-header-cell *matHeaderCellDef class="col-course"> {{ 'student.course-label' | translate }}
-            </th>
+        <ng-container matColumnDef="courseSubtype">
+            <th mat-header-cell *matHeaderCellDef class="col-subtype"> {{ 'features.study-mode-label' | translate }} </th>
         </ng-container>
-
-        <ng-container matColumnDef="subtype">
-            <th mat-header-cell *matHeaderCellDef class="col-subtype">{{ 'features.study-mode-label' | translate }}
-            </th>
+        <ng-container matColumnDef="courseYear">
+            <th mat-header-cell *matHeaderCellDef class="col-year"> {{ 'student.course-label' | translate }} </th>
         </ng-container>
-
         <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef class="col-actions"> {{ 'features.actions-label' | translate }}
-            </th>
+            <th mat-header-cell *matHeaderCellDef class="col-actions"> {{ 'features.actions-label' | translate }} </th>
         </ng-container>
-
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     </table>
-
     <div class="scrollable-body">
-        <table mat-table [dataSource]="dataSourceFilter"
-            class="mat-elevation-z8 table-body">
+        <table mat-table [dataSource]="dataSourceFilter" class="mat-elevation-z8 table-body">
             <ng-container matColumnDef="position">
-                <td mat-cell *matCellDef="let element" class="col-position">
-                    {{element.position}} </td>
+                <td mat-cell *matCellDef="let element" class="col-position"> {{element.position}} </td>
             </ng-container>
-
             <ng-container matColumnDef="name">
-                <td mat-cell *matCellDef="let element" class="col-name">
-                    {{element.name}} </td>
+                <td mat-cell *matCellDef="let element" class="col-name"> {{element.name}} </td>
             </ng-container>
-
             <ng-container matColumnDef="facultyNumber">
-                <td mat-cell *matCellDef="let element" class="col-fac-number">
-                    {{element.facultyNumber}} </td>
+                <td mat-cell *matCellDef="let element" class="col-fac-number"> {{element.facultyNumber}} </td>
             </ng-container>
-
-            <ng-container matColumnDef="major">
-                <td mat-cell *matCellDef="let element" class="col-major">
-                    {{element.major}} </td>
+            <ng-container matColumnDef="majorName">
+                <td mat-cell *matCellDef="let element" class="col-major"> {{element.majorName}} </td>
             </ng-container>
-
-            <ng-container matColumnDef="majorType">
-                <td mat-cell *matCellDef="let element" class="col-major-type">
-                    {{element.majorType}} </td>
+            <ng-container matColumnDef="courseType">
+                <td mat-cell *matCellDef="let element" class="col-course-type"> {{element.courseType}} </td>
             </ng-container>
-
-            <ng-container matColumnDef="course">
-                <td mat-cell *matCellDef="let element" class="col-course">
-                    {{element.course}} </td>
+            <ng-container matColumnDef="courseSubtype">
+                <td mat-cell *matCellDef="let element" class="col-subtype"> {{element.courseSubtype}} </td>
             </ng-container>
-
-            <ng-container matColumnDef="subtype">
-                <td mat-cell *matCellDef="let element" class="col-subtype">
-                    {{element.subtype}} </td>
+            <ng-container matColumnDef="courseYear">
+                <td mat-cell *matCellDef="let element" class="col-year"> {{element.courseYear}} </td>
             </ng-container>
-
             <ng-container matColumnDef="actions">
                 <td mat-cell *matCellDef="let element" class="col-actions">
-                    <button mat-icon-button color="primary"
-                        (click)="onEdit(element)">
+                    <button mat-icon-button color="primary" (click)="onEdit(element)">
                         <mat-icon>edit</mat-icon>
                     </button>
-                    <button mat-icon-button color="warn"
-                        (click)="onDelete(element)">
+                    <button mat-icon-button color="warn" (click)="onDelete(element)">
                         <mat-icon>delete</mat-icon>
                     </button>
                 </td>
             </ng-container>
-
             <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
     </div>
-</div>
+</div>