From 38eb0348f9dd6080322ee5f063f965a03a528a1a Mon Sep 17 00:00:00 2001
From: shibafu <shibafu528@gmail.com>
Date: Thu, 4 Jul 2019 22:33:08 +0900
Subject: [PATCH] =?UTF-8?q?=E5=85=A5=E5=8A=9B=E6=B8=88=E3=81=BF=E3=81=AE?=
 =?UTF-8?q?=E3=82=BF=E3=82=B0=E5=80=99=E8=A3=9C=E3=81=AE=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E8=89=B2=E3=82=92=E5=A4=89=E6=9B=B4=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/js/components/MetadataPreview.vue  | 34 ++++++++++++++++---
 resources/assets/js/components/TagInput.vue   |  7 +++-
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/resources/assets/js/components/MetadataPreview.vue b/resources/assets/js/components/MetadataPreview.vue
index eeada94..7b81c8a 100644
--- a/resources/assets/js/components/MetadataPreview.vue
+++ b/resources/assets/js/components/MetadataPreview.vue
@@ -20,8 +20,8 @@
                                 <p class="card-text mb-2" style="font-size: small;">タグ候補<br><span class="text-secondary">(クリックするとタグ入力欄にコピーできます)</span></p>
                                 <ul class="list-inline d-inline">
                                     <li v-for="tag in suggestions"
-                                        class="list-inline-item badge badge-primary metadata-tag-item"
-                                        @click="addTag(tag)"><span class="oi oi-tag"></span> {{ tag }}</li>
+                                        :class="tagClasses(tag)"
+                                        @click="addTag(tag.name)"><span class="oi oi-tag"></span> {{ tag.name }}</li>
                                 </ul>
                             </template>
                         </div>
@@ -54,6 +54,11 @@
         }[],
     };
 
+    type Suggestion = {
+        name: string,
+        used: boolean,
+    }
+
     @Component
     export default class MetadataPreview extends Vue {
         @Prop() readonly state!: MetadataLoadState;
@@ -62,16 +67,37 @@
         // for use in v-if
         private readonly MetadataLoadState = MetadataLoadState;
 
+        tags: string[] = [];
+
+        created() {
+            bus.$on("change-tag", (tags: string[]) => this.tags = tags);
+        }
+
         addTag(tag: string) {
             bus.$emit("add-tag", tag);
         }
 
-        get suggestions() {
+        tagClasses(s: Suggestion) {
+            return {
+                "list-inline-item": true,
+                "badge": true,
+                "badge-primary": !s.used,
+                "badge-secondary": s.used,
+                "metadata-tag-item": true,
+            };
+        }
+
+        get suggestions(): Suggestion[] {
             if (this.metadata === null) {
                 return [];
             }
 
-            return this.metadata.tags.map(t => t.name);
+            return this.metadata.tags.map(t => {
+                return {
+                    name: t.name,
+                    used: this.tags.indexOf(t.name) !== -1
+                };
+            });
         }
 
         get hasImage() {
diff --git a/resources/assets/js/components/TagInput.vue b/resources/assets/js/components/TagInput.vue
index 6c7908e..564c088 100644
--- a/resources/assets/js/components/TagInput.vue
+++ b/resources/assets/js/components/TagInput.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-    import {Vue, Component, Prop} from "vue-property-decorator";
+    import {Vue, Component, Prop, Watch} from "vue-property-decorator";
     import {bus} from "../checkin";
 
     @Component
@@ -56,6 +56,11 @@
             this.tags.splice(index, 1);
         }
 
+        @Watch("tags")
+        onTagsChanged() {
+            bus.$emit("change-tag", this.tags);
+        }
+
         get containerClass(): object {
             return {
                 "form-control": true,