Feature/43 implement department read functionality

uniplanWeb/public/i18n/bg.json

@@ -6,14 +6,18 @@
     "type-label": "Тип",
     "study-mode-label": "Форма на обучение",
     "major-label": "Специалност",
+    "department-label": "Катедра",
     "location-label": "Местоположение",
     "number-label": "No.",
     "edit": "Редактирай",
     "delete": "Изтрий"
   },
   "room": {
     "room-number": "Номер на стая",
-    "no-rooms": "Няма записани стаи"
+    "no-rooms": "Няма записани стаи",
+    "department-label": "Катедра",
+    "number-label": "№"
+
   },
   "faculty": {
     "delete-button": "Изтрий",
@@ -40,6 +44,21 @@
       "title": "Редактирай специалност"
     }
   },
+  "department": {
+    "delete-button": "Изтрий",
+    "edit-button": "Редактирай",
+    "uni-label": "Университет",
+    "delete-confirmation": "Сигурни ли сте, че искате да изтриете катедра с име: ",
+    "create-error": "Възникна грешка при създаването на катедрата.",
+    "update-error": "Възникна грешка при редактирането на катедрата.",
+    "delete-error": "Възникна грешка при изтриването на катедрата.",
+    "add": {
+      "title": "Добави катедра"
+    },
+    "edit": {
+      "title": "Редактирай катедра"
+    }
+  },
   "student": {
     "faculty-number-label": "Факултетен номер",
     "course-label": "Курс",
@@ -60,7 +79,8 @@
     "save-button": "Запази",
     "delete-button": "Изтрий",
     "option-all": "Всички",
-    "confirm-delete": "Потвърдете изтриването"
+    "confirm-delete": "Потвърдете изтриването",
+    "required-field": "Това поле е задължително"
   },
   "home": {
     "title": "Начало!"
@@ -85,4 +105,4 @@
     "logout": "Изход",
     "login": "Вход"
   }
-}
+}

uniplanWeb/public/i18n/en.json

@@ -7,13 +7,8 @@
         "study-mode-label": "Study mode",
         "major-label": "Major",
         "location-label": "Location",
-        "number-label": "No.",
-        "edit": "Edit",
-        "delete": "Delete"
-    },
-    "room": {
-        "room-number": "Room number",
-        "no-rooms": "No rooms"
+        "department-label": "Department",
+        "number-label": "No."
     },
     "faculty": {
         "delete-button": "Delete",
@@ -40,6 +35,21 @@
             "title": "Edit major"
         }
     },
+  "department": {
+    "delete-button": "Delete",
+    "edit-button": "Edit",
+    "uni-label": "University",
+    "delete-confirmation": "Are you sure you want to delete the department named: ",
+    "create-error": "Failed to create department.",
+    "update-error": "Failed to update department.",
+    "delete-error": "Failed to delete department.",
+    "add": {
+      "title": "Add department"
+    },
+    "edit": {
+      "title": "Edit department"
+    }
+  },
     "student": {
         "faculty-number-label": "Student ID",
         "course-label": "Course",
@@ -60,7 +70,8 @@
         "save-button": "Save",
         "delete-button": "Delete",
         "option-all": "All",
-        "confirm-delete": "Confirm deletion"
+        "confirm-delete": "Confirm deletion",
+        "required-field": "This field is required"
     },
     "home": {
         "title": "Main!"
@@ -85,4 +96,4 @@
         "logout": "Logout",
         "login": "Login"
     }
-}
+}

uniplanWeb/src/app/app.routes.ts

@@ -17,6 +17,11 @@ export const routes: Routes = [
         loadComponent: () =>
           import('./features/faculty/faculty-panel/faculty-panel').then(m => m.FacultyPanel),
       },
