feat: share reports

betagouv · Jun 21, 2024 · e342c92 · e342c92
1 parent b25b2ed
commit e342c92
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 6 deletions.
diff --git a/packages/frontend/src/components/SyncForm.tsx b/packages/frontend/src/components/SyncForm.tsx
@@ -14,11 +14,14 @@ import Input from "@codegouvfr/react-dsfr/Input";
 import { Report } from "@cr-vif/electric-client/frontend";
 import { useEffect } from "react";
 import { ElectricStatus, useElectricStatus } from "../contexts/AuthContext";
+import { useIsFormDisabled } from "../features/DisabledContext";
 
 export function SyncFormBanner({ form, baseObject }: { form: UseFormReturn<Report>; baseObject: Record<string, any> }) {
   const newObject = useWatch({ control: form.control });
 
-  const diff = getDiff(newObject, baseObject);
+  const disabled = useIsFormDisabled();
+
+  const diff = disabled ? {} : getDiff(newObject, baseObject);
   const syncMutation = useMutation(() => syncObject(baseObject.id, diff));
 
   useDebounce(() => syncMutation.mutate(), 500, [diff]);

diff --git a/packages/frontend/src/contexts/AuthContext.tsx b/packages/frontend/src/contexts/AuthContext.tsx
@@ -72,6 +72,14 @@ export const AuthProvider = ({ children }: PropsWithChildren) => {
         },
       });
       await electric.db.service_instructeurs.sync({ where: { udap_id: data!.user!.udap_id } });
+      await electric.db.delegation.sync({
+        where: {
+          OR: [{ createdBy: data!.user!.id }, { delegatedTo: data!.user!.id }],
+        },
+        include: {
+          user_delegation_createdByTouser: true,
+        },
+      });
 
       return true;
     },

diff --git a/packages/frontend/src/features/InfoForm.tsx b/packages/frontend/src/features/InfoForm.tsx
@@ -13,6 +13,8 @@ import type { Report } from "@cr-vif/electric-client/frontend";
 import { css } from "#styled-system/css";
 import { ServiceInstructeurSelect } from "./ServiceInstructeurSelect";
 import { useIsFormDisabled } from "./DisabledContext";
+import { useLiveQuery } from "electric-sql/react";
+import { db } from "../db";
 
 export const InfoForm = () => {
   const form = useFormContext<Report>();
@@ -49,6 +51,14 @@ export const InfoForm = () => {
     tryToSetMeetDate();
   };
 
+  const redactedByQuery = useLiveQuery(
+    db.delegation.liveMany({ where: { delegatedTo: user.id }, include: { user_delegation_createdByTouser: true } }),
+  );
+  const redactedByOptions = redactedByQuery.results?.map((delegation) => ({
+    value: (delegation as any).user_delegation_createdByTouser?.name,
+    label: (delegation as any).user_delegation_createdByTouser?.name,
+  }));
+
   const tab = useTabsContext();
 
   return (
@@ -62,6 +72,11 @@ export const InfoForm = () => {
             nativeSelectProps={form.register("redactedBy")}
           >
             <option value={user.name}>{user.name}</option>
+            {redactedByOptions?.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            )) ?? null}
           </Select>
           <Input
             className={css({ flex: { base: "none", sm: 1 } })}

diff --git a/packages/frontend/src/features/menu/MenuActions.tsx b/packages/frontend/src/features/menu/MenuActions.tsx
@@ -15,7 +15,7 @@ export const MenuActions = () => {
   const logout = useLogout();
 
   const actions = [
-    { text: "Partage des CR", onClick: () => {}, disabled: true },
+    { text: "Partage des CR", onClick: () => setMenu("share") },
     { text: "Clauses départementales", onClick: () => setMenu("clauses-departementales") },
     { text: "Clauses nationales", onClick: () => setMenu("clauses-nationales") },
     { text: "Assistance technique", onClick: () => setMenu("help") },
@@ -38,12 +38,11 @@ export const MenuActions = () => {
         },
       })}
     >
