Infra-Mirrors/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-12-29 17:26:26 -05:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Use vue-multiselect in Edit Tag

Browse Source
This commit is contained in:
Nelson Chan 2023-04-05 02:09:22 +08:00
parent 8a3bce44ef
commit fcfe13e52d
1 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/TagEditDialog.vue
View File

@ -76,11 +76,26 @@
</button> </button>
</router-link> </router-link>
</div> </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> <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> </div>
</div> </div>
@ -107,6 +122,7 @@
<script> <script>
import { Modal } from "bootstrap"; import { Modal } from "bootstrap";
import Confirm from "./Confirm.vue"; import Confirm from "./Confirm.vue";
import Tag from "./Tag.vue";
import VueMultiselect from "vue-multiselect"; import VueMultiselect from "vue-multiselect";
import { colorOptions } from "../util-frontend"; import { colorOptions } from "../util-frontend";
import { useToast } from "vue-toastification"; import { useToast } from "vue-toastification";
@ -117,6 +133,7 @@ export default {
components: { components: {
VueMultiselect, VueMultiselect,
Confirm, Confirm,
Tag,
}, },
props: { props: {
updated: { updated: {