Merge branch 'feature/form-move-household-with-checkboxes'

This commit is contained in:
2021-09-29 15:43:40 +02:00
15 changed files with 473 additions and 276 deletions

View File

@@ -2,171 +2,126 @@
<h2 class="mt-4">{{ $t('household_members_editor.household_part') }}</h2>
<div v-if="hasHousehold">
<div v-if="mode == null">
<div class="flex-table">
<div class="item-bloc">
<household-render-box :household="household" :isAddressMultiline="true"></household-render-box>
</div>
</div>
<div class="alert alert-info">{{ $t('household_members_editor.household.no_household_choose_one') }}</div>
<div v-if="isHouseholdNew && !hasHouseholdAddress">
<div v-if="hasAddressSuggestion" class="householdAddressSuggestion my-5">
<h4 class="mb-3">
{{ $t('household_members_editor.household.where_live_the_household') }}
</h4>
<div class="accordion" id="addressSuggestions">
<div class="accordion-item">
<h2 class="accordion-header" id="heading_address_suggestions">
<button v-if="!showAddressSuggestion"
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
aria-expanded="false"
@click="toggleAddressSuggestion">
{{ $tc('household_members_editor.show_household_suggestion', countAddressSuggestion) }}
</button>
<button v-if="showAddressSuggestion"
class="accordion-button"
type="button"
data-bs-toggle="collapse"
aria-expanded="true"
@click="toggleAddressSuggestion">
{{ $t('household_members_editor.hide_household_suggestion') }}
</button>
</h2>
<div class="accordion-collapse" id="collapse_address_suggestions"
aria-labelledby="heading_address_suggestions" data-bs-parent="#addressSuggestions">
<div v-if="showAddressSuggestion">
<div class="flex-table householdAddressSuggestionList">
<div v-for="a in filterAddressesSuggestion" class="item-bloc">
<div class="float-button bottom">
<div class="box">
<div class="action">
<ul class="record_actions">
<li>
<button class="btn btn-sm btn-choose" @click="setHouseholdAddress(a)">
{{ $t('household_members_editor.household.household_live_to_this_address') }}
</button>
</li>
</ul>
</div>
<ul class="list-content fa-ul">
<li>
<i class="fa fa-li fa-map-marker"></i>
<address-render-box :address="a"></address-render-box>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="flex-table householdSuggestionList">
<div v-if="isModeNewAllowed" class="item-bloc">
<div>
<section>
<div class="item-row">
<div class="item-col">
<div class="h4">
<i class="fa fa-home"></i> {{ $t('household_members_editor.household.new_household') }}
</div>
</div>
</div>
</div>
</section>
<ul class="record_actions">
<li>
<button @click="setModeNew" class="btn btn-sm btn-create">{{ $t('household_members_editor.household.create_household') }}</button>
</li>
</ul>
</div>
</div>
<!-- if allow leave household -->
<div v-if="isModeLeaveAllowed" class="item-bloc">
<div>
<section>
<div class="item-row">
<div class="item-col">
<div class="h4">
<span class="fa-stack fa-lg">
<i class="fa fa-home fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
{{ $t('household_members_editor.household.leave_without_household') }}
</div>
</div>
</div>
<div class="item-row">
{{ $t('household_members_editor.household.will_leave_any_household_explanation')}}
</div>
</section>
<ul class="record_actions">
<li>
<button @click="setModeLeave" class="btn btn-sm">
<i class="fa fa-sign-out"></i>
{{ $t('household_members_editor.household.leave') }}
</button>
</li>
</ul>
</div>
</div>
<div v-for="item in getSuggestions">
<div class="item-bloc">
<household-render-box :household="item.household"></household-render-box>
<ul class="record_actions">
<li>
<button class="btn btn-sm btn-choose" @click="selectHousehold(item.household)">
{{ $t('household_members_editor.select_household') }}
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<ul class="record_actions">
<li >
<add-address
:context="addAddress.context"
<div v-else>
<div class="flex-table">
<div class="item-bloc">
<template v-if="isModeLeave">
<section>
<div class="item-row">
<div class="item-col">
<div class="h4">
<span class="fa-stack fa-lg">
<i class="fa fa-home fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
{{ $t('household_members_editor.household.leave_without_household') }}
</div>
</div>
</div>
<div class="item-row">
{{ $t('household_members_editor.household.will_leave_any_household_explanation')}}
</div>
</section>
</template>
<template v-else>
<household-render-box :household="household" :isAddressMultiline="true"></household-render-box>
<ul class="record_actions">
<li>
<add-address
:context="getAddressContext"
:key="addAddress.key"
:options="addAddress.options"
:result="addAddress.result"
@addressChangedCallback="setHouseholdCreatedAddress"
ref="addAddress">
</add-address>
</li>
</ul>
</div>
<div v-if="isHouseholdNew && hasHouseholdAddress">
<ul class="record_actions">
<li >
<button class="btn btn-misc" @click="removeHouseholdAddress">
{{ $t('household_members_editor.household.delete_this_address') }}
</button>
</li>
</ul>
</div>
</div>
<div v-else-if="isForceLeaveWithoutHousehold">
{{ $t('household_members_editor.household.will_leave_any_household') }}
</div>
<div v-else class="alert alert-info">{{ $t('household_members_editor.household.no_household_choose_one') }}</div>
<ul v-if="allowChangeHousehold" class="record_actions">
<li v-if="allowHouseholdCreate">
<button class="btn btn-create" @click="createHousehold">
{{ $t('household_members_editor.household.create_household') }}
</button>
</li>
<li v-if="allowHouseholdSearch">
<button class="btn btn-misc">
<i class="fa fa-search"></i>{{ $t('household_members_editor.household.search_household') }}
</button>
</li>
<li v-if="allowLeaveWithoutHousehold" >
<button @click="forceLeaveWithoutHousehold" class="btn btn-orange">
<i class="fa fa-sign-out"></i>{{ $t('household_members_editor.household.leave_without_household') }}
</button>
</li>
<li v-if="allowRemoveHousehold">
<button @click="removeHousehold" class="btn">
{{ $t('household_members_editor.household.change') }}
</button>
</li>
</ul>
<div v-if="hasHouseholdSuggestion" class="householdSuggestions 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_household_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>
<button v-if="showHouseholdSuggestion"
class="accordion-button"
type="button"
data-bs-toggle="collapse"
aria-expanded="true"
@click="toggleHouseholdSuggestion">
{{ $t('household_members_editor.hide_household_suggestion') }}
</button>
<!-- disabled bootstrap behaviour: data-bs-target="#collapse_household_suggestions" aria-controls="collapse_household_suggestions" -->
</h2>
<div class="accordion-collapse" id="collapse_household_suggestions"
aria-labelledby="heading_household_suggestions" data-bs-parent="#householdSuggestions">
<div v-if="showHouseholdSuggestion">
<div class="flex-table householdSuggestionList">
<div v-for="h in filterHouseholdSuggestionByAccompanyingPeriod" class="item-bloc">
<household-render-box :household="h"></household-render-box>
<ul class="record_actions">
<li>
<button class="btn btn-sm btn-choose" @click="selectHousehold(h)">
{{ $t('household_members_editor.select_household') }}
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
:addressChangedCallback="addressChanged"
></add-address>
</li>
<li v-if="hasHouseholdAddress">
<button class="btn btn-remove"
@click="removeHouseholdAddress">
{{ $t('household_members_editor.household.remove_address') }}
</button>
</li>
</ul>
</template>
</div>
</div>
<ul v-if="isModeNewAllowed || isModeLeaveAllowed || getModeSuggestions.length > 0" class="record_actions">
<li>
<button class="btn btn-sm btn-chill-beige" @click="resetMode">
{{ $t('household_members_editor.household.reset_mode') }}
</button>
</li>
</ul>
</div>
</div>
</template>
<script>
@@ -185,35 +140,32 @@ export default {
data() {
return {
addAddress: {
context: {
target: {
name: 'household_create',
id: 0
},
edit: false,
addressId: null
},
key: 'household_new',
options: {
useDate: {
validFrom: true
validFrom: false,
validTo: false,
},
hideAddress: true,
button: {
text: {
create: 'household_members_editor.household.or_create_new_address',
edit: null,
create: 'household_members_editor.household.set_address',
edit: 'household_members_editor.household.update_address',
}
},
title: {
create: 'household_members_editor.household.create_new_address',
edit: null,
edit: 'household_members_editor.household.update_address_title',
},
}
}
}
};
},
computed: {
...mapGetters([
'isModeNewAllowed',
'isModeLeaveAllowed',
'getSuggestions',
'hasHousehold',
'isHouseholdNew',
'hasHouseholdSuggestion',
@@ -223,68 +175,38 @@ export default {
'countAddressSuggestion',
'filterAddressesSuggestion',
'hasHouseholdAddress',
'isModeLeave',
'getAddressContext',
]),
...mapState([
'showHouseholdSuggestion',
'showAddressSuggestion'
'showAddressSuggestion',
'mode',
]),
household() {
return this.$store.state.household;
},
allowHouseholdCreate() {
return this.$store.state.allowHouseholdCreate && !this.$store.getters.hasHousehold;
},
allowHouseholdSearch() {
return false;
return this.$store.state.allowHouseholdSearch && !this.$store.getters.hasHousehold;
},
allowLeaveWithoutHousehold() {
return this.$store.state.allowLeaveWithoutHousehold && !this.$store.getters.hasHousehold;
},
allowRemoveHousehold() {
return this.$store.getters.hasHousehold &&
(
this.allowHouseholdCreate || this.allowHouseholdSearch ||
this.allowLeaveWithoutHousehold
)
;
},
allowChangeHousehold() {
return this.allowHouseholdCreate || this.allowHouseholdSearch ||
this.allowLeaveWithoutHousehold;
},
isForceLeaveWithoutHousehold() {
return this.$store.state.forceLeaveWithoutHousehold;
}
},
methods: {
createHousehold() {
setModeNew() {
this.$store.dispatch('createHousehold');
},
forceLeaveWithoutHousehold() {
setModeLeave() {
this.$store.dispatch('forceLeaveWithoutHousehold');
},
toggleHouseholdSuggestion() {
this.$store.commit('toggleHouseholdSuggestion');
resetMode() {
this.$store.commit('resetMode');
},
toggleAddressSuggestion() {
this.$store.commit('toggleAddressSuggestion');
addressChanged(payload) {
console.log("addressChanged", payload);
this.$store.dispatch('setHouseholdNewAddress', payload.address);
},
selectHousehold(h) {
this.$store.dispatch('selectHousehold', h);
this.toggleHouseholdSuggestion();
},
removeHousehold() {
this.$store.dispatch('removeHousehold');
},
setHouseholdAddress(a) {
let payload = this.$refs.addAddress.submitNewAddress();
console.log('setHouseholdAddress', a);
this.$store.commit('setHouseholdAddress', a);
},
setHouseholdCreatedAddress(payload) {
console.log('setHouseholdAddress', payload);
this.$store.dispatch('setHouseholdNewAddress', payload);
},
removeHouseholdAddress() {
this.$store.commit('removeHouseholdAddress');
@@ -310,28 +232,4 @@ div.householdSuggestionList {
}
}
}
/*
div.householdAddressSuggestionList {
display: flex;
list-style-type: none;
padding: 0;
& > li {}
}
.householdSuggestionList {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
& > .item {
margin-bottom: 0.8rem;
width: calc(50% - 1rem);
border: 1px solid var(--chill-light-gray);
padding: 0.5rem 0.5rem 0 0.5rem;
ul.record_actions {
margin-bottom: 0;
}
}
}
*/
</style>

View File

@@ -7,16 +7,27 @@ const appMessages = {
household: {
no_household_choose_one: "Aucun ménage de destination. Choisissez un ménage. Les usagers concernés par la modification apparaitront ensuite.",
new_household: "Nouveau ménage",
create_household: "Créer un nouveau ménage de destination",
create_household: "Créer",
search_household: "Chercher un ménage",
will_leave_any_household: "Ne rejoignent pas de ménage",
will_leave_any_household: "Les usagers ne rejoignent pas de ménage",
leave: "Quitter",
will_leave_any_household_explanation: "Les usagers quitteront leur ménage actuel, et ne seront pas associés à un autre ménage. Par ailleurs, ils seront enregistrés comme étant sans adresse connue.",
leave_without_household: "Sans nouveau ménage",
set_address: "Indiquer une adresse",
reset_mode: "Modifier la destination",
remove_address: "Supprimer l'adresse",
update_address: "Mettre à jour l'adresse",
// remove ?
/*
where_live_the_household: "À quelle adresse habite ce ménage ?",
household_live_to_this_address: "Sélectionner l'adresse",
no_suggestions: "Aucune adresse à suggérer",
delete_this_address: "Supprimer cette adresse",
create_new_address: "Créer une nouvelle adresse",
or_create_new_address: "Ou créer une nouvelle adresse",
*/
// end remove ?
},
concerned: {
title: "Nouveaux membres du ménage",
@@ -34,7 +45,7 @@ const appMessages = {
is_not_holder: "N'est pas titulaire",
remove_position: "Retirer des {position}",
remove_concerned: "Ne plus transférer",
household_part: "Ménage de destination",
household_part: "Destination",
suggestions: "Suggestions",
hide_household_suggestion: "Masquer les suggestions",
show_household_suggestion: 'Aucune suggestion | Afficher une suggestion | Afficher {count} suggestions',

View File

@@ -29,6 +29,15 @@ const store = createStore({
return 0;
}),
startDate: new Date(),
/**
* Indicates if the destination is:
*
* * "new" => a new household
* * "existing" => an existing household
* * "leave" => leave without household
* * null if not set
*/
mode: window.household_members_editor_data.household === null ? null : "existing",
allowHouseholdCreate: window.household_members_editor_data.allowHouseholdCreate,
allowHouseholdSearch: window.household_members_editor_data.allowHouseholdSearch,
allowLeaveWithoutHousehold: window.household_members_editor_data.allowLeaveWithoutHousehold,
@@ -41,11 +50,70 @@ const store = createStore({
errors: []
},
getters: {
/**
* return true if this page allow to create a new household
*
* @returns {boolean}
*/
isModeNewAllowed(state) {
return state.allowHouseholdCreate;
},
/**
* return true if this page allow to "leave without household"
*
* @returns {boolean}
*/
isModeLeaveAllowed(state) {
return state.allowLeaveWithoutHousehold;
},
/**
* return true if the mode "leave" is selected
*
* @returns {boolean}
*/
isModeLeave(state) {
return state.mode === "leave";
},
getSuggestions(state) {
let suggestions = [];
state.householdSuggestionByAccompanyingPeriod.forEach(h => {
console.log(h);
suggestions.push({household: h});
});
return suggestions;
},
isHouseholdNew(state) {
return state.mode === "new";
/*
if (state.household === null) {
return false;
}
return !Number.isInteger(state.household.id);
*/
},
getAddressContext(state, getters) {
if (!getters.hasHouseholdAddress) {
return {
edit: false,
addressId: null,
target: {
name: state.household.type,
id: state.household.id
},
suggestions: state.addressesSuggestion
};
} else {
return {
edit: true,
addressId: state.household.current_address.id,
target: {
name: state.household.type,
id: state.household.id
},
};
}
},
hasHouseholdAddress(state) {
if (null === state.household) {
@@ -180,6 +248,11 @@ const store = createStore({
},
},
mutations: {
resetMode(state) {
state.mode = null;
state.household = null;
state.forceLeaveWithoutHousehold = false;
},
addConcerned(state, person) {
let persons = state.concerned.map(conc => conc.person.id);
if (!persons.includes(person.id)) {
@@ -222,6 +295,7 @@ const store = createStore({
current_address: null,
current_members_id: []
};
state.mode = "new";
state.forceLeaveWithoutHousehold = false;
},
removeHousehold(state) {
@@ -229,6 +303,7 @@ const store = createStore({
state.forceLeaveWithoutHousehold = false;
},
setHouseholdAddress(state, address) {
console.log('setHouseholdAddress commit', address);
if (null === state.household) {
console.error("no household");
throw new Error("No household");
@@ -246,10 +321,12 @@ const store = createStore({
},
forceLeaveWithoutHousehold(state) {
state.household = null;
state.mode = "leave";
state.forceLeaveWithoutHousehold = true;
},
selectHousehold(state, household) {
state.household = household;
state.mode = "existing";
state.forceLeaveWithoutHousehold = false;
},
setHouseholdSuggestionByAccompanyingPeriod(state, households) {
@@ -320,18 +397,8 @@ const store = createStore({
commit('createHousehold');
dispatch('computeWarnings');
},
setHouseholdNewAddress({ commit }, payload) {
let url = `/api/1.0/main/address/${payload.addressId}.json`;
window.fetch(url).then(r => {
if (r.ok) {
return r.json();
}
throw new Error("error while fetch address");
}).then(data => {
commit('setHouseholdAddress', data);
}).catch(e => {
console.error(e);
});
setHouseholdNewAddress({ commit }, address) {
commit('setHouseholdAddress', address);
},
forceLeaveWithoutHousehold({ commit, dispatch }) {
commit('forceLeaveWithoutHousehold');