refactor: keyword autocompleteItems

Services/client/src/components/FormUpload.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useTreeDataStore } from '@/stores/tree-data'
-
+import  TagInput  from '@/components/TagInput.vue'
 const { currentPath } = storeToRefs(useTreeDataStore())
 const { uploadFile, checkFile } = useTreeDataStore()
 
@@ -112,57 +112,10 @@ async function handleSubmit(continueUpload: boolean = false) {
       placeholder="เลือกกลุ่ม/หมวดหมู่"
       dense
     />
-    <span class="text-weight-bold">คำสำคัญ</span>
-    <!-- <q-input
-      class="q-my-md"
-      outlined
-      v-model="fileKeyword"
-      placeholder="กรอกคำสำคัญ"
-      dense
-    /> -->
 
-    <q-input
-      outlined
-      v-model="tag"
-      @keydown.delete="() => deleteTag()"
-      @keydown.space="saveTag"
-      label="กด space เพื่อเพิ่ม"
-      class="q-mt-md"
-    >
-      <template #prepend>
-        <div class="flex rounded-borders " style="gap: 0.5rem; max-width: 12rem overflow: visible;" >
-          <q-badge
-            rounded
-            color="grey-3"
-            class="q-p-px-md q-py-xs text-black"
-            v-for="tag in tagList"
-            :key="tag"
-          >
-          <div>
-            {{ tag }}
-            <q-btn round color="grey-5" size="4.5px">
-              <q-icon class="cursor" name="close" @click="deleteTag(tag)" />
-            </q-btn>
-          </div>
-            
-            
-          </q-badge>
-        </div>
-      </template>
-    </q-input>
-    <q-btn
-      class="q-px-md"
-      label="บันทึก"
-      type="submit"
-      color="primary"
-      dense
-      @click="
-        () => {
-          $emit('update:drawerFile')
-          handleSubmit()
-        }
-      "
-    />
+    <tag-input/>
+
+
   </q-drawer>
 
   <q-dialog
@@ -206,30 +159,4 @@ async function handleSubmit(continueUpload: boolean = false) {
 .cursor {
   cursor: pointer;
 }
-.box {
-  display: inline-block;
-  border: 2px solid #f1f2f4;
-  border-radius: 8px;
-  cursor: pointer;
-}
-
-.dashed {
-  opacity: 0.4;
-  display: inline-block;
-  border: 2px solid #babdc3;
-  border-radius: 8px;
-  cursor: pointer;
-  border-style: dashed;
-}
-
-.add-icon {
-  margin: auto auto;
-}
-
-.add-button {
-  position: absolute;
-  top: 75px;
-  right: 45px;
-  background-color: white;
-}
 </style>

Services/client/src/components/TagInput.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import TagInput from "@mayank1513/vue-tag-input";
+import "@mayank1513/vue-tag-input/style.css";
+
+const autocompleteItems = [
+  "No dependencies",
+  "Autocompletion",
+  "Keep Focused",
+  "Fast Settup",
+  "Mini Sized",
+  "Customizable",
+  "Backspace/Delete to remove tag",
+  "Turns red when backspace/delete is pressed",
+  "Examples",
+  "Docs",
+  "Copy/Paste",
+]
+const tags = ref<string[]>([]);
+
+</script>
+
+<template>
+  <q-btn @click="()=> {console.log(tags);
+  }">test</q-btn>
+  <tag-input tagBgColor="rgb(189, 184, 179)" :autocomplete-items="autocompleteItems" v-model="tags" />
+  <!-- <q-btn
+      class="q-px-md"
+      label="บันทึก"
+      type="submit"
+      color="primary"
+      dense
+      @click="
+        () => {
+          $emit('update:drawerFile')
+    
+        }
+      "
+    /> -->
+</template>