search household in household mmebers editor

src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss

@@ -22,6 +22,7 @@ $chill-theme-buttons: (
    "cancel":        $gray-300,
    "choose":        $gray-300,
    "notify":        $gray-300,
+   "search":        $gray-300,
    "unlink":        $chill-red,
    "tpchild":       $chill-pink,
 );
@@ -108,6 +109,7 @@ $chill-theme-buttons: (
    &.btn-notify::before    { content: "\f1d8"; } // fa-paper-plane
    &.btn-tpchild::before   { content: "\f007"; } // fa-user
    &.btn-download::before  { content: "\f019"; } // fa-download
+   &.btn-search::before    { content: "\f002"; } // fa-search
 }
 
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue

@@ -24,6 +24,11 @@
         {{ $t('user')}}
     </span>
 
+    <span v-if="entity.type === 'household'" class="badge rounded-pill bg-user">
+        {{ $t('household')}}
+    </span>
+
+
 </template>
 
 <script>
@@ -40,7 +45,8 @@ export default {
                     company: "Personne morale",
                     contact: "Personne physique",
                 },
-                user: 'TMS'
+                user: 'TMS',
+                household: 'Ménage',
             }
         }
     }

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

@@ -61,6 +61,16 @@
     <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">
+      <add-persons
+          modalTitle="Chercher un ménage existant"
+          buttonTitle="Chercher un ménage existant"
+          v-bind:key="addPersons.key"
+          v-bind:options="addPersons.options"
+          @addNewPersons="pickHouseholdFound"
+          ref="pickHousehold"> <!-- to cast child method -->
+      </add-persons>
+    </li>
     <li v-if="!hasHousehold">
       <button @click="setModeNew" class="btn btn-sm btn-create">{{ $t('household_members_editor.household.create_household') }}</button>
     </li>
@@ -77,16 +87,30 @@
 import { mapGetters, mapState } from 'vuex';
 import HouseholdRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/HouseholdRenderBox.vue';
 import CurrentHousehold from './CurrentHousehold';
+import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons';
 
 export default {
   name: 'Household',
   components: {
+    AddPersons,
     CurrentHousehold,
     HouseholdRenderBox,
   },
   emits: ['readyToGo'],
   data() {
     return {
+      addPersons: {
+        key: 'household_find',
+        options: {
+          type: ['household'],
+          priority: null,
+          uniq: true,
+          button: {
+            size: 'btn-sm',
+            type: 'btn-search',
+          }
+        }
+      },
       addAddress: {
         key: 'household_new',
         options: {
@@ -166,6 +190,13 @@ export default {
       this.$store.dispatch('selectHousehold', h);
       this.$emit('readyToGo');
     },
+    pickHouseholdFound({selected, modal}) {
+      selected.forEach(function(item) {
+        this.selectHousehold(item.result);
+      }, this);
+      this.$refs.pickHousehold.resetSearch(); // to cast child method
+      modal.showModal = false;
+    },
     removeHouseholdAddress() {
       this.$store.commit('removeHouseholdAddress');
     },

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue

@@ -1,12 +1,12 @@
 <template>
-   <ul class="record_actions">
+    <ul class="record_actions">
       <li class="add-persons">
-         <a class="btn" :class="getClassButton" :title="$t(buttonTitle)"
-            @click="openModal"><span v-if="displayTextButton">{{ $t(buttonTitle) }}</span></a>
+        <a class="btn" :class="getClassButton" :title="$t(buttonTitle)"
+           @click="openModal"><span v-if="displayTextButton">{{ $t(buttonTitle) }}</span></a>
       </li>
-   </ul>
+    </ul>
 
-   <teleport to="body">
+  <teleport to="body">
       <modal v-if="modal.showModal"
          :modalDialogClass="modal.modalDialogClass"
          @close="modal.showModal = false">
@@ -181,7 +181,7 @@ export default {
       },
       hasPriorSuggestion() {
          return this.search.priorSuggestion.key ? true : false;
-      }
+      },
    },
    methods: {
       openModal() {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue

@@ -25,6 +25,11 @@
             v-if="item.result.type === 'user'"
             v-bind:item="item">
          </suggestion-user>
+
+        <suggestion-household
+            v-if="item.result.type === 'household'"
+            v-bind:item="item">
+        </suggestion-household>
       </label>
 
    </div>
@@ -34,6 +39,7 @@
 import SuggestionPerson from './TypePerson';
 import SuggestionThirdParty from './TypeThirdParty';
 import SuggestionUser from './TypeUser';
+import SuggestionHousehold from './TypeHousehold';
 
 export default {
    name: 'PersonSuggestion',
@@ -41,6 +47,7 @@ export default {
       SuggestionPerson,
       SuggestionThirdParty,
       SuggestionUser,
+      SuggestionHousehold,
    },
    props: [
       'item',
@@ -70,7 +77,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
    div.results {
       div.list-item {
          padding: 0.4em 0.8em;
@@ -83,7 +90,7 @@ export default {
          label {
             display: inline-flex;
             width: 100%;
-            div.container {
+            div.container:not(.household) {
                & > input {
                   margin-right: 0.8em;
                }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeHousehold.vue

@@ -0,0 +1,27 @@
+<template>
+   <div class="container household">
+     <household-render-box :household="item.result" :isAddressMultiline="false"></household-render-box>
+   </div>
+
+   <div class="right_actions">
+      <badge-entity
+        :entity="item.result"
+        :options="{ displayLong: true }">
+      </badge-entity>
+   </div>
+</template>
+
+<script>
+
+import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
+import HouseholdRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/HouseholdRenderBox.vue';
+
+export default {
+   name: 'SuggestionHousehold',
+   components: {
+     BadgeEntity,
+     HouseholdRenderBox,
+   },
+   props: ['item'],
+}
+</script>

src/Bundle/ChillPersonBundle/Search/SearchHouseholdApiProvider.php

@@ -91,6 +91,7 @@ class SearchHouseholdApiProvider implements SearchApiInterface
                 'JOIN chill_person_person AS person ON vcpha.person_id = person.id'
             )
             ->setSelectKey('household')
+            ->andWhereClause('vcpha.validTo IS NULL', [])
             ->setSelectJsonbMetadata("jsonb_build_object('id', vcpha.household_id)");
 
         return $query;