Add logic for sending data on server, minor fixes

frontend/src/app/_services/get-discussion.service.ts

@@ -6,16 +6,16 @@ import { map } from 'rxjs/operators';
 @Injectable()
 export class GetDiscussionService {
   private discussionObservableCache$: {
-    [id: string]: Observable<any>;
+    [id: number]: Observable<any>;
   } = {};
 
   private discussionCache$: {
-    [id: string]: any;
+    [id: number]: any;
   } = {};
 
   constructor(private http: HttpClient) {}
 
-  getDiscussion(id: string): Observable<any> {
+  getDiscussion(id: number): Observable<any> {
     if (this.discussionCache$[id]) {
       return of(this.discussionCache$[id]);
     } else {
@@ -24,13 +24,13 @@ export class GetDiscussionService {
     }
   }
 
-  private requestDiscussion(id: string): Observable<any> {
+  private requestDiscussion(id: number): Observable<any> {
     return this.http
       .get<any>(`http://127.0.0.1:8000/discussions/${id}`)
       .pipe(map((data) => this.mapData(id, data)));
   }
 
-  private mapData(id: string, data: any) {
+  private mapData(id: number, data: any) {
     this.discussionCache$[id] = data;
     return data;
   }

frontend/src/app/_services/paragraph.service.ts

@@ -1,14 +1,10 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, EMPTY } from 'rxjs';
 import { LabelData } from '../_interfaces/labeldata';
 
 @Injectable()
 export class ParagraphService {
-  // private paragraphsBS: BehaviorSubject<LabelData[]> = new BehaviorSubject(
-  //   [] as LabelData[]
-  // );
-
   private paragraphBS: BehaviorSubject<
     Map<number, LabelData[]>
   > = new BehaviorSubject(new Map());
@@ -26,6 +22,10 @@ export class ParagraphService {
           }
           return element;
         });
+        paragraphsMap.set(discussionId, updatedParagraphs);
+      } else {
+        labelsArray.push(paragraph);
+        paragraphsMap.set(discussionId, labelsArray);
       }
     } else {
       paragraphsMap.set(discussionId, new Array<LabelData>(paragraph));
@@ -33,27 +33,21 @@ export class ParagraphService {
     this.paragraphBS.next(paragraphsMap);
   }
 
-  public getParagraphs(discussionId: number) {
-    console.log(this.paragraphBS.getValue().get(discussionId));
+  public getParagraphs() {
+    return this.paragraphBS.asObservable();
   }
 
-  // public addParagraph(paragraph: LabelData) {
-  //   const paragraphs = this.paragraphsBS.getValue();
-  //   if (paragraphs.find((p) => p.id === paragraph.id)) {
-  //     const updatedParagraphs = paragraphs.map((element) => {
-  //       if (element.id === paragraph.id) {
-  //         element.label = paragraph.label;
-  //       }
-  //       return element;
-  //     });
-  //     this.paragraphsBS.next(updatedParagraphs);
-  //   } else {
-  //     paragraphs.push(paragraph);
-  //     this.paragraphsBS.next(paragraphs);
-  //   }
-  // }
-
-  // public updateParagraphs(id: number) {
-  //   return this.http.patch(`127.0.0.1:8080/disussions/${id}`);
-  // }
+  public patchParagraphs(discussionId: number) {
+    const paragraphMap = this.paragraphBS.getValue();
+    const labelsArray = paragraphMap.get(discussionId);
+    if (labelsArray) {
+      return this.http.patch(
+        `http://127.0.0.1:8000/discussions/${discussionId}`,
+        JSON.stringify(labelsArray),
+        { responseType: 'json' }
+      );
+    } else {
+      return EMPTY;
+    }
+  }
 }

frontend/src/app/app.module.ts

@@ -12,6 +12,7 @@ import {
   NbSidebarModule,
   NbSidebarService,
   NbMenuModule,
+  NbToastrModule,
 } from '@nebular/theme';
 
 import { FrontPageModule } from './front-page/front-page.module';
@@ -30,6 +31,7 @@ import { SidebarItemsService } from './_services/sidebar-items.service';
     NbMenuModule.forRoot(),
     NbEvaIconsModule,
     FrontPageModule,
+    NbToastrModule.forRoot(),
   ],
   bootstrap: [AppComponent],
   providers: [SharedDataService, NbSidebarService, SidebarItemsService],

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

@@ -1,6 +1,11 @@
 <div class="discussion-viewer">
   <div class="discussion-viewer__buttons-container">
-    <button nbButton status="primary" class="discussion-viewer__save-button">
+    <button
+      nbButton
+      status="primary"
+      class="discussion-viewer__save-button"
+      (click)="onSaveChangesButtonClick(id)"
+    >
       Zapisz zmiany
     </button>
     <button
@@ -23,6 +28,7 @@
           [message]="paragraph"
           [loadedLabel]="item.label[i]"
           [paragraphId]="item.para_id[i]"
+          [discussionId]="id"
         ></app-styled-paragraph>
       </nb-card-body>
     </nb-card>

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

@@ -3,7 +3,9 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { GetDiscussionService } from '../../_services/get-discussion.service';
 import { PredictedPost } from '../../_interfaces/predictedposts';
 import { Subscription } from 'rxjs';
-import { concatMap } from 'rxjs/operators';
+import { concatMap, defaultIfEmpty } from 'rxjs/operators';
+import { ParagraphService } from 'src/app/_services/paragraph.service';
+import { NbToastrService } from '@nebular/theme';
 
 @Component({
   selector: 'app-discussion-viewer',
@@ -12,15 +14,17 @@ import { concatMap } from 'rxjs/operators';
 })
 export class DiscussionViewerComponent implements OnInit {
   data: PredictedPost[];
-  id: string;
+  id: number;
   paramSub: Subscription;
   discussionSub: Subscription;
   subscription: Subscription;
 
   constructor(
     private getDiscussionService: GetDiscussionService,
+    private paragraphService: ParagraphService,
     private activatedRouter: ActivatedRoute,
-    private router: Router
+    private router: Router,
+    private toastService: NbToastrService
   ) {}
 
   ngOnInit(): void {
@@ -39,4 +43,18 @@ export class DiscussionViewerComponent implements OnInit {
   onBackButtonClick() {
     this.router.navigate(['/view/discussions/']);
   }
+
+  onSaveChangesButtonClick(id: number) {
+    this.paragraphService
+      .patchParagraphs(id)
+      ?.pipe(defaultIfEmpty())
+      .subscribe((result) => {
+        if (result === null) {
+          this.toastService.danger('', 'Brak zmian!', {
+            preventDuplicates: true,
+            icon: 'alert-circle',
+          });
+        }
+      });
+  }
 }

frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.scss

@@ -12,7 +12,7 @@
 }
 
 .pozytywna {
-  border-color: nb-theme(color-success-100);
+  border-color: nb-theme(color-success-600);
 }
 
 .negatywna {

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

@@ -10,6 +10,7 @@ export class StyledParagraphComponent {
   @Input() message: string;
   @Input() loadedLabel: string;
   @Input() paragraphId: number;
+  @Input() discussionId: number;
   availableLabels: string[] = [
     'pozytywna',
     'negatywna',
@@ -21,5 +22,10 @@ export class StyledParagraphComponent {
 
   constructor(private paragraphService: ParagraphService) {}
 
-  fetchLabel(label: any, id: number) {}
+  fetchLabel(label: string, paragraphId: number) {
+    this.paragraphService.addParagraph(this.discussionId, {
+      id: paragraphId,
+      label,
+    });
+  }
 }