Merge branch '86-content-view-in-room' into 'master'

Resolve "Content View in Room"

Closes #86

See merge request swtp-block-ws17/arsnova-angular-frontend!71

src/app/text-answer.ts → src/app/answer-text.ts

-export class TextAnswer {
+export class AnswerText {
   id: string;
   revision: string;
-  contendId: string;
+  contentId: string;
   round: number;
   subject: string;
   body: string;

src/app/app-routing.module.ts

@@ -10,6 +10,9 @@ import { UserRole } from './user-roles.enum';
 import { ParticipantRoomComponent } from './participant-room/participant-room.component';
 import { CreatorRoomComponent } from './creator-room/creator-room.component';
 import { CommentListComponent } from './comment-list/comment-list.component';
+import { ContentListComponent } from './content-list/content-list.component';
+import { ContentCreationComponent } from './content-creation/content-creation.component';
+import { ContentDetailComponent } from './content-detail/content-detail.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
@@ -42,6 +45,24 @@ const routes: Routes = [
     canActivate: [AuthenticationGuard],
     data: { roles: [UserRole.CREATOR] }
   },
+  {
+    path: 'creator/room/:roomId/content-creation',
+    component: ContentCreationComponent,
+    canActivate: [AuthenticationGuard],
+    data: { roles: [UserRole.CREATOR] }
+  },
+  {
+    path: 'creator/room/:roomId/content-list',
+    component: ContentListComponent,
+    canActivate: [AuthenticationGuard],
+    data: { roles: [UserRole.CREATOR] }
+  },
+  {
+    path: 'creator/room/:roomId/:id',
+    component: ContentDetailComponent,
+    canActivate: [AuthenticationGuard],
+    data: { roles: [UserRole.CREATOR] }
+  },
   { path: 'participant/room/:roomId/create-comment',
     component: CreateCommentComponent,
     canActivate: [AuthenticationGuard],

src/app/app.module.ts

@@ -67,6 +67,11 @@ import { ParticipantHomeScreenComponent } from './participant-home-screen/partic
 import { ParticipantRoomComponent } from './participant-room/participant-room.component';
 import { DataStoreService } from './data-store.service';
 import { CreatorRoomComponent } from './creator-room/creator-room.component';
+import { ContentDetailComponent } from './content-detail/content-detail.component';
+import { ContentListComponent } from './content-list/content-list.component';
+import { ContentService } from './content.service';
+import { ContentAnswersListComponent } from './content-answers-list/content-answers-list.component';
+import { ContentAnswerService } from './content-answer.service';
 
 @NgModule({
   declarations: [
@@ -89,7 +94,10 @@ import { CreatorRoomComponent } from './creator-room/creator-room.component';
     CommentListComponent,
     ContentAnswersComponent,
     ParticipantRoomComponent,
-    CreatorRoomComponent
+    CreatorRoomComponent,
+    ContentDetailComponent,
+    ContentListComponent,
+    ContentAnswersListComponent
   ],
   entryComponents: [
     RegisterComponent,
@@ -145,7 +153,9 @@ import { CreatorRoomComponent } from './creator-room/creator-room.component';
     AuthenticationGuard,
     DataStoreService,
     RoomService,
-    CommentService
+    CommentService,
+    ContentService,
+    ContentAnswerService
   ],
   bootstrap: [AppComponent]
 })

src/app/content-answer.service.spec.ts

+import { TestBed, inject } from '@angular/core/testing';
+
+import { ContentAnswerService } from './content-answer.service';
+
+describe('ContentAnswerService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ContentAnswerService]
+    });
+  });
+
+  it('should be created', inject([ContentAnswerService], (service: ContentAnswerService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/content-answer.service.ts

+import { Injectable } from '@angular/core';
+import { AnswerText } from './answer-text';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import { catchError, tap } from 'rxjs/operators';
+import { ErrorHandlingService } from './error-handling.service';
+const httpOptions = {
+  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
+
+@Injectable()
+export class ContentAnswerService extends ErrorHandlingService {
+  private answerUrl = 'api/answerTexts';
+
+  constructor(private http: HttpClient) {
+    super();
+  }
+
+  getAnswerTexts(): Observable<AnswerText[]> {
+    return this.http.get<AnswerText[]>(this.answerUrl).pipe(
+      catchError(this.handleError('getAnswerTexts', []))
+    );
+  }
+
+  addAnswerText(answerText: AnswerText): Observable<AnswerText> {
+    return this.http.post<AnswerText>(this.answerUrl, answerText, httpOptions).pipe(
+      catchError(this.handleError<AnswerText>('addAnswerText'))
+    );
+  }
+
+  getAnswerText(id: string): Observable<AnswerText> {
+    const url = `${this.answerUrl}/${id}`;
+    return this.http.get<AnswerText>(url).pipe(
+      catchError(this.handleError<AnswerText>(`getAnswerText id=${id}`))
+    );
+  }
+}

src/app/content-answers-list/content-answers-list.component.html

+<mat-list>
+  <h3 mat-subheader>Answers</h3>
+  <mat-list-item *ngFor="let textAnswer of textAnswers">
+    <button mat-button routerLink="{{textAnswer.id}}">
+      {{textAnswer.body}}
+    </button>
+  </mat-list-item>
+</mat-list>
\ No newline at end of file

src/app/content-answers-list/content-answers-list.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContentAnswersListComponent } from './content-answers-list.component';
+
+describe('ContentAnswersListComponent', () => {
+  let component: ContentAnswersListComponent;
+  let fixture: ComponentFixture<ContentAnswersListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContentAnswersListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContentAnswersListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content-answers-list/content-answers-list.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ContentAnswerService } from '../content-answer.service';
+import { AnswerText } from '../answer-text';
+
+@Component({
+  selector: 'app-content-answers-list',
+  templateUrl: './content-answers-list.component.html',
+  styleUrls: ['./content-answers-list.component.scss']
+})
+export class ContentAnswersListComponent implements OnInit {
+  textAnswers: AnswerText[];
+
+  constructor(private contentAnswerService: ContentAnswerService) { }
+
+  ngOnInit() {
+    this.getAnswerTexts();
+  }
+
+  getAnswerTexts(): void {
+    this.contentAnswerService.getAnswerTexts().
+      subscribe(textAnswers => {
+        this.textAnswers = textAnswers;
+      });
+  }
+}

src/app/content-creation/content-creation.component.html

@@ -28,9 +28,10 @@
 </mat-card>
 
 <button mat-raised-button="Preview">Preview</button>
-<!-- TODO: Save answers to array in a class. Show answers in a matlist -->
+ <!-- TODO: Save answers to array in a class. Show answers in a matlist -->
 
 <div>
   <mat-slide-toggle>Allow absention</mat-slide-toggle>
   <mat-slide-toggle>Show hints</mat-slide-toggle>
 </div>
+ <!-- Let this view open in a mat dialog -->

src/app/content-creation/content-creation.component.scss

 .content-card {
     max-width: 400px;
-    margin-bottom: 5%;
+    margin: 10px;
 }

src/app/content-detail/content-detail.component.html

+<div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
+  <div *ngIf="content" fxLayout="row" fxLayoutAlign="center">
+    <mat-card>
+      <mat-card-header>
+        <mat-card-title>
+          <h3 class="subheading-2">{{content.subject}}</h3>
+        </mat-card-title>
+        <mat-card-subtitle>ID: {{ content.id }}
+          <br> Round: {{ content.round }}</mat-card-subtitle>
+      </mat-card-header>
+      <mat-divider></mat-divider>
+      <mat-card-content>
+        <p>
+          {{ content.body }}
+        </p>
+        <mat-divider></mat-divider>
+        <div>
+          <app-content-answers-list></app-content-answers-list>
+        </div>
+      </mat-card-content>
+      <mat-divider></mat-divider>
+      <!-- answes list here -->
+      <mat-card-actions>
+        <button mat-button color="primary" matTooltip="Create new content" routerLink="/creator/room/{{content.id}}/content-creation">
+          Create answer
+        </button>
+        <button mat-button color="warn" matTooltip="Delete selected answer">
+          <!-- on click, add a 'x' on the right end of each answer to make it deletable -->
+          Delete answer
+        </button>
+      </mat-card-actions>
+    </mat-card>
+  </div>
+</div>

src/app/content-detail/content-detail.component.scss

+mat-card {
+  max-width: 800px;
+}
+  
+mat-card-content > :first-child {
+  margin-top: 16px;
+}
+  
\ No newline at end of file

src/app/content-detail/content-detail.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContentDetailComponent } from './content-detail.component';
+
+describe('ContentDetailComponent', () => {
+  let component: ContentDetailComponent;
+  let fixture: ComponentFixture<ContentDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContentDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContentDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content-detail/content-detail.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Content } from '../content';
+import { ContentService } from '../content.service';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-content-detail',
+  templateUrl: './content-detail.component.html',
+  styleUrls: ['./content-detail.component.scss']
+})
+export class ContentDetailComponent implements OnInit {
+  content: Content = null;
+
+  constructor(
+    private contentService: ContentService,
+    private route: ActivatedRoute
+  ) {}
+
+  ngOnInit() {
+    this.route.params.subscribe(params => {
+      this.getContent(params['id']);
+    });
+  }
+
+  getContent(id: string): void {
+    this.contentService.getContent(id)
+      .subscribe(content => this.content = content);
+  }
+}

src/app/content-list/content-list.component.html

+<mat-list>
+  <mat-list-item *ngFor="let content of contents">
+    <button mat-button routerLink="{{content.id}}">
+      Content {{content.id}}: {{content.subject}}
+    </button>
+  </mat-list-item>
+</mat-list>

src/app/content-list/content-list.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContentListComponent } from './content-list.component';
+
+describe('ContentListComponent', () => {
+  let component: ContentListComponent;
+  let fixture: ComponentFixture<ContentListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContentListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContentListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content-list/content-list.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ContentService } from '../content.service';
+import { Content } from '../content';
+
+@Component({
+  selector: 'app-content-list',
+  templateUrl: './content-list.component.html',
+  styleUrls: ['./content-list.component.scss']
+})
+export class ContentListComponent implements OnInit {
+  contents: Content[];
+
+  constructor(private contentService: ContentService) { }
+
+  ngOnInit() {
+    this.getContents();
+  }
+
+  getContents(): void {
+    this.contentService.getContents()
+    .subscribe(contents => {
+      this.contents = contents;
+    });
+  }
+}

src/app/content.service.spec.ts

+import { TestBed, inject } from '@angular/core/testing';
+
+import { ContentService } from './content.service';
+
+describe('ContentService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ContentService]
+    });
+  });
+
+  it('should be created', inject([ContentService], (service: ContentService) => {
+    expect(service).toBeTruthy();
+  }));
+});