From 7edd30ab0a30f4d352abe991d1f0e3d62d2ce5b7 Mon Sep 17 00:00:00 2001
From: somnetsak123 <https://somnetsak123@github.com>
Date: Thu, 30 Nov 2023 17:13:00 +0700
Subject: [PATCH] fix: keyword autocompleteItems

---
 Services/client/src/components/FileForm.vue | 57 +++++++++++++++++----
 Services/client/src/components/ListView.vue |  4 +-
 Services/client/src/components/TagInput.vue | 40 ---------------
 3 files changed, 50 insertions(+), 51 deletions(-)
 delete mode 100644 Services/client/src/components/TagInput.vue

diff --git a/Services/client/src/components/FileForm.vue b/Services/client/src/components/FileForm.vue
index 9d4bc3e..77ef19c 100644
--- a/Services/client/src/components/FileForm.vue
+++ b/Services/client/src/components/FileForm.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
 
+const storesKeyword = ['test1', 'test2', 'test3', 'test4', 'test5']
+const filterOptions = ref(storesKeyword)
+const inputKeyword = ref<string[]>([])
+
 const props = withDefaults(
   defineProps<{
     open: boolean
@@ -13,7 +17,7 @@ const props = withDefaults(
   }>(),
   {
     open: false,
-  },
+  }
 )
 
 const emit = defineEmits([
@@ -53,6 +57,29 @@ function submit() {
   reset()
 }
 
+function createkeyword(val, done) {
+  if (val.length > 2) {
+    if (!inputKeyword.value.includes(val)) {
+      inputKeyword.value.push(val)
+      done(val, 'add-unique')
+      console.log(inputKeyword.value)
+    }
+  }
+}
+
+function filterkeyword(val, update) {
+  update(() => {
+    if (val === '') {
+      filterOptions.value = storesKeyword
+    } else {
+      const needle = val.toLowerCase()
+      filterOptions.value = storesKeyword.filter(
+        (v) => v.toLowerCase().indexOf(needle) > -1
+      )
+    }
+  })
+}
+
 onMounted(() => window.addEventListener('keydown', keydown))
 onUnmounted(() => window.addEventListener('keydown', keydown))
 
@@ -150,14 +177,26 @@ const file = ref<File | undefined>()
 
       <section class="q-mb-md">
         <span class="text-weight-bold">คำสำคัญ</span>
-        <q-input
-          outlined
-          dense
-          class="q-mt-sm"
-          placeholder="คำสำคัญ"
-          :model-value="keyword"
-          @update:model-value="(v) => $emit('update:keyword', v)"
-        />
+        <div class="q-mt-md">
+          <q-select
+            outlined
+            v-model="inputKeyword"
+            use-input
+            use-chips
+            multiple
+            input-debounce="0"
+            @new-value="createkeyword"
+            :options="filterOptions"
+            @filter="filterkeyword"
+            style="width: 250px"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> No results </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+        </div>
       </section>
 
       <section :style="{ display: 'flex', gap: '.5rem' }">
diff --git a/Services/client/src/components/ListView.vue b/Services/client/src/components/ListView.vue
index 0270405..2d39db2 100644
--- a/Services/client/src/components/ListView.vue
+++ b/Services/client/src/components/ListView.vue
@@ -243,7 +243,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
 </script>
 
 <template>
-  <div class="q-pa-md">
+  <div class="q-mt-md">
     <div class="q-gutter-sm">
       <div
         class="flex flex-break d justify-between space-between"
@@ -331,7 +331,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
     </div>
   </div>
 
-  <div class="q-pa-md" v-if="currentDept >= 3">
+  <div class="q-mt-md" v-if="currentDept >= 3">
     <div class="q-gutter-sm">
       <div class="flex flex-break d justify-between space-between">
         <div>
diff --git a/Services/client/src/components/TagInput.vue b/Services/client/src/components/TagInput.vue
deleted file mode 100644
index 5532f02..0000000
--- a/Services/client/src/components/TagInput.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<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>
\ No newline at end of file