try badgeEntity with displayLong option

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

@@ -0,0 +1,39 @@
+<template>
+
+    <span v-if="entity.type === 'person'" class="badge rounded-pill bg-person">
+        {{ $t('renderbox.person') }}
+    </span>
+
+    <span v-if="entity.type === 'thirdparty'" class="badge rounded-pill bg-thirdparty">
+        {{ $t('renderbox.type.thirdparty')}}
+
+        <i class="fa fa-user fa-fw" v-if="entity.kind === 'child'"></i>
+        <i class="fa fa-hospital-o fa-fw" v-else-if="entity.kind === 'company'"></i>
+        <i class="fa fa-user-md fa-fw" v-else></i>
+
+        <template v-if="options.displayLong === true">
+            <span v-if="entity.kind === 'child'">{{ $t('tparty.child')}}</span>
+            <span v-else-if="entity.kind === 'company'">{{ $t('tparty.company')}}</span>
+            <span v-else>{{ $t('tparty.contact')}}</span>
+        </template>
+    </span>
+
+</template>
+
+<script>
+export default {
+    name: "BadgeEntity",
+    props: ['options', 'entity'],
+    i18n: {
+        messages: {
+            fr: {
+                tparty: {
+                    child: "Personne de contact",
+                    company: "Personne morale",
+                    contact: "Personne physique",
+                }
+            }
+        }
+    }
+}
+</script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js

@@ -65,7 +65,7 @@ const messages = {
          household_without_address: "Le ménage de l'usager est sans adresse",
          no_data: "Aucune information renseignée",
          type: {
-            thirdparty: "Tiers professionel",
+            thirdparty: "Tiers",
             person: "Usager"
          },
          holder: "Titulaire"

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue

@@ -2,33 +2,83 @@
    <person-render-box render="bloc"
       v-if="resource.resource.type === 'person'"
       :person="resource.resource"
-      :options="{ addInfo : true, addId : false, addEntity: true, addLink: false, addAltNames: true, addAge : false, hLevel : 3, isConfidential : true }"
-      >
+      :options="{
+         addInfo : true,
+         addId : false,
+         addEntity: true,
+         addLink: false,
+         addAltNames: true,
+         addAge : false,
+         hLevel : 3,
+         isConfidential : true
+      }">
       <template v-slot:record-actions>
          <ul class="record_actions">
             <!--
             <button-location v-if="hasCurrentHouseholdAddress" :person="resource.resource"></button-location>
             -->
-            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="show"></on-the-fly></li>
-            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly"></on-the-fly></li>
-            <li><button class="btn btn-sm btn-remove" :title="$t('action.remove')" @click.prevent="$emit('remove', resource)"></button></li>
+            <li>
+               <on-the-fly
+                  :type="resource.resource.type"
+                  :id="resource.resource.id"
+                  action="show">
+               </on-the-fly>
+            </li>
+            <li>
+               <on-the-fly
+                  :type="resource.resource.type"
+                  :id="resource.resource.id"
+                  action="edit"
+                  @saveFormOnTheFly="saveFormOnTheFly">
+               </on-the-fly>
+            </li>
+            <li>
+               <button
+                  class="btn btn-sm btn-remove"
+                  :title="$t('action.remove')"
+                  @click.prevent="$emit('remove', resource)">
+               </button>
+            </li>
          </ul>
       </template>
-
    </person-render-box>
+
    <third-party-render-box
       v-if="resource.resource.type === 'thirdparty'"
       :thirdparty="resource.resource"
-      :options="{ addLink : false, addId : false, addEntity: true, addInfo: false, hLevel: 3 }"
-      >
+      :options="{
+         addLink : false,
+         addId : false,
+         addEntity: true,
+         addInfo: false,
+         hLevel: 3
+      }">
       <template v-slot:record-actions>
          <ul class="record_actions">
-            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="show"></on-the-fly></li>
-            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly"></on-the-fly></li>
-            <li><button class="btn btn-sm btn-remove" :title="$t('action.remove')" @click.prevent="$emit('remove', resource)"></button></li>
+            <li>
+               <on-the-fly
+                  :type="resource.resource.type"
+                  :id="resource.resource.id"
+                  action="show">
+               </on-the-fly>
+            </li>
+            <li>
+               <on-the-fly
+                  :type="resource.resource.type"
+                  :id="resource.resource.id"
+                  action="edit"
+                  @saveFormOnTheFly="saveFormOnTheFly">
+               </on-the-fly>
+            </li>
+            <li>
+               <button
+                  class="btn btn-sm btn-remove"
+                  :title="$t('action.remove')"
+                  @click.prevent="$emit('remove', resource)">
+               </button>
+            </li>
          </ul>
       </template>
-
    </third-party-render-box>
 </template>
 

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

@@ -1,6 +1,5 @@
 <template>
    <div class="container">
-   
       <span class="name">
          {{ item.result.text }}
       </span>
@@ -11,29 +10,30 @@
          {{ item.result.current_household_address.text }} -
          {{ item.result.current_household_address.postcode.name }}
       </span>
-      
    </div>
-   <div class="right_actions">
 
-      <span class="badge rounded-pill bg-secondary" :title="item.key">
-         {{ $t('item.type_person') }}
-      </span>
+   <div class="right_actions">
+      <badge-entity
+        :entity="item.result"
+        :options="{ displayLong: true }">
+      </badge-entity>
       <on-the-fly
          type="person"
          v-bind:id="item.result.id"
          action="show">
       </on-the-fly>
