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);
 });