improve load speed by cleaning the resources to reduce the number of queries submitted per request

app/Classes/Modules/Orders/ControllersLogic/FetchOrderLogic.php

@@ -52,7 +52,7 @@ class FetchOrderLogic extends AbstractControllerLogic
 
         $this->canFetchOrder->passes();
 
-        $query = $this->fetchesOrder->execute(['reference' => $request->route('id'), 'with_parcels' => true]);
+        $query = $this->fetchesOrder->execute(['reference' => $request->route('id'), 'with_packing_lists' => true]);
 
         return $this->resourceResponse(new OrderResource($query));
 

app/Http/Resources/OrderResource.php

@@ -19,71 +19,43 @@ class OrderResource extends JsonResource
      */
     public function toArray($request)
     {
-        try {
+        return [
-            return [
+            'id' => $this->id,
-                'id' => $this->id,
+            'reference' => $this->reference,
-                'reference' => $this->reference,
+            'reference_contract' => (int) $this->type,
-                'reference_contract' => (int) $this->type,
+            'type' => (int) $this->type,
-                'type' => (int) $this->type,
+            'status' => (int) $this->status,
-                'status' => (int) $this->status,
+            'company_module' => new CompanyModuleResource($this->companyModule),
-                'company_module' => new CompanyModuleResource($this->companyModule),
+            'warehouse' => new CompanyModuleResource($this->orderRoles()->where('role_id', '=', OrderRoleTypes::ORIGIN_WAREHOUSE)->first()->appointee),
-                'warehouse' => new CompanyModuleResource($this->orderRoles()->where('role_id', '=', OrderRoleTypes::ORIGIN_WAREHOUSE)->first()->appointee),
+            'address' => new AddressResource($this->addresses()->where('status', '=', ApprovalStatus::APPROVED)->first()),
-                'address' => new AddressResource($this->addresses()->where('status', '=', ApprovalStatus::APPROVED)->first()),
+            'address_change_request' => new AddressResource($this->addressesPendingVerification()->first()),
-                'address_change_request' => new AddressResource($this->addressesPendingVerification()->first()),
+            'parcels' =>  $this->whenLoaded('packingLists', function(){
-                $this->mergeWhen($this->relationLoaded('parcels'), [
+                return [
-                    'origin_warehouse_packages' => PackageResource::collection($this->parcels()->whereHas('packingList', function($query){
+                    'origin_warehouse_packages' => PackageResource::collection($this->parcels()->whereDoesntHave('shippingSchedules', function($schedule){
-                        return $query->where('type', PackingListType::SHIPPING_PACKING_LIST)->whereDoesntHave('containers', function($query) {
+                        return $schedule->where('etd', '<', Carbon::now())->where('schedules.status', ApprovalStatus::APPROVED);
-                            return $query->whereHas('transports', function($query){
-                                return $query->whereHas('schedules', function($query){
-                                    return $query->where('etd', '<', Carbon::now());
-                                });
-                            });
-                        });
                     })->get()),
-                    'in_transit_packages' => PackageResource::collection($this->parcels()->whereHas('packingList', function($query){
+                    'in_transit_packages' => PackageResource::collection($this->parcels()->whereHas('shippingSchedules', function($schedule){
-                        return $query->where('type', PackingListType::SHIPPING_PACKING_LIST)->whereHas('containers', function($query) {
+                        return $schedule->where('etd', '<', Carbon::now())->where('schedules.status', ApprovalStatus::APPROVED);
-                            return $query->whereHas('transports', function($query){
+                    })->whereDoesntHave('shippingTransports', function($transport){
-                                return $query->where('status', '=', ApprovalStatus::APPROVED)->whereHas('schedules', function($query){
+                        return $transport->where('transport_arrangements.status', ApprovalStatus::COMPLETED);
-                                    return $query->where('etd', '<', Carbon::now());
-                                });
-                            });
-                        });
                     })->get()),
-                    'destination_warehouse_packages' => PackageResource::collection($this->parcels()->whereHas('packingList', function($query){
+                    'destination_warehouse_packages' => PackageResource::collection($this->parcels()->whereHas('shippingTransports', function($transport){
-                        return $query->where('type', PackingListType::SHIPPING_PACKING_LIST)->whereHas('containers', function($query) {
+                        return $transport->where('transport_arrangements.status', ApprovalStatus::COMPLETED);
-                            return $query->whereHas('transports', function($query){
+                    })->whereDoesntHave('deliverySchedules', function($schedule){
-                                return $query->where('type', '=', TransportType::SEA)->where('status', '=', ApprovalStatus::COMPLETED)->whereHas('schedules', function($query){
+                        return $schedule->where('etd', '<', Carbon::now())->where('schedules.status', ApprovalStatus::APPROVED);
-                                    return $query->where('etd', '<', Carbon::now());
-                                });
-                            });
-                        })->whereDoesntHave('transports', function($query){
-                            return $query->where('type', '=', TransportType::LAND)->where('status', '=', ApprovalStatus::APPROVED)->whereHas('schedules', function($query){
-                                return $query->where('etd', '<', Carbon::now());
-                            });
-                        });
                     })->get()),
-                    'delivered_packages' => PackageResource::collection($this->parcels()->whereHas('packingList', function($query){
+                    'delivered_packages' => PackageResource::collection($this->parcels()->whereHas('shippingSchedules', function($schedule){
-                        return $query->where('type', PackingListType::SHIPPING_PACKING_LIST)->whereHas('containers', function($query) {
+                        return $schedule->where('eta', '<', Carbon::now())->where('schedules.status', ApprovalStatus::APPROVED);
-                            return $query->whereHas('transports', function($query){
+                    })->whereHas('deliverySchedules', function($schedule){
-                                return $query->where('type', '=', TransportType::SEA)->where('status', '=', ApprovalStatus::COMPLETED)->whereHas('schedules', function($query){
+                        return $schedule->where('etd', '<', Carbon::now())->where('schedules.status', ApprovalStatus::APPROVED);
-                                    return $query->where('etd', '<', Carbon::now());
-                                });
-                            });
-                        })->whereHas('transports', function($query){
-                            return $query->where('type', '=', TransportType::LAND)->where('status', '=', ApprovalStatus::APPROVED)->whereHas('schedules', function($query){
-                                return $query->where('etd', '<', Carbon::now());
-                            });
-                        });
                     })->get()),
-                    'parcels' => PackageResource::collection($this->parcels()->whereHas('packingList', function($query){
+                    'received_packages' => PackageResource::collection($this->parcels()->whereHas('packingList', function($query){
                         return $query->where('type', PackingListType::WAREHOUSE_RECEIVE_LIST);
                     })->get()),
-                ]),
+                ];
-                'created_at' => $this->created_at->format('d-m-Y')
+            }),
-            ];
+            'created_at' => $this->created_at->format('d-m-Y')
-        } catch (\Exception $exception){
+        ];
-            $this->id;
-        }
 
     }
 }

app/Http/Resources/PackageResource.php

@@ -26,8 +26,8 @@ class PackageResource extends JsonResource
             'cbm' => (($this->width / 100) * ($this->height / 100) * ($this->length / 100)) * $this->quantity,
             'status' => $this->status,
             'order' => new OrderResource($this->packingList->owner),
-            'container' => new ContainerResource($this->packingList->containers()->first()),
+            'container' => new ContainerResource($this->container),
-            'transport' => new TransportResource($this->packingList->transports()->first())
+            'transport' => new TransportResource($this->transport)
         ];
     }
 }

app/Models/Container.php

@@ -4,11 +4,14 @@ namespace App\Models;
 
 use App\Classes\General\Interfaces\Transportable;
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
+use Illuminate\Database\Eloquent\Relations\HasManyThrough;
 use Illuminate\Database\Eloquent\SoftDeletes;
 use Illuminate\Database\Eloquent\Relations\MorphMany;
+use Staudenmeir\EloquentHasManyDeep\HasRelationships;
 
 class Container extends AbstractModel implements Transportable
 {
+    use HasRelationships;
     use SoftDeletes;
 
     protected $table = 'containers';
@@ -22,6 +25,22 @@ class Container extends AbstractModel implements Transportable
         return $this->belongsToMany(PackingList::class, ContainerPackingList::class, 'container_id', 'packing_list_id');
     }
 
+    /**
+     * @return HasManyThrough
+     */
+    public function packages(): hasManyThrough
+    {
+        return $this->hasManyDeep(Package::class, [ContainerPackingList::class, PackingList::class], ['container_id', 'id', 'packing_list_id'], ['id', 'packing_list_id', 'id']);
+    }
+
+    /**
+     * @return HasManyThrough
+     */
+    public function companyModules(): hasManyThrough
+    {
+        return $this->hasManyDeep(CompanyModule::class, [ContainerPackingList::class, PackingList::class, Order::class], ['container_id', 'id', 'company_module'], ['id', 'packing_list_id', 'id']);
+    }
+
     /**
      * @return MorphMany
      */

app/Models/Package.php

@@ -3,12 +3,16 @@
 namespace App\Models;
 
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasManyThrough;
 use Illuminate\Database\Eloquent\Relations\HasOneThrough;
 use Illuminate\Database\Eloquent\Relations\MorphTo;
 use Illuminate\Database\Eloquent\SoftDeletes;
+use Staudenmeir\EloquentHasManyDeep\HasOneDeep;
+use Staudenmeir\EloquentHasManyDeep\HasRelationships;
 
 class Package extends AbstractModel
 {
+    use HasRelationships;
     use SoftDeletes;
 
     protected $table = 'packages';
@@ -21,4 +25,52 @@ class Package extends AbstractModel
         return $this->belongsTo(PackingList::class, 'packing_list_id');
     }
 
+    /**
+     * @return HasManyThrough
+     */
+    public function shippingTransports(): hasManyThrough
+    {
+        return $this->hasManyDeep(Transport::class, [PackingList::class, ContainerPackingList::class, Container::class], ['id', 'packing_list_id', 'id', ['owner_type', 'owner_id']], ['packing_list_id', 'id', 'container_id', null]);
+    }
+
+    /**
+     * @return HasManyThrough
+     */
+    public function shippingSchedules(): hasManyThrough
+    {
+        return $this->hasManyDeep(Schedule::class, [PackingList::class, ContainerPackingList::class, Container::class, Transport::class], ['id', 'packing_list_id', 'id', ['owner_type', 'owner_id'], ['owner_type', 'owner_id']], ['packing_list_id', 'id', 'container_id', null, null]);
+    }
+
+    /**
+     * @return HasManyThrough
+     */
+    public function deliveryTransports(): hasManyThrough
+    {
+        return $this->hasManyDeep(Transport::class, [PackingList::class], ['id', ['owner_type', 'owner_id']], ['packing_list_id', null]);
+    }
+
+    /**
+     * @return HasManyThrough
+     */
+    public function deliverySchedules(): hasManyThrough
+    {
+        return $this->hasManyDeep(Schedule::class, [PackingList::class, Transport::class], ['id', ['owner_type', 'owner_id'], ['owner_type', 'owner_id']], ['packing_list_id', null, null]);
+    }
+
+    /**
+     * @return hasOneDeep
+     */
+    public function container(): hasOneDeep
+    {
+        return $this->hasOneDeep(Container::class, [PackingList::class, ContainerPackingList::class], ['id', 'packing_list_id', 'id'], ['packing_list_id', 'id', 'container_id']);
+    }
+
+    /**
+     * @return hasOneDeep
+     */
+    public function transport(): hasOneDeep
+    {
+        return $this->hasOneDeep(Transport::class, [PackingList::class], ['id', ['owner_type', 'owner_id']], ['packing_list_id', null]);
+    }
+
 }

composer.json

@@ -7,7 +7,7 @@
     "require": {
         "php": "^7.3",
         "ext-fileinfo": "^7.3",
-        "ext-json": "^1.7",
+        "ext-json": "*",
         "barryvdh/laravel-dompdf": "^0.9.0",
         "carlos-meneses/laravel-mpdf": "^2.1",
         "doctrine/dbal": "^3.1",
@@ -21,6 +21,7 @@
         "rinvex/countries": "^6.1",
         "spatie/laravel-activitylog": "^3.14",
         "spatie/laravel-permission": "^4.2",
+        "staudenmeir/eloquent-has-many-deep": "^1.7",
         "tymon/jwt-auth": "^1.0"
     },
     "require-dev": {

resources/assets/vue/components/orders/elements/OrderComponent.vue

@@ -51,15 +51,15 @@
                     <div class="row text-center">
                         <div class="col b-r b-grey text-info p-t-5 p-b-10">
                             <small class="fs-10 all-caps bold">Received</small>
-                            <h6 class="bold no-margin text-info">{{item.parcels.reduce((total, obj) => obj.quantity + total, 0)}}</h6>
+                            <h6 class="bold no-margin text-info">{{item.parcels.received_packages.reduce((total, obj) => obj.quantity + total, 0)}}</h6>
                         </div>
                         <div class="col b-r b-grey text-primary p-t-5 p-b-10">
                             <small class="fs-10 all-caps bold">In Transit</small>
-                            <h6 class="bold no-margin text-primary">{{item.in_transit_packages.reduce((total, obj) => obj.quantity + total, 0)}}</h6>
+                            <h6 class="bold no-margin text-primary">{{item.parcels.in_transit_packages.reduce((total, obj) => obj.quantity + total, 0)}}</h6>
                         </div>
                         <div class="col text-success p-t-5 p-b-10">
                             <small class="fs-10 all-caps bold">Delivered</small>
-                            <h6 class="bold no-margin text-success">{{item.delivered_packages.reduce((total, obj) => obj.quantity + total, 0)}}</h6>
+                            <h6 class="bold no-margin text-success">{{item.parcels.delivered_packages.reduce((total, obj) => obj.quantity + total, 0)}}</h6>
                         </div>
                     </div>
                 </div>
@@ -79,7 +79,7 @@
                         </div>
                         <div class="col-auto text-right">
                             <small class="fs-10 all-caps muted">Total CBM</small>
-                            <h6 class="no-margin semi-bold">{{(Math.ceil((item.origin_warehouse_packages.reduce((total, obj) => obj.cbm + total, 0) + item.in_transit_packages.reduce((total, obj) => obj.cbm + total, 0) + item.delivered_packages.reduce((total, obj) => obj.cbm + total, 0)) * 10000) / 10000).toFixed(3)}}</h6>
+                            <h6 class="no-margin semi-bold">{{(Math.ceil((item.parcels.origin_warehouse_packages.reduce((total, obj) => obj.cbm + total, 0) + item.parcels.in_transit_packages.reduce((total, obj) => obj.cbm + total, 0) + item.parcels.delivered_packages.reduce((total, obj) => obj.cbm + total, 0)) * 10000) / 10000).toFixed(3)}}</h6>
                         </div>
                     </div>
                 </div>

resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue

@@ -235,7 +235,7 @@
                                                     </div>
                                                     <div class="row">
                                                         <div class="col">
-                                                            <parcel-component v-for="parcel in order.parcels" :data="parcel" :key="parcel.id"></parcel-component>
+                                                            <parcel-component v-for="parcel in order.parcels.received_packages" :data="parcel" :key="parcel.id"></parcel-component>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -244,16 +244,16 @@
                                         <div class="col">
                                             <div class="row">
                                                 <div class="col">
-                                                    <div class="row" v-if="order.origin_warehouse_packages.length">
+                                                    <div class="row" v-if="order.parcels.origin_warehouse_packages.length">
                                                         <div class="col">
-                                                            <div class="row" v-for="group in Math.ceil(order.origin_warehouse_packages.length / 2)">
+                                                            <div class="row" v-for="group in Math.ceil(order.parcels.origin_warehouse_packages.length / 2)">
-                                                                <div class="col-12 p-r-0" :class="'col-md-'+(12/2)" v-for="item in order.origin_warehouse_packages.slice((group - 1) * 2, group * 2)" v-bind:key="item.id" :data="item">
+                                                                <div class="col-12 p-r-0" :class="'col-md-'+(12/2)" v-for="item in order.parcels.origin_warehouse_packages.slice((group - 1) * 2, group * 2)" v-bind:key="item.id" :data="item">
                                                                     <package-component :data="item" status="Ready To Ship"></package-component>
                                                                 </div>
                                                             </div>
                                                         </div>
                                                     </div>
-                                                    <div class="row align-items-center justify-content-center p-t-50 p-b-50" v-if="!order.origin_warehouse_packages.length">
+                                                    <div class="row align-items-center justify-content-center p-t-50 p-b-50" v-if="!order.parcels.origin_warehouse_packages.length">
                                                         <div class="col-10">
                                                             <div class="row align-items-center justify-content-center  hint-text">
                                                                 <div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>
@@ -277,16 +277,16 @@
                                         <div class="col">
                                             <div class="row">
                                                 <div class="col">
-                                                    <div class="row" v-if="order.in_transit_packages.length">
+                                                    <div class="row" v-if="order.parcels.in_transit_packages.length">
                                                         <div class="col">
-                                                            <div class="row" v-for="group in Math.ceil(order.in_transit_packages.length / 3)">
+                                                            <div class="row" v-for="group in Math.ceil(order.parcels.in_transit_packages.length / 3)">
-                                                                <div class="col-12" :class="'col-md-'+(12/3)" v-for="item in order.in_transit_packages.slice((group - 1) * 3, group * 3)" v-bind:key="item.id" :data="item">
+                                                                <div class="col-12" :class="'col-md-'+(12/3)" v-for="item in order.parcels.in_transit_packages.slice((group - 1) * 3, group * 3)" v-bind:key="item.id" :data="item">
                                                                     <package-component :data="item" status="Shipping"></package-component>
                                                                 </div>
                                                             </div>
                                                         </div>
                                                     </div>
-                                                    <div class="row align-items-center justify-content-center p-t-50 p-b-50" v-if="!order.in_transit_packages.length">
+                                                    <div class="row align-items-center justify-content-center p-t-50 p-b-50" v-if="!order.parcels.in_transit_packages.length">
                                                         <div class="col-10">
                                                             <div class="row align-items-center justify-content-center  hint-text">
                                                                 <div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>
@@ -310,16 +310,16 @@
                                         <div class="col">
                                             <div class="row">
                                                 <div class="col">
-                                                    <div class="row" v-if="order.destination_warehouse_packages.length">
+                                                    <div class="row" v-if="order.parcels.destination_warehouse_packages.length">
                                                         <div class="col">
-                                                            <div class="row" v-for="group in Math.ceil(order.destination_warehouse_packages.length / 3)">
+                                                            <div class="row" v-for="group in Math.ceil(order.parcels.destination_warehouse_packages.length / 3)">
-                                                                <div class="col-12" :class="'col-md-'+(12/3)" v-for="item in order.destination_warehouse_packages.slice((group - 1) * 3, group * 3)" v-bind:key="item.id" :data="item">
+                                                                <div class="col-12" :class="'col-md-'+(12/3)" v-for="item in order.parcels.destination_warehouse_packages.slice((group - 1) * 3, group * 3)" v-bind:key="item.id" :data="item">
                                                                     <package-component :data="item" status="Preparing Delivery"></package-component>
                                                                 </div>
                                                             </div>
                                                         </div>
                                                     </div>
-                                                    <div class="row align-items-center justify-content-center p-t-50 p-b-50" v-if="!order.destination_warehouse_packages.length">
+                                                    <div class="row align-items-center justify-content-center p-t-50 p-b-50" v-if="!order.parcels.destination_warehouse_packages.length">
                                                         <div class="col-10">
                                                             <div class="row align-items-center justify-content-center  hint-text">
                                                                 <div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>
@@ -343,16 +343,16 @@
                                         <div class="col">
                                             <div class="row">
                                                 <div class="col">
-                                                    <div class="row" v-if="order.delivered_packages.length">
+                                                    <div class="row" v-if="order.parcels.delivered_packages.length">
                                                         <div class="col">
-                                                            <div class="row" v-for="group in Math.ceil(order.delivered_packages.length / 3)">
+                                                            <div class="row" v-for="group in Math.ceil(order.parcels.delivered_packages.length / 3)">
-                                                                <div class="col-12" :class="'col-md-'+(12/3)" v-for="item in order.delivered_packages.slice((group - 1) * 3, group * 3)" v-bind:key="item.id" :data="item">
+                                                                <div class="col-12" :class="'col-md-'+(12/3)" v-for="item in order.parcels.delivered_packages.slice((group - 1) * 3, group * 3)" v-bind:key="item.id" :data="item">
                                                                     <package-component :data="item" status="Delivered"></package-component>
                                                                 </div>
                                                             </div>
                                                         </div>
                                                     </div>
-                                                    <div class="row align-items-center justify-content-center p-t-50 p-b-50" v-if="!order.delivered_packages.length">
+                                                    <div class="row align-items-center justify-content-center p-t-50 p-b-50" v-if="!order.parcels.delivered_packages.length">
                                                         <div class="col-10">
                                                             <div class="row align-items-center justify-content-center  hint-text">
                                                                 <div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>

resources/assets/vue/components/orders/sections/OrderSectionComponent.vue

@@ -153,7 +153,7 @@
                                 <div class="col">
                                     <div class="row">
                                         <div class="col">
-                                            <list-component v-show="!$store.getters.isShowing('createOrderForm')" section="pendingOrderListSection" :endpoint="route('api.order.list')" :options="item ? {per_page: 12, status_in: [1], company_module_id: item.company_module.id} : {per_page: 30, status_in: [1]}" :columns=3>
+                                            <list-component v-show="!$store.getters.isShowing('createOrderForm')" section="pendingOrderListSection" :endpoint="route('api.order.list')" :options="item ? {per_page: 12, status_in: [1], company_module_id: item.company_module.id, with_packing_lists: true} : {per_page: 30, status_in: [1], with_packing_lists: true}" :columns=3>
                                                 <template slot="list" slot-scope="{data}">
                                                     <order-component :data="data"></order-component>
                                                 </template>
@@ -170,7 +170,7 @@
                                 <div class="col">
                                     <div class="row">
                                         <div class="col">
-                                            <list-component v-show="!$store.getters.isShowing('createOrderForm')" section="activeOrderListSection" :endpoint="route('api.order.list')" :options="item ? {per_page: 12, order_by: {column: 'created_at', DESC: false}, status_in: [2], company_module_id: item.company_module.id} : {per_page: 30, order_by: {column: 'created_at', DESC: true}, status_in: [2]}" :columns=3>
+                                            <list-component v-show="!$store.getters.isShowing('createOrderForm')" section="activeOrderListSection" :endpoint="route('api.order.list')" :options="item ? {per_page: 12, order_by: {column: 'created_at', DESC: false}, status_in: [2], company_module_id: item.company_module.id, with_packing_lists: true} : {per_page: 30, order_by: {column: 'created_at', DESC: true}, status_in: [2], with_packing_lists: true}" :columns=3>
                                                 <template slot="list" slot-scope="{data}">
                                                     <order-component :data="data"></order-component>
                                                 </template>
@@ -187,7 +187,7 @@
                                 <div class="col">
                                     <div class="row">
                                         <div class="col">
-                                            <list-component v-show="!$store.getters.isShowing('createOrderForm')" section="completeOrderListSection" :endpoint="route('api.order.list')" :options="item ? {per_page: 12, status_in: [3], company_module_id: item.company_module.id} : {per_page: 30, status_in: [3]}" :columns=3>
+                                            <list-component v-show="!$store.getters.isShowing('createOrderForm')" section="completeOrderListSection" :endpoint="route('api.order.list')" :options="item ? {per_page: 12, status_in: [3], company_module_id: item.company_module.id, with_packing_lists: true} : {per_page: 30, status_in: [3], with_packing_lists: true}" :columns=3>
                                                 <template slot="list" slot-scope="{data}">
                                                     <order-component :data="data"></order-component>
                                                 </template>
@@ -204,7 +204,7 @@
                                 <div class="col">
                                     <div class="row">
                                         <div class="col">
-                                            <list-component v-show="!$store.getters.isShowing('createOrderForm')" section="cancelledOrderListSection" :endpoint="route('api.order.list')" :options="item ? {per_page: 12, status_in: [4, 5, 6], company_module_id: item.company_module.id} : {per_page: 30, status_in: [4, 5, 6]}" :columns=3>
+                                            <list-component v-show="!$store.getters.isShowing('createOrderForm')" section="cancelledOrderListSection" :endpoint="route('api.order.list')" :options="item ? {per_page: 12, status_in: [4, 5, 6], company_module_id: item.company_module.id, with_packing_lists: true} : {per_page: 30, status_in: [4, 5, 6], with_packing_lists: true}" :columns=3>
                                                 <template slot="list" slot-scope="{data}">
                                                     <order-component :data="data"></order-component>
                                                 </template>