Display family name before the first name as per configuration

openmrs · Jun 28, 2023 · 030a9c2 · 030a9c2
1 parent 3e52e59
commit 030a9c2
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 28 deletions.
diff --git a/packages/esm-patient-registration-app/src/config-schema.ts b/packages/esm-patient-registration-app/src/config-schema.ts
@@ -41,6 +41,7 @@ export interface RegistrationConfig {
       defaultUnknownGivenName: string;
       defaultUnknownFamilyName: string;
       displayCapturePhoto: boolean;
+      displayFamilyNameFieldFirst: boolean;
     };
     gender: Array<Gender>;
     address: {
@@ -220,6 +221,11 @@ export const esmPatientRegistrationSchema = {
         _default: true,
         _description: 'Whether to display capture patient photo slot on name field',
       },
+      displayFamilyNameFieldFirst: {
+        _type: Type.Boolean,
+        _default: false,
+        _description: "Whether to display the name fields in the order 'Family name' -> 'Middle name' -> 'First name'",
+      },
     },
     gender: {
       _type: Type.Array,

diff --git a/...esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx b/...esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx
@@ -21,7 +21,7 @@ function checkNumber(value: string) {
 export const NameField = () => {
   const {
     fieldConfigurations: {
-      name: { displayCapturePhoto },
+      name: { displayCapturePhoto, displayFamilyNameFieldFirst },
     },
   } = useConfig() as RegistrationConfig;
   const { t } = useTranslation();
@@ -55,6 +55,36 @@ export const NameField = () => {
     }
   };
 
+  const firstNameField = (
+    <Input
+      id="givenName"
+      name="givenName"
+      labelText={t('givenNameLabelText', 'First Name')}
+      checkWarning={checkNumber}
+      required
+    />
+  );
+
+  const middleNameField = (
+    <Input
+      id="middleName"
+      name="middleName"
+      labelText={t('middleNameLabelText', 'Middle Name')}
+      light
+      checkWarning={checkNumber}
+    />
+  );
+
+  const familyNameField = (
+    <Input
+      id="familyName"
+      name="familyName"
+      labelText={t('familyNameLabelText', 'Family Name')}
+      checkWarning={checkNumber}
+      required
+    />
+  );
+
   return (
     <div>
       <h4 className={styles.productiveHeading02Light}>{t('fullNameLabelText', 'Full Name')}</h4>
@@ -75,33 +105,20 @@ export const NameField = () => {
             <Switch name="known" text={t('yes', 'Yes')} />
             <Switch name="unknown" text={t('no', 'No')} />
           </ContentSwitcher>
-          {nameKnown && (
-            <>
-              <Input
-                id="givenName"
-                name="givenName"
-                labelText={t('givenNameLabelText', 'First Name')}
-                checkWarning={checkNumber}
-                required
-              />
-              {fieldConfigs.displayMiddleName && (
-                <Input
-                  id="middleName"
-                  name="middleName"
-                  labelText={t('middleNameLabelText', 'Middle Name')}
-                  light
-                  checkWarning={checkNumber}
-                />
-              )}
-              <Input
-                id="familyName"
-                name="familyName"
-                labelText={t('familyNameLabelText', 'Family Name')}
-                checkWarning={checkNumber}
-                required
-              />
-            </>
-          )}
+          {nameKnown &&
+            (!displayFamilyNameFieldFirst ? (
+              <>
+                {firstNameField}
+                {fieldConfigs.displayMiddleName && middleNameField}
+                {familyNameField}
+              </>
+            ) : (
+              <>
+                {familyNameField}
+                {fieldConfigs.displayMiddleName && middleNameField}
+                {firstNameField}
+              </>
+            ))}
         </div>
       </div>
     </div>