From 80b9c81ab7294bed0ceb652a02b17e85850b21d8 Mon Sep 17 00:00:00 2001
From: Hironsan <hiroki.nakayama.py@gmail.com>
Date: Wed, 9 Aug 2023 15:36:54 +0900
Subject: [PATCH] Make unassign example easier

---
 frontend/components/example/AudioList.vue    | 9 ++++++++-
 frontend/components/example/DocumentList.vue | 9 ++++++++-
 frontend/components/example/ImageList.vue    | 9 ++++++++-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/frontend/components/example/AudioList.vue b/frontend/components/example/AudioList.vue
index 988a2858..85825cb1 100644
--- a/frontend/components/example/AudioList.vue
+++ b/frontend/components/example/AudioList.vue
@@ -59,7 +59,14 @@
         solo
         style="width: 200px"
         @change="onAssignOrUnassign(item, $event)"
-      />
+      >
+        <template #selection="{ attrs, item, parent, selected }">
+          <v-chip v-bind="attrs" :input-value="selected" small class="mt-1 mb-1">
+            <span class="pr-1">{{ item.username }}</span>
+            <v-icon small @click="parent.selectItem(item)"> $delete </v-icon>
+          </v-chip>
+        </template>
+      </v-combobox>
     </template>
     <template #[`item.action`]="{ item }">
       <v-btn small color="primary text-capitalize" @click="toLabeling(item)">
diff --git a/frontend/components/example/DocumentList.vue b/frontend/components/example/DocumentList.vue
index 61a667b3..2b6a9a8a 100644
--- a/frontend/components/example/DocumentList.vue
+++ b/frontend/components/example/DocumentList.vue
@@ -57,7 +57,14 @@
         solo
         style="width: 200px"
         @change="onAssignOrUnassign(item, $event)"
-      />
+      >
+        <template #selection="{ attrs, item, parent, selected }">
+          <v-chip v-bind="attrs" :input-value="selected" small class="mt-1 mb-1">
+            <span class="pr-1">{{ item.username }}</span>
+            <v-icon small @click="parent.selectItem(item)"> $delete </v-icon>
+          </v-chip>
+        </template>
+      </v-combobox>
     </template>
     <template #[`item.action`]="{ item }">
       <v-btn class="me-1" small color="primary text-capitalize" @click="$emit('edit', item)"
diff --git a/frontend/components/example/ImageList.vue b/frontend/components/example/ImageList.vue
index c3f2c462..078290e8 100644
--- a/frontend/components/example/ImageList.vue
+++ b/frontend/components/example/ImageList.vue
@@ -63,7 +63,14 @@
         solo
         style="width: 200px"
         @change="onAssignOrUnassign(item, $event)"
-      />
+      >
+        <template #selection="{ attrs, item, parent, selected }">
+          <v-chip v-bind="attrs" :input-value="selected" small class="mt-1 mb-1">
+            <span class="pr-1">{{ item.username }}</span>
+            <v-icon small @click="parent.selectItem(item)"> $delete </v-icon>
+          </v-chip>
+        </template>
+      </v-combobox>
     </template>
     <template #[`item.action`]="{ item }">
       <v-btn small color="primary text-capitalize" @click="toLabeling(item)">