From fcfe13e52deab73acbde2eeb40b0866da48f490e Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Wed, 5 Apr 2023 02:09:22 +0800
Subject: [PATCH 1/3] Feat: Use vue-multiselect in Edit Tag

---
 src/components/TagEditDialog.vue | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/TagEditDialog.vue b/src/components/TagEditDialog.vue
index 795589947..1467de051 100644
--- 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: {

From f8c29095765246efce96da5ee6f96fe551ca9023 Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Wed, 5 Apr 2023 02:09:36 +0800
Subject: [PATCH 2/3] UI: Improve styling

---
 src/assets/multiselect.scss | 8 ++++++++
 src/components/Tag.vue      | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/assets/multiselect.scss b/src/assets/multiselect.scss
index 53b47c16e..9ea04ca07 100644
--- a/src/assets/multiselect.scss
+++ b/src/assets/multiselect.scss
@@ -1,6 +1,12 @@
 @import "vars.scss";
 @import "node_modules/vue-multiselect/dist/vue-multiselect";
 
+.multiselect {
+    .dark & {
+        color: $dark-font-color;
+    }
+}
+
 .multiselect__tags {
     border-radius: 1.5rem;
     border: 1px solid #ced4da;
@@ -14,10 +20,12 @@
 
 .multiselect__option--highlight {
     background: $primary !important;
+    color: $dark-font-color2 !important;
 }
 
 .multiselect__option--highlight::after {
     background: $primary !important;
+    color: $dark-font-color2 !important;
 }
 
 .multiselect__tag {
diff --git a/src/components/Tag.vue b/src/components/Tag.vue
index b8d4a1e89..956eea3e7 100644
--- a/src/components/Tag.vue
+++ b/src/components/Tag.vue
@@ -6,7 +6,7 @@
                   'm-2': size == 'normal',
                   'px-2': size == 'sm',
                   'py-0': size == 'sm',
-                  'm-1': size == 'sm',
+                  'mx-1': size == 'sm',
         }"
         :style="{ backgroundColor: item.color, fontSize: size == 'sm' ? '0.7em' : '1em' }"
     >

From 9975050872d8370014d9e938fecd9e85be1734e0 Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Wed, 5 Apr 2023 03:07:37 +0800
Subject: [PATCH 3/3] Chore: Fix line break

---
 src/components/TagEditDialog.vue | 4 +---
 src/pages/StatusPage.vue         | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/TagEditDialog.vue b/src/components/TagEditDialog.vue
index 1467de051..bdfbe1322 100644
--- a/src/components/TagEditDialog.vue
+++ b/src/components/TagEditDialog.vue
@@ -89,9 +89,7 @@
                                     class="mt-1"
                                 >
                                     <template #option="{ option }">
-                                        <div
-                                            class="d-inline-flex"
-                                        >
+                                        <div class="d-inline-flex">
                                             <span>{{ option.name }} <Tag v-for="monitorTag in option.tags" :key="monitorTag" :item="monitorTag" :size="'sm'" /></span>
                                         </div>
                                     </template>
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index fc3d3741d..69c4c7a88 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -291,9 +291,7 @@
                             class="mt-3"
                         >
                             <template #option="{ option }">
-                                <div
-                                    class="d-inline-flex"
-                                >
+                                <div class="d-inline-flex">
                                     <span>{{ option.name }} <Tag v-for="tag in option.tags" :key="tag" :item="tag" :size="'sm'" /></span>
                                 </div>
                             </template>