Feat: Use vue-multiselect in Edit Tag

devinsbdev · May 7, 2023 · fcfe13e · fcfe13e
1 parent 8a3bce4
commit fcfe13e
Showing 1 changed file with 21 additions and 4 deletions.
diff --git a/src/components/TagEditDialog.vue b/src/components/TagEditDialog.vue
@@ -76,11 +76,26 @@
                                     </button>
                                 </router-link>
                             </div>
-                            <div v-if="allMonitorList.length > 0" class="pt-3 px-3">
+                            <div v-if="allMonitorList.length > 0" class="pt-3">
                                 <label class="form-label">{{ $t("Add a monitor") }}:</label>
-                                <select v-model="selectedAddMonitor" class="form-control">
-                                    <option v-for="monitor in allMonitorList" :key="monitor.id" :value="monitor">{{ monitor.name }}</option>
-                                </select>
+                                <VueMultiselect
+                                    v-model="selectedAddMonitor"
+                                    :options="allMonitorList"
+                                    :multiple="false"
+                                    :searchable="true"
+                                    :placeholder="$t('Add a monitor')"
+                                    label="name"
+                                    trackBy="name"
+                                    class="mt-1"
+                                >
+                                    <template #option="{ option }">
+                                        <div
+                                            class="d-inline-flex"
+                                        >
+                                            <span>{{ option.name }} <Tag v-for="monitorTag in option.tags" :key="monitorTag" :item="monitorTag" :size="'sm'" /></span>
+                                        </div>
+                                    </template>
+                                </VueMultiselect>
                             </div>
                         </div>
                     </div>
@@ -107,6 +122,7 @@
 <script>
 import { Modal } from "bootstrap";
 import Confirm from "./Confirm.vue";
+import Tag from "./Tag.vue";
 import VueMultiselect from "vue-multiselect";
 import { colorOptions } from "../util-frontend";
 import { useToast } from "vue-toastification";
@@ -117,6 +133,7 @@ export default {
     components: {
         VueMultiselect,
         Confirm,
+        Tag,
     },
     props: {
         updated: {