-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #204 from open-formulieren/feature/5016-data-sourc…
…e-referentielijsten ✨ [#5016] Referentielijsten dataSrc for options
- Loading branch information
Showing
30 changed files
with
1,038 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import {useFormikContext} from 'formik'; | ||
| import {useContext} from 'react'; | ||
| import {FormattedMessage, useIntl} from 'react-intl'; | ||
| import useAsync from 'react-use/esm/useAsync'; | ||
|
|
||
| import Select from '@/components/formio/select'; | ||
| import {BuilderContext} from '@/context'; | ||
|
|
||
| export interface ReferentielijstenTabelOption { | ||
| code: string; | ||
| naam: string; | ||
| isGeldig: boolean; | ||
| } | ||
|
|
||
| function isTabelOptions( | ||
| options: ReferentielijstenTabelOption[] | undefined | ||
| ): options is ReferentielijstenTabelOption[] { | ||
| return options !== undefined; | ||
| } | ||
|
|
||
| function transformItems(items: ReferentielijstenTabelOption[]) { | ||
| const intl = useIntl(); | ||
| return items.map(item => { | ||
| const {code, naam, isGeldig} = item; | ||
| return { | ||
| value: code, | ||
| label: !isGeldig | ||
| ? `${naam} ${intl.formatMessage({ | ||
| description: 'Message to indicate that Referentielijsten tabel is expired', | ||
| defaultMessage: '(niet meer geldig)', | ||
| })}` | ||
| : naam, | ||
| }; | ||
| }); | ||
| } | ||
|
|
||
| export interface ComponentWithReferentielijsten { | ||
| openForms?: { | ||
| dataSrc: 'referentielijsten'; | ||
| service: string; | ||
| code: string; | ||
| }; | ||
| } | ||
|
|
||
| /** | ||
| * The `ReferentielijstenTabelCode` component is used to specify the code of the tabel | ||
| * in Referentielijsten API for which the items will be fetched | ||
| */ | ||
| export const ReferentielijstenTabelCode: React.FC = () => { | ||
| const intl = useIntl(); | ||
| const {values} = useFormikContext<ComponentWithReferentielijsten>(); | ||
| const service = values?.openForms?.service; | ||
| const {getReferentielijstenTabellen} = useContext(BuilderContext); | ||
| const { | ||
| value: options, | ||
| loading, | ||
| error, | ||
| } = useAsync(async () => { | ||
| if (service) { | ||
| return await getReferentielijstenTabellen(service); | ||
| } | ||
| return []; | ||
| }, [service]); | ||
|
|
||
| if (error) { | ||
| throw error; | ||
| } | ||
| const _options = isTabelOptions(options) ? transformItems(options) : []; | ||
|
|
||
| return ( | ||
| <Select | ||
| name="openForms.code" | ||
| label={ | ||
| <FormattedMessage | ||
| description="Label for 'openForms.code' builder field" | ||
| defaultMessage="Referentielijsten table code" | ||
| /> | ||
| } | ||
| tooltip={intl.formatMessage({ | ||
| description: "Description for the 'openForms.code' builder field", | ||
| defaultMessage: `The code of the table from which the options will be retrieved.`, | ||
| })} | ||
| isLoading={loading} | ||
| options={_options} | ||
| valueProperty="value" | ||
| required | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default ReferentielijstenTabelCode; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| /** | ||
| * Components to manage options/values for fields that support this, such as: | ||
| * | ||
| * - select | ||
| * - selectboxes | ||
| * - radio | ||
| */ | ||
| export {default as ReferentielijstenServiceSelect} from './service'; | ||
| export {default as ReferentielijstenTabelCode} from './code'; |
63 changes: 63 additions & 0 deletions
63
src/components/builder/values/referentielijsten/service.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import {useFormikContext} from 'formik'; | ||
| import {useContext} from 'react'; | ||
| import {FormattedMessage, useIntl} from 'react-intl'; | ||
| import useAsync from 'react-use/esm/useAsync'; | ||
|
|
||
| import Select from '@/components/formio/select'; | ||
| import {BuilderContext} from '@/context'; | ||
|
|
||
| import {ComponentWithReferentielijsten} from './code'; | ||
|
|
||
| export interface ReferentielijstenServiceOption { | ||
| url: string; | ||
| slug: string; | ||
| label: string; | ||
| apiRoot: string; | ||
| apiType: string; | ||
| } | ||
|
|
||
| /** | ||
| * Fetch the available Referentielijsten Services and display them in a Select | ||
| * | ||
| * The selected service is used at runtime to retrieve options to populate a Select | ||
| * | ||
| * This requires an async function `getServices` to be provided to the | ||
| * BuilderContext which is responsible for retrieving the list of available plugins. | ||
| * | ||
| * If a fetch error occurs, it is thrown during rendering - you should provide your | ||
| * own error boundary to catch this. | ||
| */ | ||
| const ReferentielijstenServiceSelect: React.FC = () => { | ||
| const intl = useIntl(); | ||
| const {values, setFieldValue} = useFormikContext<ComponentWithReferentielijsten>(); | ||
| const {getServices} = useContext(BuilderContext); | ||
| const {value: options = [], loading} = useAsync(async () => { | ||
| const options = await getServices('referentielijsten'); | ||
| if (options.length === 1 && !values?.openForms?.service) { | ||
| setFieldValue('openForms.service', options[0].slug); | ||
| } | ||
| return options; | ||
| }, [getServices, setFieldValue]); // values is deliberately excluded from the dependency array | ||
|
|
||
| return ( | ||
| <Select | ||
| name="openForms.service" | ||
| label={ | ||
| <FormattedMessage | ||
| description="Label for 'openForms.service' builder field" | ||
| defaultMessage="Referentielijsten service" | ||
| /> | ||
| } | ||
| tooltip={intl.formatMessage({ | ||
| description: "Description for the 'openForms.service' builder field", | ||
| defaultMessage: `The identifier of the Referentielijsten service from which the options will be retrieved.`, | ||
| })} | ||
| isLoading={loading} | ||
| valueProperty="slug" | ||
| options={options} | ||
| required | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default ReferentielijstenServiceSelect; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.