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

View File

@ -36,7 +36,7 @@ const appMessages = {
suggestions: "Suggestions", suggestions: "Suggestions",
hide_household_suggestion: "Masquer les suggestions", hide_household_suggestion: "Masquer les suggestions",
show_household_suggestion: 'Aucune suggestion | Afficher une suggestion | Afficher {count} 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", select_household: "Sélectionner",
dates_title: "Période de validité", dates_title: "Période de validité",
dates: { dates: {