From bf07a928731617f85d941cda6f2d4263141bd9cd Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Tue, 21 Sep 2021 22:37:08 +0800
Subject: [PATCH] container profile page ui

---
 .../Containers/FetchContainerLogic.php        |   2 +-
 .../elements/ContainerComponent.vue           |   3 +
 .../ContainerProfileSectionComponent.vue      | 255 ++++++++++++++++++
 .../pages/templates/warehouseFlow.blade.php   |   4 +
 routes/web.php                                |   6 +
 5 files changed, 269 insertions(+), 1 deletion(-)
 create mode 100644 resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
 create mode 100644 resources/views/pages/templates/warehouseFlow.blade.php

diff --git a/app/Classes/Modules/PackingLists/ControllersLogic/Containers/FetchContainerLogic.php b/app/Classes/Modules/PackingLists/ControllersLogic/Containers/FetchContainerLogic.php
index 8969126c..c8c8548d 100644
--- a/app/Classes/Modules/PackingLists/ControllersLogic/Containers/FetchContainerLogic.php
+++ b/app/Classes/Modules/PackingLists/ControllersLogic/Containers/FetchContainerLogic.php
@@ -53,7 +53,7 @@ class FetchContainerLogic extends AbstractControllerLogic
 
             $this->canFetchContainer->passes();
 
-            $query = $this->fetchesContainer->execute(['id' => $request->route('id')]);
+            $query = $this->fetchesContainer->execute(['id' => $request->route('id'), 'with_packing_lists' => true]);
 
             return $this->resourceResponse(new ContainerResource($query));
 
diff --git a/resources/assets/vue/components/containers/elements/ContainerComponent.vue b/resources/assets/vue/components/containers/elements/ContainerComponent.vue
index e8af2c65..e0f8d191 100644
--- a/resources/assets/vue/components/containers/elements/ContainerComponent.vue
+++ b/resources/assets/vue/components/containers/elements/ContainerComponent.vue
@@ -30,6 +30,9 @@
                             <div class="btn btn-default no-border" @click="expanded = !expanded">
                                 <i class="fa" :class="{'fa-angle-down': !expanded, 'fa-angle-up': expanded}" ></i>
                             </div>
+                             <a class="btn btn-default no-border" :href="route('container.show', item.container_reference)">
+                                <i class="fa fa-angle-right fa-fw"></i>
+                            </a>
                         </div>
                     </div>
                 </div>