-      {actions.map(({ text, onClick, disabled }, index) => (
+      {actions.map(({ text, onClick }, index) => (
         <Fragment key={text}>
           <Button
             className={css({ w: "100%" })}
             type="button"
-            disabled={disabled}
             priority="tertiary no outline"
             onClick={(e) => {
               e.preventDefault();

diff --git a/packages/frontend/src/features/menu/MenuButton.tsx b/packages/frontend/src/features/menu/MenuButton.tsx
@@ -14,8 +14,9 @@ import { ClauseMenu } from "./ClauseMenu";
 import { HelpMenu } from "./HelpMenu";
 import { MenuActions } from "./MenuActions";
 import { menuStore } from "./menuStore";
+import { ShareReport } from "./Share";
 
-const nestedMenus = ["main", "help", "clauses-nationales", "clauses-departementales"] as const;
+const nestedMenus = ["main", "help", "clauses-nationales", "clauses-departementales", "share"] as const;
 export type NestedMenu = (typeof nestedMenus)[number];
 
 export const MenuButton = ({ headerRef }: { headerRef: any }) => {
@@ -85,13 +86,15 @@ const modalTitles: Record<NestedMenu, string> = {
   help: "Assistance technique",
   "clauses-departementales": "Clauses départementales",
   "clauses-nationales": "Clauses nationales",
+  share: "Partage des CR",
 };
 
 const modalContents: Record<NestedMenu, ReactNode> = {
   main: <MenuActions />,
   help: <HelpMenu />,
   "clauses-departementales": <ClauseMenu isNational={false} />,
   "clauses-nationales": <ClauseMenu isNational />,
+  share: <ShareReport />,
 };
 
 const MenuModal = ({ menu, isOpen, className }: { menu: NestedMenu | null; isOpen: boolean; className?: string }) => {

diff --git a/packages/frontend/src/features/menu/Share.tsx b/packages/frontend/src/features/menu/Share.tsx
@@ -0,0 +1,103 @@
+import { Divider, Flex, Stack, styled } from "#styled-system/jsx";
+import { useLiveQuery } from "electric-sql/react";
+import { useUser } from "../../contexts/AuthContext";
+import { db } from "../../db";
+import { Delegation, User } from "@cr-vif/electric-client/frontend";
+import { ToggleSwitch } from "@codegouvfr/react-dsfr/ToggleSwitch";
+import { useMutation } from "@tanstack/react-query";
+import { css } from "#styled-system/css";
+
+export const ShareReport = () => {
+  const user = useUser()!;
+
+  const coworkersQuery = useLiveQuery(
+    db.user.liveMany({
+      where: {
+        udap_id: user.udap_id,
+        id: { not: user.id },
+      },
+    }),
+  );
+
+  const delegationsQuery = useLiveQuery(
+    db.delegation.liveMany({
+      where: {
+        createdBy: user.id,
+      },
+    }),
+  );
+
+  const delegatedToMeQuery = useLiveQuery(
+    db.delegation.liveMany({
+      where: {
+        delegatedTo: user.id,
+      },
+      include: {
+        user_delegation_createdByTouser: true,
+      },
+    }),
+  );
+
+  return (
+    <>
+      <Divider height="2px" my={{ base: "27px", lg: "44px" }} color="#C1C1FB" />
+
+      <Stack w="100%">
+        <styled.div>Ces personnes peuvent créer, modifier et supprimer vos CR : </styled.div>
+        <ManageDelegations coworkers={coworkersQuery.results ?? []} delegations={delegationsQuery.results ?? []} />
+      </Stack>
+
+      <Stack mt="49px" color="#757575">
+        <styled.div>Ces personnes vous permettent de créer, modifier et supprimer leurs CR :</styled.div>
+        <styled.ul>
+          {delegatedToMeQuery.results?.map((delegation) => (
+            <styled.li key={delegation.createdBy}>
+              {(delegation as any).user_delegation_createdByTouser?.name}
+            </styled.li>
+          ))}
+        </styled.ul>
+      </Stack>
+    </>
+  );
+};
+
+const ManageDelegations = ({ coworkers, delegations }: { coworkers: User[]; delegations: Delegation[] }) => {
+  const user = useUser()!;
+
+  const createMutation = useMutation((delegation: Delegation) => db.delegation.create({ data: delegation }));
+  const removeMutation = useMutation(
+    (delegation: Delegation) =>
+      void console.log(delegation) ||
+      db.delegation.deleteMany({
+        where: {
+          createdBy: delegation.createdBy,
+          delegatedTo: delegation.delegatedTo,
+        },
+      }),
+  );
+
+  return (
+    <>
+      {coworkers.map((coworker) => {
+        const delegation = delegations.find((del) => del.delegatedTo === coworker.id);
+        return (
+          <Flex key={coworker.id} w="100%">
+            <ToggleSwitch
+              className={css({ w: "100%" })}
+              label={coworker.name!}
+              showCheckedHint={false}
+              inputTitle={coworker.name!}
+              checked={!!delegation}
+              onChange={(e) =>
+                e
+                  ? createMutation.mutate({ createdBy: user.id, delegatedTo: coworker.id })
+                  : removeMutation.mutate(delegation!)
+              }
+            />
+            {/* <styled.div>{coworker.name}</styled.div> */}
+          </Flex>
+        );
+      })}
+    </>
+  );
+};
diff --git a/packages/frontend/src/routes/edit.$reportId.tsx b/packages/frontend/src/routes/edit.$reportId.tsx
@@ -79,8 +79,8 @@ const WithReport = ({ report }: { report: Report }) => {
     db.delegation.liveFirst({ where: { createdBy: report.createdBy, delegatedTo: user.id } }),
   );
   const hasDelegation = !!userDelegations.results;
-
   const canEdit = isOwner || hasDelegation;
+  console.log({ hasDelegation, canEdit });
 
   const navigate = useNavigate();