mudhorn/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-13 17:14:21 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Feat: Split add tag to modal

Browse source 
Fix: Fix wrong css class

Fix: More misc. styling fixes
This commit is contained in:
Nelson Chan 2021-09-10 16:00:11 +08:00
parent a0e4e96160
commit a6f9762c4d
1 changed files with 111 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/components/TagsManager.vue
View file

@ -9,7 +9,20 @@
:remove="deleteTag" :remove="deleteTag"
/> />
</div> </div>
<div> <div class="p-1">
<button
type="button"
class="btn btn-outline-secondary btn-add"
:disabled="processing"
@click.stop="showAddDialog"
>
<font-awesome-icon class="me-1" icon="plus" /> {{ $t("Add") }}
</button>
</div>
<div ref="modal" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<vue-multiselect <vue-multiselect
v-model="newDraftTag.select" v-model="newDraftTag.select"
class="mb-2" class="mb-2"
@ -40,7 +53,7 @@
</vue-multiselect> </vue-multiselect>
<div v-if="newDraftTag.select?.id == null" class="d-flex mb-2"> <div v-if="newDraftTag.select?.id == null" class="d-flex mb-2">
<div class="w-50 pe-2"> <div class="w-50 pe-2">
<input v-model="newDraftTag.name" class="form-control" :class="{'is-invalid': validateDraftTag.nameInvalid}" placeholder="name" /> <input v-model="newDraftTag.name" class="form-control" :class="{'is-invalid': validateDraftTag.nameInvalid}" :placeholder="$t('name')" />
<div class="invalid-feedback"> <div class="invalid-feedback">
{{ $t("Tag with this name already exist.") }} {{ $t("Tag with this name already exist.") }}
</div> </div>
@ -94,9 +107,13 @@
</div> </div>
</div> </div>
</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>