mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
Dillon Ngo
164 lines
12 KiB
Vue
164 lines
12 KiB
Vue
<template>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-4">
|
|
<loading-component style="height: 200px; top: 0;" v-if="isLoading"></loading-component>
|
|
<div class="row" v-if="!isLoading && order">
|
|
<div class="col bg-complete-lighter p-b-10 ml-4 mr-4 mt-2 m-sm-0">
|
|
<div class="row align-item-center p-t-10 p-b-10">
|
|
<div class="col">
|
|
<h6 class="bold no-margin">Received Parcels</h6>
|
|
<p class="no-margin ">Parcels received at our warehouse</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
|
width="40" height="40"
|
|
viewBox="0 0 172 172"
|
|
style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#000000"><path d="M8.6,23.65c-2.37676,0 -4.3,1.92324 -4.3,4.3c0,2.37676 1.92324,4.3 4.3,4.3c2.37676,0 4.3,-1.92324 4.3,-4.3c4.77031,0 8.6,3.82969 8.6,8.6v85.10137c0,8.28926 6.76074,15.05 15.05,15.05h0.50391c0.99941,2.98145 3.72051,5.19863 7.02109,5.19863h4.43438c-0.74746,1.26816 -1.20938,2.72949 -1.20938,4.3c0,4.72832 3.87168,8.6 8.6,8.6c4.72832,0 8.6,-3.87168 8.6,-8.6c0,-1.57051 -0.46191,-3.03184 -1.20938,-4.3h66.91875c-0.74746,1.26816 -1.20937,2.72949 -1.20937,4.3c0,4.72832 3.87168,8.6 8.6,8.6c4.72832,0 8.6,-3.87168 8.6,-8.6c0,-1.57051 -0.46191,-3.03184 -1.20937,-4.3h4.43437c3.36777,0 6.13926,-2.30117 7.08828,-5.375h0.43672v-2.15c0,-3.90527 -3.04863,-7.12188 -6.87832,-7.45781c0.26035,-0.69707 0.42832,-1.43613 0.42832,-2.21719v-40.85c0,-1.67129 -0.73066,-3.14941 -1.78887,-4.3c1.0582,-1.15059 1.78887,-2.62871 1.78887,-4.3v-43c0,-3.53574 -2.91426,-6.45 -6.45,-6.45h-94.6c-3.53574,0 -6.45,2.91426 -6.45,6.45v43c0,1.67129 0.73066,3.14941 1.78887,4.3c-1.0582,1.15059 -1.78887,2.62871 -1.78887,4.3v40.85c0,0.78105 0.16797,1.52012 0.42832,2.21719c-3.15781,0.27715 -5.75293,2.51953 -6.57598,5.48418h-0.30234c-5.96289,0 -10.75,-4.78711 -10.75,-10.75v-85.10137c0,-7.09668 -5.80332,-12.9 -12.9,-12.9zM49.45,30.1h94.6c1.21777,0 2.15,0.93223 2.15,2.15v43c0,1.21777 -0.93223,2.15 -2.15,2.15c-1.17578,0.0168 -2.11641,0.97422 -2.11641,2.15c0,1.17578 0.94062,2.1332 2.11641,2.15c1.21777,0 2.15,0.93223 2.15,2.15v40.85c0,1.21777 -0.93223,2.15 -2.15,2.15h-94.6c-1.21777,0 -2.15,-0.93223 -2.15,-2.15v-40.85c0,-1.21777 0.93223,-2.15 2.15,-2.15c1.17578,-0.0168 2.11641,-0.97422 2.11641,-2.15c0,-1.17578 -0.94063,-2.1332 -2.11641,-2.15c-1.21777,0 -2.15,-0.93223 -2.15,-2.15v-43c0,-1.21777 0.93223,-2.15 2.15,-2.15zM88.15,38.7c-0.77266,-0.0084 -1.49492,0.39473 -1.88965,1.0666c-0.38633,0.67188 -0.38633,1.49492 0,2.1668c0.39473,0.67188 1.11699,1.075 1.88965,1.0666h17.2c0.77266,0.0084 1.49492,-0.39473 1.88965,-1.0666c0.38633,-0.67187 0.38633,-1.49492 0,-2.1668c-0.39472,-0.67187 -1.11699,-1.075 -1.88965,-1.0666zM58.05,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM66.65,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM75.25,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM83.85,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM92.45,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM101.05,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM109.65,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM118.25,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM126.85,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM135.45,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM88.15,90.3c-0.77266,-0.0084 -1.49492,0.39473 -1.88965,1.0666c-0.38633,0.67188 -0.38633,1.49492 0,2.1668c0.39473,0.67188 1.11699,1.075 1.88965,1.0666h17.2c0.77266,0.0084 1.49492,-0.39473 1.88965,-1.0666c0.38633,-0.67187 0.38633,-1.49492 0,-2.1668c-0.39472,-0.67187 -1.11699,-1.075 -1.88965,-1.0666zM44.075,131.15h105.35c1.80566,0 3.225,1.41934 3.225,3.225c0,1.80566 -1.41934,3.225 -3.225,3.225h-105.35c-1.80566,0 -3.225,-1.41934 -3.225,-3.225c0,-1.80566 1.41934,-3.225 3.225,-3.225zM55.9,141.9c2.40195,0 4.3,1.89805 4.3,4.3c0,2.40195 -1.89805,4.3 -4.3,4.3c-2.40195,0 -4.3,-1.89805 -4.3,-4.3c0,-2.40195 1.89805,-4.3 4.3,-4.3zM137.6,141.9c2.40195,0 4.3,1.89805 4.3,4.3c0,2.40195 -1.89805,4.3 -4.3,4.3c-2.40195,0 -4.3,-1.89805 -4.3,-4.3c0,-2.40195 1.89805,-4.3 4.3,-4.3z"></path></g></g></svg>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-if="authStore.isSuperAdmin">
|
|
<div class="col">
|
|
<div data-type="createWarehousePackageList" class="text-complete pointer requestModal fs-11 all-caps text-underline">Add Arrived Parcel</div>
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="stick-up" type="createWarehousePackageList" >
|
|
<create-warehouse-package-list-form-component :id="order.id" :section="section"></create-warehouse-package-list-form-component>
|
|
</modal-component>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-if="order.received_packages" v-for="(group, reference, index) in groupedParcelsByReference" :key="reference">
|
|
<div class="col">
|
|
<parcel-component
|
|
v-for="parcel in group"
|
|
:key="parcel.id"
|
|
:data="parcel"
|
|
:section="section"
|
|
></parcel-component>
|
|
<div class="row justify-content-center mt-3">
|
|
<div class="col-auto">
|
|
<p class="no-margin bold fs-14">
|
|
<a :href="route('order.tracking', group[0].reference_encrypted)" target="_blank">
|
|
Tracking Details <i class="fa fa-external-link"></i>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr v-if="index < Object.keys(groupedParcelsByReference).length - 1" class="my-2" style="border: none; border-top: 1px solid #000;" />
|
|
</div>
|
|
</div>
|
|
<!-- <div class="row" v-if="order.received_packages">
|
|
<div class="col">
|
|
<parcel-component :section="section" v-for="parcel in order.received_packages.flatMap((packing_list: any) => packing_list.packages)" :data="parcel" :key="parcel.id"></parcel-component>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<!-- cief todo: 150 -->
|
|
<loading-component style="height: 200px; top: 0;" v-if="isLoading"></loading-component>
|
|
<div class="row" v-if="!isLoading && order">
|
|
<div class="col">
|
|
<div class="row" v-if="order.received_packages.flatMap((packing_list: any) => packing_list.packages).length">
|
|
<div class="col">
|
|
<div class="row" v-for="group in Math.ceil(order.received_packages.flatMap((packing_list: any) => packing_list.packages).length / 3)">
|
|
<div class="col-12" :class="'col-md-'+(12/3)" v-for="item in order.received_packages.flatMap((packing_list: any) => packing_list.packages).slice((group - 1) * 3, group * 3)" v-bind:key="item.id" :data="item">
|
|
<package-v2-component :section="section" :data="item" status="Shipping"></package-v2-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center justify-content-center p-t-50 p-b-50" v-if="!packagesList.length">
|
|
<div class="col-10">
|
|
<div class="row align-items-center justify-content-center hint-text">
|
|
<div class="col-4 hint-text"><img :src="asset('images/not-found-illustration.png')" class="w-100 hint-text"/></div>
|
|
</div>
|
|
<div class="row text-center">
|
|
<div class="col">
|
|
<div class="row m-t-20">
|
|
<div class="col">
|
|
<p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">Nothing To Show Here Yet!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted } from 'vue';
|
|
import { useAuthStore } from '@/stores/auth';
|
|
import { useRequest } from '@/composables/useRequest';
|
|
import { route } from '@/general/functions/router';
|
|
|
|
interface Props {
|
|
order_number: number;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const asset = window.Vapor.asset;
|
|
|
|
const authStore = useAuthStore();
|
|
const { submit } = useRequest();
|
|
|
|
const section = ref('orderPackageV4Section');
|
|
const isLoading = ref(false);
|
|
const order = ref<any>(null);
|
|
const dataLoaded = ref(false);
|
|
const filters = ref({});
|
|
|
|
const groupedParcelsByReference = computed(() => {
|
|
const groups: Record<string, any[]> = {};
|
|
|
|
if (!order.value?.received_packages) return groups;
|
|
|
|
const parcels = order.value.received_packages.flatMap((p: any) => p.packages);
|
|
|
|
for (const parcel of parcels) {
|
|
const ref = parcel.reference_hash;
|
|
if (!groups[ref]) {
|
|
groups[ref] = [];
|
|
}
|
|
groups[ref].push(parcel);
|
|
}
|
|
|
|
return groups;
|
|
});
|
|
|
|
const packagesList = computed(() => {
|
|
const origin = order.value?.origin_warehouse_packages || [];
|
|
const received = order.value?.received_packages || [];
|
|
|
|
const source = origin.length ? origin : received;
|
|
|
|
return source.flatMap((packing_list: any) => packing_list.packages || []);
|
|
});
|
|
|
|
const fetch = () => {
|
|
isLoading.value = true;
|
|
submit(
|
|
route('api.order.packages.received.v2', props.order_number) + '?filters=' + JSON.stringify(filters.value),
|
|
'get',
|
|
section.value,
|
|
false,
|
|
false,
|
|
null,
|
|
{ successHandler }
|
|
);
|
|
};
|
|
|
|
const successHandler = (response: any) => {
|
|
dataLoaded.value = true;
|
|
isLoading.value = false;
|
|
order.value = response.payload.data;
|
|
};
|
|
|
|
onMounted(() => {
|
|
fetch();
|
|
});
|
|
</script>
|