130880

src/app/components/forms/SelectField/SelectField.tsx

@@ -6,12 +6,13 @@ type Props = {
   name: string
   label?: string
   options?: { value: string, label: string }[]
+  defaultOption?: boolean
   register?: UseFormRegister<FieldValues>
   formState?: FormState<FieldValues>
   validation: RegisterOptions
 }
 
-export const SelectField: React.FC<Props> = ({ name, label, options, register, formState, validation = {}, ...rest }) => {
+export const SelectField: React.FC<Props> = ({ name, label, options, defaultOption = false, register, formState, validation = {}, ...rest }) => {
   const error = formState?.errors?.[name]
   const hasError = !!error
 
@@ -24,6 +25,11 @@ export const SelectField: React.FC<Props> = ({ name, label, options, register, f
         { ...(register ? register(name, validation) : {}) } 
         { ...rest }
       >
+        {defaultOption && (
+          <Select.Option key="default_option" value="default_option">
+            Maak een keuze
+          </Select.Option>
+        )}
         { options?.map((option) => (
           <Select.Option key={option.value} value={option.value}>
             {option.label}

src/app/pages/CaseDetailsPage/AddSubtask/AddSubtask.tsx

@@ -0,0 +1,22 @@
+import { Button, Row } from "@amsterdam/design-system-react"
+import SubtaskDialog from "./SubtaskDialog/SubtaskDialog"
+import { useDialog } from "app/hooks"
+
+
+const AddSubtask: React.FC = () => {
+  const dialogId = "ams-dialog-add-subtask"
+  const { openDialog } = useDialog(dialogId)
+  return (
+    <Row align="end">
+      <Button 
+        key="id-subtask-add" 
+        onClick={ openDialog } 
+      >
+        Taak opvoeren
+      </Button>
+      <SubtaskDialog id={ dialogId }/>
+    </Row>
+  )
+}
+
+export default AddSubtask

src/app/pages/CaseDetailsPage/AddSubtask/SubtaskDialog/SubtaskDialog.tsx

@@ -0,0 +1,63 @@
+import { Dialog } from "@amsterdam/design-system-react"
+import { useParams } from "react-router-dom"
+import { Form, FormActionButtons, SelectField } from "app/components/forms"
+import { useCaseProcesses, useCaseProcessesStart } from "app/state/rest"
+import { useMemo } from "react"
+
+type Props = {
+  id: string
+}
+
+type Value = boolean | string | object
+type FormData = Record<string, Value>
+
+type Option = { 
+  value: string, 
+  label: string 
+}
+
+const DEFAULT_OPTION_VALUE = "default_option"
+
+export const SubtaskDialog: React.FC<Props> = ({ id }) => {
+  const { caseId } = useParams()
+  const [data] = useCaseProcesses()
+  const [, { execPost }] = useCaseProcessesStart(Number(caseId))
+
+
+  const options: Option[] = useMemo(() => {
+    if (!data) return []
+    return data.map(({ id, name }) => ({ value: `${ id }`, label: name }))
+  }, [data])
+
+
+  const onSubmit = (variables: FormData) => {
+    if (variables.workflow_option_id === DEFAULT_OPTION_VALUE) {
+      // No valid option selected.
+      return
+    }
+
+    execPost(variables)
+      .then((resp) => {
+        console.log("Succes:", resp) 
+      }).catch((err) => {
+        console.log("Error creating case:", err)
+      })
+  }
+
+  return (
+    <Dialog heading="Taak opvoeren" id={ id } >
+      <Form onSubmit={ onSubmit } formGrid={{ narrow: 4, medium: 6, wide: 10 }}>
+        <SelectField
+          name="workflow_option_id"
+          label="Selecteer een taak"
+          options={ options } 
+          defaultOption
+          validation={{ required: true }}
+        />
+        <FormActionButtons okText="Taak opvoeren" onCancel={ Dialog.close } />
+      </Form>
+    </Dialog>
+  )
+}
+
+export default SubtaskDialog

src/app/pages/CaseDetailsPage/CaseDetailsPage.tsx

@@ -4,10 +4,11 @@ import { DocumentIcon } from "@amsterdam/design-system-react-icons"
 import { Heading, Tabs } from "@amsterdam/design-system-react"
 import { useCase } from "app/state/rest"
 import { PageHeading, PageSpinner, DetailsList } from "app/components"
+import { useURLState } from "app/hooks"
 import Workflows from "./Workflows/Workflows"
 import CaseEvents from "./CaseEvents/CaseEvents"
 import Documents from "./Documents/Documents"
-import { useURLState } from "app/hooks"
+import AddSubtask from "./AddSubtask/AddSubtask"
 
 
 const HeaderLink = styled(Heading)`
@@ -58,8 +59,13 @@ export const CaseDetailsPage: React.FC = () => {
           </Tabs.Button>
         </Tabs.List>
         <Tabs.Panel tab={0}>
-          { data?.id && <Workflows caseId={ data?.id } /> }
-          { data?.id && <CaseEvents caseId={ data?.id } /> }
+          {data?.id && (
+            <>
+              <AddSubtask />
+              <Workflows caseId={ data?.id } /> 
+              <CaseEvents caseId={ data?.id } /> 
+            </>
+          )}
         </Tabs.Panel>
         <Tabs.Panel tab={1}>
           <Documents />

src/app/pages/CaseDetailsPage/Workflows/Workflows.tsx

@@ -9,7 +9,7 @@ type Props = {
 }
 
 const Wrapper = styled.div`
-  margin-top: 24px;
+  margin-top: 16px;
   margin-bottom: 32px;
 `
 

src/app/pages/CaseDetailsPage/Workflows/columns.tsx

@@ -15,6 +15,7 @@ const getColumns = (caseId: Components.Schemas.Case["id"]): ColumnType<Component
   }, {
     header: "Slotdatum",
     dataIndex: "due_date",
+    width: 200,
     render: (text) => formatDate(text)
   }, {
     header: "Verwerking taak",

src/app/state/rest/cases.ts

@@ -49,6 +49,29 @@ export const useTaskComplete = (options?: Options) => {
   })
 }
 
+export const useCaseProcesses = (options?: Options) => {
+  const handleError = useErrorHandler()
+  return useApiRequest<Components.Schemas.WorkflowOption[]>({
+    ...options,
+    url: `${ makeApiUrl("cases", "processes") }`,
+    groupName: "cases",
+    handleError,
+    isProtected: true
+  })
+}
+
+export const useCaseProcessesStart = (id: Components.Schemas.Case["id"], options?: Options) => {
+  const handleError = useErrorHandler()
+  return useApiRequest<Components.Schemas.StartWorkflow>({
+    ...options,
+    url: `${ makeApiUrl("cases", id, "processes", "start") }`,
+    lazy: true,
+    groupName: "cases",
+    handleError,
+    isProtected: true
+  })
+}
+
 export const useCaseEvents = (id: Components.Schemas.Case["id"] ,options?: Options) => {
   const handleError = useErrorHandler()
   return useApiRequest<CaseEvent[]>({