From c9642bd8f5c3be376730f07898c6fbb67d9e31fe Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Thu, 13 Apr 2023 16:01:12 +0800
Subject: [PATCH] update order v2 page

---
 .../general/elements/BoxLoadingComponent.vue  | 126 ++++++++++++++++++
 .../OrderPackageV2SectionComponent.vue        |  12 +-
 2 files changed, 136 insertions(+), 2 deletions(-)
 create mode 100644 resources/assets/vue/components/general/elements/BoxLoadingComponent.vue

diff --git a/resources/assets/vue/components/general/elements/BoxLoadingComponent.vue b/resources/assets/vue/components/general/elements/BoxLoadingComponent.vue
new file mode 100644
index 00000000..110243c6
--- /dev/null
+++ b/resources/assets/vue/components/general/elements/BoxLoadingComponent.vue
@@ -0,0 +1,126 @@
+<template>
+    <div class="row align-items-center justify-content-center w-100">
+        <div class="col">
+            <div class='tetrominos'>
+                <div class='tetromino box1'></div>
+                <div class='tetromino box2'></div>
+                <div class='tetromino box3'></div>
+                <div class='tetromino box4'></div>
+            </div>
+        </div>
+    </div>
+</template>
+<style>
+.tetrominos {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-112px, -96px);
+}
+
+.tetromino {
+    width: 96px;
+    height: 112px;
+    position: absolute;
+    transition: all ease 0.3s;
+    background: url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 684"%3E%3Cpath fill="%23010101" d="M305.7 0L0 170.9v342.3L305.7 684 612 513.2V170.9L305.7 0z"/%3E%3Cpath fill="%23fff" d="M305.7 80.1l-233.6 131 233.6 131 234.2-131-234.2-131"/%3E%3C/svg%3E') no-repeat top center;
+}
+
+.box1 {
+    animation: tetromino1 1.5s ease-out infinite;
+}
+
+.box2 {
+    animation: tetromino2 1.5s ease-out infinite;
+}
+
+.box3 {
+    animation: tetromino3 1.5s ease-out infinite;
+    z-index: 2;
+}
+
+.box4 {
+    animation: tetromino4 1.5s ease-out infinite;
+}
+
+@keyframes tetromino1 {
+
+    /* compose logo */
+    /* 1 on 3 */
+    /* L-shape */
+    0%,
+    40% {
+        transform: translate(0, 0);
+    }
+
+    50% {
+        /* pre-box */
+        transform: translate(48px, -27px);
+    }
+
+    60%,
+    100% {
+        /* box */
+        /* compose logo */
+        transform: translate(96px, 0);
+    }
+}
+
+@keyframes tetromino2 {
+
+    /* compose logo */
+    /* 1 on 3 */
+    0%,
+    20% {
+        transform: translate(96px, 0px);
+    }
+
+    40%,
+    100% {
+        /* L-shape */
+        /* box */
+        /* compose logo */
+        transform: translate(144px, 27px);
+    }
+}
+
+@keyframes tetromino3 {
+
+    /* compose logo */
+    0% {
+        transform: translate(144px, 27px);
+    }
+
+    20%,
+    60% {
+        /* 1 on 3 */
+        /* L-shape */
+        /* box */
+        transform: translate(96px, 54px);
+    }
+
+    90%,
+    100% {
+        /* compose logo */
+        transform: translate(48px, 27px);
+    }
+}
+
+@keyframes tetromino4 {
+
+    /* compose logo */
+    /* 1 on 3 */
+    /* L-shape */
+    /* box */
+    0%,
+    60% {
+        transform: translate(48px, 27px);
+    }
+
+    90%,
+    100% {
+        /* compose logo */
+        transform: translate(0, 0);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/vue/components/orders/sections/OrderPackageV2SectionComponent.vue b/resources/assets/vue/components/orders/sections/OrderPackageV2SectionComponent.vue
index 2fb3f259..d9078e4f 100644
--- a/resources/assets/vue/components/orders/sections/OrderPackageV2SectionComponent.vue
+++ b/resources/assets/vue/components/orders/sections/OrderPackageV2SectionComponent.vue
@@ -1,7 +1,13 @@
 <template>
     <div class="row">
         <div class="col">
-            <loading-component style="height: 200px; top: 0;" v-if="isLoading"></loading-component>
+            <!-- <loading-component style="height: 200px; top: 0;" v-if="isLoading"></loading-component> -->
+            <box-loading-component style="height: 200px; top: 0; margin-top: 50px;" v-if="isLoading"></box-loading-component>
+            <div class="row align-items-center justify-content-center" v-if="isLoading">
+                <div class="col">
+                    <p class="text-center fs-15 muted all-caps font-lato" style="letter-spacing: 2px">Loading Packages Data</p>
+                </div>
+            </div>
             <div class="row" v-if="!dataLoaded">
                 <div class="col">
                     <div v-if="!isLoading" class="btn btn-sm btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-primary b-rad-none p-r-30" @click="fetchCompany">Click here to load Package Data</div>
@@ -324,10 +330,12 @@
                 section: 'orderPackageV2Section',
                 isLoading: false,
                 order: null,
-                addComment: false,
                 dataLoaded: false,
             }
         },
+        mounted() {
+            this.fetchCompany();
+        },
         methods: {
             fetchCompany(){
                 this.isLoading = true;