issue-157, bug fixed, seo optimization

ui/src/app/admin/admin.component.ts

@@ -1,15 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {Title} from '@angular/platform-browser';
 
 @Component({
   selector: 'app-admin',
   templateUrl: './admin.component.html',
-  styleUrls: ['./admin.component.sass']
+  styleUrls: ['./admin.component.sass'],
 })
 export class AdminComponent implements OnInit {
-
-  constructor() { }
+  constructor(private titleService: Title) {}
 
   ngOnInit(): void {
+    this.titleService.setTitle('Admin panel');
   }
-
 }

ui/src/app/admin/groups-management/group-update.html

@@ -1,28 +1,28 @@
 <mat-form-field appearance="fill">
   <mat-label>Specialisation:</mat-label>
-  <mat-select #spec>
-    <mat-option [value]="spec" *ngFor="let spec of specialisations">{{ spec }} </mat-option>
+  <mat-select #spec cdkFocusInitial>
+    <mat-option [value]="spec" *ngFor="let spec of specialisations; trackBy: trackById">{{ spec }} </mat-option>
   </mat-select>
 </mat-form-field>
 
 <mat-form-field appearance="fill">
   <mat-label>Year of education:</mat-label>
   <mat-select #year>
-    <mat-option [value]="year" *ngFor="let year of yearsOfEducation">{{ year }} </mat-option>
+    <mat-option [value]="year" *ngFor="let year of yearsOfEducation; trackBy: trackById">{{ year }} </mat-option>
   </mat-select>
 </mat-form-field>
 
 <mat-form-field appearance="fill">
   <mat-label>Group number:</mat-label>
   <mat-select #groupNum>
-    <mat-option [value]="num" *ngFor="let num of groupNums">{{ num }} </mat-option>
+    <mat-option [value]="num" *ngFor="let num of groupNums; trackBy: trackById">{{ num }} </mat-option>
   </mat-select>
 </mat-form-field>
 
 <mat-form-field appearance="fill">
   <mat-label>Curator:</mat-label>
   <mat-select #curator>
-    <mat-option [value]="lecturer" *ngFor="let lecturer of lecturers"
+    <mat-option [value]="lecturer" *ngFor="let lecturer of lecturers; trackBy: trackById"
       >{{ lecturer.firstName }} {{ lecturer.lastName }} {{ lecturer.surname }}
     </mat-option>
   </mat-select>

ui/src/app/admin/groups-management/groups-management.component.html

@@ -9,14 +9,14 @@
   </mat-toolbar>
 
   <mat-accordion>
-    <mat-expansion-panel *ngFor="let group of groups; let id = index">
+    <mat-expansion-panel *ngFor="let group of groups; let id = index; trackBy: trackById">
       <mat-expansion-panel-header>
         <mat-panel-title style="width: 5%;">
           <b> {{ group.specialisation }}-{{ group.yearOfEducation }}{{ group.groupNumber }} </b>
         </mat-panel-title>
 
         <mat-panel-title style="width: 10%;">
-          <b>Students in group: {{ group.students.length }}</b>
+          <b>Students in group: {{ group.students.length ? group.students.length : 0 }}</b>
         </mat-panel-title>
 
         <mat-panel-title style="width: 70%;">

ui/src/app/admin/groups-management/groups-management.component.ts

@@ -68,9 +68,11 @@ export class GroupsManagementComponent implements OnInit {
     });
 
     dialogRef.afterClosed().subscribe(result => {
-      if (result.length) {
-        group.students = group.students.concat(result);
-        this.updateGroup(group, id);
+      if (result) {
+        if (result.length) {
+          group.students = group.students.concat(result);
+          this.updateGroup(group, id);
+        }
       }
     });
   }
