workflows in entity: twig call once vue component that list in modal with add button, or just display add button if none

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

@@ -46,6 +46,12 @@
                 {{ 'Back to the list' | trans }}
             </a>
         </li>
+        <li>
+            {% set workflows_frame = chill_entity_workflow_list('Chill\\DocStoreBundle\\Entity\\AccompanyingCourseDocument', document.id) %}
+            {% if workflows_frame is not empty %}
+                {{ workflows_frame|raw }}
+            {% endif %}
+        </li>
         <li>
             {{ m.download_button(document.object, document.title) }}
         </li>
@@ -61,12 +67,7 @@
 {% endblock %}
  
 {% block block_post_menu %}
-    <div class="post-menu pt-4">
-        {% set workflows_frame = chill_entity_workflow_list('Chill\\DocStoreBundle\\Entity\\AccompanyingCourseDocument', document.id) %}
-        {% if workflows_frame is not empty %}
-            {{ workflows_frame|raw }}
-        {% endif %}
-    </div>
+    <div class="post-menu pt-4"></div>
 {% endblock %}
 
 {% block js %}

src/Bundle/ChillMainBundle/Resources/public/module/entity-workflow-pick/index.js

@@ -1,49 +1,35 @@
 import { createApp } from "vue";
-import PickWorkflowVue from 'ChillMainAssets/vuejs/_components/EntityWorkflow/PickWorkflow.vue';
-import ListWorkflowVue from 'ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflow.vue';
+import ListWorkflowModalVue from 'ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue';
+import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
 
-// pick workflow
-document.querySelectorAll('[data-pick-workflow]')
-    .forEach(function(el) {
+const i18n = _createI18n({});
+
+// list workflow
+document.querySelectorAll('[data-list-workflows]')
+    .forEach(function (el) {
+        console.log('allowCreate', el.dataset.allowCreate);
         const app = {
             components: {
-                PickWorkflowVue
+                ListWorkflowModalVue,
             },
             template:
-                '<pick-workflow-vue ' +
+                '<list-workflow-modal-vue ' +
+                    ':workflows="workflows" ' +
+                    ':allowCreate="allowCreate" ' +
                     ':relatedEntityClass="relatedEntityClass" ' +
                     ':relatedEntityId="relatedEntityId" ' +
                     ':workflowsAvailables="workflowsAvailables" ' +
-                '></pick-workflow-vue>',
+                '></list-workflow-modal-vue>',
             data() {
                 return {
+                    workflows: JSON.parse(el.dataset.workflows),
+                    allowCreate: el.dataset.allowCreate === "1",
                     relatedEntityClass: el.dataset.relatedEntityClass,
                     relatedEntityId: Number.parseInt(el.dataset.relatedEntityId),
                     workflowsAvailables: JSON.parse(el.dataset.workflowsAvailables),
                 }
             }
         };
-        createApp(app).mount(el);
-    })
-;
-
-// list workflow
-document.querySelectorAll('[data-list-workflows]')
-    .forEach(function (el) {
-        const app = {
-            components: {
-                ListWorkflowVue,
-            },
-            template:
-                '<list-workflow-vue ' +
-                    ':workflows="workflows" ' +
-                '></list-workflow-vue>',
-            data() {
-                return {
-                    workflows: JSON.parse(el.dataset.workflows),
-                }
-            }
-        };
-        createApp(app).mount(el);
+        createApp(app).use(i18n).mount(el);
     })
 ;

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue

@@ -0,0 +1,103 @@
+<template>
+   
+   <button v-if="hasWorkflow"
+      class="btn btn-misc"
+      @click="openModal">
+      {{ countWorkflows }} workflows
+   </button>
+   
+   <pick-workflow v-else-if="allowCreate"
+      :relatedEntityClass="this.relatedEntityClass"
+      :relatedEntityId="this.relatedEntityId"
+      :workflowsAvailables="workflowsAvailables"
+   ></pick-workflow>
+   
+   <teleport to="body">
+      <modal v-if="modal.showModal"
+         :modalDialogClass="modal.modalDialogClass"
+         @close="modal.showModal = false">
+         
+         <template v-slot:header>
+            Liste des workflows
+         </template>
+         
+         <template v-slot:body>
+            <list-workflow-vue
+               :workflows="workflows"
+            ></list-workflow-vue>
+         </template>
+         
+         <template v-slot:footer>
+            <pick-workflow v-if="allowCreate"
+               :relatedEntityClass="this.relatedEntityClass"
+               :relatedEntityId="this.relatedEntityId"
+               :workflowsAvailables="workflowsAvailables"
+            ></pick-workflow>
+         </template>
+         
+      </modal>
+   </teleport>
+</template>
+
+<script>
+import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import PickWorkflow from 'ChillMainAssets/vuejs/_components/EntityWorkflow/PickWorkflow.vue';
+import ListWorkflowVue from 'ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflow.vue';
+
+export default {
+   name: "ListWorkflowModal",
+   components: {
+      Modal,
+      PickWorkflow,
+      ListWorkflowVue
+   },
+   props: {
+      workflows: {
+         type: Array,
+         required: true,
+      },
+      allowCreate: {
+         type: Boolean,
+         required: true,
+      },
+      relatedEntityClass: {
+         type: String,
+         required: true,
+      },
+      relatedEntityId: {
+         type: Number,
+         required: false,
+      },
+      workflowsAvailables: {
+         type: Array,
+         required: true,
+      }
+   },
+   data() {
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-scrollable modal-xl"
+         },
+      }
+   },
+   computed: {
+      countWorkflows() {
+         return this.workflows.length;
+      },
+      hasWorkflow() {
+         return this.countWorkflows > 0;
+      }
+   },
+   methods: {
+      openModal() {
+         this.modal.showModal = true;
+      },
+   },
+   mounted() {
+      console.log('allowCreate', this.allowCreate);
+   }
+}
+</script>
+
+<style scoped></style>

src/Bundle/ChillMainBundle/Resources/views/Workflow/_extension_list_workflow_for.html.twig

@@ -1,13 +1,13 @@
+{% set acl = "0" %}
 {% if is_granted('CHILL_MAIN_WORKFLOW_CREATE', blank_workflow) %}
-    {# vue component #}
-    <div data-pick-workflow="1"
-        data-related-entity-class="{{ blank_workflow.relatedEntityClass }}"
-        data-related-entity-id="{{ blank_workflow.relatedEntityId }}"
-        data-workflows-availables="{{ workflows_availables|json_encode()|e('html_attr') }}"
-    ></div>
+    {% set acl = "1" %}
 {% endif %}
 
-{% if entity_workflows|length > 0 %}
-    {# vue component #}
-    <div data-list-workflows="1" data-workflows="{{ entity_workflows_json|json_encode|e('html_attr') }}"></div>
-{% endif %}
+{# vue component #}
+<div data-list-workflows="1"
+    data-workflows="{{ entity_workflows_json|json_encode|e('html_attr') }}"
+    data-allow-create="{{ acl }}"
+    data-related-entity-class="{{ blank_workflow.relatedEntityClass }}"
+    data-related-entity-id="{{ blank_workflow.relatedEntityId }}"
+    data-workflows-availables="{{ workflows_availables|json_encode()|e('html_attr') }}"
+></div>