From b36313e24c360c125c89ce602be0486e4a403a63 Mon Sep 17 00:00:00 2001
From: glovetleong <glovetleong@gmail.com>
Date: Sun, 10 Oct 2021 15:22:49 +0800
Subject: [PATCH 1/4] remark for order, container, packing list

---
 .../AssignOrderRemarkLogic.php                | 67 ++++++++++++++++++
 .../Orders/Services/CreatesOrderRemark.php    | 29 ++++++++
 .../AssignPackingListRemarkLogic.php          | 67 ++++++++++++++++++
 .../Containers/AssignContainerRemarkLogic.php | 68 +++++++++++++++++++
 .../Containers/CreatesContainerRemark.php     | 29 ++++++++
 .../Services/CreatesPackingListRemark.php     | 29 ++++++++
 .../Orders/AssignOrderRemarkController.php    | 20 ++++++
 .../AssignPackingListRemarkController.php     | 20 ++++++
 .../AssignContainerRemarkController.php       | 20 ++++++
 app/Models/Container.php                      |  8 +++
 app/Models/Order.php                          |  8 +++
 app/Models/PackingList.php                    |  8 +++
 routes/order.php                              |  2 +-
 routes/packing_list.php                       |  3 +-
 14 files changed, 376 insertions(+), 2 deletions(-)
 create mode 100644 app/Classes/Modules/Orders/ControllersLogic/AssignOrderRemarkLogic.php
 create mode 100644 app/Classes/Modules/Orders/Services/CreatesOrderRemark.php
 create mode 100644 app/Classes/Modules/PackingLists/ControllersLogic/AssignPackingListRemarkLogic.php
 create mode 100644 app/Classes/Modules/PackingLists/ControllersLogic/Containers/AssignContainerRemarkLogic.php
 create mode 100644 app/Classes/Modules/PackingLists/Services/Containers/CreatesContainerRemark.php
 create mode 100644 app/Classes/Modules/PackingLists/Services/CreatesPackingListRemark.php
 create mode 100644 app/Http/Controllers/Orders/AssignOrderRemarkController.php
 create mode 100644 app/Http/Controllers/PackingLists/AssignPackingListRemarkController.php
 create mode 100644 app/Http/Controllers/PackingLists/Containers/AssignContainerRemarkController.php

