Skip to content

Commit

Permalink
fix: Updated Units Staging Details
Browse files Browse the repository at this point in the history
  • Loading branch information
@SPageot
SPageot committed Mar 18, 2022
1 parent ad42224 commit 65bc32f
Show file tree
Hide file tree
Showing 5 changed files with 280 additions and 133 deletions.
4 changes: 2 additions & 2 deletions src/components/blocks/DetailedViewModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import { useSelector } from 'react-redux';
import { Modal, modalTypeEnum } from '..';
import { useIntl } from 'react-intl';
import { UnitsDetailedViewTab, ProjectDetailedViewTab } from '.';
import { UnitsDetailViewTab, ProjectDetailedViewTab } from '.';

const detailedViewModalTypeEnum = {
project: 'projects',
Expand Down Expand Up @@ -49,7 +49,7 @@ const DetailedViewModal = ({ onClose, modalSizeAndPosition, type, record }) => {
})}
body={
type === detailedViewModalTypeEnum.units ? (
<UnitsDetailedViewTab entry={fullRecord} />
<UnitsDetailViewTab entry={fullRecord} />
) : (
<ProjectDetailedViewTab entry={fullRecord} />
)
Expand Down
46 changes: 20 additions & 26 deletions src/components/blocks/DetailedViewStagingModal.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import React, { useState, useMemo } from 'react';
import React, { useMemo } from 'react';
import {
Modal,
modalTypeEnum,
Tab,
Tabs,
TabPanel,
DetailedViewStagingTab,
//DetailedViewStagingTab,
UnitsDetailViewTab,
} from '..';
import { convertPascalCaseToSentenceCase } from '../../utils/stringUtils';

import { getDiffObject } from '../../utils/objectUtils';

const DetailedViewStagingModal = ({
Expand All @@ -18,8 +16,6 @@ const DetailedViewStagingModal = ({
title,
action,
}) => {
const [tabValue, setTabValue] = useState(0);

const recordTabsWithEntries = useMemo(() => {
let allTabs = record
? Object.keys(record).filter(key => Array.isArray(record[key]))
Expand Down Expand Up @@ -53,7 +49,7 @@ const DetailedViewStagingModal = ({

return allTabsWithData;
}, [record]);

console.log(recordTabsWithEntries);
const recordDiffs = useMemo(() => {
const changesArray = changes ?? [];
return getDiffObject(record, ...changesArray);
Expand All @@ -71,10 +67,6 @@ const DetailedViewStagingModal = ({
return detailsObj;
}, [recordDiffs]);

const handleTabChange = (event, newValue) => {
setTabValue(newValue);
};

if (!modalSizeAndPosition || !record || !title || !onClose || !action) {
return <></>;
}
Expand All @@ -87,32 +79,34 @@ const DetailedViewStagingModal = ({
title={title}
body={
<div>
<Tabs value={tabValue} onChange={handleTabChange}>
{/* <Tabs value={tabValue} onChange={handleTabChange}>
<Tab label="Details" />
{recordTabsWithEntries.map(tab => (
<Tab label={convertPascalCaseToSentenceCase(tab)} key={tab} />
))}
{record?.issuance && <Tab label="Issuance" />}
</Tabs>
<TabPanel value={tabValue} index={0}>
<DetailedViewStagingTab data={[recordDetails]} action={action} />
</TabPanel>
{recordTabsWithEntries.map((tabKey, index) => (
<TabPanel value={tabValue} index={index + 1} key={tabKey}>
<DetailedViewStagingTab
data={recordDiffs[tabKey]}
action={action}
/>
</TabPanel>
<TabPanel value={tabValue} index={0}> */}
{[recordDetails].map((detail, id) => (
<UnitsDetailViewTab entry={detail} key={id} action={action} />
))}
{record?.issuance && (
{/* </TabPanel> */}
{/* {recordTabsWithEntries.map((tabKey, index) => ( */}
{/* <TabPanel value={tabValue} index={index + 1} key={tabKey}>
<DetailedViewStagingTab */}
{/* // key={index}
// data={recordDiffs[tabKey]}
// action={action}
// />
// ))} */}
{/* {record?.issuance && (
<TabPanel value={tabValue} index={recordTabsWithEntries.length + 1}>
<DetailedViewStagingTab
data={[recordDiffs.issuance]}
action={action}
/>
</TabPanel>
)}
)} */}
</div>
}
hideButtons
Expand Down
71 changes: 35 additions & 36 deletions src/components/blocks/DetailedViewStagingTab.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React from 'react';
import styled from 'styled-components';

import { convertPascalCaseToSentenceCase } from '../../utils/stringUtils';
import { Body } from '..';
import { UnitsDetailViewTab } from '.';

const StyledDetailedViewTabItem = styled('div')`
background: #fafafa;
Expand All @@ -23,48 +21,48 @@ const StyledDetailedViewTab = styled('div')`
gap: 20px;
`;

const StyledWordWrap = styled('div')`
export const StyledWordWrap = styled('div')`
word-break: break-word;
display: inline-block;
`;

const DetailedViewTabItem = ({ entry, action }) => {
const hasEntryKeyData = key =>
(entry[key].original !== null && entry[key].original !== 'null') ||
(entry[key].changes &&
entry[key].changes.some(change => change !== null && change !== 'null'));

const isKeyAllowedToBeDisplayed = key =>
![
'orgUid',
'warehouseProjectId',
'id',
'createdAt',
'updatedAt',
'label_unit',
].includes(key);
// const hasEntryKeyData = key =>
// (entry[key].original !== null && entry[key].original !== 'null') ||
// (entry[key].changes &&
// entry[key].changes.some(change => change !== null && change !== 'null'));

const areThereAnyChangesForThisOriginal = key =>
entry[key].changes &&
entry[key].changes.length > 0 &&
entry[key].changes.some(x => x !== null);
// const isKeyAllowedToBeDisplayed = key =>
// ![
// 'orgUid',
// 'warehouseProjectId',
// 'id',
// 'createdAt',
// 'updatedAt',
// 'label_unit',
// ].includes(key);

const getOriginalColorForKey = entryProp => {
if (areThereAnyChangesForThisOriginal(entryProp)) {
return '#f5222d';
}
if (action === 'DELETE') {
return '#f5222d';
}
if (action === 'INSERT') {
return '#52C41A';
}
return '#000000';
};
// const areThereAnyChangesForThisOriginal = key =>
// entry[key].changes &&
// entry[key].changes.length > 0 &&
// entry[key].changes.some(x => x !== null);

// const getOriginalColorForKey = entryProp => {
// if (areThereAnyChangesForThisOriginal(entryProp)) {
// return '#f5222d';
// }
// if (action === 'DELETE') {
// return '#f5222d';
// }
// if (action === 'INSERT') {
// return '#52C41A';
// }
// return '#000000';
// };
return (
<StyledDetailedViewTabItem>
{Object.keys(entry).map(
<UnitsDetailViewTab entry={entry} action={action} />
{/* {Object.keys(entry).map(
(entryProp, index) =>
isKeyAllowedToBeDisplayed(entryProp) &&
hasEntryKeyData(entryProp) && (
Expand All @@ -78,6 +76,7 @@ const DetailedViewTabItem = ({ entry, action }) => {
<StyledWordWrap>{entry[entryProp].original}</StyledWordWrap>
</Body>
)}
{entry[entryProp].changes &&
entry[entryProp].changes.length > 0 &&
entry[entryProp].changes.some(x => x !== null) &&
Expand All @@ -90,7 +89,7 @@ const DetailedViewTabItem = ({ entry, action }) => {
))}
</div>
),
)}
)} */}
</StyledDetailedViewTabItem>
);
};
Expand Down
44 changes: 35 additions & 9 deletions src/components/blocks/UnitsDetailViewTab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,34 @@ export const StyledItem = styled('div')`
padding: 10px 0;
`;

const UnitsDetailedViewTab = ({ entry }) => {
const UnitsDetailViewTab = ({ entry, action }) => {
const [tabValue, setTabValue] = useState(0);
const handleTabChange = (event, newValue) => {
setTabValue(newValue);
};

console.log(entry)

const areThereAnyChangesForThisOriginal = key =>
entry[key].changes &&
entry[key].changes.length > 0 &&
entry[key].changes.some(x => x !== null);

const getOriginalColorForKey = entryProp => {
if (areThereAnyChangesForThisOriginal(entryProp)) {
return '#f5222d';
}
if (action === 'DELETE') {
return '#f5222d';
}
if (action === 'INSERT') {
return '#52C41A';
}
return '#000000';
};

const unitsTabs = _.remove(
[_.isEmpty(entry), _.isEmpty(entry.labels), _.isEmpty(entry.issuance)],
[_.isEmpty(entry), _.isEmpty(entry?.labels), _.isEmpty(entry?.issuance)],
item => item,
);

Expand All @@ -45,22 +65,28 @@ const UnitsDetailedViewTab = ({ entry }) => {
{!_.isEmpty(entry?.labels) && <Tab label={'Labels'} />}
</Tabs>
<TabPanel value={tabValue} index={0}>
<UnitsDetails data={entry} />
<UnitsDetails data={entry} changeColor={getOriginalColorForKey} />
</TabPanel>
{!_.isEmpty(entry.issuance) && (
{!_.isEmpty(entry?.issuance) && (
<TabPanel value={tabValue} index={1}>
<UnitsIssuanceDetails data={entry?.issuance} />
<UnitsIssuanceDetails
data={entry?.issuance}
changeColor={getOriginalColorForKey}
/>
</TabPanel>
)}
{!_.isEmpty(entry.labels) &&
_.map(entry.labels, labelValue => (
{!_.isEmpty(entry?.labels) &&
_.map(entry?.labels, labelValue => (
<TabPanel
value={tabValue}
index={!_.isEmpty(unitsTabs) ? 2 - unitsTabs.length : 2}>
<UnitsLabelsDetails data={labelValue} />
<UnitsLabelsDetails
data={labelValue}
changeColor={getOriginalColorForKey}
/>
</TabPanel>
))}
</>
);
};
export { UnitsDetailedViewTab };
export { UnitsDetailViewTab };
Loading

0 comments on commit 65bc32f

Please sign in to comment.