+      {
+        path: 'department',
+        loadComponent: () =>
+          import('./features/department/department-panel/department-panel').then(m => m.DepartmentPanel),
+      },
       {
         path: 'major',
         loadComponent: () =>

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`,
+  departments: `${environment.baseUrl}/departments`,
 };

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

@@ -0,0 +1,6 @@
+export interface DepartmentElm {
+  id: string;
+  departmentName: string;
+  facultyId: string;
+  position: number;
+}

uniplanWeb/src/app/core/shared/navmenu-component/navmenu-component.html

@@ -30,7 +30,9 @@ <h2>Logo</h2>
         </a>
       </li>
       <li class="list">
-        <a href="#" class="nav-link"><span class="link">{{ 'navmenu.department' | translate }}</span></a>
+        <a [routerLink]="'/department'" routerLinkActive="active" class="nav-link">
+          <span class="link">{{ 'navmenu.department' | translate }}</span>
+        </a>
       </li>
       <li class="list">
         <a [routerLink]="'/major'" routerLinkActive="active" class="nav-link">

uniplanWeb/src/app/features/department/department-add-form/department-add-form.html

@@ -0,0 +1,27 @@
+<app-add-form [title]="'department.add.title' | translate"  (saveClicked)="save()">
+  <mat-dialog-content [formGroup]="form">
+
+    <mat-form-field appearance="fill">
+      <mat-label>{{ 'features.name-label' | translate }}</mat-label>
+      <input matInput formControlName="departmentName" />
+      @if (form.controls.departmentName.hasError('required')) {
+        <mat-error>{{ 'shared.required-field' | translate }}</mat-error>
+      }
+    </mat-form-field>
+
+    <mat-form-field appearance="fill">
+      <mat-label>{{ 'features.faculty-label' | translate }}</mat-label>
+      <mat-select formControlName="facultyId">
+        @for (fac of faculties; track fac) {
+          <mat-option [value]="fac.id">
+            {{ fac.facultyName }}
+          </mat-option>
+        }
+      </mat-select>
+      @if (form.controls.facultyId.hasError('required')) {
+        <mat-error>{{ 'shared.required-field' | translate }}</mat-error>
+      }
+    </mat-form-field>
+
+  </mat-dialog-content>
+</app-add-form>

uniplanWeb/src/app/features/department/department-add-form/department-add-form.scss

@@ -0,0 +1,14 @@
+mat-form-field {
+  width: 100%;
+}
+
+mat-dialog-title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #3f51b5;
+}
+
+input {
+  border-radius: 10px;
+  width: 100%;
+}

uniplanWeb/src/app/features/department/department-add-form/department-add-form.spec.ts

@@ -0,0 +1,18 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DepartmentAddForm } from './department-add-form';
+
+describe('DepartmentAddForm', () => {
+  let component: DepartmentAddForm;
+  let fixture: ComponentFixture<DepartmentAddForm>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DepartmentAddForm],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DepartmentAddForm);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+});

uniplanWeb/src/app/features/department/department-add-form/department-add-form.ts

@@ -0,0 +1,89 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { AddForm } from '../../../core/shared/add-form/add-form';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import {
+  MatFormField,
+  MatFormFieldModule,
+  MatLabel,
+} from '@angular/material/form-field';
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { DepartmentService } from '../department-service';
+import { FacultyElm } from '../../../core/interfaces/faculty-elm';
+import { FacultyService } from '../../faculty/faculty-service';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-department-add-form',
+  imports: [
+    MatDialogModule,
+    MatFormField,
+    MatLabel,
+    ReactiveFormsModule,
+    MatInputModule,
+    AddForm,
+    MatFormFieldModule,
+    MatSelectModule,
+    TranslatePipe,
+  ],
+  templateUrl: './department-add-form.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  styleUrl: './department-add-form.scss',
+})
+export class DepartmentAddForm implements OnInit {
+  protected readonly form = new FormGroup({
+    departmentName: new FormControl('', {
+      nonNullable: true,
+      validators: [Validators.required],
+    }),
+    facultyId: new FormControl('', {
+      nonNullable: true,
+      validators: [Validators.required],
+    }),
+  });
+
+  protected faculties: FacultyElm[] = [];
+
+  constructor(
+    private dialogRef: MatDialogRef<AddForm>,
+    private departmentService: DepartmentService,
+    private facultyService: FacultyService,
+    private translate: TranslateService
+  ) {}
+
+  ngOnInit(): void {
+    this.facultyService.getFaculties().subscribe({
+      next: (data) => {
+        this.faculties = data;
+      },
+      error: (err) => console.error('Failed to load faculties', err),
+    });
+  }
+
+  protected save(): void {
+    if (this.form.invalid) {
+      this.form.markAllAsTouched();
+      return;
+    }
+
+    const { departmentName, facultyId } = this.form.getRawValue();
+
+    this.departmentService
+      .createDepartment({
+        departmentName: departmentName.trim(),
+        facultyId,
+      })
+      .subscribe({
+        next: () => {
+          this.dialogRef.close(true);
+        },
+        error: () => alert(this.translate.instant('department.create-error')),
+      });
+  }
+}

uniplanWeb/src/app/features/department/department-delete-form/department-delete-form.html

@@ -0,0 +1,8 @@
+<app-delete-form (deleteClicked)="deleteDepartment()">
+    <mat-dialog-content>
+        <p>
+          {{'department.delete-confirmation' | translate }}
+            <strong>{{ data.departmentName }}</strong>?
+        </p>
+    </mat-dialog-content>
+</app-delete-form>

uniplanWeb/src/app/features/department/department-delete-form/department-delete-form.spec.ts

@@ -0,0 +1,18 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DepartmentDeleteForm } from './department-delete-form';
+
+describe('DepartmentDeleteForm', () => {
+  let component: DepartmentDeleteForm;
+  let fixture: ComponentFixture<DepartmentDeleteForm>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DepartmentDeleteForm],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DepartmentDeleteForm);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+});

uniplanWeb/src/app/features/department/department-delete-form/department-delete-form.ts

@@ -0,0 +1,36 @@
+import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {DeleteForm} from '../../../core/shared/delete-form/delete-form';
+import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef,} from '@angular/material/dialog';
+import {DepartmentService} from '../department-service';
+import {TranslatePipe, TranslateService} from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-department-delete-form',
+  imports: [DeleteForm, MatDialogModule, TranslatePipe],
+  templateUrl: './department-delete-form.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
+  styleUrl: './department-delete-form.scss',
+})
+export class DepartmentDeleteForm {
+  constructor(
+    private departmentService: DepartmentService,
+    private dialogRef: MatDialogRef<DepartmentDeleteForm>,
+    private translate: TranslateService,
+    @Inject(MAT_DIALOG_DATA)
+    public data: { id: string; departmentName: string }
+  ) {
+  }
+
+  protected deleteDepartment(): void {
+    this.departmentService
+      .deleteDepartment(this.data.id)
+      .subscribe({
+        next: () => {
+          this.dialogRef.close(true);
+        },
+        error: () => {
+          alert(this.translate.instant('department.delete-error'));
+        },
+      });
+  }
+}

uniplanWeb/src/app/features/department/department-edit-form/department-edit-form.html

@@ -0,0 +1,29 @@
+<app-edit-form  [title]="'department.edit.title' | translate"  (saveClicked)="save()">
+
+  <div [formGroup]="form">
+
+    <mat-form-field appearance="fill">
+      <mat-label>{{ 'features.name-label' | translate }}</mat-label>
+      <input matInput formControlName="departmentName" />
+      @if (form.controls.departmentName.hasError('required')) {
+        <mat-error>{{ 'shared.required-field' | translate }}</mat-error>
+      }
+    </mat-form-field>
+
+    <mat-form-field appearance="fill">
+      <mat-label>{{ 'features.faculty-label' | translate }}</mat-label>
+      <mat-select formControlName="facultyId">
+        @for (fac of faculties; track fac) {
+          <mat-option [value]="fac.id">
+            {{ fac.facultyName }}
+          </mat-option>
+        }
+      </mat-select>
+      @if (form.controls.facultyId.hasError('required')) {
+        <mat-error>{{ 'shared.required-field' | translate }}</mat-error>
+      }
+    </mat-form-field>
+
+  </div>
+
+</app-edit-form>