first layout for form edit

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue

@@ -1,25 +1,56 @@
 <template>
   <h2>{{ $t('household_members_editor.concerned.title') }}</h2>
 
-    <div>
-      <div v-for="conc in concUnpositionned" 
+  <h3>{{ $t('household_members_editor.concerned.persons_to_positionnate') }}</h3>
+
+    <div class="flex-table list-household-members">
+      <div v-for="conc in concUnpositionned"
+        class="item-bloc"
         v-bind:key="conc.person.id"
         draggable="true"
         @dragstart="onStartDragConcern($event, conc.person.id)"
       >
-        <span>{{ conc.person.text }}</span>
-        <span>
-          {{ $t('household_members_editor.concerned.move_to') }}: 
-        </span>
-        <span 
-          v-for="position in positions" 
-          @click="moveToPosition(conc.person.id, position.id)"
-        >
-          {{ position.label.fr }}
-        </span>
-        <button v-if="conc.allowRemove" @click="removeConcerned(conc)">
-          {{ $t('household_members_editor.remove_concerned') }}
-        </button>
+        <div class="item-row person">
+          <div class="item-col box-person">
+            <div>
+              <img src="~ChillMainAssets/img/draggable.svg" class="drag-icon" />
+              <person :person="conc.person"></person>
+            </div>
+            <div>
+              {{ $t('person.born', {'gender': conc.person.gender} ) }}
+              {{ $d(conc.person.birthdate.datetime, 'short') }}
+            </div>
+
+          </div>
+          <div class="item-col box-where">
+            <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 class="item-row move_to">
+          <div class="item-col">
+            <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 bt-primary">
+              {{ $t('household_members_editor.remove_concerned') }}
+            </button>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -39,8 +70,8 @@
     <div 
       v-for="position in positions"
     >
-      <h2>{{ position.label.fr }}</h2>
-      <ul>
+      <h3>{{ position.label.fr }}</h3>
+      <div class="flex-table list-household-members">
         <member-details
           v-for="conc in concByPosition(position.id)"
           v-bind:key="conc.person.id"
@@ -49,14 +80,15 @@
           @dragstart="onStartDragConcern($event, conc.person.id)"
         >
         </member-details>
-        <li
-          class="droppable"
+        <div
+          class="droppable_zone"
           @drop="onDropConcern($event, position.id)"
           @dragover.prevent
           @dragenter.prevent
         >
-        </li>
-      </ul>
+          {{ $t('household_members_editor.drop_persons_here', {'position': position.label.fr }) }}
+        </div>
+      </div>
     </div>
   </div>
 
@@ -64,33 +96,53 @@
 </template>
 
 <style scoped>
