feat: add NavigationDrawer and rework contact pages (#90)

* feat: add NavigationDrawer * feat: add SearchContactTable * feat: add searchContact empty state and create new ContactPage * feat: add contact filter logic and remove old files * add ContactCampaignCard skeleton and rework links * feat: add campaigns data in ContactCampaignCard * feat: rework ContactFormDialog * feat: rework error fields style and move schema in specific files * feat: rework textfield for number type and add otherPhone in form * fix: review * add prettier rule for import extensions
InseeFr · Jul 17, 2024 · 52bd061 · 52bd061
1 parent b1f45ca
commit 52bd061
Show file tree

Hide file tree

Showing 70 changed files with 2,210 additions and 971 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -8,9 +8,21 @@ module.exports = {
   ],
   ignorePatterns: ["dist", ".eslintrc.cjs", "api.ts"],
   parser: "@typescript-eslint/parser",
-  plugins: ["react-refresh"],
+  plugins: ["react-refresh",  'import'],
   rules: {
     "@typescript-eslint/no-explicit-any": ["off"],
     "react-refresh/only-export-components": ["off"],
+    'import/extensions': ['error', 'ignorePackages', {
+      ts: 'always',
+      tsx: 'always',
+    }],
   },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  }
+
 };
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "platine-management",
   "private": true,
-  "version": "1.0.19",
+  "version": "1.0.20",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -42,10 +42,11 @@
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
     "eslint": "^8.45.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "prettier": "^3.0.0",
-    "typescript": "^5.0.2",
+    "typescript": "^5.4.5",
     "vite": "^4.4.5"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import { routes, unauthorizedRoutes } from "./routes";
-import { useHasPermission } from "./hooks/usePermissions";
+import { routes, unauthorizedRoutes } from "./routes.tsx";
+import { useHasPermission } from "./hooks/usePermissions.ts";
 import "./App.css";
 
 const router = createBrowserRouter(routes);

diff --git a/src/functions/autoLogoutCountdown.tsx b/src/functions/autoLogoutCountdown.tsx
@@ -1,6 +1,6 @@
 import { Typography } from "@mui/material";
 import { useState, useEffect } from "react";
