added vue multi-select component "address-extra-details-component"

app/Classes/Modules/Addresses/ControllersLogic/CreateAddressLogic.php

@@ -15,6 +15,7 @@ use App\Classes\Modules\Contacts\Processors\CreateContactProcessor;
 use App\Classes\Modules\Remarks\DataTransferObjects\RemarkObject;
 use App\Classes\Modules\Remarks\Processors\CreateRemarkProcessor;
 use App\Classes\ValueObjects\Constants\ApprovalStatus;
+use App\Classes\ValueObjects\Constants\RemarkTypes;
 use App\Http\Resources\AddressResource;
 use App\Models\Address;
 use ErrorException;
@@ -100,6 +101,16 @@ class CreateAddressLogic extends AbstractControllerLogic
             $this->createRemarkProcessor->execute($address, $remarkObject);
         }
 
+        $addressExtraFields = [
+            'property_type'         => $request->input('property_type'),
+            'tools_required_unload' => $request->input('tools_required_unload'),
+            'pickup_time_from'      => $request->input('pickup_time_from'),
+            'pickup_time_to'        => $request->input('pickup_time_to'),
+        ];
+
+        $addressExtraFieldsObject = new RemarkObject(json_encode($addressExtraFields), Auth()->user()->id, RemarkTypes::ADDRESS_EXTRA_COLUMNS);
+        $this->createRemarkProcessor->execute($address, $addressExtraFieldsObject);
+
         return $this->resourceResponse(new AddressResource($address));
 
     }

app/Classes/Modules/Addresses/ControllersLogic/UpdateAddressLogic.php

@@ -15,6 +15,7 @@ use App\Classes\Modules\Remarks\DataTransferObjects\RemarkObject;
 use App\Classes\Modules\Remarks\Processors\CreateRemarkProcessor;
 use App\Classes\ValueObjects\Constants\AddressType;
 use App\Classes\ValueObjects\Constants\ApprovalStatus;
+use App\Classes\ValueObjects\Constants\RemarkTypes;
 use App\Http\Resources\AddressResource;
 use App\Models\Address;
 use Illuminate\Http\JsonResponse;
@@ -102,6 +103,16 @@ class UpdateAddressLogic extends AbstractControllerLogic
             $this->createRemarkProcessor->execute($address, $remarkObject);
         }
 
+        $addressExtraFields = [
+            'property_type'         => $request->input('property_type'),
+            'tools_required_unload' => $request->input('tools_required_unload'),
+            'pickup_time_from'      => $request->input('pickup_time_from'),
+            'pickup_time_to'        => $request->input('pickup_time_to'),
+        ];
+
+        $addressExtraFieldsObject = new RemarkObject(json_encode($addressExtraFields), Auth()->user()->id, RemarkTypes::ADDRESS_EXTRA_COLUMNS);
+        $this->createRemarkProcessor->execute($address, $addressExtraFieldsObject);
+
         return $this->resourceResponse(new AddressResource($address));
 
     }

app/Classes/Modules/Remarks/DataTransferObjects/RemarkObject.php

@@ -13,10 +13,14 @@ class RemarkObject implements DataTransferObject
     /** @var string*/
     private $content;
 
-    public function __construct(string $content, int $commenterID)
+    /** @var int|null */
+    private $type;
+
+    public function __construct(string $content, int $commenterID, int $type = null)
     {
         $this->commenterID = $commenterID;
         $this->content = $content;
+        $this->type = $type;
     }
 
     /**
@@ -35,4 +39,12 @@ class RemarkObject implements DataTransferObject
         return $this->content;
     }
 
+    /**
+     * @return int|null
+     */
+    public function getType(): ?int
+    {
+        return $this->type;
+    }
+
 }

app/Classes/Modules/Remarks/Services/CreatesRemark.php

@@ -24,6 +24,7 @@ class CreatesRemark extends AbstractUpdateRelationshipRecord
 
         $model->commenter_id = $object->getCommenterId();
         $model->content = $object->getContent();
+        $model->type = $object->getType();
 
         return $this->handler($remarkable->remarks(), $model);
 

app/Classes/ValueObjects/Constants/RemarkTypes.php

@@ -10,4 +10,6 @@ final class RemarkTypes
 
     public const EXTERNAL = 1;
 
+    public const ADDRESS_EXTRA_COLUMNS = 2;
+    
 }

app/Http/Resources/AddressResource.php

@@ -27,6 +27,9 @@ class AddressResource extends JsonResource
         $outstationPostcodeConstant = $outstationPostcodeConstantObject->isEmpty() ? [] : (array)$outstationPostcodeConstantObject->first()->value;
         in_array((String)$this->postcode, $outstationPostcodeConstant) ? $postcodeArea = 'OUTSTATION_POSTCODE' : null;
 