diff --git a/app/Classes/Modules/Orders/ControllersLogic/AssignOrderRemarkLogic.php b/app/Classes/Modules/Orders/ControllersLogic/AssignOrderRemarkLogic.php
new file mode 100644
index 00000000..e16886f6
--- /dev/null
+++ b/app/Classes/Modules/Orders/ControllersLogic/AssignOrderRemarkLogic.php
@@ -0,0 +1,67 @@
+<?php
+
+namespace App\Classes\Modules\Orders\ControllersLogic;
+
+use App\Classes\General\Abstracts\AbstractControllerLogic;
+use App\Classes\Modules\Orders\Services\CreatesOrderRemark;
+use App\Classes\Modules\Remarks\Standards\Rules\CanCreateRemark;
+use App\Classes\Modules\Remarks\DataTransferObjects\RemarkObject;
+use App\Classes\Modules\Orders\Services\FetchesOrder;
+use App\Http\Resources\RemarkResource;
+use ErrorException;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class AssignOrderRemarkLogic extends AbstractControllerLogic
+{
+
+    /**
+     * @return array
+     */
+    protected function notification():array {
+        return [
+            'title' => 'Created Order Remark',
+            'message' => 'You have successfully created a new Order Remark'
+        ];
+    }
+
+    /** @var CanCreateRemark */
+    private $canCreateRemark;
+
+    /** @var CreatesOrderRemark */
+    private $createsOrderRemark;
+
+    /** @var FetchesOrder */
+    private $fetchesOrder;
+
+    /**
+     * CreateRemarkLogic constructor.
+     * @param CanCreateRemark $canCreateRemark
+     * @param CreatesOrderRemark $createsOrderRemark
+     */
+    public function __construct(CanCreateRemark $canCreateRemark, CreatesOrderRemark $createsOrderRemark, FetchesOrder $fetchesOrder)
+    {
+        $this->canCreateRemark = $canCreateRemark;
+        $this->createsOrderRemark = $createsOrderRemark;
+        $this->fetchesOrder = $fetchesOrder;
+    }
+
+    /**
+     * @param Request $request
+     * @return JsonResponse
+     * @throws \App\Classes\Exceptions\AccessForbiddenException
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     * @throws \App\Classes\Exceptions\RequestValidationException
+     */
+    public function logic(Request $request) : JsonResponse
+    {
+        $object = new RemarkObject(
+            $request->input('content'), 
+            $request->route('id')
+        );
+
+        $this->canCreateRemark->passes($object);
+        $query = $this->createsOrderRemark->execute($this->fetchesOrder->execute(['id' => $request->route('id')]), $object);
+        return $this->resourceResponse( new RemarkResource($query));
+    }
+}
diff --git a/app/Classes/Modules/Orders/Services/CreatesOrderRemark.php b/app/Classes/Modules/Orders/Services/CreatesOrderRemark.php
new file mode 100644
index 00000000..50df32bc
--- /dev/null
+++ b/app/Classes/Modules/Orders/Services/CreatesOrderRemark.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Classes\Modules\Orders\Services;
+
+use App\Classes\General\Eloquent\AbstractUpdateRecord;
+use App\Classes\General\Eloquent\AbstractUpdateRelationshipRecord;
+use App\Classes\Modules\Remarks\DataTransferObjects\RemarkObject;
+use App\Models\Remark;
+use App\Models\Order;
+
+class CreatesOrderRemark extends AbstractUpdateRelationshipRecord
+{
+
+    /**
+     * @param Company $company
+     * @param RemarkObject $object
+     * @return \Illuminate\Database\Eloquent\Model
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     */
+    public function execute(Order $order, RemarkObject $object) {
+        $model = new Remark();
+
+        $model->commenter_id = $object->getCommenterId();
+        $model->content = $object->getContent();
+
+        return $this->handler($order->remarks(), $model);
+
+    }
+}
diff --git a/app/Classes/Modules/PackingLists/ControllersLogic/AssignPackingListRemarkLogic.php b/app/Classes/Modules/PackingLists/ControllersLogic/AssignPackingListRemarkLogic.php
new file mode 100644
index 00000000..980bc5b9
--- /dev/null
+++ b/app/Classes/Modules/PackingLists/ControllersLogic/AssignPackingListRemarkLogic.php
@@ -0,0 +1,67 @@
+<?php
+
+namespace App\Classes\Modules\PackingLists\ControllersLogic;
+
+use App\Classes\General\Abstracts\AbstractControllerLogic;
+use App\Classes\Modules\PackingLists\Services\CreatesPackingListRemark;
+use App\Classes\Modules\Remarks\Standards\Rules\CanCreateRemark;
+use App\Classes\Modules\Remarks\DataTransferObjects\RemarkObject;
+use App\Classes\Modules\PackingLists\Services\FetchesPackingList;
+use App\Http\Resources\RemarkResource;
+use ErrorException;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class AssignPackingListRemarkLogic extends AbstractControllerLogic
+{
+
+    /**
+     * @return array
+     */
+    protected function notification():array {
+        return [
+            'title' => 'Created Packing List Remark',
+            'message' => 'You have successfully created a new Packing List Remark'
+        ];
+    }
+
+    /** @var CanCreateRemark */
+    private $canCreateRemark;
+
+    /** @var CreatesPackingListRemark */
+    private $createsPackingListRemark;
+
+    /** @var FetchesPackingList */
+    private $fetchesPackingList;
+
+    /**
+     * CreateRemarkLogic constructor.
+     * @param CanCreateRemark $canCreateRemark
+     * @param CreatesPackingListRemark $createsPackingListRemark
+     */
+    public function __construct(CanCreateRemark $canCreateRemark, CreatesPackingListRemark $createsPackingListRemark, FetchesPackingList $fetchesPackingList)
+    {
+        $this->canCreateRemark = $canCreateRemark;
+        $this->createsPackingListRemark = $createsPackingListRemark;
+        $this->fetchesPackingList = $fetchesPackingList;
+    }
+
+    /**
+     * @param Request $request
+     * @return JsonResponse
+     * @throws \App\Classes\Exceptions\AccessForbiddenException
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     * @throws \App\Classes\Exceptions\RequestValidationException
+     */
+    public function logic(Request $request) : JsonResponse
+    {
+        $object = new RemarkObject(
+            $request->input('content'), 
+            $request->route('id')
+        );
+
+        $this->canCreateRemark->passes($object);
+        $query = $this->createsPackingListRemark->execute($this->fetchesPackingList->execute(['id' => $request->route('id')]), $object);
+        return $this->resourceResponse( new RemarkResource($query));
+    }
+}
diff --git a/app/Classes/Modules/PackingLists/ControllersLogic/Containers/AssignContainerRemarkLogic.php b/app/Classes/Modules/PackingLists/ControllersLogic/Containers/AssignContainerRemarkLogic.php
new file mode 100644
index 00000000..24e59b83
--- /dev/null
+++ b/app/Classes/Modules/PackingLists/ControllersLogic/Containers/AssignContainerRemarkLogic.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace App\Classes\Modules\PackingLists\ControllersLogic\Containers;
+
+use App\Classes\General\Abstracts\AbstractControllerLogic;
+use App\Classes\Modules\PackingLists\Services\Containers\CreatesContainerRemark;
+use App\Classes\Modules\Remarks\Standards\Rules\CanCreateRemark;
+use App\Classes\Modules\Remarks\DataTransferObjects\RemarkObject;
+use App\Classes\Modules\PackingLists\Services\Containers\FetchesContainer;
+
+use App\Http\Resources\RemarkResource;
+use ErrorException;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class AssignContainerRemarkLogic extends AbstractControllerLogic
+{
+
+    /**
+     * @return array
+     */
+    protected function notification():array {
+        return [
+            'title' => 'Created Order Remark',
+            'message' => 'You have successfully created a new Order Remark'
+        ];
+    }
+
+    /** @var CanCreateRemark */
+    private $canCreateRemark;
+
+    /** @var CreatesContainerRemark */
+    private $createsContainerRemark;
+
+    /** @var FetchesContainer */
+    private $fetchesContainer;
+
+    /**
+     * CreateRemarkLogic constructor.
+     * @param CanCreateRemark $canCreateRemark
+     * @param CreatesContainerRemark $createsContainerRemark
+     */
+    public function __construct(CanCreateRemark $canCreateRemark, CreatesContainerRemark $createsContainerRemark, FetchesContainer $fetchesContainer)
+    {
+        $this->canCreateRemark = $canCreateRemark;
+        $this->createsContainerRemark = $createsContainerRemark;
+        $this->fetchesContainer = $fetchesContainer;
+    }
+
+    /**
+     * @param Request $request
+     * @return JsonResponse
+     * @throws \App\Classes\Exceptions\AccessForbiddenException
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     * @throws \App\Classes\Exceptions\RequestValidationException
+     */
+    public function logic(Request $request) : JsonResponse
+    {
+        $object = new RemarkObject(
+            $request->input('content'), 
+            $request->route('id')
+        );
+
+        $this->canCreateRemark->passes($object);
+        $query = $this->createsContainerRemark->execute($this->fetchesContainer->execute(['id' => $request->route('id')]), $object);
+        return $this->resourceResponse( new RemarkResource($query));
+    }
+}
diff --git a/app/Classes/Modules/PackingLists/Services/Containers/CreatesContainerRemark.php b/app/Classes/Modules/PackingLists/Services/Containers/CreatesContainerRemark.php
new file mode 100644
index 00000000..75a069b7
--- /dev/null
+++ b/app/Classes/Modules/PackingLists/Services/Containers/CreatesContainerRemark.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Classes\Modules\PackingLists\Services\Containers;
+
+use App\Classes\General\Eloquent\AbstractUpdateRecord;
+use App\Classes\General\Eloquent\AbstractUpdateRelationshipRecord;
+use App\Classes\Modules\Remarks\DataTransferObjects\RemarkObject;
+use App\Models\Remark;
+use App\Models\Container;
+
+class CreatesContainerRemark extends AbstractUpdateRelationshipRecord
+{
+
+    /**
+     * @param Company $company
+     * @param RemarkObject $object
+     * @return \Illuminate\Database\Eloquent\Model
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     */
+    public function execute(Container $container, RemarkObject $object) {
+        $model = new Remark();
+
+        $model->commenter_id = $object->getCommenterId();
+        $model->content = $object->getContent();
+
+        return $this->handler($container->remarks(), $model);
+
+    }
+}
diff --git a/app/Classes/Modules/PackingLists/Services/CreatesPackingListRemark.php b/app/Classes/Modules/PackingLists/Services/CreatesPackingListRemark.php
new file mode 100644
index 00000000..30f30358
--- /dev/null
+++ b/app/Classes/Modules/PackingLists/Services/CreatesPackingListRemark.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Classes\Modules\PackingLists\Services;
+
+use App\Classes\General\Eloquent\AbstractUpdateRecord;
+use App\Classes\General\Eloquent\AbstractUpdateRelationshipRecord;
+use App\Classes\Modules\Remarks\DataTransferObjects\RemarkObject;
+use App\Models\Remark;
+use App\Models\PackingList;
+
+class CreatesPackingListRemark extends AbstractUpdateRelationshipRecord
+{
+
+    /**
+     * @param Company $company
+     * @param RemarkObject $object
+     * @return \Illuminate\Database\Eloquent\Model
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     */
+    public function execute(PackingList $packingList, RemarkObject $object) {
+        $model = new Remark();
+
+        $model->commenter_id = $object->getCommenterId();
+        $model->content = $object->getContent();
+
+        return $this->handler($packingList->remarks(), $model);
+
+    }
+}
diff --git a/app/Http/Controllers/Orders/AssignOrderRemarkController.php b/app/Http/Controllers/Orders/AssignOrderRemarkController.php
new file mode 100644
index 00000000..09de096f
--- /dev/null
+++ b/app/Http/Controllers/Orders/AssignOrderRemarkController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers\Orders;
+
+use App\Classes\Modules\Orders\ControllersLogic\AssignOrderRemarkLogic;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class AssignOrderRemarkController
+{
+    /**
+     * @param Request $request
+     * @param AssignOrderRemarkLogic $logic
+     * @return JsonResponse
+     */
+    public function create(Request $request, AssignOrderRemarkLogic $logic): JsonResponse {
+        return $logic->execute($request);
+    }
+
+}
diff --git a/app/Http/Controllers/PackingLists/AssignPackingListRemarkController.php b/app/Http/Controllers/PackingLists/AssignPackingListRemarkController.php
new file mode 100644
index 00000000..bcd6531c
--- /dev/null
+++ b/app/Http/Controllers/PackingLists/AssignPackingListRemarkController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers\PackingLists;
+
+use App\Classes\Modules\PackingLists\ControllersLogic\AssignPackingListRemarkLogic;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class AssignPackingListRemarkController
+{
+    /**
+     * @param Request $request
+     * @param AssignPackingListRemarkLogic $logic
+     * @return JsonResponse
+     */
+    public function create(Request $request, AssignPackingListRemarkLogic $logic): JsonResponse {
+        return $logic->execute($request);
+    }
+
+}
diff --git a/app/Http/Controllers/PackingLists/Containers/AssignContainerRemarkController.php b/app/Http/Controllers/PackingLists/Containers/AssignContainerRemarkController.php
new file mode 100644
index 00000000..d199aaf9
--- /dev/null
+++ b/app/Http/Controllers/PackingLists/Containers/AssignContainerRemarkController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers\PackingLists\Containers;
+
+use App\Classes\Modules\PackingLists\ControllersLogic\Containers\AssignContainerRemarkLogic;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class AssignContainerRemarkController
+{
+    /**
+     * @param Request $request
+     * @param AssignContainerRemarkLogic $logic
+     * @return JsonResponse
+     */
+    public function create(Request $request, AssignContainerRemarkLogic $logic): JsonResponse {
+        return $logic->execute($request);
+    }
+
+}
diff --git a/app/Models/Container.php b/app/Models/Container.php
index 158d0845..978e1c31 100644
--- a/app/Models/Container.php
+++ b/app/Models/Container.php
@@ -56,4 +56,12 @@ class Container extends AbstractModel implements Transportable
     {
         return $this->morphMany(Transport::class, 'owner');
     }
