Rewrite the Component PickWorkflow.vue into typescript

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

@@ -1,63 +1,52 @@
 <template>
-    <template v-if="workflowsAvailables.length >= 1">
+    <template v-if="props.workflowsAvailables.length >= 1">
         <div 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>
             <ul class="dropdown-menu" aria-labelledby="createWorkflowButton">
-                <li v-for="w in workflowsAvailables" :key="w.name">
-                    <a class="dropdown-item" :href="makeLink(w.name)" @click.prevent="goToGenerateWorkflow($event, w.name)">{{ w.text }}</a>
+                <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>
     </template>
 </template>
 
-<script>
+<script setup lang="ts">
 
-import {buildLinkCreate} from 'ChillMainAssets/lib/entity-workflow/api.js';
+import {buildLinkCreate} from '../../../lib/entity-workflow/api';
+import {WorkflowAvailable} from "../../../types";
 
-export default {
-    name: "PickWorkflow",
-    props: {
-        relatedEntityClass: {
-            type: String,
-            required: true,
-        },
-        relatedEntityId: {
-            type: Number,
-            required: false,
-        },
-        workflowsAvailables: {
-            type: Array,
-            required: true,
-        },
-        preventDefaultMoveToGenerate: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-        goToGenerateWorkflowPayload: {
-            required: false,
-            default: {}
-        },
-    },
-    emits: ['goToGenerateWorkflow'],
-    methods: {
-        makeLink(workflowName) {
-            return buildLinkCreate(workflowName, this.relatedEntityClass, this.relatedEntityId);
-        },
-        goToGenerateWorkflow(event, workflowName) {
-            console.log('goToGenerateWorkflow', event, workflowName);
+interface PickWorkflowConfig {
+    relatedEntityClass: string;
+    relatedEntityId: number;
+    workflowsAvailables: WorkflowAvailable[];
+    preventDefaultMoveToGenerate: boolean;
+    goToGenerateWorkflowPayload: object;
+}
 
-            if (!this.$props.preventDefaultMoveToGenerate) {
-                console.log('to go generate');
-                window.location.assign(this.makeLink(workflowName));
-            }
+const props = withDefaults(defineProps<PickWorkflowConfig>(), {preventDefaultMoveToGenerate: false, goToGenerateWorkflowPayload: {}});
 
-            this.$emit('goToGenerateWorkflow', {event, workflowName, link: this.makeLink(workflowName), payload: this.goToGenerateWorkflowPayload});
-        }
+const emit = defineEmits<{
+    (e: 'goToGenerateWorkflow', {event: MouseEvent, workflowName: string, link: string, payload: object}): void;
+}>();
+
+const makeLink = (workflowName: string): string => buildLinkCreate(workflowName, props.relatedEntityClass, props.relatedEntityId);
+
+const goToGenerateWorkflow = (event: MouseEvent, workflowName: string): void  => {
+    console.log('goToGenerateWorkflow', event, workflowName);
+
+    if (!props.preventDefaultMoveToGenerate) {
+        console.log('to go generate');
+        window.location.assign(makeLink(workflowName));
     }
+
+    emit('goToGenerateWorkflow', {event, workflowName, link: makeLink(workflowName), payload: props.goToGenerateWorkflowPayload});
+}
+
+const goToDuplicateRelatedEntity = (event: MouseEvent, workflowName: string): void => {
+
 }
 </script>