Add discussion picker

frontend/src/app/_services/shared-data.service.ts

@@ -5,11 +5,38 @@ import { ForumData } from '../_interfaces/forumdata';
 @Injectable()
 export class SharedDataService {
   private dataBS: BehaviorSubject<ForumData | any> = new BehaviorSubject({});
+  private json = `
+  {
+    "id": "1",
+    "name": "Kurs 1",
+    "discussion": [
+      {
+        "title": "test123",
+        "id": "1",
+        "first_post": "0"
+      },
+      {
+        "title": "dupa321",
+        "id": "2",
+        "first_post": "2"
+      },
+      {
+        "title": "TEST",
+        "id": "3",
+        "first_post": "10"
+      }
+    ]
+  }`;
 
   constructor() {}
 
   public setData(value: any): void {
-    this.dataBS.next(value);
+    /*
+     * this.dataBS.next(value);
+     */
+    /* For testing purposes only */
+    const obj = JSON.parse(this.json);
+    this.dataBS.next(obj);
   }
 
   public getData() {

frontend/src/app/_types/color.d.ts

@@ -0,0 +1,9 @@
+export type Colors =
+  | ''
+  | 'primary'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'basic'
+  | 'control';

frontend/src/app/front-page/front-page.component.ts

@@ -37,9 +37,11 @@ export class FrontPageComponent {
   }
 
   sendFile(event: any): void {
-    this.sendDataService.postFile(this.file).subscribe((res: any) => {
+    // this.sendDataService.postFile(this.file).subscribe((res: any) => {
-      this.sharedDataService.setData(res);
+    //   this.sharedDataService.setData(res);
-    });
+    // });
+    /* For testing */
+    this.sharedDataService.setData('test');
     this.router.navigate(['/view']);
   }
 }

frontend/src/app/main-view/discussion-chooser/discussion-chooser.component.html

@@ -1 +1,10 @@
-<p>discussion-chooser works!</p>
+<div class="picker-container">
+  <h1>Wybierz dyskusję z {{ data.name }}:</h1>
+  <nb-card
+    *ngFor="let item of data.discussion"
+    class="picker-container__discussion"
+    [accent]="getRandomColor()"
+  >
+    <h3 class="picker-container__disc-title">{{ item.title }}</h3>
+  </nb-card>
+</div>

frontend/src/app/main-view/discussion-chooser/discussion-chooser.component.scss

@@ -0,0 +1,8 @@
+.picker-container {
+  &__discussion {
+    cursor: pointer;
+  }
+  &__disc-title {
+    margin: 1rem;
+  }
+}

frontend/src/app/main-view/discussion-chooser/discussion-chooser.component.ts

@@ -1,15 +1,49 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+} from '@angular/core';
+import { SharedDataService } from '../../_services/shared-data.service';
+import { Colors } from '../../_types/color';
+import { Subscription } from 'rxjs';
+
+interface CustomForumData {
+  id: string;
+  name: string;
+  discussion: [
+    {
+      title: string;
+      id: string;
+      first_post: string;
+    }
+  ];
+}
 
 @Component({
   selector: 'app-discussion-chooser',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './discussion-chooser.component.html',
-  styleUrls: ['./discussion-chooser.component.scss']
+  styleUrls: ['./discussion-chooser.component.scss'],
 })
-export class DiscussionChooserComponent implements OnInit {
+export class DiscussionChooserComponent implements OnInit, OnDestroy {
+  public data: CustomForumData;
+  colors: Colors[] = ['primary', 'danger', 'info', 'success', 'warning'];
+  private dataSub: Subscription;
 
-  constructor() { }
+  constructor(private sharedDataService: SharedDataService) {}
 
   ngOnInit(): void {
+    this.dataSub = this.sharedDataService.getData().subscribe((res) => {
+      this.data = res as CustomForumData;
+    });
   }
 
+  ngOnDestroy(): void {
+    this.dataSub.unsubscribe();
+  }
+
+  getRandomColor(): Colors {
+    return this.colors[Math.floor(Math.random() * this.colors.length)];
+  }
 }

frontend/src/app/main-view/main-view.component.html

@@ -7,9 +7,12 @@
           (click)="toggleSidebar()"
           nbTooltip="Schowaj/Pokaż panel menu"
         ></nb-action>
+        <nb-action>nkadf</nb-action>
       </nb-actions>
       <nb-actions>
-        <nb-action icon="power" nbTooltip="Wyloguj">Wyloguj</nb-action>
+        <nb-action icon="power" (click)="logout()" nbTooltip="Wyloguj"
+          >Wyloguj</nb-action
+        >
       </nb-actions>
     </div>
   </nb-layout-header>

frontend/src/app/main-view/main-view.component.ts

@@ -1,8 +1,7 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { SharedDataService } from '../_services/shared-data.service';
+import { Router } from '@angular/router';
 
 import { NbSidebarService } from '@nebular/theme';
-import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-main-view',
@@ -10,25 +9,20 @@ import { Subscription } from 'rxjs';
   styleUrls: ['./main-view.component.scss'],
 })
 export class MainViewComponent implements OnInit, OnDestroy {
-  public data: any;
-  private dataSub: Subscription;
-
   constructor(
-    private sharedDataService: SharedDataService,
+    private sidebarService: NbSidebarService,
-    private sidebarService: NbSidebarService
+    private router: Router
   ) {}
 
-  ngOnInit(): void {
+  ngOnInit(): void {}
-    this.dataSub = this.sharedDataService.getData().subscribe((res) => {
-      this.data = res;
-    });
-  }
 
-  ngOnDestroy(): void {
+  ngOnDestroy(): void {}
-    this.dataSub.unsubscribe();
-  }
 
   toggleSidebar() {
     this.sidebarService.toggle(true, 'main');
   }
+
+  logout() {
+    this.router.navigate(['/']);
+  }
 }

frontend/src/app/main-view/main-view.module.ts

@@ -10,6 +10,7 @@ import {
   NbActionsModule,
   NbSidebarModule,
   NbTooltipModule,
+  NbCardModule,
 } from '@nebular/theme';
 
 @NgModule({
@@ -21,6 +22,7 @@ import {
     NbActionsModule,
     NbSidebarModule,
     NbTooltipModule,
+    NbCardModule,
   ],
 })
 export class MainViewModule {}