try badgeEntity with displayLong option

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>
@@ -8,32 +7,33 @@
          {{ $d(item.result.birthdate.datetime, 'short') }}
        </span>
       <span class="location" v-if="hasAddress">
-         {{ item.result.current_household_address.text }} - 
+         {{ 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>
+      <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: {