Merge branch 'issue366_modal_thirdparty' into 'master'

Thirdparty renderbox improvements

See merge request Chill-Projet/chill-bundles!356

CHANGELOG.md

@@ -42,6 +42,11 @@ and this project adheres to
 * [parcours]: Order social activities and only display most recent three in parcours resumé (https://gitlab.com/champs-libres/departement-de-la-vendee/accent-suivi-developpement/-/issues/481)
 * [3party]: 3party: redirect to parent when contact (child) is opened in view page
 * [parcours / addresses]: launch an event when a person change address (either through changing household or because the household is associated to a new address). If the person is localising a course, the course location go back to a temporarily address.
+* [thirdparty]: address/phonenumber/email/fonction displayed in thirdpartyrenderbox (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/401)
+* [thirdparty_contact]: in search results the 'qualité' is displayed (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/465)
+* [bug]: fix confidential toggle of address in thirdpartyrenderbox (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/460)
+
+## Test releases
 * Creation of PickCivilityType, and implementation in PersonType and ThirdpartyType
 * [renderbox]: Fix display of address (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/462)
 * [renderbox]: Add email in personRenderBox, this was not yet displayed.

src/Bundle/ChillMainBundle/Resources/public/module/blur/blur.scss

@@ -1,10 +1,15 @@
 .confidential{
     display: flex;
+    position: relative;
 }
 .toggle{
     margin-left: 30px;
     margin-top: 5px;
     cursor: pointer;
+    position: absolute;
+    bottom: 0px;
+    right: 10px;
+    z-index: 5;
 }
 .blur {
     -webkit-filter: blur(5px);

src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue

@@ -1,11 +1,11 @@
 <template>
 
-    <a v-if="isDisplayBadge" @click="openModal">
+   <a v-if="isDisplayBadge" @click="openModal">
-        <span class="chill-entity" :class="badgeType">
+      <span class="chill-entity" :class="badgeType">
-            {{ buttonText }}<span v-if="isDead"> (‡)</span>
+         {{ buttonText }}<span v-if="isDead"> (‡)</span>
-        </span>
+      </span>
-    </a>
+   </a>
-    <a v-else class="btn btn-sm" target="_blank"
+   <a v-else class="btn btn-sm" target="_blank"
       :class="classAction"
       :title="$t(titleAction)"
       @click="openModal">
@@ -115,7 +115,6 @@ export default {
    },
    computed: {
       hasResourceComment() {
-          //console.log('hasResourceComment', this.parent);
          return (typeof this.parent !== 'undefined' && this.parent !== null)
             && this.action === 'show'
             && this.parent.type === 'accompanying_period_resource'

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

@@ -1,6 +1,6 @@
 <template>
-    <div :class="classes">
+    <div class="confidential">
-        <div class="confidential-content" :class="{ 'blur': isBlurred }">
+        <div :class="{ 'blur': isBlurred }">
             <slot name="confidential-content"></slot>
         </div>
         <div>
@@ -29,18 +29,5 @@ export default {
 <style scoped lang='scss'>
     .confidential{
         align-items: center;
-        display: flex;
-    }
-    .toggle{
-        margin-top: 28px;
-        cursor: pointer;
-        display: block;
-        float: right;
-        margin-right: 20px;
-    }
-    .blur {
-        -webkit-filter: blur(5px);
-        -moz-filter: blur(5px);
-        filter: blur(5px);
     }
 </style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue

@@ -27,7 +27,6 @@
                      </p>
                   </div>
                </template>
-
             </confidential>
          </div>
 
@@ -94,6 +93,7 @@ export default {
          return this.isMultiline === true ? "multiline" : "";
       },
       isConfidential() {
+         console.log(this.address.confidential)
          return this.address.confidential;
       }
    }

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

@@ -1,6 +1,7 @@
 <template>
     <div class="container tpartycontainer">
       <div class="tparty-identification">
+        <span v-if="item.result.profession" class="profession">{{ item.result.profession.name.fr }}</span>
         <span class="name">
           {{ item.result.text }}&nbsp;
         </span>
@@ -110,19 +111,24 @@ export default {
 
 <style lang="scss" scoped>
 .tpartycontainer {
- .tpartyparent {
+  .tpartyparent {
-    .name {
+      .name {
-      font-weight: bold;
+        font-weight: bold;
-      font-variant: all-small-caps;
+        font-variant: all-small-caps;
+      }
+  }
+  .tparty-identification {
+    span:not(.name) {
+      margin-left: 0.5em;
+      opacity: 0.5;
+      font-size: 90%;
+      font-style: italic;
     }
- }
+    .profession {
- .tparty-identification {
+      font-weight: 800;
-   span:not(.name) {
+      color: black;
-     margin-left: 0.5em;
+      font-style: normal !important;
-     opacity: 0.5;
+    }
-     font-size: 90%;
+  }
-     font-style: italic;
-   }
- }
 }
 </style>

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

@@ -113,6 +113,15 @@
                             <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
                         </li>
 
+                        <li v-if="person.email">
+                            <i class="fa fa-li fa-envelope-o"></i>
+                            <a :href="'mailto: ' + person.email">{{ person.email }}</a>
+                        </li>
+                        <li v-else-if="options.addNoData">
+                            <i class="fa fa-li fa-envelope-o"></i>
+                            <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                        </li>
+
                         <li v-if="person.centers !== undefined && person.centers.length > 0 && options.addCenter">
                             <i class="fa fa-li fa-long-arrow-right"></i>
                             <template v-for="c in person.centers">{{ c.name }}</template>

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

@@ -34,33 +34,45 @@
                     <slot name="record-actions"></slot>
                 </div>
                 <ul class="list-content fa-ul">
+                    <li v-if="getProfession.length > 0">
+                        <i class="fa fa-li fa-id-card"></i>
+                        <p><span v-for="p in getProfession" :key="p" class="list-item">{{ p[0].toUpperCase() + p.slice(1).toLowerCase() }}</span></p>
+                    </li>
                     <li v-if="hasParent">
                         <i class="fa fa-li fa-hand-o-right"></i>
                         <b class="me-2">{{ $t('child_of') }}</b>
-                        <span class="chill-entity badge-thirdparty">{{ thirdparty.parent.text }}</span>
+                    <on-the-fly
+                        :type="thirdparty.parent.type"
+                        :id="thirdparty.parent.id"
+                        :buttonText="thirdparty.parent.text"
+                        :displayBadge="'true' === 'true'"
+                        action="show">
+                    </on-the-fly>
                     </li>
                     <!-- TODO hasChildren
                         NB: we cannot call on-the-fly from RenderBox. See error message in previous version of this file.
                     -->
                 </ul>
-                <confidential v-if="thirdparty.contactDataAnonymous">
+                <div v-if="thirdparty.contactDataAnonymous">
-                    <template v-slot:confidential-content>
+                    <confidential>
-                        <ul class="list-content fa-ul">
+                        <template v-slot:confidential-content>
-                            <li v-if="thirdparty.address">
+                            <ul class="list-content fa-ul">
-                            <i class="fa fa-li fa-map-marker"></i>
+                                <li v-if="thirdparty.address">
-                            <address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box>
+                                <i class="fa fa-li fa-map-marker"></i>
-                            </li>
+                                <address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box>
-                            <li v-if="thirdparty.phonenumber">
+                                </li>
-                            <i class="fa fa-li fa-mobile"></i>
+                                <li v-if="thirdparty.phonenumber">
-                            <a :href="'tel: ' + thirdparty.phonenumber">{{ thirdparty.phonenumber }}</a>
+                                <i class="fa fa-li fa-mobile"></i>
-                            </li>
+                                <a :href="'tel: ' + thirdparty.phonenumber">{{ thirdparty.phonenumber }}</a>
-                            <li v-if="thirdparty.email">
+                                </li>
-                            <i class="fa fa-li fa-envelope-o"></i>
+                                <li v-if="thirdparty.email">
-                            <a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
+                                <i class="fa fa-li fa-envelope-o"></i>
-                            </li>
+                                <a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
-                        </ul>
+                                </li>
-                    </template>
+                            </ul>
-                </confidential>
+                        </template>
+                    </confidential>
+                </div>
                 <ul v-else class="list-content fa-ul">
                     <li v-if="thirdparty.address">
                         <i class="fa fa-li fa-map-marker"></i>
@@ -88,10 +100,8 @@
 
 <script>
 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';
 import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
-//import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 
 export default {
     name: "ThirdPartyRenderBox",
@@ -99,7 +109,10 @@ export default {
         AddressRenderBox,
         Confidential,
         BadgeEntity,
-        //OnTheFly
+    },
+    // To avoid components recursively invoking eachother resolve OnTheFly component here
+    beforeCreate() {
+        this.$options.components.OnTheFly = require('ChillMainAssets/vuejs/OnTheFly/components/OnTheFly').default;
     },
     i18n: {
         messages: {
@@ -120,6 +133,18 @@ export default {
         hasParent() {
             return !(this.thirdparty.parent === null || this.thirdparty.parent === undefined);
         },
+        getProfession() {
+            let profession = []
+            if (this.hasParent && this.thirdparty.profession) {
+                profession.push(this.thirdparty.profession.name.fr)
+                return profession;
+            }
+
+            if (!this.hasParent && this.thirdparty.category) {
+                profession = this.thirdparty.category.map((category) => category.text);
+            }
+            return profession;
+        }
         /* TODO need backend normalizer to serve children without circular reference
         hasChildren() {
             //console.log(this.thirdparty.activeChildren.length > 0)
@@ -139,6 +164,15 @@ export default {
         font-variant: all-small-caps;
     }
 }
+
+.list-item {
+    &::after {
+        content: " | ";
+    }
+    &:last-child::after {
+        content: ""
+    }
+}
 </style>
 
 

src/Bundle/ChillThirdPartyBundle/Serializer/Normalizer/ThirdPartyNormalizer.php

@@ -11,7 +11,9 @@ declare(strict_types=1);
 
 namespace Chill\ThirdPartyBundle\Serializer\Normalizer;
 
+use Chill\MainBundle\Templating\TranslatableStringHelperInterface;
 use Chill\ThirdPartyBundle\Entity\ThirdParty;
+use Chill\ThirdPartyBundle\Entity\ThirdPartyCategory;
 use Chill\ThirdPartyBundle\Templating\Entity\ThirdPartyRender;
 use Symfony\Component\Serializer\Normalizer\NormalizerAwareInterface;
 use Symfony\Component\Serializer\Normalizer\NormalizerAwareTrait;
@@ -23,9 +25,14 @@ class ThirdPartyNormalizer implements NormalizerAwareInterface, NormalizerInterf
 
     private ThirdPartyRender $thirdPartyRender;
 
-    public function __construct(ThirdPartyRender $thirdPartyRender)
+    private TranslatableStringHelperInterface $translatableStringHelper;
-    {
+
+    public function __construct(
+        ThirdPartyRender $thirdPartyRender,
+        TranslatableStringHelperInterface $translatableStringHelper
+    ) {
         $this->thirdPartyRender = $thirdPartyRender;
+        $this->translatableStringHelper = $translatableStringHelper;
     }
 
     /**
@@ -40,13 +47,26 @@ class ThirdPartyNormalizer implements NormalizerAwareInterface, NormalizerInterf
             'text' => $this->thirdPartyRender->renderString($thirdParty, []),
             'id' => $thirdParty->getId(),
             'kind' => $thirdParty->getKind(),
+            'category' => array_map(function ($el) {
+                if ($el instanceof ThirdPartyCategory) {
+                    return [
+                        'text' => $this->translatableStringHelper->localize($el->getName()),
+                        'type' => 'thirdparty_category',
+                    ];
+                }
+
+                return [
+                    'text' => $el,
+                    'type' => 'thirdparty_kind',
+                ];
+            }, $thirdParty->getTypesAndCategories()),
+            'profession' => $this->normalizer->normalize($thirdParty->getProfession(), $format, $context),
             'address' => $this->normalizer->normalize($thirdParty->getAddress(), $format, ['address_rendering' => 'short']),
             'phonenumber' => $thirdParty->getTelephone(),
             'email' => $thirdParty->getEmail(),
             'isChild' => $thirdParty->isChild(),
             'parent' => $this->normalizer->normalize($thirdParty->getParent(), $format, $context),
             'civility' => $this->normalizer->normalize($thirdParty->getCivility(), $format, $context),
-            'profession' => $this->normalizer->normalize($thirdParty->getProfession(), $format, $context),
             'contactDataAnonymous' => $thirdParty->isContactDataAnonymous(),
         ];
     }