Merge pull request #32 from Amsterdam/improvement/123183-add-form-var…

…iables-to-event-history

123183 Added form values to event history

src/__external__/CaseEvent.d.ts

@@ -1,9 +1,11 @@
 type EventType = "CASE" | "GENERIC_TASK"
 
+type Value = Record<string, Value> | string
+
 type CaseEvent = {
   id: number
   event_values: Record<string, string>
-  event_variables: Record<string, string>
+  event_variables: Record<string, Value>
   date_created: string // date-time
   type: EventType
   emitter_id: number

src/app/components/TimelineEvents/TimelineEvent.tsx

@@ -1,8 +1,7 @@
 import React from "react"
 import { DescriptionList } from "@amsterdam/design-system-react"
-import { getEventValueName } from "./dictionaries"
-import { isValidDate, formatDate } from "app/utils/dates"
 import { styled } from "styled-components"
+import { useValues } from "./useValues"
 
 
 type Props = {
@@ -12,7 +11,7 @@ type Props = {
 const Wrapper = styled.div`
   margin-left: 25px;
   padding: 25px;
-  background-color: rgba(0, 0, 0, 0.08);;
+  background-color: rgba(0, 0, 0, 0.08);
   border: 0.5px solid #d4d2d2;
   border-radius: 4px;
   box-shadow: 
@@ -21,17 +20,19 @@ const Wrapper = styled.div`
     0px 12px 48px 16px rgba(0, 0, 0, 0.03);
 `
 
+
 export const TimelineEvent: React.FC<Props> = ({ event }) => {
-  const { event_values } = event
+  const data = useValues(event)
   return (
     <Wrapper>
       <DescriptionList>
-        { Object.entries(event_values).map(([key, value], index) => (
+        {data.map((item, index) => (
           <React.Fragment key={ `event_values-${ index }` }>
             <DescriptionList.Term>
-              { getEventValueName(key) }
-            </DescriptionList.Term><DescriptionList.Details>
-              { isValidDate(value) ? formatDate(value, true) : value }
+              { item.key }
+            </DescriptionList.Term>
+            <DescriptionList.Details>
+              { item.value }
             </DescriptionList.Details>
           </React.Fragment>
         ))}

src/app/components/TimelineEvents/dictionaries.ts

@@ -18,7 +18,7 @@ export const getEventTitle = (event: CaseEvent): string => {
 
 export const EVENT_VALUES: Record<string, string> = {
   "date_added": "Datum",
-  "author": "Medewerker",
+  "author": "Uitvoerder",
   "description": "Toelichting"
 }
 

src/app/components/TimelineEvents/useValues.ts

@@ -0,0 +1,36 @@
+import { isValidDate, formatDate } from "app/utils/dates"
+import { EVENT_TYPES, getEventValueName } from "./dictionaries"
+
+
+type Value = {
+  key: string
+  value: string | number
+}
+
+export const useValues = (event: CaseEvent) => {
+  const { event_values, event_variables } = event
+  const values: Value[] = []
+
+  // Map event_values
+  Object.entries(event_values).forEach(([key, value]) => {
+    // Don't return the description of a GENERIC_TASK because this field is used as event title.
+    if (event.type === EVENT_TYPES["GENERIC_TASK"] && key === "description") {
+      return
+    }
+    // Translate the key and the value to readable dutch.
+    const label = getEventValueName(key)
+    const keyValue = isValidDate(value) ? formatDate(value, true) : value
+    values.push({ key: label, value: keyValue })
+  })
+
+  // Map event_variables if a form has been submitted. 
+  // There must be data (event_variables) and it cannot be a generic boolean (completed)
+  if (event_variables && !event_variables?.completed) {
+    Object.entries(event_variables).forEach(([, value]) => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+      values.push({ key: value?.label, value: value?.value })
+    })  
+  }
+
+  return values
+}