Skip to content

Commit

Permalink
feat: hide objects in data table or staging groups
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielstefanequilobe
danielstefanequilobe committed Feb 16, 2022
1 parent 6b31ab4 commit 13b5ef1
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 92 deletions.
2 changes: 1 addition & 1 deletion src/components/blocks/StagingDataGroups.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ const ChangeCard = ({
)
.map(
(heading, index) =>
!Array.isArray(data[heading]) && (
!(typeof data[heading] === 'object') && (
<StyledCardBodyItem key={index}>
<Body size="Small Bold">
{convertPascalCaseToSentenceCase(heading)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/forms/CreateProjectForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={() =>
Expand Down
116 changes: 33 additions & 83 deletions src/components/forms/EditUnitsForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -24,70 +28,21 @@ 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,
)[0],
);

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'];

Expand All @@ -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));
}
Expand All @@ -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({
Expand Down Expand Up @@ -194,22 +137,29 @@ const EditUnitsForm = ({ onClose, record, modalSizeAndPosition }) => {
value={tabValue}
index={0}
>
<UnitDetailsForm
unitDetails={editedUnits}
setUnitDetails={setEditUnits}
/>
<UnitDetailsForm unitDetails={unit} setUnitDetails={setUnit} />
</TabPanel>
<TabPanel value={tabValue} index={1}>
<LabelsRepeater
labelsState={labels}
newLabelsState={setLabelsRepeaterValues}
labelsState={unit.labels}
newLabelsState={value =>
setUnit(prev => ({
...prev,
labels: value,
}))
}
/>
</TabPanel>
<TabPanel value={tabValue} index={2}>
<IssuanceRepeater
max={1}
issuanceState={issuance}
newIssuanceState={setIssuance}
issuanceState={unit.issuance !== '' ? [unit.issuance] : []}
newIssuanceState={value =>
setUnit(prev => ({
...prev,
issuance: value[0],
}))
}
/>
</TabPanel>
</StyledFormContainer>
Expand Down
36 changes: 29 additions & 7 deletions src/utils/formatData.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand All @@ -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];
}
});
Expand Down

0 comments on commit 13b5ef1

Please sign in to comment.