updated code to support hypens in response page

opengovsg · Jan 9, 2025 · b1af63d · b1af63d
1 parent 9b74598
commit b1af63d
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 1 deletion.
diff --git a/frontend/src/features/admin-form/create/constants.ts b/frontend/src/features/admin-form/create/constants.ts
@@ -272,6 +272,18 @@ export const BASICFIELD_TO_DRAWER_META: {
     label: 'Local address',
     icon: SlLocationPin,
     isSubmitted: true,
+    searchAliases: [
+      'address',
+      'location',
+      'place',
+      'destination',
+      'directions',
+      'postal code',
+      'street',
+      'building',
+      'road',
+      'venue',
+    ],
   },
 }
 

diff --git a/frontend/src/features/admin-form/responses/IndividualResponsePage/IndividualResponsePage.tsx b/frontend/src/features/admin-form/responses/IndividualResponsePage/IndividualResponsePage.tsx
@@ -26,7 +26,10 @@ import { useStorageResponsesContext } from '../ResponsesPage/storage'
 
 import { DecryptedRow } from './DecryptedRow'
 import { IndividualResponseNavbar } from './IndividualResponseNavbar'
-import { useMutateDownloadAttachments } from './mutations'
+import {
+  getAddressResponseDisplay,
+  useMutateDownloadAttachments,
+} from './mutations'
 import { PaymentSection } from './PaymentSection'
 import { useIndividualSubmission } from './queries'
 
@@ -133,6 +136,10 @@ export const IndividualResponsePage = (): JSX.Element => {
       />
     )
 
