#192 custom-zone added + no_data message

src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js

@@ -75,7 +75,7 @@ const messages = {
             man: "Né le",
             woman: "Née le"
          } ,
-         no_information: "Pas d'information",
+         no_data: "Aucune information renseignée",
          type: {
             thirdparty: "Tiers",
             person: "Usager"

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

@@ -11,19 +11,19 @@
                    <a v-if="this.options.addLink ==  true" href="#">
                         <span class="firstname">{{ person.firstName }}</span>
                         <span class="lastname">{{ person.lastName }}</span>
-                        <span v-if="this.options.addAltNames ==  true" class="altnames">
+                        <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
                             <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
                         </span>
                     </a>
 
                    <span class="firstname">{{ person.firstName }}</span>
                    <span class="lastname">{{ person.lastName }}</span>
-                   <span v-if="this.options.addAltNames ==  true" class="altnames">
+                   <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
                        <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
                    </span>
 
-                   <span v-if="this.options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
+                   <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
-                   <span v-if="this.options.addEntity ==  true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.person') }}</span>
+                   <span v-if="options.addEntity ==  true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.person') }}</span>
 
                 </div>
 
@@ -35,25 +35,51 @@
                     <time v-else-if="person.deathdate" datetime="{{ person.deathdate }}" title="{{ person.deathdate }}">
                         {{ birthdate }} - {{ deathdate }}
                     </time>
-                    <span class="age">{{ person.age }}</span>
+                    <!-- <span class="age">{{ person.age }}</span> -->
                 </p>
             </div>
         </div>
 
         <div class="item-col separator">
             <ul class="list-content fa-ul">
+                
                 <li v-if="person.current_household_address">
                     <i class="fa fa-li fa-map-marker"></i>
                     <show-address :address="person.current_household_address" :isMultiline="false"></show-address>
                 </li>
+                <li v-else-if="options.addNoData">
+                    <i class="fa fa-li fa-map-marker"></i>
+                    <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
+
                 <li v-if="person.mobilenumber">
                     <i class="fa fa-li fa-mobile"></i>
                     <a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
                 </li>
-                <li v-else-if="person.phonenumber">
+                <li v-else-if="options.addNoData">
+                    <i class="fa fa-li fa-mobile"></i>
+                    <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
+                <li v-if="person.phonenumber">
                     <i class="fa fa-li fa-phone"></i>
                     <a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
                 </li>
+                <li v-else-if="options.addNoData">
+                    <i class="fa fa-li fa-phone"></i>
+                    <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
+                
+                <li v-if="person.center && options.addCenter">
+                    <i class="fa fa-li fa-long-arrow-right"></i>
+                    {{ person.center.name }}
+                </li>
+                <li v-else-if="options.addNoData">
+                    <i class="fa fa-li fa-long-arrow-right"></i>
+                    <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
+                
+                <slot name="custom-zone"></slot>
+
             </ul>
 
             <slot name="record-actions"></slot>
@@ -107,6 +133,10 @@ export default {
 .lastname:before{
     content: " "
 }
+
+div.item-col:first-child{
+    width: 33%;
+}
 </style>
 
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue

@@ -1,63 +1,23 @@
 <template>
 <div v-if="action === 'show'">
-
    <div class="flex-table">
       <!-- {{ person }} -->
-      <!-- <person-render-box
+      <person-render-box
          :person="person"
          :options="{
             addInfo: true,
             addEntity: false,
-            addAltNames: false,
+            addAltNames: true,
-            addId: false,
+            addId: true,
             addLink: false,
-            hLevel: 3
+            hLevel: 3,
+            addCenter: true,
+            addNoData: true
          }"
-      ></person-render-box> -->
+      ></person-render-box>
-      <div class="item-bloc">
-         <div class="item-row">
-            <div class="item-col">
-               <h3 :title="person.id">{{ person.text }}</h3>
-               <p>
-                  <i class="fa fa-fw"
-                     :class="genderClass">
-                  </i>
-                  <span v-if="person.birthdate">
-                     {{ $t('person.born', { e: feminized }) }}
-                     {{ $d(person.birthdate.datetime, 'short') }}
-                  </span>
-               </p>
-            </div>
-            <div class="item-col">
-               <dl class="list-content">
-                  <dt>{{ $t('person.firstname') }}</dt>
-                  <dd>{{ person.firstName }}</dd>
-
-                  <dt>{{ $t('person.lastname') }}</dt>
-                  <dd>{{ person.lastName }}</dd>
-
-                  <dt>{{ $t('person.altnames') }}</dt>
-                  <dd>{{ person.altNames }}</dd>
-
-                  <span v-if="person.center">
-                     <dt>{{ $t('person.center_name') }}</dt>
-                     <dd :title="person.center.id">{{ person.center.name }}</dd>
-                  </span>
-
-                  <dt>{{ $t('person.phonenumber') }}</dt>
-                  <dd>{{ person.phonenumber }}</dd>
-
-                  <dt>{{ $t('person.mobilenumber') }}</dt>
-                  <dd>{{ person.mobilenumber }}</dd>
-
-                  <dt>{{ $t('person.gender.title') }}</dt>
-               </dl>
-            </div>
-         </div>
-      </div>
    </div>
-
 </div>
+
 <div v-else-if="action === 'edit' || action === 'create'">
 
    <div class="form-floating mb-3">
@@ -214,10 +174,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-ul {
-   li::marker {
-   }
-}
 div.flex-table {
    div.item-bloc {
       div.item-row {