Merge pull request #43 from nirvanaitsolutions/issue#6

Implement review feature after escrow release

package.json

@@ -35,6 +35,7 @@
     "express": "^4.16.4",
     "moment": "^2.23.0",
     "ngx-auto-scroll": "^1.1.0",
+    "ngx-bar-rating": "^1.1.0",
     "ngx-cookie": "^4.0.2",
     "ngx-pagination": "^3.2.1",
     "ngx-socket-io": "^1.1.1",

src/app/app.module.ts

@@ -8,7 +8,15 @@ import { CookieModule } from 'ngx-cookie';
 import { AppComponent } from './app.component';
 import { FooterComponent } from './footer/footer.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatDialogModule } from '@angular/material';
+import {
+  MatDialogModule,
+  MatInputModule,
+  MatButtonModule,
+  MatFormFieldModule,
+  MatProgressSpinnerModule,
+  MatTableModule,
+  MatPaginatorModule
+} from '@angular/material';
 import { AppNavComponent } from './app-nav/app-nav.component';
 import { LayoutModule } from '@angular/cdk/layout';
 import { HomeComponent } from './home/home.component';
@@ -40,7 +48,7 @@ import { OrderComponent } from './order/order.component';
 import { NgxUiLoaderModule } from 'ngx-ui-loader';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { ReviewComponent } from './components/review/review.component';
-
+import { BarRatingModule } from "ngx-bar-rating";
 const config: SocketIoConfig = { url: 'http://swapsteem-api.herokuapp.com', options: {} };
 
 @NgModule({
@@ -86,7 +94,14 @@ const config: SocketIoConfig = { url: 'http://swapsteem-api.herokuapp.com', opti
     FormsModule,
     NgxUiLoaderModule,
     SocketIoModule.forRoot(config),
-    MatDialogModule
+    MatInputModule,
+    MatDialogModule,
+    MatButtonModule,
+    BarRatingModule,
+    MatFormFieldModule,
+    MatProgressSpinnerModule,
+    MatTableModule,
+    MatPaginatorModule
   ],
   providers: [{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },],
   bootstrap: [AppComponent]

src/app/components/review/review.component.css

@@ -0,0 +1,10 @@
+mat-form-field {
+    width: 100% !important;
+}
+
+.rating-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 70%;
+}

src/app/components/review/review.component.html

@@ -1,3 +1,24 @@
-<p>
-  review works!
-</p>
+<h2 mat-dialog-title>Review</h2>
+<form (ngSubmit)="submitReview(form)" novalidate #form="ngForm">
+<mat-dialog-content class="mat-typography">
+  <div class="rating-box">
+    <div>
+      <strong>
+          Rate *
+      </strong>
+    </div>
+    <div>
+      <bar-rating name="rating" [(ngModel)]="reviewData.review_score" [max]="5" required></bar-rating>
+    </div>
+  </div>
+  <mat-form-field>
+    <textarea matInput #message maxlength="500" name="review_text" placeholder="Please enter your review" [(ngModel)]="reviewData.review_text">
+        </textarea>
+    <mat-hint align="end">{{message.value.length}} / 500</mat-hint>
+  </mat-form-field>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Cancel</button>
+  <button mat-button type="submit" cdkFocusInitial>Submit</button>
+</mat-dialog-actions>
+</form>

src/app/components/review/review.component.ts

@@ -7,18 +7,47 @@
  * @requires id order id from url params
  * @requires status status for update after redirect from steemconnect
  */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { ReviewRequest } from '../../module/review';
+import { APIService } from '../../../service/api.service';
+import { NgxUiLoaderService } from 'ngx-ui-loader';
+
+export interface ReviewDialogData {
+  ad_id: string;
+  order_id: string;
+  createdby: string;
+  createdFor: string
+}
+
 
 @Component({
   selector: 'app-review',
   templateUrl: './review.component.html',
   styleUrls: ['./review.component.css']
 })
 export class ReviewComponent implements OnInit {
-
-  constructor() { }
+  public reviewData: ReviewRequest = {
+    createdby: '',
+    ad_id: '',
+    createdfor: '',
+    order_id: '',
+    review_score: 1,
+    review_text: ''
+  }
+  constructor(public dialogRef: MatDialogRef<ReviewComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ReviewDialogData, public apiService: APIService, public ngxService: NgxUiLoaderService, ) { }
 
   ngOnInit() {
   }
 
+  submitReview(form) {
+    if (form.valid) {
+      this.ngxService.start();
+      this.apiService.createReview(Object.assign({}, this.reviewData, this.data)).subscribe((res) => {
+        this.ngxService.stop();
+        this.dialogRef.close(res);
+      })
+    }
+  }
 }

src/app/module/review.ts

@@ -0,0 +1,21 @@
+export interface ReviewRequest {
+    createdby: string;
+    ad_id: string;
+    createdfor: string
+    order_id: string;
+    review_score: number;
+    review_text: string;
+}
+
+export interface ReviewResponse {
+    ad_id: string;
+    createdAt: string;
+    createdby: string;
+    createdfor: string;
+    order_id: string;
+    review_score: number;
+    review_text: string;
+    updatedAt: string
+    __v: number
+    _id: string;
+}

src/app/order/order.component.ts

@@ -15,8 +15,9 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { SteemconnectAuthService } from '../steemconnect/services/steemconnect-auth.service';
 import * as moment from 'moment';
 import { NgxUiLoaderService } from 'ngx-ui-loader';
-import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialog } from '@angular/material';
 import { ReviewComponent } from '../components/review/review.component';
