Merge pull request #2493 from Amsterdam/bugfix/debriefing-other-theme…

…-dynamically

Updated debriefing form

src/app/components/case/forms/DebriefForm/DebriefForm.tsx

@@ -3,7 +3,7 @@ import { FormTitle } from "@amsterdam/asc-ui"
 import scaffold from "./scaffold"
 import useScaffoldedFields from "app/components/shared/ConfirmScaffoldForm/hooks/useScaffoldedFields"
 import WorkflowForm from "app/components/case/WorkflowForm/WorkflowForm"
-import { useCase, useDebriefingCreate, useViolationTypes } from "app/state/rest"
+import { useCase, useCaseThemes, useDebriefingCreate, useViolationTypes } from "app/state/rest"
 import useNavigation from "app/routing/useNavigation"
 
 type Props = {
@@ -19,7 +19,10 @@ const DebriefCreateForm: React.FC<Props> = ({ id, caseUserTaskId }) => {
   const violationTypes = data?.results
   const [, { execPost }] = useDebriefingCreate()
   const { navigateTo } = useNavigation()
-  const fields = useScaffoldedFields(scaffold, id, navigateTo, violationTypes, themeName)
+  const [themesData] = useCaseThemes()
+  const fields = useScaffoldedFields(
+    scaffold, id, navigateTo, violationTypes, themesData?.results ?? [], themeName
+  )
 
   // Nuisance is an array but a boolean is expected.
   const mapData = (data: any) => ({

src/app/components/case/forms/DebriefForm/scaffold.tsx

@@ -4,32 +4,35 @@ import InfoButton from "app/components/shared/InfoHeading/InfoButton"
 import InfoContent from "./components/InfoContent"
 import type { NavigateToFunction } from "app/routing/useNavigation"
 
-const options = {
-  "-": "-",
-  "Kamerverhuur": "Kamerverhuur",
-  "Leegstand": "Leegstand",
-  "Onderhuur": "Onderhuur",
-  "Ondermijning": "Ondermijning",
-  "Vakantieverhuur": "Vakantieverhuur",
-  "Woningverbetering": "Woningverbetering"
+
+const createObjectFromArray = (arr: any) => {
+  const obj: any = {}
+  arr.forEach((item: any) => {
+    obj[item] = item
+  })
+  return obj
 }
 
-// Remove current theme from options
-const getThemeOptions = (themeName?: string) => {
-  if (themeName !== undefined) {
-    const { [themeName]: remove, ...rest }: any = options
-    return rest
-  }
+const getThemeOptions = (themes: Components.Schemas.CaseTheme[], themeName?: string) => {
+  const optionsArray: any = [ "-", "Woningverbetering" ]
+  themes.forEach((theme) => {
+    // Remove current theme from options
+    if (theme.name !== themeName) {
+      optionsArray.push([theme.name])
+    }
+  })
+  optionsArray.sort()
+  const options = createObjectFromArray(optionsArray)
   return options
 }
 
 export default (
   caseId: Components.Schemas.CaseDetail["id"],
   navigateTo: NavigateToFunction,
   violationTypes: Components.Schemas.PaginatedViolationTypeList["results"],
+  themes: Components.Schemas.CaseTheme[],
   themeName?: string
 ) => {
-
   const violationOptions = violationTypes?.reduce((acc, item) => ({ ...acc, [item.key]: [item.value] }), {})
 
   const fields = {
@@ -53,7 +56,7 @@ export default (
             isRequired: true,
             name: "violation_result.theme",
             label: "Naar welk thema overdragen?",
-            options: getThemeOptions(themeName)
+            options: getThemeOptions(themes, themeName)
           }
         }
       }