Merge branch 'develop' into fix/checkAllOnlyOnDisplayedData

InseeFr · Jan 4, 2024 · 33d80aa · 33d80aa
2 parents 3392a8e + 6a1da77
commit 33d80aa
Show file tree

Hide file tree

Showing 7 changed files with 1,110 additions and 29 deletions.
diff --git a/src/components/CampaignPortal/CampaignPortal.css b/src/components/CampaignPortal/CampaignPortal.css
@@ -2,6 +2,10 @@
   width: 30%;
 }
 
+.DatesLeftHeader{
+  width: 30%;
+}
+
 /* Column sizes */
 
 #CampaignPortal .ColInterviewerName{

diff --git a/src/components/CampaignPortal/CampaignPortal.jsx b/src/components/CampaignPortal/CampaignPortal.jsx
@@ -7,6 +7,7 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Utils from '../../utils/Utils';
 import TimeLine from './TimeLine';
+import { DatesTable } from './Dates'
 import Contacts from './Contacts';
 import SurveyUnits from './SurveyUnits';
 import SurveySelector from '../SurveySelector/SurveySelector';
@@ -106,6 +107,12 @@ function CampaignPortal({
               <Row>
                 <Col>
                   <Contacts />
+                  <DatesTable
+                    identificationPhaseStartDate={surveyInfo.identificationPhaseStartDate}
+                    collectionstartDate={surveyInfo.collectionstartDate}
+                    collectionEndDate={surveyInfo.collectionEndDate}
+                    endDate={surveyInfo.endDate}
+                  />
                 </Col>
                 <Col>
                   <SurveyUnits

diff --git a/src/components/CampaignPortal/Dates.jsx b/src/components/CampaignPortal/Dates.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import Card from 'react-bootstrap/Card';
+import D from '../../i18n';
+import Utils from '../../utils/Utils';
+import Table from 'react-bootstrap/Table';
+
+export const DatesTable = ({identificationPhaseStartDate, collectionstartDate, collectionEndDate, endDate }) => {
+    return (
+        <Card className="ViewCard">
+            <Card.Title className="Title">{D.dates}</Card.Title>
+            <Table className="CustomTable" bordered striped responsive size="sm">
+                <tbody>  
+                    <tr>
+                        <th className="DatesLeftHeader">{D.identificationPhaseStartDate}</th>
+                        <td className="LightGreyLine VerticallyCentered">{identificationPhaseStartDate && Utils.convertToDateString(identificationPhaseStartDate)}</td>
+                    </tr>
+                    <tr>
+                        <th className="DatesLeftHeader">{D.collectionStartDate}</th>
+                        <td className="LightGreyLine VerticallyCentered">{collectionstartDate && Utils.convertToDateString(collectionstartDate)}</td>
+                    </tr>
+                    <tr>
+                        <th className="DatesLeftHeader">{D.collectionEndDate}</th>
+                        <td className="LightGreyLine VerticallyCentered">{collectionEndDate && Utils.convertToDateString(collectionEndDate)}</td>
+                    </tr>
+                    <tr>
+                        <th className="DatesLeftHeader">{D.endDate}</th>
+                        <td className="LightGreyLine VerticallyCentered">{endDate && Utils.convertToDateString(endDate)}</td>
+                    </tr>
+                </tbody>
+            </Table>
+        </Card>
+
+    )
+}
diff --git a/src/components/CampaignPortal/Dates.test.jsx b/src/components/CampaignPortal/Dates.test.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { DatesTable } from "./Dates";
+import { render, screen } from '@testing-library/react';
+import Utils from '../../utils/Utils';
+
+describe("dates component", () => {
+    it("should display all labels", () => {
+        render(
+            <DatesTable
+                identificationPhaseStartDate={1578907245000}
+                collectionstartDate={1609492845000}
+                collectionEndDate={1698706800000}
+                endDate={1706655600000}
+              />
+
+          );
+
+        expect(screen.getByText("Dates")).toBeInTheDocument();
+        expect(screen.getByText("Start of identification phase")).toBeInTheDocument();
+        expect(screen.getByText("Collection start date")).toBeInTheDocument();
+        expect(screen.getByText("Collection end date")).toBeInTheDocument();
+        expect(screen.getByText("Processing end date")).toBeInTheDocument();
+
+    })
+
+    it("should display all formated dates", () => {
+        render(
+            <DatesTable
+                identificationPhaseStartDate={1578907245000}
+                collectionstartDate={1609492845000}
+                collectionEndDate={1698706800000}
+                endDate={1706655600000}
+              />
+
+          );
+
+        expect(screen.getByText(Utils.convertToDateString(1578907245000))).toBeInTheDocument();
+        expect(screen.getByText(Utils.convertToDateString(1609492845000))).toBeInTheDocument();
+        expect(screen.getByText(Utils.convertToDateString(1698706800000))).toBeInTheDocument();
+        expect(screen.getByText(Utils.convertToDateString(1706655600000))).toBeInTheDocument();
+    })
+})