add post user feedback post request - #102

src/app/_models/rating.ts

@@ -1,8 +1,8 @@
-import {Answer} from '@/_models/answer';
+import {TestResult} from '@/_models/test-result';
 
-export class Rating {
-    id: Answer["id"];
+export interface Rating {
+    test: TestResult["code"];
+    question: number;
     score: number;
     comment: string;
-    rated: boolean;
 }

src/app/_services/user.service.ts

@@ -1,17 +1,24 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
+import { HttpHeaders } from '@angular/common/http';
 
 import {ApiResponseBase, ApiResponseTestResultList, ApiResponseUser, ApiResponseUsersList, ApiResponseUsersTop, User} from '@/_models';
 import {environment} from '../../environments/environment';
 import {ApiResponseGeoIp} from '@/_models/api-response-geoip';
 import {APP_LOCALE_ID} from '../../environments/app-locale';
+import { Rating } from '@/_models/rating';
 
 /**
  * @class UserService
  * @description Gets different type of users
  */
 @Injectable({providedIn: 'root'})
 export class UserService {
+    httpOptions = {
+        headers: new HttpHeaders({
+            'Content-Type':  'application/json'
+        })
+    };
   constructor(private http: HttpClient) {
   }
 
@@ -126,4 +133,9 @@ export class UserService {
       'https://lh3.googleusercontent.com/0afftGjZogSfSZ08FwQ2Ijg-QSFCAkSqTDw_WWEIoE-hKKhjh9tqDfkKNExNBWbuiJuEWDse_C5qrqPCMpM'
     ];
   }
+
+  sendFeedback(feedback: Rating, userToken: User["token"]) {
+    this.httpOptions.headers.set('Authorization', `Bearer ${userToken}`);
+    return this.http.post<ApiResponseBase>(environment.apiUrl + '/user/feedback', feedback, this.httpOptions);
+  }
 }

src/app/classroom/classroom.component.html

@@ -140,7 +140,7 @@ <h4 class="text-info">
       </div>
     </div>
   </div>
-  <app-rating></app-rating>
+  <app-rating [test]="activeTest.code" [question]="activeQuestionId"></app-rating>
 </div>
 <div class="mb-3 d-md-none" *ngIf="activeTest">
   <div class="container">

src/app/user/rating/rating.component.html

@@ -3,19 +3,18 @@
         <div class="row">
             <div class="col-12">
                 <p class="lead">Rate this question:</p>
-                <span class="star text-warning" [ngClass]="{'rated': rated}" *ngFor="let star of stars; let i=index">
-                    <fa-icon *ngIf="!star" [icon]="['far', 'star']" (click)="!rated ? select(i) : ''"></fa-icon>
-                    <fa-icon *ngIf="star" [icon]="['fas', 'star']" (click)="!rated ? select(i) : ''"></fa-icon>
+                <span class="star text-warning" *ngFor="let star of stars; let i=index">
+                    <fa-icon *ngIf="!star" [icon]="['far', 'star']" (click)="select(i)"></fa-icon>
+                    <fa-icon *ngIf="star" [icon]="['fas', 'star']" (click)="select(i)"></fa-icon>
                 </span>
-                <p *ngIf="rated" class="lead">Thank you for rating!</p>
             </div>
-            <div class="col-12 col-sm-4 my-3" *ngIf="selected && !rated">
+            <div class="col-12 col-sm-4 my-3" *ngIf="selected">
                 <form>
                     <div class="form-group">
                         <label for="rating-comment">Tell us more (optional):</label>
-                        <textarea class="form-control" id="rating-comment" rows="3" placeholder="Let us know what you liked or we can improve..."></textarea>
+                        <textarea id="rating-comment" class="form-control" name="comment" rows="3" placeholder="Let us know what you liked or we can improve..." [(ngModel)]="comment"></textarea>
                     </div>
-                    <button type="submit" class="btn btn-primary btn-block" (click)="submit()">Submit</button>
+                    <button type="button" class="btn btn-primary btn-block" (click)="submit()">Submit</button>
                 </form>
             </div>
         </div>

src/app/user/rating/rating.component.ts

@@ -1,21 +1,53 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { Rating } from '@/_models/rating';
+import { AlertService, UserService } from '@/_services';
+import { I18n } from '@ngx-translate/i18n-polyfill';
+import { first } from 'rxjs/operators';
+import { User } from '@/_models';
 
 @Component({
   selector: 'app-rating',
   templateUrl: './rating.component.html',
   styleUrls: ['./rating.component.scss']
 })
 export class RatingComponent implements OnInit {
+    @Input()
+    test: Rating["test"];
 
-    stars: boolean[];
+    @Input()
+    question: Rating["question"];
+
+    rating: Rating;
+    score: Rating["score"];
+    comment: Rating["comment"];
+    userToken: User["token"];
+    stars: boolean[] = [];
     selected: boolean = false;
-    rated: boolean = false;
 
-  constructor() {
-    this.stars = [false, false, false, false, false];
-   }
+
+    constructor(
+        private userService: UserService,
+        private alertService: AlertService,
+        private i18n: I18n
+    ) {
+        this.stars = [false, false, false, false, false];
+    }
 
   ngOnInit() {
+      this.getUserToken();
+  }
+
+  getUserToken() {
+      this.userService.getMyInfo()
+      .pipe(first())
+      .subscribe(
+        apiResponseUser => {
+            if (apiResponseUser.ok) return this.userToken = apiResponseUser.user.token;
+        },
+        error => {
+            this.alertService.error(this.i18n('API Service Unavailable') + '. ' + error.msg);
+        }
+      )
   }
 
     select(selectedStar: number) {
@@ -27,10 +59,35 @@ export class RatingComponent implements OnInit {
             }
         }
         this.selected = true;
+        return this.score = selectedStar + 1;
     }
 
     submit() {
-        // TODO: POST REQUEST to API
-        this.rated = true;
+        this.userService.sendFeedback(
+        this.rating = {
+            test: this.test,
+            question: this.question,
+            score: this.score,
+            comment: this.comment || ""
+        }, this.userToken)
+        .pipe(first())
+        .subscribe(
+            response => {
+                // console.log(response);
+                this.alertService.success(this.i18n('Thank you for your feedback'));
+                this.resetRating();
+            },
+            error => {
+                this.alertService.error(this.i18n('API Service Unavailable') + '. ' + error.message);
+            }
+        );
+    }
+
+    resetRating() {
+        for(let i = 0; i < this.stars.length; i++) {
+            this.stars[i] = false;
+        }
+        this.comment = "";
+        this.selected = false;
     }
 }