From 4274a9d34be0f49aa45eac9c7af8a10630b3f8d0 Mon Sep 17 00:00:00 2001
From: weichien <weichien00@gmail.com>
Date: Wed, 5 May 2021 11:47:23 +0800
Subject: [PATCH] style: improve booking detail UI , show booking status.

---
 .../elements/BookingStatusComponent.vue       |  12 ++
 .../BookingDetailsSectionComponent.vue        | 106 +++++++-----------
 2 files changed, 54 insertions(+), 64 deletions(-)
 create mode 100644 resources/assets/vue/components/bookings/elements/BookingStatusComponent.vue

diff --git a/resources/assets/vue/components/bookings/elements/BookingStatusComponent.vue b/resources/assets/vue/components/bookings/elements/BookingStatusComponent.vue
new file mode 100644
index 00000000..6aab5d6a
--- /dev/null
+++ b/resources/assets/vue/components/bookings/elements/BookingStatusComponent.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="row p-t-10 p-b-10" v-if="item && item.status === 3">
+    <div class="col p-b-10 bg-white text-center"><h4>Order Completed</h4></div>
+  </div>
+</template>
+
+<script>
+  import componentHandler from "../../../general/mixins/componentHandler";
+  export default {
+    mixins: [componentHandler],
+  };
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue b/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue
index b31670a3..61e4464f 100644
--- a/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue
+++ b/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue
@@ -2,8 +2,9 @@
     <div class="row parentContainer">
         <div class="col">
             <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
+            <booking-status-component :data="booking"></booking-status-component>
             <div class="row" v-show="!isLoading" v-if="booking">
-                <div class="col-7">
+                <div class="col-12 col-sm-12 col-md-7">
                     <div class="row">
                         <div class="col bg-white padding-25">
                             <div class="absolute" style="top: -5px;right: -5px;width: 0px;height: 0px;border-style: solid;border-width: 0px 110px 110px 0px;border-color: transparent rgb(249, 249, 249) transparent transparent;z-index: 2;">
@@ -101,7 +102,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-3">
+                <div class="col-12 col-sm-12 col-md-3">
                     <booking-payment-quotation-component :data="booking" :section="section"></booking-payment-quotation-component>
                     <div class="row m-t-20" v-if="booking.payment_attempts.length">
                         <div class="col">
@@ -224,72 +225,49 @@
                                     <div class="font-head fs-10 all-caps">Invoice</div>
                                 </div>
                             </div>
+
+
                             <div class="row">
                                 <div class="col">
-                                    <div class="col p-t-10 p-b-10 p-r-0 bg-white">
-                                        <div v-if="booking.purchase_order_document" class="row align-items-end m-b-10 ">
-                                            <div class="col">
-                                                <div class="font-heading all-caps fs-10">Purchase Order:</div>
-                                            </div> 
-                                            <div class="col-auto text-right">
-                                                <div class="col-auto no-padding m-r-5">
-                                                    <document-file-viewr-component :file="booking.purchase_order_document.files[0]">
-                                                        <template slot="button">
-                                                            <div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
-                                                                <i class="fa fa-file-image-o fs-10"></i>
-                                                            </div>
-                                                        </template>
-                                                    </document-file-viewr-component>
-                                                </div>
-                                            </div>
+                                    <div class="col p-t-10 p-b-10 bg-white">
+                                        <div v-if="booking.purchase_order_document" class="m-b-10">
+                                            <document-file-viewr-component :file="booking.purchase_order_document.files[0]">
+                                                <template slot="button">
+                                                    <button type="button" class="btn btn-primary  btn-lg btn-block b-rad-none fs-12">
+                                                        View Purchase Order
+                                                    </button>
+                                                </template>
+                                            </document-file-viewr-component>
                                         </div>
-                                        <div v-if="booking.deliver_order_document" class="row align-items-end m-b-10 ">
-                                            <div class="col">
-                                                <div class="font-heading all-caps fs-10">Deliver Order:</div>
-                                            </div> 
-                                            <div class="col-auto text-right">
-                                                <div class="col-auto no-padding m-r-5">
-                                                    <document-file-viewr-component :file="booking.deliver_order_document.files[0]">
-                                                        <template slot="button">
-                                                            <div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
-                                                                <i class="fa fa-file-image-o fs-10"></i>
-                                                            </div>
-                                                        </template>
-                                                    </document-file-viewr-component>
-                                                </div>
-                                            </div>
+
+                                        <div v-if="booking.deliver_order_document" class="m-b-10">
+                                            <document-file-viewr-component :file="booking.deliver_order_document.files[0]">
+                                                <template slot="button">
+                                                    <button type="button" class="btn btn-primary btn-lg btn-block fs-12">
+                                                        View Deliver Order
+                                                    </button>
+                                                </template>
+                                            </document-file-viewr-component>
                                         </div>
-                                        <div v-if="booking.payment_order_document" class="row align-items-end m-b-10 ">
-                                            <div class="col">
-                                                <div class="font-heading all-caps fs-10">Payment Order:</div>
-                                            </div> 
-                                            <div class="col-auto text-right">
-                                                <div class="col-auto no-padding m-r-5">
-                                                    <document-file-viewr-component :file="booking.payment_order_document.files[0]">
-                                                        <template slot="button">
-                                                            <div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
-                                                                <i class="fa fa-file-image-o fs-10"></i>
-                                                            </div>
-                                                        </template>
-                                                    </document-file-viewr-component>
-                                                </div>
-                                            </div>
+
+                                        <div v-if="booking.payment_order_document" class="m-b-10">
+                                            <document-file-viewr-component :file="booking.payment_order_document.files[0]">
+                                                <template slot="button">
+                                                    <button type="button" class="btn btn-primary btn-lg btn-block fs-12">
+                                                        View Payment Order
+                                                    </button>
+                                                </template>
+                                            </document-file-viewr-component>
                                         </div>
-                                        <div v-if="booking.supplier_order_document" class="row align-items-end m-b-10 ">
-                                            <div class="col">
-                                                <div class="font-heading all-caps fs-10">Supplier Deliver Order:</div>
-                                            </div> 
-                                            <div class="col-auto text-right">
-                                                <div class="col-auto no-padding m-r-5">
-                                                    <document-file-viewr-component :file="booking.supplier_order_document.files[0]">
-                                                        <template slot="button">
-                                                            <div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
-                                                                <i class="fa fa-file-image-o fs-10"></i>
-                                                            </div>
-                                                        </template>
-                                                    </document-file-viewr-component>
-                                                </div>
-                                            </div>
+
+                                        <div v-if="booking.supplier_order_document" class="m-b-10">
+                                            <document-file-viewr-component :file="booking.supplier_order_document.files[0]">
+                                                <template slot="button">
+                                                    <button type="button" class="btn btn-primary btn-lg btn-block fs-12">
+                                                        View Supplier Deliver Order
+                                                    </button>
+                                                </template>
+                                            </document-file-viewr-component>
                                         </div>
                                     </div>
                                 </div>
@@ -340,7 +318,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col p-l-0">
+                <div class="col p-l-0 col-sm-2 col-md-2">
                     <verification-warning-component :data="booking.company"></verification-warning-component>
                 </div>
             </div>