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:
Mathieu Jaumotte 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

@ -140,9 +140,7 @@
<ul class="record_actions">
<li>
<button class="btn btn-delete" @click="removeHandlingThirdParty">
{{ $t('remove_handling_thirdparty') }}
</button>
<button class="btn btn-remove" @click="removeHandlingThirdParty" :title="$t('remove_handling_thirdparty')"></button>
</li>
</ul>
</div>
@ -163,7 +161,7 @@
<show-address :address="t.address"></show-address>
<ul class="record_actions">
<button class="btn btn-delete" @click="removeThirdParty(t)"></button>
<button class="btn btn-remove" @click="removeThirdParty(t)" :title="$t('remove_thirdparty')"></button>
</ul>
</li>
</ul>
@ -302,11 +300,12 @@
}
div.objective-title {
font-weight: bold;
/*
margin-top: 1rem;
font-size: 1.5rem;
font-weight: bold;
text-align: center;
*/
i.fa {
padding: 0.25rem;
@ -399,7 +398,8 @@ const i18n = {
no_handling_thirdparty: "Aucun tiers traitant",
precise_handling_thirdparty: "Indiquer un tiers traitant",
choose_a_thirdparty: "Choisir un tiers",
remove_handling_thirdparty: "Supprimer le tiers traitant",
remove_thirdparty: "Enlever le tiers",
remove_handling_thirdparty: "Enlever le tiers traitant",
thirdparty_intervener: "Tiers intervenants",
no_thirdparty_intervener: "Aucun tiers intervenant",
add_thirdparties: "Ajouter des tiers",
@ -430,7 +430,10 @@ export default {
options: {
type: [ 'thirdparty' ],
priority: null,
uniq: true
uniq: true,
button: {
display: false
}
},
},
thirdPartyPicker: {
@ -439,6 +442,9 @@ export default {
type: [ 'thirdparty' ],
priority: null,
uniq: false,
button: {
display: false
}
},
}
};

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;