From b888211ef95ae7a6295b5debbc367c09d1507de3 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 6 Dec 2021 15:41:53 +0100
Subject: [PATCH] proposition for person/thirparty rounded-pill badge
 appearance

---
 .../Resources/public/chill/scss/badge.scss    |  9 +++++-
 .../_components/Entity/PersonRenderBox.vue    |  2 +-
 .../public/chill/chillthirdparty.scss         | 25 +++++++++------
 .../Entity/ThirdPartyRenderBox.vue            | 32 ++++++++++---------
 4 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
index 39dbb4e55..acf19205f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
@@ -162,6 +162,13 @@ div.activity-list {
 }
 
 /*
+* Specific badge rounded-pill
 */
-
+.badge {
+    &.bg-person {
+        //@extend .$chill-ll-gray;
+        background-color: $chill-ll-gray;
+        color: $chill-green;
+    }
+}
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
index ab7074ffc..941836537 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -23,7 +23,7 @@
                    </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>
+                   <span v-if="options.addEntity ==  true" class="badge rounded-pill bg-person">{{ $t('renderbox.person') }}</span>
 
                 </div>
 
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/chillthirdparty.scss b/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/chillthirdparty.scss
index 70c2bfccf..988426b19 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/chillthirdparty.scss
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/chillthirdparty.scss
@@ -1,21 +1,28 @@
 @import 'ChillMainAssets/module/bootstrap/shared';
 
+/// Specific badge rounded-pill
 .badge {
-    &.bg-thirdparty-company {
-        //@extend .bg-info;
-        background-color: $yellow;
-    }
+    // Personne de contact
     &.bg-thirdparty-child {
-        //@extend .bg-chill-blue;
-        background-color: $chill-blue;
+        //@extend .$chill-ll-gray;
+        background-color: $chill-ll-gray;
+        color: $chill-pink;
     }
+    // Personne morale
+    &.bg-thirdparty-company {
+        //@extend .$chill-ll-gray;
+        background-color: $chill-ll-gray;
+        color: $chill-pink;
+    }
+    // Personne physique
     &.bg-thirdparty-contact {
-        //@extend .bg-secondary;
-        background-color: $secondary;
+        //@extend .$chill-ll-gray;
+        background-color: $chill-ll-gray;
+        color: $chill-pink;
     }
 }
 
-///
+/// force first column width in list
 div.thirdparty-list {
     div.flex-table {
         div.item-bloc {
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
index 301007e75..11b78b507 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
@@ -7,24 +7,26 @@
             <div class="entity-label">
                 <div :class="'denomination h' + options.hLevel">
 
-                    <a v-if="this.options.addLink ===  true" href="#">
+                    <a v-if="this.options.addLink === true" href="#">
                         <span class="name">{{ thirdparty.text }}</span>
                     </a>
-                    <span class="name">{{ thirdparty.text }}</span>
+                    <span class="name" v-else>{{ thirdparty.text }}</span>
 
-                    <span class="badge rounded-pill bg-thirdparty-child" v-if="thirdparty.kind == 'child'">
-                        {{ $t('thirdparty.child')}}
-                    </span>
-                    <span class="badge rounded-pill bg-thirdparty-company" v-else-if="thirdparty.kind == 'company'">
-                       {{ $t('thirdparty.company')}}
-                    </span>
-                    <span class="badge rounded-pill bg-thirdparty-contact" v-else>
-                        {{ $t('thirdparty.contact')}}
+                    <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + thirdparty.id">
+                        {{ thirdparty.id }}
                     </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>
-
+                    <template v-if="options.addEntity === true">
+                        <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>
+                    </template>
                 </div>
 
                 <div v-if="hasParent">
@@ -38,7 +40,6 @@
             </div>
         </div>
 
-
         <div class="item-col">
            <div class="float-button bottom">
               <div class="box">
@@ -96,8 +97,9 @@ const i18n = {
     messages: {
         fr: {
             tparty: {
+                child: "Personne de contact",
+                company: "Personne morale",
                 contact: "Personne physique",
-                company: "Personne morale"
             }
         }
     }