validation custom forms

src/webapp/components/select/Select.tsx

@@ -0,0 +1,79 @@
+import {
+    FormControl,
+    InputLabel,
+    MenuItem,
+    Select as MuiSelect,
+    SelectProps as MuiSelectProps,
+} from "@material-ui/core";
+import { createStyles, makeStyles } from "@material-ui/core/styles";
+import _ from "lodash";
+import React, { useMemo, useState } from "react";
+
+export type SelectOption = { value: string; label: string };
+
+export interface SelectProps extends Omit<MuiSelectProps, "onChange"> {
+    placeholder?: string;
+    options: Array<SelectOption>;
+    onChange: (option: SelectOption) => void;
+    defaultValue?: SelectOption;
+    value?: string;
+    allowEmpty?: boolean;
+    emptyLabel?: string;
+}
+
+export const Select: React.FC<SelectProps> = ({
+    placeholder,
+    options,
+    onChange,
+    defaultValue,
+    value,
+    allowEmpty = false,
+    emptyLabel = "",
+    ...rest
+}) => {
+    const classes = useStyles();
+    const [stateValue, setValue] = useState(defaultValue ? defaultValue.value : "");
+    const optionsByValue = useMemo(() => _.keyBy(options, option => option.value), [options]);
+    const defaultOption = allowEmpty ? { label: "", value: "" } : undefined;
+
+    const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+        const newValue = event.target.value as string;
+        const option = _(optionsByValue).get(newValue, defaultOption);
+        setValue(newValue);
+        if (option) onChange(option);
+    };
+
+    const defaultLabel = allowEmpty ? emptyLabel : placeholder;
+
+    return (
+        <div>
+            <FormControl className={classes.formControl}>
+                {!!placeholder && <InputLabel id="demo-simple-select-label">{placeholder}</InputLabel>}
+                <MuiSelect onChange={handleChange} value={value ?? stateValue} autoWidth={true} {...rest}>
+                    {!!defaultLabel && (
+                        <MenuItem value="" disabled={!allowEmpty} className={classes.menuItem}>
+                            {defaultLabel}
+                        </MenuItem>
+                    )}
+                    {options.map(option => (
+                        <MenuItem key={option.value} value={option.value} className={classes.menuItem}>
+                            {option.label}
+                        </MenuItem>
+                    ))}
+                </MuiSelect>
+            </FormControl>
+        </div>
+    );
+};
+
+const useStyles = makeStyles(() =>
+    createStyles({
+        formControl: {
+            margin: 0,
+            display: "flex",
+        },
+        menuItem: {
+            minHeight: 35,
+        },
+    })
+);

src/webapp/reports/Reports.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import AdminReport from "./admin/AdminReport";
 import NHWACommentsReport from "./nhwa-comments/NHWACommentsReport";
 import NHWADataApprovalStatusReport from "./nhwa-approval-status/NHWADataApprovalStatusReport";
+import ValidateCustomFormsReport from "./validate-custom-forms/ValidateCustomFormsReport";
 
 const widget = process.env.REACT_APP_REPORT_VARIANT || "";
 
@@ -16,6 +17,9 @@ const Component: React.FC = () => {
         case "admin": {
             return <AdminReport />;
         }
+        case "validatecustomforms": {
+            return <ValidateCustomFormsReport />;
+        }
         default: {
             return <p>{`Please provide a valid REACT_APP_REPORT_VARIANT`}</p>;
         }

src/webapp/reports/validate-custom-forms/CustomFormErrorsList.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export const CustomFormErrorsList: React.FC = React.memo(() => {
+    //await compositionRoot.dataComments.get({})
+    return (
+<div>
+  { <p>{ "ERROR: UID xxx does not exist in dataset xxxx" }</p> }{ <p>{ "ERROR: DataElement xxx is not associated to dataset xxxx" }</p> }
+</div>
+    );
+});

src/webapp/reports/validate-custom-forms/ValidateCustomFormsReport.tsx

@@ -0,0 +1,64 @@
+import { Typography,  makeStyles } from "@material-ui/core";
+import React from "react";
+import { useState } from "react";
+import i18n from "../../../locales";
+import { Select, SelectOption } from "../../components/select/Select";
+import { CustomFormErrorsList } from "./CustomFormErrorsList";
+
+
+const onModuleChange = ({ value }: SelectOption) => {
+    //execute use case to get the CustomFormErrorsList  from a given dataset
+    return value
+
+};
+const AdminReport: React.FC = () => {
+    const classes = useStyles();
+    //hardcoded list of modules
+    const [modules] = useState<{ value: string; label: string }[]>([]);
+    return (
+        <React.Fragment>
+        <h1 className={classes.title} >{i18n.t("Custom Form Validation")}</h1>
+
+            <div className={classes.select}>
+                <Select
+                    placeholder={i18n.t("Select custom form to validate...")}
+                    onChange={onModuleChange}
+                    options={modules}
+                    value="test"
+                />
+            </div>
+
+
+        <div className={classes.row}>
+        <Typography variant="h5">
+                {i18n.t("Result:")}
+            </Typography>
+        </div>
+        <div className={classes.row}>
+            <CustomFormErrorsList />
+        </div>
+        </React.Fragment>
+    );
+};
+
+const useStyles = makeStyles({
+    row: {
+        display: "flex",
+        flexFlow: "row nowrap",
+        justifyContent: "space-around",
+        marginRight: "1em",
+        marginLeft: "1%"
+    },
+    title: { marginBottom: 0,
+        marginLeft: "1%" },
+    select: { flexBasis: "100%", margin: "0.5em", marginTop: "1em",
+    flexFlow: "row nowrap",
+    justifyContent: "space-around",
+    marginRight: "75%",
+    marginLeft: "1%" },
+    checkbox: { marginTop: "1em" },
+    fullWidth: { width: "25%" },
+});
+
+
+export default AdminReport;