Merge pull request #180 from Amsterdam/feature/add-upload-bpmn

Feature/add upload bpmn

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "trailingComma" : "none"
+}

package.json

@@ -54,6 +54,7 @@
     "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.13",
+    "prettier": "3.4.2",
     "vitest": "^2.1.3"
   }
 }

src/app/pages/CaseDetailsPage/Documents/UploadDialog/UploadDialog.tsx

@@ -1,6 +1,11 @@
 import { Dialog } from "@amsterdam/design-system-react"
 import { useParams } from "react-router-dom"
-import { Form, FormActionButtons, TextInputField, FileInputField } from "app/components/forms"
+import {
+  Form,
+  FormActionButtons,
+  TextInputField,
+  FileInputField
+} from "app/components/forms"
 import { useCaseDocumentUpload } from "app/state/rest"
 
 type Props = {
@@ -15,21 +20,27 @@ type CaseDocumentData = {
 export const UploadDialog: React.FC<Props> = ({ id }) => {
   const { caseId } = useParams()
   const [, { execPost }] = useCaseDocumentUpload()
-  
+
   const onSubmit = (data: CaseDocumentData) => {
     const formData = new FormData()
     formData.append("case", caseId as string)
     formData.append("name", data.name)
     formData.append("document", data.upload[0])
-    void execPost(formData as unknown as Partial<Components.Schemas.CaseDocument>)
+    void execPost(
+      formData as unknown as Partial<Components.Schemas.CaseDocument>
+    )
   }
 
   return (
-    <Dialog heading="Document uploaden" id={ id } >
-      <Form onSubmit={ onSubmit } formGrid={{ narrow: 4, medium: 6, wide: 10 }}>
-        <TextInputField name="name" label="Titel van het document" validation={{ required: true, maxLength: 100 }} />
+    <Dialog heading="Document uploaden" id={id}>
+      <Form onSubmit={onSubmit} formGrid={{ narrow: 4, medium: 6, wide: 10 }}>
+        <TextInputField
+          name="name"
+          label="Titel van het document"
+          validation={{ required: true, maxLength: 100 }}
+        />
         <FileInputField name="upload" validation={{ required: true }} />
-        <FormActionButtons okText="Upload" onCancel={ Dialog.close } />
+        <FormActionButtons okText="Upload" onCancel={Dialog.close} />
       </Form>
     </Dialog>
   )

src/app/pages/CaseDetailsPage/tasks/FormDialog/FormDialog.tsx

@@ -1,24 +1,37 @@
 import { useState } from "react"
 import { Dialog } from "@amsterdam/design-system-react"
-import { useTaskComplete } from "app/state/rest"
-import { CompletedTaskForm, ComletedTaskFormData } from "./forms/CompletedTaskForm" 
-import { GenericTaskForm, GenericTaskFormData, FormItem } from "./forms/GenericTaskForm"
-
+import { useTaskComplete, useTaskCompleteFileUpload } from "app/state/rest"
+import {
+  CompletedTaskForm,
+  ComletedTaskFormData
+} from "./forms/CompletedTaskForm"
+import { GenericTaskForm } from "./forms/GenericTaskForm"
+import { FileTaskForm } from "./forms/FileTaskForm"
+import hasFormTypeFile from "./helpers/hasFormTypeFile"
+import type { FormItem, GenericTaskFormData } from "./forms/types"
 
 export type Props = {
   dialogId: string
   task: Omit<Components.Schemas.CaseUserTask, "form"> & {
     form?: FormItem[] // Form is generated as any
-  };
+  }
   caseId: Components.Schemas.Case["id"]
   closeDialog: () => void
 }
 
-export const FormDialog: React.FC<Props> = ({ dialogId, task, caseId, closeDialog }) => {
+export const FormDialog: React.FC<Props> = ({
+  dialogId,
+  task,
+  caseId,
+  closeDialog
+}) => {
   const [loading, setLoading] = useState(false)
   const [, { execPost }] = useTaskComplete({ lazy: true })
+  const [, { execPost: execPostFile }] = useTaskCompleteFileUpload()
 
-  const submitForm = (variables: ComletedTaskFormData | GenericTaskFormData ) => {
+  const submitForm = (
+    variables: ComletedTaskFormData | GenericTaskFormData
+  ) => {
     setLoading(true)
     const values = {
       case_user_task_id: task?.id.toString(),
@@ -28,36 +41,60 @@ export const FormDialog: React.FC<Props> = ({ dialogId, task, caseId, closeDialo
 
     execPost(values)
       .then((resp) => {
-        console.log("Succes:", resp) 
-      }).catch((err) => {
-        console.log("Error creating case:", err)
+        console.log("Succes:", resp)
+      })
+      .catch((err) => {
+        console.log("Error creating task:", err)
       })
       .finally(() => {
         setLoading(false)
       })
   }
 
+  const submitFormFile = (variables: { name: string, upload: FileList }) => {
+    setLoading(true)
+    const formData = new FormData()
+    formData.append("case", caseId.toString())
+    formData.append("name", variables.name)
+    formData.append("document", variables.upload[0])
+    formData.append("case_user_task_id", task?.id.toString())
+
+    void execPostFile(formData as unknown as Partial<GenericTaskFormData>)
+      .finally(() => {
+        setLoading(false)
+      })
+  }
+
   const { form, name } = task
   const hasForm = form && form.length > 0
-  const title = hasForm ? `Rond de taak "${ name }" af` : `Is de taak "${ name }" afgerond?`
-
+  const hasFileTypeInForm = hasFormTypeFile(form)
+  const title = hasForm
+    ? `Rond de taak "${ name }" af`
+    : `Is de taak "${ name }" afgerond?`
+
   return (
-    <Dialog
-      id={ dialogId }
-      heading={ title }
-    >
-      { hasForm ? (
-        <GenericTaskForm 
-          closeModal={ closeDialog }  
-          loading={ loading } 
-          submitForm={ submitForm } 
-          form={ form } 
-        />
+    <Dialog id={dialogId} heading={title}>
+      {hasForm ? (
+        hasFileTypeInForm ? (
+          <FileTaskForm
+            closeModal={closeDialog}
+            loading={loading}
+            submitForm={submitFormFile}
+            form={form}
+          />
+        ) : (
+          <GenericTaskForm
+            closeModal={closeDialog}
+            loading={loading}
+            submitForm={submitForm}
+            form={form}
+          />
+        )
       ) : (
-        <CompletedTaskForm 
-          closeModal={ closeDialog }  
-          loading={ loading } 
-          submitForm={ submitForm } 
+        <CompletedTaskForm
+          closeModal={closeDialog}
+          loading={loading}
+          submitForm={submitForm}
         />
       )}
     </Dialog>

src/app/pages/CaseDetailsPage/tasks/FormDialog/forms/FileTaskForm.tsx

@@ -0,0 +1,46 @@
+import React from "react"
+import {
+  Form,
+  FormActionButtons,
+  FileInputField,
+  TextInputField
+} from "app/components"
+import type { FormItem } from "./types"
+
+type Props = {
+  loading?: boolean
+  closeModal: () => void
+  submitForm: (variables: { name: string, upload: FileList }) => void
+  form: FormItem[]
+}
+
+export const FileTaskForm: React.FC<Props> = ({
+  closeModal,
+  submitForm,
+  loading = false,
+  form
+}) => {
+  const formItem = form[0]
+
+  return (
+    <Form onSubmit={submitForm} formGrid={{ narrow: 4, medium: 6, wide: 10 }}>
+      <TextInputField
+        key="key-name"
+        name="name"
+        label="Titel van het document"
+        validation={{ required: formItem.required }}
+      />
+      <FileInputField
+        key="key-upload"
+        name="upload"
+        label={formItem.label}
+        validation={{ required: formItem.required }}
+      />
+      <FormActionButtons
+        okText="Taak afronden"
+        onCancel={closeModal}
+        loading={loading}
+      />
+    </Form>
+  )
+}

src/app/pages/CaseDetailsPage/tasks/FormDialog/forms/GenericTaskForm.tsx

@@ -1,77 +1,75 @@
-import { Form, SelectField, TextAreaField, FormActionButtons } from "app/components"
-
-
-export type FormItem = {
-  type: string
-  name: string
-  label: string
-  required?: boolean
-  options?: { value: string, label: string }[]
-  tooltip?: string
-}
-
-type Value = boolean | string | object
-export type GenericTaskFormData = Record<string, Value>
+import {
+  Form,
+  SelectField,
+  TextAreaField,
+  FormActionButtons
+} from "app/components"
+import type { FormItem, GenericTaskFormData } from "./types"
 
 type Props = {
-  loading?: boolean 
-  closeModal: () => void 
+  loading?: boolean
+  closeModal: () => void
   submitForm: (variables: GenericTaskFormData) => void
   form: FormItem[]
 }
 
-const formatData = (form: FormItem[], data: GenericTaskFormData) => (
+const formatData = (form: FormItem[], data: GenericTaskFormData) =>
   form.reduce<GenericTaskFormData>((acc, item) => {
     const key = item.name
     const value = data[key]
     if (value) {
       acc[key] = {
-        "value": value
+        value: value
       }
     }
     return acc
   }, {})
-)
-
-export const GenericTaskForm: React.FC<Props> = ({ closeModal, submitForm, loading = false, form }) => {
 
+export const GenericTaskForm: React.FC<Props> = ({
+  closeModal,
+  submitForm,
+  loading = false,
+  form
+}) => {
   const onSubmit = (data: GenericTaskFormData) => {
     const formattedData = formatData(form, data)
     submitForm(formattedData)
   }
-  
+
   return (
-    <Form onSubmit={ onSubmit } formGrid={{ narrow: 4, medium: 6, wide: 10 }} >
-      { form.map((formItem: FormItem, index: number) => {
-        switch(formItem.type) {
+    <Form onSubmit={onSubmit} formGrid={{ narrow: 4, medium: 6, wide: 10 }}>
+      {form.map((formItem: FormItem, index: number) => {
+        switch (formItem.type) {
         case "select":
           return (
             <SelectField
               key={index}
-              name={ formItem.name } 
-              label={ formItem.label }
-              options={ formItem.options } 
+              name={formItem.name}
+              label={formItem.label}
+              options={formItem.options}
               validation={{ required: formItem.required }}
             />
           )
         case "text":
           return (
-            <TextAreaField 
+            <TextAreaField
               key={index}
-              name={ formItem.name } 
-              label={ formItem.label } 
+              name={formItem.name}
+              label={formItem.label}
               validation={{ required: formItem.required }}
             />
           )
         default:
-          console.log("Form item must be of type 'select' or 'text'")
+          console.log(
+            `Form item "${ formItem.type }" not supported. Type must be "select" or "text"`
+          )
           return null // or handle other field types
         }
       })}
-      <FormActionButtons 
-        okText="Taak afronden" 
-        onCancel={ closeModal } 
-        loading={ loading }
+      <FormActionButtons
+        okText="Taak afronden"
+        onCancel={closeModal}
+        loading={loading}
       />
     </Form>
   )

src/app/pages/CaseDetailsPage/tasks/FormDialog/forms/types.ts

@@ -0,0 +1,12 @@
+export type FormItem = {
+    type: string
+    name: string
+    label: string
+    required?: boolean
+    options?: { value: string, label: string }[]
+    tooltip?: string
+  }
+
+type Value = boolean | string | object | Blob | File[] | FileList
+
+export type GenericTaskFormData = Record<string, Value>