Self-Hosted
/
uptime-kuma
mirror of https://github.com/louislam/uptime-kuma
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Feat: Split add tag to modal

Browse Source 
Fix: Fix wrong css class

Fix: More misc. styling fixes
pull/278/head
Nelson Chan 3 years ago
parent a0e4e96160
commit a6f9762c4d
1 changed files with 111 additions and 78 deletions
Show Stats Download Patch File Download Diff File

189
src/components/TagsManager.vue
Unescape View File

@ -9,94 +9,111 @@
:remove="deleteTag" :remove="deleteTag"
/> />
</div> </div>
<div> <div class="p-1">
<vue-multiselect <button
v-model="newDraftTag.select" type="button"
class="mb-2" class="btn btn-outline-secondary btn-add"
:options="tagOptions" :disabled="processing"
:multiple="false" @click.stop="showAddDialog"
:searchable="true"
:placeholder="$t('Add New below or Select...')"
track-by="id"
label="name"
> >
<template #option="{ option }"> <font-awesome-icon class="me-1" icon="plus" /> {{ $t("Add") }}
<div class="mx-2 py-1 px-3 rounded d-inline-flex" </button>
style="margin-top: -5px; margin-bottom: -5px; height: 24px;" </div>
:style="{ color: textColor(option), backgroundColor: option.color + ' !important' }" <div ref="modal" class="modal fade" tabindex="-1">
> <div class="modal-dialog modal-dialog-centered">
<span> <div class="modal-content">
{{ option.name }}</span> <div class="modal-body">
</div> <vue-multiselect
</template> v-model="newDraftTag.select"
<template #singleLabel="{ option }"> class="mb-2"
<div class="py-1 px-3 rounded d-inline-flex" :options="tagOptions"
style="height: 24px;" :multiple="false"
:style="{ color: textColor(option), backgroundColor: option.color + ' !important' }" :searchable="true"
> :placeholder="$t('Add New below or Select...')"
<span>{{ option.name }}</span> track-by="id"
</div> label="name"
</template> >
</vue-multiselect> <template #option="{ option }">
<div v-if="newDraftTag.select?.id == null" class="d-flex mb-2"> <div class="mx-2 py-1 px-3 rounded d-inline-flex"
<div class="w-50 pe-2"> style="margin-top: -5px; margin-bottom: -5px; height: 24px;"
<input v-model="newDraftTag.name" class="form-control" :class="{'is-invalid': validateDraftTag.nameInvalid}" placeholder="name" /> :style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
<div class="invalid-feedback"> >
{{ $t("Tag with this name already exist.") }} <span>
</div> {{ option.name }}</span>
</div> </div>
<div class="w-50 ps-2"> </template>
<vue-multiselect <template #singleLabel="{ option }">
v-model="newDraftTag.color" <div class="py-1 px-3 rounded d-inline-flex"
:options="colorOptions" style="height: 24px;"
:multiple="false" :style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
:searchable="true" >
:placeholder="$t('color')" <span>{{ option.name }}</span>
track-by="color" </div>
label="name" </template>
select-label="" </vue-multiselect>
deselect-label="" <div v-if="newDraftTag.select?.id == null" class="d-flex mb-2">
> <div class="w-50 pe-2">
<template #option="{ option }"> <input v-model="newDraftTag.name" class="form-control" :class="{'is-invalid': validateDraftTag.nameInvalid}" :placeholder="$t('name')" />
<div class="mx-2 py-1 px-3 rounded d-inline-flex" <div class="invalid-feedback">
style="height: 24px; color: white;" {{ $t("Tag with this name already exist.") }}
:style="{ backgroundColor: option.color + ' !important' }" </div>
>
<span>{{ option.name }}</span>
</div> </div>
</template> <div class="w-50 ps-2">
<template #singleLabel="{ option }"> <vue-multiselect
<div class="py-1 px-3 rounded d-inline-flex" v-model="newDraftTag.color"
style="height: 24px; color: white;" :options="colorOptions"
:style="{ backgroundColor: option.color + ' !important' }" :multiple="false"
> :searchable="true"
<span>{{ option.name }}</span> :placeholder="$t('color')"
track-by="color"
label="name"
select-label=""
deselect-label=""
>
<template #option="{ option }">
<div class="mx-2 py-1 px-3 rounded d-inline-flex"
style="height: 24px; color: white;"
:style="{ backgroundColor: option.color + ' !important' }"
>
<span>{{ option.name }}</span>
</div>
</template>
<template #singleLabel="{ option }">
<div class="py-1 px-3 rounded d-inline-flex"
style="height: 24px; color: white;"
:style="{ backgroundColor: option.color + ' !important' }"
>
<span>{{ option.name }}</span>
</div>
</template>
</vue-multiselect>
</div> </div>
</template> </div>
</vue-multiselect> <div class="mb-2">
</div> <input v-model="newDraftTag.value" class="form-control" :class="{'is-invalid': validateDraftTag.valueInvalid}" :placeholder="$t('value (optional)')" />
</div> <div class="invalid-feedback">
<div class="mb-2"> {{ $t("Tag with this value already exist.") }}
<input v-model="newDraftTag.value" class="form-control" :class="{'is-invalid': validateDraftTag.valueInvalid}" :placeholder="$t('value (optional)')" /> </div>
<div class="invalid-feedback"> </div>
{{ $t("Tag with this value already exist.") }} <div class="mb-2">
<button
type="button"
class="btn btn-secondary float-end"
:disabled="processing || validateDraftTag.invalid"
@click.stop="addDraftTag"
>
{{ $t("Add") }}
</button>
</div>
</div>
</div> </div>
</div> </div>
<div class="mb-2">
<button
type="button"
class="btn btn-secondary float-end"
:disabled="processing || validateDraftTag.invalid"
@click.stop="addDraftTag"
>
{{ $t("Add") }}
</button>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { Modal } from "bootstrap";
import VueMultiselect from "vue-multiselect"; import VueMultiselect from "vue-multiselect";
import Tag from "../components/Tag.vue"; import Tag from "../components/Tag.vue";
import { useToast } from "vue-toastification" import { useToast } from "vue-toastification"
@ -115,6 +132,7 @@ export default {
}, },
data() { data() {
return { return {
modal: null,
existingTags: [], existingTags: [],
processing: false, processing: false,
newTags: [], newTags: [],
@ -205,9 +223,13 @@ export default {
}, },
}, },
mounted() { mounted() {
this.modal = new Modal(this.$refs.modal);
this.getExistingTags(); this.getExistingTags();
}, },
methods: { methods: {
showAddDialog() {
this.modal.show();
},
getExistingTags() { getExistingTags() {
this.$root.getSocket().emit("getTags", (res) => { this.$root.getSocket().emit("getTags", (res) => {
if (res.ok) { if (res.ok) {
@ -269,6 +291,7 @@ export default {
invalid: true, invalid: true,
nameInvalid: false, nameInvalid: false,
}; };
this.modal.hide();
}, },
addTagAsync(newTag) { addTagAsync(newTag) {
return new Promise((resolve) => { return new Promise((resolve) => {
@ -357,3 +380,13 @@ export default {
}, },
}; };
</script> </script>
<style scoped>
.btn-add {
width: 100%;
}
.modal-body {
padding: 1.5rem;
}
</style>

Write Preview
Loading…
Cancel
Save