fix: updated Units Staging Detailed View Changes

Chia-Network · Mar 22, 2022 · d0d46b0 · d0d46b0
1 parent ba47495
commit d0d46b0
Show file tree

Hide file tree

Showing 10 changed files with 522 additions and 590 deletions.
diff --git a/src/components/blocks/DetailedViewStagingModal.js b/src/components/blocks/DetailedViewStagingModal.js
@@ -4,7 +4,7 @@ import {
   Modal,
   modalTypeEnum,
   //DetailedViewStagingTab,
-  UnitsDetailViewTab,
+  UnitsDetailStagingViewTab,
   ProjectDetailedViewTab,
 } from '..';
 
@@ -18,40 +18,6 @@ const DetailedViewStagingModal = ({
   title,
   action,
 }) => {
-  const recordTabsWithEntries = useMemo(() => {
-    let allTabs = record
-      ? Object.keys(record).filter(key => Array.isArray(record[key]))
-      : [];
-
-    if (changes && changes.length > 0) {
-      changes.forEach(changeItem => {
-        Object.keys(changeItem).forEach(key => {
-          if (Array.isArray(changeItem[key])) {
-            allTabs.push(key);
-          }
-        });
-      });
-    }
-
-    allTabs = [...new window.Set(allTabs)];
-
-    const allTabsWithData = [];
-    allTabs.forEach(tabName => {
-      let hasRecordData = record[tabName]?.length > 0 ?? false;
-
-      let hasChanges =
-        changes?.some(
-          change => change[tabName] != null && change[tabName].length > 0,
-        ) ?? false;
-
-      if (hasRecordData || hasChanges) {
-        allTabsWithData.push(tabName);
-      }
-    });
-
-    return allTabsWithData;
-  }, [record]);
-  console.log(recordTabsWithEntries);
   const recordDiffs = useMemo(() => {
     const changesArray = changes ?? [];
     return getDiffObject(record, ...changesArray);
@@ -70,7 +36,6 @@ const DetailedViewStagingModal = ({
   if (!modalSizeAndPosition || !record || !title || !onClose || !action) {
     return <></>;
   }
-  console.log(record);
 
   return (
     <Modal
@@ -80,38 +45,13 @@ const DetailedViewStagingModal = ({
       title={title}
       body={
         <div>
-          {/* <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}> */}
           {_.includes(Object.keys(record), 'warehouseUnitId')
             ? [recordDetails].map((detail, id) => (
-                <UnitsDetailViewTab entry={detail} key={id} />
+                <UnitsDetailStagingViewTab entry={detail} key={id} />
               ))
             : [recordDetails].map((detail, id) => (
                 <ProjectDetailedViewTab entry={detail} key={id} />
               ))}
-          {/* </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

diff --git a/src/components/blocks/ProjectDetails.js b/src/components/blocks/ProjectDetails.js
@@ -1,13 +1,12 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Body } from '..';
+import { Body, SpanTwoColumnsContainer, LinkIcon } from '..';
 import {
   StyledDetailedViewTab,
   StyledDetailedViewTabItem,
   StyledItem,
-  handleClickLink,
 } from '.';
-import { SpanTwoColumnsContainer, LinkIcon } from '..';
+import { handleClickLink } from '../../utils/functionUtils';
 
 const ProjectDetails = ({ data }) => {
   return (

diff --git a/src/components/blocks/ProjectLabelsDetails.js b/src/components/blocks/ProjectLabelsDetails.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Body, LinkIcon } from '..';
+import { Body, LinkIcon, SpanTwoColumnsContainer } from '..';
 import {
   StyledDetailedViewTab,
   StyledDetailedViewTabItem,
   StyledItem,
-  handleClickLink,
+
 } from '.';
-import { SpanTwoColumnsContainer } from '..';
+import { handleClickLink } from '../../utils/functionUtils';
 
 const ProjectLabelsDetails = ({ data }) => {
   return (

diff --git a/src/components/blocks/UnitsDetailStagingViewTab.js b/src/components/blocks/UnitsDetailStagingViewTab.js
@@ -0,0 +1,88 @@
+import _ from 'lodash';
+import React, { useState } from 'react';
+import { Tab, Tabs, TabPanel } from '..';
+import styled from 'styled-components';
+import { UnitsDetails, UnitsIssuanceDetails, UnitsLabelsDetails } from '.';
+
+export const StyledDetailedViewTabItem = styled('div')`
+  display: flex;
+  justify-content: center;
+  background: #fafafa;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 10px;
+  padding: 16px 21px;
+  margin: 20px 0px;
+  gap: 20px;
+`;
+
+export const StyledDetailedViewTab = styled('div')`
+  display: grid;
+  grid-template-columns: 50% 50%;
+`;
+
+export const StyledItem = styled('div')`
+  display: flex;
+  flex-direction: column;
+  padding: 10px 0;
+`;
+
+const UnitsDetailStagingViewTab = ({ entry }) => {
+  const [tabValue, setTabValue] = useState(0);
+  const handleTabChange = (event, newValue) => {
+    setTabValue(newValue);
+  };
+
+  const getOriginalColorForKey = (entryProp, action) => {
+    if (entryProp) {
+      if (action === 'DELETE') {
+        return '#f5222d';
+      }
+      if (action === 'INSERT') {
+        return '#52C41A';
+      }
+    }
+    return '#000000';
+  };
+
+  const unitsTabs = _.remove(
+    [_.isEmpty(entry), _.isEmpty(entry?.labels), _.isEmpty(entry?.issuance)],
+    item => item,
+  );
+
+  return (
+    <>
+      <Tabs value={tabValue} onChange={handleTabChange}>
+        <Tab label="Units" />
+        {!_.isEmpty(entry?.issuance) && <Tab label={'Issuance'} />}
+        {!_.isEmpty(entry?.labels) && <Tab label={'Labels'} />}
+      </Tabs>
+      <TabPanel value={tabValue} index={0}>
+        <UnitsDetails
+          stagingData={entry}
+          changeColor={getOriginalColorForKey}
+        />
+      </TabPanel>
+      {!_.isEmpty(entry?.issuance) && (
+        <TabPanel value={tabValue} index={1}>
+          <UnitsIssuanceDetails
+            stagingData={entry?.issuance}
+            changeColor={getOriginalColorForKey}
+          />
+        </TabPanel>
+      )}
+      {!_.isEmpty(entry?.labels) &&
+        _.map(entry?.labels, labelValue => (
+          <TabPanel
+            noHeight
+            value={tabValue}
+            index={!_.isEmpty(unitsTabs) ? 2 - unitsTabs.length : 2}>
+            <UnitsLabelsDetails
+              stagingData={labelValue}
+              changeColor={getOriginalColorForKey}
+            />
+          </TabPanel>
+        ))}
+    </>
+  );
+};
+export { UnitsDetailStagingViewTab };
diff --git a/src/components/blocks/UnitsDetailViewTab.js b/src/components/blocks/UnitsDetailViewTab.js
@@ -31,32 +31,11 @@ const UnitsDetailViewTab = ({ entry }) => {
   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, action) => {
-    if (areThereAnyChangesForThisOriginal(entryProp)) {
-      if (action === 'DELETE') {
-        return '#f5222d';
-      }
-      if (action === 'INSERT') {
-        return '#52C41A';
-      }
-      return '#f5222d';
-    }
-    return '#000000';
-  };
-
   const unitsTabs = _.remove(
     [_.isEmpty(entry), _.isEmpty(entry?.labels), _.isEmpty(entry?.issuance)],
     item => item,
   );
-
+console.log(entry)
   return (
     <>
       <Tabs value={tabValue} onChange={handleTabChange}>
@@ -65,14 +44,11 @@ const UnitsDetailViewTab = ({ entry }) => {
         {!_.isEmpty(entry?.labels) && <Tab label={'Labels'} />}
       </Tabs>
       <TabPanel value={tabValue} index={0}>
-        <UnitsDetails data={entry} changeColor={getOriginalColorForKey} />
+        <UnitsDetails data={entry} />
       </TabPanel>
       {!_.isEmpty(entry?.issuance) && (
         <TabPanel value={tabValue} index={1}>
-          <UnitsIssuanceDetails
-            data={entry?.issuance}
-            changeColor={getOriginalColorForKey}
-          />
+          <UnitsIssuanceDetails data={entry?.issuance} />
         </TabPanel>
       )}
       {!_.isEmpty(entry?.labels) &&
@@ -81,10 +57,7 @@ const UnitsDetailViewTab = ({ entry }) => {
             noHeight
             value={tabValue}
             index={!_.isEmpty(unitsTabs) ? 2 - unitsTabs.length : 2}>
-            <UnitsLabelsDetails
-              data={labelValue}
-              changeColor={getOriginalColorForKey}
-            />
+            <UnitsLabelsDetails data={labelValue} />
           </TabPanel>
         ))}
     </>