Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: support search alias matching and refactor duplicate code
Browse files Browse the repository at this point in the history
kevin9foong committed Dec 2, 2024

Verified

This commit was signed with the committer’s verified signature.
giuseppe Giuseppe Scrivano
1 parent 74071ed commit 3e3c248
Showing 4 changed files with 112 additions and 38 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useMemo } from 'react'
import { Box } from '@chakra-ui/react'
import { Droppable } from '@hello-pangea/dnd'

@@ -12,16 +11,16 @@ import { useCreateTabForm } from '../../../../builder-and-design/useCreateTabFor
import { DraggableBasicFieldListOption } from '../FieldListOption'

import { FieldSection } from './FieldSection'
import { filterFieldsBySearchValue } from './utils'

export const BasicFieldPanel = ({ searchValue }: { searchValue: string }) => {
const { isLoading } = useCreateTabForm()

const filteredCreateBasicFields = useMemo(() => {
return BASIC_FIELDS_ORDERED.filter((fieldType) => {
const meta = BASICFIELD_TO_DRAWER_META[fieldType]
return meta.label.toLowerCase().includes(searchValue.toLowerCase())
})
}, [searchValue])
const filteredCreateBasicFields = filterFieldsBySearchValue(
searchValue,
BASIC_FIELDS_ORDERED,
BASICFIELD_TO_DRAWER_META,
)

return (
<Droppable isDropDisabled droppableId={CREATE_FIELD_DROP_ID}>
Original file line number Diff line number Diff line change
@@ -36,6 +36,7 @@ import { useCreateTabForm } from '../../../../builder-and-design/useCreateTabFor
import { DraggableMyInfoFieldListOption } from '../FieldListOption'

import { FieldSection } from './FieldSection'
import { filterFieldsBySearchValue } from './utils'

const SGID_SUPPORTED_V1 = [
MyInfoAttribute.Name,
@@ -126,40 +127,35 @@ export const MyInfoFieldPanel = ({ searchValue }: { searchValue: string }) => {
[form, isDisabled, sgIDUnSupported],
)

const filteredCreateMyInfoPersonalFields = useMemo(() => {
return CREATE_MYINFO_PERSONAL_FIELDS_ORDERED.filter((fieldType) => {
const meta = MYINFO_FIELD_TO_DRAWER_META[fieldType]
return meta.label.toLowerCase().includes(searchValue.toLowerCase())
})
}, [searchValue])
const filteredCreateMyInfoPersonalFields = filterFieldsBySearchValue(
searchValue,
CREATE_MYINFO_PERSONAL_FIELDS_ORDERED,
MYINFO_FIELD_TO_DRAWER_META,
)

const filteredCreateMyInfoContactFields = useMemo(() => {
return CREATE_MYINFO_CONTACT_FIELDS_ORDERED.filter((fieldType) => {
const meta = MYINFO_FIELD_TO_DRAWER_META[fieldType]
return meta.label.toLowerCase().includes(searchValue.toLowerCase())
})
}, [searchValue])
const filteredCreateMyInfoContactFields = filterFieldsBySearchValue(
searchValue,
CREATE_MYINFO_CONTACT_FIELDS_ORDERED,
MYINFO_FIELD_TO_DRAWER_META,
)

const filteredCreateMyInfoParticularsFields = useMemo(() => {
return CREATE_MYINFO_PARTICULARS_FIELDS_ORDERED.filter((fieldType) => {
const meta = MYINFO_FIELD_TO_DRAWER_META[fieldType]
return meta.label.toLowerCase().includes(searchValue.toLowerCase())
})
}, [searchValue])
const filteredCreateMyInfoParticularsFields = filterFieldsBySearchValue(
searchValue,
CREATE_MYINFO_PARTICULARS_FIELDS_ORDERED,
MYINFO_FIELD_TO_DRAWER_META,
)

const filteredCreateMyInfoMarriageFields = useMemo(() => {
return CREATE_MYINFO_MARRIAGE_FIELDS_ORDERED.filter((fieldType) => {
const meta = MYINFO_FIELD_TO_DRAWER_META[fieldType]
return meta.label.toLowerCase().includes(searchValue.toLowerCase())
})
}, [searchValue])
const filteredCreateMyInfoMarriageFields = filterFieldsBySearchValue(
searchValue,
CREATE_MYINFO_MARRIAGE_FIELDS_ORDERED,
MYINFO_FIELD_TO_DRAWER_META,
)

const filteredCreateMyInfoChildrenFields = useMemo(() => {
return CREATE_MYINFO_CHILDREN_FIELDS_ORDERED.filter((fieldType) => {
const meta = MYINFO_FIELD_TO_DRAWER_META[fieldType]
return meta.label.toLowerCase().includes(searchValue.toLowerCase())
})
}, [searchValue])
const filteredCreateMyInfoChildrenFields = filterFieldsBySearchValue(
searchValue,
CREATE_MYINFO_CHILDREN_FIELDS_ORDERED,
MYINFO_FIELD_TO_DRAWER_META,
)

return (
<>
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { BasicField, MyInfoAttribute } from '~shared/types'

import { BuilderSidebarFieldMeta } from '~features/admin-form/create/constants'

const checkSearchValueMatchesFieldMeta = (
searchValue: string,
fieldMeta: BuilderSidebarFieldMeta,
) => {
const lowerCaseSearchValue = searchValue.toLowerCase()
return (
fieldMeta.label.toLowerCase().includes(lowerCaseSearchValue) ||
fieldMeta.alias?.some((alias) =>
alias.toLowerCase().includes(lowerCaseSearchValue),
)
)
}

export const filterFieldsBySearchValue = <
T extends BasicField | MyInfoAttribute,
>(
searchValue: string,
fields: T[],
fieldsMeta: {
[key in T]: BuilderSidebarFieldMeta
},
) => {
return fields.filter((fieldType) => {
const fieldMeta = fieldsMeta[fieldType]
return checkSearchValueMatchesFieldMeta(searchValue, fieldMeta)
})
}
50 changes: 49 additions & 1 deletion frontend/src/features/admin-form/create/constants.ts
Original file line number Diff line number Diff line change
@@ -47,11 +47,12 @@ import { As } from '@chakra-ui/react'

import { BasicField, MyInfoAttribute } from '~shared/types/field'

type BuilderSidebarFieldMeta = {
export type BuilderSidebarFieldMeta = {
label: string
icon: As
// Is this fieldType included in submissions?
isSubmitted: boolean
alias?: string[]
}

// !!! Do not use this to reference field titles for MyInfo fields. !!!
@@ -63,126 +64,173 @@ export const BASICFIELD_TO_DRAWER_META: {
label: 'Image',
icon: BiImage,
isSubmitted: false,
alias: ['photo', 'picture'],
},

[BasicField.Statement]: {
label: 'Paragraph',
icon: BiText,
isSubmitted: false,
alias: ['description'],
},

[BasicField.Section]: {
label: 'Heading',
icon: BiHeading,
isSubmitted: false,
alias: ['header', 'title', 'section'],
},

[BasicField.Attachment]: {
label: 'Attachment',
icon: BiCloudUpload,
isSubmitted: true,
alias: ['document', 'file', 'upload'],
},

[BasicField.Checkbox]: {
label: 'Checkbox',
icon: BiSelectMultiple,
isSubmitted: true,
alias: ['choice', 'options', 'multiple'],
},

[BasicField.Date]: {
label: 'Date',
icon: BiCalendarEvent,
isSubmitted: true,
alias: [
'birthdate',
'dob',
'date of birth',
'event date',
'start date',
'end date',
'time',
],
},

[BasicField.Decimal]: {
label: 'Decimal',
icon: BiCalculator,
isSubmitted: true,
alias: ['price', 'amount', 'cost'],
},

[BasicField.Dropdown]: {
label: 'Dropdown',
icon: BiCaretDownSquare,
isSubmitted: true,
alias: ['choice', 'options', 'category', 'type', 'status'],
},

[BasicField.CountryRegion]: {
label: 'Country/Region',
icon: BiFlag,
isSubmitted: true,
alias: ['country', 'region', 'location', 'nationality'],
},

[BasicField.Email]: {
label: 'Email',
icon: BiMailSend,
isSubmitted: true,
alias: ['contact'],
},

[BasicField.HomeNo]: {
label: 'Home number',
icon: BiPhone,
isSubmitted: true,
alias: ['phone', 'contact', 'telephone'],
},

[BasicField.LongText]: {
label: 'Long answer',
icon: BiAlignLeft,
isSubmitted: true,
alias: [
'text',
'description',
'comments',
'feedback',
'notes',
'details',
'explanation',
'paragraph',
],
},

[BasicField.Mobile]: {
label: 'Mobile number',
icon: BiMobile,
isSubmitted: true,
alias: ['phone', 'contact', 'telephone'],
},

[BasicField.Nric]: {
label: 'NRIC/FIN',
icon: BiUser,
isSubmitted: true,
alias: ['id', 'identification', 'national', 'singpass', 'ic number'],
},

[BasicField.Number]: {
label: 'Number',
icon: BiHash,
isSubmitted: true,
alias: ['age', 'quantity', 'count'],
},

[BasicField.Radio]: {
label: 'Radio',
icon: BiRadioCircleMarked,
isSubmitted: true,
alias: ['choice', 'options', 'mcq', 'multiple'],
},

[BasicField.Rating]: {
label: 'Rating',
icon: BiStar,
isSubmitted: true,
alias: ['satisfaction', 'quality', 'performance'],
},

[BasicField.ShortText]: {
label: 'Short answer',
icon: BiRename,
isSubmitted: true,
alias: ['name', 'text'],
},

[BasicField.Table]: {
label: 'Table',
icon: BiTable,
isSubmitted: true,
alias: [
'grid',
'spreadsheet',
'list',
'collection',
'entries',
'records',
'items',
'multiple',
],
},

[BasicField.Uen]: {
label: 'UEN',
icon: BiBuilding,
isSubmitted: true,
alias: ['business id', 'company registration', 'organization number'],
},

[BasicField.YesNo]: {
label: 'Yes/No',
icon: BiToggleLeft,
isSubmitted: true,
alias: ['consent', 'agreement', 'confirmation', 'approval', 'accept_terms'],
},

[BasicField.Children]: {

0 comments on commit 3e3c248

Please sign in to comment.