feat(QualificationModal): Add search bar

react/QualificationModal/helpers.js

@@ -36,3 +36,26 @@ export const makeOptions = lang => {
     ]
   }
 }
+
+export const searchOptionsFn = (options, value) => {
+  const deepOptions = options.children
+    .flatMap(child => child.children)
+    .reduce((acc, curr) => {
+      if (!!curr && !acc.some(el => el.id === curr.id)) {
+        acc.push(curr)
+      }
+      return acc
+    }, [])
+
+  return deepOptions.filter(deepOption =>
+    deepOption.title.toLowerCase().includes(value.toLowerCase())
+  )
+}
+
+export const makeSearchOptions = ({ options, title, noDataLabel, t }) => {
+  return {
+    placeholderSearch: title || t('QualificationModal.title'),
+    noDataLabel: noDataLabel || t('QualificationModal.noDataLabel'),
+    onSearch: value => searchOptionsFn(options, value)
+  }
+}

react/QualificationModal/helpers.spec.js

@@ -0,0 +1,32 @@
+import { searchOptionsFn } from './helpers'
+
+describe('searchOptionsFn', () => {
+  it('should return only the uniq good result', () => {
+    const options = {
+      children: [
+        { id: 'none', title: 'None' },
+        {
+          id: 'theme1',
+          title: 'Identity',
+          children: [
+            { id: '01', title: 'Identity Photo' },
+            { id: '02', title: 'ID card' }
+          ]
+        },
+        {
+          id: 'theme2',
+          title: 'Family',
+          children: [
+            { id: '03', title: 'Family record book' },
+            { id: '04', title: 'Birth certificate' },
+            { id: '01', title: 'Identity Photo' }
+          ]
+        }
+      ]
+    }
+
+    const res = searchOptionsFn(options, 'photo')
+
+    expect(res).toStrictEqual([{ id: '01', title: 'Identity Photo' }])
+  })
+})

react/QualificationModal/index.jsx

@@ -4,18 +4,28 @@ import React, { useMemo } from 'react'
 import { useClient } from 'cozy-client'
 import { isSupportedQualification } from 'cozy-client/dist/models/document/qualification'
 
-import { makeOptions } from './helpers'
+import { makeOptions, makeSearchOptions } from './helpers'
 import { locales } from './locales'
 import NestedSelectResponsive from '../NestedSelect/NestedSelectResponsive'
 import { useI18n, useExtendI18n } from '../providers/I18n'
 
-const QualificationModal = ({ file, title, onClose }) => {
+const QualificationModal = ({ file, title, noDataLabel, onClose }) => {
   useExtendI18n(locales)
   const client = useClient()
   const { t, lang } = useI18n()
 
   const qualificationLabel = file.metadata?.qualification?.label
   const options = useMemo(() => makeOptions(lang), [lang])
+  const searchOptions = useMemo(
+    () =>
+      makeSearchOptions({
+        options,
+        title,
+        noDataLabel,
+        t
+      }),
+    [options, title, noDataLabel, t]
+  )
 
   const isSelected = ({ id, item }) => {
     return isSupportedQualification(qualificationLabel)
@@ -40,11 +50,11 @@ const QualificationModal = ({ file, title, onClose }) => {
 
   return (
     <NestedSelectResponsive
-      title={title || t('QualificationModal.title')}
       options={options}
       noDivider
       document={file}
       isSelected={isSelected}
+      searchOptions={searchOptions}
       onSelect={handleClick}
       onClose={onClose}
     />
@@ -54,6 +64,7 @@ const QualificationModal = ({ file, title, onClose }) => {
 QualificationModal.propTypes = {
   file: PropTypes.object,
   title: PropTypes.string,
+  noDataLabel: PropTypes.string,
   onClose: PropTypes.func
 }
 

react/QualificationModal/locales/en.json

@@ -1,5 +1,6 @@
 {
   "QualificationModal": {
-    "title": "Document type"
+    "title": "Document type",
+    "noDataLabel": "No result"
   }
 }

react/QualificationModal/locales/fr.json

@@ -1,5 +1,6 @@
 {
   "QualificationModal": {
-    "title": "Type de document"
+    "title": "Type de document",
+    "noDataLabel": "Aucun résultat"
   }
 }