refactor: keyword

Services/client/src/components/FormUpload.vue

@@ -17,6 +17,26 @@ const props = withDefaults(defineProps<{ drawerFile: boolean }>(), {
   drawerFile: false,
 })
 
+const tag = ref('')
+const tagList = ref<Array<string>>([])
+
+function deleteTag(index?: string) {
+  console.log(index)
+
+  if (index === undefined) {
+    tagList.value.pop()
+  } else {
+    tagList.value = tagList.value.filter((t) => t !== index)
+  }
+}
+
+function saveTag() {
+  if (!!tag.value?.trim()) {
+    tagList.value.push(tag.value)
+    tag.value = ''
+  }
+}
+
 async function handleSubmit(continueUpload: boolean = false) {
   if (!inputFile.value) return
   // getFile(p)
@@ -93,13 +113,43 @@ async function handleSubmit(continueUpload: boolean = false) {
       dense
     />
     <span class="text-weight-bold">คำสำคัญ</span>
-    <q-input
+    <!-- <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="บันทึก"
@@ -123,7 +173,13 @@ async function handleSubmit(continueUpload: boolean = false) {
   >
     <q-card style="width: 400px">
       <q-card-section>
-        <div class="text-h6"><q-icon name="error" color="negative" size="2.5rem"/>เตือนพบไฟล์ชื่อซ้ำในระบบ</div>
+        <div class="text-h6">
+          <q-icon
+            name="error"
+            color="negative"
+            size="2.5rem"
+          />เตือนพบไฟล์ชื่อซ้ำในระบบ
+        </div>
       </q-card-section>
 
       <q-card-section class="q-pt-none">
@@ -147,6 +203,9 @@ async function handleSubmit(continueUpload: boolean = false) {
 </template>
 
 <style lang="scss" scoped>
+.cursor {
+  cursor: pointer;
+}
 .box {
   display: inline-block;
   border: 2px solid #f1f2f4;