Merge branch 'master' into 'fix/center-type-show-hidden-when-no-center-reachable'

# Conflicts:
#   CHANGELOG.md

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

@@ -0,0 +1,41 @@
+<template>
+    <on-the-fly
+        :type="context.type"
+        :id="context.id"
+        :action="context.action"
+        :buttonText="options.buttonText"
+        :displayBadge="options.displayBadge === 'true'"
+        @saveFormOnTheFly="saveFormOnTheFly">
+    </on-the-fly>
+</template>
+
+<script>
+import OnTheFly from './components/OnTheFly.vue';
+
+export default {
+    name: "App",
+    components: {
+        OnTheFly
+    },
+    props: ['onTheFly'],
+    computed: {
+        context() {
+            return this.onTheFly.context;
+        },
+        options() {
+            return this.onTheFly.options;
+        }
+    },
+    mounted() {
+        console.log('OnTheFly mounted');
+        console.log('OnTheFly: data context', this.context);
+        console.log('OnTheFly: data options', this.options);
+    },
+    methods: {
+        saveFormOnTheFly(payload) {
+            console.log('saveFormOnTheFly', payload);
+        }
+    }
+}
+</script>
+

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">
@@ -61,7 +66,7 @@
 
 <script>
 import Modal from 'ChillMainAssets/vuejs/_components/Modal.vue';
-import OnTheFlyCreate from './OnTheFly/Create.vue';
+import OnTheFlyCreate from './Create.vue';
 import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
 import OnTheFlyThirdparty from 'ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue';
 
@@ -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: {
@@ -174,10 +185,10 @@ export default {
          this.modal.showModal = false;
       },
       buildLocation(id, type) {
-         if (type == 'person') {
+         if (type === 'person') {
             // TODO i18n
             return `/fr/person/${id}/general`;
-         } else if (type == 'thirdparty') {
+         } else if (type === 'thirdparty') {
             return `/fr/thirdparty/thirdparty/${id}/show`;
          }
       }
@@ -189,5 +200,4 @@ export default {
 a {
    cursor: pointer;
 }
-
 </style>

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

@@ -0,0 +1,24 @@
+const ontheflyMessages = {
+    fr: {
+        onthefly: {
+            show: {
+                person: "Détails de l'usager",
+                thirdparty: "Détails du tiers",
+                file_person: "Ouvrir la fiche de l'usager",
+                file_thirdparty: "Voir le Tiers",
+            },
+            edit: {
+                person: "Modifier un usager",
+                thirdparty: "Modifier un tiers"
+            },
+            create: {
+                button: "Créer \"{q}\"",
+                title: "Création d'un nouvel usager ou d'un tiers professionnel",
+                person: "un nouvel usager",
+                thirdparty: "un nouveau tiers professionnel"
+            },
+        }
+    }
+}
+
+export { ontheflyMessages };

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

@@ -0,0 +1,35 @@
+import { createApp } from "vue";
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
+import { ontheflyMessages } from './i18n.js';
+import App from "./App.vue";
+
+const i18n = _createI18n( ontheflyMessages );
+
+let containers = document.querySelectorAll('.onthefly-container');
+
+containers.forEach((container) => {
+
+    const app = createApp({
+        template: `<app :onTheFly="this.onTheFly" ></app>`,
+        data() {
+            return {
+                onTheFly: {
+                    context: {
+                        action:  container.dataset.action,
+                        type:  container.dataset.targetName,
+                        id: parseInt(container.dataset.targetId),
+                    },
+                    options: {
+                        buttonText: container.dataset.buttonText || null,
+                        displayBadge: container.dataset.displayBadge || false
+                    }
+                }
+            }
+        }
+    })
+    .use(i18n)
+    .component('app', App)
+    .mount(container);
+
+    //console.log('container dataset', container.dataset);
+});

src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js

@@ -53,24 +53,6 @@ const messages = {
          top: "Haut",
          bottom: "Bas",
       },
-      onthefly: {
-         show: {
-            person: "Détails de l'usager",
-            thirdparty: "Détails du tiers",
-            file_person: "Ouvrir la fiche de l'usager",
-            file_thirdparty: "Voir le Tiers",
-         },
-         edit: {
-            person: "Modifier un usager",
-            thirdparty: "Modifier un tiers"
-         },
-         create: {
-            button: "Créer \"{q}\"",
-            title: "Création d'un nouvel usager ou d'un tiers professionnel",
-            person: "un nouvel usager",
-            thirdparty: "un nouveau tiers professionnel"
-         },
-      },
       renderbox: {
          person: "Usager",
          birthday: {

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

@@ -0,0 +1,37 @@
+{#
+    This Twig template include load vue_onthefly component.
+    It push all variables from context in OnTheFly/App.vue.
+
+    OPTIONS
+    * targetEntity  {
+          name:     string  'person', 'thirdparty'
+          id:       integer
+      }
+    * action        string  'show', 'edit', 'create'
+    * buttonText    string
+    * displayBadge  boolean (default: false)  replace button by badge, need to define buttonText for content
+
+#}
+<span class="onthefly-container"
+
+    data-target-name="{{ targetEntity.name|e('html_attr') }}"
+    data-target-id="{{ targetEntity.id|e('html_attr') }}"
+
+    {% 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/ChillMainBundle/chill.webpack.config.js

@@ -61,5 +61,6 @@ module.exports = function(encore, entries)
 
     // Vue entrypoints
     encore.addEntry('vue_address', __dirname + '/Resources/public/vuejs/Address/index.js');
+    encore.addEntry('vue_onthefly', __dirname + '/Resources/public/vuejs/OnTheFly/index.js');
 
 };