From 7e28b5aee4072955e9acd2334e862cc684817583 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Romaszkin?= <microm3@st.amu.edu.pl>
Date: Mon, 15 Jun 2020 20:44:07 +0200
Subject: [PATCH] Remove dialog, add simple selector

---
 frontend/src/app/_interfaces/labeldata.ts     |  4 ++
 .../src/app/_services/shared-data.service.ts  | 21 ++++++++
 .../discussion-viewer.component.html          | 24 ++++++----
 .../discussion-viewer.component.scss          |  4 ++
 .../src/app/main-view/main-view.module.ts     | 11 ++---
 .../styled-paragraph.component.html           | 48 ++++---------------
 .../styled-paragraph.component.ts             | 23 ++++-----
 7 files changed, 67 insertions(+), 68 deletions(-)
 create mode 100644 frontend/src/app/_interfaces/labeldata.ts

diff --git a/frontend/src/app/_interfaces/labeldata.ts b/frontend/src/app/_interfaces/labeldata.ts
new file mode 100644
index 0000000..6876d34
--- /dev/null
+++ b/frontend/src/app/_interfaces/labeldata.ts
@@ -0,0 +1,4 @@
+export interface LabelData {
+  para_id: number;
+  label: string;
+}
diff --git a/frontend/src/app/_services/shared-data.service.ts b/frontend/src/app/_services/shared-data.service.ts
index 74c76b3..3346f39 100644
--- a/frontend/src/app/_services/shared-data.service.ts
+++ b/frontend/src/app/_services/shared-data.service.ts
@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { NbMenuItem } from '@nebular/theme';
+import { LabelData } from '../_interfaces/labeldata';
 
 @Injectable()
 export class SharedDataService {
@@ -8,6 +9,9 @@ export class SharedDataService {
   private discussionsBS: BehaviorSubject<NbMenuItem[]> = new BehaviorSubject(
     [] as NbMenuItem[]
   );
+  private paragraphsBS: BehaviorSubject<LabelData[]> = new BehaviorSubject(
+    [] as LabelData[]
+  );
 
   constructor() {}
 
@@ -26,4 +30,21 @@ export class SharedDataService {
   public getData(): Observable<string> {
     return this.dataBS.asObservable();
   }
+
+  public addParagraph(paragraph: LabelData) {
+    const paragraphs = this.paragraphsBS.getValue();
+    console.log(paragraphs);
+    if (paragraphs.find((p) => p.para_id === paragraph.para_id)) {
+      const updatedParagraphs = paragraphs.map((element) => {
+        if (element.para_id === paragraph.para_id) {
+          element.label = paragraph.label;
+        }
+        return element;
+      });
+      this.paragraphsBS.next(updatedParagraphs);
+    } else {
+      paragraphs.push(paragraph);
+      this.paragraphsBS.next(paragraphs);
+    }
+  }
 }
diff --git a/frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.html b/frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.html
index 58fdae1..858f629 100644
--- a/frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.html
+++ b/frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.html
@@ -1,16 +1,22 @@
 <div class="discussion-viewer">
-  <nb-card *ngFor="let item of data">
-    <nb-card-header>
-      {{ item.author }}
-    </nb-card-header>
-    <nb-card-body>
-      <div class="discussion-viewer__container">
+  <div class="discussion-viewer__buttons-container">
+    <button nbButton status="primary" class="discussion-viewer__save-button">
+      Zapisz zmiany
+    </button>
+  </div>
+  <div class="discussion-viewer__posts-container">
+    <nb-card *ngFor="let item of data">
+      <nb-card-header>
+        {{ item.author }}
+      </nb-card-header>
+      <nb-card-body>
         <app-styled-paragraph
           *ngFor="let paragraph of item.message; let i = index"
           [message]="paragraph"
           [loadedLabel]="item.label[i]"
+          [paragraphId]="item.para_id[i]"
         ></app-styled-paragraph>
-      </div>
-    </nb-card-body>
-  </nb-card>
+      </nb-card-body>
+    </nb-card>
+  </div>
 </div>
diff --git a/frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.scss b/frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.scss
index e69de29..cbc49ee 100644
--- a/frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.scss
+++ b/frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.scss
@@ -0,0 +1,4 @@
+.discussion-viewer {
+  display: flex;
+  flex-flow: column nowrap;
+}
diff --git a/frontend/src/app/main-view/main-view.module.ts b/frontend/src/app/main-view/main-view.module.ts
index 2c97fee..211e7ac 100644
--- a/frontend/src/app/main-view/main-view.module.ts
+++ b/frontend/src/app/main-view/main-view.module.ts
@@ -5,6 +5,10 @@ import { MainViewComponent } from './main-view.component';
 import { DiscussionChooserComponent } from './discussion-chooser/discussion-chooser.component';
 import { MainViewRoutingModule } from './main-view-routing.module';
 
+import { DiscussionViewerComponent } from './discussion-viewer/discussion-viewer.component';
+import { GetDiscussionService } from '../_services/get-discussion.service';
+import { StyledParagraphComponent } from './styled-paragraph/styled-paragraph.component';
+
 import {
   NbLayoutModule,
   NbActionsModule,
@@ -13,13 +17,9 @@ import {
   NbCardModule,
   NbMenuModule,
   NbButtonModule,
-  NbDialogModule,
   NbSelectModule,
 } from '@nebular/theme';
-import { DiscussionViewerComponent } from './discussion-viewer/discussion-viewer.component';
-import { GetDiscussionService } from '../_services/get-discussion.service';
-import { StyledParagraphComponent } from './styled-paragraph/styled-paragraph.component';
-import { FormsModule } from '@angular/forms';
+
 @NgModule({
   declarations: [
     MainViewComponent,
@@ -37,7 +37,6 @@ import { FormsModule } from '@angular/forms';
     NbCardModule,
     NbMenuModule,
     NbButtonModule,
-    NbDialogModule.forChild(),
     NbSelectModule,
   ],
   providers: [GetDiscussionService],
diff --git a/frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.html b/frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.html
index f0e35ff..bcf57d6 100644
--- a/frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.html
+++ b/frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.html
@@ -6,43 +6,13 @@
   >
     {{ message }}
   </span>
-  <button nbButton (click)="openDialog(editLabel)" size="small">
-    Edytuj etykietę
-  </button>
+  <nb-select
+    placeholder="Wybierz etykietę"
+    (selectedChange)="fetchLabel($event, paragraphId)"
+    [selected]="loadedLabel"
+  >
+    <nb-option *ngFor="let _label of availableLabels" [value]="_label">{{
+      _label
+    }}</nb-option>
+  </nb-select>
 </div>
-
-<ng-template #editLabel>
-  <nb-card class="dialog">
-    <nb-card-header>Edytuj etykietę</nb-card-header>
-    <nb-card-body class="dialog__body">
-      <div class="dialog__element">
-        <label class="label">Paragraf</label>
-        <span class="paragraph dialog__message">{{ message }}</span>
-      </div>
-      <div class="dialog__element">
-        <label class="label">Etykieta</label>
-        <nb-select placeholder="Wybierz etykietę" [(selected)]="selectedLabel">
-          <nb-option
-            *ngFor="let _label of availableLabels"
-            [value]="_label"
-            [disabled]="loadedLabel === _label"
-            >{{ _label }}</nb-option
-          >
-        </nb-select>
-      </div>
-      <div class="dialog__buttons">
-        <button
-          nbButton
-          status="success"
-          (click)="updateLabel($event, selectedLabel)"
-          [disabled]="selectedLabel === loadedLabel || selectedLabel === ''"
-        >
-          Zapisz
-        </button>
-        <button nbButton status="danger" (click)="closeDialog(editLabel)">
-          Anuluj
-        </button>
-      </div>
-    </nb-card-body>
-  </nb-card>
-</ng-template>
diff --git a/frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.ts b/frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.ts
index 76ce05d..9cdb958 100644
--- a/frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.ts
+++ b/frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.ts
@@ -1,5 +1,5 @@
-import { Component, Input, TemplateRef } from '@angular/core';
-import { NbDialogService, NbDialogRef } from '@nebular/theme';
+import { Component, Input } from '@angular/core';
+import { SharedDataService } from '../../_services/shared-data.service';
 
 @Component({
   selector: 'app-styled-paragraph',
@@ -9,6 +9,7 @@ import { NbDialogService, NbDialogRef } from '@nebular/theme';
 export class StyledParagraphComponent {
   @Input() message: string;
   @Input() loadedLabel: string;
+  @Input() paragraphId: number;
   availableLabels: string[] = [
     'pozytywna',
     'negatywna',
@@ -16,20 +17,14 @@ export class StyledParagraphComponent {
     'fakt',
     'nieistotna',
   ];
-  dialogRef: NbDialogRef<any>;
   selectedLabel = '';
 
-  constructor(private dialogService: NbDialogService) {}
+  constructor(private sharedDataService: SharedDataService) {}
 
-  public openDialog(ref: TemplateRef<any>) {
-    this.dialogRef = this.dialogService.open(ref);
-  }
-
-  public closeDialog(ref: TemplateRef<any>) {
-    this.dialogRef.close();
-  }
-
-  public updateLabel(event: any, label: string) {
-    console.log(label);
+  fetchLabel(label: any, id: number) {
+    this.sharedDataService.addParagraph({
+      para_id: id,
+      label,
+    });
   }
 }