From e5c4f66610d5953da176f8e304c840c5308f2f34 Mon Sep 17 00:00:00 2001
From: Remy van der Wereld <r.van.der.wereld@amsterdam.nl>
Date: Tue, 26 Nov 2024 18:15:18 +0100
Subject: [PATCH] 130880

---
 src/__generated__/apiSchema.d.ts              | 36 ++++++++++-
 .../forms/SelectField/SelectField.tsx         |  8 ++-
 .../CaseDetailsPage/AddSubtask/AddSubtask.tsx | 22 +++++++
 .../SubtaskDialog/SubtaskDialog.tsx           | 63 +++++++++++++++++++
 .../pages/CaseDetailsPage/CaseDetailsPage.tsx | 12 +++-
 .../CaseDetailsPage/Workflows/Workflows.tsx   |  2 +-
 .../CaseDetailsPage/Workflows/columns.tsx     |  1 +
 src/app/state/rest/cases.ts                   | 23 +++++++
 8 files changed, 160 insertions(+), 7 deletions(-)
 create mode 100644 src/app/pages/CaseDetailsPage/AddSubtask/AddSubtask.tsx
 create mode 100644 src/app/pages/CaseDetailsPage/AddSubtask/SubtaskDialog/SubtaskDialog.tsx

diff --git a/src/__generated__/apiSchema.d.ts b/src/__generated__/apiSchema.d.ts
index e04500d..1d10ad5 100644
--- a/src/__generated__/apiSchema.d.ts
+++ b/src/__generated__/apiSchema.d.ts
@@ -85,6 +85,12 @@ declare namespace Components {
             case: number;
             homeowner_association: string;
         }
+        export interface CaseUserTaskList {
+            id: number;
+            name: string;
+            case: number;
+            homeowner_association: string;
+        }
         export interface CaseWorkflow {
             id: number;
             case?: number | null;
@@ -94,6 +100,7 @@ declare namespace Components {
             workflow_message_name?: string | null;
             data?: null;
             tasks: CaseUserTask[];
+            completed?: boolean;
         }
         export interface Contact {
             fullname: string;
@@ -130,12 +137,20 @@ declare namespace Components {
             role: string;
             homeowner_associations?: number[];
         }
+        export interface StartWorkflow {
+            workflow_option_id: number;
+        }
         /**
          * * `CASE` - CASE
          * * `CASE_CLOSE` - CASE_CLOSE
          * * `GENERIC_TASK` - GENERIC_TASK
          */
         export type TypeEnum = "CASE" | "CASE_CLOSE" | "GENERIC_TASK";
+        export interface WorkflowOption {
+            id: number;
+            name: string;
+            message_name: string;
+        }
     }
 }
 declare namespace Paths {
@@ -261,6 +276,23 @@ declare namespace Paths {
             export type $200 = Components.Schemas.CaseList[];
         }
     }
+    namespace CasesProcessesList {
+        namespace Responses {
+            export type $200 = Components.Schemas.WorkflowOption[];
+        }
+    }
+    namespace CasesProcessesStartCreate {
+        namespace Parameters {
+            export type Id = number;
+        }
+        export interface PathParameters {
+            id: Parameters.Id;
+        }
+        export type RequestBody = Components.Schemas.Case;
+        namespace Responses {
+            export type $200 = Components.Schemas.StartWorkflow;
+        }
+    }
     namespace CasesRetrieve {
         namespace Parameters {
             export type Id = number;
@@ -319,7 +351,7 @@ declare namespace Paths {
     }
     namespace TasksList {
         namespace Responses {
-            export type $200 = Components.Schemas.CaseUserTask[];
+            export type $200 = Components.Schemas.CaseUserTaskList[];
         }
     }
     namespace TasksRetrieve {
@@ -330,7 +362,7 @@ declare namespace Paths {
             id: Parameters.Id;
         }
         namespace Responses {
-            export type $200 = Components.Schemas.CaseUserTask;
+            export type $200 = Components.Schemas.CaseUserTaskList;
         }
     }
 }
diff --git a/src/app/components/forms/SelectField/SelectField.tsx b/src/app/components/forms/SelectField/SelectField.tsx
index 985fd74..39f4cbc 100644
--- a/src/app/components/forms/SelectField/SelectField.tsx
+++ b/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}
diff --git a/src/app/pages/CaseDetailsPage/AddSubtask/AddSubtask.tsx b/src/app/pages/CaseDetailsPage/AddSubtask/AddSubtask.tsx
new file mode 100644
index 0000000..6f6d701
--- /dev/null
+++ b/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
diff --git a/src/app/pages/CaseDetailsPage/AddSubtask/SubtaskDialog/SubtaskDialog.tsx b/src/app/pages/CaseDetailsPage/AddSubtask/SubtaskDialog/SubtaskDialog.tsx
new file mode 100644
index 0000000..7908240
--- /dev/null
+++ b/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
diff --git a/src/app/pages/CaseDetailsPage/CaseDetailsPage.tsx b/src/app/pages/CaseDetailsPage/CaseDetailsPage.tsx
index 9a83df8..79a838f 100644
--- a/src/app/pages/CaseDetailsPage/CaseDetailsPage.tsx
+++ b/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 />
diff --git a/src/app/pages/CaseDetailsPage/Workflows/Workflows.tsx b/src/app/pages/CaseDetailsPage/Workflows/Workflows.tsx
index 5a97f87..0ca7460 100644
--- a/src/app/pages/CaseDetailsPage/Workflows/Workflows.tsx
+++ b/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;
 `
 
diff --git a/src/app/pages/CaseDetailsPage/Workflows/columns.tsx b/src/app/pages/CaseDetailsPage/Workflows/columns.tsx
index 9992cf7..e04f2da 100644
--- a/src/app/pages/CaseDetailsPage/Workflows/columns.tsx
+++ b/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",
diff --git a/src/app/state/rest/cases.ts b/src/app/state/rest/cases.ts
index ea2a313..2da76c7 100644
--- a/src/app/state/rest/cases.ts
+++ b/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[]>({