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

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>