Program directors and areas responsibles (#76)

Author: mohamedalaaser

Client/environments/environment.ts

@@ -3,7 +3,7 @@ export const environment = {
   redirect: 'https://module.aet.cit.tum.de',
   serverUrl: 'https://module.aet.cit.tum.de',
   keycloak: {
-    url: ' https://keycloak.ase.in.tum.de/',
+    url: 'https://keycloak.ase.in.tum.de',
     realm: 'tum',
     clientId: 'module-management'
   }

Client/src/app/app.routes.ts

@@ -13,8 +13,10 @@ import { SimilarModulesPage } from './pages/similar-modules/similar-modules.comp
 import { AccountLayoutComponent } from './pages/account-management/account-layout/account-layout.component';
 import { AccountInformationComponent } from './pages/account-management/account-information/account-information.component';
 import { AccountPasskeysComponent } from './pages/account-management/passkeys/account-passkeys.component';
-import { AdminUsersPageComponent } from './pages/admin/users/admin-users-page.component';
-
+import { UsersPageComponent } from './pages/admin/users/users-page.component';
+import { AllDegreeProgramsPageComponent } from './pages/admin/degree-programs/all-degree-programs-page.component';
+import { DegreeProgramDetailsPageComponent } from './pages/admin/degree-programs/degree-program-details-page.component';
+import { AllSpecializationsPageComponent } from './pages/admin/degree-program-specializations/all-specializations-page.component';
 export const routes: Routes = [
   { path: '', component: IndexComponent },
   {
@@ -52,7 +54,10 @@ export const routes: Routes = [
     path: 'admin',
     canActivate: [AuthGuard, AdminGuard],
     children: [
-      { path: 'users', component: AdminUsersPageComponent },
+      { path: 'users', component: UsersPageComponent },
+      { path: 'degree-programs/specializations', component: AllSpecializationsPageComponent },
+      { path: 'degree-programs/:id', component: DegreeProgramDetailsPageComponent },
+      { path: 'degree-programs', component: AllDegreeProgramsPageComponent },
       { path: '', redirectTo: 'users', pathMatch: 'full' }
     ]
   }

Client/src/app/components/breadcrumb/breadcrumb-labels.service.ts

@@ -0,0 +1,14 @@
+import { Injectable, signal } from '@angular/core';
+
+/** Segment-specific breadcrumb labels. Pages set the relevant signal when they load data and set to null on destroy. */
+@Injectable({ providedIn: 'root' })
+export class BreadcrumbLabelsService {
+  /** Degree program details page: program name. */
+  readonly degreeProgramName = signal<string | null>(null);
+  /** Proposal/view segment: module title (e.g. from latestModuleVersion.titleEng). */
+  readonly proposalTitle = signal<string | null>(null);
+  /** Version segment: e.g. "Version 2" from moduleVersion.version. */
+  readonly versionLabel = signal<string | null>(null);
+  /** Feedback view segment: e.g. module title from the feedback's module version. */
+  readonly feedbackLabel = signal<string | null>(null);
+}

Client/src/app/components/breadcrumb/breadcrumb.component.ts

@@ -3,7 +3,7 @@ import { Router, RouterModule, NavigationEnd } from '@angular/router';
 import { filter } from 'rxjs/operators';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
 import type { MenuItem } from 'primeng/api';
-import { SecurityStore } from '../../core/security/security-store.service';
+import { BreadcrumbLabelsService } from './breadcrumb-labels.service';
 
 @Component({
   selector: 'app-breadcrumb',
@@ -13,7 +13,7 @@ import { SecurityStore } from '../../core/security/security-store.service';
 })
 export class BreadcrumbComponent {
   private router = inject(Router);
-  private securityStore = inject(SecurityStore);
+  private breadcrumbLabels = inject(BreadcrumbLabelsService);
 
   private url = signal(this.router.url);
 
@@ -27,15 +27,49 @@ export class BreadcrumbComponent {
 
   showBreadcrumb = computed(() => {
     const u = this.url();
-    return u.startsWith('/proposals') || u.startsWith('/feedbacks');
+    return u.startsWith('/proposals') || u.startsWith('/feedbacks') || u.startsWith('/admin');
   });
 
   private buildItems(url: string): MenuItem[] {
     if (url.startsWith('/proposals')) return this.buildProposalItems(url);
     if (url.startsWith('/feedbacks')) return this.buildFeedbackItems(url);
+    if (url.startsWith('/admin')) return this.buildAdminItems(url);
     return [];
   }
 
+  private buildAdminItems(url: string): MenuItem[] {
+    const segments = url.split('/').filter(Boolean); // ['admin', 'degree-programs', ...]
+    const items: MenuItem[] = [];
+
+    if (segments.length < 2) return items;
+
+    if (segments[1] === 'users') {
+      items.push({ label: 'Users', routerLink: ['/admin/users'] });
+      return items;
+    }
+
+    if (segments[1] === 'degree-programs') {
+      items.push({ label: 'Degree Programs', routerLink: ['/admin/degree-programs'] });
+      if (segments.length <= 2) return items;
+
+      if (segments[2] === 'specializations') {
+        items.push({ label: 'All areas of specializations', routerLink: ['/admin/degree-programs/specializations'] });
+        return items;
+      }
+
+      // degree-programs/:id (program details page) – label from details page when it loads the program
+      const programId = segments[2];
+      const name = (this.breadcrumbLabels.degreeProgramName() ?? '').trim() || `Program ${programId}`;
+      items.push({
+        label: name,
+        routerLink: ['/admin/degree-programs', programId]
+      });
+      return items;
+    }
+
+    return items;
+  }
+
   private buildProposalItems(url: string): MenuItem[] {
     const segments = url.split('/').filter(Boolean); // ['proposals', ...]
     const items: MenuItem[] = [];
@@ -53,17 +87,19 @@ export class BreadcrumbComponent {
 
     if (segments[1] === 'view' && segments[2]) {
       const proposalId = segments[2];
+      const proposalLabel = (this.breadcrumbLabels.proposalTitle() ?? '').trim() || `Proposal ${proposalId}`;
       items.push({
-        label: 'Proposal ' + proposalId,
+        label: proposalLabel,
         routerLink: ['/proposals/view', proposalId]
       });
 
       if (segments.length <= 3) return items;
 
       if (segments[3] === 'version' && segments[4]) {
         const versionId = segments[4];
+        const versionSegmentLabel = (this.breadcrumbLabels.versionLabel() ?? '').trim() || `Version ${versionId}`;
         items.push({
-          label: 'Version ' + versionId,
+          label: versionSegmentLabel,
           routerLink: ['/proposals/view', proposalId, 'version', versionId]
         });
 
@@ -97,7 +133,8 @@ export class BreadcrumbComponent {
     }
 
     if (segments[1] === 'view' && segments[2]) {
-      items.push({ label: 'Feedback ' + segments[2], routerLink: ['/feedbacks/view', segments[2]] });
+      const label = (this.breadcrumbLabels.feedbackLabel() ?? '').trim() || `Feedback ${segments[2]}`;
+      items.push({ label, routerLink: ['/feedbacks/view', segments[2]] });
     }
 
     if (segments[3] === 'overlap' && segments[4]) {

Client/src/app/components/create-edit-base/create-edit-base.component.html

@@ -511,7 +511,7 @@ <h1 class="text-2xl mb-8">{{ moduleVersionDto()?.titleEng ? 'Edit Proposal for '
 
     <div class="flex justify-between">
       <p-button (onClick)="goBack()" severity="secondary" [outlined]="true">Cancel</p-button>
-      <p-button type="submit" severity="contrast" [disabled]="proposalForm.invalid || loading">
+      <p-button type="submit" severity="contrast" [disabled]="proposalForm.invalid || loading()">
         {{ loading() ? 'Saving...' : moduleVersionDto() ? 'Update Proposal' : 'Create Proposal' }}
       </p-button>
     </div>

Client/src/app/components/side-bar/side-bar.component.html

@@ -9,6 +9,14 @@
         [style]="{ width: '100%' }"
         styleClass="sidebar-btn justify-start"
       />
+      <p-button
+        label="Degree Programs"
+        icon="pi pi-book"
+        [routerLink]="['/admin/degree-programs']"
+        [severity]="isActive('/admin/degree-programs') ? 'contrast' : 'secondary'"
+        [style]="{ width: '100%' }"
+        styleClass="sidebar-btn justify-start"
+      />
     }
     @if (isProfessor()) {
       <p-button

Client/src/app/components/users-select/users-select.component.html

@@ -0,0 +1,26 @@
+<p-select
+  [options]="userOptions()"
+  [ngModel]="value()"
+  (ngModelChange)="onValueChange($event)"
+  (onFilter)="onFilter($event)"
+  (onLazyLoad)="onLazyLoad($event)"
+  placeholder="Select user"
+  optionLabel="label"
+  optionValue="value"
+  [filter]="true"
+  [lazy]="true"
+  [virtualScroll]="true"
+  [virtualScrollItemSize]="40"
+  [loading]="loading()"
+  [class]="styleClass()"
+  appendTo="body"
+  scrollHeight="15rem"
+>
+  <ng-template pTemplate="footer">
+    @if (loading()) {
+      <div class="flex align-items-center justify-content-center">
+        <p-progress-spinner ariaLabel="Loading users" [style]="{ width: '1.5rem', height: '1.5rem' }" strokeWidth="4" />
+      </div>
+    }
+  </ng-template>
+</p-select>

Client/src/app/components/users-select/users-select.component.ts

@@ -0,0 +1,112 @@
+import { Component, inject, signal, computed, input } from '@angular/core';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import { SelectModule, SelectLazyLoadEvent } from 'primeng/select';
+import { Subject, debounceTime, distinctUntilChanged, firstValueFrom } from 'rxjs';
+import { AdminUserControllerService } from '../../core/modules/openapi';
+import type { UserDTO } from '../../core/modules/openapi/model/user-dto';
+import type { ResponsibleUserDTO } from '../../core/modules/openapi/model/responsible-user-dto';
+
+const USER_PAGE_SIZE = 20;
+const FILTER_DEBOUNCE_MS = 500;
+
+@Component({
+  selector: 'app-users-select',
+  standalone: true,
+  imports: [FormsModule, ProgressSpinnerModule, SelectModule],
+  templateUrl: './users-select.component.html',
+  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: UsersSelectComponent, multi: true }]
+})
+export class UsersSelectComponent implements ControlValueAccessor {
+  private readonly adminUserControllerService = inject(AdminUserControllerService);
+
+  private readonly filter$ = new Subject<string>();
+
+  styleClass = input<string>('');
+  /** When the selected user is not yet in the loaded list, pass this so they are displayed like other options. */
+  selectedUser = input<ResponsibleUserDTO | null>(null);
+
+  constructor() {
+    this.loadUsers();
+    this.filter$.pipe(debounceTime(FILTER_DEBOUNCE_MS), distinctUntilChanged()).subscribe((term) => {
+      this.searchTerm.set(term);
+      this.loadUsers(0);
+    });
+  }
+
+  value = signal<string | null>(null);
+  users = signal<UserDTO[]>([]);
+  totalRecords = signal(0);
+  loading = signal(false);
+  searchTerm = signal('');
+
+  private onTouched = () => {};
+  private onChange: (v: string | null) => void = () => {};
+
+  formatUserLabel(u: { firstName?: string; lastName?: string; email?: string; userId?: string }): string {
+    return `${u.firstName ?? ''} ${u.lastName ?? ''} (${u.email ?? u.userId ?? ''})`.trim() || String(u.userId ?? '');
+  }
+
+  userOptions = computed(() => {
+    const list = this.users().map((u) => ({
+      label: this.formatUserLabel(u),
+      value: u.userId
+    }));
+    const current = this.value();
+    if (current && !list.some((o) => o.value === current)) {
+      const u = this.selectedUser();
+      const label = u ? this.formatUserLabel(u) : current;
+      return [{ label, value: current }, ...list];
+    }
+    return list;
+  });
+
+  writeValue(v: string | null): void {
+    this.value.set(v);
+  }
+
+  registerOnChange(fn: (v: string | null) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  onValueChange(v: string | null): void {
+    this.value.set(v);
+    this.onChange(v);
+    this.onTouched();
+  }
+
+  async loadUsers(page = 0) {
+    if (this.loading()) return;
+    this.loading.set(true);
+    try {
+      const res = await firstValueFrom(this.adminUserControllerService.getUsers(page, USER_PAGE_SIZE, this.searchTerm().trim() || undefined));
+      this.totalRecords.set(res.totalElements ?? 0);
+      if (page === 0) {
+        this.users.set(res.content ?? []);
+      } else {
+        this.users.update((prev) => [...prev, ...(res.content ?? [])]);
+      }
+    } catch (e) {
+      this.users.set([]);
+      this.totalRecords.set(0);
+    } finally {
+      this.loading.set(false);
+    }
+  }
+
+  async onLazyLoad(event: SelectLazyLoadEvent): Promise<void> {
+    if (this.totalRecords() > 0 && this.users().length >= this.totalRecords()) return;
+    if (event.last < this.users().length) return;
+
+    const page = Math.floor(this.users().length / USER_PAGE_SIZE);
+    await this.loadUsers(page);
+  }
+
+  onFilter(event: { filter: string }): void {
+    this.filter$.next(event.filter ?? '');
+  }
+}

Client/src/app/core/modules/openapi/.openapi-generator/FILES

@@ -5,6 +5,10 @@ api.module.ts
 api/admin-user-controller.service.ts
 api/admin-user-controller.serviceInterface.ts
 api/api.ts
+api/degree-program-specializations-controller.service.ts
+api/degree-program-specializations-controller.serviceInterface.ts
+api/degree-programs-controller.service.ts
+api/degree-programs-controller.serviceInterface.ts
 api/feedback-controller.service.ts
 api/feedback-controller.serviceInterface.ts
 api/module-version-controller.service.ts
@@ -18,8 +22,13 @@ encoder.ts
 git_push.sh
 index.ts
 model/add-module-version-dto.ts
+model/add-specializations-to-degree-program-dto.ts
 model/completion-service-request-dto.ts
 model/completion-service-response-dto.ts
+model/create-degree-program-dto.ts
+model/create-degree-program-specialization-dto.ts
+model/degree-program-dto.ts
+model/degree-program-specialization-dto.ts
 model/feedback-dto.ts
 model/feedback-list-item-dto.ts
 model/feedback.ts
@@ -36,7 +45,10 @@ model/proposal-request-dto.ts
 model/proposal-view-dto.ts
 model/proposal.ts
 model/proposals-compact-dto.ts
+model/responsible-user-dto.ts
 model/similar-module-dto.ts
+model/update-degree-program-dto.ts
+model/update-degree-program-specialization-dto.ts
 model/update-user-role-dto.ts
 model/user-dto.ts
 model/user.ts

Client/src/app/core/modules/openapi/api/api.ts

@@ -1,6 +1,12 @@
 export * from './admin-user-controller.service';
 import { AdminUserControllerService } from './admin-user-controller.service';
 export * from './admin-user-controller.serviceInterface';
+export * from './degree-program-specializations-controller.service';
+import { DegreeProgramSpecializationsControllerService } from './degree-program-specializations-controller.service';
+export * from './degree-program-specializations-controller.serviceInterface';
+export * from './degree-programs-controller.service';
+import { DegreeProgramsControllerService } from './degree-programs-controller.service';
+export * from './degree-programs-controller.serviceInterface';
 export * from './feedback-controller.service';
 import { FeedbackControllerService } from './feedback-controller.service';
 export * from './feedback-controller.serviceInterface';
@@ -13,4 +19,4 @@ export * from './proposal-controller.serviceInterface';
 export * from './user-controller.service';
 import { UserControllerService } from './user-controller.service';
 export * from './user-controller.serviceInterface';
-export const APIS = [AdminUserControllerService, FeedbackControllerService, ModuleVersionControllerService, ProposalControllerService, UserControllerService];
+export const APIS = [AdminUserControllerService, DegreeProgramSpecializationsControllerService, DegreeProgramsControllerService, FeedbackControllerService, ModuleVersionControllerService, ProposalControllerService, UserControllerService];