|
1 | 1 | import React, { useMemo, type ComponentType } from 'react'; |
2 | 2 | import i18n from '@dhis2/d2-i18n'; |
3 | 3 | import { withStyles, type WithStyles } from 'capture-core-utils/styles'; |
4 | | - |
5 | | -import { spacers, SimpleSingleSelect } from '@dhis2/ui'; |
| 4 | +import { spacers } from '@dhis2/ui'; |
| 5 | +// @ts-expect-error - SimpleSingleSelectField exists but types may not be available |
| 6 | +import { SimpleSingleSelectField } from '@dhis2-ui/select'; |
6 | 7 | import type { Props } from './TrackedEntityTypeSelector.types'; |
7 | 8 | import { scopeTypes } from '../../metaData'; |
8 | 9 | import { useTrackedEntityTypesWithCorrelatedPrograms, useCurrentTrackedEntityTypeId } from '../../hooks'; |
9 | | -import { InfoIconText } from '../InfoIconText'; |
10 | 10 |
|
11 | 11 | const styles: Readonly<any> = ({ typography }: any) => ({ |
12 | 12 | searchRow: { |
13 | | - maxWidth: typography.pxToRem(400), |
14 | | - display: 'flex', |
15 | | - flexDirection: 'column', |
16 | | - justifyContent: 'start', |
17 | | - marginBottom: spacers.dp8, |
18 | | - }, |
19 | | - searchRowSelectElement: { |
20 | | - width: '100%', |
21 | | - }, |
22 | | - informativeIcon: { |
23 | | - marginLeft: 8, |
24 | | - }, |
25 | | - customEmpty: { |
26 | | - textAlign: 'center', |
27 | | - padding: '8px 24px', |
| 13 | + maxWidth: typography.pxToRem(450), |
| 14 | + marginBottom: spacers.dp24, |
| 15 | + |
28 | 16 | }, |
29 | 17 | }); |
30 | 18 |
|
31 | 19 | type ComponentProps = Props & WithStyles<typeof styles>; |
32 | 20 |
|
33 | 21 | export const TrackedEntityTypeSelectorPlain = |
34 | | - ({ classes, onSelect, onSetTrackedEntityTypeIdOnUrl, accessNeeded, headerText, footerText }: ComponentProps) => { |
35 | | - const trackedEntityTypesWithCorrelatedPrograms = useTrackedEntityTypesWithCorrelatedPrograms(); |
36 | | - const selectedSearchScopeId = useCurrentTrackedEntityTypeId(); |
37 | | - |
38 | | - const options = useMemo(() => |
39 | | - Object.values(trackedEntityTypesWithCorrelatedPrograms) |
40 | | - .filter(({ trackedEntityTypeAccess }: any) => { |
41 | | - if (accessNeeded === 'write') { |
42 | | - return trackedEntityTypeAccess?.data?.write; |
43 | | - } |
44 | | - if (accessNeeded === 'read') { |
45 | | - return trackedEntityTypeAccess?.data?.read; |
46 | | - } |
47 | | - return false; |
48 | | - }) |
49 | | - .map(({ trackedEntityTypeName, trackedEntityTypeId }: any) => ({ |
50 | | - value: trackedEntityTypeId, |
51 | | - label: trackedEntityTypeName, |
52 | | - })), |
53 | | - [accessNeeded, trackedEntityTypesWithCorrelatedPrograms], |
54 | | - ); |
| 22 | + ({ classes, onSelect, onSetTrackedEntityTypeIdOnUrl, accessNeeded, footerText }: ComponentProps) => { |
| 23 | + const trackedEntityTypesWithCorrelatedPrograms = useTrackedEntityTypesWithCorrelatedPrograms(); |
| 24 | + const selectedSearchScopeId = useCurrentTrackedEntityTypeId(); |
55 | 25 |
|
56 | | - const selectedOption = selectedSearchScopeId |
57 | | - ? options.find(opt => opt.value === selectedSearchScopeId) ?? null |
58 | | - : null; |
| 26 | + const options = useMemo(() => |
| 27 | + Object.values(trackedEntityTypesWithCorrelatedPrograms) |
| 28 | + .filter(({ trackedEntityTypeAccess }: any) => { |
| 29 | + if (accessNeeded === 'write') { |
| 30 | + return trackedEntityTypeAccess?.data?.write; |
| 31 | + } |
| 32 | + if (accessNeeded === 'read') { |
| 33 | + return trackedEntityTypeAccess?.data?.read; |
| 34 | + } |
| 35 | + return false; |
| 36 | + }) |
| 37 | + .map(({ trackedEntityTypeName, trackedEntityTypeId }: any) => ({ |
| 38 | + value: trackedEntityTypeId, |
| 39 | + label: trackedEntityTypeName, |
| 40 | + })), |
| 41 | + [accessNeeded, trackedEntityTypesWithCorrelatedPrograms], |
| 42 | + ); |
59 | 43 |
|
60 | | - const handleSelectionChange = (nextValue: string | { label: string; value: string }) => { |
61 | | - // Handle both string and object (implementation sends object, types say string) |
62 | | - const value = typeof nextValue === 'string' ? nextValue : nextValue?.value || ''; |
63 | | - onSelect(value, scopeTypes.TRACKED_ENTITY_TYPE as keyof typeof scopeTypes); |
64 | | - onSetTrackedEntityTypeIdOnUrl({ trackedEntityTypeId: value }); |
65 | | - }; |
| 44 | + const selectedOption = useMemo(() => { |
| 45 | + if (!selectedSearchScopeId) { |
| 46 | + return undefined; |
| 47 | + } |
| 48 | + return options.find(opt => opt.value === selectedSearchScopeId); |
| 49 | + }, [selectedSearchScopeId, options]); |
66 | 50 |
|
67 | | - return (<> |
| 51 | + const handleSelectionChange = (option: { value: string; label: string }) => { |
| 52 | + onSelect(option.value, scopeTypes.TRACKED_ENTITY_TYPE as keyof typeof scopeTypes); |
| 53 | + onSetTrackedEntityTypeIdOnUrl({ trackedEntityTypeId: option.value }); |
| 54 | + }; |
68 | 55 |
|
69 | | - <div className={classes.searchRow}> |
70 | | - <div className={classes.searchRowSelectElement}> |
71 | | - {headerText && ( |
72 | | - <div style={{ display: 'block', marginBottom: '8px' }}> |
73 | | - {headerText} |
74 | | - </div> |
75 | | - )} |
76 | | - <SimpleSingleSelect |
77 | | - name="tracked-entity-type-selector" |
78 | | - options={options} |
79 | | - // @ts-expect-error - selected is not typed correctly |
80 | | - selected={selectedOption} |
81 | | - placeholder={i18n.t('Select tracked entity type')} |
82 | | - onChange={handleSelectionChange} |
83 | | - empty={ |
84 | | - <div className={classes.customEmpty}> |
85 | | - {i18n.t('No tracked entity types available')} |
86 | | - </div> |
87 | | - } |
88 | | - /> |
89 | | - </div> |
90 | | - </div> |
91 | | - { |
92 | | - !selectedSearchScopeId && |
93 | | - <div className={classes.informativeIcon}> |
94 | | - <InfoIconText> |
95 | | - { footerText } |
96 | | - </InfoIconText> |
97 | | - </div> |
98 | | - } |
99 | | - </> |
100 | | - ); |
101 | | - }; |
| 56 | + return ( |
| 57 | + <div className={classes.searchRow}> |
| 58 | + <SimpleSingleSelectField |
| 59 | + name="tracked-entity-type-selector" |
| 60 | + helpText={footerText} |
| 61 | + options={options} |
| 62 | + selected={selectedOption} |
| 63 | + placeholder={i18n.t('Select tracked entity type')} |
| 64 | + onChange={handleSelectionChange} |
| 65 | + empty={i18n.t('No tracked entity types available')} |
| 66 | + /> |
| 67 | + </div> |
| 68 | + ); |
| 69 | + }; |
102 | 70 |
|
103 | 71 | export const TrackedEntityTypeSelectorComponent = withStyles(styles)(TrackedEntityTypeSelectorPlain) as ComponentType<Props>; |
0 commit comments