+        $extrafields = json_decode($this->addressExtraFields->first());
+        $extrafields = $extrafields ? (isset($extrafields->content) ? json_decode($extrafields->content) : null) : null;
+
         return [
             'id' => $this->id,
             'reference' => $this->reference,
@@ -43,6 +46,11 @@ class AddressResource extends JsonResource
             'contact' => new ContactResource($this->contacts->first()),
             'remark' => new RemarkResource($this->remarks->first()),
             'type' => $this->type,
+            'extrafields' => $extrafields,
+            'property_type' => $extrafields ? $extrafields->property_type : null,
+            'tools_required_unload' => $extrafields ? $extrafields->tools_required_unload : null,
+            'pickup_time_from' => $extrafields ? $extrafields->pickup_time_from : null,
+            'pickup_time_to' => $extrafields ? $extrafields->pickup_time_to : null,
             $this->mergeWhen($this->relationLoaded('owner'), [
                 'owner' => $this->when($this->owner instanceof Order, [
                     'reference' => $this->owner->reference,

app/Models/Address.php

@@ -4,6 +4,7 @@ namespace App\Models;
 
 use App\Classes\General\Interfaces\Contactable;
 use App\Classes\General\Interfaces\Remarkable;
+use App\Classes\ValueObjects\Constants\RemarkTypes;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\HasOne;
@@ -89,4 +90,12 @@ class Address extends AbstractModel implements Contactable, Remarkable
     {
         return $this->morphMany(Remark::class, 'owner');
     }
+
+    /**
+     * @return MorphMany
+     */
+    public function addressExtraFields(): MorphMany
+    {
+        return $this->morphMany(Remark::class, 'owner')->where('type', RemarkTypes::ADDRESS_EXTRA_COLUMNS);
+    }
 }

database/migrations/2024_06_12_110706_add_type_to_remarks_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddTypeToRemarksTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('remarks', function (Blueprint $table) {
+            $table->string('type')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('remarks', function (Blueprint $table) {
+            $table->dropColumn('type');
+        });
+    }
+}

resources/assets/vue/components/addresses/forms/AddressExtraDetailsComponent.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <label class="text-primary">卸货工具 Tools required to unload goods</label>
+    <vue-multi-select
+      ref="multiSelect"
+      :options="options"
+      :btnLabel="btnLabel"
+      @open="open"
+      @close="close"
+      :selectOptions="data">
+      <template v-slot:option="{ option }">
+        <input type="checkbox" :checked="option.selected"/>
+        <span>{{ option.name }}</span>
+      </template>
+    </vue-multi-select>
+  </div>
+</template>
+
+<script>
+import vueMultiSelect from 'vue-multi-select';
+import 'vue-multi-select/dist/lib/vue-multi-select.css';
+
+export default {
+  data() {
+    return {
+      values: [],
+      data: [{
+        list: [
+          { name: 'Manpower' },
+          { name: 'Forklift' },
+          { name: 'None of the above' }
+        ],
+      }],
+      options: {
+        multi: true,
+        groups: true,
+      },
+    };
+  },
+  methods: {
+    open() {
+      console.log('open');
+    },
+    close() {
+      console.log('close');
+    },
+    btnLabel(values) {
+      if (values.length === 0) {
+        return 'Select Tools required';
+      }
+      return values.map(v => v.name).join(', ');
+    },
+  },
+  components: {
+    vueMultiSelect,
+  },
+};
+</script>

resources/assets/vue/components/addresses/forms/AddressFormComponent.vue

@@ -3,14 +3,6 @@
         <div class="col">
             <div class="row" v-if="![7,8].includes($store.getters.getCompanyModuleType)">
                 <div class="col">
-                    <div class="row m-b-15">
-                        <div class="col">
-                            <validation-wrapper-component :validator="$v.parameters.reference">
-                                <label>Address Reference/Label</label>
-                                <input class="form-control" name="reference" v-model="parameters.reference">
-                            </validation-wrapper-component>
-                        </div>
-                    </div>
                     <div class="row m-b-15">
                         <div class="col">
                             <validation-wrapper-component :validator="$v.parameters.street_one">
@@ -41,6 +33,14 @@
                             </validation-wrapper-component>
                         </div>
                     </div>
+                    <div class="row m-b-15">
+                        <div class="col">
+                            <validation-wrapper-component :validator="$v.parameters.reference">
+                                <label>Address Name / Label</label>
+                                <input class="form-control" name="reference" v-model="parameters.reference" placeholder="E.g. Home Address">
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
                     <div class="row">
                         <div class="col">
                             <div class="row">
@@ -59,14 +59,6 @@
                                             </validation-wrapper-component>
                                         </div>
                                     </div>
-                                    <div class="row m-b-15">
-                                        <div class="col">
-                                            <validation-wrapper-component :validator="$v.parameters.remark">
-                                                <label>Delivery Remark</label>
-                                                <input class="form-control" name="remark" v-model="parameters.remark">
-                                            </validation-wrapper-component>
-                                        </div>
-                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -125,14 +117,48 @@
                             </validation-wrapper-component>
                         </div>
                     </div>
-                    <div class="row m-b-15">
+                </div>
-                        <div class="col">
+            </div>
-                            <validation-wrapper-component :validator="$v.parameters.remark">
+            <div class="row m-b-15">
-                                <label>Remark</label>
+                <div class="col">
-                                <input class="form-control" name="remark" v-model="parameters.remark">
+                    <validation-wrapper-component :validator="$v.parameters.remark">
-                            </validation-wrapper-component>
+                        <label>Delivery Remark</label>
-                        </div>
+                        <input class="form-control" name="remark" v-model="parameters.remark">
-                    </div>
+                    </validation-wrapper-component>
+                </div>
+            </div>
+            <div class="row m-b-15">
+                <div class="col-12 col-md pr-md-1 pb-3 pb-md-0">
+                    <validation-wrapper-component :validator="$v.parameters.pickup_time_from">
+                        <label>收货时间从 Available Hours From</label>
+                        <input type="time" class="form-control" name="pickup_time" v-model="parameters.pickup_time_from">
+                    </validation-wrapper-component>
+                </div>
+                <div class="col-12 col-md pl-md-1">
+                    <validation-wrapper-component :validator="$v.parameters.pickup_time_to">
+                        <label>最晚收货时间 Available Hours To</label>
+                        <input type="time" class="form-control" name="latest_pickup_time" v-model="parameters.pickup_time_to">
+                    </validation-wrapper-component> 
+                </div>
+            </div>
+            <div class="row m-b-15">
+                <div class="col-12 col-md pr-md-1 pb-3 pb-md-0">
+                    <validation-wrapper-component selectable :validator="$v.parameters.property_type">
+                        <label>房型 Receiver's property type</label>
+                        <select-component :options="['住家Landed house', '公寓Condominium (Drop on lobby only)', '工厂Factory', '店面Shop', '商场Shopping Mall (Drop on loading bay only)', 'Others']" v-model="parameters.property_type"></select-component>
+                    </validation-wrapper-component>
+                </div>
+                <div class="col-12 col-md pl-md-1 pb-3 pb-md-0">
+                    <!-- <validation-wrapper-component selectable :validator="$v.parameters.tools_required_unload">
+                        <label>卸货工具 Tools require to unload goods</label>
+                        <select-component :options="['Manpower', 'Forklift', 'None of above']" v-model="parameters.tools_required_unload"></select-component>
+                    </validation-wrapper-component> -->
+                    <address-extra-details-component v-model="parameters.tools_required_unload"></address-extra-details-component>
+                </div>
+            </div>
+            <div class="row justify-content-center allign-items-center">
+                <div class="col-12 col-sm-7">
+                    <h6 class="text-center fs-12 text-danger">**kindly reply within 2 hours while warehouse contact to arrange for delivery, otherwise, reschedule of delivery date will apply</h6>
                 </div>
             </div>
             <div class="row">
@@ -154,7 +180,7 @@
         props: {
             id: {
                 type: Number,
-                required: true
+                // required: true
             },
             type: {
                 type: Number,
@@ -174,6 +200,10 @@
                     remark: '',
                     phone: '',
                     person_in_charge: '',
+                    property_type: '',
+                    tools_required_unload: '',
+                    pickup_time_from: '',
+                    pickup_time_to: '',
 				}
 
             }            
@@ -189,12 +219,16 @@
                 this.parameters.phone = this.data.contact ? this.data.contact.phone : '';
                 this.parameters.person_in_charge = this.data.contact ? this.data.contact.reference : '';
                 this.parameters.remark = this.data.remark ? this.data.remark.content : '';
+                this.parameters.property_type = this.data.property_type ? this.data.property_type : '';
+                this.parameters.tools_required_unload = this.data.tools_required_unload ? this.data.tools_required_unload : '';
+                this.parameters.pickup_time_from = this.data.pickup_time_from ? this.data.pickup_time_from : '';
+                this.parameters.pickup_time_to = this.data.pickup_time_to ? this.data.pickup_time_to : '';
             }
         },
         watch: {
             'id': function () {
                 this.parameters.company_module_id = this.id;
-            }
+            },
         },
         methods:{
             submitForm(){

resources/assets/vue/general/mixins/addresses/validation/addressFormValidation.js

@@ -10,15 +10,20 @@ export default {
             },
             street_one: { required },
             street_two: {
-                required: requiredIf(function(){
+                required
-                    return [7,8].includes(this.$store.getters.getCompanyModuleType);
+                // required: requiredIf(function(){
-                })
+                //     return [7,8].includes(this.$store.getters.getCompanyModuleType);
+                // })
             },
             district_id: { required },
             post_code: { required },
             remark: {},
             phone: {required, numeric},
             person_in_charge: { required },
+            property_type: { required },
+            tools_required_unload: { required },
+            pickup_time_from: { required },
+            pickup_time_to: { required },
         }
     },
     mixins: [addressFormHandler]