Merge pull request #3530 from bcgov/NDT-341-history-for-cbc-project-d…

…ata-changes

feat: cbc history

CHANGELOG.md

@@ -1,3 +1,15 @@
+# [1.193.0](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.192.1...v1.193.0) (2024-09-16)
+
+### Bug Fixes
+
+- numbers to not heave leading dollar sign ([b063d36](https://github.com/bcgov/CONN-CCBC-portal/commit/b063d36fc2de4a72d196db8fc3f3cd4579ff1a16))
+- overflow wrap strictly enforced ([92407e0](https://github.com/bcgov/CONN-CCBC-portal/commit/92407e052c1e3ccebabd325a86fcc2b724e5c592))
+
+### Features
+
+- history for cbc data changes ([018c2db](https://github.com/bcgov/CONN-CCBC-portal/commit/018c2dbf2216d918a732d399805ea4d3f8270a42))
+- new computed column for cbc history ([16707fc](https://github.com/bcgov/CONN-CCBC-portal/commit/16707fc65036d80281aab4fe127e2aae02c74510))
+
 ## [1.192.1](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.192.0...v1.192.1) (2024-09-16)
 
 # [1.192.0](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.191.0...v1.192.0) (2024-09-13)

app/components/Analyst/CBC/History/CbcHistoryContent.tsx

@@ -0,0 +1,88 @@
+import HistoryDetails from 'components/Analyst/History/HistoryDetails';
+import cbcData from 'formSchema/uiSchema/history/cbcData';
+import { DateTime } from 'luxon';
+import styled from 'styled-components';
+
+const StyledContent = styled.span`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 8px;
+
+  & span {
+    margin: 0 4px;
+  }
+
+  & span:first-child {
+    margin-left: 0;
+  }
+`;
+
+const StyledChange = styled.div`
+  padding: 8px 16px;
+`;
+
+const ChangeReason = ({ reason }) => {
+  return (
+    <StyledChange>
+      <b>Reason for change:</b> {reason}
+    </StyledChange>
+  );
+};
+
+const HistoryContent = ({
+  createdAt,
+  updatedAt,
+  prevJson,
+  json,
+  givenName,
+  changeReason,
+  familyName,
+  op,
+  tableName,
+}) => {
+  const fullName = `${givenName} ${familyName}`;
+
+  const createdAtFormatted =
+    op === 'UPDATE'
+      ? DateTime.fromJSDate(new Date(updatedAt)).toLocaleString(
+          DateTime.DATETIME_MED
+        )
+      : DateTime.fromJSDate(new Date(createdAt)).toLocaleString(
+          DateTime.DATETIME_MED
+        );
+
+  if (tableName === 'cbc_data') {
+    return (
+      <>
+        <StyledContent data-testid="cbc-data-updater-and-timestamp">
+          <span>
+            {fullName} {op === 'UPDATE' ? 'updated' : 'created'} the CBC data on{' '}
+            {createdAtFormatted}
+          </span>
+        </StyledContent>
+        <HistoryDetails
+          data-testid="cbc-data-history-details"
+          json={json}
+          prevJson={prevJson}
+          excludedKeys={[
+            'id',
+            'created_at',
+            'updated_at',
+            'change_reason',
+            'cbc_data_id',
+          ]}
+          diffSchema={cbcData}
+          overrideParent="cbcData"
+        />
+        {op === 'UPDATE' && changeReason !== '' && (
+          <ChangeReason reason={changeReason} />
+        )}
+      </>
+    );
+  }
+  return null;
+};
+
+export default HistoryContent;

app/components/Analyst/CBC/History/CbcHistoryRow.tsx

@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+import React from 'react';
+import { HistoryIcon } from 'components/Analyst/History';
+import CbcHistoryContent from './CbcHistoryContent';
+
+const StyledIconCell = styled.td`
+  width: 5px;
+  border-left: 1px solid ${(props) => props.theme.color.links};
+  border-bottom: none;
+  position: relative;
+
+  & div {
+    position: absolute;
+    right: 2px;
+    top: -2px;
+  }
+`;
+
+const StyledCell = styled.td`
+  border-bottom: none;
+
+  & b {
+    text-transform: capitalize;
+  }
+`;
+
+interface Props {
+  json: any;
+  prevJson: any;
+  changeReason: string;
+  tableName: string;
+  updatedAt: string;
+  createdAt: string;
+  givenName: string;
+  familyName: string;
+  op: string;
+}
+
+const CbcHistoryRow: React.FC<Props> = ({
+  json,
+  prevJson,
+  changeReason,
+  tableName,
+  createdAt,
+  givenName,
+  familyName,
+  updatedAt,
+  op,
+}) => {
+  return (
+    <tr>
+      <StyledIconCell>
+        <HistoryIcon type="form_data" />
+      </StyledIconCell>
+      <StyledCell>
+        <CbcHistoryContent
+          json={json}
+          prevJson={prevJson}
+          createdAt={createdAt}
+          updatedAt={updatedAt}
+          familyName={familyName}
+          givenName={givenName}
+          tableName={tableName}
+          changeReason={changeReason}
+          op={op}
+        />
+      </StyledCell>
+    </tr>
+  );
+};
+
+export default CbcHistoryRow;

app/components/Analyst/CBC/History/CbcHistoryTable.tsx

@@ -0,0 +1,87 @@
+import { CbcHistoryTable_query$key } from '__generated__/CbcHistoryTable_query.graphql';
+import React from 'react';
+import { useFragment, graphql } from 'react-relay';
+import styled from 'styled-components';
+import CbcHistoryRow from './CbcHistoryRow';
+
+const StyledTable = styled.table`
+  border: none;
+  table-layout: fixed;
+  margin-left: 8px;
+
+  & td {
+    padding-top: 0;
+    padding-bottom: 16px;
+  }
+
+  & tr:last-child {
+    & td:first-child {
+      border: none;
+    }
+    td {
+      padding-bottom: 0px;
+    }
+  }
+`;
+
+interface Props {
+  query: any;
+}
+
+const CbcHistoryTable: React.FC<Props> = ({ query }) => {
+  const queryFragment = useFragment<CbcHistoryTable_query$key>(
+    graphql`
+      fragment CbcHistoryTable_query on Query {
+        cbcByRowId(rowId: $rowId) {
+          history {
+            nodes {
+              rowId
+              record
+              oldRecord
+              op
+              tableName
+              createdAt
+              ccbcUserByCreatedBy {
+                givenName
+                familyName
+              }
+            }
+          }
+        }
+      }
+    `,
+    query
+  );
+
+  const { cbcByRowId } = queryFragment;
+  const { history } = cbcByRowId;
+
+  return (
+    <StyledTable>
+      <tbody>
+        {history.nodes.map((historyItem) => (
+          <CbcHistoryRow
+            key={historyItem.rowId}
+            json={{
+              ...historyItem.record?.json_data,
+              project_number: historyItem.record?.project_number,
+            }}
+            prevJson={{
+              ...historyItem.oldRecord?.json_data,
+              project_number: historyItem.oldRecord?.project_number,
+            }}
+            changeReason={historyItem.record?.change_reason}
+            tableName={historyItem.tableName}
+            createdAt={historyItem.createdAt}
+            updatedAt={historyItem.record?.updated_at}
+            givenName={historyItem.ccbcUserByCreatedBy.givenName}
+            familyName={historyItem.ccbcUserByCreatedBy.familyName}
+            op={historyItem.op}
+          />
+        ))}
+      </tbody>
+    </StyledTable>
+  );
+};
+
+export default CbcHistoryTable;

app/components/DiffTable.tsx

@@ -9,6 +9,7 @@ const StyledTable = styled.table`
   td {
     padding: 8px;
     width: 30%;
+    overflow-wrap: anywhere;
   }
 
   thead tr th:first-child,
@@ -35,6 +36,10 @@ const format = (value, type) => {
   if (typeof value === 'undefined' || value === null) {
     return 'N/A';
   }
+  if (typeof value === 'string' && value.includes('T00:00:00.000Z')) {
+    return value.split('T')[0];
+  }
+
   return value;
 };
 

app/formSchema/uiSchema/history/cbcData.ts

@@ -0,0 +1,62 @@
+import eventsAndDates from 'formSchema/analyst/cbc/eventsAndDates';
+import funding from 'formSchema/analyst/cbc/funding';
+import locations from 'formSchema/analyst/cbc/locations';
+import miscellaneous from 'formSchema/analyst/cbc/miscellaneous';
+import projectDataReviews from 'formSchema/analyst/cbc/projectDataReviews';
+import projectType from 'formSchema/analyst/cbc/projectType';
+import cbcTombstone from 'formSchema/analyst/cbc/tombstone';
+
+const cbcData = {
+  cbcData: {
+    properties: {
+      ...cbcTombstone.properties,
+      ...projectType.properties,
+      ...locations.properties,
+      communitiesAndLocalesCount: {
+        type: 'string',
+        title: 'Communities and locales count',
+      },
+      indigenousCommunities: {
+        type: 'string',
+        title: 'Indigenous Communities',
+      },
+      householdCount: {
+        type: 'string',
+        title: 'Household count',
+      },
+      transportKm: {
+        type: 'string',
+        title: 'Transport km',
+      },
+      highwayKm: {
+        type: 'string',
+        title: 'Highway km',
+      },
+      restAreas: {
+        type: 'string',
+        title: 'Rest areas',
+      },
+      ...funding.properties,
+      ...eventsAndDates.properties,
+      ...{
+        ...miscellaneous.properties,
+        projectMilestoneCompleted: {
+          type: 'string',
+          title: '% Project Milestone Completed',
+        },
+      },
+      ...projectDataReviews.properties,
+      projectStatus: {
+        title: 'Project Status',
+      },
+      projectDescription: {
+        title: 'Project Description',
+      },
+      project_number: {
+        title: 'Project Number',
+      },
+    },
+  },
+};
+
+export default cbcData;

app/pages/analyst/cbc/[cbcId].tsx

@@ -302,6 +302,7 @@ const Cbc = ({
               ...formData.miscellaneous,
               ...formData.projectDataReviews,
             },
+            changeReason,
           },
         },
         inputCbcChangeReason: {

app/pages/analyst/cbc/[cbcId]/cbcHistory.tsx

@@ -5,30 +5,15 @@ import { withRelay, RelayProps } from 'relay-nextjs';
 import { graphql } from 'react-relay';
 import defaultRelayOptions from 'lib/relay/withRelayOptions';
 import { cbcHistoryQuery } from '__generated__/cbcHistoryQuery.graphql';
+import CbcHistoryTable from 'components/Analyst/CBC/History/CbcHistoryTable';
 
 const getCbcHistoryQuery = graphql`
   query cbcHistoryQuery($rowId: Int!) {
-    cbcByRowId(rowId: $rowId) {
-      projectNumber
-      rowId
-      sharepointTimestamp
-      cbcDataByCbcId(first: 500) @connection(key: "CbcData__cbcDataByCbcId") {
-        edges {
-          node {
-            jsonData
-            sharepointTimestamp
-            rowId
-            projectNumber
-            updatedAt
-            updatedBy
-          }
-        }
-      }
-    }
     session {
       sub
     }
     ...CbcAnalystLayout_query
+    ...CbcHistoryTable_query
   }
 `;
 
@@ -39,7 +24,7 @@ const CbcHistory = ({
   return (
     <Layout session={null} title="Connecting Communities BC">
       <CbcAnalystLayout query={query}>
-        <h2 style={{ marginTop: '55px' }}>Under construction...</h2>
+        <CbcHistoryTable query={query} />
       </CbcAnalystLayout>
     </Layout>
   );