+
+    /**
+     * @return MorphMany
+     */
+    public function remarks(): morphMany
+    {
+        return $this->morphMany(Remark::class, 'owner');
+    }
 }
diff --git a/app/Models/Order.php b/app/Models/Order.php
index 9d3099a5..0f8a5913 100644
--- a/app/Models/Order.php
+++ b/app/Models/Order.php
@@ -55,6 +55,14 @@ class Order extends AbstractModel implements Addressable, Packable
         return $this->morphMany(PackingList::class, 'owner');
     }
 
+    /**
+     * @return MorphMany
+     */
+    public function remarks(): morphMany
+    {
+        return $this->morphMany(Remark::class, 'owner');
+    }
+
     /**
      * @return HasManyThrough
      */
diff --git a/app/Models/PackingList.php b/app/Models/PackingList.php
index 1bbfa6ac..baa973f5 100644
--- a/app/Models/PackingList.php
+++ b/app/Models/PackingList.php
@@ -56,4 +56,12 @@ class PackingList extends AbstractModel implements Transportable, Steppable
         return $this->morphMany(Transport::class, 'owner');
     }
 
+    /**
+     * @return MorphMany
+     */
+    public function remarks(): morphMany
+    {
+        return $this->morphMany(Remark::class, 'owner');
+    }
+
 }
diff --git a/routes/order.php b/routes/order.php
index bcefa2ed..4d87846f 100644
--- a/routes/order.php
+++ b/routes/order.php
@@ -14,5 +14,5 @@ Route::group(['prefix' => 'order', 'as' => 'order.', 'namespace' => 'Orders'], f
 
     Route::post('/create-warehouse-packing-list', 'CreateWarehousePackingListController@create')->name('create.warehouse.packing_list');
     Route::post('/create-shipping-packing-list', 'CreateShippingPackingListController@create')->name('create.shipping.packing_list');
-    // Route::post('/create', 'CreateOrderController@create')->name('create');
+    Route::put('/assign-remark/{id}', 'AssignOrderRemarkController@create')->name('assign.remark');
 });
