style editor when no household nor persons to move

src/Bundle/ChillPersonBundle/DependencyInjection/ChillPersonExtension.php

@@ -514,6 +514,25 @@ class ChillPersonExtension extends Extension implements PrependExtensionInterfac
                         ],
                     ]
                 ],
+                [
+                    'class' => \Chill\PersonBundle\Entity\Household\Household::class,
+                    'name' => 'household',
+                    'base_path' => '/api/1.0/person/household',
+                    // TODO: acl
+                    'base_role' => 'ROLE_USER',
+                    'actions' => [
+                        '_entity' => [
+                            'methods' => [
+                                Request::METHOD_GET => true,
+                                Request::METHOD_HEAD => true,
+                            ],
+                            'roles' => [
+                                Request::METHOD_GET => 'ROLE_USER',
+                                Request::METHOD_HEAD => 'ROLE_USER',
+                            ]
+                        ],
+                    ]
+                ],
             ]
         ]);
     }

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

@@ -3,6 +3,15 @@
 
   <h3>{{ $t('household_members_editor.concerned.persons_to_positionnate') }}</h3>
 
+  <div v-if="noPerson">
+    <div class="alert alert-info">
+      {{ $t('household_members_editor.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"
@@ -33,6 +42,9 @@
         </div>
         <div 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" 
             >
@@ -53,6 +65,7 @@
         </div>
       </div>
     </div>
+  </div>
 
   <div>
     <add-persons
@@ -93,7 +106,7 @@
 
 </template>
 
-<style scoped>
+<style lang="scss">
 div.person {
   cursor: move;
 
@@ -117,6 +130,14 @@ div.person {
   padding: 1em;
   background: linear-gradient(to top, var(--chill-light-gray), 30%, var(--chill-llight-gray));
 }
+
+.move_to {
+  .move_hint {
+    text-align: center;
+    display: inline-block;
+    padding: 0.400rem 0.5rem;
+  }
+}
 </style>
 
 <script>
@@ -134,18 +155,18 @@ export default {
     Person,
   },
   computed: {
-    as_date: (state) => (d) => {
-      console.log(d);
-
-      let k = ISOToDatetime(d);
-      console.log(k);
-      return k;
-    },
     ...mapGetters([
       'concUnpositionned',
       'positions',
       'concByPosition',
-    ])
+    ]),
+    noPerson () {
+      return this.$store.getters.persons.length === 0;
+    },
+    allPersonsPositionnated () {
+      return this.$store.getters.persons.length > 0
+        && this.$store.getters.concUnpositionned.length === 0;
+    },
   },
   data() {
     return {

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

@@ -3,28 +3,36 @@
 
   <div v-if="hasHousehold">
     <span v-if="isHouseholdNew">
-      {{ $t('household_members_editor.new_household') }}
+      {{ $t('household_members_editor.household.new_household') }}
     </span>
     <div v-else>
       Ménage existant 
     </div>
   </div>
   <div v-else-if="isForceLeaveWithoutHousehold">
-      {{ $t('household_members_editor.will_leave_any_household') }}
+      {{ $t('household_members_editor.household.will_leave_any_household') }}
   </div>
   <div v-else>
-    Aucun ménage
+    <div class="alert alert-info">{{ $t('household_members_editor.household.no_household_choose_one') }}</div>
   </div>
 
-  <button v-if="allowHouseholdCreate" class="sc-button bt-create" @click="createHousehold">
+  <ul v-if="allowChangeHousehold" class="record_actions">
-    {{ $t('household_members_editor.create_household') }}
+    <li v-if="allowHouseholdCreate">
-  </button>
+      <button class="sc-button bt-create" @click="createHousehold">
-  <button v-if="allowHouseholdSearch">
+        {{ $t('household_members_editor.household.create_household') }}
-    {{ $t('household_members_editor.search_household') }}
+      </button>
-  </button>
+    </li>
-  <button v-if="allowLeaveWithoutHousehold" @click="forceLeaveWithoutHousehold">
+    <li v-if="allowHouseholdSearch">
-    {{ $t('household_members_editor.leave_without_household') }}
+      <button class="sc-button">
-  </button>
+        <i class="fa fa-search"></i>{{ $t('household_members_editor.household.search_household') }}
+      </button>
+    </li>
+    <li v-if="allowLeaveWithoutHousehold" >
+      <button @click="forceLeaveWithoutHousehold" class="sc-button bt-orange">
+        <i class="fa fa-sign-out"></i>{{ $t('household_members_editor.household.leave_without_household') }}
+      </button>
+    </li>
+  </ul>
   
 </template>
 
@@ -43,16 +51,18 @@ export default {
       return this.$store.household;
     },
     allowHouseholdCreate() {
-      console.log('allowHouseholdcreate', this.$store.state.allowHouseholdCreate);
       return this.$store.state.allowHouseholdCreate;
     },
     allowHouseholdSearch() {
-      console.log('allowHouseholdcreate', this.$store.state.allowHouseholdSearch);
       return this.$store.state.allowHouseholdSearch;
     },
     allowLeaveWithoutHousehold() {
       return this.$store.state.allowLeaveWithoutHousehold;
     },
+    allowChangeHousehold() {
+      return this.allowHouseholdCreate || this.allowHouseholdSearch || 
+        this.allowLeaveWithoutHousehold;
+    },
     isForceLeaveWithoutHousehold() {
       return this.$store.state.forceLeaveWithoutHousehold;
     }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js

@@ -4,6 +4,13 @@ import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n'
 const appMessages = {
    fr: {
      household_members_editor: {
+      household: {
+        no_household_choose_one: "Aucun ménage de destination. Choisissez un ménage.",
+        new_household: "Nouveau ménage",
+        create_household: "Créer un ménage",
+        search_household: "Chercher un ménage",
+        will_leave_any_household: "Ne rejoignent pas de ménage",
+      },
       concerned: {
         title: "Usagers concernés",
         add_persons: "Ajouter d'autres usagers",
@@ -12,15 +19,13 @@ const appMessages = {
         persons_to_positionnate: 'Usagers à positionner',
       },
       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: "Sera titulaire",
       is_not_holder: "Ne sera pas titulaire",
       remove_position: "Retirer des {position}",
       remove_concerned: "Ne plus transférer",
       household_part: "Ménage de destination",
-      new_household: "Nouveau ménage",
-      create_household: "Créer un ménage",
-      search_household: "Chercher un ménage",
       dates_title: "Période de validité",
       dates: {
         start_date: "Début de validité",
@@ -31,8 +36,9 @@ const appMessages = {
         there_are_warnings: "Impossible de valider actuellement",
         check_those_items: "Veuillez corriger les éléments suivants",
       },
-      give_a_position_to_every_person: "Indiquer une position pour chaque usager concerné",
+      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",
     }
    }
 };