refs select and select remote re-factoring

This commit is contained in:
Cüneyt Şentürk
2020-11-10 16:55:21 +03:00
parent 683b2a372d
commit 57759aa718
2 changed files with 254 additions and 562 deletions

View File

@ -269,7 +269,7 @@ export default {
created() {
// Option set sort_option data
if (Object.keys(this.options).length) {
if (!Array.isArray(this.options)) {
for (const [key, value] of Object.entries(this.options)) {
this.sort_options.push({
key: key,
@ -279,8 +279,9 @@ export default {
} else {
this.options.forEach(function (option, index) {
this.sort_options.push({
key: option,
value: index
index: index,
key: option.id,
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
});
}, this);
}
@ -366,11 +367,11 @@ export default {
var value = this.$children[0].$children[0].$refs.input.value;
}
if (this.add_new.type == 'inline') {
if (value === '') {
return false;
}
if (this.add_new.type == 'inline') {
await this.addInline(value);
} else {
await this.onModal(value);
@ -535,6 +536,10 @@ export default {
padding: 10px 0 0 !important;
}
.el-select-dropdown__empty.loading {
padding: 10px 0 !important;
}
.el-select__footer {
text-align: center;
border-top: 1px solid #dee2e6;

View File

@ -1,8 +1,5 @@
<template>
<base-input
v-if="title"
:label="title"
:name="name"
<base-input v-if="title" :label="title" :name="name"
:readonly="readonly"
:disabled="disabled"
:class="[
@ -11,22 +8,28 @@
formClasses
]"
:error="formError">
<el-select v-model="real_model" @input="change" disabled filterable v-if="disabled && !multiple"
remote
reserve-keyword
:placeholder="placeholder"
<el-select v-model="selected" :placeholder="placeholder" filterable remote reserve-keyword
@change="change" @visible-change="visibleChange" @remove-tag="removeTag" @clear="clear" @blur="blur" @focus="focus"
:disabled="disabled"
:multiple="multiple"
:readonly="readonly"
:collapse-tags="collapse"
:remote-method="remoteMethod"
:loading="loading">
:loading="loading"
>
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty">
{{ noMatchingDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
{{ addNew.text }}
</span>
</div>
</li>
@ -42,7 +45,7 @@
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
{{ addNew.text }}
</span>
</div>
</li>
@ -55,383 +58,72 @@
</span>
</template>
<el-option v-if="!group" v-for="(label, value) in selectOptions"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
<el-option v-if="!group" v-for="(option, index) in sortOptions"
:key="index"
:label="option.value"
:value="option.key">
<span class="float-left">{{ option.value }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
</el-option>
<el-option-group
v-if="group"
v-for="(options, name) in selectOptions"
v-for="(group_options, name) in sortOptions"
:key="name"
:label="name">
<el-option
v-for="(label, value) in options"
v-for="(label, value) in group_options"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ addNew.new_text }}</span>
</el-option>
</el-option-group>
<el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
<el-option class="el-select__footer" :disabled="true" :value="add_new">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
{{ addNew.text }}
</span>
</div>
</el-option>
</el-select>
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && !multiple"
remote
reserve-keyword
:placeholder="placeholder"
:remote-method="remoteMethod"
:loading="loading">
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty">
{{ noMatchingDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div>
<component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component>
<div v-else-if="addNew.status && options.length == 0" slot="empty">
<p class="el-select-dropdown__empty">
{{ noDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div>
<span slot="infoBlock" class="badge badge-success badge-resize float-right" v-if="new_options[selected]">{{ addNew.new_text }}</span>
<template slot="prefix">
<span class="el-input__suffix-inner el-select-icon">
<i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
</span>
</template>
<el-option v-if="!group" v-for="(label, value) in selectOptions"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option>
<el-option-group
v-if="group"
v-for="(options, name) in selectOptions"
:key="name"
:label="name">
<el-option
v-for="(label, value) in options"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option>
</el-option-group>
<el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</el-option>
</el-select>
<el-select v-model="real_model" @input="change" filterable v-if="disabled && multiple && !collapse" multiple disabled
remote
reserve-keyword
:placeholder="placeholder"
:remote-method="remoteMethod"
:loading="loading">
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty">
{{ noMatchingDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div>
<div v-else-if="addNew.status && options.length == 0" slot="empty">
<p class="el-select-dropdown__empty">
{{ noDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div>
<template slot="prefix">
<span class="el-input__suffix-inner el-select-icon">
<i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
</span>
</template>
<el-option v-if="!group" v-for="(label, value) in selectOptions"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option>
<el-option-group
v-if="group"
v-for="(options, name) in selectOptions"
:key="name"
:label="name">
<el-option
v-for="(label, value) in options"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option>
</el-option-group>
<el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</el-option>
</el-select>
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && !collapse" multiple
remote
reserve-keyword
:placeholder="placeholder"
:remote-method="remoteMethod"
:loading="loading">
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty">
{{ noMatchingDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div>
<div v-else-if="addNew.status && options.length == 0" slot="empty">
<p class="el-select-dropdown__empty">
{{ noDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div>
<template slot="prefix">
<span class="el-input__suffix-inner el-select-icon">
<i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
</span>
</template>
<el-option v-if="!group" v-for="(label, value) in selectOptions"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option>
<el-option-group
v-if="group"
v-for="(options, name) in selectOptions"
:key="name"
:label="name">
<el-option
v-for="(label, value) in options"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option>
</el-option-group>
<el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</el-option>
</el-select>
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && collapse" multiple collapse-tags
remote
reserve-keyword
:placeholder="placeholder"
:remote-method="remoteMethod"
:loading="loading">
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty">
{{ noMatchingDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div>
<div v-else-if="addNew.status && options.length == 0" slot="empty">
<p class="el-select-dropdown__empty">
{{ noDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div>
<template slot="prefix">
<span class="el-input__suffix-inner el-select-icon">
<i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
</span>
</template>
<el-option v-if="!group" v-for="(label, value) in selectOptions"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option>
<el-option-group
v-if="group"
v-for="(options, name) in selectOptions"
:key="name"
:label="name">
<el-option
v-for="(label, value) in options"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option>
</el-option-group>
<el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</el-option>
</el-select>
<component v-bind:is="add_new_html" @submit="onSubmit"></component>
<select :name="name" v-model="real_model" class="d-none">
<option v-for="(label, value) in selectOptions" :key="value" :value="value">{{ label }}</option>
<select :name="name" :id="name" v-model="selected" class="d-none">
<option v-for="option in sortOptions" :key="option.key" :value="option.key">{{ option.value }}</option>
</select>
<span slot="infoBlock" class="badge badge-success badge-resize float-right" v-if="new_options[real_model]">{{ new_text }}</span>
</base-input>
<span v-else>
<el-select
:class="'pl-20 mr-40'"
v-model="real_model"
@input="change"
filterable
remote
reserve-keyword
:placeholder="placeholder"
<el-select v-model="selected" :placeholder="placeholder" filterable remote reserve-keyword
@change="change" @visible-change="visibleChange" @remove-tag="removeTag" @clear="clear" @blur="blur" @focus="focus"
:disabled="disabled"
:multiple="multiple"
:readonly="readonly"
:collapse-tags="collapse"
:remote-method="remoteMethod"
:loading="loading">
<div v-if="loading" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty loading">
{{ loadingText }}
</p>
</div>
:loading="loading"
>
<div v-else-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty">
{{ noMatchingDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
{{ addNew.text }}
</span>
</div>
</li>
@ -447,7 +139,7 @@
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
{{ addNew.text }}
</span>
</div>
</li>
@ -460,40 +152,47 @@
</span>
</template>
<el-option v-if="!group" v-for="option in selectOptions"
:key="option.id"
:label="option.name"
:value="option.id">
<span class="float-left">{{ option.name }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.id]">{{ new_text }}</span>
<el-option v-if="!group" v-for="(option, index) in sortOptions"
:key="index"
:label="option.value"
:value="option.key">
<span class="float-left">{{ option.value }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
</el-option>
<el-option-group
v-if="group"
v-for="(options, name) in selectOptions"
v-for="(group_options, name) in sortOptions"
:key="name"
:label="name">
<el-option
v-for="(label, value) in options"
v-for="(label, value) in group_options"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ addNew.new_text }}</span>
</el-option>
</el-option-group>
<el-option v-if="!loading && addNew.status && selectOptions != null && selectOptions.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
<el-option class="el-select__footer" :disabled="true" :value="add_new">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
{{ addNew.text }}
</span>
</div>
</el-option>
</el-select>
<span class="badge badge-success badge-resize float-right mr-2" v-if="new_options[real_model]">{{ new_text }}</span>
<component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component>
<span slot="infoBlock" class="badge badge-success badge-resize float-right" v-if="new_options[selected]">{{ addNew.new_text }}</span>
<select :name="name" :id="name" v-model="selected" class="d-none">
<option v-for="option in sortOptions" :key="option.key" :value="option.key">{{ option.value }}</option>
</select>
</span>
</template>
@ -535,42 +234,54 @@ export default {
default: null,
description: "Selectbox label text"
},
placeholder: {
type: String,
default: '',
description: "Selectbox input placeholder text"
},
formClasses: {
type: Array,
default: null,
description: "Selectbox input class name"
},
formError: {
type: String,
default: null,
description: "Selectbox input error message"
},
icon: {
type: String,
description: "Prepend icon (left)"
},
name: {
type: String,
default: null,
description: "Selectbox attribute name"
},
value: {
type: [String, Number, Array],
type: [String, Number, Array, Object],
default: '',
description: "Selectbox selected value"
},
options: null,
model: {
type: [String, Number],
default: null,
description: "Selectbox selected model"
option_sortable: {
type: String,
default: 'value',
description: "Option Sortable type (key|value)"
},
icon: {
type: String,
description: "Prepend icon (left)"
model: {
type: [String, Number, Array, Object],
default: null,
description: "Selectbox selected model"
},
addNew: {
@ -594,21 +305,25 @@ export default {
default: false,
description: "Selectbox option group status"
},
multiple: {
type: Boolean,
default: false,
description: "Multible feature status"
},
readonly: {
type: Boolean,
default: false,
description: "Selectbox disabled status"
},
disabled: {
type: Boolean,
default: false,
description: "Selectbox disabled status"
},
collapse: {
type: Boolean,
default: false,
@ -620,11 +335,13 @@ export default {
default: 'Loading...',
description: "Selectbox loading message"
},
noDataText: {
type: String,
default: 'No Data',
description: "Selectbox empty options message"
},
noMatchingDataText: {
type: String,
default: 'No Matchign Data',
@ -650,56 +367,116 @@ export default {
data() {
return {
list: [],
add_new: {
text: this.addNew.text,
show: false,
path: this.addNew.path,
type: this.addNew.type, // modal, inline
field: this.addNew.field,
buttons: this.addNew.buttons
buttons: this.addNew.buttons,
},
add_new_text: this.addNew.text,
new_text: this.addNew.new_text,
selectOptions: this.options,
real_model: this.model,
add_new_html: '',
form: {},
selected: this.model,
sort_options: [],
new_options: {},
loading: false,
new_options: false,
}
},
created() {
this.new_options = {};
// Option set sort_option data
if (!Array.isArray(this.options)) {
for (const [key, value] of Object.entries(this.options)) {
this.sort_options.push({
key: key,
value: value
});
}
} else {
this.options.forEach(function (option, index) {
this.sort_options.push({
index: index,
key: option.id,
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
});
}, this);
}
},
computed: {
sortOptions() {
this.sort_options.sort(function (a, b) {
var nameA = a.value.toUpperCase(); // ignore upper and lowercase
var nameB = b.value.toUpperCase(); // ignore upper and lowercase
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// names must be equal
return 0;
});
return this.sort_options;
},
},
mounted() {
if (this.multiple) {
if (!this.value.length) {
this.real_model = [];
// Check Here..
this.selected = this.value;
if (this.model.length) {
if (eval(this.model) !== undefined) {
this.selected = eval(this.model);
} else {
let pre_value = [];
this.value.forEach(item => {
pre_value.push(item.toString());
});
this.real_model = pre_value;
this.selected = this.model;
}
}
} else {
this.real_model = this.value;
if (this.multiple && !this.selected.length) {
this.selected = [];
}
this.$emit('interface', this.real_model);
this.$emit('interface', this.selected);
setTimeout(function() {
//this.change(); for invoice item
this.change();
}.bind(this), 800);
},
methods: {
change() {
this.$emit('interface', this.selected);
this.$emit('change', this.selected);
},
visibleChange(event) {
this.$emit('visible-change', event);
},
removeTag(event) {
this.$emit('remove-tag', event);
},
clear(event) {
this.$emit('clear', event);
},
blur(event) {
this.$emit('blur', event);
},
focus(event) {
this.$emit('focus', event);
},
remoteMethod(query) {
if (document.getElementById('form-select-' + this.name)) {
document.getElementById('form-select-' + this.name).getElementsByTagName("input")[0].readOnly = false;
@ -745,38 +522,6 @@ export default {
}
},
change() {
if (typeof(this.real_model) === 'object' && !Array.isArray(this.real_model)) {
return false;
}
if (Array.isArray(this.real_model) && !this.real_model.length) {
return false;
}
this.$emit('interface', this.real_model);
this.$emit('change', this.real_model);
if (Array.isArray(this.selectOptions)) {
this.selectOptions.forEach(item => {
if (item.id == this.real_model) {
this.$emit('label', item.name);
this.$emit('option', item);
return true;
}
});
}
},
onPressEnter() {
alert('Press Enter');
},
OnPressTab() {
alert('Press Tab');
},
async onAddItem() {
// Get Select Input value
if (this.title) {
@ -785,11 +530,11 @@ export default {
var value = this.$children[0].$children[0].$refs.input.value;
}
if (this.add_new.type == 'inline') {
if (value === '') {
return false;
}
if (this.add_new.type == 'inline') {
await this.addInline(value);
} else {
await this.onModal(value);
@ -926,14 +671,18 @@ export default {
this.form.loading = false;
if (response.data.success) {
if (!Object.keys(this.options).length) {
this.selectOptions = [];
}
this.sort_options.push({
key: response.data.data[this.add_new.field.key].toString(),
value: response.data.data[this.add_new.field.value],
});
this.selectOptions.push(response.data.data);
//this.selectOptions[response.data.data[this.add_new.field.key]] = response.data.data[this.add_new.field.value];
this.new_options[response.data.data[this.add_new.field.key]] = response.data.data[this.add_new.field.value];
this.real_model = response.data.data[this.add_new.field.key];//.toString();
if (this.multiple) {
this.selected.push(response.data.data[this.add_new.field.key].toString());
} else {
this.selected = response.data.data[this.add_new.field.key].toString();
}
this.add_new.show = false;
@ -972,68 +721,6 @@ export default {
},
},
watch: {
options: function (options) {
// update options
this.selectOptions = options;
if (Object.keys(this.new_options).length) {
if (!Object.keys(this.options).length) {
this.selectOptions = [];
}
Object.values(this.new_options).forEach(item => {
this.selectOptions.push(item);
});
}
},
real_model: function (value) {
if (this.multiple) {
return;
}
if (this.real_model != value) {
this.change();
}
let e = $.Event('keyup');
e.keyCode= 9; // tab
$('#' + this.name).trigger(e);
let event = new window.KeyboardEvent('keydown', { keyCode: 9 }); // Tab key
window.dispatchEvent(event);
},
value: function (value) {
if (this.multiple) {
if (Array.isArray(this.real_model) && !this.real_model.length) {
this.real_model = value;
} else {
let pre_value = [];
value.forEach(item => {
pre_value.push(item.toString());
});
this.real_model = pre_value;
}
} else {
//this.real_model = value.toString();
this.real_model = value;
}
},
model: function (value) {
if (this.multiple) {
this.real_model = value;
} else {
this.real_model = value;
}
}
},
}
</script>
@ -1046,10 +733,6 @@ export default {
padding: 10px 0 0 !important;
}
.el-select-dropdown__empty.loading {
padding: 10px 0 !important;
}
.el-select__footer {
text-align: center;
border-top: 1px solid #dee2e6;
@ -1085,4 +768,8 @@ export default {
margin-right: 35px;
position: relative;
}
.badge.badge-pill.badge-success {
border-radius: 0.375rem;
}
</style>