vue_household_members_editor: suggestions in bootstrap accordion style

This commit is contained in:
Mathieu Jaumotte 2021-09-13 14:03:07 +02:00
parent 337a6eb974
commit dc2f094ca2
2 changed files with 56 additions and 41 deletions

View File

@ -82,27 +82,37 @@
</li>
</ul>
<ul class="record_actions">
<li v-if="!showHouseholdSuggestion" class="cancel">
<button class="btn btn-misc" @click="toggleHouseholdSuggestion">
<i class="fa fa-fw fa-caret-right"></i>
<div v-if="hasHouseholdSuggestion" class="my-5">
<h4 class="mb-3">
{{ $t('household_members_editor.household_for_participants_accompanying_period') }} :
</h4>
<div class="accordion" id="householdSuggestions">
<div class="accordion-item">
<h2 class="accordion-header" id="heading_suggestions">
<button v-if="!showHouseholdSuggestion"
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
aria-expanded="false"
@click="toggleHouseholdSuggestion">
{{ $tc('household_members_editor.show_household_suggestion', countHouseholdSuggestion) }}
</button>
</li>
<li v-if="showHouseholdSuggestion && hasHouseholdSuggestion" class="cancel">
<button class="btn btn-misc" @click="toggleHouseholdSuggestion">
<i class="fa fa-fw fa-caret-down"></i>
<button v-if="showHouseholdSuggestion && hasHouseholdSuggestion"
class="accordion-button"
type="button"
data-bs-toggle="collapse"
aria-expanded="true"
@click="toggleHouseholdSuggestion">
{{ $t('household_members_editor.hide_household_suggestion') }}
</button>
</li>
</ul>
<div class="householdSuggestions">
<!-- disabled bootstrap behaviour: data-bs-target="#collapse_suggestions" aria-controls="collapse_suggestions" -->
</h2>
<div class="accordion-collapse"
aria-labelledby="heading_suggestions"
data-bs-parent="#householdSuggestions"
id="collapse_suggestions">
<div v-if="showHouseholdSuggestion && hasHouseholdSuggestion">
<h3>{{ $t('household_members_editor.suggestions') }}</h3>
<p>{{ $t('household_members_editor.household_for_participants_accompanying_period') }}:</p>
<div class="flex-table householdSuggestionList">
<div v-for="h in filterHouseholdSuggestionByAccompanyingPeriod" class="item-bloc">
<household-render-box :household="h"></household-render-box>
@ -115,7 +125,9 @@
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -245,7 +257,9 @@ export default {
div#household_members_editor div,
div.householdSuggestionList {
&.flex-table div.item-bloc div.item-row div.item-col {
&.flex-table {
margin: 0;
div.item-bloc div.item-row div.item-col {
&:first-child {
width: 25%;
}
@ -254,6 +268,7 @@ div.householdSuggestionList {
}
}
}
}
/*
div.householdAddressSuggestionList {

View File

@ -36,7 +36,7 @@ const appMessages = {
suggestions: "Suggestions",
hide_household_suggestion: "Masquer les suggestions",
show_household_suggestion: 'Aucune suggestion | Afficher une suggestion | Afficher {count} suggestions',
household_for_participants_accompanying_period: "Ces ménages partagent le même parcours",
household_for_participants_accompanying_period: "Des ménages partagent le même parcours",
select_household: "Sélectionner",
dates_title: "Période de validité",
dates: {