add content groups to show in room view

src/app/app.module.ts

@@ -15,6 +15,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import {
   MAT_DIALOG_DATA,
   MatAutocompleteModule,
+  MatBadgeModule,
   MatButtonModule,
   MatButtonToggleModule,
   MatCardModule,
@@ -65,6 +66,7 @@ import { RoomParticipantPageComponent } from './components/pages/room-participan
 import { DataStoreService } from './services/util/data-store.service';
 import { RoomCreatorPageComponent } from './components/pages/room-creator-page/room-creator-page.component';
 import { ContentListComponent } from './components/fragments/content-list/content-list.component';
+import { ContentGroupsComponent } from './components/fragments/content-groups/content-groups.component';
 import { ContentService } from './services/http/content.service';
 import { AnswersListComponent } from './components/fragments/answers-list/answers-list.component';
 import { ContentAnswerService } from './services/http/content-answer.service';
@@ -75,9 +77,7 @@ import { UserActivationComponent } from './components/dialogs/user-activation/us
 import { ContentChoiceParticipantComponent } from './components/fragments/content-choice-participant/content-choice-participant.component';
 import { ContentChoiceCreatorComponent } from './components/fragments/content-choice-creator/content-choice-creator.component';
 import { ContentCreatePageComponent } from './components/pages/content-create-page/content-create-page.component';
-import {
-  ContentCarouselPageComponent
-} from './components/pages/content-carousel-page/content-carousel-page.component';
+import { ContentCarouselPageComponent } from './components/pages/content-carousel-page/content-carousel-page.component';
 import { ContentTextParticipantComponent } from './components/fragments/content-text-participant/content-text-participant.component';
 import { ContentTextCreatorComponent } from './components/fragments/content-text-creator/content-text-creator.component';
 import { AuthenticationInterceptor } from './interceptors/authentication.interceptor';
@@ -114,6 +114,7 @@ export function dialogClose(dialogResult: any) {
     RegisterComponent,
     RoomCreateComponent,
     RoomListComponent,
+    ContentGroupsComponent,
     HomeCreatorPageComponent,
     CommentCreatePageComponent,
     HomeParticipantPageComponent,
@@ -171,6 +172,7 @@ export function dialogClose(dialogResult: any) {
     HttpClientModule,
     MarkdownModule.forRoot(),
     MatAutocompleteModule,
+    MatBadgeModule,
     MatButtonModule,
     MatButtonToggleModule,
     MatCardModule,

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

+
+    <mat-card *ngFor="let contentGroup of displayedContentGroups">
+      <mat-card-header>
+        <mat-card-title>
+          <h4>{{contentGroup.name}}<mat-icon matBadge="{{contentGroup.contentIds.length}}" matBadgePosition="after"></mat-icon></h4>
+        </mat-card-title>
+      </mat-card-header>
+    </mat-card>

src/app/components/fragments/content-groups/content-groups.component.ts

+import { Component, Input, OnInit} from '@angular/core';
+
+class ContentGroup {
+  name: string;
+  contentIds: string[];
+  autoSort: boolean;
+
+  constructor(name: string, contentIds: string[], autoSort: boolean) {
+    this.name = name;
+    this.contentIds = contentIds;
+    this.autoSort = autoSort;
+  }
+}
+
+@Component({
+  selector: 'app-content-groups',
+  templateUrl: './content-groups.component.html',
+  styleUrls: ['./content-groups.component.scss']
+})
+export class ContentGroupsComponent implements OnInit {
+
+  @Input() public contentGroups: {[key: string]: [string]};
+  displayedContentGroups: ContentGroup[] = [];
+
+  constructor () {
+  }
+
+  ngOnInit() {
+    Object.keys(this.contentGroups).forEach(key => {
+      if (key === '') {
+        const cg = new ContentGroup(
+          'Default Content Group',
+          this.contentGroups[key]['contentIds'],
+          this.contentGroups[key]['autoSort']);
+        this.displayedContentGroups.push(cg);
+      } else {
+        const cg = new ContentGroup(
+          key,
+          this.contentGroups[key]['contentIds'],
+          this.contentGroups[key]['autoSort']);
+        this.displayedContentGroups.push(cg);
+      }
+    });
+  }
+}

src/app/components/pages/room-creator-page/room-creator-page.component.html

-<div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
+<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
   <div fxLayout="row" fxLayoutAlign="center">
     <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
     <mat-card *ngIf="room">
@@ -19,7 +19,6 @@
         </p>
       </mat-card-content>
       <mat-divider></mat-divider>
-      <app-content-list></app-content-list>
       <mat-divider></mat-divider>
       <mat-card-actions>
         <button mat-button color="primary" matTooltip="Create new content"
@@ -45,7 +44,9 @@
           Delete room
         </button>
       </mat-card-actions>
+      <app-content-groups *ngIf="room" [contentGroups]="room.contentGroups"></app-content-groups>
     </mat-card>
     <div *ngIf="!isLoading && !room">Error: room could not be found!</div>
   </div>
 </div>
+

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

@@ -32,6 +32,14 @@ export class ContentService extends BaseHttpService {
     );
   }
 
+  getContentsByIds(ids: string[]): Observable<Content[]> {
+    const connectionUrl = this.apiUrl.base + this.apiUrl.content + ids.toString();
+    return this.http.get<Content[]>(connectionUrl).pipe(
+      tap(() => ''),
+      catchError(this.handleError('getContentsByIds', []))
+    );
+  }
+
   addContent(content: Content): Observable<Content> {
     delete content.id;
     delete content.revision;