create module for generating document in twig pages

src/Bundle/ChillDocGeneratorBundle/Resources/public/module/PickTemplate/index.js

@@ -0,0 +1,24 @@
+import {createApp} from 'vue';
+import PickTemplate from 'ChillDocGeneratorAssets/vuejs/_components/PickTemplate.vue';
+import {_createI18n} from 'ChillMainAssets/vuejs/_js/i18n';
+
+const i18n = _createI18n({});
+
+document.querySelectorAll('div[data-docgen-template-picker]').forEach(el => {
+    let
+        picker = {
+            template: '<pick-template :entityClass="this.entityClass" :entityId="this.entityId"></pick-template>',
+            components: {
+                PickTemplate,
+            },
+            data() {
+                return {
+                    entityClass: el.dataset.entityClass,
+                    entityId: el.dataset.entityId,
+                }
+            },
+        }
+    ;
+
+    createApp(picker).use(i18n).mount(el);
+});

src/Bundle/ChillDocGeneratorBundle/Resources/public/vuejs/_components/PickTemplate.vue

@@ -0,0 +1,95 @@
+<template>
+    <template v-if="templates.length > 0">
+        <slot name="title">
+            <h2>{{ $t('Generate document from template')}}</h2>
+        </slot>
+        <select class="form-select form-select-sm" v-model="template">
+            <option disabled value="">{{ $t('evaluation_choose_a_template') }}</option>
+            <template v-for="t in templates">
+                <option  v-bind:value="t.id">{{ t.name.fr }}</option>
+            </template>
+        </select>
+        <button v-if="canGenerate" class="btn btn-update btn-sm change-icon" type="button" @click="generateDocument"><i class="fa fa-fw fa-cog"></i></button>
+        <button v-else class="btn btn-update btn-sm change-icon" type="button" disabled ><i class="fa fa-fw fa-cog"></i></button>
+
+        <div v-if="hasDescription">
+            <p>{{ getDescription }}</p>
+        </div>
+    </template>
+
+</template>
+
+<script>
+import { fetchResults } from "ChillMainAssets/lib/api/apiMethods.js";
+
+export default {
+    name: "PickTemplate",
+    props: {
+        entityId: [String, Number],
+        entityClass: {
+            type: String,
+            required: true,
+        },
+        beforeMove: {
+            type: Function,
+            required: false,
+        }
+    },
+    data() {
+        return {
+            template: null,
+            templates: [],
+        }
+    },
+    computed: {
+        canGenerate() {
+            return this.template != null;
+        },
+        hasDescription() {
+            if (this.template == null) {
+                return false;
+            }
+
+            return true;
+        },
+        getDescription() {
+            return this.templates.find(t => t.id === this.template).description || '';
+        },
+    },
+    methods: {
+        generateDocument() {
+            if (this.beforeMove != null) {
+                let r = this.beforeMove();
+                if (r instanceof Promise) {
+                    r.then(() => this.goToGenerate());
+                } else {
+                    this.goToGenerate();
+                }
+            } else {
+                this.goToGenerate();
+            }
+        },
+        goToGenerate() {
+            const
+                entityId = encodeURI(this.entityId),
+                returnPath = encodeURIComponent(window.location.pathname + window.location.search + window.location.hash),
+                fqdnEntityClass = encodeURI(this.entityClass),
+                url = `/fr/doc/gen/generate/from/${this.template}/for/${fqdnEntityClass}/${entityId}?returnPath=${returnPath}`
+            ;
+
+            console.log('I will generate your doc at', url);
+            window.location.assign(url);
+        },
+    },
+    created() {
+        let fqdnEntityClass = encodeURI(this.entityClass);
+        fetchResults(`/api/1.0/docgen/templates/by-entity/${fqdnEntityClass}`).then(templates => {
+            this.templates = templates;
+        })
+    },
+}
+</script>
+
+<style scoped>
+
+</style>

src/Bundle/ChillDocGeneratorBundle/chill.webpack.config.js

@@ -3,4 +3,6 @@ module.exports = function(encore, entries) {
     encore.addAliases({
         ChillDocGeneratorAssets: __dirname + '/Resources/public'
     });
+
+    encore.addEntry('mod_docgen_picktemplate', __dirname + '/Resources/public/module/PickTemplate/index.js');
 };

src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/index.html.twig

@@ -11,6 +11,13 @@
 {% block js %}
 	{{ parent() }}
 	{{ encore_entry_script_tags('mod_async_upload') }}
+  {{ encore_entry_script_tags('mod_docgen_picktemplate') }}
+{% endblock %}
+
+{% block css %}
+	{{ parent() }}
+	{{ encore_entry_link_tags('mod_async_upload') }}
+  {{ encore_entry_link_tags('mod_docgen_picktemplate') }}
 {% endblock %}
 
 {% block content %}
@@ -58,6 +65,8 @@
 		</tbody>
 	</table>
 
+    <div data-docgen-template-picker="data-docgen-template-picker" data-entity-class="Chill\PersonBundle\Entity\AccompanyingPeriod" data-entity-id="{{ accompanyingCourse.id }}"></div>
+
 	{% if is_granted('CHILL_ACCOMPANYING_COURSE_DOCUMENT_CREATE', accompanyingCourse) %}
 		<ul class="record_actions">
 			<li class="create">

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue

@@ -197,6 +197,15 @@
          </ul>
       </div>
 
+     <pick-template
+         entityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
+         :entityId="work.id"
+         :beforeMove="beforeGenerateTemplate">
+       <template v-slot:title>
+          <h3>{{ $t('Generate doc') }}</h3>
+       </template>
+     </pick-template>
+
       <div v-if="errors.length > 0" id="errors" class="alert alert-danger flashbag">
          <p>{{ $t('fix_these_errors') }}</p>
          <ul>
@@ -232,6 +241,7 @@ import AddEvaluation from './components/AddEvaluation.vue';
 import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
+import PickTemplate from 'ChillDocGeneratorAssets/vuejs/_components/PickTemplate.vue';
 
 const i18n = {
    messages: {
@@ -278,6 +288,7 @@ export default {
       AddPersons,
       PersonRenderBox,
       AddressRenderBox,
+      PickTemplate,
    },
    i18n,
    data() {
@@ -416,6 +427,10 @@ export default {
       submit() {
          this.$store.dispatch('submit');
       },
+      beforeGenerateTemplate() {
+          console.log('before generate');
+          return Promise.resolve();
+      }
    }
 };