-import { useOidc } from "../hooks/useAuth";
+import { useOidc } from "../hooks/useAuth.ts";
 
 export function AutoLogoutCountdown() {
   const { isUserLoggedIn, subscribeToAutoLogoutCountdown } = useOidc();
@@ -14,8 +14,8 @@ export function AutoLogoutCountdown() {
 
       const { unsubscribeFromAutoLogoutCountdown } = subscribeToAutoLogoutCountdown(
         ({ secondsLeft }) => {
-          setSecondsLeft(secondsLeft === undefined || secondsLeft > 60 ? undefined : secondsLeft),
-            console.log(`seconds Left: ${secondsLeft}`);
+          setSecondsLeft(secondsLeft === undefined || secondsLeft > 60 ? undefined : secondsLeft);
+          // console.log(`seconds Left: ${secondsLeft}`);
         },
       );
 

diff --git a/src/hooks/useFetchQuery.ts b/src/hooks/useFetchQuery.ts
@@ -5,7 +5,7 @@ import {
   useQuery,
   type UseQueryOptions,
 } from "@tanstack/react-query";
-import { APIError, fetchAPI } from "../functions/api";
+import { APIError, fetchAPI } from "../functions/api.ts";
 import { APIPaths, APIRequests, APIResponse, APIRequest, APIMethods } from "../types/api.ts";
 import { useMemo } from "react";
 import { useAccessToken } from "./useAuth.ts";

diff --git a/src/hooks/usePermissions.ts b/src/hooks/usePermissions.ts
@@ -1,4 +1,4 @@
-import { useMaybeUser, useUser } from "./useAuth";
+import { useMaybeUser, useUser } from "./useAuth.ts";
 
 type User = ReturnType<typeof useUser>;
 type PermissionRequirement = string[] | ((user: User) => boolean);

diff --git a/src/hooks/useSearchFilter.ts b/src/hooks/useSearchFilter.ts
@@ -4,11 +4,7 @@ import { combine } from "zustand/middleware";
 
 export const base = {
   contacts: {
-    identifier: "",
-    name: "",
-    email: "",
-    city: "",
-    function: "",
+    search: "",
   },
   surveyUnits: {
     idSu: "",

diff --git a/src/pages/Contact/ContactInfosTab.tsx b/src/pages/Contact/ContactInfosTab.tsx
@@ -1,7 +1,7 @@
-import { ContactDetailsCard } from "../../ui/Contact/ContactDetailsCard";
-import { PasswordCard } from "../../ui/Contact/PasswordCard";
-import { HistoryActionsCard } from "../../ui/Contact/HistoryActionsCard";
-import { CommentsCard } from "../../ui/Contact/CommentsCard";
+import { ContactDetailsCard } from "../../ui/Contact/ContactDetailsCard.tsx";
+import { PasswordCard } from "../../ui/Contact/PasswordCard.tsx";
+import { HistoryActionsCard } from "../../ui/Contact/HistoryActionsCard.tsx";
+import { CommentsCard } from "../../ui/Contact/CommentsCard.tsx";
 import { APISchemas } from "../../types/api.ts";
 import Grid from "@mui/material/Grid";
 

diff --git a/src/pages/ContactPage.tsx b/src/pages/ContactPage.tsx
@@ -1,44 +1,31 @@
-import Divider from "@mui/material/Divider";
-import { ContactHeader } from "../ui/Contact/ContactHeader.tsx";
-import { useFetchQuery } from "../hooks/useFetchQuery.ts";
 import { useParams } from "react-router-dom";
+import { useFetchQuery } from "../hooks/useFetchQuery.ts";
 import { Row } from "../ui/Row.tsx";
-import { CircularProgress, Stack, Tabs } from "@mui/material";
-import { type SyntheticEvent, useState } from "react";
+import CircularProgress from "@mui/material/CircularProgress";
 import { Breadcrumbs } from "../ui/Breadcrumbs.tsx";
-import { ContactInfosTab } from "./Contact/ContactInfosTab.tsx";
-import { PageTab } from "../ui/PageTab.tsx";
-import { ContactSurveysContent } from "../ui/Contact/ContactSurveys.tsx";
-import { IdsManagement } from "../ui/Contact/IdsManagement.tsx";
-import { RightsManagement } from "../ui/Contact/RightsManagement.tsx";
-
-enum Tab {
-  Infos = "Infos",
-  Surveys = "Surveys",
-  Ids = "Ids",
-  Permissions = "Permissions",
-}
-
-const TabNames = {
-  [Tab.Infos]: "Infos contact",
-  [Tab.Surveys]: "Questionnaire(s)",
-  [Tab.Ids]: "Gestion des identifiants",
-  [Tab.Permissions]: "Gestion des droits",
-};
+import Divider from "@mui/material/Divider";
+import Stack from "@mui/material/Stack";
+import { theme } from "../theme.tsx";
+import { Button, Typography } from "@mui/material";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import { ContactDetailsCard } from "../ui/Contact/ContactDetailsCard.tsx";
+import { ContactCampaignsCard } from "../ui/Contact/ContactCampaignsCard.tsx";
 
-export function ContactPage() {
+export const ContactPage = () => {
   const { id } = useParams();
   const { data: contact, refetch } = useFetchQuery("/api/contacts/{id}", {
     urlParams: {
       id: id!,
     },
   });
-  const [currentTab, setCurrentTab] = useState(Tab.Infos);
-  const handleChange = (_: SyntheticEvent, newValue: Tab) => {
-    setCurrentTab(newValue);
-  };
 
-  if (!contact) {
+  const { data: surveys } = useFetchQuery("/api/contacts/{id}/accreditations", {
+    urlParams: {
+      id: id!,
+    },
+  });
+
+  if (!contact || !surveys) {
     return (
       <Row justifyContent="center" py={10}>
         <CircularProgress />
@@ -49,42 +36,40 @@ export function ContactPage() {
   const contactTitle =
     contact.firstName || contact.lastName
       ? `${contact.firstName ?? ""} ${contact.lastName ?? ""}`
-      : contact.identifier;
+      : "Prénom Nom";
 
   const breadcrumbs = [
     { href: "/", title: "Accueil" },
-    { href: "/search", title: "Recherche" },
-    {
-      href: `/contacts/${contact.identifier}`,
-      title: contactTitle,
-    },
-    TabNames[currentTab],
+    { href: "/contacts", title: "Contacts" },
+    contactTitle,
   ];
 
   return (
     <>
-      <ContactHeader contact={contact} />
-      <Divider variant="fullWidth" />
-      <Tabs
-        value={currentTab}
-        onChange={handleChange}
-        sx={{
-          px: 5,
-          backgroundColor: "white",
-        }}
-      >
-        {Object.keys(Tab).map(k => (
-          <PageTab key={k} value={k} label={TabNames[k]} />
-        ))}
-      </Tabs>
-
-      <Stack px={3} py={3}>
+      <Stack sx={{ backgroundColor: theme.palette.Surfaces.Secondary, px: 6, py: 3 }}>
         <Breadcrumbs items={breadcrumbs} />
-        {currentTab === Tab.Infos && <ContactInfosTab contact={contact} onSave={refetch} />}
-        {currentTab === Tab.Surveys && <ContactSurveysContent contact={contact} />}
-        {currentTab === Tab.Ids && <IdsManagement contact={contact} />}
-        {currentTab === Tab.Permissions && <RightsManagement contact={contact} />}
+        <Typography variant="headlineLarge" fontWeight={600}>
+          {contactTitle}
+        </Typography>
+        <Row justifyContent={"space-between"}>
+          <Typography variant="bodyMedium">{`ID connexion : #${contact.identifier}`}</Typography>
+          <Button
+            variant="contained"
+            endIcon={<OpenInNewIcon />}
+            // TODO: remove disabled when get pages
+            disabled
+          >
+            Voir les interrogations
+          </Button>
+        </Row>
+      </Stack>
+      <Divider variant="fullWidth" />
+      <Stack px={5} pt={3}>
+        <Row alignItems={"start"} gap={3}>
+          <ContactDetailsCard contact={contact} onSave={refetch} />
+          <ContactCampaignsCard surveys={surveys} />
+        </Row>
       </Stack>
     </>
   );
-}
+};
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,59 +1,16 @@
-import { Typography } from "@mui/material";
-import CorporateFareIcon from "@mui/icons-material/CorporateFare";
-import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
-import { InfoBanner } from "../ui/InfoBanner.tsx";
-import { HomeCard } from "../ui/Card/HomeCard.tsx";
-import { BinocularIcon } from "../ui/Icon/BinocularIcon.tsx";
-import Stack from "@mui/material/Stack";
-import { Row } from "../ui/Row.tsx";
+import { Alert, Stack, Typography } from "@mui/material";
+import { useMaybeUser } from "../hooks/useAuth.ts";
+
+export const Home = () => {
+  const user = useMaybeUser();
 
-export function Home() {
-  const maxWidth = 800;
   return (
-    <>
-      <InfoBanner />
-      <Stack
-        position="relative"
-        sx={{
-          background: "linear-gradient(270deg, #21005D 0%, #9A82DB 0%, #E12358 90%)",
-        }}
-        justifyContent="center"
-        alignItems="center"
-        minHeight={500}
-        height="calc(100vh - 230px)"
-      >
-        <Stack gap={3} sx={{ maxWidth }} my={5}>
-          <Typography variant="displayMedium" fontWeight={700} color="white">
-            Trouver un contact, une enquête ou une unité enquêtée
-          </Typography>
-        </Stack>
-        <Row
-          position="relative"
-          bottom={-30}
-          justifyContent="space-between"
-          width={1}
-          maxWidth={maxWidth}
-        >
-          <HomeCard
-            IconComponent={PersonOutlineIcon}
-            content="Voir mes contacts"
-            color="#D6326D"
-            to="/search/contacts"
-          />
-          <HomeCard
-            IconComponent={BinocularIcon}
-            content="Voir mes enquêtes"
-            color="#C34A8E"
-            to="/search/surveys"
-          />
-          <HomeCard
-            IconComponent={CorporateFareIcon}
-            content="Voir mes unités enquêtées"
-            color="#AC69B9"
-            to="/search/survey-units"
-          />
-        </Row>
-      </Stack>
-    </>
+    <Stack gap={4} p={4}>
+      <Typography variant="headlineLarge">{`Bonjour ${user?.preferred_username} !`}</Typography>
+      <Alert severity="info">
+        MAINTENANCE : le CEI va tester la pose automatique de page de maintenance mardi 21 janvier et
+        mercredi 1er février.
+      </Alert>
+    </Stack>
   );
-}
+};
diff --git a/src/pages/Logout.tsx b/src/pages/Logout.tsx
@@ -1,5 +1,5 @@
 import { Stack, Typography, Box, Link } from "@mui/material";
-import { Row } from "../ui/Row";
+import { Row } from "../ui/Row.tsx";
 import { PropsWithChildren } from "react";
 import { Link as RouterLink } from "react-router-dom";