feat: updated subforms staging view for Projects

Chia-Network · Mar 24, 2022 · 1da3204 · 1da3204
1 parent bd94c83
commit 1da3204
Show file tree

Hide file tree

Showing 10 changed files with 288 additions and 95 deletions.
diff --git a/src/components/blocks/.UnitsDetails.js.swp b/src/components/blocks/.UnitsDetails.js.swp
diff --git a/src/components/blocks/CoBenefitsDetails.js b/src/components/blocks/CoBenefitsDetails.js
@@ -6,8 +6,9 @@ import {
   StyledDetailedViewTabItem,
   StyledItem,
 } from '.';
+import { detailsViewData } from '../../utils/functionUtils';
 
-const CoBenefitsDetails = ({data}) => {
+const CoBenefitsDetails = ({ data, stagingData, changeColor }) => {
   return (
     <StyledDetailedViewTabItem>
       <div style={{ width: '60%' }}>
@@ -16,7 +17,14 @@ const CoBenefitsDetails = ({data}) => {
             <Body size="Bold" width="100%">
               <FormattedMessage id="co-benefit" />
             </Body>
-            <Body>{data.cobenefit ? data.cobenefit : '---'}</Body>
+            {data && detailsViewData('data', data, 'cobenefit', changeColor)}
+            {stagingData &&
+              detailsViewData(
+                'subformStagingData',
+                stagingData,
+                'cobenefit',
+                changeColor,
+              )}
           </StyledItem>
         </StyledDetailedViewTab>
       </div>

diff --git a/src/components/blocks/EstimationsDetails.js b/src/components/blocks/EstimationsDetails.js
@@ -7,7 +7,9 @@ import {
   StyledItem,
 } from '.';
 
-const EstimationsDetails = ({data}) => {
+import { detailsViewData } from '../../utils/functionUtils';
+
+const EstimationsDetails = ({ data, stagingData, changeColor }) => {
   return (
     <StyledDetailedViewTabItem>
       <div style={{ width: '60%' }}>
@@ -16,27 +18,47 @@ const EstimationsDetails = ({data}) => {
             <Body size="Bold" width="100%">
               <FormattedMessage id="crediting-period-start-date" />
             </Body>
-            <Body>
-              {data.creditingPeriodStart
-                ? data.creditingPeriodStart
-                : '---'}
-            </Body>
+            {data &&
+              detailsViewData(
+                'data',
+                data,
+                'creditingPeriodStart',
+                changeColor,
+              )}
+            {stagingData &&
+              detailsViewData(
+                'subformStagingData',
+                stagingData,
+                'creditingPeriodStart',
+                changeColor,
+              )}
           </StyledItem>
           <StyledItem>
             <Body size="Bold" width="100%">
               <FormattedMessage id="crediting-period-end-date" />
             </Body>
-            <Body>
-              {data.creditingPeriodEnd
-                ? data.creditingPeriodEnd
-                : '---'}
-            </Body>
+            {data &&
+              detailsViewData('data', data, 'creditingPeriodEnd', changeColor)}
+            {stagingData &&
+              detailsViewData(
+                'subformStagingData',
+                stagingData,
+                'creditingPeriodEnd',
+                changeColor,
+              )}
           </StyledItem>
           <StyledItem>
             <Body size="Bold" width="100%">
               <FormattedMessage id="unit-count" />
             </Body>
-            <Body>{data.unitCount >= 0 ? data.unitCount : '---'}</Body>
+            {data && detailsViewData('data', data, 'unitCount', changeColor)}
+            {stagingData &&
+              detailsViewData(
+                'subformStagingData',
+                stagingData,
+                'unitCount',
+                changeColor,
+              )}
           </StyledItem>
         </StyledDetailedViewTab>
       </div>

diff --git a/src/components/blocks/ProjectIssuanceDetails.js b/src/components/blocks/ProjectIssuanceDetails.js
@@ -7,7 +7,9 @@ import {
   StyledItem,
 } from '.';
 
-const ProjectIssuanceDetails = ({ data }) => {
+import { detailsViewData } from '../../utils/functionUtils';
+
+const ProjectIssuanceDetails = ({ data, stagingData, changeColor }) => {
   return (
     <StyledDetailedViewTabItem>
       <div style={{ width: '60%' }}>
@@ -16,27 +18,60 @@ const ProjectIssuanceDetails = ({ data }) => {
             <Body size="Bold" width="100%">
               <FormattedMessage id="start-date" />
             </Body>
-            <Body>{data.startDate ? data.startDate : '---'}</Body>
+            {data && detailsViewData('data', data, 'startDate', changeColor)}
+            {stagingData &&
+              detailsViewData(
+                'subformStagingData',
+                stagingData,
+                'startDate',
+                changeColor,
+              )}
           </StyledItem>
           <StyledItem>
             <Body size="Bold" width="100%">
               <FormattedMessage id="end-date" />
             </Body>
-            <Body>{data.endDate ? data.endDate : '---'}</Body>
+            {data && detailsViewData('data', data, 'endDate', changeColor)}
+            {stagingData &&
+              detailsViewData(
+                'subformStagingData',
+                stagingData,
+                'endDate',
+                changeColor,
+              )}
           </StyledItem>
           <StyledItem>
             <Body size="Bold" width="100%">
               <FormattedMessage id="verification-body" />
             </Body>
-            <Body>{data.verificationBody ? data.verificationBody : '---'}</Body>
+            {data &&
+              detailsViewData('data', data, 'verificationBody', changeColor)}
+            {stagingData &&
+              detailsViewData(
+                'subformStagingData',
+                stagingData,
+                'verificationBody',
+                changeColor,
+              )}
           </StyledItem>
           <StyledItem>
             <Body size="Bold" width="100%">
               <FormattedMessage id="verification-approach" />
             </Body>
-            <Body>
-              {data.verificationApproach ? data.verificationApproach : '---'}
-            </Body>
+            {data &&
+              detailsViewData(
+                'data',
+                data,
+                'verificationApproach',
+                changeColor,
+              )}
+            {stagingData &&
+              detailsViewData(
+                'subformStagingData',
+                stagingData,
+                'verificationApproach',
+                changeColor,
+              )}
           </StyledItem>
         </StyledDetailedViewTab>
       </div>

diff --git a/src/components/blocks/ProjectLabelsDetails.js b/src/components/blocks/ProjectLabelsDetails.js
@@ -1,15 +1,18 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Body, LinkIcon, SpanTwoColumnsContainer, SpanTwoDetailColumnsContainer } from '..';
+import {
+  Body,
+  SpanTwoColumnsContainer,
+  SpanTwoDetailColumnsContainer,
+} from '..';
 import {
   StyledDetailedViewTab,
   StyledDetailedViewTabItem,
   StyledItem,
-
 } from '.';
-import { handleClickLink } from '../../utils/functionUtils';
+import { detailsViewData } from '../../utils/functionUtils';
 
-const ProjectLabelsDetails = ({ data }) => {
+const ProjectLabelsDetails = ({ data, stagingData, changeColor }) => {
   return (
     <StyledDetailedViewTabItem>
       <div style={{ width: '60%' }}>
@@ -18,29 +21,41 @@ const ProjectLabelsDetails = ({ data }) => {
             <Body size="Bold" width="100%">
               <FormattedMessage id="label" />
             </Body>
-            <Body>{data.label ? data.label : '---'}</Body>
+            {data && detailsViewData('data', data, 'label', changeColor)}
+            {stagingData &&
+              detailsViewData(
+                'subformStagingData',
+                stagingData,
+                'label',
+                changeColor,
+              )}
           </StyledItem>
           <StyledItem>
             <Body size="Bold" width="100%">
               <FormattedMessage id="label-type" />
             </Body>
-            <Body>{data.labelType ? data.labelType : '---'}</Body>
+            {data && detailsViewData('data', data, 'labelType', changeColor)}
+            {stagingData &&
+              detailsViewData(
+                'subformStagingData',
+                stagingData,
+                'labelType',
+                changeColor,
+              )}
           </StyledItem>
           <SpanTwoDetailColumnsContainer>
             <StyledItem>
               <Body size="Bold" width="100%">
                 <FormattedMessage id="label-link" />
               </Body>
-              <Body>
-                <a
-                  href={handleClickLink(data.labelLink)}
-                  style={{ wordWrap: 'break-word' }}
-                  target="_blank"
-                  rel="noreferrer noopener">
-                  {data.labelLink ? data.labelLink : '---'}
-                  {data.labelLink && <LinkIcon height="15" width="30" />}
-                </a>
-              </Body>
+              {data && detailsViewData('link', data, 'labelLink', changeColor)}
+              {stagingData &&
+                detailsViewData(
+                  'subformStagingLink',
+                  stagingData,
+                  'labelLink',
+                  changeColor,
+                )}
             </StyledItem>
           </SpanTwoDetailColumnsContainer>
           <SpanTwoColumnsContainer>
@@ -50,39 +65,77 @@ const ProjectLabelsDetails = ({ data }) => {
             <Body size="Bold" width="100%">
               <FormattedMessage id="validity-period-start-date" />
             </Body>
-            <Body>
-              {data.validityPeriodStartDate
-                ? data.validityPeriodStartDate
-                : '---'}
-            </Body>
+            {data &&
+              detailsViewData(
+                'data',
+                data,
+                'validityPeriodStartDate',
+                changeColor,
+              )}
+            {stagingData &&
+              detailsViewData(
+                'subformStagingData',
+                stagingData,
+                'validityPeriodStartDate',
+                changeColor,
+              )}
           </StyledItem>
           <StyledItem>
             <Body size="Bold" width="100%">
               <FormattedMessage id="validity-period-end-date" />
             </Body>
-            <Body>
-              {data.validityPeriodEndDate ? data.validityPeriodEndDate : '---'}
-            </Body>
+            {data &&
+              detailsViewData(
+                'data',
+                data,
+                'validityPeriodEndDate',
+                changeColor,
+              )}
+            {stagingData &&
+              detailsViewData(
+                'subformStagingData',
+                stagingData,
+                'validityPeriodEndDate',
+                changeColor,
+              )}
           </StyledItem>
           <StyledItem>
             <Body size="Bold" width="100%">
               <FormattedMessage id="crediting-period-start-date" />
             </Body>
-            <Body>
-              {data.creditingPeriodStartDate
-                ? data.creditingPeriodStartDate
-                : '---'}
-            </Body>
+            {data &&
+              detailsViewData(
+                'data',
+                data,
+                'creditingPeriodStartDate',
+                changeColor,
+              )}
+            {stagingData &&
+              detailsViewData(
+                'subformStagingData',
+                stagingData,
+                'creditingPeriodStartDate',
+                changeColor,
+              )}
           </StyledItem>
           <StyledItem>
             <Body size="Bold" width="100%">
               <FormattedMessage id="crediting-period-end-date" />
             </Body>
-            <Body>
-              {data.creditingPeriodEndDate
-                ? data.creditingPeriodEndDate
-                : '---'}
-            </Body>
+            {data &&
+              detailsViewData(
+                'data',
+                data,
+                'creditingPeriodEndDate',
+                changeColor,
+              )}
+            {stagingData &&
+              detailsViewData(
+                'subformStagingData',
+                stagingData,
+                'creditingPeriodEndDate',
+                changeColor,
+              )}
           </StyledItem>
           <SpanTwoColumnsContainer>
             <hr />
@@ -91,7 +144,14 @@ const ProjectLabelsDetails = ({ data }) => {
             <Body size="Bold" width="100%">
               <FormattedMessage id="unit-quantity" />
             </Body>
-            <Body>{data.unitQuantity && data.unitQuantity}</Body>
+            {data && detailsViewData('data', data, 'unitQuantity', changeColor)}
+            {stagingData &&
+              detailsViewData(
+                'subformStagingData',
+                stagingData,
+                'unitQuantity',
+                changeColor,
+              )}
           </StyledItem>
         </StyledDetailedViewTab>
       </div>