feat: disable form if not owner

packages/frontend/src/components/Chip.tsx

@@ -11,13 +11,15 @@ export const ChipGroup = ({
   value,
   onChange,
   className,
+  disabled,
   ...props
 }: {
   options: ChipGroupOption[];
   isMulti?: boolean;
   value?: string[];
   label?: string;
   canBeEmpty?: boolean;
+  disabled?: boolean;
   onChange: (values: string[]) => void;
 } & Omit<FlexProps, "onChange">) => {
   const [selectedOptions, setSelectedOptions] = useState(new Set(value ?? []));
@@ -31,6 +33,7 @@ export const ChipGroup = ({
           key={option.key}
           isChecked={selectedOptions.has(option.key)}
           onCheckChange={(isChecked) => {
+            if (disabled) return;
             const newSelectedOptions = new Set(selectedOptions);
             if (isChecked) {
               if (!isMulti) {

packages/frontend/src/components/chips/ContactChips.tsx

@@ -4,7 +4,7 @@ import { ChipGroup, type ChipGroupOption } from "../Chip";
 import { FlexProps } from "#styled-system/jsx";
 import { useChipOptions } from "../../features/chips/useChipOptions";
 
-export const ContactChips = (props: FlexProps) => {
+export const ContactChips = (props: FlexProps & { disabled?: boolean }) => {
   const form = useFormContext<Report>();
 
   const selected = useWatch({ control: form.control, name: "contacts" })?.split(",") ?? [];

packages/frontend/src/components/chips/DecisionChips.tsx

@@ -3,7 +3,7 @@ import type { Report } from "@cr-vif/electric-client/frontend";
 import { ChipGroup, type ChipGroupOption } from "../Chip";
 import { useChipOptions } from "../../features/chips/useChipOptions";
 
-export const DecisionChips = () => {
+export const DecisionChips = ({ disabled }: { disabled?: boolean }) => {
   const form = useFormContext<Report>();
 
   const selected = useWatch({ control: form.control, name: "decision" });
@@ -19,6 +19,7 @@ export const DecisionChips = () => {
     <ChipGroup
       options={options}
       value={value}
+      disabled={disabled}
       onChange={(values) => form.setValue("decision", values?.[0])}
       label="Décision"
     />

packages/frontend/src/components/chips/FurtherInfoChips.tsx

@@ -4,7 +4,7 @@ import { ChipGroup, type ChipGroupOption } from "../Chip";
 import { FlexProps } from "#styled-system/jsx";
 import { useChipOptions } from "../../features/chips/useChipOptions";
 
-export const FurtherInfoChips = (props: FlexProps) => {
+export const FurtherInfoChips = (props: FlexProps & { disabled?: boolean }) => {
   const form = useFormContext<Report>();
 
   const selected = useWatch({ control: form.control, name: "furtherInformation" })?.split(",") ?? [];

packages/frontend/src/components/chips/SpaceTypeChips.tsx

@@ -4,7 +4,7 @@ import { ChipGroup, type ChipGroupOption } from "../Chip";
 import { FlexProps } from "#styled-system/jsx";
 import { useChipOptions } from "../../features/chips/useChipOptions";
 
-export const SpaceTypeChips = (props: FlexProps) => {
+export const SpaceTypeChips = (props: FlexProps & { disabled?: boolean }) => {
   const form = useFormContext<Report>();
 
   const selected = useWatch({ control: form.control, name: "projectSpaceType" })?.split(",") ?? [];

packages/frontend/src/features/DisabledContext.tsx

@@ -0,0 +1,4 @@
+import { createContext, useContext } from "react";
+
+export const DisabledContext = createContext<boolean>(false);
+export const useIsFormDisabled = () => useContext(DisabledContext);

packages/frontend/src/features/InfoForm.tsx

@@ -12,11 +12,14 @@ import { useUser } from "../contexts/AuthContext";
 import type { Report } from "@cr-vif/electric-client/frontend";
 import { css } from "#styled-system/css";
 import { ServiceInstructeurSelect } from "./ServiceInstructeurSelect";
+import { useIsFormDisabled } from "./DisabledContext";
 
 export const InfoForm = () => {
   const form = useFormContext<Report>();
   const user = useUser()!;
 
+  const isFormDisabled = useIsFormDisabled();
+
   const meetDate = useWatch({ control: form.control, name: "meetDate" });
   const meetDateRef = useRef({
     day: meetDate ? format(new Date(meetDate), "yyyy-MM-dd") : "",
@@ -55,12 +58,14 @@ export const InfoForm = () => {
           <Select
             className={css({ flex: { base: "none", sm: 1 } })}
             label="Rédigé par"
+            disabled={isFormDisabled}
             nativeSelectProps={form.register("redactedBy")}
           >
             <option value={user.name}>{user.name}</option>
           </Select>
           <Input
             className={css({ flex: { base: "none", sm: 1 } })}
+            disabled={isFormDisabled}
             label="Nom du demandeur*"
             nativeInputProps={form.register("applicantName")}
           />
@@ -69,11 +74,13 @@ export const InfoForm = () => {
         <Stack direction="row" mt="16px">
           <Input
             className={css({ flex: { base: "none", sm: 1 } })}
+            disabled={isFormDisabled}
             label="Date"
             nativeInputProps={{ type: "date", onChange: setDay, value: meetDateRef.current.day }}
           />
           <Input
             className={css({ flex: { base: "none", sm: 1 } })}
+            disabled={isFormDisabled}
             label="Horaire"
             nativeInputProps={{ type: "time", onChange: setTime, value: meetDateRef.current.time }}
           />
@@ -83,10 +90,16 @@ export const InfoForm = () => {
       <Divider mt="20px" mb="52px" />
 
       <InputGroupWithTitle title="Le projet">
-        <Input label="Description" textArea nativeTextAreaProps={{ ...form.register("projectDescription"), rows: 5 }} />
+        <Input
+          label="Description"
+          disabled={isFormDisabled}
+          textArea
+          nativeTextAreaProps={{ ...form.register("projectDescription"), rows: 5 }}
+        />
         <Stack gap={{ base: "0", sm: "16px" }} direction={{ base: "column", sm: "row" }}>
           <Input
             className={css({ flex: { base: "none", sm: 1 } })}
+            disabled={isFormDisabled}
             label="Adresse du projet*"
             nativeInputProps={form.register("applicantAddress")}
           />
@@ -98,7 +111,7 @@ export const InfoForm = () => {
               },
             })}
           >
-            <ServiceInstructeurSelect />
+            <ServiceInstructeurSelect disabled={isFormDisabled} />
           </Box>
           {/* <Input
             className={css({ flex: { base: "none", sm: 1 } })}
@@ -109,10 +122,11 @@ export const InfoForm = () => {
         <Stack gap={{ base: "0", sm: "16px" }} direction={{ base: "column", sm: "row" }} mt="16px">
           <Input
             className={css({ flex: { base: "none", sm: 1 } })}
+            disabled={isFormDisabled}
             label="Référence cadastrale du projet"
             nativeInputProps={form.register("projectCadastralRef")}
           />
-          <SpaceTypeChips className={css({ flex: { base: "none", sm: 1 } })} />
+          <SpaceTypeChips className={css({ flex: { base: "none", sm: 1 } })} disabled={isFormDisabled} />
         </Stack>
       </InputGroupWithTitle>
 

packages/frontend/src/features/NotesForm.tsx

@@ -8,16 +8,20 @@ import { ContactChips } from "#components/chips/ContactChips";
 import { css } from "#styled-system/css";
 import { FurtherInfoChips } from "#components/chips/FurtherInfoChips";
 import Button from "@codegouvfr/react-dsfr/Button";
+import { useIsFormDisabled } from "./DisabledContext";
 
 export const NotesForm = () => {
   const form = useFormContext<Report>();
 
+  const isFormDisabled = useIsFormDisabled();
+
   return (
     <Flex direction="column" w="100%" padding="16px">
       <InputGroupWithTitle title="Décision & suite à donner">
-        <DecisionChips />
+        <DecisionChips disabled={isFormDisabled} />
         <Input
           className={css({ mt: "8px" })}
+          disabled={isFormDisabled}
           label="Commentaire"
           textArea
           nativeTextAreaProps={{ ...form.register("precisions"), rows: 5 }}
@@ -31,16 +35,18 @@ export const NotesForm = () => {
           className={css({
             flex: { base: "none", lg: 1 },
           })}
+          disabled={isFormDisabled}
         />
         <FurtherInfoChips
           className={css({
             flex: { base: "none", lg: 1 },
           })}
+          disabled={isFormDisabled}
         />
       </Stack>
 
       <styled.div mt={{ base: "16px", lg: 0 }}>
-        <Button iconId="ri-article-fill" type="submit">
+        <Button iconId="ri-article-fill" type="submit" disabled={isFormDisabled}>
           Créer le CR
         </Button>
       </styled.div>

packages/frontend/src/features/ServiceInstructeurSelect.tsx

@@ -9,7 +9,7 @@ import { useLiveQuery } from "electric-sql/react";
 import { db } from "../db";
 import { useUser } from "../contexts/AuthContext";
 
-export const ServiceInstructeurSelect = () => {
+export const ServiceInstructeurSelect = ({ disabled }: { disabled?: boolean }) => {
   const form = useFormContext<Report>();
   const user = useUser()!;
   const [inputValue, setInputValue] = useState("");
@@ -34,6 +34,7 @@ export const ServiceInstructeurSelect = () => {
 
   return (
     <Combobox.Root
+      disabled={disabled}
       selectionBehavior="replace"
       itemToString={(item) => (item as ServiceInstructeur)?.short_name ?? ""}
       itemToValue={(item) => (item as ServiceInstructeur)?.id.toString() ?? ""}

packages/frontend/src/routes/edit.$reportId.tsx

@@ -6,7 +6,7 @@ import { Box, Flex } from "#styled-system/jsx";
 import type { Report } from "@cr-vif/electric-client/frontend";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useLiveQuery } from "electric-sql/react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import {
   FormProvider,
   useForm,
@@ -19,6 +19,8 @@ import {
 import { db } from "../db";
 import { InfoForm } from "../features/InfoForm";
 import { NotesForm } from "../features/NotesForm";
+import { DisabledContext } from "../features/DisabledContext";
+import { useUser } from "../contexts/AuthContext";
 
 const EditReport = () => {
   const { reportId } = Route.useParams();
@@ -69,7 +71,17 @@ const WithReport = ({ report }: { report: Report }) => {
     defaultValues: report!,
     resetOptions: {},
   });
-  const [pdfValues, setPdfValues] = useState<Report | null>(null);
+
+  const user = useUser()!;
+  const isOwner = report.createdBy === user.id;
+
+  const userDelegations = useLiveQuery(
+    db.delegation.liveFirst({ where: { createdBy: report.createdBy, delegatedTo: user.id } }),
+  );
+  const hasDelegation = !!userDelegations.results;
+
+  const canEdit = isOwner || hasDelegation;
+
   const navigate = useNavigate();
 
   const setTab = (tab: string) => {
@@ -118,13 +130,11 @@ const WithReport = ({ report }: { report: Report }) => {
   }, [report]);
 
   const onSubmit = (_values: Report) => {
-    setPdfValues(_values);
     navigate({ to: "/pdf/$reportId", params: { reportId: report.id }, search: { mode: "view" } });
-    // modal.open();
   };
 
   return (
-    <>
+    <DisabledContext.Provider value={!canEdit}>
       <Flex direction="column">
         <FormProvider {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
@@ -154,7 +164,7 @@ const WithReport = ({ report }: { report: Report }) => {
           </form>
         </FormProvider>
       </Flex>
-    </>
+    </DisabledContext.Provider>
   );
 };