Refresh the workers list when a new worker is created + update worker types in store if required

closes #1416 (closed)

src/components/Process/Workers/CreateForm.vue

@@ -72,7 +72,7 @@
 </template>
 
 <script lang="ts">
-import { mapActions } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { errorParser, ensureArray } from '@/helpers'
 import Modal from '@/components/Modal.vue'
 import { useNotificationStore, useWorkerStore } from '@/stores'
@@ -84,6 +84,9 @@ export default defineComponent({
   components: {
     Modal
   },
+  emits: {
+    'worker-created': (value: boolean) => typeof value === 'boolean'
+  },
   data: () => ({
     openModal: false,
     payload: {
@@ -95,6 +98,7 @@ export default defineComponent({
     fieldErrors: {} as Partial<Record<keyof CreateWorkerPayload, string[]>>
   }),
   computed: {
+    ...mapState(useWorkerStore, ['workerTypes']),
     canSave (): boolean {
       return !Object.values(this.payload).some(v => v === '')
     },
@@ -103,7 +107,7 @@ export default defineComponent({
     }
   },
   methods: {
-    ...mapActions(useWorkerStore, ['createWorker']),
+    ...mapActions(useWorkerStore, ['createWorker', 'listWorkerTypes']),
     ...mapActions(useNotificationStore, ['notify']),
     async create () {
       if (!this.canSave) return
@@ -111,6 +115,12 @@ export default defineComponent({
       this.fieldErrors = {}
       try {
         await this.createWorker(this.payload)
+        // Send a custom event to the parent component so that it reloads the list of workers
+        this.$emit('worker-created', true)
+        // Reload the list of worker types (for the type filter) if the worker was created with a new type
+        if (!Object.entries(this.workerTypes).filter(([, type]) => type.slug === this.payload.type).length) {
+          this.listWorkerTypes()
+        }
         this.notify({ type: 'info', text: 'Worker created successfully.' })
         this.openModal = false
         this.payload = {