Feature/#598 course detail

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Added an account activation resend feature. [#601](https://github.com/h-da/geli/issues/601)
 - Added `SnackBarService` as wrapper for `MatSnackBar`. [#574](https://github.com/h-da/geli/issues/574)
 - Added new course & user API unit tests. [#654](https://github.com/h-da/geli/issues/654) [#691](https://github.com/h-da/geli/issues/691)
+- Added details of courseAdmin and teacher to course detail view. on click profiles are shown.[#598] (https://github.com/h-da/geli/issues/598)
 
 ### Changed
 - Refactored or slightly altered various course & user related APIs. [#654](https://github.com/h-da/geli/issues/654) [#691](https://github.com/h-da/geli/issues/691)
@@ -32,7 +33,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Fixed multiple severe course related security issues. [#594](https://github.com/h-da/geli/issues/594) [#653](https://github.com/h-da/geli/issues/653) [#691](https://github.com/h-da/geli/issues/691)
 - Updated the dependencies for security. [#661](https://github.com/h-da/geli/issues/661)
 
-
 ## [0.6.0] - 2018-03-31 - Introduces MediaManager and some minor changes
 ### Added
 - MediaManager for file management in courses

app/webFrontend/src/app/course/course-detail/course-detail.component.html

@@ -1,8 +1,31 @@
 <div class="course-header">
-  <button mat-icon-button color="primary" (click)= "openDownloadDialog()" class="download-button">
+  <button mat-icon-button color="primary" (click)="openDownloadDialog()" class="download-button">
     <mat-icon aria-label="Download Units" mat-tooltip="Download Units">get_app</mat-icon>
   </button>
   <h1>{{course?.name}}</h1>
+
+  <mat-chip-list>
+    <mat-chip style="cursor:pointer" (click)="showUserProfile(course?.courseAdmin)">
+      <div class="img-wrapper">
+        <div class="admin-image" [user-image]="course?.courseAdmin"></div>
+      </div>
+      <div class="admin-name">
+        {{course?.courseAdmin.profile.firstName + " " + course?.courseAdmin.profile.lastName}} <br>
+        <i>Admin</i>
+      </div>
+    </mat-chip>
+    <div *ngFor="let teacher of course?.teachers">
+      <mat-chip style="cursor:pointer" (click)="showUserProfile(teacher)">
+        <div class="img-wrapper">
+          <div class="teacher-image" [user-image]="teacher"></div>
+        </div>
+        <div class="teacher-name">
+          {{teacher.profile.firstName + " " + teacher.profile.lastName}} <br>
+          <i>Teacher</i>
+        </div>
+      </mat-chip>
+    </div>
+  </mat-chip-list>
   <p>{{course?.description}}</p>
 </div>
 <div class="lectures" *ngIf="course">

app/webFrontend/src/app/course/course-detail/course-detail.component.scss

@@ -10,3 +10,45 @@
 .course-header {
   display: block;
 }
+
+.mat-chip-list {
+  display: inline-block;
+  margin-left: 5px;
+}
+
+.mat-chip {
+  position: relative;
+  cursor: pointer;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  margin-right: 20px;
+}
+
+.img-wrapper {
+  left: -10px;
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  border-radius: 50%;
+
+}
+
+.teacher-name{
+  margin-left: 35px;
+  text-align: center;
+}
+
+.teacher-image {
+  background-size: cover;
+  vertical-align: middle;
+}
+
+.admin-name{
+  margin-left: 35px;
+  text-align: center;
+}
+
+.admin-image {
+  background-size: cover;
+  vertical-align: middle;
+}

app/webFrontend/src/app/course/course-detail/course-detail.component.ts

@@ -4,10 +4,14 @@ import 'rxjs/add/operator/switchMap';
 import {CourseService, UserDataService} from '../../shared/services/data.service';
 import {ICourse} from '../../../../../../shared/models/ICourse';
 import {UserService} from '../../shared/services/user.service';
+import {IUser} from '../../../../../../shared/models/IUser';
+import {User} from '../../models/User';
 import {MatSnackBar, MatDialog} from '@angular/material';
 import {DownloadCourseDialogComponent} from './download-course-dialog/download-course-dialog.component';
 import {TitleService} from '../../shared/services/title.service';
 import {LastVisitedCourseContainerUpdater} from '../../shared/utils/LastVisitedCourseContainerUpdater';
+import {DialogService} from '../../shared/services/dialog.service';
+
 
 @Component({
   selector: 'app-course-detail',
@@ -17,7 +21,6 @@ import {LastVisitedCourseContainerUpdater} from '../../shared/utils/LastVisitedC
 export class CourseDetailComponent implements OnInit {
 
   course: ICourse;
-
   id: string;
 
   constructor(private router: Router,
@@ -27,7 +30,8 @@ export class CourseDetailComponent implements OnInit {
               private snackBar: MatSnackBar,
               private dialog: MatDialog,
               private titleService: TitleService,
-              private userDataService: UserDataService) {
+              private userDataService: UserDataService,
+              private dialogService: DialogService) {
   }
 
   ngOnInit() {
@@ -61,4 +65,9 @@ export class CourseDetailComponent implements OnInit {
       width: '800px'
     });
   }
+
+  showUserProfile(teacher: User) {
+    this.dialogService.userProfile(teacher);
+  }
+
 }

app/webFrontend/src/app/course/course.module.ts

@@ -14,9 +14,10 @@ import {LectureCheckboxComponent} from './course-detail/download-course-dialog/d
 import {UnitCheckboxComponent} from './course-detail/download-course-dialog/downloadCheckBoxes/unit-checkbox.component';
 import {UploadUnitCheckboxComponent} from './course-detail/download-course-dialog/downloadCheckBoxes/upload-unit-checkbox.component';
 import {DuplicationService, ExportService, ImportService} from '../shared/services/data.service';
+import {DialogService} from '../shared/services/dialog.service';
 import {SaveFileService} from '../shared/services/save-file.service';
 import {ReportModule} from '../report/report.module';
-import {RouterOutlet} from '@angular/router';
+
 
 @NgModule({
   imports: [
@@ -47,6 +48,7 @@ import {RouterOutlet} from '@angular/router';
     ExportService,
     DuplicationService,
     SaveFileService,
+    DialogService
   ],
   exports: [
     CourseComponent,

app/webFrontend/src/app/shared/directives/user-image.directive.ts

@@ -1,4 +1,4 @@
-import {Directive, HostBinding, Input, OnInit} from '@angular/core';
+import {Directive, HostBinding, Input, OnInit, SimpleChange} from '@angular/core';
 import {User} from '../../models/User';
 import {IUser} from '../../../../../../shared/models/IUser';
 
@@ -23,12 +23,28 @@ export class UserImageDirective implements OnInit {
   constructor() {
   }
 
+  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
+    for (const propName in changes) {
+      if (changes.hasOwnProperty(propName)) {
+        const changedProp = changes[propName];
+        this[propName] = changedProp.currentValue;
+      }
+    }
+    this.getImage();
+  }
+
   ngOnInit(): void {
-    const user = new User(this.user);
-    this.backgroundImage = `url(${user.getUserImageURL()})`;
-    this.width = this.size;
-    this.height = this.size;
-    this.borderRadius = '50%';
+    this.getImage();
+  }
+
+  getImage() {
+    if (this.user) {
+      const user = new User(this.user);
+      this.backgroundImage = `url(${user.getUserImageURL()})`;
+      this.width = this.size;
+      this.height = this.size;
+      this.borderRadius = '50%';
+    }
   }
 
 }

app/webFrontend/src/app/shared/modules/material-import.module.ts

@@ -9,7 +9,7 @@ import {
   MatProgressBarModule, MatRadioModule,
   MatSelectModule, MatSlideToggleModule,
   MatSnackBarModule, MatTabsModule,
-  MatToolbarModule, MatTooltipModule, MatExpansionModule, DateAdapter, MatProgressSpinnerModule
+  MatToolbarModule, MatTooltipModule, MatExpansionModule, DateAdapter, MatProgressSpinnerModule, MatChipsModule
 } from '@angular/material';
 import {CustomDateAdapter} from '../classes/CustomDateAdapter';
 
@@ -37,6 +37,7 @@ import {CustomDateAdapter} from '../classes/CustomDateAdapter';
     MatToolbarModule,
     MatTooltipModule,
     MatProgressSpinnerModule,
+    MatChipsModule,
   ],
   exports: [
     MatAutocompleteModule,
@@ -61,6 +62,7 @@ import {CustomDateAdapter} from '../classes/CustomDateAdapter';
     MatToolbarModule,
     MatTooltipModule,
     MatProgressSpinnerModule,
+    MatChipsModule,
   ],
   providers: [
     {provide: DateAdapter, useClass: CustomDateAdapter},