Merge pull request CSCDP#12 from SocialFinanceDigitalLabs/add-no-reco…

…rds-found

FAM-45: Update accordion

src/components/Accordion/AccordionHeader.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-const AccordionHeader: React.FC = (props) => {
+const AccordionHeader: React.FC<{ title: string, click: () => void}> = (props: { title: string, click: () => void}) => {
 
     return (
         <h2 className="govuk-accordion__section-heading">
             <button type="button" id="accordion-with-summary-sections-heading-1" aria-controls="accordion-with-summary-sections-content-1" className="govuk-accordion__section-button" aria-describedby="accordion-with-summary-sections-summary-1" aria-expanded="false">
-                {props.children}
+                {props.title}
             </button>
             <span className="govuk-accordion__icon" aria-hidden="true" />
         </h2>

src/components/Accordion/ServiceInvolvementAccordion.tsx

@@ -1,25 +1,24 @@
 import React from 'react';
 import AccordionHeader from './AccordionHeader';
 import ServiceInvolvementAccordionSummary from './ServiceInvolvementAccordionSummary';
-import BasicDetails from '../BasicDetails';
 import AccordionSection from './AccordionSection';
 import AccordionSectionHeader from './AccordionSectionHeader';
 import AccordionContent from './AccordionContent';
-import ServiceInvolvementDetails from '../../models/ServiceInvolvementDetails';
+import ServiceInvolvementDetailsSummary from '../../models/ServiceInvolvementDetailsSummary';
 
-const ServiceInvolvementAccordion: React.FC<{ serivceInvolvementDetails: ServiceInvolvementDetails }> = (props: { serivceInvolvementDetails: ServiceInvolvementDetails }) => {
+const ServiceInvolvementAccordion: React.FC<{ serviceInvolvementDetailsSummary: ServiceInvolvementDetailsSummary, click: () => void, children: any }> = (props: { serviceInvolvementDetailsSummary: ServiceInvolvementDetailsSummary, click: () => void, children: any }) => {
 
-  return (
-    <AccordionSection>
+    return (
+      <AccordionSection>
       <AccordionSectionHeader>
-        <AccordionHeader>{props.serivceInvolvementDetails.serviceInvolvementDetailsSummary.service}</AccordionHeader>
-        <ServiceInvolvementAccordionSummary serviceInvolvement={props.serivceInvolvementDetails.serviceInvolvementDetailsSummary} />
+        <AccordionHeader title={props.serviceInvolvementDetailsSummary.title} click={props.click}></AccordionHeader>
+        <ServiceInvolvementAccordionSummary serviceInvolvement={props.serviceInvolvementDetailsSummary} />
       </AccordionSectionHeader>
       <AccordionContent>
-        <BasicDetails personDetails={props.serivceInvolvementDetails.serviceInvolvementContent}></BasicDetails>
+        {props.children}
       </AccordionContent>
     </AccordionSection>
-  )
+    )
 }
 
-export default ServiceInvolvementAccordion;
+export default ServiceInvolvementAccordion;

src/components/Accordion/ServiceInvolvementAccordionSummary.tsx

@@ -4,8 +4,8 @@ import ServiceInvolvementDetailsSummary from '../../models/ServiceInvolvementDet
 const ServiceInvolvementAccordionSummary: React.FC<{ serviceInvolvement: ServiceInvolvementDetailsSummary,}> = (props: { serviceInvolvement: ServiceInvolvementDetailsSummary, }) => {
     return (
         <div className="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-1">
-            <p className="govuk-body govuk-!-font-size-14 govuk-!-margin-0">Information is correct as of <b>{props.serviceInvolvement.correctAsOf}</b></p>
-            <p className="govuk-body govuk-!-font-size-14 govuk-!-margin-0">Information is synced with <b>{props.serviceInvolvement.syncedWith}</b> for the duration of <b>{props.serviceInvolvement.syncedDuraction}</b></p>
+            <p className="govuk-body govuk-!-font-size-14 govuk-!-margin-0">Information is correct as of <b>{props.serviceInvolvement.lastSynchronized}</b></p>
+    <p className="govuk-body govuk-!-font-size-14 govuk-!-margin-0">Information is synced with <b>{/*props.serviceInvolvement.syncedWith*/}</b> for the duration of <b>{props.serviceInvolvement.coverageStartDate}-{props.serviceInvolvement.coverageEndDate}</b></p>
         </div>
     )
 }

src/components/BasicDetails.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Table from './Table/Table';
 import TableBody from './Table/TableBody';
 import PersonDetails from '../models/PersonDetails';
-import TitleValuePair from './Table/TitleValuePair';
+import TitleValuePair from './Table/TitleValuePairTableRow';
 
 const BasicDetails: React.FC<{ personDetails: PersonDetails }> = (props: { personDetails: PersonDetails }) => {
 

src/components/ServiceInvolvement.tsx

@@ -1,20 +1,34 @@
 import React from 'react';
 import ServiceInvolvementAccordion from './Accordion/ServiceInvolvementAccordion';
-import ServiceInvolvementDetails from '../models/ServiceInvolvementDetails';
+import PersonDetails from '../models/PersonDetails'
+import ServiceInvolvementDetailsSummary from '../models/ServiceInvolvementDetailsSummary';
+import TitleValuePair from '../models/TitleValuePair';
+import Table from './Table/Table';
+import TableBody from './Table/TableBody';
+import TitleValuePairTableRow from './Table/TitleValuePairTableRow';
 
-class ServiceInvolvement extends React.Component<{ serivceInvolvementDetails: ServiceInvolvementDetails}> {
+class ServiceInvolvement extends React.Component<{ personDetails: PersonDetails }> {
 
-    componentDidMount() {
+    componentDidUpdate() {
         var serviceInvolvementElements = document.getElementById("service-involvements");
         window.GOVUKFrontend.initAll({ scope: serviceInvolvementElements });
     }
 
     render() {
+        let serviceInvolvementDetailsSummary: ServiceInvolvementDetailsSummary = { title: "Police", coverageStartDate: "31/10/2017", coverageEndDate: "04/11/2019", recordsAvailable: true, id: "1", lastSynchronized: "04/11/2019" }
+        let content: TitleValuePair[] = [{ title: "Service Involvement", value: "Current" }, { title: "Police Contact", value: "Jason Davies" }, { title: "Lead practitioner contact", value: "" }, { title: "Last offence", value: "" }, { title: "Date of offence", value: "" }, { title: "Type of offence", value: "Domestic abuse" }, { title: "Nature of involvement", value: "Victim" }]
         return (
             <div id="service-involvements">
                 <div className="govuk-accordion js-enabled" data-module="govuk-accordion" id="accordion-with-summary-sections">
-                    <ServiceInvolvementAccordion serivceInvolvementDetails={this.props.serivceInvolvementDetails} />
-                    <ServiceInvolvementAccordion serivceInvolvementDetails={this.props.serivceInvolvementDetails} />
+                    <ServiceInvolvementAccordion serviceInvolvementDetailsSummary={serviceInvolvementDetailsSummary} click={() => { }}>
+                        <Table>
+                            <TableBody>
+                                {content.map(element => (
+                                    <TitleValuePairTableRow rowTitle={element.title} rowValue={element.value} format="govuk-!-font-size-14" />
+                                ))}
+                            </TableBody>
+                        </Table>
+                    </ServiceInvolvementAccordion>
                 </div>
             </div>
         )

src/components/Table/TitleValuePair.tsx → src/components/Table/TitleValuePairTableRow.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const TitleValuePair: React.FC<{rowTitle: string, rowValue: string, format?: string}> = (props: {rowTitle: string, rowValue: string, format?: string}) => {
+const TitleValuePairTableRow: React.FC<{rowTitle: string, rowValue: string, format?: string}> = (props: {rowTitle: string, rowValue: string, format?: string}) => {
     return (
         <tr className="govuk-table__row">
             <td className={`govuk-table__cell ${props.format}`}>{props.rowTitle}</td>
@@ -9,4 +9,4 @@ const TitleValuePair: React.FC<{rowTitle: string, rowValue: string, format?: str
     )
 }
 
-export default TitleValuePair;
+export default TitleValuePairTableRow;

src/models/ServiceInvolvementDetails.tsx

@@ -1,9 +1,10 @@
 import ServiceInvolvementDetailsSummary from "./ServiceInvolvementDetailsSummary";
+import TitleValuePair from "./TitleValuePair";
 import PersonDetails from "./PersonDetails";
 
 interface ServiceInvolvementDetails {
     serviceInvolvementDetailsSummary: ServiceInvolvementDetailsSummary, 
-    serviceInvolvementContent: PersonDetails
+    person?: PersonDetails
 }
 
 export default ServiceInvolvementDetails

src/models/ServiceInvolvementDetailsSummary.tsx

@@ -1,8 +1,10 @@
 interface ServiceInvolvementDetailsSummary {
-    service: string,
-    correctAsOf: string,
-    syncedWith: string,
-    syncedDuraction: string
+    title: string,
+    lastSynchronized: string,
+    recordsAvailable: boolean,
+    coverageStartDate: string,
+    coverageEndDate: string,
+    id: string
 }
 
 export default ServiceInvolvementDetailsSummary;

src/models/TitleValuePair.tsx

@@ -0,0 +1,6 @@
+interface TitleValuePair {
+    title: string,
+    value: string
+}
+
+export default TitleValuePair

src/pages/IndividualPage.tsx

@@ -4,9 +4,7 @@ import PersonDetails from '../models/PersonDetails';
 import { RouteComponentProps } from 'react-router-dom';
 import ApiClient from '../clients/ApiClient';
 import BackButton from '../components/BackButton';
-import ServiceInvolvementDetailsSummary from '../models/ServiceInvolvementDetailsSummary';
 import ServiceInvolvement from '../components/ServiceInvolvement';
-import ServiceInvolvementDetails from '../models/ServiceInvolvementDetails';
 
 interface PersonParams {
   personId?: string
@@ -30,14 +28,11 @@ class IndividualPage extends React.Component<RouteComponentProps<PersonParams> &
   }
 
   render() {
-    let serviceInvolvementDetailsSummary: ServiceInvolvementDetailsSummary = { service: "Adult Social Care", syncedDuraction: "31/10/2017-04/11/2019", syncedWith: "CIS", correctAsOf: "04/11/2019 at 23.59" }
-    let serviceInvolvementDetails: ServiceInvolvementDetails = { serviceInvolvementDetailsSummary: serviceInvolvementDetailsSummary, serviceInvolvementContent: this.state }
-
     return (
       <div className="IndividualPage">
         <BackButton {...this.props} />
         <BasicDetails personDetails={this.state}></BasicDetails>
-        <ServiceInvolvement serivceInvolvementDetails={serviceInvolvementDetails} />
+        <ServiceInvolvement personDetails={this.state} />
       </div>
     );
   }