OnTheFly: adding displayBadge option to replace button by badge

When using displayBadge=true, you need to pass buttonText=string with badge content.

Limitation: onTheFly cannot use directly PersonRenderBox to display badge,
because it don't have person object in props !

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

@@ -4,6 +4,7 @@
         :id="context.id"
         :action="context.action"
         :buttonText="options.buttonText"
+        :displayBadge="options.displayBadge === 'true'"
         @saveFormOnTheFly="saveFormOnTheFly">
     </on-the-fly>
 </template>

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

@@ -1,6 +1,11 @@
 <template>
 
-   <a class="btn btn-sm" target="_blank"
+    <a v-if="isDisplayBadge" @click="openModal">
+        <span class="chill-entity" :class="badgeType">
+            {{ buttonText }}
+        </span>
+    </a>
+    <a v-else class="btn btn-sm" target="_blank"
       :class="classAction"
       :title="$t(titleAction)"
       @click="openModal">
@@ -73,7 +78,7 @@ export default {
       OnTheFlyThirdparty,
       OnTheFlyCreate
    },
-   props: ['type', 'id', 'action', 'buttonText'],
+   props: ['type', 'id', 'action', 'buttonText', 'displayBadge'],
    emits: ['saveFormOnTheFly'],
    data() {
       return {
@@ -123,13 +128,19 @@ export default {
                return 'action.redirect.' + this.type;
          }
       },
-      buttonMessage(){
+      buttonMessage() {
          switch (this.type){
             case 'person':
                return 'onthefly.show.file_' + this.type;
             case 'thirdparty':
                return 'onthefly.show.file_' + this.type;
          }
+      },
+      isDisplayBadge() {
+         return (this.displayBadge === true && this.buttonText !== null);
+      },
+      badgeType() {
+         return 'entity-' + this.type + ' badge-' + this.type;
       }
    },
    methods: {
@@ -189,5 +200,4 @@ export default {
 a {
    cursor: pointer;
 }
-
 </style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js

@@ -20,7 +20,8 @@ containers.forEach((container) => {
                         id: parseInt(container.dataset.targetId),
                     },
                     options: {
-                        buttonText: container.dataset.buttonText || null
+                        buttonText: container.dataset.buttonText || null,
+                        displayBadge: container.dataset.displayBadge || false
                     }
                 }
             }
@@ -30,5 +31,5 @@ containers.forEach((container) => {
     .component('app', App)
     .mount(container);
 
-    console.log('container dataset', container.dataset);
+    //console.log('container dataset', container.dataset);
 });

src/Bundle/ChillMainBundle/Resources/views/OnTheFly/_insert_vue_onthefly.html.twig

@@ -7,16 +7,31 @@
           name:     string  'person', 'thirdparty'
           id:       integer
       }
-    * action        'show', 'edit', 'create'
+    * action        string  'show', 'edit', 'create'
+    * buttonText    string
+    * displayBadge  boolean (default: false)  replace button by badge, need to define buttonText for content
 
 #}
-<div class="onthefly-container"
+<span class="onthefly-container"
 
-     data-target-name="{{ targetEntity.name|e('html_attr') }}"
+    data-target-name="{{ targetEntity.name|e('html_attr') }}"
-     data-target-id="{{ targetEntity.id|e('html_attr') }}"
+    data-target-id="{{ targetEntity.id|e('html_attr') }}"
-     data-action="{{ action|e('html_attr') }}"
 
-></div>
+    {% if action is defined %}
+        data-action="{{ action|e('html_attr') }}"
+    {% else %}
+        data-action="show"
+    {% endif %}
+
+    {% if buttonText is defined %}
+        data-button-text="{{ buttonText|e('html_attr') }}"
+    {% endif %}
+
+    {% if displayBadge is defined and displayBadge == 1 %}
+        data-display-badge="true"
+    {% endif %}
+
+></span>
 
 {{ encore_entry_script_tags('vue_onthefly') }}
 {{ encore_entry_link_tags('vue_onthefly') }}

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/_concerned.html.twig

@@ -1,17 +0,0 @@
-{% for p in accompanyingCourse.participations %}
-
-    {#
-    <span class="badge-person">
-        <a href="{{ path('chill_person_view', { 'person_id': p.person.id }) }}"
-           title="{{ p.person.firstName ~ ' ' ~ p.person.lastName }}">
-            {{ p.person|chill_entity_render_box }}
-        </a>
-    </span>
-    #}
-
-    A
-    {# include vue_onthefly component #}
-    {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with { targetEntity: { name: 'person', id: p.person.id }, action: 'show' } %}
-
-{% endfor %}
-

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig

@@ -24,7 +24,17 @@
 <div class="accompanyingcourse-resume row">
 
     <div class="concerned mb-5">
-        {% include '@ChillPerson/AccompanyingCourse/_concerned.html.twig' with {} %}
+        {% for p in accompanyingCourse.participations %}
+
+            {# include vue_onthefly component #}
+            {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                targetEntity: { name: 'person', id: p.person.id },
+                action: 'show',
+                displayBadge: true,
+                buttonText: p.person|chill_entity_render_string
+            } %}
+
+        {% endfor %}
     </div>
 
     <div class="col-md-6 location mb-5">