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,37 @@
  *
  * 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,
+  IFormFieldValue,
+  IFormSectionData,
+  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,
+  FileFieldValue
+} from '@opencrvs/commons/client'
 import {
   Field,
   FieldProps,
@@ -26,30 +53,7 @@ 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'
 
 const fadeIn = keyframes`
   from { opacity: 0; }
@@ -68,7 +72,7 @@ interface GeneratedInputFieldProps {
   fieldDefinition: FieldConfig
   fields: FieldConfig[]
   values: IFormSectionData
-  setFieldValue: (name: string, value: IFormFieldValue) => void
+  setFieldValue: (name: string, value: FieldValue) => void
   onClick?: () => void
   onChange: (e: React.ChangeEvent) => void
   onBlur: (e: React.FocusEvent) => void
@@ -133,6 +137,11 @@ const GeneratedInputField = React.memo<GeneratedInputFieldProps>(
         intl.formatMessage(fieldDefinition.placeholder)
     }
 
+    const handleFileChange = React.useCallback(
+      (value: FileFieldValue) => setFieldValue(fieldDefinition.id, value),
+      [fieldDefinition.id, setFieldValue]
+    )
+
     if (fieldDefinition.type === DATE) {
       return (
         <InputField {...inputFieldProps}>
@@ -166,17 +175,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,6 +188,13 @@ const GeneratedInputField = React.memo<GeneratedInputFieldProps>(
         </InputField>
       )
     }
+    if (fieldDefinition.type === 'FILE') {
+      return (
+        <InputField {...inputFieldProps}>
+          <FileInput {...inputProps} onChange={handleFileChange} />
+        </InputField>
+      )
+    }
     return <div>Unsupported field type {fieldDefinition.type}</div>
   }
 )
@@ -328,13 +333,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) => {
@@ -391,6 +408,25 @@ 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()
 

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

@@ -0,0 +1,157 @@
+/*
+ * 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 { IFileValue, IAttachmentValue } from '@client/forms'
+import { Spinner } from '@opencrvs/components/lib/Spinner'
+import { ISelectOption } from '@opencrvs/components/lib/Select'
+import { Link } from '@opencrvs/components/lib/Link/Link'
+import { Icon } from '@opencrvs/components/lib/Icon/Icon'
+import { Button } from '@opencrvs/components/lib/Button/Button'
+
+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 SpinnerContainer = styled(Spinner)`
+  margin-right: 6px;
+`
+
+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;
+  }
+`
+
+type Props = {
+  id?: string
+  documents?: IFileValue[] | null
+  processingDocuments?: Array<{ label: string }>
+  attachment?: IAttachmentValue
+  label?: string
+  onSelect: (document: IFileValue | IAttachmentValue) => void
+  dropdownOptions?: ISelectOption[]
+  onDelete?: (image: IFileValue | IAttachmentValue) => void
+  inReviewSection?: boolean
+}
+
+export const DocumentListPreview = ({
+  id,
+  documents,
+  processingDocuments,
+  attachment,
+  label,
+  onSelect,
+  dropdownOptions,
+  onDelete,
+  inReviewSection
+}: Props) => {
+  const getFormattedLabelForDocType = (docType: string) => {
+    const matchingOptionForDocType =
+      dropdownOptions &&
+      dropdownOptions.find((option) => option.value === docType)
+    return matchingOptionForDocType && matchingOptionForDocType.label
+  }
+  return (
+    <Wrapper id={`preview-list-${id}`}>
+      {documents &&
+        documents.map((document: IFileValue, key: number) => (
+          <Container key={`preview_${key}`}>
+            <Label>
+              <Icon color="grey600" name="Paperclip" size="large" />
+              <Link
+                id={`document_${(document.optionValues[1] as string).replace(
+                  /\s/g,
+                  ''
+                )}_link`}
+                key={key}
+                onClick={(_) => onSelect(document)}
+              >
+                <span>
+                  {(inReviewSection &&
+                    dropdownOptions &&
+                    dropdownOptions[key]?.label) ||
+                    getFormattedLabelForDocType(
+                      document.optionValues[1] as string
+                    ) ||
+                    (document.optionValues[1] as string)}
+                </span>
+              </Link>
+            </Label>
+            {onDelete && (
+              <Button
+                id="preview_delete"
+                type="icon"
+                size="small"
+                aria-label="Delete attachment"
+                onClick={() => onDelete(document)}
+              >
+                <Icon color="red" name="Trash" size="small" />
+              </Button>
+            )}
+          </Container>
+        ))}
+      {processingDocuments &&
+        processingDocuments.map(({ label }) => (
+          <Container key={label}>
+            <Label>
+              <Icon color="grey400" name="Paperclip" size="large" />
+              <Link disabled={true} key={label}>
+                <span>{getFormattedLabelForDocType(label) || label}</span>
+              </Link>
+            </Label>
+            <SpinnerContainer size={20} id={`document_${label}_processing`} />
+          </Container>
+        ))}
+
+      {attachment && label && (
+        <Container>
+          <Label>
+            <Icon color="grey600" name="Paperclip" size="medium" />
+            <Link onClick={(_) => onSelect(attachment)}>
+              <span>{getFormattedLabelForDocType(label) || label}</span>
+            </Link>
+          </Label>
+          <Button
+            id="preview_delete"
+            type="icon"
+            size="small"
+            aria-label="Delete attachment"
+            onClick={() => onDelete && onDelete(attachment)}
+          >
+            <Icon color="red" name="Trash" size="small" />
+          </Button>
+        </Container>
+      )}
+    </Wrapper>
+  )
+}