first conditionalities added analog to twig template

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue

@@ -5,8 +5,16 @@
    <div>
       <label class="col-form-label">{{ $tc('persons_associated.counter', counter) }}</label>
    </div>
+
+   <participation-item
+   v-for="participation in participations"
+   v-bind:participation="participation"
+   v-bind:key="participation.id"
+   @remove="removeParticipation"
+   @close="closeParticipation">
+   </participation-item>
    
-   <table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0">
+   <!-- <table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0">
       <thead>
          <tr>
             <th class="chill-orange">{{ $t('persons_associated.name') }}</th>
@@ -24,7 +32,7 @@
             @close="closeParticipation">
          </participation-item>
       </tbody>
-   </table>
+   </table> -->
 
    <div>
       <add-persons 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue

@@ -1,8 +1,21 @@
 <template>
-<tr>
+
+   <person-render-box
+      :options="{
+               addInfo : false,
+               addId : true,
+               addEntity: false,
+               addLink: false,
+               addAltNames: false,
+               addAge : false,
+               hLevel : 1
+            }"
+      :participation="participation"
+   ></person-render-box>
+<!-- <tr>
    <td>
-      <!-- {{ participation.person.firstName }}
+      {{ participation.person.firstName }}
-      {{ participation.person.lastName }} -->
+      {{ participation.person.lastName }}
       <person-render-box
          v-bind:options="options"
          v-bind:participation="participation"
@@ -30,12 +43,12 @@
                action="edit">
             </on-the-fly>
          </li>
-         <!--li>
+         li>
             <button class="btn btn-delete"
                :title="$t('action.delete')" 
                @click.prevent="$emit('remove', participation)">
             </button>
-         </li-->
+         </li
          <li>
             <button v-if="!participation.endDate"
                class="btn btn-remove"
@@ -46,7 +59,7 @@
          </li>
       </ul>
    </td>
-</tr>
+</tr> -->
 </template>
 
 <script>
@@ -66,7 +79,7 @@ export default {
          PersonRenderBox: {
             participation : 'participation',
             options : {
-               addInfo : true,
+               addInfo : false,
                addId : true,
                addAge : false,
                hLevel : 1

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

@@ -8,13 +8,13 @@
 
                 <!-- NAME TAG -->
                 <div class="denomination **h_level**">
-
+                
                     <!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
-                    <a href="#">
+                    <a v-if="this.options.addLink ==  true" href="#">
                         <span class="firstname">{{ participation.person.firstName }}</span>
                         <span class="lastname">{{ participation.person.lastName }}</span>
                         <!-- IF ALT NAMES -->
-                        <span class="altnames">
+                        <span v-if="this.options.addAltNames ==  true" class="altnames">
                             <!-- LOOP THROUGH ALT NAMES -->
                             <span class="altname altname-**key**">**label**</span>
                             <!-- END LOOP -->
@@ -25,21 +25,21 @@
                     <span class="firstname">{{ participation.person.firstName }}</span>
                     <span class="lastname">{{ participation.person.lastName }}</span>
                     <!-- IF ALT NAMES -->
-                    <span class="altnames">
+                    <span v-if="this.options.addAltNames ==  true" class="altnames">
                         <!-- LOOP THROUGH ALT NAMES -->
                         <span class="altname altname-**key**">**label**</span>
                         <!-- END LOOP -->
                     </span>
 
                     <!-- IF ADD ENTITY OPTION -->
-                    <span class="badge rounded-pill bg-secondary">**Person object?**</span>
+                    <span v-if="this.options.addEntity ==  true" class="badge rounded-pill bg-secondary">Person</span>
-                    <span class="id-number" title="n° participation.person.id">{{ participation.person.id }}</span>
+                    <span v-if="this.options.addId ==  true" class="id-number" title="n° participation.person.id">{{ participation.person.id }}</span>
 
                 </div>
                 <!-- END NAME TAG -->
 
                 <!-- BIRTHDATE / DEATHDATE AND AGE -->
-                <p class="moreinfo">
+                <p v-if="this.options.addInfo == true" class="moreinfo">
                     <i class="fa fa-fw **gender**" title="**gender title**"></i>
                     <time datetime="13/05/1867" title="**birthdate**">
                         {{ participation.person.birthdate }}
@@ -86,18 +86,16 @@
 <script>
 export default {
     name: "PersonRenderBox",
-    props: [
+    props: ['participation', 'options'],  
-        'options',
-        'participation'
-    ],
-    data() {
-        return {
-
-            }
-    },
-    computed: {
-    },  
 }
 </script>
 
+<style>
+
+.item-row{
+    border: 1px solid black;
+}
+
+</style>
+