Skip to content

Commit

Permalink
feat: fuel diff supports array
Browse files Browse the repository at this point in the history
  • Loading branch information
@matthieu-foucault
matthieu-foucault committed Mar 31, 2021
1 parent 3e77152 commit ab3a863
Show file tree
Hide file tree
Showing 3 changed files with 232 additions and 233 deletions.
313 changes: 151 additions & 162 deletions app/components/Application/ApplicationDetailsCardItemCustomFields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,192 +12,181 @@ import FuelField from 'containers/Forms/FuelField';
import EmissionCategoryRowIdField from 'containers/Forms/EmissionCategoryRowIdField';
import NaicsField from 'containers/Forms/NaicsField';

const customFields = (
showDiff: boolean,
diffPathArray: any[],
diffArray: any[],
handleEnums: (...args: any[]) => any,
previousIsEmpty: boolean,
setHasErrors: (...args: any[]) => any
) => {
const setErrorIcon: (...args: any[]) => object = (props) => {
if (props?.errorSchema?.__errors || props.rawErrors) {
setHasErrors(true);
return <FontAwesomeIcon color="red" icon={faExclamationTriangle} />;
}

return undefined;
};

const CUSTOM_FIELDS: Record<string, React.FunctionComponent<FieldProps>> = {
TitleField: (props) => <h3>{props.title}</h3>,
StringField: (props) => {
const errorIcon: object = setErrorIcon(props);

const {idSchema, formData} = props;
const id = idSchema?.$id;
let prevValue;
let hasDiff = false;
if (showDiff) {
hasDiff = diffPathArray.includes(id.replace(/^[^_]*_/g, ''));
prevValue =
diffArray[diffPathArray.indexOf(id.replace(/^[^_]*_/g, ''))];
// Some formData values are numbers that map to enums, this function uses the number values to return the enum names stored in the schema
const getDisplayValue = (schema, value) => {
if (schema.enum && schema.enumNames) {
// TODO: needs a fix on jsonschema types (missing enumNames)
const enumIndex = schema.enum.indexOf(value);
if (enumIndex === -1) return null;
return schema.enumNames[enumIndex];
}

return value;
};

if ((hasDiff || previousIsEmpty) && prevValue !== formData) {
prevValue = handleEnums(props, false, prevValue);
const currentValue = handleEnums(props, true, prevValue);
const ErrorIcon: React.FunctionComponent<FieldProps> = (props) => {
if (props?.errorSchema?.__errors || props.rawErrors) {
return <FontAwesomeIcon color="red" icon={faExclamationTriangle} />;
}

return (
<>
<span id={id && `${id}-diffFrom`} className="diffFrom">
{prevValue ?? <i>[No Data Entered]</i>}
</span>
&nbsp;---&gt;&nbsp;
<span id={id && `${id}-diffTo`} className="diffTo">
{currentValue ?? <i>[No Data Entered]</i>}
</span>
</>
);
}
}
return null;
};

if (formData === null || formData === undefined || formData === '')
const CUSTOM_FIELDS: Record<string, React.FunctionComponent<FieldProps>> = {
TitleField: (props) => <h3>{props.title}</h3>,
StringField: (props) => {
const {
idSchema,
schema,
formData,
formContext: {showDiff, idDiffMap}
} = props;
const displayValue = getDisplayValue(schema, formData);
const id = idSchema?.$id;
if (showDiff) {
const diff = idDiffMap?.[id];

if (diff && diff.lhs !== formData) {
const prevValue = getDisplayValue(schema, diff.lhs);
return (
<>
<i id={id}>[No Data Entered]</i>
{errorIcon}
<span id={id && `${id}-diffFrom`} className="diffFrom">
{prevValue ?? <i>[No Data Entered]</i>}
</span>
&nbsp;---&gt;&nbsp;
<span id={id && `${id}-diffTo`} className="diffTo">
{displayValue ?? <i>[No Data Entered]</i>}
</span>
</>
);
}
}

const value = handleEnums(props, true, prevValue);
if (formData === null || formData === undefined || formData === '')
return (
<>
<span id={id}>{value}</span>
{errorIcon}
<i id={id}>[No Data Entered]</i>
{ErrorIcon}
</>
);
},
BooleanField: (props) => {
const errorIcon = setErrorIcon(props);

const {idSchema, formData} = props;
const id = idSchema?.$id;
const hasDiff = diffPathArray.includes(
idSchema.$id.replace(/^[^_]*_/g, '')
return (
<>
<span id={id}>{displayValue}</span>
{ErrorIcon}
</>
);
},
BooleanField: (props) => {
const {
idSchema,
formData,
formContext: {showDiff, idDiffMap}
} = props;
const id = idSchema?.$id;
const diff = idDiffMap?.[id];

if (showDiff && diff) {
return (
<>
<span id={`${id}-diffFrom`} className="diffFrom">
{diff.lhs ? 'Yes' : 'No'}
</span>
&nbsp;---&gt;&nbsp;
<span id={`${id}-diffTo`} className="diffTo">
{formData ? 'Yes' : 'No'}
</span>
</>
);
}

if (showDiff && hasDiff) {
const prevValue =
diffArray[
diffPathArray.indexOf(idSchema.$id.replace(/^[^_]*_/g, ''))
];
return (
<>
<span id={`${id}-diffFrom`} className="diffFrom">
{prevValue ? 'Yes' : 'No'}
</span>
&nbsp;---&gt;&nbsp;
<span id={`${id}-diffTo`} className="diffTo">
{formData ? 'Yes' : 'No'}
</span>
</>
);
}

return (
<span id={id}>
{formData ? <>Yes {ErrorIcon}</> : <>No {ErrorIcon}</>}{' '}
</span>
);
},
naics: (props) => <NaicsField query={props.formContext.query} {...props} />,
emissionSource: EmissionSourceFields,
emissionGas: (props) => <EmissionGasFields {...props} />,
product: (props) => (
<ProductField query={props.formContext.query} {...props} />
),
productRowId: (props) => (
<ProductRowIdField query={props.formContext.query} {...props} />
),
fuel: (props) => <FuelField query={props.formContext.query} {...props} />,
fuelRowId: (props) => (
<FuelRowIdField query={props.formContext.query} {...props} />
),
emissionCategoryRowId: (props) => (
<EmissionCategoryRowIdField query={props.formContext.query} {...props} />
),
NumberField: (props) => {
const {
idSchema,
formData,
schema,
formContext: {showDiff, idDiffMap}
} = props;
const id = idSchema?.$id;
if (formData === null || formData === undefined || formData === '')
return (
<span id={id}>
{formData ? <>Yes {errorIcon}</> : <>No {errorIcon}</>}{' '}
</span>
<>
<i id={id}>[No Data Entered]</i>
{ErrorIcon}
</>
);
},
naics: (props) => <NaicsField query={props.formContext.query} {...props} />,
emissionSource: EmissionSourceFields,
emissionGas: (props) => (
<EmissionGasFields setHasErrors={setHasErrors} {...props} />
),
product: (props) => (
<ProductField query={props.formContext.query} {...props} />
),
productRowId: (props) => (
<ProductRowIdField query={props.formContext.query} {...props} />
),
fuel: (props) => <FuelField query={props.formContext.query} {...props} />,
fuelRowId: (props) => (
<FuelRowIdField query={props.formContext.query} {...props} />
),
emissionCategoryRowId: (props) => (
<EmissionCategoryRowIdField query={props.formContext.query} {...props} />
),
NumberField: (props) => {
const errorIcon = setErrorIcon(props);

const {idSchema, formData} = props;
const id = idSchema?.$id;
if (formData === null || formData === undefined || formData === '')
return (
<>
<i id={id}>[No Data Entered]</i>
{errorIcon}
</>
);
const displayValue = getDisplayValue(schema, formData);

let prevValue;
let hasDiff = false;
if (showDiff) {
hasDiff = diffPathArray.includes(id.replace(/^[^_]*_/g, ''));
prevValue =
diffArray[diffPathArray.indexOf(id.replace(/^[^_]*_/g, ''))];
if (hasDiff || previousIsEmpty) {
prevValue = handleEnums(props, false, prevValue);
const currentValue = handleEnums(props, true, prevValue);
const diff = idDiffMap?.[id];

return (
<>
<span className="diffFrom">
{prevValue ? (
<NumberFormat
thousandSeparator
id={id && `${id}-diffFrom`}
displayType="text"
value={prevValue}
/>
) : (
<i id={id && `${id}-diffFrom`}>[No Data Entered]</i>
)}
</span>
&nbsp;---&gt;&nbsp;
<span className="diffTo">
{currentValue ? (
<NumberFormat
thousandSeparator
id={id && `${id}-diffTo`}
displayType="text"
value={currentValue}
/>
) : (
<i id={id && `${id}-diffTo`}>[No Data Entered]</i>
)}
</span>
</>
);
}
}
if (showDiff && diff) {
const prevValue = getDisplayValue(schema, diff.lhs);

const value = handleEnums(props, true, prevValue);
return (
<>
<NumberFormat
thousandSeparator
id={id}
displayType="text"
value={value}
/>
{errorIcon}
<span className="diffFrom">
{prevValue !== null && prevValue !== undefined ? (
<NumberFormat
thousandSeparator
id={id && `${id}-diffFrom`}
displayType="text"
value={prevValue}
/>
) : (
<i id={id && `${id}-diffFrom`}>[No Data Entered]</i>
)}
</span>
&nbsp;---&gt;&nbsp;
<span className="diffTo">
{displayValue !== null && displayValue !== undefined ? (
<NumberFormat
thousandSeparator
id={id && `${id}-diffTo`}
displayType="text"
value={displayValue}
/>
) : (
<i id={id && `${id}-diffTo`}>[No Data Entered]</i>
)}
</span>
</>
);
}
};
return CUSTOM_FIELDS;

return (
<>
<NumberFormat
thousandSeparator
id={id}
displayType="text"
value={displayValue}
/>
{ErrorIcon}
</>
);
}
};

export default customFields;
export default CUSTOM_FIELDS;
Loading

0 comments on commit ab3a863

Please sign in to comment.