Add Review API connection and UI

src/app/orders/orders.component.html

@@ -50,28 +50,31 @@
 
 			<div class="action-buttons-holder">
 				<ion-button shape="round" (click)="reOrder(userOrder.orderedlist)"> Reorder </ion-button>
-				<ion-button shape="round" fill="outline" (click)="show_rate_modal = true"> Rate &amp; Review </ion-button>
+				<ion-button shape="round" fill="outline" (click)="selectedOrder = order"> Rate &amp; Review </ion-button>
 			</div>
 		</div>
 	</li>
 </ul>
 
-<section class="common-semi-modal rating-modal" [ngClass]="{'active': show_rate_modal}">
-	<header> Rate &amp; Review <button (click)="show_rate_modal = false"> Close </button> </header>
+<section class="common-semi-modal rating-modal" [ngClass]="{'active': selectedOrder}">
+	<header> Rate &amp; Review <button (click)="selectedOrder = null"> Close </button> </header>
 	<div class="rating">
 		<div class="semi-heading"> Rating </div>
 		<p> Rating the food will help us give you personalised recommendation </p>
-		<div class="star-holder">
-			<ion-icon name="star" (click)="selected_rating = 1"></ion-icon>
-			<ion-icon name="star" (click)="selected_rating = 2"></ion-icon>
-			<ion-icon name="star" (click)="selected_rating = 3"></ion-icon>
-			<ion-icon name="star" (click)="selected_rating = 4"></ion-icon>
-			<ion-icon name="star" (click)="selected_rating = 5"></ion-icon>
+        <div class="star-holder" [ngClass]="{ 'star1' : tempReview.rating === 1, 
+        'star2' : tempReview.rating === 2, 'star3' : tempReview.rating === 3, 
+        'star4' : tempReview.rating === 4, 'star5': tempReview.rating === 5}">
+			<ion-icon name="star" (click)="tempReview.rating = 1"></ion-icon>
+			<ion-icon name="star" (click)="tempReview.rating = 2"></ion-icon>
+			<ion-icon name="star" (click)="tempReview.rating = 3"></ion-icon>
+			<ion-icon name="star" (click)="tempReview.rating = 4"></ion-icon>
+			<ion-icon name="star" (click)="tempReview.rating = 5"></ion-icon>
 		</div>
 	</div>
 	<div class="review">
 		<div class="semi-heading"> Review </div>
-		<textarea placeholder="Please tell something about the food..."></textarea>
+		<textarea placeholder="Please tell something about the food..." [(ngModel)]="tempReview.comment"></textarea>
 	</div>
-	<ion-button size="block" shape="round"> Submit Feedback </ion-button>
+    <ion-button size="block" shape="round"
+    (click)="submitFeedbackForOrder()"> Submit Feedback </ion-button>
 </section>

src/app/orders/orders.component.scss

@@ -162,7 +162,45 @@ ul.orders {
 		}
 
 		.star-holder {
-			text-align: center;
+            text-align: center;
+            
+            &.star1 {
+                ion-icon:first-child {
+                    color: #fbae17;
+                }
+            }
+
+            &.star2 {
+                @for $i from 1 through 2 {
+                    ion-icon:nth-child(#{$i}) {
+                        color: #fbae17;
+                    }                   
+                }                
+            }
+            
+            &.star3 {
+                @for $i from 1 through 3 {
+                    ion-icon:nth-child(#{$i}) {
+                        color: #fbae17;
+                    }                   
+                }
+            }
+
+            &.star4 {
+                @for $i from 1 through 4 {
+                    ion-icon:nth-child(#{$i}) {
+                        color: #fbae17;
+                    }                   
+                }
+            }
+
+            &.star5 {
+                @for $i from 1 through 5 {
+                    ion-icon:nth-child(#{$i}) {
+                        color: #fbae17;
+                    }                   
+                }
+            }
 
 			ion-icon {
 				color: var(--brand-grey);
@@ -204,6 +242,6 @@ ul.orders {
 		--background: var(--brand-blue);
 		font-size: 12px;
 		width: calc(100% - 30px);
-		margin: 0 auto 15px;
+		margin: 0 auto 65px;
 	}
 }

src/app/orders/orders.component.ts

@@ -13,20 +13,46 @@ import { ToastService } from '../services/toast.service';
 export class OrdersComponent implements OnInit {
 	userOrders: any = [];
 	selected_order: any;
-	selected_rating: number = 0;
-    userInfo: any;
-    show_rate_modal: boolean = false;
+	userInfo: any;
     userCart: ICart = {
         orderedlist: []
     };
     allOrderStatus: any = [];
 
+    selectedOrder: any;
+
+    tempReview = {
+        app_user: {
+          user_id: null
+        },
+        comment: '',
+        rating: null,
+    };
+
     constructor(
         private orderService: OrderService,
         private router: Router,
         private toastService: ToastService
     ) { }
 
+    submitFeedbackForOrder() {
+        this.tempReview.app_user.user_id = this.userInfo.id;
+        this.selectedOrder.rating = this.tempReview;
+        console.log(this.selectedOrder);
+        this.orderService.updateOrder(this.selectedOrder).then(() => {
+            this.selectedOrder = null;
+            this.tempReview = {
+                app_user: {
+                  user_id: null
+                },
+                comment: '',
+                rating: null,
+            };
+        }, () => {
+            this.toastService.presentToast("Failed to send review, please try again", "danger");
+        })
+    }
+
     ngOnInit() {
         this.userInfo = JSON.parse(localStorage.userInfo)['User Info'];
 

src/app/services/order.service.ts

@@ -94,4 +94,17 @@ export class OrderService {
 
 		return await this.http.get(URL + '/api/maioraservice/orders/getallOrderStatus', httpOptions).toPromise();
     }
+    
+
+    async updateOrder(order: any) {
+		const httpOptions = {
+			headers: new HttpHeaders({
+				'Access-Control-Allow-Origin': '*',
+				'Content-Type': 'application/json',
+				'Authorization': 'Bearer ' + localStorage.access_Token
+			})
+		};
+
+		return await this.http.put(URL + '/api/maioraservice/orders/v1/update', order ,httpOptions).toPromise();
+	}
 }

src/global.scss

@@ -175,7 +175,6 @@ figure {
 		padding: 15px;
 		font-size: 14px;
 		align-items: center;
-        position: sticky;
         position: -webkit-sticky;
 		top: 0;
 		z-index: 1;