Merge pull request #3024 from chakflying/feat/edit-tag-multiselect

UI: Use vue-multiselect in Edit Tag & Styling Fixes

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 {

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' }"
     >

src/components/TagEditDialog.vue

@@ -76,11 +76,24 @@
                                     </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">
+                                <VueMultiselect
-                                    <option v-for="monitor in allMonitorList" :key="monitor.id" :value="monitor">{{ monitor.name }}</option>
+                                    v-model="selectedAddMonitor"
-                                </select>
+                                    :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 +120,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 +131,7 @@ export default {
     components: {
         VueMultiselect,
         Confirm,
+        Tag,
     },
     props: {
         updated: {

src/pages/StatusPage.vue

@@ -291,9 +291,7 @@
                             class="mt-3"
                         >
                             <template #option="{ option }">
-                                <div
+                                <div class="d-inline-flex">
-                                    class="d-inline-flex"
-                                >
                                     <span>{{ option.name }} <Tag v-for="tag in option.tags" :key="tag" :item="tag" :size="'sm'" /></span>
                                 </div>
                             </template>