From 5b8c1b01c5d03cdece64eb98ac19753865243560 Mon Sep 17 00:00:00 2001
From: Lea Renaux <lea.renaux@insee.fr>
Date: Wed, 24 Apr 2024 10:33:40 +0200
Subject: [PATCH] add FollowInterviewerCard

---
 src/i18n-en.js                   |  6 +++
 src/i18n-fr.js                   |  7 +++
 src/pages/FollowPage.tsx         | 26 +++++++++-
 src/ui/FollowInterviewerCard.tsx | 86 ++++++++++++++++++++++++++++++++
 4 files changed, 123 insertions(+), 2 deletions(-)
 create mode 100644 src/ui/FollowInterviewerCard.tsx

diff --git a/src/i18n-en.js b/src/i18n-en.js
index 1838e96..d424c27 100644
--- a/src/i18n-en.js
+++ b/src/i18n-en.js
@@ -21,4 +21,10 @@ export const messagesEn = {
     statesFilterLabel: 'States...',
     closingCauseFilterLabel: 'Closing cause...',
     priorityFilterLabel: 'Priority...',
+    searchInterviewer: 'an interviewer...',
+    searchOrganizationUnit: "an organization unit...",
+    chooseSurvey: "Choose a survey :",
+    chooseInterviewer: "Choose an interviewer :",
+    chooseOrganizationUnit: "Choose an organization unit :",
+    followInterviewer: "Follow an interviewer",
 }
\ No newline at end of file
diff --git a/src/i18n-fr.js b/src/i18n-fr.js
index 610899a..02c6668 100644
--- a/src/i18n-fr.js
+++ b/src/i18n-fr.js
@@ -21,4 +21,11 @@ export const messagesFr = {
     statesFilterLabel: 'Etat...',
     closingCauseFilterLabel: 'Bilan agrégé...',
     priorityFilterLabel: 'Prioritaire...', 
+    searchInterviewer: 'un enquêteur...',
+    searchOrganizationUnit: "un site...",
+    chooseSurvey: "Choisissez une enquête :",
+    chooseInterviewer: "Choisissez un enquêteur / une enquêtrice :",
+    chooseOrganizationUnit: "Choisissez un site :",
+    followInterviewer: "Suivre un enquêteur",
+
 }
\ No newline at end of file
diff --git a/src/pages/FollowPage.tsx b/src/pages/FollowPage.tsx
index d7a5e3d..c4e76cb 100644
--- a/src/pages/FollowPage.tsx
+++ b/src/pages/FollowPage.tsx
@@ -1,5 +1,27 @@
-import { Typography } from "@mui/material";
+import { Row } from "../ui/Row";
+import { FollowInterviewerCard } from "../ui/FollowInterviewerCard";
 
 export const FollowPage = () => {
-  return <Typography>Page suivre</Typography>;
+  // TODO use real condition
+  const isNationalProfile = true;
+
+  const gridTemplateColumns = isNationalProfile
+    ? { gridTemplateColumns: "1fr 1fr 1fr" }
+    : { gridTemplateColumns: "1fr 1fr" };
+
+  return (
+    <Row
+      style={{
+        ...{
+          display: "grid",
+          ...gridTemplateColumns,
+        },
+      }}
+      gap={3}
+      px={4}
+      py={3}
+    >
+      <FollowInterviewerCard />
+    </Row>
+  );
 };
diff --git a/src/ui/FollowInterviewerCard.tsx b/src/ui/FollowInterviewerCard.tsx
new file mode 100644
index 0000000..a389886
--- /dev/null
+++ b/src/ui/FollowInterviewerCard.tsx
@@ -0,0 +1,86 @@
+import { useIntl } from "react-intl";
+import { useDebouncedState } from "../hooks/useDebouncedState";
+import Card from "@mui/material/Card";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { SearchField } from "./SearchField";
+import TableContainer from "@mui/material/TableContainer";
+import Table from "@mui/material/Table";
+import TableHead from "@mui/material/TableHead";
+import { TableBody, TableCell, TableRow } from "@mui/material";
+
+const interviewersMock = [
+  {
+    id: "1",
+    interviewerFirstName: "John",
+    interviewerLastName: "Doe",
+  },
+  {
+    id: "2",
+    interviewerFirstName: "Marion",
+    interviewerLastName: "Cotillard",
+  },
+  {
+    id: "3",
+    interviewerFirstName: "Johnny",
+    interviewerLastName: "Depp",
+  },
+  {
+    id: "4",
+    interviewerFirstName: "Romain",
+    interviewerLastName: "Duris",
+  },
+  {
+    id: "5",
+    interviewerFirstName: "Angélina",
+    interviewerLastName: "Jolie",
+  },
+];
+
+export const FollowInterviewerCard = () => {
+  const intl = useIntl();
+  const [search, setSearch] = useDebouncedState("", 500);
+  // const [page, setPage] = useState(0);
+
+  // const handleChangePage = (_: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
+  //   setPage(newPage);
+  // };
+
+  return (
+    <Card variant="general" sx={{ height: "calc(100vh - 140px)", py: 4, px: 3 }}>
+      <Stack gap={3}>
+        <Typography variant="headlineLarge">
+          {intl.formatMessage({ id: "followInterviewer" })}
+        </Typography>
+        <SearchField
+          onChange={e => setSearch(e.target.value)}
+          label={intl.formatMessage({ id: "toSearchLabel" })}
+          placeholder={intl.formatMessage({ id: "searchInterviewer" })}
+        />
+
+        <TableContainer>
+          <Table aria-label="interviewer list" size="small" sx={{ typography: "bodyMedium" }}>
+            <TableHead>
+              <TableRow>
+                <TableCell sx={{ color: "text.tertiary" }}>
+                  {intl.formatMessage({ id: "chooseInterviewer" })}
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {interviewersMock.map(interviewer => (
+                <TableRow key={interviewer.id}>
+                  <TableCell>
+                    {interviewer.interviewerLastName.toLocaleUpperCase()}{" "}
+                    {interviewer.interviewerFirstName}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+            {/* TODO use TableFooter  */}
+          </Table>
+        </TableContainer>
+      </Stack>
+    </Card>
+  );
+};