-
Notifications
You must be signed in to change notification settings - Fork 26
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 #3990 from open-formulieren/feature/3688-registrat…
…ion-variables-frontend [#3688] An extra admin variables tab for registration variables
- Loading branch information
Showing
8 changed files
with
289 additions
and
5 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
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
100 changes: 100 additions & 0 deletions
100
src/openforms/js/components/admin/form_design/variables/RegistrationVariables.js
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,100 @@ | ||
| import React, {useContext} from 'react'; | ||
| import {FormattedMessage} from 'react-intl'; | ||
|
|
||
| import {FormContext} from 'components/admin/form_design/Context'; | ||
| import Fieldset from 'components/admin/forms/Fieldset'; | ||
| import {ChangelistTableWrapper, HeadColumn} from 'components/admin/tables'; | ||
|
|
||
| import RegistrationSummaryList from './registration'; | ||
|
|
||
| const PluginVariables = ({ | ||
| headColumns, | ||
| registrationPlugin, | ||
| registrationBackends, | ||
| onFieldChange, | ||
| }) => ( | ||
| <ChangelistTableWrapper headColumns={headColumns} extraModifiers={['fixed']}> | ||
| {registrationPlugin.pluginVariables.map((variable, index) => { | ||
| return ( | ||
| <tr className={`row${(index % 2) + 1}`} key={variable.key}> | ||
| <td /> | ||
| <td>{variable.name}</td> | ||
| <td>{variable.key}</td> | ||
| <td> | ||
| <RegistrationSummaryList | ||
| variable={variable} | ||
| onFieldChange={onFieldChange} | ||
| registrationBackends={registrationBackends.filter( | ||
| b => b.backend === registrationPlugin.pluginIdentifier | ||
| )} | ||
| /> | ||
| </td> | ||
| <td>{variable.dataType}</td> | ||
| </tr> | ||
| ); | ||
| })} | ||
| </ChangelistTableWrapper> | ||
| ); | ||
|
|
||
| const RegistrationVariables = ({onFieldChange}) => { | ||
| const formContext = useContext(FormContext); | ||
| const registrationBackends = formContext.registrationBackends; | ||
| const registrationPluginsVariables = formContext.registrationPluginsVariables.filter( | ||
| plugin => | ||
| registrationBackends.some(b => b.backend === plugin.pluginIdentifier) && | ||
| plugin.pluginVariables.length | ||
| ); | ||
|
|
||
| const headColumns = ( | ||
| <> | ||
| <HeadColumn content="" /> | ||
| <HeadColumn | ||
| content={<FormattedMessage defaultMessage="Name" description="Variable table name title" />} | ||
| /> | ||
| <HeadColumn | ||
| content={<FormattedMessage defaultMessage="Key" description="Variable table key title" />} | ||
| /> | ||
| <HeadColumn | ||
| content={ | ||
| <FormattedMessage | ||
| defaultMessage="Registration" | ||
| description="Variable table registration title" | ||
| /> | ||
| } | ||
| /> | ||
| <HeadColumn | ||
| content={ | ||
| <FormattedMessage | ||
| defaultMessage="Data type" | ||
| description="Variable table data type title" | ||
| /> | ||
| } | ||
| /> | ||
| </> | ||
| ); | ||
|
|
||
| return ( | ||
| <div className="variables-table"> | ||
| {registrationPluginsVariables.map((registrationPlugin, index) => { | ||
| const pluginVariables = ( | ||
| <PluginVariables | ||
| headColumns={headColumns} | ||
| registrationPlugin={registrationPlugin} | ||
| registrationBackends={registrationBackends} | ||
| onFieldChange={onFieldChange} | ||
| /> | ||
| ); | ||
|
|
||
| if (registrationPluginsVariables.length === 1) return pluginVariables; | ||
|
|
||
| return ( | ||
| <Fieldset title={registrationPlugin.pluginVerboseName} key={index}> | ||
| {pluginVariables} | ||
| </Fieldset> | ||
| ); | ||
| })} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default RegistrationVariables; |
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