initial commit for ToolsRequiredComponent and its options

package.json

@@ -31,6 +31,7 @@
         "vue": "^2.6.10",
         "vue-avatar": "^2.1.8",
         "vue-debounce": "^2.6.0",
+        "vue-multi-select": "^4.6.0",
         "vue-template-compiler": "^2.6.10",
         "vue-the-mask": "^0.11.1",
         "vuelidate": "^0.7.4",

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

@@ -71,6 +71,43 @@
                             </div>
                         </div>
                     </div>
+                    <div class="row">
+                        <div class="col">
+                            <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">
+                                        <label>收货时间 Available Hours</label>
+                                        <input type="time" class="form-control" name="pickup_time" v-model="parameters.pickup_time">
+                                    </validation-wrapper-component>
+                                </div>
+                                <div class="col-12 col-md pl-md-1">
+                                    <validation-wrapper-component :validator="$v.parameters.latest_pickup_time">
+                                        <label>最晚收货时间 Latest Available Hours</label>
+                                        <input type="time" class="form-control" name="latest_pickup_time" v-model="parameters.latest_pickup_time">
+                                    </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 class="m-b-15" :validator="$v.parameters.property_type">
+                                        <label class="text-primary">房型 Receiver's Property Type</label>
+                                        <select-component :options="propertyOptions" v-model="parameters.property_type"></select-component>
+                                    </validation-wrapper-component>
+                                </div>
+                                <div class="col-12 col-md pl-md-1 ">
+                                        <tools-required-component></tools-required-component>
+                                </div>
+                            </div>
+                            <div class="col no-padding">
+                                <div class="row">
+                                    <div class="col"></div>
+                                    <div class="col-12 col-sm-7">
+                                        <h6 class="text-right fs-12 text-danger m-b-15 text-right">**kindly reply within 2 hours while warehouse contact to arrange for delivery, otherwise, reschedule of delivery date will apply.</h6>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="row" v-if="[7,8].includes($store.getters.getCompanyModuleType)">
@@ -174,8 +211,19 @@
                     remark: '',
                     phone: '',
                     person_in_charge: '',
-				}
+                    pickup_time: '',
-
+                    latest_pickup_time: '',
+                    property_type: '',
+                    tools_required: '',
+				},
+                propertyOptions: [
+                { id: 1, text: '住家-Landed house' },
+                { id: 2, text: '公寓-Condominium (Drop on lobby only)' },
+                { id: 3, text: '工厂-Factory' },
+                { id: 4, text: '店面-Shop' },
+                { id: 5, text: '商场-Shopping Mall (Drop on loading bay only)' },
+                { id: 6, text: 'Others' },
+                ],
             }            
 		},
         created(){

resources/assets/vue/components/general/forms/ToolsRequiredComponent.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <label class="text-primary">卸货工具 Tools required to unload goods</label>
+    <vue-multi-select
+      ref="multiSelect"
+      v-model="values"
+      :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/general/mixins/addresses/validation/addressFormValidation.js

@@ -19,6 +19,10 @@ export default {
             remark: {},
             phone: {required, numeric},
             person_in_charge: { required },
+            pickup_time: { required },
+            latest_pickup_time: { required },
+            property_type: {},
+            tools_required: {},
         }
     },
     mixins: [addressFormHandler]