Events v2 demo branch

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

@@ -454,7 +454,9 @@ class FormSectionComponent extends React.Component<AllProps> {
 
     const language = this.props.intl.locale
 
-    const errors = this.props.errors as unknown as Errors
+    const errors = makeFormFieldIdsFormikCompatible(
+      this.props.errors as unknown as Errors
+    )
 
     const fields = fieldsWithDotIds.map((field) => ({
       ...field,
@@ -506,11 +508,7 @@ class FormSectionComponent extends React.Component<AllProps> {
                       error={isFieldDisabled ? '' : error}
                       fields={fields}
                       formData={formData}
-                      touched={
-                        makeFormikFieldIdsOpenCRVSCompatible(touched)[
-                          field.id
-                        ] || false
-                      }
+                      touched={touched[field.id] || false}
                       values={values}
                       onUploadingStateChanged={
                         this.props.onUploadingStateChanged

packages/client/src/v2-events/components/forms/utils.ts

@@ -21,7 +21,8 @@ import {
   validate,
   DateFieldValue,
   TextFieldValue,
-  RadioGroupFieldValue
+  RadioGroupFieldValue,
+  FileFieldValue
 } from '@opencrvs/commons/client'
 import {
   CheckboxFieldValue,

packages/client/src/v2-events/components/forms/validation.ts

@@ -67,9 +67,32 @@ function getValidationErrors(
 
   const validators = field.validation ? field.validation : []
 
-  // if (field.required && !checkValidationErrorsOnly) {
-  //   validators.push(required(requiredErrorMessage))
-  // } else if (isFieldButton(field)) {
+  if (field.required && !checkValidationErrorsOnly) {
+    validators.push({
+      message: {
+        defaultMessage: 'Required for registration',
+        description: 'This is the error message for required fields',
+        id: 'error.required'
+      },
+      validator: {
+        type: 'object',
+        properties: {
+          $form: {
+            type: 'object',
+            properties: {
+              [field.id]: {
+                type: 'string',
+                minLength: 1
+              }
+            },
+            required: [field.id]
+          }
+        },
+        required: ['$form']
+      }
+    })
+  }
+  //  else if (isFieldButton(field)) {
   //   const { trigger } = field.options
   //   validators.push(httpErrorResponseValidator(trigger))
   // } else if (field.validateEmpty) {

packages/client/src/v2-events/features/workqueues/EventOverview/EventOverview.tsx

@@ -104,7 +104,7 @@ function EventOverview({
     : ''
   return (
     <Content
-      icon={() => <IconWithName name={''} status={'orange'} />}
+      icon={() => <IconWithName name={''} status={event.status} />}
       size={ContentSize.LARGE}
       title={title || fallbackTitle}
       titleColor={event.id ? 'copy' : 'grey600'}

packages/client/src/v2-events/features/workqueues/EventOverview/EventOverviewContext.tsx

@@ -28,7 +28,7 @@ const MISSING_USER = {
       family: 'user'
     }
   ],
-  systemRole: '-'
+  role: '-'
 }
 
 /**

packages/client/src/v2-events/features/workqueues/EventOverview/components/EventHistory/EventHistory.tsx

@@ -11,7 +11,7 @@
 import React from 'react'
 import { format } from 'date-fns'
 import styled from 'styled-components'
-import { useIntl } from 'react-intl'
+import { defineMessages, useIntl } from 'react-intl'
 import { useNavigate } from 'react-router-dom'
 import { stringify } from 'query-string'
 import { Link } from '@opencrvs/components'
@@ -28,7 +28,6 @@ import { formatUrl } from '@client/navigation'
 import { useEventOverviewContext } from '@client/v2-events/features/workqueues/EventOverview/EventOverviewContext'
 import { EventHistoryModal } from './EventHistoryModal'
 import { UserAvatar } from './UserAvatar'
-import { messages } from './messages'
 
 /**
  * Based on packages/client/src/views/RecordAudit/History.tsx
@@ -40,6 +39,25 @@ const TableDiv = styled.div`
 
 const DEFAULT_HISTORY_RECORD_PAGE_SIZE = 10
 
+const messages = defineMessages({
+  'event.history.timeFormat': {
+    defaultMessage: 'MMMM dd, yyyy · hh.mm a',
+    id: 'event.history.timeFormat',
+    description: 'Time format for timestamps in event history'
+  },
+  'events.history.status': {
+    id: `events.history.status`,
+    defaultMessage:
+      '{status, select, CREATE {Draft} VALIDATE {Validated} DRAFT {Draft} DECLARE {Declared} REGISTER {Registered} other {Unknown}}'
+  },
+  'event.history.role': {
+    id: 'event.history.role',
+    defaultMessage:
+      '{role, select, LOCAL_REGISTRAR{Local Registrar} other{Unknown}}',
+    description: 'Role of the user in the event history'
+  }
+})
+
 /**
  *  Renders the event history table. Used for audit trail.
  */
@@ -72,7 +90,9 @@ export function EventHistory({ history }: { history: ActionDocument[] }) {
             onHistoryRowClick(item, user)
           }}
         >
-          {item.type}
+          {intl.formatMessage(messages['events.history.status'], {
+            status: item.type
+          })}
         </Link>
       ),
       user: (
@@ -95,7 +115,9 @@ export function EventHistory({ history }: { history: ActionDocument[] }) {
           />
         </Link>
       ),
-      role: user.systemRole,
+      role: intl.formatMessage(messages['event.history.role'], {
+        role: user.role
+      }),
       location: (
         <Link
           font="bold14"

packages/client/src/v2-events/features/workqueues/EventOverview/components/EventHistory/EventHistoryModal.tsx

@@ -9,14 +9,21 @@
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
 import React from 'react'
-import { useIntl } from 'react-intl'
+import { defineMessages, useIntl } from 'react-intl'
 import format from 'date-fns/format'
 import { ResponsiveModal, Stack } from '@opencrvs/components'
 import { Text } from '@opencrvs/components/lib/Text'
 import { ActionDocument } from '@opencrvs/commons/client'
 import { ResolvedUser } from '@opencrvs/commons'
 import { getUsersFullName, joinValues } from '@client/v2-events/utils'
-import { messages } from './messages'
+
+const messages = defineMessages({
+  'event.history.modal.timeFormat': {
+    defaultMessage: 'MMMM dd, yyyy · hh.mm a',
+    id: 'event.history.timeFormat',
+    description: 'Time format for timestamps in event history'
+  }
+})
 
 /**
  * Detailed view of single Action, showing the history of the event.
@@ -52,7 +59,7 @@ export function EventHistoryModal({
               name,
               format(
                 new Date(history.createdAt),
-                intl.formatMessage(messages['event.history.timeFormat'])
+                intl.formatMessage(messages['event.history.modal.timeFormat'])
               )
             ],
             ' — '

packages/client/src/v2-events/features/workqueues/Workqueue.tsx

@@ -11,7 +11,7 @@
 
 import { mapKeys, orderBy } from 'lodash'
 import React, { useState } from 'react'
-import { useIntl } from 'react-intl'
+import { defineMessages, useIntl } from 'react-intl'
 import ReactTooltip from 'react-tooltip'
 import styled, { useTheme } from 'styled-components'
 
@@ -20,11 +20,11 @@ import { useTypedSearchParams } from 'react-router-typesafe-routes/dom'
 
 import {
   defaultColumns,
+  EventConfig,
   EventIndex,
-  RootWorkqueueConfig,
-  workqueues,
   getAllFields,
-  EventConfig
+  RootWorkqueueConfig,
+  workqueues
 } from '@opencrvs/commons/client'
 import { useWindowSize } from '@opencrvs/components/lib/hooks'
 import {
@@ -35,12 +35,21 @@ import {
 import { IconWithName } from '@client/v2-events/components/IconWithName'
 import { useEventConfigurations } from '@client/v2-events/features/events/useEventConfiguration'
 import { useEvents } from '@client/v2-events/features/events/useEvents/useEvents'
-import { messages } from '@client/v2-events/messages'
-import { ROUTES } from '@client/v2-events/routes'
+
+import { formattedDuration } from '@client/utils/date-formatting'
 import { getInitialValues } from '@client/v2-events/components/forms/utils'
+import { ROUTES } from '@client/v2-events/routes'
 import { WQContentWrapper } from './components/ContentWrapper'
 import { useIntlFormatMessageWithFlattenedParams } from './utils'
 
+const messages = defineMessages({
+  empty: {
+    defaultMessage: 'Empty message',
+    description: 'Label for workqueue tooltip',
+    id: 'regHome.issued'
+  }
+})
+
 function getOrThrow<T>(x: T, message: string) {
   if (x === undefined || x === null) {
     throw new Error(message)
@@ -207,8 +216,8 @@ function Workqueue({
         ...fieldsWithPopulatedValues,
         ...event,
         event: intl.formatMessage(eventConfig.label),
-        createdAt: intl.formatDate(new Date(event.createdAt)),
-        modifiedAt: intl.formatDate(new Date(event.modifiedAt)),
+        createdAt: formattedDuration(new Date(event.createdAt)),
+        modifiedAt: formattedDuration(new Date(event.modifiedAt)),
 
         status: intl.formatMessage(
           {

packages/client/src/v2-events/hooks/useTransformer.ts

@@ -11,7 +11,11 @@
 
 import { useIntl } from 'react-intl'
 import { useSelector } from 'react-redux'
-import { ActionFormData, findPageFields } from '@opencrvs/commons/client'
+import {
+  ActionFormData,
+  findPageFields,
+  FieldType
+} from '@opencrvs/commons/client'
 import { fieldValueToString } from '@client/v2-events/components/forms/utils'
 import { useEventConfiguration } from '@client/v2-events/features/events/useEventConfiguration'
 // eslint-disable-next-line no-restricted-imports
@@ -36,6 +40,10 @@ export const useTransformer = (eventType: string) => {
         throw new Error(`Field not found for ${key}`)
       }
 
+      if (fieldConfig.type === FieldType.FILE) {
+        continue
+      }
+
       stringifiedValues[key] = fieldValueToString({
         fieldConfig,
         value,

packages/client/src/v2-events/messages/index.ts

@@ -10,7 +10,6 @@
  */
 
 export * from './constants'
-export * from './registrarHome'
 export * from './workqueue'
 export * from './navigation'
 export * from './errors'

packages/commons/src/events/ActionDocument.ts

@@ -112,7 +112,7 @@ export type ActionDocument = z.infer<typeof ActionDocument>
 
 export const ResolvedUser = z.object({
   id: z.string(),
-  systemRole: z.string(),
+  role: z.string(),
   name: z.array(
     z.object({
       use: z.string(),

packages/events/src/router/user/user.list.test.ts

@@ -39,7 +39,7 @@ test('Returns user in correct format', async () => {
     {
       id: user.id,
       name: user.name,
-      systemRole: user.systemRole
+      role: user.role
     }
   ])
 })

packages/events/src/service/deduplication/deduplication.test.ts

@@ -10,9 +10,10 @@
  */
 
 import { getOrCreateClient } from '@events/storage/elasticsearch'
-import { DeduplicationConfig, getUUID } from '@opencrvs/commons'
+import { DeduplicationConfig, EventIndex, getUUID } from '@opencrvs/commons'
 import { searchForDuplicates } from './deduplication'
 import { getEventIndexName } from '@events/storage/__mocks__/elasticsearch'
+import { encodeEventIndex } from '@events/service/indexing/indexing'
 
 const LEGACY_BIRTH_DEDUPLICATION_RULES = {
   id: 'Legacy birth deduplication check',
@@ -155,11 +156,11 @@ export async function findDuplicates(
     index: getEventIndexName(),
     id: getUUID(),
     body: {
-      doc: {
+      doc: encodeEventIndex({
         id: getUUID(),
         transactionId: getUUID(),
         data: existingComposition
-      },
+      } as unknown as EventIndex),
       doc_as_upsert: true
     },
     refresh: 'wait_for'