finish merge (oups) + layout of household in members editor app

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

@@ -0,0 +1,117 @@
+<template>
+  <div class="chill-entity chill-entity__household">
+    <!-- identifier -->
+    <div v-if="isHouseholdNew()" class="identifier">
+      <i class="fa fa-home"></i>
+      {{ $t('new_household') }}
+    </div>
+    <div v-else class="identifier">
+      <i class="fa fa-home"></i>
+      {{ $t('household_number', { number: household.id } ) }}
+    </div>
+
+    <!-- member part --> 
+    <div v-if="hasMembers" class="members">
+      <span class="current-members">{{ $t('current_members') }}: </span>
+      <template v-for="(m, index) in current_members()" :key="m.id">
+        <person :person="m.person"></person>
+        <span v-if="index != (current_members_length() - 1)">, </span>
+      </template>
+    </div>
+    <div v-else class="members">
+      <p class="chill-no-data-statement">{{ $t('no_members_yet') }}</p>
+    </div>
+
+    <!-- address part -->
+    <div v-if="hasAddress()" class="where">
+      <i class="fa fa-where"></i>
+      <show-address :address="household.current_address"></show-address>
+    </div>
+    <div v-else class="where">
+      <i class="fa fa-where"></i>
+      <p class="chill-no-data-statement">{{ $t('no_current_address') }}</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.chill-entity__household {
+  display: grid;
+  grid-template-areas: 
+    "identifier identifier where"
+    "who        who        where"
+    ;
+  grid-template-columns:
+    auto        auto       30%
+    ;
+
+  .identifier {
+    grid-area: identifier;
+    
+    font-size: 1.3em;
+    font-weight: 700;
+    color: var(--chill-blue);
+
+  }
+  .members {
+    grid-area: who;
+
+    .current-members {
+      font-weight: 700;
+    }
+  }
+  .where {
+    grid-area: where
+  }
+
+
+}
+</style>
+
+
+
+<script>
+
+import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
+import ShowAddress from 'ChillMainAssets/vuejs/_components/ShowAddress.vue';
+
+const i18n = {
+  "messages":
+    {
+      "fr":
+      {
+        "household_number": "Ménage #{number}",
+        "current_members": "Membres actuels",
+        "no_current_address": "Sans adresse actuellement",
+        "new_household": "Nouveau ménage",
+        "no_members_yet": "Aucun membre actuellement",
+      }
+  }
+}
+;
+
+export default {
+  name: 'Household',
+  props: ['household'],
+  components: {
+    Person,
+    ShowAddress,
+  },
+  i18n,
+  methods: {
+    current_members() {
+      return this.household.members.filter(m => this.household.current_members_id.includes(m.id));
+    },
+    current_members_length() {
+      return this.household.current_members_id.length;
+    },
+    isHouseholdNew() {
+      return !Number.isInteger(this.household.id);
+    },
+    hasAddress() {
+      return this.household.current_address !== null;
+    }
+  }
+};
+
+</script>