From fbd17a1de62f60394ef4cddd138ac25f55d87573 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 1 Oct 2021 17:38:19 +0200
Subject: [PATCH] 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 !
---
 .../Resources/public/vuejs/OnTheFly/App.vue   |  1 +
 .../vuejs/OnTheFly/components/OnTheFly.vue    | 18 ++++++++++---
 .../Resources/public/vuejs/OnTheFly/index.js  |  5 ++--
 .../OnTheFly/_insert_vue_onthefly.html.twig   | 27 ++++++++++++++-----
 .../AccompanyingCourse/_concerned.html.twig   | 17 ------------
 .../views/AccompanyingCourse/index.html.twig  | 12 ++++++++-
 6 files changed, 50 insertions(+), 30 deletions(-)
 delete mode 100644 src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/_concerned.html.twig

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue
index 63c1ad5bd..c4c014e19 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue
+++ b/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>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue
index 7cfb04651..237166e62 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue
+++ b/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>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js
index 46320b091..88e6aad5e 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js
+++ b/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);
 });
diff --git a/src/Bundle/ChillMainBundle/Resources/views/OnTheFly/_insert_vue_onthefly.html.twig b/src/Bundle/ChillMainBundle/Resources/views/OnTheFly/_insert_vue_onthefly.html.twig
index 03b4094f7..e63fd9ee0 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/OnTheFly/_insert_vue_onthefly.html.twig
+++ b/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-id="{{ targetEntity.id|e('html_attr') }}"
-     data-action="{{ action|e('html_attr') }}"
+    data-target-name="{{ targetEntity.name|e('html_attr') }}"
+    data-target-id="{{ targetEntity.id|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') }}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/_concerned.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/_concerned.html.twig
deleted file mode 100644
index 5ff6d5583..000000000
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/_concerned.html.twig
+++ /dev/null
@@ -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 %}
-
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
index 0fb9115eb..fa30389fc 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
+++ b/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">