mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-11-13 17:14:21 -08:00
Feat: Split add tag to modal
Fix: Fix wrong css class Fix: More misc. styling fixes
This commit is contained in:
Nelson Chan
parent
a0e4e96160
commit
a6f9762c4d
|
|
@ -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">
|
||||||
|
<input v-model="newDraftTag.value" class="form-control" :class="{'is-invalid': validateDraftTag.valueInvalid}" :placeholder="$t('value (optional)')" />
|
||||||
|
<div class="invalid-feedback">
|
||||||
|
{{ $t("Tag with this value already exist.") }}
|
||||||
|
</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>
|
</div>
|
||||||
<div class="mb-2">
|
|
||||||
<input v-model="newDraftTag.value" class="form-control" :class="{'is-invalid': validateDraftTag.valueInvalid}" :placeholder="$t('value (optional)')" />
|
|
||||||
<div class="invalid-feedback">
|
|
||||||
{{ $t("Tag with this value already exist.") }}
|
|
||||||
</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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue