diff --git a/src/__external__/CaseEvent.d.ts b/src/__external__/CaseEvent.d.ts index 2ea5e4f..0b370cb 100644 --- a/src/__external__/CaseEvent.d.ts +++ b/src/__external__/CaseEvent.d.ts @@ -1,9 +1,11 @@ type EventType = "CASE" | "GENERIC_TASK" +type Value = Record | string + type CaseEvent = { id: number event_values: Record - event_variables: Record + event_variables: Record date_created: string // date-time type: EventType emitter_id: number diff --git a/src/app/components/TimelineEvents/TimelineEvent.tsx b/src/app/components/TimelineEvents/TimelineEvent.tsx index f639ddb..afce6e5 100644 --- a/src/app/components/TimelineEvents/TimelineEvent.tsx +++ b/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 = ({ event }) => { - const { event_values } = event + const data = useValues(event) return ( - { Object.entries(event_values).map(([key, value], index) => ( + {data.map((item, index) => ( - { getEventValueName(key) } - - { isValidDate(value) ? formatDate(value, true) : value } + { item.key } + + + { item.value } ))} diff --git a/src/app/components/TimelineEvents/dictionaries.ts b/src/app/components/TimelineEvents/dictionaries.ts index d885952..0c96cab 100644 --- a/src/app/components/TimelineEvents/dictionaries.ts +++ b/src/app/components/TimelineEvents/dictionaries.ts @@ -18,7 +18,7 @@ export const getEventTitle = (event: CaseEvent): string => { export const EVENT_VALUES: Record = { "date_added": "Datum", - "author": "Medewerker", + "author": "Uitvoerder", "description": "Toelichting" } diff --git a/src/app/components/TimelineEvents/useValues.ts b/src/app/components/TimelineEvents/useValues.ts new file mode 100644 index 0000000..3d83d2c --- /dev/null +++ b/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 +}