From 44408266ee80a6878a6b33c7d76376da4555e438 Mon Sep 17 00:00:00 2001
From: Hironsan <hiroki.nakayama.py@gmail.com>
Date: Fri, 9 Dec 2022 20:47:13 +0900
Subject: [PATCH] Add TagList component

---
 frontend/components/project/TagList.vue | 28 +++++++++++++++++++++++++
 frontend/pages/projects/create.vue      | 16 ++++----------
 2 files changed, 32 insertions(+), 12 deletions(-)
 create mode 100644 frontend/components/project/TagList.vue

diff --git a/frontend/components/project/TagList.vue b/frontend/components/project/TagList.vue
new file mode 100644
index 00000000..009460dc
--- /dev/null
+++ b/frontend/components/project/TagList.vue
@@ -0,0 +1,28 @@
+<template>
+  <v-combobox
+    v-bind="$attrs"
+    :value="value"
+    :items="value"
+    label="Tags"
+    multiple
+    chips
+    outlined
+    dense
+    deletable-chips
+    hide-selected
+    @change="$emit('input', $event)"
+  />
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+export default Vue.extend({
+  props: {
+    value: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: true
+    }
+  }
+})
+</script>
diff --git a/frontend/pages/projects/create.vue b/frontend/pages/projects/create.vue
index 5d66c5c5..90b42771 100644
--- a/frontend/pages/projects/create.vue
+++ b/frontend/pages/projects/create.vue
@@ -6,17 +6,7 @@
         <project-type-field v-model="editedItem.projectType" />
         <project-name-field v-model="editedItem.name" outlined autofocus />
         <project-description-field v-model="editedItem.description" outlined />
-        <v-combobox
-          v-model="editedItem.tags"
-          :items="editedItem.tags"
-          label="Tags"
-          multiple
-          chips
-          outlined
-          dense
-          deletable-chips
-          hide-selected
-        />
+        <tag-list v-model="editedItem.tags" />
         <v-checkbox
           v-if="showExclusiveCategories"
           v-model="editedItem.exclusiveCategories"
@@ -77,6 +67,7 @@ import ProjectNameField from '~/components/project/ProjectNameField.vue'
 import ProjectTypeField from '~/components/project/ProjectTypeField.vue'
 import RandomOrderField from '~/components/project/RandomOrderField.vue'
 import SharingModeField from '~/components/project/SharingModeField.vue'
+import TagList from '~/components/project/TagList.vue'
 import {
   DocumentClassification,
   ImageClassification,
@@ -105,7 +96,8 @@ export default Vue.extend({
     ProjectNameField,
     ProjectDescriptionField,
     RandomOrderField,
-    SharingModeField
+    SharingModeField,
+    TagList
   },
 
   layout: 'projects',