From 2f3b9baf9b60bf44da3dd3367694ba4508abbabb Mon Sep 17 00:00:00 2001
From: Jack Goh <jackgoh0@gmail.com>
Date: Thu, 9 Aug 2018 10:44:21 +0800
Subject: [PATCH] added x2 progress track

---
 .../js/components/AdminProgressTrack.vue      |  2 +-
 .../js/components/X2AdminProgressTrack.vue    | 44 +++++++++++++++++++
 .../assets/js/components/X2ProgressTrack.vue  | 27 ++++++++++++
 .../js/pages/admin/booking/uploadInvoice.vue  | 10 ++---
 4 files changed, 76 insertions(+), 7 deletions(-)
 create mode 100644 resources/assets/js/components/X2AdminProgressTrack.vue
 create mode 100644 resources/assets/js/components/X2ProgressTrack.vue

diff --git a/resources/assets/js/components/AdminProgressTrack.vue b/resources/assets/js/components/AdminProgressTrack.vue
index 4b32b289..c7836d93 100644
--- a/resources/assets/js/components/AdminProgressTrack.vue
+++ b/resources/assets/js/components/AdminProgressTrack.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row>
-    <el-steps :value="(value.term === 'x1_ba' || value.term === 'x2_cheque') && value.status > 2 ? value.status - 2 : value.status" :active="(value.term === 'x1_ba' || value.term === 'x2_cheque') && value.status > 2 ? value.status - 2 : value.status" :align-center="true" process-status="wait" finish-status="success">
+    <el-steps :value="value.status" :active="value.status" :align-center="true" process-status="wait" finish-status="success">
       <el-step title="Booking"/>
       <el-step title="Verification"/>
       <el-step title="Supplier Booking"/>
diff --git a/resources/assets/js/components/X2AdminProgressTrack.vue b/resources/assets/js/components/X2AdminProgressTrack.vue
new file mode 100644
index 00000000..dd83ca75
--- /dev/null
+++ b/resources/assets/js/components/X2AdminProgressTrack.vue
@@ -0,0 +1,44 @@
+<template>
+  <el-row>
+    <el-steps :value="value.status" :active="value.status" :align-center="true" process-status="wait" finish-status="success">
+      <el-step title="Booking"/>
+      <el-step title="Verification"/>
+      <el-step title="Supplier Booking"/>
+      <el-step title="Supplier Report"/>
+      <el-step title="Upload China Bankslip To Booking"/>
+      <el-step title="Completed"/>
+    </el-steps>
+  </el-row>
+</template>
+
+<style type="text/css">
+    /* .el-row {
+        margin: 20px 0;
+    }
+
+    .el-steps {
+        padding-top: 70px;
+    }
+
+    .el-step .el-step__main {
+        transform: translateY(-70px);
+    }
+    .el-step__title.is-wait {
+        font-size: 10pt;
+    }
+    .el-step__title {
+        line-height: 1.4;
+    }
+
+    .el-step .is-success .el-step__line {
+        background-color: #67c23a;
+    } */
+</style>
+
+<script>
+export default {
+  props: ['value'],
+  data: () => ({
+  })
+}
+</script>
diff --git a/resources/assets/js/components/X2ProgressTrack.vue b/resources/assets/js/components/X2ProgressTrack.vue
new file mode 100644
index 00000000..8ee73a4a
--- /dev/null
+++ b/resources/assets/js/components/X2ProgressTrack.vue
@@ -0,0 +1,27 @@
+<template>
+  <el-row>
+    <el-steps class="progressBar" :value="value.status" :active="value.status" :align-center="true" process-status="wait" finish-status="success">
+      <el-step title="Booking"/>
+      <el-step title="Payment"/>
+      <el-step title="Order Confirmation"/>
+      <el-step title="Order Complete"/>
+    </el-steps>
+  </el-row>
+</template>
+
+<style type="text/css">
+    @media screen and (max-width: 800px) {
+		 .progressBar {
+            width: 60%;
+        }
+		
+	}
+</style>
+
+<script>
+export default {
+  props: ['value'],
+  data: () => ({
+  })
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
index 13c9016d..560ed25d 100644
--- a/resources/assets/js/pages/admin/booking/uploadInvoice.vue
+++ b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
@@ -88,10 +88,6 @@
                 <!---->
                 <!---->
               </div>
-              <!---->
-              <!---->
-              <!---->
-              <!---->
               <div class="el-table__column-resize-proxy" style="display: none;"></div>
             </div>
           </div>
@@ -259,7 +255,7 @@
     data() {
       return {
         trackerConfig :{
-          status: 6,
+          status: null,
           term: null
         },
         loading_btn: false,
@@ -334,7 +330,8 @@
         .then((response) => {
           loading.close()
           this.booking_details = response.data
-          this.trackerConfig.term = response.data.term;
+          this.trackerConfig.term = response.data.term
+          this.trackerConfig.status = response.data.admin_status
         }).catch((error) => {
           console.log(error)
           loading.close()
@@ -383,6 +380,7 @@
       uploadError(file,fileList){
         this.$message.warning(`Incorrect file format or file size too big.`)
       },
+      // TODO : refactor into library since many pages are using this 
       getExtension(path){
        return path.slice(-3);
       },