+import { forkJoin } from 'rxjs';
 
 @Component({
   selector: 'app-order',
@@ -67,11 +68,15 @@ export class OrderComponent implements OnInit {
           this.reciever = data.createdfor
         }
         console.log(this.selectedOrder, this.userData);
-        this._apiSer.getSelectedTradeFromAPI(this.selectedOrder.ad_id).subscribe(res => {
-          this.selectedAd = res;
-          console.log(this.selectedAd);
-          this.ngxService.stop();
-        });
+        forkJoin(this._apiSer.getSelectedTradeFromAPI(this.selectedOrder.ad_id), this._apiSer.getReviews(this.selectedOrder._id, 'by_order'))
+          .subscribe(res => {
+            this.selectedAd = res[0];
+            if (this.selectedOrder.order_status === 'escrow_release' && res && res[1] && !res[1].length) {
+              this.openReviewDialog();
+            }
+            this.ngxService.stop();
+          });
+
       }));
     });
 
@@ -182,16 +187,19 @@ export class OrderComponent implements OnInit {
         this.reciever = data.createdfor
       }
       if (getAdd) {
-        this._apiSer.getSelectedTradeFromAPI(this.selectedOrder.ad_id).subscribe(res => {
-          this.selectedAd = res;
-          console.log(this.selectedAd, 'afjsfhj');
-          this.router.navigate([`/order/${this.selectedOrder._id}`], {
-            queryParams: {
-              status: ''
+        forkJoin(this._apiSer.getSelectedTradeFromAPI(this.selectedOrder.ad_id), this._apiSer.getReviews(this.selectedOrder._id, 'by_order'))
+          .subscribe(res => {
+            this.selectedAd = res[0];
+            if (this.selectedOrder.order_status === 'escrow_release' && res && res[1] && !res[1].length) {
+              this.openReviewDialog();
             }
+            this.router.navigate([`/order/${this.selectedOrder._id}`], {
+              queryParams: {
+                status: ''
+              }
+            });
+            this.ngxService.stop();
           });
-          this.ngxService.stop();
-        });
       }
     }));
   }
@@ -201,16 +209,19 @@ export class OrderComponent implements OnInit {
     * @name openReviewDialog 
     *
     * @description
-    * This method used to update order status
-    * @param order_status for update
-    * @param getAdd A flag for fetch order and advertisement detail 
-    * @requires id order id
+    * This method used to open review component in modal
    */
 
   openReviewDialog(): void {
     const dialogRef = this.dialog.open(ReviewComponent, {
-      width: '250px',
-      data: {  }
+      width: '300px',
+      disableClose: true,
+      data: {
+        ad_id: this.selectedAd._id,
+        order_id: this.selectedOrder._id,
+        createdby: this.userData._id,
+        createdFor: this.reciever
+      }
     });
 
     dialogRef.afterClosed().subscribe(result => {

src/app/profile/profile.component.css

@@ -50,4 +50,13 @@
 .page-controls{
     text-align: center;
     margin-top: 50px;
-}
+}
+
+table {
+    width: 100%;
+}
+
+
+  td, th {
+    width: 25%;
+  }