-      
    </div>
 </template>
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
+import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
 
 export default {
    name: 'SuggestionPerson',
    components: {
      OnTheFly,
+     BadgeEntity
    },
    props: ['item'],
    computed: {

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

@@ -17,33 +17,23 @@
         </span>
       </div>
     </div>
+
     <div class="right_actions">
-
-     <span class="badge rounded-pill bg-thirdparty-child" v-if="item.result.kind == 'child'">
-        {{ $t('thirdparty.child')}}
-     </span>
-      <span class="badge rounded-pill bg-thirdparty-company" v-else-if="item.result.kind == 'company'">
-       {{ $t('thirdparty.company')}}
-      </span>
-      <span class="badge rounded-pill bg-thirdparty-contact" 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">
-      </on-the-fly>
-
+       <badge-entity
+         :entity="item.result"
+         :options="{ displayLong: true }">
+       </badge-entity>
+       <on-the-fly
+           type="thirdparty"
+           v-bind:id="item.result.id"
+           action="show">
+       </on-the-fly>
     </div>
 </template>
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
+import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
 
 const i18n = {
   messages: {
@@ -60,7 +50,8 @@ const i18n = {
 export default {
    name: 'SuggestionThirdParty',
    components: {
-      OnTheFly
+      OnTheFly,
+      BadgeEntity
    },
    props: ['item'],
    i18n,

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

@@ -23,7 +23,11 @@
                    </span>
 
                    <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
-                   <span v-if="options.addEntity ==  true" class="badge rounded-pill bg-person">{{ $t('renderbox.person') }}</span>
+
+                   <badge-entity v-if="options.addEntity === true"
+                      :entity="person"
+                      :options="{ displayLong: options.entityDisplayLong }">
+                   </badge-entity>
 
                 </div>
 
@@ -139,12 +143,14 @@
 import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
+import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
 
 export default {
     name: "PersonRenderBox",
     components: {
         AddressRenderBox,
-        Confidential
+        Confidential,
+        BadgeEntity
     },
     props: ['person', 'options', 'render', 'returnPath'],
     computed: {

src/Bundle/ChillThirdPartyBundle/Resources/public/chill/chillthirdparty.scss

@@ -1,38 +1,11 @@
 @import 'ChillMainAssets/module/bootstrap/shared';
 
 /// Specific badge rounded-pill
-/// bg-thirdparty-child -> Personne de contact
-/// bg-thirdparty-company -> Personne morale
-/// bg-thirdparty-contact -> Personne physique
-
-.tp-type {
-    .badge.rounded-pill {
-        &[class*='bg-thirdparty-'] {
-            //@extend .$chill-ll-gray;
-            background-color: $chill-ll-gray;
-            color: $chill-pink;
-        }
-
-        &.bg-thirdparty-default {
-            display: inline-block;
-        }
-        &.bg-thirdparty-child,
-        &.bg-thirdparty-company,
-        &.bg-thirdparty-contact {
-            display: none;
-        }
-    }
-    &:hover {
-        .badge.rounded-pill {
-            &.bg-thirdparty-default {
-                display: none;
-            }
-            &.bg-thirdparty-child,
-            &.bg-thirdparty-company,
-            &.bg-thirdparty-contact {
-                display: inline-block;
-            }
-        }
+.badge.rounded-pill {
+    &.bg-thirdparty {
+        //@extend .$chill-ll-gray;
+        background-color: $chill-ll-gray;
+        color: $chill-pink;
     }
 }
 

src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue

@@ -12,24 +12,14 @@
                     </a>
                     <span class="name" v-else>{{ thirdparty.text }}</span>
 
-                    <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + thirdparty.id">
+                    <span v-if="options.addId === true" class="id-number" :title="'n° ' + thirdparty.id">
                         {{ thirdparty.id }}
                     </span>
 
-                    <span class="tp-type" v-if="options.addEntity === true">
-                        <span class="badge rounded-pill bg-thirdparty-default">
-                            {{ $t('renderbox.type.thirdparty')}}
-                        </span>
-                        <span class="badge rounded-pill bg-thirdparty-child" v-if="thirdparty.kind === 'child'">
-                            {{ $t('tparty.child')}}
-                        </span>
-                        <span class="badge rounded-pill bg-thirdparty-company" v-else-if="thirdparty.kind === 'company'">
-                           {{ $t('tparty.company')}}
-                        </span>
-                        <span class="badge rounded-pill bg-thirdparty-contact" v-else>
-                            {{ $t('tparty.contact')}}
-                        </span>
-                    </span>
+                    <badge-entity v-if="options.addEntity === true"
+                        :entity="thirdparty"
+                        :options="{ displayLong: options.entityDisplayLong }">
+                    </badge-entity>
                 </div>
 
                 <div v-if="hasParent">
@@ -95,26 +85,15 @@
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
 import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
-
-const i18n = {
-    messages: {
-        fr: {
-            tparty: {
-                child: "Personne de contact",
-                company: "Personne morale",
-                contact: "Personne physique",
-            }
-        }
-    }
-};
+import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
 
 export default {
     name: "ThirdPartyRenderBox",
     components: {
         AddressRenderBox,
-        Confidential
+        Confidential,
+        BadgeEntity
     },
-    i18n,
     props: ['thirdparty', 'options'],
     computed: {
         isMultiline: function() {

src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue

@@ -5,7 +5,8 @@
             :thirdparty="thirdparty"
             :options="{
                addInfo: true,
-               addEntity: false,
+               addEntity: true,
+               entityDisplayLong: true,
                addAltNames: true,
                addId: true,
                addLink: false,