Skip to content

Commit

Permalink
Requested changes to Add Analysis Dataset view
Browse files Browse the repository at this point in the history
  • Loading branch information
@van-go
van-go committed Feb 6, 2025
1 parent ae6dffa commit 9503145
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 95 deletions.
128 changes: 53 additions & 75 deletions client/src/components/_common/Form/DynamicForm/DynamicForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,47 +42,23 @@ const DynamicForm = ({ initialFormFields, onChange }) => {
};
};

const handleVisibilityDependency = (
field,
values,
setFieldValue,
modifiedField
) => {
const handleVisibilityDependency = (field, values, setFieldValue, modifiedField) => {
const { dependency } = field;

// Stores the value of the dependency field that is currently entered in the form
let currentDependencyFieldValue;

// If the dependency field is a nested field (e.g. sample.type)
if (dependency.name.includes('.')) {
const [dependencyName, nestedDependencyField] =
dependency.name.split('.');
const dependentFormField = formFields.find(
(field) => field.name === dependencyName
);
// converts both values to string to compare
const dependentField = dependentFormField?.options.find(
(option) => `${option.value}` === `${values[dependencyName]}`
);

currentDependencyFieldValue = dependentField
? dependentField[nestedDependencyField]
: null;
} else {
currentDependencyFieldValue = values[dependency.name];
}

if (!dependency) return field;

let currentDependencyFieldValue = values[dependency.name];

const isHidden = Array.isArray(dependency.value)
? !dependency.value.includes(currentDependencyFieldValue)
: dependency.value !== currentDependencyFieldValue;

// Resets the fields value when the field is hidden

if (isHidden) {
setFieldValue(field.name, '');
}

return { ...field, hidden: isHidden };
};


const updateFormFieldsBasedOnDependency = useMemo(() => {
return (formFields, values, setFieldValue, modifiedField) => {
Expand Down Expand Up @@ -124,16 +100,22 @@ const DynamicForm = ({ initialFormFields, onChange }) => {
onChange && onChange(formFields, values);
}, [formFields, values]);

// This function updates and filters any dependant fields. Field dependency is described in the form config file
const handleDependentFieldUpdate = (value, modifiedField) => {
const updatedFormFields = updateFormFieldsBasedOnDependency(
formFields,
{ ...values, [modifiedField.name]: value },
setFieldValue,
modifiedField
);
setFormFields(updatedFormFields);

setFormFields(updatedFormFields.map((field) => {
if (field.name === 'digital_dataset_other') {
return { ...field, hidden: value !== 'other' };
}
return field;
}));
};


const renderFormField = (field) => {
if (field.hidden) {
Expand All @@ -142,6 +124,15 @@ const DynamicForm = ({ initialFormFields, onChange }) => {

switch (field.type) {
case 'text':
return (
<FormField
name={field.name}
label={field.label}
type="text"
description={field?.description}
required={field?.validation?.required}
/>
);
case 'number':
case 'link':
return (
Expand All @@ -164,47 +155,34 @@ const DynamicForm = ({ initialFormFields, onChange }) => {
required={field?.validation?.required}
/>
);
case 'select':
return (
<FormField
name={field.name}
label={field.label}
type="select"
description={field?.description}
required={field?.validation?.required}
onChange={(event) => {
setFieldValue(field.name, event.target.value);
handleDependentFieldUpdate(event.target.value, field);
}}
>
{/* If we have a select with optgroup */}
{field.optgroups
? field.optgroups.map((optgroup) => {
return (
<optgroup label={optgroup.label}>
{optgroup.options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</optgroup>
);
})
: // shows only filtered fields
field.filteredOptions
? field.filteredOptions.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))
: // shows all fields
field.options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</FormField>
);
case 'select':
return (
<FormField
name={field.name}
label={field.label}
type="select"
description={field?.description}
required={field?.validation?.required}
onChange={(event) => {
const selectedValue = event.target.value;
setFieldValue(field.name, selectedValue);
handleDependentFieldUpdate(selectedValue, field);

setFormFields((prevFields) =>
prevFields.map((f) =>
f.name === 'digital_dataset_other' ? { ...f, hidden: selectedValue !== 'other' } : f
)
);
}}
>
{field.options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</FormField>
);

// uses FieldArray from formik to handle array fields. arrayHelpers from FieldArray is used to add and remove fields
case 'array':
return (
Expand Down
58 changes: 38 additions & 20 deletions client/src/components/_custom/drp/utils/hooks/useDrpDatasetModals.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,11 @@ const useDrpDatasetModals = (
},
});

return response;
const projectsResponse = await fetchUtil({
url: 'api/projects',
});

return { ...response, projects: projectsResponse };
};

const dispatch = useDispatch();
Expand Down Expand Up @@ -84,35 +88,49 @@ const useDrpDatasetModals = (
const createAnalysisDataModal = useCallback(
async (formName, selectedFile = null) => {
const form = await getFormFields(formName);
const { samples, origin_data: originDatasets } = await getDatasets(

const { samples, origin_data: originDatasets, projects } = await getDatasets(
projectId,
portalName,
true
);


const projectOptions = [
{ value: '', label: '' },
...projects.response.map((project) => ({
value: project.id,
label: project.title
})),
{ value: 'other', label: 'Other (Specify Below)' }
];

form.form_fields.map((field) => {
if (field.name === 'sample') {
field.options.push(
...samples.map((sample) => {
return {
value: sample.uuid,
label: sample.value.name,
};
})
);
} else if (field.name === 'base_origin_data') {
field.options.push(
...originDatasets.map((originData) => {
return {
value: originData.uuid,
label: originData.value.name,
dependentId: originData.value.sample,
};
})
...samples.map((sample) => ({
value: sample.uuid,
label: sample.value.name,
}))
);
}
else if (field.name === 'digital_dataset') {
field.options = projectOptions;
}
});

const datasetFieldIndex = form.form_fields.findIndex(field => field.name === 'digital_dataset');

if (datasetFieldIndex !== -1) {
form.form_fields.splice(datasetFieldIndex + 1, 0, {
name: 'digital_dataset_other',
label: 'Please specify the project',
type: 'text',
hidden: true,
validation: { required: true },
dependency: { name: 'digital_dataset', type: 'visibility', value: 'other' },
});
}

dispatch({
type: 'DATA_FILES_TOGGLE_MODAL',
payload: {
Expand All @@ -121,7 +139,7 @@ const useDrpDatasetModals = (
selectedFile,
form,
formName,
additionalData: { samples, originDatasets },
additionalData: { samples, originDatasets, projects },
useReloadCallback,
},
},
Expand Down

0 comments on commit 9503145

Please sign in to comment.