mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
container profile page ui
This commit is contained in:
edmondlang
+1
-1
@@ -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));
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
+255
@@ -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>
|
||||
@@ -0,0 +1,4 @@
|
||||
@extends('layouts.base_portal')
|
||||
@section('inner_content')
|
||||
<container-profile-section-component :id="{{$id}}"></container-profile-section-component>
|
||||
@endsection
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user