Badge-thirdparty

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

@@ -1,21 +1,22 @@
 <template>
    <div class="list-item" :class="{ checked: isChecked }">
-         
+
+      <label>
          <div>
-            <input 
-               v-bind:type="type" 
+            <input
+               v-bind:type="type"
                v-model="selected"
                name="item"
                v-bind:id="item"
                v-bind:value="setValueByType(item, type)" />
          </div>
-            
-         <suggestion-person 
+
+         <suggestion-person
             v-if="item.result.type === 'person'"
             v-bind:item="item">
          </suggestion-person>
-         
-         <suggestion-third-party 
+
+         <suggestion-third-party
             v-if="item.result.type === 'thirdparty'"
             v-bind:item="item">
          </suggestion-third-party>
@@ -24,6 +25,7 @@
             v-if="item.result.type === 'user'"
             v-bind:item="item">
          </suggestion-user>
+      </label>
 
    </div>
 </template>
@@ -41,7 +43,7 @@ export default {
       SuggestionUser,
    },
    props: [
-      'item', 
+      'item',
       'search',
       'type'
    ],
@@ -69,7 +71,7 @@ export default {
 </script>
 
 <style lang="scss">
-   div.results {   
+   div.results {
       div.list-item {
          padding: 0.4em 0.8em;
          display: flex;
@@ -78,32 +80,36 @@ export default {
             background-color: #ececec;
             border-bottom: 1px dotted #8b8b8b;
          }
-         div.container {
-            & > input {
-               margin-right: 0.8em;
+         label {
+            display: inline-flex;
+            width: 100%;
+            div.container {
+               & > input {
+                  margin-right: 0.8em;
+               }
+               span:not(.name) {
+                  margin-left: 0.5em;
+                  opacity: 0.5;
+                  font-size: 90%;
+                  font-style: italic;
+               }
             }
-            span:not(.name) {
-               margin-left: 0.5em;
-               opacity: 0.5;
-               font-size: 90%;
-               font-style: italic;
+            div.right_actions {
+               margin: 0 0 0 auto;
+               display: flex;
+               align-items: flex-end;
+               & > * {
+                  margin-left: 0.5em;
+                  align-self: baseline;
+               }
+
+               a.btn {
+                  border: 1px solid lightgrey;
+                  font-size: 70%;
+                  padding: 4px;
+               }
             }
          }
-         div.right_actions {
-            margin: 0 0 0 auto;
-            display: flex;
-            align-items: flex-end;
-            & > * {
-               margin-left: 0.5em;
-               align-self: baseline;
-            }
-            
-            a.btn {
-               border: 1px solid lightgrey;
-               font-size: 70%;
-               padding: 4px;
-            } 
-         }
       }
    }
 </style>

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 bg-thirdparty-child" v-if="item.result.kind == 'child'">
-        {{ $t('thirdparty.child')}}
-     </span>
-      <span class="badge bg-thirdparty-company" v-else-if="item.result.kind == 'company'">
-       {{ $t('thirdparty.company')}}
-      </span>
-      <span class="badge 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

@@ -24,7 +24,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-secondary">{{ $t('renderbox.person') }}</span>
+
+                   <badge-entity v-if="options.addEntity === true"
+                      :entity="person"
+                      :options="{ displayLong: options.entityDisplayLong }">
+                   </badge-entity>
 
                 </div>
 
@@ -140,12 +144,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: {