+  // Logic to handle parsing address field into 1 line (from single responses)
+  if (data?.responses !== undefined)
+    data.responses = getAddressResponseDisplay(data.responses)
+
   const responseLinkWithKey = `${
     window.location.origin
   }/${getMultirespondentSubmissionEditPath(form?._id ?? '', submissionId, {

diff --git a/frontend/src/features/admin-form/responses/IndividualResponsePage/mutations.ts b/frontend/src/features/admin-form/responses/IndividualResponsePage/mutations.ts
@@ -9,6 +9,7 @@ import {
   downloadAndDecryptAttachment,
   downloadAndDecryptAttachmentsAsZip,
 } from '../ResponsesPage/storage/utils/downloadAndDecryptAttachment'
+import { AugmentedDecryptedResponse } from '../ResponsesPage/storage/utils/augmentDecryptedResponses'
 
 export const useMutateDownloadAttachments = () => {
   const toast = useToast({ status: 'success', isClosable: true })
@@ -79,3 +80,68 @@ export const useMutateDownloadAttachments = () => {
 
   return { downloadAttachmentMutation, downloadAttachmentsAsZipMutation }
 }
+
+/**
+ * Converts address field info as Single Responses into single-line string for response page display
+ * (backend requires inputs to be single responses for info to be separate csv columns)
+ *
+ * response:
+ * {"_id":"677ddc8a238af76fb6faff910","fieldType":"address","question":"Local address - blockNumber","isVisible":true,"answer":"161","questionNumber":2},{"_id":"677ddc8a238af76fb6faff911","fieldType":"address","question":"Local address - streetName","isVisible":true,"answer":"BUKIT BATOK STREET 11","questionNumber":3},{"_id":"677ddc8a238af76fb6faff912","fieldType":"address","question":"Local address - buildingName","isVisible":true,"answer":"","questionNumber":4},{"_id":"677ddc8a238af76fb6faff913","fieldType":"address","question":"Local address - levelNumber","isVisible":true,"answer":"","questionNumber":5},{"_id":"677ddc8a238af76fb6faff914","fieldType":"address","question":"Local address - unitNumber","isVisible":true,"answer":"","questionNumber":6},{"_id":"677ddc8a238af76fb6faff915","fieldType":"address","question":"Local address - postalCode","isVisible":true,"answer":"650161","questionNumber":7}
+ *
+ * responseV3:
+ * {"_id":"67760224fc81a060574be015","fieldType":"address","question":"Local address","answerArray":[["postalCode_650161"],["blockNumber_161"],["streetName_BUKIT BATOK STREET 11"],["buildingName_"],["levelNumber_"],["unitNumber_"]],"questionNumber":1}
+ */
+export const getAddressResponseDisplay = (
+  responses: AugmentedDecryptedResponse[],
+) => {
+  for (let i = 0; i < responses.length; i++) {
+    if ((responses[i].fieldType as string) === 'address') {
+      if (responses[i].answer !== undefined) {
+        //for storage mode
+        const addressInputSize = 6
+        const singleAddress = responses.slice(i, i + addressInputSize)
+        const values = singleAddress.map((item) => item.answer)
+
+        //manage unit number display
+        if (values[values.length - 2]) {
+          const combinedUnitNumber =
+            '#' + values[values.length - 3] + '-' + values[values.length - 2]
+          values.splice(values.length - 3, 2, combinedUnitNumber)
+        }
+
+        //manage postal code display
+        values[values.length - 1] = 'SINGAPORE ' + values[values.length - 1]
+
+        const singleAddressValue = values.join(', ')
+
+        singleAddress[0].answer = singleAddressValue
+        responses.splice(i, addressInputSize, singleAddress[0])
+      } else if (responses[i].answerArray !== undefined) {
+        // for MRF
+        console.log(responses[i].answerArray)
+        const values = responses[i].answerArray?.map(
+          (item) => item[0].split('_')[1],
+        )
+        console.log(values)
+
+        if (values === undefined) return responses
+
+        //manage unit number display
+        if (values[values.length - 2]) {
+          const combinedUnitNumber =
+            '#' + values[values.length - 3] + '-' + values[values.length - 2]
+          values.splice(values.length - 3, 2, combinedUnitNumber)
+        }
+
+        //manage postal code display
+        values[values.length - 1] = 'SINGAPORE ' + values[values.length - 1]
+
+        const singleAddressValue = values.join(', ')
+
+        // responses[0].answer = singleAddressValue
+        // responses.splice(i, 1, responses[i])
+      }
+    }
+  }
+  return responses
+}
diff --git a/...features/admin-form/responses/ResponsesPage/storage/utils/getDecryptedResponseInstance.ts b/...features/admin-form/responses/ResponsesPage/storage/utils/getDecryptedResponseInstance.ts
@@ -30,6 +30,12 @@ export const getDecryptedResponseInstance = (
     fieldRecordData.fieldType === BasicField.Checkbox
   ) {
     return new ArrayAnswerResponse(fieldRecordData)
+    // } else if (
+    //   // isArrayResponse(fieldRecordData) &&
+    //   fieldRecordData.fieldType === BasicField.Address
+    // ) {
+    //   console.log('I MADE IT HERE')
+    //   // return new ArrayAnswerResponse(fieldRecordData)
   } else if (isSingleResponse(fieldRecordData)) {
     return new SingleAnswerResponse(fieldRecordData)
   } else {

diff --git a/frontend/src/templates/Field/Address/AddressField.tsx b/frontend/src/templates/Field/Address/AddressField.tsx
@@ -155,6 +155,10 @@ export const AddressCompoundField = ({
                     {...field}
                     aria-label={`${schema.questionNumber}. Postal Code`}
                     placeholder="e.g. 650161"
+                    onInput={(e: React.FormEvent<HTMLInputElement>) => {
+                      const value = e.currentTarget.value
+                      e.currentTarget.value = value.replace(/\D/g, '') // Allow only digits
+                    }}
                   />
                   <Button
                     onClick={handleVerifyAddress}
@@ -220,6 +224,10 @@ export const AddressCompoundField = ({
                 {...field}
                 aria-label={`${schema.questionNumber}. Street name`}
                 placeholder="e.g. Bukit Batok Street 11"
+                onInput={(e: React.FormEvent<HTMLInputElement>) => {
+                  const value = e.currentTarget.value
+                  e.currentTarget.value = value.replace(/,/g, '') // Prevent commas
+                }}
               />
               <FormErrorMessage>
                 {addressSubFieldErrors?.streetName?.message}
@@ -246,6 +254,10 @@ export const AddressCompoundField = ({
               <Input
                 {...field}
                 aria-label={`${schema.questionNumber}. Building name`}
+                onInput={(e: React.FormEvent<HTMLInputElement>) => {
+                  const value = e.currentTarget.value
+                  e.currentTarget.value = value.replace(/,/g, '') // Prevent commas
+                }}
               />
             </Box>
           )}

diff --git a/src/app/modules/submission/submission.utils.ts b/src/app/modules/submission/submission.utils.ts
@@ -796,6 +796,11 @@ export const getAnswersForAddress = (
   if (!fields) {
     return []
   }
+
+  // move postalCode to the back of array to be displayed similarly in csv
+  const firstElement = fields.shift()
+  if (firstElement !== undefined) fields.push(firstElement)
+
   const subFieldResponses: ProcessedSingleAnswerResponse[] = []
   Object.entries(fields).forEach((subField, index) => {
     const key = subField[1][0].split('_')[0]

diff --git a/src/app/utils/field-validation/index.ts b/src/app/utils/field-validation/index.ts
@@ -442,6 +442,10 @@ const isValidationRequiredV3 = ({
           response.answer.child.length > 0 ||
           response.answer.childFields.length > 0,
       )
+    case BasicField.Address: {
+      const answerObjectDefined = !!response.answer
+      return ok((formField.required && isVisible) || answerObjectDefined)
+    }
   }
   logInvalidAnswer(formId, formField, 'Invalid response shape')
   return err(new ValidateFieldErrorV3('Response has invalid shape'))