Add course alias and custom titles for components

backend/src/models/course.model.ts

@@ -1,4 +1,4 @@
-import { Entity, model, property, belongsTo, hasMany } from '@loopback/repository';
+import { belongsTo, Entity, hasMany, model, property } from '@loopback/repository';
 import { Subject } from './subject.model';
 import { User } from './user.model';
 import { CourseUser } from './course-user.model';
@@ -19,6 +19,12 @@ export class Course extends Entity {
     })
     semester: string;
 
+    @property({
+        type: 'string',
+        required: true,
+    })
+    alias: string;
+
     @belongsTo(() => Subject)
     subjectId: number;
 

frontend/src/app/app.component.html

@@ -35,7 +35,7 @@
     </mat-toolbar>
     <div style="margin: 20px">
       <!-- <mat-slider min="1" max="100" step="1" value="1"></mat-slider> -->
-      <router-outlet></router-outlet>
+      <router-outlet (activate)="routeActivated($event)"></router-outlet>
     </div>
   </mat-sidenav-content>
 </mat-sidenav-container>

frontend/src/app/app.component.ts

@@ -31,6 +31,8 @@ export class AppComponent implements OnInit {
 
   pageTitle: string;
 
+  private activeRouteTitle: string;
+
   constructor(private breakpointObserver: BreakpointObserver, public loginService: LoginService, private api: ApiService,
               private router: Router, private login: LoginService, private activeRoute: ActivatedRoute,
               private title: Title) {
@@ -102,7 +104,11 @@ export class AppComponent implements OnInit {
         this.pageTitle = 'Szakdolgozat';
         return this.title.setTitle('Szakdolgozat');
       }
-      let pageTitle = routeParts.reverse().map(part => part.title).reduce((partA, partI) => `${partA} > ${partI}`);
+      const titleParts = routeParts.reverse().map(part => part.title);
+      if (this.activeRouteTitle) {
+        titleParts[titleParts.length - 1] = this.activeRouteTitle;
+      }
+      let pageTitle = titleParts.reduce((partA, partI) => `${partA} > ${partI}`);
       this.pageTitle = pageTitle;
       pageTitle += ` | Szakdolgozat`;
       this.title.setTitle(pageTitle);
@@ -117,7 +123,24 @@ export class AppComponent implements OnInit {
   getMenuItems(): MenuItem[] {
     return this.menu.filter(item => item.requiredRole === 'admin' ? this.login.user?.isAdmin : true); // TODO: Roles
   }
+
+  routeActivated($event: any): void {
+    if (this.isCustomTitleComponent($event)) {
+      this.activeRouteTitle = $event.getPageTitle();
+    } else {
+      this.activeRouteTitle = null;
+    }
+  }
+
+  isCustomTitleComponent(obj: any): obj is CustomTitleComponent {
+    return obj?.getPageTitle instanceof Function;
+  }
+
 }
 
 type MenuItem = { path: string, requiredRole: UserRole | 'admin', title?: string };
 type RouteSegment = { title: string, url: string };
+
+export interface CustomTitleComponent {
+  getPageTitle(): string;
+}

frontend/src/app/model/course.model.ts

@@ -3,4 +3,5 @@ import { Model } from './model';
 export class Course extends Model {
   semester: string;
   subjectId: number;
+  alias: string;
 }

frontend/src/app/shared-components/list/list.component.ts

@@ -37,10 +37,11 @@ export class ListComponent<T extends Model> implements OnInit {
   async getItems(limit: number, page: number): Promise<void> {
     try {
       this.loading = true;
-      const total = await this.api.requestItemCount(this.apiPath);
+      if (!this.paginationData.total) {
+        this.paginationData.total = await this.api.requestItemCount(this.apiPath);
+      }
       this.paginationData.page = page;
       this.paginationData.limit = limit;
-      this.paginationData.total = total;
       this.items = await this.api.requestPage<T>(this.apiPath, limit, page);
     } finally {
       this.loading = false;
@@ -53,6 +54,6 @@ export class ListComponent<T extends Model> implements OnInit {
   }
 
   async newItem(): Promise<void> {
-   await this.router.navigate([this.router.url, 'new']);
+    await this.router.navigate([this.router.url, 'new']);
   }
 }

frontend/src/app/subjects/subject-edit/courses/course-edit/course-edit.component.html

@@ -1,3 +1,4 @@
 <app-edit #edit [itemType]="itemType" apiPath="/courses" [beforeSubmit]="beforeSubmit" [fields]="[
-  {title: 'Félév', name: 'semester'}
+  {title: 'Félév', name: 'semester'},
+  {title: 'Név', name: 'alias'}
 ]"></app-edit>

frontend/src/app/subjects/subject-edit/courses/course-list/course-list.component.html

@@ -1,3 +1,4 @@
-<app-list [apiPath]="'/subjects/'+subjectId+'/courses'" [itemType]="itemType" allowNew="true" [columns]="[
- {prop: 'semester', title: 'Félév'}
+<app-list #list [apiPath]="'/subjects/'+subjectId+'/courses'" [itemType]="itemType" allowNew="true" [columns]="[
+ {prop: 'semester', title: 'Félév'},
+ {prop: 'alias', title: 'Név'}
 ]"></app-list>

frontend/src/app/subjects/subject-edit/courses/course-list/course-list.component.ts

@@ -1,15 +1,18 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Course } from '../../../../model/course.model';
+import { ListComponent } from '../../../../shared-components/list/list.component';
+import { CustomTitleComponent } from '../../../../app.component';
 
 @Component({
   selector: 'app-courses',
   templateUrl: './course-list.component.html',
   styleUrls: ['./course-list.component.css']
 })
-export class CourseListComponent implements OnInit {
+export class CourseListComponent implements OnInit, CustomTitleComponent {
   subjectId: string;
   itemType = Course;
+  @ViewChild('list') list: ListComponent<Course>;
 
   constructor(route: ActivatedRoute) {
     this.subjectId = route.snapshot.params.subjectId;
@@ -18,4 +21,7 @@ export class CourseListComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  getPageTitle(): string {
+    return 'Custom title'; //TODO
+  }
 }

frontend/src/app/subjects/subjects.module.ts

@@ -12,7 +12,7 @@ const routes: Routes = [
   {path: '', component: SubjectListComponent, data: {title: 'Tárgyak'} as RouteData},
   {path: ':id', component: SubjectEditComponent, data: {title: 'Szerkesztés'}},
   {
-    path: ':subjectId/courses', children: [
+    path: ':subjectId/courses', data: {title: 'Kurzusok'}, children: [
       {path: ':id', component: CourseEditComponent, data: {title: 'Szerkesztés'} as RouteData},
       {path: '', component: CourseListComponent, data: {title: 'Kurzusok'}}
     ]

frontend/tslint.json

@@ -70,7 +70,8 @@
     ],
     "semicolon": {
       "options": [
-        "always"
+        "always",
+        "ignore-bound-class-methods"
       ]
     },
     "space-before-function-paren": {