From 8f361567ff911c7bcb2efde88c20b2e751044817 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Fri, 15 Oct 2021 16:40:31 +0200
Subject: [PATCH] form as carrousel finalized

---
 .../Resources/public/lib/api/download.js      |   2 -
 .../vuejs/HouseholdMembersEditor/App.vue      | 117 ++++++++++++--
 .../components/Concerned.vue                  | 152 ++++--------------
 .../components/Confirmation.vue               |  27 +---
 .../components/CurrentHousehold.vue           |  31 ++++
 .../components/Dates.vue                      |  14 +-
 .../components/Household.vue                  | 132 +++++----------
 .../components/HouseholdAddress.vue           |  88 ++++++++++
 .../components/Positioning.vue                | 106 ++++++++++++
 .../vuejs/HouseholdMembersEditor/js/i18n.js   |  49 +++---
 .../HouseholdMembersEditor/store/index.js     |  68 ++++++--
 .../_components/Entity/HouseholdRenderBox.vue |  27 +++-
 .../_components/Entity/PersonRenderBox.vue    |   1 +
 13 files changed, 531 insertions(+), 283 deletions(-)
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/HouseholdAddress.vue
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue

diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/api/download.js b/src/Bundle/ChillMainBundle/Resources/public/lib/api/download.js
index dc4f9da6c..625103ebe 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/api/download.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/api/download.js
@@ -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 {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue
index ff1cab206..c2112007f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue
@@ -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');
     },
   }
 }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue
index 1d119ce40..b291bc06d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue
@@ -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);
     },
   }
 }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Confirmation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Confirmation.vue
index 227ce3d21..10ff658f3 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Confirmation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Confirmation.vue
@@ -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>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue
new file mode 100644
index 000000000..01667eab7
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/CurrentHousehold.vue
@@ -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>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue
index be332523d..c40cc9cbc 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue
@@ -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);
       }
     }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
index 98cf71bb3..2e3f05976 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
@@ -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');
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/HouseholdAddress.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/HouseholdAddress.vue
new file mode 100644
index 000000000..9b2fe94a0
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/HouseholdAddress.vue
@@ -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>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue
new file mode 100644
index 000000000..18bf0764d
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue
@@ -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>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
index c2d1d3dc3..5db77da0b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
@@ -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",
     }
    }
 };
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js
index e4b9250f4..e15d79349 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js
@@ -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');
     },
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue
index c15938c4f..16d0fa2ff 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue
@@ -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>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
index 2bc5f0b3b..f74cd4587 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -126,6 +126,7 @@
       </span>
       {{ person.text }}
     </span>
+    <slot name="post-badge"></slot>
   </span>
 
 </template>