-.concerned_box {
+div.person {
   cursor: move;
-  padding: 1.5em;
-  border: 1px solid black;
+
+  * {
+    cursor: move
+  }
 }
-.concerned_box * {
-  cursor: move;
+
+.drag-icon {
+  height: 1.1em;
+  margin-right: 0.5em;
 }
+
 .droppable_zone {
-  min-height: 50px;
-  width: 100%;
-  border: 1px solid black;
+  background-color: var(--chill-llight-gray);
+  color: white;
+  font-size: large;
+  text-align: center;
+  display: table-cell;
+  vertical-align: middle;
+  padding: 1em;
+  background: linear-gradient(to top, var(--chill-light-gray), 30%, var(--chill-llight-gray));
 }
 </style>
 
 <script>
 import { mapGetters } from 'vuex';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
+import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
 import MemberDetails from './MemberDetails.vue';
+import { ISOToDatetime } from 'ChillMainAssets/js/date.js';
 
 export default {
   name: 'Concerned',
   components: {
     AddPersons,
     MemberDetails,
+    Person,
   },
   computed: {
+    as_date: (state) => (d) => {
+      console.log(d);
+
+      let k = ISOToDatetime(d);
+      console.log(k);
+      return k;
+    },
     ...mapGetters([
       'concUnpositionned',
       'positions',

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Confirmation.vue

@@ -1,16 +1,31 @@
 <template>
 
+  <div v-if="hasWarnings" class="alert alert-warning">
+    {{ $t('household_members_editor.confirmation.there_are_warnings') }}
+  </div>
+
+  <p v-if="hasWarnings">
+    {{ $t('household_members_editor.confirmation.check_those_items') }}
+  </p>
+  
   <ul>
     <li v-for="(msg, index) in warnings">
       {{ $t(msg.m, msg.a) }}
     </li>
   </ul>  
 
-  <div v-if="hasNoWarnings">
-    <button class="sc-button bt-green" @click="confirm">{{ $t('household_member_editor.confirmation') }}</button>
-  </div>
+  <ul class="record_actions sticky-form-buttons">
+    <li>
+      <button class="sc-button bt-save" :disabled="hasWarnings" @click="confirm">
+        {{ $t('household_members_editor.confirmation.save') }}
+      </button>
+    </li>
+  </ul>
 </template>
 
+<style scoped lang="scss">
+</style>
+
 <script>
 import { mapState } from 'vuex';
 
@@ -20,6 +35,7 @@ export default {
     ...mapState({
       warnings: (state) => state.warnings,
       hasNoWarnings: (state) => state.warnings.length === 0,
+      hasWarnings: (state) => state.warnings.length > 0,
     }),
   },
   methods: {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue

@@ -1,9 +1,9 @@
 <template>
-  <h2>{{ $t('household_member_editor.dates_title') }}</h2>
+  <h2>{{ $t('household_members_editor.dates_title') }}</h2>
 
   <p>
     <label for="start_date">
-      {{ $t('household_member_editor.dates.start_date') }}
+      {{ $t('household_members_editor.dates.start_date') }}
     </label>
     <input type="date" v-model="startDate" />
   </p>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue

@@ -1,29 +1,29 @@
 <template>
-  <h2>{{ $t('household_member_editor.household_part') }}</h2>
+  <h2>{{ $t('household_members_editor.household_part') }}</h2>
 
   <div v-if="hasHousehold">
     <span v-if="isHouseholdNew">
-      {{ $t('household_member_editor.new_household') }}
+      {{ $t('household_members_editor.new_household') }}
     </span>
     <div v-else>
       Ménage existant 
     </div>
   </div>
   <div v-else-if="isForceLeaveWithoutHousehold">
-      {{ $t('household_member_editor.will_leave_any_household') }}
+      {{ $t('household_members_editor.will_leave_any_household') }}
   </div>
   <div v-else>
     Aucun ménage
   </div>
 
   <button v-if="allowHouseholdCreate" class="sc-button bt-create" @click="createHousehold">
-    {{ $t('household_member_editor.create_household') }}
+    {{ $t('household_members_editor.create_household') }}
   </button>
   <button v-if="allowHouseholdSearch">
-    {{ $t('household_member_editor.search_household') }}
+    {{ $t('household_members_editor.search_household') }}
   </button>
   <button v-if="allowLeaveWithoutHousehold" @click="forceLeaveWithoutHousehold">
-    {{ $t('household_member_editor.leave_without_household') }}
+    {{ $t('household_members_editor.leave_without_household') }}
   </button>
   
 </template>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/MemberDetails.vue

@@ -1,29 +1,82 @@
 <template>
-  <li>
-  <div>
-    <span>{{ conc.person.text }}</span>
-    <span v-if="conc.position.allowHolder">
-      <button class="badge badge-pill" :class="{ 'badge-primary': isHolder, 'badge-secondary': !isHolder}" @click="toggleHolder">
-         {{ $t('household_members_editor.holder') }}
-      </button>
+  <div class="item-bloc">
+    <div class="item-row person">
+      <div class="item-col box-person">
+        <div>
+          <img src="~ChillMainAssets/img/draggable.svg" class="drag-icon" />
+          <person :person="conc.person"></person>
+          <span v-if="isHolder" class="badge badge-primary holder">
+            {{ $t('household_members_editor.holder') }}
+          </span>
+        </div>
+        <div>{{ $t('person.born', {'gender': conc.person.gender} ) }}</div>
+      </div>
+      <div class="item-col box-where">
+        <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>
 
-    </span>
-    <button @click="removePosition">
-      {{ $t('household_members_editor.remove_position', {position: conc.position.label.fr}) }}
-    </button>
-    <button @click="removeConcerned">
-      {{ $t('household_members_editor.remove_concerned') }}
-    </button>
+    <div class="item-row participation-details">
+      <div v-if="conc.position.allowHolder" class="action">
+        <button class="btn" :class="{ 'btn-primary': isHolder, 'btn-secondary': !isHolder}" @click="toggleHolder">
+           {{ $t(isHolder ? 'household_members_editor.is_holder' : 'household_members_editor.is_not_holder') }}
+        </button>
+      </div>
+
+      <div>
+        <button @click="removePosition" class="btn btn-outline-primary">
+          {{ $t('household_members_editor.remove_position', {position: conc.position.label.fr}) }}
+        </button>
+      </div>
+
+      <div>
+        <button v-if="conc.allowRemove" @click="removeConcerned" class="btn btn-primary">
+          {{ $t('household_members_editor.remove_concerned') }}
+        </button>
+      </div>
+    </div>
   </div>
-</li>
 </template>
 
+<style scoped lang="scss">
+
+.drag-icon {
+  height: 1.1em;
+  margin-right: 0.5em;
+}
+div.participation-details {
+  display: flex;
+  flex-direction: row !important;
+  justify-content: flex-end;
+
+  .action {
+    align-self: flex-start;
+    margin-right: auto;
+  }
+}
+
+.holder {
+  display: inline;
+  vertical-align: super;
+  font-size: 0.6em;
+}
+
+</style>
 
 <script>
 import { mapGetters } from 'vuex';
+import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
 
 export default {
   name: 'MemberDetails',
+  components: {
+    Person,
+  },
   props: [
     'conc'
   ],