Order Review API connection and structural changes

src/app/orders/orders.component.html

@@ -5,9 +5,10 @@
 
 <ul class="orders">
 	<li *ngFor="let userOrder of userOrders" class="order">
-		<div class="order-mall">
+		<div class="order-container">
             <div class="heading"> Order ID: {{ userOrder.orders_id }} </div>
-            <ng-container *ngFor="let order of userOrder.orderedlist">                
+
+            <section class="individual-order" *ngFor="let order of userOrder.orderedlist">                
                 <div class="time-details">
                     Pickup on {{ getFormattedDate(order.pickup_time, 'DD MMMM YYYY @ hh:mm A') }}
                 </div>
@@ -30,21 +31,23 @@
                 <ul class="ordered-items">
                     <li>
                         <div class="order-item-details">
-                            <label class="name"> <strong> TOTAL </strong> </label>
+                            <label class="name"> <strong> Price </strong> </label>
                             <label class="time"> <strong> &#8377; {{ order.total_price }} </strong> </label>
                         </div>
                     </li>
                 </ul>
-                
-                <ul class="ordered-items">
-                    <li>
-                        <div class="order-item-details">
-                            <label class="name"> <strong> STATUS </strong> </label>
-                            <label class="time"> <strong> {{ getOrderStatusName(userOrder.orderstatus.orderstatus_id) }} </strong> </label>
-                        </div>
-                    </li>
-                </ul>
-            </ng-container>
+                                
+            </section>
+
+            <ul class="ordered-items">
+                <li>
+                    <div class="order-item-details">
+                        <label class="name"> <strong> STATUS </strong> </label>
+                        <label class="time"> <strong> {{ getOrderStatusName(userOrder.orderstatus.orderstatus_id) }} </strong> </label>
+                    </div>
+                </li>
+            </ul>
+
             <p class="note">
                 We will notify you each time a order is ready for pickup
             </p>            
@@ -66,15 +69,15 @@
 
             <div class="action-buttons-holder">
                 <ion-button shape="round" (click)="reOrder(userOrder.orderedlist)"> Reorder </ion-button>
-                <ion-button *ngIf="!userOrder.rating" shape="round" fill="outline" (click)="selectedOrder = userOrder"> Rate &amp; Review </ion-button>
+                <ion-button *ngIf="!userOrder.rating" shape="round" fill="outline" (click)="showAddReview = true; selectedOrder = userOrder"> Rate &amp; Review </ion-button>
             </div>
 
         </div>
 	</li>
 </ul>
 
-<section class="common-semi-modal rating-modal" [ngClass]="{'active': selectedOrder}">
-	<header> Rate &amp; Review <button (click)="selectedOrder = null"> Close </button> </header>
+<section class="common-semi-modal rating-modal" [ngClass]="{'active': showAddReview}">
+	<header> Rate &amp; Review <button (click)="showAddReview = false"> Close </button> </header>
 	<div class="rating">
 		<div class="semi-heading"> Rating </div>
 		<p> Rating the food will help us give you personalised recommendation </p>

src/app/orders/orders.component.scss

@@ -33,12 +33,16 @@ ul.orders {
         list-style: none;
         color: var(--brand-dark-grey);
         line-height: 1.6;
-        border-bottom: 1px solid #efefef;
         margin: 20px auto;
 
-		.order-mall {
-			padding: 10px 20px;
-		}
+		.order-container {
+			padding: 20px;
+        }
+        
+        .individual-order {
+            margin: 10px 0;
+            border-bottom: 1px solid #efefef;
+        }
 
 		&.expand {
 
@@ -110,7 +114,6 @@ ul.orders {
 		font-size: 13px;
 		padding: 10px 0;
 		margin-top: 10px;
-		border-top: 1px solid #efefef;
 	}
 
 	.action-buttons-holder {

src/app/orders/orders.component.ts

@@ -20,6 +20,8 @@ export class OrdersComponent implements OnInit {
 
     selectedOrder: any;
 
+    showAddReview: boolean = false;
+
     tempReview = {
         app_user: {
           user_id: null
@@ -36,14 +38,62 @@ export class OrdersComponent implements OnInit {
 
     submitFeedbackForOrder() {
         this.tempReview.app_user.user_id = this.userInfo.id;
-        this.selectedOrder = null;
+        
+        let orderToReview: any = JSON.parse(JSON.stringify(this.selectedOrder));
+
+        orderToReview.orderedlist = this.getOrderInUsercardFormat(this.selectedOrder.orderedlist);
+
+        orderToReview.rating = this.tempReview;
+
+        console.log(orderToReview);
+
+        this.orderService.updateOrder(orderToReview).then(() => {
+            this.toastService.presentToast("Review sent", "success");
+
+            this.selectedOrder.rating = orderToReview.rating;
+
             this.tempReview = {
                 app_user: {
                   user_id: null
                 },
                 comment: '',
                 rating: null,
-        };
+            };
+
+            this.showAddReview = false;
+
+        }, () => {
+            this.toastService.presentToast("Failed to send review", "danger");
+        });
+        
+        // this.selectedOrder = null;
+        // this.tempReview = {
+        //     app_user: {
+        //         user_id: null
+        //     },
+        //     comment: '',
+        //     rating: null,
+        // };
+    }
+
+    getOrderInUsercardFormat(orderedlist: any) {
+        let compiledOrderedList: any = [];
+
+        for (let i = 0; i < orderedlist.length; i += 1) {
+            compiledOrderedList.push({
+                mall_id: orderedlist[i].mall_id,
+                outlet_id: orderedlist[i].outlet_id,
+                menuitem_id: orderedlist[i].menuitems.menuitem_id,
+                quantity: orderedlist[i].quantity,
+                pickup_time: moment().add(moment.duration(orderedlist[i].menuitems.wait_duration).asMinutes(), 'minutes').format(),
+                take_away: true,
+                order_status: null,
+                total_price: orderedlist[i].total_price,
+                soft_delete: false,
+            });
+        }
+
+        return compiledOrderedList;
     }
 
     ngOnInit() {