diff --git a/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue b/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
new file mode 100644
index 00000000..b63f317c
--- /dev/null
+++ b/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
@@ -0,0 +1,255 @@
+<template>
+<div class="row">
+    <div class="col">
+        <div class="row align-items-center">
+            <div class="col bg-master-light rounded padding-20 m-l-10 m-r-10">
+                <div class="row d-flex justify-content-between align-items-center">
+                    <div class="col-auto">
+                        <div class="row">
+                            <div class="col">
+                                <h5 class="bold m-b-0">{{container.container_reference}}</h5>
+                                <p>{{container.container_number}}</p>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col">
+                                <p class="m-t-0">Container Type: {{container.container_type}}</p>
+                            </div>
+                        </div>
+                    </div>
+                     <div class="col-auto">
+                        <div class="row">
+                            <div class="col">
+                                <h5 class="m-b-0 large-text normal l-20">ETD</h5>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col">
+                                <h5 class="m-t-0 large-text">{{container.transport.current_schedule.etd}}</h5>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-auto">
+                        <div class="row">
+                            <div class="col">
+                                <h5 class="m-b-0 large-text normal l-20">ETA</h5>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col">
+                                <h5 class="m-t-0 large-text">{{container.transport.current_schedule.eta}}</h5>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-auto">
+                        <div class="row">
+                            <div class="col">
+                                <h5 class="m-b-0 large-text normal l-20">Loading Place</h5>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col">
+                                <h5 class="m-t-0 large-text">SHANGHAI, CHINA</h5>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-auto">
+                        <div class="row">
+                            <div class="col">
+                                <h5 class="m-b-0 large-text normal l-20">Destination port</h5>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col">
+                                <h5 class="m-t-0 large-text">PORT KLANG NORTH PORT, MALAYSIA</h5>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-auto p-r-50">
+                        <div class="row">
+                            <div class="col">
+                                <h5 class="m-b-0 large-text normal l-20">Status</h5>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col">
+                                <h5 class="m-t-0 large-text">{{container.status}}</h5>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row m-t-20">
+            <div class="col bg-master-light rounded m-l-10 m-r-10">
+                <div class="row align-items-center p-t-10 p-b-10 padding-10">
+                    <div class="col-auto">
+                        <div class="row">
+                            <div class="col">
+                                <h5 class="bold m-b-0">Package List</h5>
+                                <p>(Total 77 Package in this container)</p>
+                            </div>
+                        </div>
+                    </div>
+                     <div class="col-auto">
+                        <p class="m-b-0">{{ containerFilledPercentage }}%</p>
+                    </div>
+                        <div class="batteryContainer">
+                            <div class="batteryOuter">
+                                <div id="batteryLevel" :style="{ width: svgLenght + 'px' }"></div>
+                            </div>
+                            <div class="batteryBump"></div>
+                        </div>
+                    <div class="col">
+                        <div class="btn btn-default">
+                            Add Package
+                        </div>
+                        <div class="btn btn-default">
+                            Export List
+                        </div>
+                        <div class="btn btn-default">
+                            Print Custom
+                        </div>
+                    </div>
+                    <div class="col-auto p-r-30">
+                        <h5 class="m-b-0 large-text normal l-20">Custom Declaration Status</h5>
+                        <h5 class="m-t-0 text-right">__</h5>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col padding-20 p-l-40 p-r-50">
+                        <div class="row" v-for="packingList in container.packing_lists">
+                            <div class="col">
+                                <div class="row">
+                                    <div class="col">
+                                        <div class="row b-a b-grey bg-master-lightest rounded align-items-center m-b-15 p-t-10 p-b-10" v-for="package_item in packingList.packages">
+                                            <div class="col">{{package_item.description}}</div>
+                                            <div class="col">Quantity: {{package_item.quantity}}</div>
+                                            <div class="col">cbm:{{ package_item.cbm }}</div>
+                                            <div class="col">Remark</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row m-t-10">
+            <div class="col">
+                <div class="row">
+                    <div class="col" style="height: 300px;">
+                        <div class="row h-100">
+                            <div class="col">
+                                <h5 class="m-b-5 large-text bold l-20">Timeline:</h5>
+                                <div class="row h-100 p-l-10 p-r-10">
+                                    <div class="col rounded bg-master-lighter padding-15">
+                                        Timeline
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="row">
+                            <div class="col">
+                                <h5 class="m-b-5 large-text bold l-20">Comments:</h5>
+                                <div class="row p-l-10 p-r-10">
+                                    <div class="col rounded bg-master-lighter padding-15">
+                                        Comments
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="row m-t-15">
+                            <div class="col">
+                                <div class="row p-l-10 p-r-10">
+                                    <div class="col">
+                                        <h5 class="m-b-5 large-text bold l-20">Related documents:</h5>
+                                    </div>
+                                    <div class="co-auto">
+                                        <div class="btn justify-content bg-master-light">
+                                            <i class="fa fa-upload m-r-10" ></i>Upload Documents    
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="row p-l-10 p-r-10">
+                                    <div class="col rounded bg-master-lighter padding-15">
+                                        documents
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+<script>
+    export default {
+        props: {
+            id: {
+                type: Number,
+                required: true,
+            }  
+        },
+        data(){
+            return {
+                section: 'containerPofileSection',
+                isLoading: true,
+                container: null,
+                expanded: false,
+                totalCBM: 6,
+                CBMcapacity: 30,
+                svgLenght: 0,
+                svgLenghtSquare: 0,
+                confirmLanding: false,
+            }
+        },
+        computed: {
+            pendingQueue () {   
+                return this.$store.getters.isInCompleteQueue(this.section);
+            },
+            containerFilledPercentage() {
+                this.svgLenght = this.totalCBM / this.CBMcapacity * 25;
+                this.svgLenghtSquare = this.totalCBM / this.CBMcapacity * 100 -2;
+                return this.totalCBM / this.CBMcapacity * 100;
+            }
+            // totalCbm () {
+            //     let totalCbm = 0;
+                
+            //     return this.container.packing_lists.map(function(packing_list){
+            //         totalCbm += packing_list.packages.reduce((total, obj) => obj.quantity + total, 0);
+            //     })
+            // }
+        },
+        watch: {
+            pendingQueue(inComplete){
+                if(inComplete){
+                    this.fetchCompany();
+                }
+            }
+        },
+        created(){
+            this.$store.dispatch('updateListQueue', {'name': this.section});
+        },
+        methods: {
+            fetchCompany(){
+                this.isLoading = true;
+                this.submit(route('api.packing_list.container.show', this.id), 'get', this.section, false, false)
+            },
+            successHandler(response){
+                this.$store.dispatch('completeList', {'name': this.section, 'data': []});
+                this.isLoading = false;
+                this.container = response.payload.data;
+            },
+            confirmStatus(){
+                this.confirmLanding = true;
+                console.log(this.confirmLanding);
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/views/pages/templates/warehouseFlow.blade.php b/resources/views/pages/templates/warehouseFlow.blade.php
new file mode 100644
index 00000000..6800fcd6
--- /dev/null
+++ b/resources/views/pages/templates/warehouseFlow.blade.php
@@ -0,0 +1,4 @@
+@extends('layouts.base_portal')
+@section('inner_content')
+    <container-profile-section-component :id="{{$id}}"></container-profile-section-component>
+@endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 2eb2bcbb..ad4295ae 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -6,6 +6,7 @@ use App\Classes\Jobs\FetchLoadedContainersFromVTPortalJob;
 use App\Classes\Jobs\FetchPackingListFromVTPortalJob;
 use App\Classes\Jobs\FetchWarehouseReceiveListFromVTPortalJob;
 use App\Models\CompanyConnection;
+use App\Models\Container;
 use Illuminate\Support\Facades\Route;
 
 /*
@@ -70,6 +71,11 @@ Route::get('/containers', function () {
     return view('pages.containers');
 })->name('containers');
 
+Route::get('/container/show/{reference}', function ($reference) {
+    $container = Container::where('reference', $reference)->first();
+    return view('pages.templates.warehouseFlow', ['id' => $container->id]);
+})->name('container.show');
+
 Route::get('/customer/{marking}', function ($marking) {
     $connection = CompanyConnection::where('invitee_reference', $marking)->first();
     $id = $connection->invitee->company->id;