add options on button for AddPersons component: size, type and display

* size: add bootstrap class : btn-sm, btn-lg..
* type: override chill button class : btn-update, btn-chill-beige
* display: override default : true
This commit is contained in:
2021-08-09 17:03:21 +02:00
committed by Marc Ducobu
parent 3156706c2b
commit d67483fd9a
2 changed files with 33 additions and 22 deletions

View File

@@ -1,9 +1,8 @@
<template>
<ul class="record_actions">
<li class="add-persons">
<a class="btn btn-create" @click="openModal">
{{ $t(buttonTitle) }}
</a>
<a class="btn" :class="getClassButton" :title="$t(buttonTitle)"
@click="openModal"><span v-if="displayTextButton">{{ $t(buttonTitle) }}</span></a>
</li>
</ul>
@@ -19,7 +18,7 @@
<template v-slot:body-head>
<div class="modal-body">
<div class="search">
<label class="col-form-label" style="float: right;">
{{ $tc('add_persons.suggested_counter', suggestedCounter) }}
</label>
@@ -66,17 +65,17 @@
<div class="create-button">
<on-the-fly
v-if="query.length >= 3"
v-if="query.length >= 3"
v-bind:buttonText="$t('onthefly.create.button', {q: query})"
action="create"><!-- TODO first close this modal -->
</on-the-fly>
</div>
</div>
</template>
<template v-slot:footer>
<button class="btn btn-create"
<button class="btn btn-create"
@click.prevent="$emit('addNewPersons', { selected, modal })">
{{ $t('action.add')}}
</button>
@@ -150,13 +149,19 @@ export default {
];
let union = [...new Set([
...this.suggested.slice().reverse(),
...this.selected.slice().reverse(),
...this.selected.slice().reverse(),
])];
return uniqBy(union, k => k.key);
},
//options() {
// return this.options;
//},
getClassButton() {
let size = (typeof this.options.button !== 'undefined' && typeof this.options.button.size !== 'undefined') ? this.options.button.size : '';
let type = (typeof this.options.button !== 'undefined' && typeof this.options.button.type !== 'undefined') ? this.options.button.type : 'btn-create';
return size ? size + ' ' + type : type;
},
displayTextButton() {
return (typeof this.options.button !== 'undefined' && typeof this.options.button.display !== 'undefined') ?
this.options.button.display : true;
},
checkUniq() {
if (this.options.uniq === true) {
return 'radio';
@@ -184,7 +189,7 @@ export default {
this.loadSuggestions([]);
}
},
loadSuggestions(suggested) {
loadSuggestions(suggested) {
//console.log('suggested', suggested);
this.search.suggested = suggested;
this.search.suggested.forEach(function(item) {
@@ -230,7 +235,7 @@ export default {
margin: auto 4em;
div.search {
position: relative;
input {
input {
width: 100%;
padding: 1.2em 1.5em 1.2em 2.5em;
//margin: 1em 0;
@@ -239,7 +244,7 @@ export default {
position: absolute;
opacity: 0.5;
padding: 0.65em 0;
top: 50%;
top: 50%;
}
i.fa-search {
left: 0.5em;