create style for badge 3party and introduce in ThirdPartyRenderBox.vue

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

@@ -19,13 +19,13 @@
     </div>
     <div class="right_actions">
 
-     <span class="badge bg-chill-blue" v-if="item.result.kind == 'child'">
+     <span class="badge bg-thirdparty-child" v-if="item.result.kind == 'child'">
         {{ $t('thirdparty.child')}}
      </span>
-      <span class="badge bg-info" v-else-if="item.result.kind == 'company'">
+      <span class="badge bg-thirdparty-company" v-else-if="item.result.kind == 'company'">
        {{ $t('thirdparty.company')}}
       </span>
-      <span class="badge bg-secondary" v-else="item.result.kind == 'contact'">
+      <span class="badge bg-thirdparty-contact" v-else="item.result.kind == 'contact'">
         {{ $t('thirdparty.contact')}}
       </span>
 

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

@@ -0,0 +1,16 @@
+@import 'ChillMainAssets/module/bootstrap/shared';
+
+.badge {
+    &.bg-thirdparty-company {
+        //@extend .bg-info;
+        background-color: $yellow;
+    }
+    &.bg-thirdparty-child {
+        //@extend .bg-chill-blue;
+        background-color: $chill-blue;
+    }
+    &.bg-thirdparty-contact {
+        //@extedn .bg-secondary;
+        background-color: $secondary;
+    }
+}

src/Bundle/ChillThirdPartyBundle/Resources/public/chill/index.js

@@ -0,0 +1 @@
+require('./chillthirdparty.scss');

src/Bundle/ChillThirdPartyBundle/Resources/public/page/index/index.js

@@ -1,2 +1,2 @@
-require('./chillthirdparty.scss');
+require('./index_3party.scss');
 

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

@@ -13,6 +13,16 @@
                     </a>
                     <span class="name">{{ thirdparty.text }}</span>
 
+                    <span class="badge bg-thirdparty-child" v-if="thirdparty.kind == 'child'">
+                        {{ $t('thirdparty.child')}}
+                    </span>
+                    <span class="badge bg-thirdparty-company" v-else-if="thirdparty.kind == 'company'">
+                       {{ $t('thirdparty.company')}}
+                    </span>
+                    <span class="badge bg-thirdparty-contact" v-else="thirdparty.kind == 'contact'">
+                        {{ $t('thirdparty.contact')}}
+                    </span>
+
                     <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + thirdparty.id">{{ thirdparty.id }}</span>
                     <span v-if="options.addEntity ==  true && thirdparty.type === 'thirdparty'" class="badge rounded-pill bg-secondary">{{ $t('renderbox.type.thirdparty') }}</span>
 
@@ -57,11 +67,23 @@
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
 
+const i18n = {
+    messages: {
+        fr: {
+            tparty: {
+                contact: "Personne physique",
+                company: "Personne morale"
+            }
+        }
+    }
+};
+
 export default {
     name: "ThirdPartyRenderBox",
     components: {
         AddressRenderBox
     },
+    i18n,
     props: ['thirdparty', 'options'],
     computed: {
         isMultiline: function() {

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

@@ -24,13 +24,17 @@
            <div class="form-check">
                <input class="form-check-input mt-0" type="radio" v-model="kind" value="company" id="tpartyKindInstitution">
                <label for="tpartyKindInstitution" class="required">
-                   {{ $t('tparty.company')}}
+                   <span class="badge bg-thirdparty-company">
+                       {{ $t('tparty.company')}}
+                   </span>
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input mt-0" type="radio" v-model="kind" value="contact" id="tpartyKindContact">
                <label for="tpartyKindContact" class="required">
-                   {{ $t('tparty.contact')}}
+                   <span class="badge bg-thirdparty-contact">
+                       {{ $t('tparty.contact')}}
+                   </span>
                </label>
            </div>
        </div>

src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig

@@ -81,13 +81,7 @@
     <div class="item-row entity-bloc">
         <div class="item-col">
             {{ _self.label(thirdparty, options) }}
-            {% if thirdparty.kind == 'company' %}
+             <span class="badge bg-thirdparty-{{ thirdparty.kind }}">{{ ('thirdparty.' ~ thirdparty.kind)|trans }}</span>
-                <span class="badge bg-info">{{ 'thirdparty.company'|trans }}</span>
-            {% elseif thirdparty.kind == 'child' %}
-                <span class="badge bg-chill-blue">{{ 'thirdparty.Child'|trans }}</span>
-            {% elseif thirdparty.kind == 'contact' %}
-                <span class="badge bg-secondary">{{ 'thirdparty.contact'|trans }}</span>
-            {% endif %}
         </div>
         <div class="item-col">
             <ul class="list-content fa-ul">

src/Bundle/ChillThirdPartyBundle/chill.webpack.config.js

@@ -5,6 +5,8 @@ module.exports = function(encore, entries)
         ChillThirdPartyAssets: __dirname + '/Resources/public'
     });
 
+    entries.push(__dirname + '/Resources/public/chill/index.js');
+
     encore.addEntry(
         'page_3party_3party_index',
         __dirname + '/Resources/public/page/index/index.js'

src/Bundle/ChillThirdPartyBundle/translations/messages.fr.yml

@@ -16,7 +16,9 @@ thirdparty.NameCompany:  Service/Département
 thirdparty.Acronym:  Sigle
 thirdparty.Categories:  Catégories
 thirdparty.Child:  Personne de contact
+thirdparty.child:  Personne de contact
 thirdparty.Children:  Personnes de contact
+thirdparty.children:  Personnes de contact
 thirdparty.Parent:  Tiers institutionnel
 thirdparty.Parents:  Tiers institutionnels
 thirdparty.Civility:  Civilité