From 13b5ef16225c533c3fc1f2f599536e93ce44b9d6 Mon Sep 17 00:00:00 2001 From: Daniel Stefan Date: Wed, 16 Feb 2022 19:30:11 +0200 Subject: [PATCH] feat: hide objects in data table or staging groups --- src/components/blocks/StagingDataGroups.js | 2 +- src/components/forms/CreateProjectForm.js | 2 +- src/components/forms/EditUnitsForm.js | 116 ++++++--------------- src/utils/formatData.js | 36 +++++-- 4 files changed, 64 insertions(+), 92 deletions(-) diff --git a/src/components/blocks/StagingDataGroups.js b/src/components/blocks/StagingDataGroups.js index a8e75540..c770eb5d 100644 --- a/src/components/blocks/StagingDataGroups.js +++ b/src/components/blocks/StagingDataGroups.js @@ -108,7 +108,7 @@ const ChangeCard = ({ ) .map( (heading, index) => - !Array.isArray(data[heading]) && ( + !(typeof data[heading] === 'object') && ( {convertPascalCaseToSentenceCase(heading)} diff --git a/src/components/forms/CreateProjectForm.js b/src/components/forms/CreateProjectForm.js index b9088f0c..9ea3b033 100644 --- a/src/components/forms/CreateProjectForm.js +++ b/src/components/forms/CreateProjectForm.js @@ -146,7 +146,7 @@ const CreateProjectForm = withRouter(({ onClose, modalSizeAndPosition }) => { id: 'create-project', })} label={intl.formatMessage({ - id: tabValue < 7 ? 'next' : 'create', + id: tabValue < 7 ? 'next' : 'create-project', })} extraButtonLabel={tabValue > 0 ? 'Back' : undefined} extraButtonOnClick={() => diff --git a/src/components/forms/EditUnitsForm.js b/src/components/forms/EditUnitsForm.js index 955a8e49..6850385b 100644 --- a/src/components/forms/EditUnitsForm.js +++ b/src/components/forms/EditUnitsForm.js @@ -12,8 +12,12 @@ import { useIntl } from 'react-intl'; import { unitsSchema, labelsSchema, - issuancesSchema, + issuanceSchema, } from '../../store/validations'; +import { + cleanObjectFromEmptyFieldsOrArrays, + formatAPIData, +} from '../../utils/formatData'; const StyledFormContainer = styled('div')` display: flex; @@ -24,14 +28,11 @@ const StyledFormContainer = styled('div')` const EditUnitsForm = ({ onClose, record, modalSizeAndPosition }) => { const { notification } = useSelector(state => state.app); - const [labels, setLabelsRepeaterValues] = useState([]); - const [issuance, setIssuance] = useState([{}]); - const [editedUnits, setEditUnits] = useState([]); + const [unit, setUnit] = useState([]); const [tabValue, setTabValue] = useState(0); const dispatch = useDispatch(); const intl = useIntl(); - - const unit = useSelector( + const unitToBeEdited = useSelector( state => state.climateWarehouse.units.filter( unit => unit.warehouseUnitId === record.warehouseUnitId, @@ -39,55 +40,9 @@ const EditUnitsForm = ({ onClose, record, modalSizeAndPosition }) => { ); useEffect(() => { - setEditUnits({ - warehouseUnitId: unit.warehouseUnitId ?? '', - projectLocationId: unit.projectLocationId ?? '', - unitOwner: unit.unitOwner ?? '', - unitStatus: unit.unitStatus ?? '', - unitType: unit.unitType ?? '', - vintageYear: unit.vintageYear ?? '', - unitStatusReason: unit.unitStatusReason ?? '', - countryJurisdictionOfOwner: unit.countryJurisdictionOfOwner ?? '', - inCountryJurisdictionOfOwner: unit.inCountryJurisdictionOfOwner ?? '', - serialNumberBlock: unit.serialNumberBlock ?? '', - serialNumberPattern: unit.serialNumberPattern ?? '', - marketplace: unit.marketplace ?? '', - marketplaceLink: unit.marketplaceLink ?? '', - marketplaceIdentifier: unit.marketplaceIdentifier ?? '', - unitTags: unit.unitTags ?? '', - unitRegistryLink: unit.unitRegistryLink ?? '', - correspondingAdjustmentDeclaration: - unit.correspondingAdjustmentDeclaration ?? '', - correspondingAdjustmentStatus: unit.correspondingAdjustmentStatus ?? '', - }); - - setIssuance([ - _.pick( - unit.issuance, - 'startDate', - 'endDate', - 'verificationApproach', - 'verificationReportDate', - 'verificationBody', - ), - ]); - - setLabelsRepeaterValues( - unit.labels.map(label => - _.pick( - label, - 'label', - 'labelType', - 'creditingPeriodStartDate', - 'creditingPeriodEndDate', - 'validityPeriodStartDate', - 'validityPeriodEndDate', - 'unitQuantity', - 'labelLink', - ), - ), - ); - }, [unit]); + const formattedProjectData = formatAPIData(unitToBeEdited); + setUnit(formattedProjectData); + }, [unitToBeEdited]); const stepperStepsTranslationIds = ['unit', 'labels', 'issuances']; @@ -105,36 +60,21 @@ const EditUnitsForm = ({ onClose, record, modalSizeAndPosition }) => { const onNextButtonPress = async () => { switch (stepperStepsTranslationIds[tabValue]) { case 'unit': - switchToNextTabIfDataIsValid(editedUnits, unitsSchema); + switchToNextTabIfDataIsValid(unit, unitsSchema); break; case 'labels': - switchToNextTabIfDataIsValid(labels, labelsSchema); + switchToNextTabIfDataIsValid(unit.labels, labelsSchema); break; case 'issuances': - switchToNextTabIfDataIsValid(issuance, issuancesSchema); + switchToNextTabIfDataIsValid(unit.issuance, issuanceSchema); break; } }; const handleUpdateUnit = async () => { - const dataToSend = _.cloneDeep(editedUnits); - - Object.keys(dataToSend).forEach(el => { - if (!dataToSend[el]) { - delete dataToSend[el]; - } - }); - - if (!_.isEmpty(issuance)) { - dataToSend.issuance = _.head(issuance); - } - - if (!_.isEmpty(labels)) { - dataToSend.labels = labels; - } - + const dataToSend = _.cloneDeep(unit); + cleanObjectFromEmptyFieldsOrArrays(dataToSend); const isUnitValid = await unitsSchema.isValid(dataToSend); - if (isUnitValid) { dispatch(updateUnitsRecord(dataToSend)); } @@ -161,6 +101,9 @@ const EditUnitsForm = ({ onClose, record, modalSizeAndPosition }) => { title={intl.formatMessage({ id: 'edit-unit', })} + label={intl.formatMessage({ + id: tabValue < 2 ? 'next' : 'update-unit', + })} extraButtonLabel={ tabValue > 0 ? intl.formatMessage({ @@ -194,22 +137,29 @@ const EditUnitsForm = ({ onClose, record, modalSizeAndPosition }) => { value={tabValue} index={0} > - + + setUnit(prev => ({ + ...prev, + labels: value, + })) + } /> + setUnit(prev => ({ + ...prev, + issuance: value[0], + })) + } /> diff --git a/src/utils/formatData.js b/src/utils/formatData.js index 43248dcb..75f157f2 100644 --- a/src/utils/formatData.js +++ b/src/utils/formatData.js @@ -8,12 +8,12 @@ export const formatAPIData = unformattedData => { const result = {}; const unformattedDataKeys = Object.keys(unformattedData); unformattedDataKeys.forEach(key => { + // format arrays if (Array.isArray(unformattedData[key])) { // take out fields invalidated by the API let cleanArray = unformattedData[key].map(item => _.omit(item, ['warehouseProjectId', 'orgUid']), ); - // reformat fields data type cleanArray = cleanArray.map(subObject => { const transformedToString = [ @@ -28,14 +28,36 @@ export const formatAPIData = unformattedData => { }); return subObject; }); - result[key] = cleanArray; - } else if ( - unformattedData[key] === null || - unformattedData[key] === 'null' - ) { + } + + // format null values + else if (unformattedData[key] === null || unformattedData[key] === 'null') { result[key] = ''; - } else if (key !== 'orgUid') { + } + + // format objects + else if (typeof unformattedData[key] === 'object') { + let obj = _.cloneDeep(unformattedData[key]); + const keysToBeRemoved = ['orgUid', 'warehouseProjectId']; + keysToBeRemoved.forEach(invalidKey => { + if (obj[invalidKey] || obj[invalidKey] === null) { + delete obj[invalidKey]; + } + }); + result[key] = obj; + } + + // if none of the above and key name is valid for API requests + else if ( + ![ + 'orgUid', + 'unitBlockStart', + 'unitBlockEnd', + 'unitCount', + 'issuanceId', + ].includes(key) + ) { result[key] = unformattedData[key]; } });