From 679d53ab570cab93ffc4f0c538b5922747d2d5dc Mon Sep 17 00:00:00 2001
From: Aqqil Azman <aqqil.azman99@gmail.com>
Date: Wed, 19 Jun 2024 11:55:11 +0800
Subject: [PATCH] initial commit for ToolsRequiredComponent and its options

---
 .../general/forms/ToolsRequiredComponent.vue  | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 resources/assets/vue/components/general/forms/ToolsRequiredComponent.vue

diff --git a/resources/assets/vue/components/general/forms/ToolsRequiredComponent.vue b/resources/assets/vue/components/general/forms/ToolsRequiredComponent.vue
new file mode 100644
index 00000000..28258741
--- /dev/null
+++ b/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>