move and rename vue HouseholdRenderBox

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue

@@ -0,0 +1,130 @@
+<template>A
+  <section class="chill-entity 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="hasCurrentMembers" class="members">
+      <span class="current-members">{{ $t('current_members') }}: </span>
+      <template v-for="(m, index) in currentMembers()" :key="m.id">
+        <person :person="m.person"></person>
+        <span v-if="m.holder">
+          &nbsp;<span class="badge bg-primary">{{ $t('holder') }}</span>
+        </span>
+        <span v-if="index != (currentMembersLength() - 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>
+  </section>B
+</template>
+
+<style lang="scss">
+section.chill-entity {
+   &.entity-household {
+      display: grid;
+      grid-template-columns: auto auto 30%;
+      grid-template-areas:
+         "iden iden where"
+         "who  who  where";
+      .identifier {
+         grid-area: iden;
+         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/Address/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",
+        "holder": "titulaire",
+      }
+  }
+}
+;
+
+export default {
+  name: 'Household',
+  props: ['household'],
+  components: {
+    Person,
+    ShowAddress,
+  },
+  i18n,
+  methods: {
+    hasCurrentMembers() {
+      return this.household.current_members_id.length > 0;
+    },
+    currentMembers() {
+      return 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;
+          }
+          if (a.position.ordering > b.position.ordering) {
+            return 1;
+          }
+          if (a.holder && !b.holder) {
+            return -1;
+          }
+          if (!a.holder && b.holder) {
+            return 1;
+          }
+          return 0;
+        });
+    },
+    currentMembersLength() {
+      return this.household.current_members_id.length;
+    },
+    isHouseholdNew() {
+      return !Number.isInteger(this.household.id);
+    },
+    hasAddress() {
+      return this.household.current_address !== null;
+    }
+  }
+};
+
+</script>