🚧 [#5016] Referentielijsten dataSrc for options

src/components/ComponentPreview.stories.tsx

@@ -908,6 +908,30 @@ export const SelectVariable: Story = {
   },
 };
 
+// /**
+//  * A select component with options sources from Referentielijsten API.
+//  */
+// export const SelectReferentielijsten: Story = {
+//   name: 'Select: values from Referentielijsten API',
+//   render: Template,
+
+//   args: {
+//     component: {
+//       type: 'select',
+//       id: 'select',
+//       key: 'selectPreview',
+//       label: 'Select preview',
+//       description: 'A preview of the select Formio component',
+//       openForms: {
+//         dataSrc: 'referentielijsten',
+//         service: 'referentielijsten-api',
+//         code: 'tabel1',
+//         translations: {},
+//       },
+//     },
+//   },
+// };
+
 export const BSN: Story = {
   name: 'BSN',
   render: Template,

src/components/builder/values/referentielijsten/code.tsx

@@ -0,0 +1,34 @@
+import {useFormikContext} from 'formik';
+import {FormattedMessage, useIntl} from 'react-intl';
+
+import {TextField} from '@/components/formio';
+
+const NAME = 'openForms.code';
+
+/**
+ * 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 {setFieldValue} = useFormikContext();
+  const name = `editform-${NAME}`;
+  return (
+    <TextField
+      name={name}
+      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.`,
+      })}
+      onChange={event => setFieldValue(NAME, event.target.value)}
+    />
+  );
+};
+
+export default ReferentielijstenTabelCode;

src/components/builder/values/referentielijsten/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Components to manage options/values for fields that support this, such as:
+ *
+ *  - select
+ *  - selectboxes
+ *  - radio
+ */
+export {default as ReferentielijstenService} from './service';
+export {default as ReferentielijstenTabelCode} from './code';

src/components/builder/values/referentielijsten/service.tsx

@@ -0,0 +1,42 @@
+import {useFormikContext} from 'formik';
+import {FormattedMessage, useIntl} from 'react-intl';
+
+import {Select} from '@/components/formio';
+
+const NAME = 'openForms.service';
+
+/**
+ * The `ReferentielijstenService` component is used to specify the slug of the service
+ * that is used to retrieve options from
+ */
+export const ReferentielijstenService: React.FC = () => {
+  const intl = useIntl();
+  const {setFieldValue} = useFormikContext();
+  const name = `editform-${NAME}`;
+  return (
+    <Select
+      name={name}
+      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.`,
+      })}
+      onChange={event => setFieldValue(NAME, event.target.value)}
+      isClearable
+      // TODO should be dynamic
+      options={[
+        {label: 'Foo', value: 'foo'},
+        {label: 'Bar', value: 'bar'},
+      ]}
+      valueProperty="value"
+      emptyValue=""
+    />
+  );
+};
+
+export default ReferentielijstenService;

src/components/builder/values/values-config.stories.tsx

@@ -300,3 +300,19 @@ export const SelectVariable: SelectStory = {
     },
   },
 };
+
+export const SelectReferentielijsten: SelectStory = {
+  ...Select,
+
+  parameters: {
+    formik: {
+      initialValues: {
+        openForms: {
+          dataSrc: 'referentielijsten',
+          itemsExpression: {code: 'table1', service: 'referentielijsten-api'},
+        },
+        data: {},
+      },
+    },
+  },
+};

src/components/builder/values/values-config.tsx

@@ -4,6 +4,7 @@ import {useLayoutEffect} from 'react';
 import {hasOwnProperty} from '@/types';
 
 import ItemsExpression from './items-expression';
+import {ReferentielijstenService, ReferentielijstenTabelCode} from './referentielijsten';
 import {SchemaWithDataSrc} from './types';
 import ValuesSrc from './values-src';
 import ValuesTable, {ValuesTableProps} from './values-table';
@@ -59,6 +60,12 @@ export function ValuesConfig<T extends SchemaWithDataSrc>({
         if (values.openForms.hasOwnProperty('itemsExpression')) {
           setFieldValue('openForms.itemsExpression', undefined);
         }
+        if (values.openForms.hasOwnProperty('code')) {
+          setFieldValue('openForms.itemsExpression', undefined);
+        }
+        if (values.openForms.hasOwnProperty('service')) {
+          setFieldValue('openForms.itemsExpression', undefined);
+        }
         if (!isNestedKeySet(values, name)) {
           setFieldValue(name, [{value: '', label: '', openForms: {translations: {}}}]);
         }
@@ -68,6 +75,18 @@ export function ValuesConfig<T extends SchemaWithDataSrc>({
         if (isNestedKeySet(values, name)) {
           setFieldValue(name, undefined);
         }
+        if (values.openForms.hasOwnProperty('code')) {
+          setFieldValue('openForms.itemsExpression', undefined);
+        }
+        if (values.openForms.hasOwnProperty('service')) {
+          setFieldValue('openForms.itemsExpression', undefined);
+        }
+        break;
+      }
+      case 'referentielijsten': {
+        if (values.openForms.hasOwnProperty('itemsExpression')) {
+          setFieldValue('openForms.itemsExpression', undefined);
+        }
         break;
       }
     }
@@ -82,6 +101,12 @@ export function ValuesConfig<T extends SchemaWithDataSrc>({
         <ValuesTable<T> name={name} withOptionDescription={withOptionDescription} />
       )}
       {dataSrc === 'variable' && <ItemsExpression />}
+      {dataSrc === 'referentielijsten' && (
+        <>
+          <ReferentielijstenService />
+          <ReferentielijstenTabelCode />
+        </>
+      )}
     </>
   );
 }

src/components/builder/values/values-src.tsx

@@ -13,10 +13,14 @@ const OPTION_LABELS = defineMessages<OptionValue>({
     description: "Data source option label for value 'variable'",
     defaultMessage: 'From variable',
   },
+  referentielijsten: {
+    description: "Data source option label for value 'referentielijsten'",
+    defaultMessage: 'Referentielijsten API',
+  },
 });
 
 // define the values with the the desired correct order
-const OPTION_VALUES = ['manual', 'variable'] as const;
+const OPTION_VALUES = ['manual', 'variable', 'referentielijsten'] as const;
 
 /**
  * The `ValuesSrc` component is used to configure on the component where options/values

src/registry/select/edit-validation.ts

@@ -18,7 +18,11 @@ const buildValuesSchema = (intl: IntlShape) =>
       values: optionSchema(intl).array().min(1).optional(),
     }),
     openForms: z.object({
-      dataSrc: z.union([z.literal('manual'), z.literal('variable')]),
+      dataSrc: z.union([
+        z.literal('manual'),
+        z.literal('variable'),
+        z.literal('referentielijsten'),
+      ]),
       // TODO: wire up infernologic type checking
       itemsExpression: jsonSchema.optional(),
     }),

src/registry/select/helpers.ts

@@ -1,5 +1,6 @@
 import {SelectComponentSchema} from '@open-formulieren/types';
 import {Option} from '@open-formulieren/types/lib/formio/common';
+import {JSONObject} from '@open-formulieren/types/lib/types';
 
 // A type guard is needed because TS cannot figure out it's a discriminated union
 // when the discriminator is nested.
@@ -9,3 +10,27 @@ export const checkIsManualOptions = (
 ): component is SelectComponentSchema & {data: {values: Option[] | undefined}} => {
   return component.openForms.dataSrc === 'manual';
 };
+
+// A type guard is needed because TS cannot figure out it's a discriminated union
+// when the discriminator is nested.
+// See https://github.com/microsoft/TypeScript/issues/18758
+export const checkIsReferentielijstenOptions = (
+  component: SelectComponentSchema
+): component is SelectComponentSchema & {
+  data: {values: Option[] | undefined};
+  openForms: {code: string; service: string};
+} => {
+  return component.openForms.dataSrc === 'referentielijsten';
+};
+
+// A type guard is needed because TS cannot figure out it's a discriminated union
+// when the discriminator is nested.
+// See https://github.com/microsoft/TypeScript/issues/18758
+export const checkIsVariableOptions = (
+  component: SelectComponentSchema
+): component is SelectComponentSchema & {
+  data: {values: Option[] | undefined};
+  openForms: {itemsExpression: string | JSONObject};
+} => {
+  return component.openForms.dataSrc === 'referentielijsten';
+};

src/registry/select/preview.tsx

@@ -4,7 +4,11 @@ import {useIntl} from 'react-intl';
 import {Select} from '@/components/formio';
 
 import {ComponentPreviewProps} from '../types';
-import {checkIsManualOptions} from './helpers';
+import {
+  checkIsManualOptions,
+  checkIsReferentielijstenOptions,
+  checkIsVariableOptions,
+} from './helpers';
 
 /**
  * Show a formio select component preview.
@@ -17,13 +21,45 @@ const Preview: React.FC<ComponentPreviewProps<SelectComponentSchema>> = ({compon
   const intl = useIntl();
   const {key, label, description, tooltip, validate, multiple} = component;
   const {required = false} = validate || {};
-  const isManualOptions = checkIsManualOptions(component);
-  const options = isManualOptions
-    ? component?.data?.values || []
-    : [
-        {
-          value: 'itemsExpression',
-          label: intl.formatMessage(
+
+  let options;
+  if (checkIsManualOptions(component)) {
+    options = component?.data?.values || [];
+  } else if (checkIsReferentielijstenOptions(component)) {
+    options = [
+      {
+        value: 'service',
+        label: intl.formatMessage(
+          {
+            description: 'Select dummy option for service',
+            defaultMessage: 'Options from service: <code>{service}</code>',
+          },
+          {
+            service: component.openForms.service,
+          }
+        ),
+      },
+      {
+        value: 'code',
+        label: intl
+          .formatMessage(
+            {
+              description: 'Select dummy option for code',
+              defaultMessage: 'Options from code: <code>{code}</code>',
+            },
+            {
+              code: component.openForms.code,
+            }
+          )
+          .toString(),
+      },
+    ];
+  } else if (checkIsVariableOptions(component)) {
+    options = [
+      {
+        value: 'itemsExpression',
+        label: intl
+          .formatMessage(
             {
               description: 'Select dummy option for itemsExpression',
               defaultMessage: 'Options from expression: <code>{expression}</code>',
@@ -32,9 +68,12 @@ const Preview: React.FC<ComponentPreviewProps<SelectComponentSchema>> = ({compon
               expression: JSON.stringify(component.openForms.itemsExpression),
               code: chunks => <code>{chunks}</code>,
             }
-          ),
-        },
-      ];
+          )
+          .toString(),
+      },
+    ];
+  }
+
   return (
     <Select
       name={key}