@@ -137,21 +139,21 @@ export class GroupsManagementComponent implements OnInit {
 
     dialogRef.afterClosed().subscribe(result => {
       if (result) {
-        let newGroup = {
+        const newGroup = {
           specialisation: result[0],
           yearOfEducation: result[1],
           groupNumber: result[2],
           curator: result[3],
         } as Group;
 
-        const dialogRef = this.dialog.open(SelectUserDialogComponent, {
+        const dialogRef2 = this.dialog.open(SelectUserDialogComponent, {
           width: '80%',
           data: {query: '?role=student'},
         });
 
-        dialogRef.afterClosed().subscribe(result => {
-          if (result) {
-            newGroup.students = result;
+        dialogRef2.afterClosed().subscribe(result2 => {
+          if (result2) {
+            newGroup.students = result2;
           }
           this.createGroup(newGroup);
         });
@@ -175,6 +177,10 @@ export class GroupsManagementComponent implements OnInit {
       this.dataSource[id].filter = filterValue.trim().toLowerCase();
     }
   }
+
+  trackById(index, item) {
+    return item.id;
+  }
 }
 
 // ---------------------------------------select user-------------------------
@@ -183,7 +189,7 @@ export class GroupsManagementComponent implements OnInit {
   selector: 'app-select-users-dialog',
   templateUrl: 'user-list.html',
 })
-export class SelectUserDialogComponent {
+export class SelectUserDialogComponent implements OnInit {
   @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
 
   users: UserAsResource[];
@@ -261,7 +267,7 @@ export class SelectUserDialogComponent {
   selector: 'app-update-group-dialog',
   templateUrl: 'group-update.html',
 })
-export class GroupUpdateDialogComponent {
+export class GroupUpdateDialogComponent implements OnInit {
   @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
 
   lecturers: UserAsResource[];
@@ -278,8 +284,8 @@ export class GroupUpdateDialogComponent {
   ngOnInit(): void {
     this.getLecturers();
     this.getSpecialisations();
-    this.yearsOfEducation = this.yearsOfEducation.filter(y => y != this.data.yearOfEducation);
-    this.groupNums = this.groupNums.filter(y => y != this.data.groupNum);
+    this.yearsOfEducation = this.yearsOfEducation.filter(y => y !== this.data.yearOfEducation);
+    this.groupNums = this.groupNums.filter(y => y !== this.data.groupNum);
   }
 
   getLecturers(): void {
@@ -301,4 +307,8 @@ export class GroupUpdateDialogComponent {
   onNoClick(): void {
     this.dialogRef.close();
   }
+
+  trackById(index, item) {
+    return item.id;
+  }
 }

ui/src/app/admin/groups-management/groups-management.service.ts

@@ -21,19 +21,19 @@ export class GroupsManagementService {
     return this.http.get<Group[]>(this.GroupsUrl);
   }
 
-  addGroups(Group: Group): Observable<Group> {
+  addGroups(group: Group): Observable<Group> {
     console.log('added');
-    return this.http.post<Group>(this.GroupsUrl, Group, this.httpOptions);
+    return this.http.post<Group>(this.GroupsUrl, group, this.httpOptions);
   }
 
   updateGroup(group: Group): Observable<Group> {
     console.log('updated');
     return this.http.put<Group>(this.GroupsUrl, group, this.httpOptions);
   }
 
-  deleteGroups(Group: Group): Observable<Group> {
+  deleteGroups(group: Group): Observable<Group> {
     console.log('deleted');
-    const url = `api/fullGroups/${Group.id}`;
+    const url = `api/fullGroups/${group.id}`;
     return this.http.delete<Group>(url, this.httpOptions);
   }
 

ui/src/app/admin/resources-management/resources-management.component.html

@@ -3,7 +3,7 @@
   <button mat-raised-button class="btn" color="primary" (click)="updateResources()">Submit changes</button>
   <button mat-raised-button class="btn" color="warn" (click)="deleteResources()">Delete</button>
 </mat-toolbar>
-<mat-card class="resource" *ngFor="let res of resources">
+<mat-card class="resource" *ngFor="let res of resources; trackBy: trackById">
   <div class="shadow">
     <div class="checkbox">
       <mat-checkbox color="primary" (change)="selectUnselectResource(res)"></mat-checkbox>

ui/src/app/admin/resources-management/resources-management.component.ts

@@ -102,12 +102,12 @@ export class ResourcesManagementComponent implements OnInit {
     dialogRef.afterClosed().subscribe(result => {
       if (result) {
         newResource.resourceName = result;
-        const dialogRef = this.dialog.open(AddRoleDialogComponent, {
+        const dialogRef2 = this.dialog.open(AddRoleDialogComponent, {
           width: '300px',
           data: {message: 'Description of resource:'},
         });
 
-        dialogRef.afterClosed().subscribe(description => {
+        dialogRef2.afterClosed().subscribe(description => {
           if (description) {
             newResource.resourceDescription = description;
           }
@@ -128,6 +128,10 @@ export class ResourcesManagementComponent implements OnInit {
       this.selectedResources.push(resource);
     }
   }
+
+  trackById(index, item) {
+    return item.id;
+  }
 }
 
 @Component({

ui/src/app/admin/resources-management/resources.service.ts

@@ -20,19 +20,19 @@ export class ResourcesService {
     return this.http.get<Resource[]>(this.resourcesUrl);
   }
 
-  addResources(Resource: Resource): Observable<Resource> {
+  addResources(resource: Resource): Observable<Resource> {
     console.log('added');
-    return this.http.post<Resource>(this.resourcesUrl, Resource, this.httpOptions);
+    return this.http.post<Resource>(this.resourcesUrl, resource, this.httpOptions);
   }
 
-  deleteResources(Resource: Resource): Observable<Resource> {
+  deleteResources(resource: Resource): Observable<Resource> {
     console.log('deleted');
-    const url = `api/Resources/${Resource.resourceId}`;
+    const url = `api/Resources/${resource.resourceId}`;
     return this.http.delete<Resource>(url, this.httpOptions);
   }
 
-  updateResources(Resource): Observable<Resource> {
+  updateResources(resource): Observable<Resource> {
     console.log('updated');
-    return this.http.put<Resource>(this.resourcesUrl, Resource, this.httpOptions);
+    return this.http.put<Resource>(this.resourcesUrl, resource, this.httpOptions);
   }
 }

ui/src/app/admin/roles/add-role.html

@@ -1,7 +1,7 @@
 <h1 mat-dialog-title style="width: 100%; text-align: center;">{{data.message}}</h1>
 <div mat-dialog-content style="display: flex; align-items: center; justify-content: center;">
   <mat-form-field>
-    <input matInput [(ngModel)]="name" />
+    <input matInput [(ngModel)]="name" cdkFocusInitial />
   </mat-form-field>
 </div>
 <div mat-dialog-actions style="float: right;">

ui/src/app/admin/roles/roles.component.html

@@ -9,7 +9,7 @@
   </mat-toolbar>
 
   <mat-accordion>
-    <mat-expansion-panel *ngFor="let role of roles">
+    <mat-expansion-panel *ngFor="let role of roles; trackBy: trackById">
       <mat-expansion-panel-header>
         <mat-panel-title style="width: 20%;">
           {{ role.name }}
@@ -34,7 +34,7 @@
       </mat-expansion-panel-header>
 
       <div class="fullInfo">
-        <div *ngFor="let feature of role.entries" class="permission">
+        <div *ngFor="let feature of role.entries; trackBy: trackById" class="permission">
           <div class="permissionName">{{ feature.name }}</div>
           <div class="permissionDescription">{{ feature.description }}</div>
           <a class="delPermission" (click)="deleteFeatureInRole(role, feature)">DELETE</a>

ui/src/app/admin/roles/roles.component.ts

@@ -133,6 +133,10 @@ export class RolesComponent implements OnInit {
       }
     });
   }
+
+  trackById(index, item) {
+    return item.id;
+  }
 }
 
 @Component({
@@ -155,6 +159,10 @@ export class SelectFeatureDialogComponent {
   onNoClick(): void {
     this.dialogRef.close();
   }
+
+  trackById(index, item) {
+    return item.id;
+  }
 }
 
 @Component({

ui/src/app/admin/roles/select-feature.html

@@ -1,7 +1,7 @@
 <h1 mat-dialog-title>Select new features</h1>
 <div mat-dialog-content>
   <mat-accordion>
-    <mat-expansion-panel *ngFor="let feature of data.features;let i = index">
+    <mat-expansion-panel *ngFor="let feature of data.features;let i = index; trackBy: trackById;">
       <mat-expansion-panel-header>
         <mat-panel-title>
           <mat-checkbox color="primary" (change)="selectUnselectFeature(feature)">Select</mat-checkbox>
@@ -22,7 +22,7 @@ <h1 mat-dialog-title>Select new features</h1>
         <div style="width: 30%; float: left;">Method</div>
       </div>
 
-      <div *ngFor="let endpoint of feature.endpoints" style="width: 100%; float: left;">
+      <div *ngFor="let endpoint of feature.endpoints; trackBy: trackById;" style="width: 100%; float: left;">
         <div style="width: 30%; float: left;">{{endpoint.name}}</div>
         <div style="width: 30%; float: left;">{{endpoint.path}}</div>
         <div style="width: 30%; float: left;">{{endpoint.method}}</div>

ui/src/app/admin/users-management/users-management.component.ts

@@ -144,11 +144,11 @@ export class UsersManagementComponent implements OnInit {
     }
   }
 
-  selectUnselectUser(User: User): void {
-    if (this.selectedUsers.find(u => u === User)) {
-      this.selectedUsers = this.selectedUsers.filter(u => u !== User);
+  selectUnselectUser(user: User): void {
+    if (this.selectedUsers.find(u => u === user)) {
+      this.selectedUsers = this.selectedUsers.filter(u => u !== user);
     } else {
-      this.selectedUsers.push(User);
+      this.selectedUsers.push(user);
     }
   }
 

ui/src/app/admin/users-management/users.service.ts

@@ -20,14 +20,14 @@ export class UsersService {
     return this.http.get<User[]>(`${this.UsersUrl}${query}`);
   }
 
-  addUsers(User: User): Observable<User> {
+  addUsers(user: User): Observable<User> {
     console.log('added');
-    return this.http.post<User>(this.UsersUrl, User, this.httpOptions);
+    return this.http.post<User>(this.UsersUrl, user, this.httpOptions);
   }
 
-  deleteUsers(User: User): Observable<User> {
+  deleteUsers(user: User): Observable<User> {
     console.log('deleted');
-    const url = `api/fullUsers/${User.userId}`;
+    const url = `api/fullUsers/${user.userId}`;
     return this.http.delete<User>(url, this.httpOptions);
   }
 }

ui/src/app/error-page/error-page.component.ts

@@ -1,15 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {Title} from '@angular/platform-browser';
 
 @Component({
   selector: 'app-error-page',
   templateUrl: './error-page.component.html',
-  styleUrls: ['./error-page.component.sass']
+  styleUrls: ['./error-page.component.sass'],
 })
 export class ErrorPageComponent implements OnInit {
-
-  constructor() { }
+  constructor(private titleService: Title) {}
 
   ngOnInit(): void {
+    this.titleService.setTitle('Oops, something went wrong');
   }
-
 }