From 75348f6ba7e09f3b1bf9a2af1837befe8d07b06b Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 1 Oct 2021 14:03:58 +0200
Subject: [PATCH] otf: add data attributes and pass them in vue component

---
 .../Resources/public/vuejs/OnTheFly/App.vue     | 17 ++++-------------
 .../Resources/public/vuejs/OnTheFly/index.js    | 10 ++++++++--
 .../OnTheFly/_insert_vue_onthefly.html.twig     | 11 ++++++++++-
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue
index 0f566f464..ac7d30b36 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue
@@ -1,8 +1,9 @@
 <template>
     <on-the-fly
-        action="action"
-        :type="type"
-        :id="id"
+        :type="context.type"
+        :id="context.id"
+        :action="context.action"
+        :buttonText="options.buttonText"
         @saveFormOnTheFly="saveFormOnTheFly">
     </on-the-fly>
 </template>
@@ -22,16 +23,6 @@ export default {
         },
         options() {
             return this.onTheFly.options;
-        },
-        // temp
-        action() {
-            return 'show';  // 'edit', 'create'
-        },
-        type() {
-            return 'person'; // 'thirdparty'
-        },
-        id() {
-            return 1613
         }
     },
     mounted() {
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js
index 2b78a569a..46320b091 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js
@@ -14,8 +14,14 @@ containers.forEach((container) => {
         data() {
             return {
                 onTheFly: {
-                    context: {},
-                    options: {}
+                    context: {
+                        action:  container.dataset.action,
+                        type:  container.dataset.targetName,
+                        id: parseInt(container.dataset.targetId),
+                    },
+                    options: {
+                        buttonText: container.dataset.buttonText || null
+                    }
                 }
             }
         }
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 f43101bbb..03b4094f7 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
@@ -3,10 +3,19 @@
     It push all variables from context in OnTheFly/App.vue.
 
     OPTIONS
-    *
+    * targetEntity  {
+          name:     string  'person', 'thirdparty'
+          id:       integer
+      }
+    * action        'show', 'edit', 'create'
+
 #}
 <div 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') }}"
+
 ></div>
 
 {{ encore_entry_script_tags('vue_onthefly') }}