improve layout of third parties in AddPerson

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

@@ -1,42 +1,102 @@
 <template>
-   <div class="container">
+    <div class="container tpartycontainer">
+      <div class="tparty-identification">
+        <span class="name">
+           {{ item.result.text }}
+        </span>
+          <span class="location">
+          <template v-if="hasAddress">
+           {{ getAddress.text }} -
+           {{ getAddress.postcode.name }}
+          </template>
+        </span>
+      </div>
+      <div class="tpartyparent" v-if="hasParent">
+        <span class="name">
+          {{ item.result.parent.text }}
+        </span>
+      </div>
+    </div>
+    <div class="right_actions">
 
-      <span class="name">
-         {{ item.result.text }}
-      </span>
-      <span class="location">
-        <template v-if="item.result.address != null">
-         {{ item.result.address.text }} -
-         {{ item.result.address.postcode.name }}
-        </template>
-      </span>
-
-   </div>
-   <div class="right_actions">
-
-     <span class="badge rounded-pill bg-info" v-if="item.result.isChild">
-        {{ $t('item.thirdparty_contact')}}
+     <span class="badge bg-chill-red" v-if="item.result.kind == 'child'">
+        {{ $t('thirdparty.contact')}}
      </span>
-     <span class="badge rounded-pill bg-secondary" :title="item.key">
+      <span class="badge bg-info" v-else-if="item.result.kind == 'company'">
+       {{ $t('thirdparty.company')}}
+      </span>
+      <span class="badge bg-secondary" v-else="item.result.kind == 'contact'">
+        {{ $t('thirdparty.contact')}}
+      </span>
+
+      <span class="badge rounded-pill bg-secondary" :title="item.key">
          {{ $t('item.type_thirdparty') }}
       </span>
+
       <on-the-fly
-         type="thirdparty"
-         v-bind:id="item.result.id"
-         action="show">
+          type="thirdparty"
+          v-bind:id="item.result.id"
+          action="show">
       </on-the-fly>
 
-   </div>
+    </div>
 </template>
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 
+const i18n = {
+  messages: {
+    fr: {
+      thirdparty: {
+        contact: "Contact",
+        company: "Institution",
+        child: "Personne de contact"
+      }
+    }
+  }
+};
+
 export default {
    name: 'SuggestionThirdParty',
    components: {
       OnTheFly
    },
-   props: ['item']
+   props: ['item'],
+   i18n,
+   computed: {
+     hasAddress() {
+       if (this.$props.item.result.address !== null) {
+         return true;
+       }
+       if (this.$props.item.result.parent !== null) {
+         this.$props.item.result.parent.address !== null;
+       }
+     },
+     hasParent() {
+       return this.$props.item.result.parent !== null;
+     },
+     getAddress() {
+       if (this.$props.item.result.address !== null) {
+         return this.$props.item.result.address;
+       }
+       if (this.$props.item.result.parent.address !== null) {
+         return this.$props.item.result.parent.address;
+       }
+
+       return null;
+     }
+   }
 }
 </script>
+
+<style lang="scss" scoped>
+.tpartycontainer {
+ .tpartyparent {
+    .name {
+      font-weight: bold;
+      font-variant: all-small-caps;
+    }
+ }
+}
+</style>