Try to fix collection-selection - WIP

src/app/components/creator/content-creator/content-creator.component.html

@@ -12,8 +12,8 @@
   <input matInput #group matInput [formControl]="myControl" [matAutocomplete]="auto"
          value={{lastCollection}} placeholder="{{'content.collection' | translate}}"/>
   <mat-autocomplete #auto="matAutocomplete">
-    <mat-option *ngFor="let collection of filteredOptions | async" [value]="collection">
-      {{collection}}
+    <mat-option *ngFor="let collection of collections" [value]="collection">
+      {{collection.name}}
     </mat-option>
   </mat-autocomplete>
 </mat-form-field>

src/app/components/creator/content-creator/content-creator.component.ts

 import { Component, Inject, Input, OnInit } from '@angular/core';
 import { ContentText } from '../../../models/content-text';
 import { FormControl } from '@angular/forms';
-import { Observable } from 'rxjs/Observable';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material';
 import { ContentListComponent } from '../../shared/content-list/content-list.component';
-import { map, startWith } from 'rxjs/operators';
+import { Room } from '../../../models/room';
+import { RoomService } from '../../../services/http/room.service';
+import { ActivatedRoute } from '@angular/router';
+import { ContentGroup } from '../../../models/content-group';
+import { RoomPageComponent } from '../../shared/room-page/room-page.component';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'app-content-creator',
   templateUrl: './content-creator.component.html',
   styleUrls: ['./content-creator.component.scss']
 })
-export class ContentCreatorComponent implements OnInit {
+export class ContentCreatorComponent extends RoomPageComponent implements OnInit {
   @Input() format;
+  room: Room;
 
   content: ContentText = new ContentText(
     '1',
@@ -23,30 +28,32 @@ export class ContentCreatorComponent implements OnInit {
     1,
     [],
   );
-  collections: string[] = ['ARSnova', 'Angular', 'HTML', 'TypeScript'];
-  myControl = new FormControl();
-  filteredOptions: Observable<string[]>;
+  collections: ContentGroup[];
   lastCollection: string;
+  myControl = new FormControl();
 
   editDialogMode = false;
 
   constructor(public dialog: MatDialog,
               public dialogRef: MatDialogRef<ContentListComponent>,
+              protected roomService: RoomService,
+              protected route: ActivatedRoute,
+              protected location: Location,
               @Inject(MAT_DIALOG_DATA) public data: any) {
+    super(roomService, route, location);
   }
 
   ngOnInit() {
+    this.route.params.subscribe(params => {
+      this.getRoom(params['roomId']);
+    });
     this.lastCollection = sessionStorage.getItem('collection');
-    this.filteredOptions = this.myControl.valueChanges
-      .pipe(
-        startWith(''),
-        map(value => this._filter(value))
-      );
   }
 
-  private _filter(value: string): string[] {
-    const filterValue = value.toLowerCase();
-    return this.collections.filter(collection => collection.toLowerCase().includes(filterValue));
+  getRoom(id: string): void {
+    this.roomService.getRoomByShortId(id).subscribe(room => {
+      this.collections = room.contentGroups;
+    });
   }
 
   resetInputs() {

src/app/components/creator/room-creator-page/room-creator-page.component.ts

@@ -35,6 +35,7 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
     this.translateService.use(sessionStorage.getItem('currentLang'));
     this.route.params.subscribe(params => {
       this.getRoom(params['roomId']);
+      console.log(this.room.name);
     });
   }
 

src/app/components/shared/content-groups/content-groups.component.html

 
-    <mat-card *ngFor="let contentGroup of displayedContentGroups" (click)="viewContents(contentGroup)">
+    <mat-card *ngFor="let contentGroup of contentGroups" (click)="viewContents(contentGroup)">
       <mat-divider></mat-divider>
       <mat-card-header>
         <mat-card-title>

src/app/services/http/content.service.ts

@@ -5,6 +5,7 @@ import { Observable } from 'rxjs/Observable';
 import { catchError, tap } from 'rxjs/operators';
 import { BaseHttpService } from './base-http.service';
 import { ContentChoice } from '../../models/content-choice';
+import { ContentGroup } from '../../models/content-group';
 
 const httpOptions = {
   headers: new HttpHeaders({ 'Content-Type': 'application/json' })

src/app/services/http/room.service.ts

@@ -5,6 +5,8 @@ import { Observable } from 'rxjs/Observable';
 import { catchError, tap } from 'rxjs/operators';
 import { AuthenticationService } from './authentication.service';
 import { BaseHttpService } from './base-http.service';
+import { ContentGroup } from '../../models/content-group';
+import { Content } from '../../models/content';
 
 const httpOptions = {
   headers: new HttpHeaders({})
@@ -63,6 +65,14 @@ export class RoomService extends BaseHttpService {
     );
   }
 
+  getContentGroups(id: string): Observable<ContentGroup[]> {
+    const connectionUrl = `${ this.apiUrl.base +  this.apiUrl.rooms }/${ id }`;
+    return this.http.get<ContentGroup[]>(connectionUrl).pipe(
+      tap(() => ''),
+      catchError(this.handleError<ContentGroup[]>(`getContentGroup keyword=${ id }`))
+    );
+  }
+
   getRoomByShortId(shortId: string): Observable<Room> {
     const connectionUrl = `${ this.apiUrl.base +  this.apiUrl.rooms }/~${ shortId }`;
     return this.http.get<Room>(connectionUrl).pipe(
@@ -93,6 +103,6 @@ export class RoomService extends BaseHttpService {
   }
 
   setRoomId(room: Room): void {
-    localStorage.setItem(`roomId`, room.id);
+    localStorage.setItem('roomId', room.id);
   }
 }