form as carrousel finalized

This commit is contained in:
Julien Fastré 2021-10-15 16:40:31 +02:00
parent 61488e9876
commit 8f361567ff
13 changed files with 531 additions and 283 deletions

View File

@ -21,10 +21,8 @@ const fetchResults = async (uri, params) => {
let promises = [],
page = 1;
let firstData = await _fetchAction(page, uri, params);
console.log('firstData', firstData);
promises.push(Promise.resolve(firstData.results));
console.log('more ?', firstData.pagination.more);
if (firstData.pagination.more) {
do {

View File

@ -1,34 +1,127 @@
<template>
<household></household>
<concerned v-if="hasHouseholdOrLeave"></concerned>
<dates v-if="showConfirm"></dates>
<confirmation v-if="showConfirm"></confirmation>
<ol class="breadcrumb">
<li
v-for="s in steps"
class="breadcrumb-item" :class="{ active: step === s }"
>
{{ $t('household_members_editor.app.steps.'+s) }}
</li>
</ol>
<concerned v-if="step === 'concerned'"></concerned>
<household v-if="step === 'household'" @ready-to-go="goToNext"></household>
<household-address v-if="step === 'household_address'"></household-address>
<positioning v-if="step === 'positioning'"></positioning>
<dates v-if="step === 'confirm'"></dates>
<confirmation v-if="step === 'confirm'"></confirmation>
<ul class="record_actions sticky-form-buttons">
<li class="cancel">
<button class="btn btn-cancel" @click="goToPrevious">
{{ $t('household_members_editor.app.cancel') }}
</button>
</li>
<li v-if="step !== 'confirm'">
<button class="btn btn-action" @click="goToNext" :disabled="!isNextAllowed">
{{ $t('household_members_editor.app.next') }}&nbsp;<i class="fa fa-arrow-right"></i>
</button>
</li>
<li v-else>
<button class="btn btn-save" @click="confirm" :disabled="hasWarnings">
{{ $t('household_members_editor.app.save') }}
</button>
</li>
</ul>
</template>
<script>
import { mapGetters } from 'vuex';
import {mapGetters, mapState} from 'vuex';
import Concerned from './components/Concerned.vue';
import Household from './components/Household.vue';
import HouseholdAddress from './components/HouseholdAddress';
import Dates from './components/Dates.vue';
import Confirmation from './components/Confirmation.vue';
import Positioning from "./components/Positioning";
export default {
name: 'App',
components: {
Positioning,
Concerned,
Household,
HouseholdAddress,
Dates,
Confirmation,
},
data() {
return {
step: 'concerned',
};
},
computed: {
...mapGetters([
'hasHouseholdOrLeave',
'hasPersonsWellPositionnated',
]),
showConfirm () {
return this.$store.getters.hasHouseholdOrLeave
&& this.$store.getters.hasPersonsWellPositionnated;
...mapState({
hasWarnings: (state) => state.warnings.length > 0 || state.errors.length > 0,
}),
steps() {
let s = ['concerned', 'household'];
if (this.$store.getters.isHouseholdNew) {
s.push('household_address');
}
if (!this.$store.getters.isModeLeave) {
s.push('positioning');
}
s.push('confirm');
return s;
},
// return true if the next step is allowed
isNextAllowed() {
switch (this.$data.step) {
case 'concerned':
return this.$store.state.concerned.length > 0;
case 'household':
return this.$store.state.mode !== null;
case 'household_address':
return this.$store.getters.hasHouseholdAddress || this.$store.getters.isHouseholdForceNoAddress;
case 'positioning':
return this.$store.getters.hasHouseholdOrLeave
&& this.$store.getters.hasPersonsWellPositionnated;
}
return false;
},
},
methods: {
goToNext() {
console.log('go to next');
switch (this.$data.step) {
case 'concerned':
this.$data.step = 'household';
break;
case 'household':
if (this.$store.getters.isHouseholdNew) {
this.$data.step = 'household_address';
break;
} else {
this.$data.step = 'positioning';
break;
}
case 'household_address':
this.$data.step = 'positioning';
break;
case 'positioning':
this.$data.step = 'confirm';
break;
}
},
goToPrevious() {
this.$data.step = 'concerned';
},
confirm() {
this.$store.dispatch('confirm');
},
}
}

View File

@ -1,118 +1,41 @@
<template>
<h2 class="mt-4">{{ $t('household_members_editor.concerned.title') }}</h2>
<h3 v-if="needsPositionning">
{{ $t('household_members_editor.concerned.persons_to_positionnate') }}
</h3>
<h3 v-else>
{{ $t('household_members_editor.concerned.persons_leaving') }}
</h3>
<div v-if="noPerson">
<div class="alert alert-info">
{{ $t('household_members_editor.add_at_least_onePerson') }}
{{ $t('household_members_editor.concerned.add_at_least_onePerson') }}
</div>
</div>
<div v-else-if="allPersonsPositionnated">
<span class="chill-no-data-statement">{{ $t('household_members_editor.all_positionnated') }}</span>
</div>
<div v-else>
<div class="flex-table list-household-members">
<div v-for="conc in concUnpositionned"
class="item-bloc"
v-bind:key="conc.person.id"
>
<div class="item-row">
<div class="item-col">
<div>
<person-render-box render="badge" :options="{}" :person="conc.person"></person-render-box>
</div>
<div v-if="conc.person.birthdate !== null">
{{ $t('person.born', {'gender': conc.person.gender} ) }}
{{ $d(conc.person.birthdate.datetime, 'short') }}
</div>
</div>
<div class="item-col">
<ul class="list-content fa-ul">
<li>
<i class="fa fa-li fa-map-marker"></i>
<span class="chill-no-data-statement">Sans adresse</span>
</li>
</ul>
</div>
</div>
<div v-if="needsPositionning" class="item-row move_to">
<div class="item-col">
<p class="move_hint">{{ $t('household_members_editor.concerned.move_to') }}:</p>
<template
v-for="position in positions"
>
<button
class="btn btn-outline-primary"
@click="moveToPosition(conc.person.id, position.id)"
>
{{ position.label.fr }}
</button>&nbsp;
</template>
<button v-if="conc.allowRemove" @click="removeConcerned(conc)" class="btn btn-primary">
{{ $t('household_members_editor.remove_concerned') }}
</button>
</div>
</div>
</div>
</div>
<p>
{{ $t('household_members_editor.concerned.persons_will_be_moved') }}&nbsp;:
<span v-for="c in concerned">
<person-render-box render="badge" :options="{addLink: false}" :person="c.person"></person-render-box>
<button class="btn" @click="removePerson(c.person)" v-if="c.allowRemove" style="padding-left:0;">
<span class="fa-stack fa-lg" :title="$t('household_members_editor.concerned.remove_concerned')">
<i class="fa fa-circle fa-stack-1x text-danger"></i>
<i class="fa fa-times fa-stack-1x"></i>
</span>
</button>
</span>
</p>
</div>
<div>
<add-persons
buttonTitle="household_members_editor.concerned.add_persons"
modalTitle="household_members_editor.concerned.search"
v-bind:key="addPersons.key"
v-bind:options="addPersons.options"
@addNewPersons="addNewPersons"
ref="addPersons"> <!-- to cast child method -->
</add-persons>
</div>
<div v-if="needsPositionning" class="positions">
<div
v-for="position in positions"
>
<h3>{{ position.label.fr }}</h3>
<div v-if="concByPosition(position.id).length > 0" class="flex-table list-household-members">
<member-details
v-for="conc in concByPosition(position.id)"
v-bind:key="conc.person.id"
v-bind:conc="conc"
>
</member-details>
</div>
<div v-else>
<p class="chill-no-data-statement">{{ $t('household_members_editor.concerned.no_person_in_position') }}</p>
</div>
</div>
</div>
<ul class="record_actions">
<li>
<add-persons
buttonTitle="household_members_editor.concerned.add_persons"
modalTitle="household_members_editor.concerned.search"
v-bind:key="addPersons.key"
v-bind:options="addPersons.options"
@addNewPersons="addNewPersons"
ref="addPersons"> <!-- to cast child method -->
</add-persons>
</li>
</ul>
</template>
<style lang="scss">
div.person {
cursor: move;
* {
cursor: move
}
}
.move_to {
.move_hint {
@ -124,33 +47,26 @@ div.person {
</style>
<script>
import { mapGetters } from 'vuex';
import { mapState, mapGetters } from 'vuex';
import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
import MemberDetails from './MemberDetails.vue';
import { ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
export default {
name: 'Concerned',
components: {
AddPersons,
MemberDetails,
PersonRenderBox,
},
computed: {
...mapState([
'concerned'
]),
...mapGetters([
'concUnpositionned',
'positions',
'concByPosition',
'needsPositionning'
'persons',
]),
noPerson () {
return this.$store.getters.persons.length === 0;
},
allPersonsPositionnated () {
return this.$store.getters.persons.length > 0
&& this.$store.getters.concUnpositionned.length === 0;
},
},
data() {
return {
@ -172,11 +88,9 @@ export default {
this.$refs.addPersons.resetSearch(); // to cast child method
modal.showModal = false;
},
moveToPosition(person_id, position_id) {
this.$store.dispatch('markPosition', { person_id, position_id });
},
removeConcerned(conc) {
this.$store.dispatch('removeConcerned', conc);
removePerson(person) {
console.log('remove person in concerned', person);
this.$store.dispatch('removePerson', person);
},
}
}

View File

@ -1,28 +1,19 @@
<template>
<div v-if="hasWarnings" class="alert alert-warning">
<div v-if="hasWarning" class="alert alert-warning">
{{ $t('household_members_editor.confirmation.there_are_warnings') }}
</div>
<p v-if="hasWarnings">
<p v-if="hasWarning">
{{ $t('household_members_editor.confirmation.check_those_items') }}
</p>
<ul>
<li v-for="(msg, index) in warnings">
<li v-for="(msg, index) in warnings" class="warning">
{{ $t(msg.m, msg.a) }}
</li>
<li v-for="msg in errors">
<li v-for="msg in errors" class="error">
{{ msg }}
</li>
</ul>
<ul class="record_actions sticky-form-buttons">
<li>
<button class="btn btn-save" :disabled="hasWarnings" @click="confirm">
{{ $t('household_members_editor.confirmation.save') }}
</button>
</li>
</ul>
</template>
@ -36,17 +27,11 @@ export default {
name: 'Confirmation',
computed: {
...mapState({
hasWarnings: (state) => state.warnings.length > 0 || state.errors.length > 0,
warnings: (state) => state.warnings,
errors: (state) => state.errors,
hasNoWarnings: (state) => state.warnings.length === 0 && state.errors.length === 0,
hasWarnings: (state) => state.warnings.length > 0 || state.errors.length > 0,
}),
},
methods: {
confirm() {
this.$store.dispatch('confirm');
}
}
}
</script>

View File

@ -0,0 +1,31 @@
<template>
<div class="flex-table" v-if="hasHousehold">
<div class="item-bloc">
<household-render-box :household="fakeHouseholdWithConcerned"></household-render-box>
</div>
</div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
import HouseholdRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/HouseholdRenderBox.vue';
export default {
name: "CurrentHousehold",
components: {
HouseholdRenderBox,
},
computed: {
...mapState([
]),
...mapGetters([
'hasHousehold',
'fakeHouseholdWithConcerned',
])
}
}
</script>
<style lang="scss" scoped>
</style>

View File

@ -1,5 +1,8 @@
<template>
<h2>{{ $t('household_members_editor.dates_title') }}</h2>
<current-household></current-household>
<h2>{{ $t('household_members_editor.dates.dates_title') }}</h2>
<p>
<label for="start_date">
@ -11,8 +14,13 @@
<script>
import CurrentHousehold from "./CurrentHousehold";
export default {
name: 'Dates',
components: {
CurrentHousehold
},
computed: {
startDate: {
get() {
@ -23,10 +31,10 @@ export default {
].join('-');
},
set(value) {
let
let
[year, month, day] = value.split('-'),
dValue = new Date(year, month-1, day);
this.$store.dispatch('setStartDate', dValue);
}
}

View File

@ -2,116 +2,56 @@
<h2 class="mt-4">{{ $t('household_members_editor.household_part') }}</h2>
<div>
<div class="alert alert-info" v-if="!hasHousehold">
{{ $t('household_members_editor.household.no_household_choose_one') }}
</div>
<template v-else>
<current-household></current-household>
</template>
<div class="alert alert-info">{{ $t('household_members_editor.household.no_household_choose_one') }}</div>
<div class="flex-table householdSuggestionList">
<!-- mode new is allowed and no mode is checked -->
<div v-if="isModeNewAllowed && !isHouseholdNew" class="item-bloc">
<div>
<section :class="{filtered: isHouseholdNewDesactivated}">
<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>
</section>
<ul :class="{filteredButActive: isHouseholdNewDesactivated}" 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>
<!-- mode new is allowed and checked -->
<div>
<div v-if="isModeNewAllowed && isHouseholdNew" class="item-bloc" >
<div>
<household-render-box :household="household" :isAddressMultiline="true"></household-render-box>
<ul class="record_actions" v-if="isHouseholdNew">
<li>
<add-address
:context="getAddressContext"
:key="addAddress.key"
:options="addAddress.options"
: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>
</div>
</div>
</div>
<!-- if allow leave household -->
<div v-if="isModeLeaveAllowed" class="item-bloc">
<div>
<section :class="{filtered: isHouseholdNewDesactivated}">
<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" :class="{filteredButActive: isHouseholdNewDesactivated}">
<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 class="flex-table householdSuggestionList">
<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>
<ul class="record_actions">
<li v-if="hasHousehold">
<button @click="resetMode" class="btn btn-sm btn-misc">{{ $t('household_members_editor.household.reset_mode')}}</button>
</li>
<li v-if="!hasHousehold">
<button @click="setModeNew" class="btn btn-sm btn-create">{{ $t('household_members_editor.household.create_household') }}</button>
</li>
<li v-if="isModeLeaveAllowed && !hasHousehold">
<button @click="setModeLeave" class="btn btn-sm">
<i class="fa fa-sign-out"></i>
{{ $t('household_members_editor.household.leave') }}
</button>
</li>
</ul>
</template>
<script>
import { mapGetters, mapState } from 'vuex';
import HouseholdRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/HouseholdRenderBox.vue';
import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
import AddAddress from 'ChillMainAssets/vuejs/Address/components/AddAddress.vue';
import CurrentHousehold from './CurrentHousehold';
export default {
name: 'Household',
components: {
CurrentHousehold,
HouseholdRenderBox,
AddressRenderBox,
AddAddress,
},
emits: ['readyToGo'],
data() {
return {
addAddress: {
@ -154,6 +94,7 @@ export default {
'getAddressContext',
]),
...mapState([
'household',
'showHouseholdSuggestion',
'showAddressSuggestion',
'mode',
@ -175,9 +116,11 @@ export default {
methods: {
setModeNew() {
this.$store.dispatch('createHousehold');
this.$emit('readyToGo');
},
setModeLeave() {
this.$store.dispatch('forceLeaveWithoutHousehold');
this.$emit('readyToGo');
},
resetMode() {
this.$store.commit('resetMode');
@ -188,6 +131,7 @@ export default {
},
selectHousehold(h) {
this.$store.dispatch('selectHousehold', h);
this.$emit('readyToGo');
},
removeHouseholdAddress() {
this.$store.commit('removeHouseholdAddress');

View File

@ -0,0 +1,88 @@
<template>
<current-household></current-household>
<ul class="record_actions">
<li v-if="!hasHouseholdAddress && !isHouseholdForceAddress">
<button class="btn" @click="markNoAddress">
{{ $t('household_members_editor.household_address.mark_no_address') }}
</button>
</li>
<li v-if="!hasHouseholdAddress">
<add-address
:context="getAddressContext"
:key="addAddress.key"
:options="addAddress.options"
:addressChangedCallback="addressChanged"
></add-address>
</li>
<li v-if="hasHouseholdAddress">
<button class="btn btn-remove"
@click="removeHouseholdAddress">
{{ $t('household_members_editor.household_address.remove_address') }}
</button>
</li>
</ul>
</template>
<script>
import AddAddress from 'ChillMainAssets/vuejs/Address/components/AddAddress.vue';
import CurrentHousehold from './CurrentHousehold';
import { mapGetters } from 'vuex';
export default {
name: "HouseholdAddress.vue",
components: {
CurrentHousehold,
AddAddress,
},
data() {
return {
addAddress: {
key: 'household_new',
options: {
useDate: {
validFrom: false,
validTo: false,
},
onlyButton: true,
button: {
text: {
create: 'household_members_editor.household_address.set_address',
edit: 'household_members_editor.household_address.update_address',
}
},
title: {
create: 'household_members_editor.household_address.create_new_address',
edit: 'household_members_editor.household_address.update_address_title',
},
}
}
}
},
computed: {
...mapGetters([
'isHouseholdNew',
'hasHouseholdAddress',
'getAddressContext',
'isHouseholdForceNoAddress'
])
},
methods: {
addressChanged(payload) {
console.log("addressChanged", payload);
this.$store.dispatch('setHouseholdNewAddress', payload.address);
},
markNoAddress() {
this.$store.commit('markHouseholdNoAddress');
},
removeHouseholdAddress() {
this.$store.commit('removeHouseholdAddress');
},
}
}
</script>
<style scoped>
</style>

View File

@ -0,0 +1,106 @@
<template>
<current-household></current-household>
<h2>{{ $t('household_members_editor.positioning.persons_to_positionnate')}}</h2>
<div class="list-household-members">
<div
v-for="conc in concerned"
class="item-bloc"
v-bind:key="conc.person.id"
>
<div class="pick-position">
<div class="person">
<person-render-box render="badge" :options="{}" :person="conc.person"></person-render-box>
</div>
<div class="holder">
<button
class="btn"
:disabled="!allowHolderForConcerned(conc)"
:class="{'btn-outline-chill-green': !conc.holder, 'btn-chill-green': conc.holder }"
@click="toggleHolder(conc)"
>
{{ $t('household_members_editor.positioning.holder') }}
</button>
</div>
<div
v-for="position in positions"
class="position"
>
<button
class="btn"
:class="{ 'btn-primary': conc.position === position, 'btn-outline-primary': conc.position !== position }"
@click="moveToPosition(conc.person.id, position.id)"
>
{{ position.label.fr }}
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import MemberDetails from './MemberDetails.vue';
import {mapGetters, mapState} from "vuex";
import CurrentHousehold from "./CurrentHousehold";
import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
export default {
name: "Positioning",
components: {
CurrentHousehold,
PersonRenderBox,
},
computed: {
...mapState([
'concerned'
]),
...mapGetters([
'persons',
'concUnpositionned',
'positions',
'concByPosition',
]),
allPersonsPositionnated () {
return this.$store.getters.persons.length > 0
&& this.$store.getters.concUnpositionned.length === 0;
},
allowHolderForConcerned: (app) => (conc) => {
console.log('allow holder for concerned', conc);
if (conc.position === null) {
return false;
}
return conc.position.allowHolder;
}
},
methods: {
moveToPosition(person_id, position_id) {
this.$store.dispatch('markPosition', { person_id, position_id });
},
toggleHolder(conc) {
console.log('toggle holder', conc);
this.$store.dispatch('toggleHolder', conc);
}
},
}
</script>
<style lang="scss" scoped>
.pick-position {
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end;
align-items: center;
.person {
margin-right: auto;
}
.holder {
margin-right: 1.2rem;
}
}
</style>

View File

@ -5,65 +5,78 @@ const appMessages = {
fr: {
household_members_editor: {
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",
no_household_choose_one: "Aucun ménage de destination. Choisissez un ménage.",
// new_household: "Nouveau ménage",
create_household: "Créer",
search_household: "Chercher un 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 ?
},
household_address: {
mark_no_address: "Ne pas indiquer d'adresse",
remove_address: "Supprimer l'adresse",
update_address: "Mettre à jour l'adresse",
set_address: "Indiquer une adresse",
create_new_address: "Créer une nouvelle adresse",
},
concerned: {
title: "Nouveaux membres du ménage",
title: "Usagers déplacés",
persons_will_be_moved: "Les usagers suivants vont être déplacés",
add_at_least_onePerson: "Indiquez au moins un usager à déplacer",
remove_concerned: "Ne plus transférer",
// old ?
add_persons: "Ajouter d'autres usagers",
search: "Rechercher des usagers",
move_to: "Déplacer vers",
persons_to_positionnate: 'Usagers à positionner',
persons_leaving: "Usagers quittant leurs ménages",
no_person_in_position: "Aucun usager ne sera ajouté à cette position",
},
positioning: {
persons_to_positionnate: 'Usagers à positionner',
holder: "Titulaire",
},
app: {
next: 'Suivant',
cancel: 'Annuler',
save: 'Enregistrer',
steps: {
concerned: 'Usagers concernés',
household: 'Ménage de destination',
household_address: 'Adresse du nouveau ménage',
positioning: 'Position dans le ménage',
confirm: 'Confirmation'
}
},
drop_persons_here: "Glissez-déposez ici les usagers pour la position \"{position}\"",
all_positionnated: "Tous les usagers sont positionnés",
holder: "Titulaire",
is_holder: "Est titulaire",
is_not_holder: "N'est pas titulaire",
remove_position: "Retirer des {position}",
remove_concerned: "Ne plus transférer",
household_part: "Destination",
suggestions: "Suggestions",
hide_household_suggestion: "Masquer les suggestions",
show_household_suggestion: 'Aucune suggestion | Afficher une suggestion | Afficher {count} suggestions',
household_for_participants_accompanying_period: "Des ménages partagent le même parcours",
select_household: "Sélectionner le ménage",
dates_title: "Période de validité",
dates: {
start_date: "Début de validité",
end_date: "Fin de validité",
dates_title: "Période de validité",
},
confirmation: {
save: "Enregistrer",
there_are_warnings: "Impossible de valider actuellement",
check_those_items: "Veuillez corriger les éléments suivants",
},
give_a_position_to_every_person: "Indiquez une position pour chaque usager concerné",
add_destination: "Indiquez un ménage de destination",
add_at_least_onePerson: "Indiquez au moins un usager à transférer",
}
}
};

View File

@ -43,6 +43,10 @@ const store = createStore({
allowHouseholdSearch: window.household_members_editor_data.allowHouseholdSearch,
allowLeaveWithoutHousehold: window.household_members_editor_data.allowLeaveWithoutHousehold,
forceLeaveWithoutHousehold: false,
/**
* If true, the user explicitly said that no address is possible
*/
forceHouseholdNoAddress: false,
/**
* Household suggestions
*
@ -80,6 +84,9 @@ const store = createStore({
isModeLeave(state) {
return state.mode === "leave";
},
isHouseholdForceNoAddress(state) {
return state.forceHouseholdNoAddress;
},
getSuggestions(state) {
let suggestions = [];
state.householdSuggestionByAccompanyingPeriod.forEach(h => {
@ -90,15 +97,12 @@ const store = createStore({
},
isHouseholdNew(state) {
return state.mode === "new";
/*
if (state.household === null) {
return false;
}
return !Number.isInteger(state.household.id);
*/
},
getAddressContext(state, getters) {
if (state.household === null) {
return {};
}
if (!getters.hasHouseholdAddress) {
return {
edit: false,
@ -203,6 +207,40 @@ const store = createStore({
needsPositionning(state) {
return state.forceLeaveWithoutHousehold === false;
},
fakeHouseholdWithConcerned(state, getters) {
if (null === state.household) {
throw Error('cannot create fake household without household');
}
let h = {
type: 'household',
members: state.household.members,
current_address: state.household.current_address,
current_members_id: state.household.current_members_id,
new_members: [],
};
if (!getters.isHouseholdNew){
h.id = state.household.id;
}
state.concerned.forEach((c, index) => {
let m = {
id: index * -1,
person: c.person,
holder: c.holder,
position: c.position,
};
if (c.position === null) {
m.position = {
ordering: 999999
}
}
h.new_members.push(m);
})
console.log('fake household', h);
return h;
},
buildPayload: (state, getters) => {
let
conc,
@ -277,6 +315,10 @@ const store = createStore({
position = state.positions.find(pos => pos.id === position_id),
conc = state.concerned.find(c => c.person.id === person_id);
conc.position = position;
// reset position if changed:
if (!position.allowHolder && conc.holder) {
conc.holder = false;
}
},
setComment(state, {conc, comment}) {
conc.comment = comment;
@ -288,9 +330,9 @@ const store = createStore({
conc.holder = false;
conc.position = null;
},
removeConcerned(state, conc) {
removePerson(state, person) {
state.concerned = state.concerned.filter(c =>
c.person.id !== conc.person.id
c.person.id !== person.id
)
},
createHousehold(state) {
@ -315,6 +357,7 @@ const store = createStore({
}
state.household.current_address = address;
state.forceHouseholdNoAddress = false;
},
removeHouseholdAddress(state, address) {
if (null === state.household) {
@ -324,6 +367,9 @@ const store = createStore({
state.household.current_address = null;
},
markHouseholdNoAddress(state) {
state.forceHouseholdNoAddress = true;
},
forceLeaveWithoutHousehold(state) {
state.household = null;
state.mode = "leave";
@ -389,8 +435,8 @@ const store = createStore({
commit('removePosition', conc);
dispatch('computeWarnings');
},
removeConcerned({ commit, dispatch }, conc) {
commit('removeConcerned', conc);
removePerson({ commit, dispatch }, person) {
commit('removePerson', person);
dispatch('computeWarnings');
dispatch('fetchAddressSuggestions');
},

View File

@ -19,15 +19,18 @@
<!-- member part -->
<li v-if="hasCurrentMembers" class="members" :title="$t('current_members')">
<template v-for="m in currentMembers()" :key="m.id">
<span v-for="m in currentMembers()" :key="m.id" class="m" :class="{ is_new: m.is_new === true}">
<person-render-box render="badge"
:person="m.person"
:options="{
isHolder: m.holder,
addLink: true
}">
<template v-slot:post-badge v-if="m.is_new === true">
<span class="post-badge is_new"><i class="fa fa-sign-in"></i></span>
</template>
</person-render-box>
</template>
</span>
</li>
<li v-else class="members" :title="$t('current_members')">
<p class="chill-no-data-statement">{{ $t('no_members_yet') }}</p>
@ -82,7 +85,7 @@ export default {
return this.household.current_members_id.length > 0;
},
currentMembers() {
return this.household.members.filter(m => this.household.current_members_id.includes(m.id))
let members = this.household.members.filter(m => this.household.current_members_id.includes(m.id))
.sort((a, b) => {
if (a.position.ordering < b.position.ordering) {
return -1;
@ -98,6 +101,17 @@ export default {
}
return 0;
});
if (this.household.new_members !== undefined) {
this.household.new_members.map(m => {
m.is_new = true;
return m;
}).forEach(m => {
members.push(m);
});
}
return members;
},
currentMembersLength() {
return this.household.current_members_id.length;
@ -121,6 +135,13 @@ section.chill-entity {
content: '';
}
.members {
.post-badge.is_new {
margin-left: 0.5rem;
color: var(--bs-chill-green);
}
}
}
}
</style>

View File

@ -126,6 +126,7 @@
</span>
{{ person.text }}
</span>
<slot name="post-badge"></slot>
</span>
</template>