Change behaviour to allow to add a new workflow (if available) and open the modal to list existing workflows in the same button

Use the feature of splitted dropdown buttons, from bootstrap.

See:
- OP#776
- https://champs-libres.openproject.com/work_packages/776

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

@@ -1,20 +1,13 @@
 <template>
-
+   <pick-workflow
-   <button v-if="hasWorkflow"
-      class="btn btn-primary"
-      @click="openModal">
-      <b>{{ countWorkflows }}</b>
-      <template v-if="countWorkflows > 1">{{ $t('workflows') }}</template>
-      <template v-else>{{ $t('workflow') }}</template>
-   </button>
-
-   <pick-workflow v-else-if="allowCreate"
       :relatedEntityClass="this.relatedEntityClass"
       :relatedEntityId="this.relatedEntityId"
       :workflowsAvailables="workflowsAvailables"
       :preventDefaultMoveToGenerate="this.$props.preventDefaultMoveToGenerate"
       :goToGenerateWorkflowPayload="this.goToGenerateWorkflowPayload"
+      :countExistingWorkflows="countWorkflows"
       @go-to-generate-workflow="goToGenerateWorkflow"
+      @click-open-list="openModal"
    ></pick-workflow>
 
    <teleport to="body">
@@ -39,6 +32,8 @@
                :workflowsAvailables="workflowsAvailables"
                :preventDefaultMoveToGenerate="this.$props.preventDefaultMoveToGenerate"
                :goToGenerateWorkflowPayload="this.goToGenerateWorkflowPayload"
+               :countExistingWorkflows="countWorkflows"
+               :embedded-within-list-modal="true"
                @go-to-generate-workflow="this.goToGenerateWorkflow"
             ></pick-workflow>
          </template>

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

@@ -1,6 +1,6 @@
 <template>
     <template v-if="props.workflowsAvailables.length >= 1">
-        <div class="dropdown d-grid gap-2">
+        <div v-if="countExistingWorkflows == 0 || embeddedWithinListModal" class="dropdown d-grid gap-2">
             <button class="btn btn-primary dropdown-toggle" type="button" id="createWorkflowButton" data-bs-toggle="dropdown" aria-expanded="false">
                 Créer un workflow
             </button>
@@ -10,6 +10,38 @@
                 </li>
             </ul>
         </div>
+        <div v-else>
+            <div class="btn-group">
+                <button @click="emit('clickOpenList')" class="btn btn-primary">
+                    <template v-if="countExistingWorkflows === 1">
+                        1 workflow associé
+                    </template>
+                    <template v-else>
+                        {{ countExistingWorkflows }} workflows associés
+                    </template>
+                </button>
+                <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" type="button" id="createWorkflowButton" data-bs-toggle="dropdown" aria-expanded="false">
+                    <span class="visually-hidden">Liste des workflows disponibles</span>
+                </button>
+                <ul class="dropdown-menu" aria-labelledby="createWorkflowButton">
+                    <li v-for="w in props.workflowsAvailables" :key="w.name">
+                        <button class="dropdown-item" type="button" @click.prevent="goToGenerateWorkflow($event, w.name)">{{ w.text }}</button>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </template>
+    <template v-else>
+        <div v-if="countExistingWorkflows > 0" class="dropdown d-grid gap-2">
+            <button @click="emit('clickOpenList')" class="btn btn-primary" type="button" id="createWorkflowButton" data-bs-toggle="dropdown" aria-expanded="false">
+                <template v-if="countExistingWorkflows === 1">
+                    1 workflow associé
+                </template>
+                <template v-else>
+                    {{ countExistingWorkflows }} workflows associés
+                </template>
+            </button>
+        </div>
     </template>
 </template>
 
@@ -30,12 +62,18 @@ interface PickWorkflowConfig {
     workflowsAvailables: WorkflowAvailable[];
     preventDefaultMoveToGenerate: boolean;
     goToGenerateWorkflowPayload: object;
+    countExistingWorkflows: number;
+    /**
+     * if true, this button will not present a splitted button
+     */
+    embeddedWithinListModal: boolean;
 }
 
-const props = withDefaults(defineProps<PickWorkflowConfig>(), {preventDefaultMoveToGenerate: false, goToGenerateWorkflowPayload: {}});
+const props = withDefaults(defineProps<PickWorkflowConfig>(), {preventDefaultMoveToGenerate: false, goToGenerateWorkflowPayload: {}, allowCreateWorkflow: false});
 
 const emit = defineEmits<{
     (e: 'goToGenerateWorkflow', {event: MouseEvent, workflowName: string, isLinkValid: boolean, link: string, payload: object}): void;
+    (e: 'clickOpenList'): void;
 }>();
 
 const makeLink = (workflowName: string): string => buildLinkCreate(workflowName, props.relatedEntityClass, props.relatedEntityId);

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

@@ -340,7 +340,6 @@ import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/
 import PickTemplate from 'ChillDocGeneratorAssets/vuejs/_components/PickTemplate.vue';
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 import ListWorkflowModal from 'ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue';
-import PickWorkflow from 'ChillMainAssets/vuejs/_components/EntityWorkflow/PickWorkflow.vue';
 import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
 import {buildLinkCreate} from 'ChillMainAssets/lib/entity-workflow/api';
 import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
@@ -406,7 +405,6 @@ export default {
       PickTemplate,
       ListWorkflowModal,
       OnTheFly,
-      PickWorkflow,
       PersonText,
    },
    i18n,