Events v2: Implement optimistic file upload and FILE type input

docker-compose.yml

@@ -92,6 +92,7 @@ services:
       - MONGO_URL=mongodb://mongo1/events
       - ES_HOST=elasticsearch:9200
       - COUNTRY_CONFIG_URL=http://countryconfig:3040/
+      - DOCUMENTS_URL=http://documents:9050
 
   # User facing services
   workflow:

packages/client/src/v2-events/components/forms/FormFieldGenerator.tsx

@@ -8,10 +8,32 @@
  *
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
+
 /* eslint-disable */
+import { InputField } from '@client/components/form/InputField'
+import { DATE, PARAGRAPH, TEXT } from '@client/forms'
+import { IAdvancedSearchFormState } from '@client/search/advancedSearch/utils'
+import { DateField } from '@opencrvs/components/lib/DateField'
+import { Text } from '@opencrvs/components/lib/Text'
+import { TextInput } from '@opencrvs/components/lib/TextInput'
 import * as React from 'react'
+
 import styled, { keyframes } from 'styled-components'
+import {
+  evalExpressionInFieldDefinition,
+  getConditionalActionsForField,
+  getDependentFields,
+  handleInitialValue,
+  hasInitialValueDependencyInfo
+} from './utils'
+import { Errors, getValidationErrorsForForm } from './validation'
 