diff --git a/routes/packing_list.php b/routes/packing_list.php
index cf5062cf..3b312fa3 100644
--- a/routes/packing_list.php
+++ b/routes/packing_list.php
@@ -14,7 +14,7 @@ Route::group(['namespace' => 'PackingLists', 'as' => 'packing_list.', 'prefix' =
     Route::put('/update-dispatch-date/{id}', 'UpdateDispatchDatePackingListController@update')->name('update_dispatch_date');
     Route::put('/update-drop-date/{id}', 'UpdateDropDatePackingListController@update')->name('update_drop_date');
     Route::put('/complete/{id}', 'CompletePackingListController@complete')->name('complete');
-
+    Route::put('/assign-remark/{id}', 'AssignPackingListRemarkController@create')->name('assign.remark');
 
     Route::group(['namespace' => 'Containers', 'prefix' => 'container', 'as' => 'container.'], function () {
         Route::get('/{id}/show', 'FetchContainerController@fetch')->name('show');
@@ -28,6 +28,7 @@ Route::group(['namespace' => 'PackingLists', 'as' => 'packing_list.', 'prefix' =
         Route::put('/update-dispatch-date/{id}', 'UpdateDispatchDateContainerController@update')->name('update_dispatch_date');
         Route::put('/update-drop-date/{id}', 'UpdateDropDateContainerController@update')->name('update_drop_date');
         Route::put('/complete/{id}', 'CompleteContainerController@complete')->name('complete');
+        Route::put('/assign-remark/{id}', 'AssignContainerRemarkController@create')->name('assign.remark');
     });
 
     Route::group(['namespace' => 'Packages', 'as' => 'package.', 'prefix' => 'package'], function () {

From 9252134cc478174a901dc054f4c7a25a8df59164 Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Fri, 29 Oct 2021 16:20:05 +0800
Subject: [PATCH 2/4] wip update container comments(remarks) section and
 implement api

---
 .../Containers/CreateContainerRemarkLogic.php |  4 +-
 app/Http/Resources/ContainerResource.php      |  2 +
 app/Http/Resources/RemarkResource.php         |  4 +-
 app/Models/Remark.php                         |  9 +++
 .../ContainerProfileSectionComponent.vue      | 68 ++++++++++++-------
 routes/packing_list.php                       |  1 +
 6 files changed, 59 insertions(+), 29 deletions(-)

diff --git a/app/Classes/Modules/PackingLists/ControllersLogic/Containers/CreateContainerRemarkLogic.php b/app/Classes/Modules/PackingLists/ControllersLogic/Containers/CreateContainerRemarkLogic.php
index 175575cf..bb4b2a06 100644
--- a/app/Classes/Modules/PackingLists/ControllersLogic/Containers/CreateContainerRemarkLogic.php
+++ b/app/Classes/Modules/PackingLists/ControllersLogic/Containers/CreateContainerRemarkLogic.php
@@ -53,9 +53,9 @@ class CreateContainerRemarkLogic extends AbstractControllerLogic
     public function logic(Request $request) : JsonResponse
     {
 
-        $container = $this->fetchesContainer->execute(['id' => $request->input('container_id')]);
+        $container = $this->fetchesContainer->execute(['id' => $request->route('id')]);
 
-        $object = new RemarkObject($request->input('content'), 1);
+        $object = new RemarkObject($request->input('content'), auth()->user()->id);
 
         $this->createRemarkProcessor->execute($container, $object);
 
diff --git a/app/Http/Resources/ContainerResource.php b/app/Http/Resources/ContainerResource.php
index b9daa54f..23cb7817 100644
--- a/app/Http/Resources/ContainerResource.php
+++ b/app/Http/Resources/ContainerResource.php
@@ -3,6 +3,7 @@
 namespace App\Http\Resources;
 
 use App\Classes\ValueObjects\Constants\ContainerTypes;
+use App\Models\Remark;
 use Illuminate\Http\Resources\Json\JsonResource;
 
 class ContainerResource extends JsonResource
@@ -26,6 +27,7 @@ class ContainerResource extends JsonResource
             'packing_lists' => PackingListResource::collection($this->whenLoaded('packingLists', function(){
                 return $this->packingLists()->whereHas('packages')->get();
             })),
+            'remarks' => RemarkResource::collection($this->remarks),
             'status' => $this->status
         ];
     }
diff --git a/app/Http/Resources/RemarkResource.php b/app/Http/Resources/RemarkResource.php
index d5f93d79..16d206d8 100644
--- a/app/Http/Resources/RemarkResource.php
+++ b/app/Http/Resources/RemarkResource.php
@@ -16,8 +16,10 @@ class RemarkResource extends JsonResource
     {
         return [
             'id' => $this->id,
-            'commenter_id' => $this->commenter_id,
+            'commenter' => new UserResource($this->commenter),
             'content' => $this->content,
+            'created_at' => $this->created_at->format('d-m-Y H:i'),
+            'long_ago' => $this->created_at->diffForHumans()
         ];
     }
 }
diff --git a/app/Models/Remark.php b/app/Models/Remark.php
index 863c3001..f2de3a5c 100644
--- a/app/Models/Remark.php
+++ b/app/Models/Remark.php
@@ -4,6 +4,7 @@ namespace App\Models;
 
 use Illuminate\Database\Eloquent\Relations\MorphTo;
 use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
 
 class Remark extends AbstractModel
 {
@@ -15,4 +16,12 @@ class Remark extends AbstractModel
     {
         return $this->morphTo();
     }
+
+    /**
+     * @return BelongsTo
+     */
+    public function commenter(): BelongsTo
+    {
+        return $this->BelongsTo(User::class, 'commenter_id', 'id');
+    }
 }
diff --git a/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue b/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
index f2e0e2a7..916c4eae 100644
--- a/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
+++ b/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
@@ -616,41 +616,57 @@
                             </div>
                             <div class="row" v-if="tabShowing === 'Comments'">
                                 <div class="col">
-                                    <div class="row m-b-20">
+                                            
+                                    <div class="row" v-for="remarks in container.remarks">
                                         <div class="col">
-                                            <div class="row justify-content-center align-items-center m-l-5 m-b-15">
-                                                <div class="col-auto b-a btn-rounded padding-10 p-l-15 p-r-15">
-                                                    <i class="fa fa-user"></i>
-                                                </div>
+                                            <div class="row m-b-20">
                                                 <div class="col">
-                                                    <p class="no-margin muted bold fs-20">Jacob Arlington</p>
-                                                </div>
-                                            </div>
-                                            <div class="row">
-                                                <div class="col">
-                                                    <p>Adipisicing occaecat pariatur id sunt ullamco quis laborum irure ea excepteur enim dolore est. Deserunt do consectetur ex in dolor labore ad reprehenderit velit laboris officia ut.</p>
+                                                    <div class="row justify-content-center align-items-center">
+                                                        <div class="hide col-auto btn-rounded padding-10 d-flex justify-content-center align-items-center bg-master-lighter" style="width: 30px;height: 30px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.14);">
+                                                            <span class="bold">{{remarks.commenter.name.substr(0, 1)}}</span>
+                                                        </div>
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col-auto">
+                                                                    <p class="no-margin muted bold fs-14">{{remarks.commenter.name}}</p>
+                                                                </div>
+                                                                <div class="col-auto">
+                                                                    <span class="fs-12 muted normal">{{remarks.long_ago}}</span>
+                                                                </div>
+                                                                <div class="col d-flex justify-content-end">
+                                                                    <div class="row">
+                                                                        <div class="col p-t-5 p-b-5 b-a b-grey">
+                                                                            <div class="row">
+                                                                                <div class="col">
+                                                                                    <i class="fa fa-edit pointer"></i>
+                                                                                </div>
+                                                                                <div class="col">
+                                                                                    <i class="fa fa-trash pointer" @click="submit(route('api.remark.delete', remarks.id), 'delete', section)"></i>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <p>{{remarks.content}}</p>
+                                                        </div>
+                                                    </div>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="row m-b-20">
+                                    <div class="row">
                                         <div class="col">
-                                            <div class="row justify-content-center align-items-center m-l-5 m-b-15">
-                                                <div class="col-auto b-a btn-rounded padding-10 p-l-15 p-r-15">
-                                                    <i class="fa fa-user"></i>
-                                                </div>
-                                                <div class="col">
-                                                    <p class="no-margin muted bold fs-20">Jacob Arlington</p>
-                                                </div>
-                                            </div>
-                                            <div class="row">
-                                                <div class="col">
-                                                    <p>Adipisicing occaecat pariatur id sunt ullamco quis laborum irure ea excepteur enim dolore est. Deserunt do consectetur ex in dolor labore ad reprehenderit velit laboris officia ut.</p>
-                                                </div>
-                                            </div>
+                                            <input type="text" class="b-a w-100 padding-10 rounded b-grey" placeholder="Write your comments...">
+                                        </div>
+                                        <div class="col-auto b-a b-grey d-flex justify-content-center align-items-center rounded pointer">
+                                            <i class="fa fa-paper-plane" @click="submit(route('api.packing_list.container.remark.create', container.id), 'post', section, true, true)"></i>
                                         </div>
                                     </div>
-                                    <input type="text" class="b-a w-100 padding-10 rounded b-grey" placeholder="Write your comments...">
                                 </div>    
                             </div>
                         </div>
diff --git a/routes/packing_list.php b/routes/packing_list.php
index 7ee3a3ca..f32533c7 100644
--- a/routes/packing_list.php
+++ b/routes/packing_list.php
@@ -30,6 +30,7 @@ Route::group(['namespace' => 'PackingLists', 'as' => 'packing_list.', 'prefix' =
         Route::put('/update-dispatch-date/{id}', 'UpdateDispatchDateContainerController@update')->name('update_dispatch_date');
         Route::put('/update-drop-date/{id}', 'UpdateDropDateContainerController@update')->name('update_drop_date');
         Route::put('/complete/{id}', 'CompleteContainerController@complete')->name('complete');
+        Route::post('/{id}/remark/create', 'CreateContainerRemarkController@create')->name('remark.create');
     });
 
     Route::group(['namespace' => 'Packages', 'as' => 'package.', 'prefix' => 'package'], function () {

From feec49318b42a85fc42aba4d038e0389b83727b7 Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Sat, 30 Oct 2021 17:11:28 +0800
Subject: [PATCH 3/4] update container profile comment section with api

---
 .../elements/ContainerCommentComponent.vue    | 64 +++++++++++++++++++
 .../ContainerProfileSectionComponent.vue      | 51 ++-------------
 .../DeleteContainerCommentFormComponent.vue   | 32 ++++++++++
 .../EditContainerCommentFormComponent.vue     | 53 +++++++++++++++
 .../CreateContainerCommentFormComponent.vue   | 32 ++++++++++
 5 files changed, 185 insertions(+), 47 deletions(-)
 create mode 100644 resources/assets/vue/components/containers/elements/ContainerCommentComponent.vue
 create mode 100644 resources/assets/vue/components/containers/elements/DeleteContainerCommentFormComponent.vue
 create mode 100644 resources/assets/vue/components/containers/elements/EditContainerCommentFormComponent.vue
 create mode 100644 resources/assets/vue/components/containers/forms/CreateContainerCommentFormComponent.vue

diff --git a/resources/assets/vue/components/containers/elements/ContainerCommentComponent.vue b/resources/assets/vue/components/containers/elements/ContainerCommentComponent.vue
new file mode 100644
index 00000000..8d961664
--- /dev/null
+++ b/resources/assets/vue/components/containers/elements/ContainerCommentComponent.vue
@@ -0,0 +1,64 @@
+<template>
+    <div class="row m-b-20 parentContainer">
+        <div class="col">
+            <div class="row justify-content-center align-items-center">
+                <div class="hide col-auto btn-rounded padding-10 d-flex justify-content-center align-items-center bg-master-lighter" style="width: 30px;height: 30px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.14);">
+                    <span class="bold">{{item.commenter.name.substr(0, 1)}}</span>
+                </div>
+                <div class="col">
+                    <div class="row">
+                        <div class="col-auto">
+                            <p class="no-margin muted bold fs-14">{{item.commenter.name}}</p>
+                        </div>
+                        <div class="col-auto">
+                            <span class="fs-12 muted normal">{{item.long_ago}}</span>
+                        </div>
+                        <div class="col d-flex justify-content-end">
+                            <div class="row">
+                                <div class="col p-t-5 p-b-5 b-a b-grey">
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="requestModal pointer" data-type="editComment">
+                                                <i class="fa fa-edit"></i>
+                                            </div>
+                                        </div>
+                                        <div class="col">
+                                                <div class="requestModal pointer" data-type="deleteComment">
+                                                <i class="fa fa-trash"></i>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <p>{{item.content}}</p>
+                </div>
+            </div>
+
+            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editComment">
+                <edit-container-comment-form-component :section="section" :data="item"></edit-container-comment-form-component>
+            </modal-component>
+            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteComment">
+                <delete-container-comment-form-component :section="section" :data="item"></delete-container-comment-form-component>
+            </modal-component>
+        </div>  
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+
+    export default {
+        props: {
+            section: {
+                type: String,
+                required: true,
+            }  
+        },
+        mixins: [componentHandler]
+    }
+</script>
diff --git a/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue b/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
index 916c4eae..feddd039 100644
--- a/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
+++ b/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
@@ -619,54 +619,10 @@
                                             
                                     <div class="row" v-for="remarks in container.remarks">
                                         <div class="col">
-                                            <div class="row m-b-20">
-                                                <div class="col">
-                                                    <div class="row justify-content-center align-items-center">
-                                                        <div class="hide col-auto btn-rounded padding-10 d-flex justify-content-center align-items-center bg-master-lighter" style="width: 30px;height: 30px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.14);">
-                                                            <span class="bold">{{remarks.commenter.name.substr(0, 1)}}</span>
-                                                        </div>
-                                                        <div class="col">
-                                                            <div class="row">
-                                                                <div class="col-auto">
-                                                                    <p class="no-margin muted bold fs-14">{{remarks.commenter.name}}</p>
-                                                                </div>
-                                                                <div class="col-auto">
-                                                                    <span class="fs-12 muted normal">{{remarks.long_ago}}</span>
-                                                                </div>
-                                                                <div class="col d-flex justify-content-end">
-                                                                    <div class="row">
-                                                                        <div class="col p-t-5 p-b-5 b-a b-grey">
-                                                                            <div class="row">
-                                                                                <div class="col">
-                                                                                    <i class="fa fa-edit pointer"></i>
-                                                                                </div>
-                                                                                <div class="col">
-                                                                                    <i class="fa fa-trash pointer" @click="submit(route('api.remark.delete', remarks.id), 'delete', section)"></i>
-                                                                                </div>
-                                                                            </div>
-                                                                        </div>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                    <div class="row">
-                                                        <div class="col">
-                                                            <p>{{remarks.content}}</p>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row">
-                                        <div class="col">
-                                            <input type="text" class="b-a w-100 padding-10 rounded b-grey" placeholder="Write your comments...">
-                                        </div>
-                                        <div class="col-auto b-a b-grey d-flex justify-content-center align-items-center rounded pointer">
-                                            <i class="fa fa-paper-plane" @click="submit(route('api.packing_list.container.remark.create', container.id), 'post', section, true, true)"></i>
+                                            <container-comment-component :section="section" :data="remarks"></container-comment-component>
                                         </div>
                                     </div>
+                                    <create-container-comment-form-component :section="section" :data="container"></create-container-comment-form-component>
                                 </div>    
                             </div>
                         </div>
@@ -695,7 +651,8 @@
                     CBMcapacity: 30,
                     tabShowing: 'Timeline',
                     selectAllPackingList: false,
-                    selectedPackageList: []
+                    selectedPackageList: [],
+                    deleteCommentId: '',
                 }
             },
             computed: {
diff --git a/resources/assets/vue/components/containers/elements/DeleteContainerCommentFormComponent.vue b/resources/assets/vue/components/containers/elements/DeleteContainerCommentFormComponent.vue
new file mode 100644
index 00000000..3bd97a45
--- /dev/null
+++ b/resources/assets/vue/components/containers/elements/DeleteContainerCommentFormComponent.vue
@@ -0,0 +1,32 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
+            <div class="row justify-content-center" v-show="!isLoading">
+                <div class="col">
+                    <div class="row m-b-20">
+                        <div class="col">
+                            <h3 class="all-caps">Are you Sure?</h3>
+                            <div class="fs-11">Are you sure you want to delete this comment?</div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <div class="btn btn-sm btn-success btn-block b-rad-none" data-dismiss="modal">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-sm btn-danger btn-block b-rad-none" @click="submit(route('api.remark.delete', item.id), 'delete', section, true, true)">Delete</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        mixins: [componentHandler, ModalFormHandler]
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/containers/elements/EditContainerCommentFormComponent.vue b/resources/assets/vue/components/containers/elements/EditContainerCommentFormComponent.vue
new file mode 100644
index 00000000..315e8651
--- /dev/null
+++ b/resources/assets/vue/components/containers/elements/EditContainerCommentFormComponent.vue
@@ -0,0 +1,53 @@
+<template>
+    <div class="row" style="width: 450px; margin: auto;" @keyup.enter="submitForm">
+        <div class="col bg-white padding-40 b-rad-lg">
+            <div class="row m-t-20">
+                <div class="col">
+                    <div class="row m-auto mt-10 mb-10">
+                        <div class="col">
+                            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.content">
+                                <label class="text-primary">Comment</label>
+                                <input type="text" class="form-control fs-12" v-model="parameters.content">
+                            </validation-wrapper-component>
+                            <!-- <p>{{data.content}}</p> -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row m-t-15">
+                <div class="col">
+                    <div class="row">
+                        <div class="col-auto p-r-5">
+                            <div class="btn btn-lg btn-default b-rad-none" data-dismiss="modal">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-primary w-100 btn-lg" @click="submit(route('api.remark.update', data.id), 'put', section, true, true)">Confirm</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    import { required } from "vuelidate/lib/validators";
+
+    export default {
+        data() {
+            return {
+                parameters: {
+                    content: this.content,
+                    commenter_id: this.$store.getters.getUserId
+                },
+            };
+        },
+        validations: {
+            parameters: {
+                content: { required },
+            }
+        },  
+        mixins: [componentHandler, ModalFormHandler]
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/containers/forms/CreateContainerCommentFormComponent.vue b/resources/assets/vue/components/containers/forms/CreateContainerCommentFormComponent.vue
new file mode 100644
index 00000000..48267409
--- /dev/null
+++ b/resources/assets/vue/components/containers/forms/CreateContainerCommentFormComponent.vue
@@ -0,0 +1,32 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <validation-wrapper-component :validator="$v.parameters.content">
+                <input type="text" class="form-control fs-12" placeholder="Write your comments..." v-model.trim="parameters.content">
+            </validation-wrapper-component>
+        </div>
+        <div class="col-auto b-a b-grey d-flex justify-content-center align-items-center rounded pointer">
+            <i class="fa fa-paper-plane" @click="submit(route('api.packing_list.container.remark.create', data.id), 'post', section, true, true)"></i>
+        </div>
+    </div>
+</template>
+<script>
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+    import { required } from "vuelidate/lib/validators";
+
+    export default {
+        data() {
+            return {
+                parameters: {
+                    content: this.content,
+                },
+            };
+        },
+        validations: {
+            parameters: {
+                content: { required },
+            }
+        },  
+        mixins: [modalFormHandler]
+    }
+</script>

From b0a2ab08c94f0649b2b32b5c0146beccaefa9f82 Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Sun, 31 Oct 2021 19:10:16 +0800
Subject: [PATCH 4/4] tody up container forms component

---
 .../ControllersLogic/UpdateRemarkLogic.php    |  2 +-
 app/Http/Resources/RemarkResource.php         |  1 +
 .../elements/ContainerCommentComponent.vue    | 22 ++++---
 .../elements/EditContainerFormComponent.vue   | 59 -------------------
 .../ContainerArrivalFormComponent.vue         |  0
 ....vue => ContainerCommentFormComponent.vue} | 23 +++++++-
 .../ContainerDepatureFormComponent.vue        |  0
 .../ContainerUnpackingFormContainer.vue}      |  0
 ...CreateDeliveryPackinglistFormComponent.vue |  0
 .../DeleteContainerCommentFormComponent.vue   |  0
 .../EditContainerCommentFormComponent.vue     |  1 -
 .../ListPackagelistFormComponent.vue          |  0
 .../RescheduleDateFormComponent.vue           |  0
 .../ContainerProfileSectionComponent.vue      |  4 +-
 14 files changed, 37 insertions(+), 75 deletions(-)
 delete mode 100644 resources/assets/vue/components/containers/elements/EditContainerFormComponent.vue
 rename resources/assets/vue/components/containers/{elements => forms}/ContainerArrivalFormComponent.vue (100%)
 rename resources/assets/vue/components/containers/forms/{CreateContainerCommentFormComponent.vue => ContainerCommentFormComponent.vue} (57%)
 rename resources/assets/vue/components/containers/{elements => forms}/ContainerDepatureFormComponent.vue (100%)
 rename resources/assets/vue/components/containers/{elements/containerUnpackingFormContainer.vue => forms/ContainerUnpackingFormContainer.vue} (100%)
 rename resources/assets/vue/components/containers/{elements => forms}/CreateDeliveryPackinglistFormComponent.vue (100%)
 rename resources/assets/vue/components/containers/{elements => forms}/DeleteContainerCommentFormComponent.vue (100%)
 rename resources/assets/vue/components/containers/{elements => forms}/EditContainerCommentFormComponent.vue (97%)
 rename resources/assets/vue/components/containers/{elements => forms}/ListPackagelistFormComponent.vue (100%)
 rename resources/assets/vue/components/containers/{elements => forms}/RescheduleDateFormComponent.vue (100%)
 rename resources/assets/vue/components/containers/{elements => sections}/ContainerProfileSectionComponent.vue (99%)

diff --git a/app/Classes/Modules/Remarks/ControllersLogic/UpdateRemarkLogic.php b/app/Classes/Modules/Remarks/ControllersLogic/UpdateRemarkLogic.php
index e9c0738f..5b3af8f8 100644
--- a/app/Classes/Modules/Remarks/ControllersLogic/UpdateRemarkLogic.php
+++ b/app/Classes/Modules/Remarks/ControllersLogic/UpdateRemarkLogic.php
@@ -55,7 +55,7 @@ class UpdateRemarkLogic extends AbstractControllerLogic
      */
     public function logic(Request $request) : JsonResponse
     {
-        $object = new RemarkObject($request->input('content'), $request->input('commenter_id'));
+        $object = new RemarkObject($request->input('content'), auth()->user()->id);
 
         $this->canUpdateRemark->passes($object);
 
diff --git a/app/Http/Resources/RemarkResource.php b/app/Http/Resources/RemarkResource.php
index 16d206d8..24081934 100644
--- a/app/Http/Resources/RemarkResource.php
+++ b/app/Http/Resources/RemarkResource.php
@@ -17,6 +17,7 @@ class RemarkResource extends JsonResource
         return [
             'id' => $this->id,
             'commenter' => new UserResource($this->commenter),
+            'owner_id' => $this->owner_id,
             'content' => $this->content,
             'created_at' => $this->created_at->format('d-m-Y H:i'),
             'long_ago' => $this->created_at->diffForHumans()
diff --git a/resources/assets/vue/components/containers/elements/ContainerCommentComponent.vue b/resources/assets/vue/components/containers/elements/ContainerCommentComponent.vue
index 8d961664..9cc32c2f 100644
--- a/resources/assets/vue/components/containers/elements/ContainerCommentComponent.vue
+++ b/resources/assets/vue/components/containers/elements/ContainerCommentComponent.vue
@@ -16,11 +16,9 @@
                         <div class="col d-flex justify-content-end">
                             <div class="row">
                                 <div class="col p-t-5 p-b-5 b-a b-grey">
-                                    <div class="row">
+                                    <div class="row" v-if="!isEdit">
                                         <div class="col">
-                                            <div class="requestModal pointer" data-type="editComment">
-                                                <i class="fa fa-edit"></i>
-                                            </div>
+                                            <i class="fa fa-edit pointer" @click="isEdit = !isEdit"></i>
                                         </div>
                                         <div class="col">
                                                 <div class="requestModal pointer" data-type="deleteComment">
@@ -28,6 +26,11 @@
                                             </div>
                                         </div>
                                     </div>
+                                    <div class="row" v-if="isEdit">
+                                        <div class="col">
+                                            <i class="fa fa-times pointer" @click="isEdit = !isEdit"></i>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -36,13 +39,11 @@
             </div>
             <div class="row">
                 <div class="col">
-                    <p>{{item.content}}</p>
+                    <p v-if="!isEdit">{{item.content}}</p>
+                    <container-comment-form-component :section="section" :data="item" :id="item.owner_id" v-on:submit="isEdit=false" v-if="isEdit"></container-comment-form-component>
                 </div>
             </div>
 
-            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editComment">
-                <edit-container-comment-form-component :section="section" :data="item"></edit-container-comment-form-component>
-            </modal-component>
             <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteComment">
                 <delete-container-comment-form-component :section="section" :data="item"></delete-container-comment-form-component>
             </modal-component>
@@ -59,6 +60,11 @@
                 required: true,
             }  
         },
+        data(){
+            return {
+                isEdit: false,
+            }
+        },
         mixins: [componentHandler]
     }
 </script>
diff --git a/resources/assets/vue/components/containers/elements/EditContainerFormComponent.vue b/resources/assets/vue/components/containers/elements/EditContainerFormComponent.vue
deleted file mode 100644
index 25df6f59..00000000
--- a/resources/assets/vue/components/containers/elements/EditContainerFormComponent.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-    <div class="row" style="width: 600px; margin: auto;" @keyup.enter="submitForm">
-        <div class="col bg-white padding-20 b-rad-lg">
-            <div class="row m-b-10">
-                <div class="col">
-                    <h3 class="bold fs-20 m-b-0">Edit Package</h3>
-                    <p class="normal-text muted">Process of editing the container needs to verify from the warehouse</p>
-                </div>
-            </div>
-            <div class="row m-t-20">
-                <div class="col">
-                    <div class="row m-auto mt-10 mb-10">
-                        <div class="col p-l-0 p-r-10">
-                            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.container_number">
-                                <label class="semi-bold text-primary">Container Number</label>
-                                <input type="text" class="form-control fs-12">
-                            </validation-wrapper-component>
-                        </div>
-                        <div class="col p-r-0 p-l-10">
-                            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.sealing_number">
-                                <label class="semi-bold text-primary">Sealing Number</label>
-                                <input type="text" class="form-control">
-                            </validation-wrapper-component>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row m-t-15">
-                <div class="col d-flex justify-content-end">
-                    <div class="btn btn-default btn-sm bg-master-light m-r-10 text-white padding-10 p-l-40 p-r-40 rounded" data-dismiss="modal">Cancel</div>
-                    <div class="btn btn-default btn-sm b-primary btn-outline-primary padding-10 p-l-40 p-r-40 rounded">Upload</div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-    import modalFormHandler from '../../../general/mixins/modalFormHandler';
-    import { required } from "vuelidate/lib/validators";
-
-    export default {
-        data() {
-            return {
-                parameters: {
-                    container_number: this.container_number, 
-                    sealing_number: this.sealing_number, 
-                }
-            };
-        },
-        validations: {
-            parameters: {
-                container_number: { required },
-                sealing_number: { required },
-            }
-        },
-        mixins: [modalFormHandler]
-    }
-
-</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/containers/elements/ContainerArrivalFormComponent.vue b/resources/assets/vue/components/containers/forms/ContainerArrivalFormComponent.vue
similarity index 100%
rename from resources/assets/vue/components/containers/elements/ContainerArrivalFormComponent.vue
rename to resources/assets/vue/components/containers/forms/ContainerArrivalFormComponent.vue
diff --git a/resources/assets/vue/components/containers/forms/CreateContainerCommentFormComponent.vue b/resources/assets/vue/components/containers/forms/ContainerCommentFormComponent.vue
similarity index 57%
rename from resources/assets/vue/components/containers/forms/CreateContainerCommentFormComponent.vue
rename to resources/assets/vue/components/containers/forms/ContainerCommentFormComponent.vue
index 48267409..a77807fa 100644
--- a/resources/assets/vue/components/containers/forms/CreateContainerCommentFormComponent.vue
+++ b/resources/assets/vue/components/containers/forms/ContainerCommentFormComponent.vue
@@ -1,12 +1,12 @@
 <template>
-    <div class="row">
+    <div class="row m-t-5">
         <div class="col">
             <validation-wrapper-component :validator="$v.parameters.content">
                 <input type="text" class="form-control fs-12" placeholder="Write your comments..." v-model.trim="parameters.content">
             </validation-wrapper-component>
         </div>
         <div class="col-auto b-a b-grey d-flex justify-content-center align-items-center rounded pointer">
-            <i class="fa fa-paper-plane" @click="submit(route('api.packing_list.container.remark.create', data.id), 'post', section, true, true)"></i>
+            <i class="fa fa-paper-plane" @click="submitForm"></i>
         </div>
     </div>
 </template>
@@ -15,6 +15,12 @@
     import { required } from "vuelidate/lib/validators";
 
     export default {
+        props: {
+            id: {
+                type: Number,
+                required: true
+            }
+        },
         data() {
             return {
                 parameters: {
@@ -26,7 +32,18 @@
             parameters: {
                 content: { required },
             }
-        },  
+        },
+        created() {
+            if (this.data) {
+                this.parameters.content = this.data.content
+            }
+        },
+        methods: {
+            submitForm() {
+                this.submit(this.data ? this.route('api.remark.update', this.data.id) : this.route('api.packing_list.container.remark.create', this.id), this.data ? 'put' : 'post', this.section, true, true);
+                this.$emit('submit')
+            }
+        },
         mixins: [modalFormHandler]
     }
 </script>
diff --git a/resources/assets/vue/components/containers/elements/ContainerDepatureFormComponent.vue b/resources/assets/vue/components/containers/forms/ContainerDepatureFormComponent.vue
similarity index 100%
rename from resources/assets/vue/components/containers/elements/ContainerDepatureFormComponent.vue
rename to resources/assets/vue/components/containers/forms/ContainerDepatureFormComponent.vue
diff --git a/resources/assets/vue/components/containers/elements/containerUnpackingFormContainer.vue b/resources/assets/vue/components/containers/forms/ContainerUnpackingFormContainer.vue
similarity index 100%
rename from resources/assets/vue/components/containers/elements/containerUnpackingFormContainer.vue
rename to resources/assets/vue/components/containers/forms/ContainerUnpackingFormContainer.vue
diff --git a/resources/assets/vue/components/containers/elements/CreateDeliveryPackinglistFormComponent.vue b/resources/assets/vue/components/containers/forms/CreateDeliveryPackinglistFormComponent.vue
similarity index 100%
rename from resources/assets/vue/components/containers/elements/CreateDeliveryPackinglistFormComponent.vue
rename to resources/assets/vue/components/containers/forms/CreateDeliveryPackinglistFormComponent.vue
diff --git a/resources/assets/vue/components/containers/elements/DeleteContainerCommentFormComponent.vue b/resources/assets/vue/components/containers/forms/DeleteContainerCommentFormComponent.vue
similarity index 100%
rename from resources/assets/vue/components/containers/elements/DeleteContainerCommentFormComponent.vue
rename to resources/assets/vue/components/containers/forms/DeleteContainerCommentFormComponent.vue
diff --git a/resources/assets/vue/components/containers/elements/EditContainerCommentFormComponent.vue b/resources/assets/vue/components/containers/forms/EditContainerCommentFormComponent.vue
similarity index 97%
rename from resources/assets/vue/components/containers/elements/EditContainerCommentFormComponent.vue
rename to resources/assets/vue/components/containers/forms/EditContainerCommentFormComponent.vue
index 315e8651..6101f736 100644
--- a/resources/assets/vue/components/containers/elements/EditContainerCommentFormComponent.vue
+++ b/resources/assets/vue/components/containers/forms/EditContainerCommentFormComponent.vue
@@ -9,7 +9,6 @@
                                 <label class="text-primary">Comment</label>
                                 <input type="text" class="form-control fs-12" v-model="parameters.content">
                             </validation-wrapper-component>
-                            <!-- <p>{{data.content}}</p> -->
                         </div>
                     </div>
                 </div>
diff --git a/resources/assets/vue/components/containers/elements/ListPackagelistFormComponent.vue b/resources/assets/vue/components/containers/forms/ListPackagelistFormComponent.vue
similarity index 100%
rename from resources/assets/vue/components/containers/elements/ListPackagelistFormComponent.vue
rename to resources/assets/vue/components/containers/forms/ListPackagelistFormComponent.vue
diff --git a/resources/assets/vue/components/containers/elements/RescheduleDateFormComponent.vue b/resources/assets/vue/components/containers/forms/RescheduleDateFormComponent.vue
similarity index 100%
rename from resources/assets/vue/components/containers/elements/RescheduleDateFormComponent.vue
rename to resources/assets/vue/components/containers/forms/RescheduleDateFormComponent.vue
diff --git a/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue b/resources/assets/vue/components/containers/sections/ContainerProfileSectionComponent.vue
similarity index 99%
rename from resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
rename to resources/assets/vue/components/containers/sections/ContainerProfileSectionComponent.vue
index feddd039..a9d22e9c 100644
--- a/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
+++ b/resources/assets/vue/components/containers/sections/ContainerProfileSectionComponent.vue
@@ -622,7 +622,7 @@
                                             <container-comment-component :section="section" :data="remarks"></container-comment-component>
                                         </div>
                                     </div>
-                                    <create-container-comment-form-component :section="section" :data="container"></create-container-comment-form-component>
+                                    <container-comment-form-component :section="section" :id="container.id"></container-comment-form-component>
                                 </div>    
                             </div>
                         </div>
@@ -633,9 +633,7 @@
     </div>
     </template>
     <script>
-        import RescheduleDateFormComponent from './RescheduleDateFormComponent.vue';
         export default {
-        components: { RescheduleDateFormComponent },
             props: {
                 id: {
                     type: Number,