Velg sykehus i BehandlingskvalitetV2 (#4371)

Author: Stein-Kato

apps/skde/src/components/DialogBox/TreatmentunitsDialogPopup.tsx

@@ -30,6 +30,9 @@ export const TreatmentUnitPopup = (props: TreatmentUnitPopupProps) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [highlightedRHF, setHighlightedRHF] = useState<string>("");
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [highlightedHF, setHighlightedHF] = useState<string>("");
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const unitNamesQuery: UseQueryResult<any, unknown> = useUnitNamesQuery(
     "all",
@@ -69,6 +72,18 @@ export const TreatmentUnitPopup = (props: TreatmentUnitPopupProps) => {
         return selectedSet.intersection(hfSet).size > 0;
       };
 
+      const hospitalsChecked = () => {
+        const selectedSet = new Set([...unitSelection]);
+        const hospitals = row.hf
+          .map((hf) => {
+            return hf.hospital;
+          })
+          .flat();
+
+        const hospitalSet = new Set([...hospitals]);
+        return selectedSet.intersection(hospitalSet).size > 0;
+      };
+
       return (
         <FormControlLabel
           label={row.rhf}
@@ -79,7 +94,10 @@ export const TreatmentUnitPopup = (props: TreatmentUnitPopupProps) => {
           control={
             <Checkbox
               checked={unitSelection.includes(row.rhf)}
-              indeterminate={!unitSelection.includes(row.rhf) && hfChecked()}
+              indeterminate={
+                !unitSelection.includes(row.rhf) &&
+                (hfChecked() || hospitalsChecked())
+              }
               onChange={handleChange}
               key={row.rhf + "_checkbox"}
             />
@@ -89,6 +107,7 @@ export const TreatmentUnitPopup = (props: TreatmentUnitPopupProps) => {
     }) as JSX.Element[]);
 
   const HFCheckBoxes = {};
+  const HospitalCheckBoxes = {};
 
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
   unitNames &&
@@ -97,6 +116,39 @@ export const TreatmentUnitPopup = (props: TreatmentUnitPopupProps) => {
         return a.hf_sort - b.hf_sort;
       });
 
+      // Add hospitals to the list
+      hfs.map((hf) => {
+        const CheckBoxes = hf.hospital.map((hospital) => {
+          const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+            if (event.target.checked) {
+              const newUnitSelection = [...unitSelection, hospital];
+              setUnitSelection([...newUnitSelection]);
+            } else {
+              const newUnitSelection = [
+                ...unitSelection.filter((row) => {
+                  return row != hospital;
+                }),
+              ];
+              setUnitSelection(newUnitSelection);
+            }
+          };
+          return (
+            <FormControlLabel
+              label={hospital}
+              key={hospital}
+              control={
+                <Checkbox
+                  checked={unitSelection.includes(hospital)}
+                  onChange={handleChange}
+                  key={hospital + "_checkbox"}
+                />
+              }
+            />
+          );
+        });
+        HospitalCheckBoxes[hf.hf] = CheckBoxes;
+      });
+
       const CheckBoxes = hfs.map((hf) => {
         const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
           if (event.target.checked) {
@@ -111,13 +163,26 @@ export const TreatmentUnitPopup = (props: TreatmentUnitPopupProps) => {
             setUnitSelection(newHFSelection);
           }
         };
+
+        const hospitalChecked = () => {
+          const selectedSet = new Set([...unitSelection]);
+          const hospitalSet = new Set([...hf.hospital]);
+          return selectedSet.intersection(hospitalSet).size > 0;
+        };
+
         return (
           <FormControlLabel
             label={hf.hf}
             key={hf.hf}
+            onMouseEnter={() => {
+              setHighlightedHF(hf.hf);
+            }}
             control={
               <Checkbox
                 checked={unitSelection.includes(hf.hf)}
+                indeterminate={
+                  !unitSelection.includes(hf.hf) && hospitalChecked()
+                }
                 onChange={handleChange}
                 key={hf.hf + "_checkbox"}
               />
@@ -146,20 +211,29 @@ export const TreatmentUnitPopup = (props: TreatmentUnitPopupProps) => {
         sx={{ height: 1000 }}
         onMouseLeave={() => {
           setHighlightedRHF("");
+          setHighlightedHF("");
         }}
       >
         <Grid container spacing={2}>
-          <Grid size={6}>
-            <FormControl sx={{ m: 1, width: "50%" }}>
+          <Grid size={4}>
+            <FormControl sx={{ m: 1, width: "100%" }}>
               {RHFCheckboxes && RHFCheckboxes.map((row: JSX.Element) => row)}
             </FormControl>
           </Grid>
-          <Grid size={6}>
-            <FormControl sx={{ m: 1, width: "50%" }}>
+          <Grid size={4}>
+            <FormControl sx={{ m: 1, width: "100%" }}>
               {HFCheckBoxes[highlightedRHF] &&
                 HFCheckBoxes[highlightedRHF].map((row: JSX.Element) => row)}
             </FormControl>
           </Grid>
+          <Grid size={4}>
+            <FormControl sx={{ m: 1, width: "100%" }}>
+              {HospitalCheckBoxes[highlightedHF] &&
+                HospitalCheckBoxes[highlightedHF].map(
+                  (row: JSX.Element) => row,
+                )}
+            </FormControl>
+          </Grid>
         </Grid>
       </DialogContent>
       <DialogActions>