+import {
+  FieldConfig,
+  FieldValue,
+  FieldValueByType,
+  FileFieldValue
+} from '@opencrvs/commons/client'
 import {
   Field,
   FieldProps,
@@ -26,30 +48,8 @@ import {
   MessageDescriptor,
   useIntl
 } from 'react-intl'
-import { FieldConfig } from '@opencrvs/commons'
-import { TextInput } from '@opencrvs/components/lib/TextInput'
-import { Text } from '@opencrvs/components/lib/Text'
-import { DateField } from '@opencrvs/components/lib/DateField'
-import { IAdvancedSearchFormState } from '@client/search/advancedSearch/utils'
-import {
-  DATE,
-  HIDDEN,
-  IFormFieldValue,
-  IFormSectionData,
-  PARAGRAPH,
-  TEXT
-} from '@client/forms'
-import { InputField } from '@client/components/form/InputField'
-import {
-  evalExpressionInFieldDefinition,
-  flatten,
-  getConditionalActionsForField,
-  getDependentFields,
-  handleInitialValue,
-  hasInitialValueDependencyInfo,
-  unflatten
-} from './utils'
-import { Errors, getValidationErrorsForForm } from './validation'
+import { FileInput } from './inputs/FileInput/FileInput'
+import { ActionFormData } from '@opencrvs/commons'
 
 const fadeIn = keyframes`
   from { opacity: 0; }
@@ -64,27 +64,27 @@ const FormItem = styled.div<{
     ignoreBottomMargin ? '0px' : '22px'};
 `
 
-interface GeneratedInputFieldProps {
-  fieldDefinition: FieldConfig
+interface GeneratedInputFieldProps<FieldType extends FieldConfig> {
+  fieldDefinition: FieldType
   fields: FieldConfig[]
-  values: IFormSectionData
-  setFieldValue: (name: string, value: IFormFieldValue) => void
+  values: ActionFormData
+  setFieldValue: (name: string, value: FieldValue | undefined) => void
   onClick?: () => void
   onChange: (e: React.ChangeEvent) => void
   onBlur: (e: React.FocusEvent) => void
   resetDependentSelectValues: (name: string) => void
-  value: IFormFieldValue
+  value: FieldValueByType[FieldType['type']]
   touched: boolean
   error: string
-  formData: IFormSectionData
+  formData: ActionFormData
   disabled?: boolean
   onUploadingStateChanged?: (isUploading: boolean) => void
   requiredErrorMessage?: MessageDescriptor
   setFieldTouched: (name: string, isTouched?: boolean) => void
 }
 
-const GeneratedInputField = React.memo<GeneratedInputFieldProps>(
-  ({
+const GeneratedInputField = React.memo(
+  <FieldType extends FieldConfig>({
     fieldDefinition,
     onChange,
     onBlur,
@@ -99,7 +99,7 @@ const GeneratedInputField = React.memo<GeneratedInputFieldProps>(
     requiredErrorMessage,
     fields,
     values
-  }) => {
+  }: GeneratedInputFieldProps<FieldType>) => {
     const intl = useIntl()
 
     const inputFieldProps = {
@@ -133,6 +133,12 @@ const GeneratedInputField = React.memo<GeneratedInputFieldProps>(
         intl.formatMessage(fieldDefinition.placeholder)
     }
 
+    const handleFileChange = React.useCallback(
+      (value: FileFieldValue | undefined) =>
+        setFieldValue(fieldDefinition.id, value),
+      [fieldDefinition.id, setFieldValue]
+    )
+
     if (fieldDefinition.type === DATE) {
       return (
         <InputField {...inputFieldProps}>
@@ -166,17 +172,6 @@ const GeneratedInputField = React.memo<GeneratedInputFieldProps>(
       )
     }
 
-    if (fieldDefinition.type === HIDDEN) {
-      const { error, touched, ...allowedInputProps } = inputProps
-
-      return (
-        <input
-          type="hidden"
-          {...allowedInputProps}
-          value={inputProps.value as string}
-        />
-      )
-    }
     if (fieldDefinition.type === TEXT) {
       return (
         <InputField {...inputFieldProps}>
@@ -190,13 +185,25 @@ const GeneratedInputField = React.memo<GeneratedInputFieldProps>(
         </InputField>
       )
     }
+    if (fieldDefinition.type === 'FILE') {
+      const value = formData[fieldDefinition.id] as FileFieldValue
+      return (
+        <InputField {...inputFieldProps}>
+          <FileInput
+            {...inputProps}
+            value={value}
+            onChange={handleFileChange}
+          />
+        </InputField>
+      )
+    }
     return <div>Unsupported field type {fieldDefinition.type}</div>
   }
 )
 
 GeneratedInputField.displayName = 'MemoizedGeneratedInputField'
 
-type FormData = Record<string, IFormFieldValue>
+type FormData = Record<string, FieldValue>
 
 const mapFieldsToValues = (fields: FieldConfig[], formData: FormData) =>
   fields.reduce((memo, field) => {
@@ -211,15 +218,15 @@ interface ExposedProps {
   id: string
   fieldsToShowValidationErrors?: FieldConfig[]
   setAllFieldsDirty: boolean
-  onChange: (values: IFormSectionData) => void
-  formData: Record<string, IFormFieldValue>
+  onChange: (values: ActionFormData) => void
+  formData: Record<string, FieldValue>
   onSetTouched?: (func: ISetTouchedFunction) => void
   requiredErrorMessage?: MessageDescriptor
   onUploadingStateChanged?: (isUploading: boolean) => void
   initialValues?: IAdvancedSearchFormState
 }
 
-type AllProps = ExposedProps & IntlShapeProps & FormikProps<IFormSectionData>
+type AllProps = ExposedProps & IntlShapeProps & FormikProps<ActionFormData>
 
 class FormSectionComponent extends React.Component<AllProps> {
   componentDidUpdate(prevProps: AllProps) {
@@ -289,7 +296,7 @@ class FormSectionComponent extends React.Component<AllProps> {
 
   setFieldValuesWithDependency = (
     fieldName: string,
-    value: IFormFieldValue
+    value: FieldValue | undefined
   ) => {
     const updatedValues = cloneDeep(this.props.values)
     set(updatedValues, fieldName, value)
@@ -328,13 +335,25 @@ class FormSectionComponent extends React.Component<AllProps> {
   }
 
   render() {
-    const { values, fields, setFieldTouched, touched, intl, formData } =
-      this.props
+    const {
+      values,
+      fields: fieldsWithDotIds,
+      setFieldTouched,
+      touched,
+      intl,
+      formData
+    } = this.props
 
     const language = this.props.intl.locale
 
     const errors = this.props.errors as unknown as Errors
 
+    const fields = fieldsWithDotIds.map((field) => {
+      const newField = { ...field }
+      newField.id = field.id.replaceAll('.', FIELD_SEPARATOR)
+      return newField
+    })
+
     return (
       <section>
         {fields.map((field) => {
@@ -348,7 +367,7 @@ class FormSectionComponent extends React.Component<AllProps> {
 
           const conditionalActions: string[] = getConditionalActionsForField(
             field,
-            { ...formData, ...values }
+            { $form: values, $now: new Date().toISOString().split('T')[0] }
           )
 
           if (conditionalActions.includes('hide')) {
@@ -391,21 +410,40 @@ class FormSectionComponent extends React.Component<AllProps> {
   }
 }
 
+const FIELD_SEPARATOR = '____'
+function unflatten<T>(data: Record<string, T>) {
+  return Object.fromEntries(
+    Object.entries(data).map(([key, value]) => [
+      key.replaceAll('.', FIELD_SEPARATOR),
+      value
+    ])
+  )
+}
+
+function flatten<T>(data: Record<string, T>) {
+  return Object.fromEntries(
+    Object.entries(data).map(([key, value]) => [
+      key.replaceAll(FIELD_SEPARATOR, '.'),
+      value
+    ])
+  )
+}
+
 export const FormFieldGenerator: React.FC<ExposedProps> = (props) => {
   const intl = useIntl()
 
   const nestedFormData = unflatten(props.formData)
 
-  const onChange = (values: IFormSectionData) => {
+  const onChange = (values: ActionFormData) => {
     props.onChange(flatten(values))
   }
 
-  const initialValues = unflatten<IFormFieldValue>(
+  const initialValues = unflatten<FieldValue>(
     props.initialValues ?? mapFieldsToValues(props.fields, nestedFormData)
   )
 
   return (
-    <Formik<IFormSectionData>
+    <Formik<ActionFormData>
       initialValues={initialValues}
       validate={(values) =>
         getValidationErrorsForForm(

packages/client/src/v2-events/components/forms/inputs/FileInput/DocumentListPreview.tsx

@@ -0,0 +1,96 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * OpenCRVS is also distributed under the terms of the Civil Registration
+ * & Healthcare Disclaimer located at http://opencrvs.org/license.
+ *
+ * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
+ */
+import * as React from 'react'
+import styled from 'styled-components'
+import { FieldValue, FileFieldValue } from '@opencrvs/commons/client'
+import { Button } from '@opencrvs/components/lib/Button/Button'
+import { Icon } from '@opencrvs/components/lib/Icon/Icon'
+import { Link } from '@opencrvs/components/lib/Link/Link'
+import { ISelectOption } from '@opencrvs/components/lib/Select'
+
+const Wrapper = styled.div`
+  max-width: 100%;
+  & > *:last-child {
+    margin-bottom: 8px;
+    border-bottom: 1.5px solid ${({ theme }) => theme.colors.grey100};
+  }
+`
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  border-top: 1.5px solid ${({ theme }) => theme.colors.grey100};
+  height: 48px;
+  padding: 0px 10px;
+`
+
+const Label = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  svg {
+    flex-shrink: 0;
+  }
+`
+
+interface Props {
+  id?: string
+  attachment?: FileFieldValue
+  label?: string
+  onSelect: (document: FieldValue | FileFieldValue) => void
+  dropdownOptions?: ISelectOption[]
+  onDelete?: (image: FieldValue | FileFieldValue) => void
+}
+
+export function DocumentListPreview({
+  id,
+  attachment,
+  label,
+  onSelect,
+  dropdownOptions,
+  onDelete
+}: Props) {
+  function getFormattedLabelForDocType(docType: string) {
+    const matchingOptionForDocType =
+      dropdownOptions &&
+      dropdownOptions.find((option) => option.value === docType)
+    return matchingOptionForDocType && matchingOptionForDocType.label
+  }
+  return (
+    <Wrapper id={`preview-list-${id}`}>
+      {attachment && label && (
+        <Container>
+          <Label>
+            <Icon color="grey600" name="Paperclip" size="medium" />
+            <Link onClick={(_) => onSelect(attachment)}>
+              <span>{getFormattedLabelForDocType(label) || label}</span>
+            </Link>
+          </Label>
+          <Button
+            aria-label="Delete attachment"
+            id="preview_delete"
+            size="small"
+            type="icon"
+            onClick={() => onDelete && onDelete(attachment)}
+          >
+            <Icon color="red" name="Trash" size="small" />
+          </Button>
+        </Container>
+      )}
+    </Wrapper>
+  )
+}