✨ - feat: implemented comments

Xaohs · Xaohs · commit 154f12ff5dcb · 2024-06-21T16:41:40.000+02:00
diff --git a/frontend/src/components/DestructionList/DestructionList.tsx b/frontend/src/components/DestructionList/DestructionList.tsx
@@ -2,7 +2,10 @@ import { DataGridProps, ListTemplate } from "@maykin-ui/admin-ui";
 import { useActionData } from "react-router-dom";
 
 import { PaginatedZaken } from "../../lib/api/zaken";
-import { useDataGridProps } from "../../pages/destructionlist/hooks";
+import {
+  DataGridAction,
+  useDataGridProps,
+} from "../../pages/destructionlist/hooks";
 import { Zaak } from "../../types";
 
 export type DestructionList = {
@@ -13,6 +16,7 @@ export type DestructionList = {
   storageKey: string;
   title: string;
   labelAction?: string;
+  actions?: DataGridAction[];
 } & Omit<DataGridProps, "objectList">;
 
 /**
@@ -25,13 +29,15 @@ export function DestructionList({
   title,
   labelAction = title,
   onSubmitSelection,
+  actions,
   ...props
 }: DestructionList) {
   const errors = useActionData() || {};
   const { props: dataGridProps, error } = useDataGridProps(
     storageKey,
     zaken,
     selectedZaken,
+    actions,
   );
   const _errors = [...Object.values(errors), error].filter((v) => v);
 
diff --git a/frontend/src/lib/zaakSelection/zaakSelection.ts b/frontend/src/lib/zaakSelection/zaakSelection.ts
@@ -2,15 +2,22 @@ import { isPrimitive } from "@maykin-ui/admin-ui";
 
 import { Zaak } from "../../types";
 
-export type ZaakSelection<DetailType = unknown> = {
+export type ZaakSelectionMandatoryFields = {
+  url: string;
+};
+
+export type ZaakSelection<
+  DetailType extends
+    ZaakSelectionMandatoryFields = ZaakSelectionMandatoryFields,
+> = {
   /**
    * A `Zaak.url` mapped to a `boolean`.
    * - `true`: The zaak is added to the selection.
    * - `false`: The zaak is removed from the selection.
    */
   [index: string]: {
     selected: boolean;
-    detail?: DetailType; // todo generic?
+    detail?: DetailType;
   };
 };
 
@@ -22,11 +29,10 @@ export type ZaakSelection<DetailType = unknown> = {
  * @param zaken An array containing either `Zaak.url` or `Zaak` objects
  * @param detail An optional detail object of generic type
  */
-export async function addToZaakSelection<DetailType = unknown>(
-  key: string,
-  zaken: string[] | Zaak[],
-  detail?: DetailType,
-) {
+export async function addToZaakSelection<
+  DetailType extends
+    ZaakSelectionMandatoryFields = ZaakSelectionMandatoryFields,
+>(key: string, zaken: string[] | Zaak[], detail?: DetailType) {
   await _mutateZaakSelection(key, zaken, true, detail);
 }
 
@@ -50,7 +56,10 @@ export async function removeFromZaakSelection(
  * Note: This function is async to accommodate possible future refactors.
  * @param key A key identifying the selection
  */
-export async function getZaakSelection<DetailType = unknown>(key: string) {
+export async function getZaakSelection<
+  DetailType extends
+    ZaakSelectionMandatoryFields = ZaakSelectionMandatoryFields,
+>(key: string) {
   const computedKey = _getComputedKey(key);
   const json = sessionStorage.getItem(computedKey) || "{}";
   return JSON.parse(json) as ZaakSelection<DetailType>;
@@ -63,10 +72,10 @@ export async function getZaakSelection<DetailType = unknown>(key: string) {
  * @param key A key identifying the selection
  * @param zaakSelection
  */
-export async function setZaakSelection<DetailType = unknown>(
-  key: string,
-  zaakSelection: ZaakSelection<DetailType>,
-) {
+export async function setZaakSelection<
+  DetailType extends
+    ZaakSelectionMandatoryFields = ZaakSelectionMandatoryFields,
+>(key: string, zaakSelection: ZaakSelection<DetailType>) {
   const computedKey = _getComputedKey(key);
   const json = JSON.stringify(zaakSelection);
   sessionStorage.setItem(computedKey, json);
@@ -89,10 +98,10 @@ export async function clearZaakSelection(key: string) {
  * @param key A key identifying the selection
  * @param zaak Either a `Zaak.url` or `Zaak` object.
  */
-export async function isZaakSelected<DetailType = unknown>(
-  key: string,
-  zaak: string | Zaak,
-) {
+export async function isZaakSelected<
+  DetailType extends
+    ZaakSelectionMandatoryFields = ZaakSelectionMandatoryFields,
+>(key: string, zaak: string | Zaak) {
   const zaakSelection = await getZaakSelection<DetailType>(key);
   const url = _getZaakUrl(zaak);
   return zaakSelection[url]?.selected;
@@ -107,7 +116,10 @@ export async function isZaakSelected<DetailType = unknown>(
  * @param selected Indicating whether the selection should be added (`true) or removed (`false).
  * @param detail An optional detail object of generic type
  */
-export async function _mutateZaakSelection<DetailType = unknown>(
+export async function _mutateZaakSelection<
+  DetailType extends
+    ZaakSelectionMandatoryFields = ZaakSelectionMandatoryFields,
+>(
   key: string,
   zaken: string[] | Zaak[],
   selected: boolean,
diff --git a/frontend/src/pages/destructionlist/hooks.tsx b/frontend/src/pages/destructionlist/hooks.tsx
@@ -1,10 +1,13 @@
 import {
   AttributeData,
+  Button,
+  ButtonProps,
   DataGridProps,
+  Tooltip,
   TypedField,
   formatMessage,
 } from "@maykin-ui/admin-ui";
-import { useEffect, useRef, useState } from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 import { useNavigation, useSearchParams } from "react-router-dom";
 
 import { ZaaktypeChoice, listZaaktypeChoices } from "../../lib/api/private";
@@ -16,25 +19,31 @@ import {
   removeFromFieldSelection,
 } from "../../lib/fieldSelection/fieldSelection";
 import {
+  ZaakSelectionMandatoryFields,
   addToZaakSelection,
+  getZaakSelection,
   removeFromZaakSelection,
 } from "../../lib/zaakSelection/zaakSelection";
 import { ExpandZaak, Zaak } from "../../types";
 
 /** The template used to format urls to an external application providing zaak details. */
 const REACT_APP_ZAAK_URL_TEMPLATE = process.env.REACT_APP_ZAAK_URL_TEMPLATE;
 
-interface PaginatedZakenResultsWithAction extends PaginatedZaken {
-  results: (Zaak & { action?: string })[];
+export interface DataGridAction
+  extends Omit<ButtonProps, "onClick" | "onMouseEnter"> {
+  onMouseEnter?: (zaak: Zaak, detail?: ZaakSelectionMandatoryFields) => void;
+  onClick?: (zaak: Zaak, detail?: ZaakSelectionMandatoryFields) => void;
+  tooltip?: ReactNode;
 }
 
 /**
  * Hook that returns base props for most Zaak related DataGrid components.
  */
 export function useDataGridProps(
   storageKey: string,
-  paginatedResults: PaginatedZakenResultsWithAction,
+  paginatedResults: PaginatedZaken,
   selectedResults: (Zaak | { url: string })[],
+  actions?: DataGridAction[],
 ): { props: DataGridProps; error: unknown } {
   const { state } = useNavigation();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -82,8 +91,14 @@ export function useDataGridProps(
     );
   }, []);
 
-  const hasAction = paginatedResults.results.some((zaak) => zaak.action);
-  const fields = getFields(searchParams, zaaktypeChoicesState, hasAction).map(
+  const getSpecificZaakSelection = async (url: string) => {
+    const zaakSelection = await getZaakSelection(storageKey);
+    if (!zaakSelection[url].selected) return;
+    return zaakSelection[url].detail;
+  };
+
+  const hasActions = Boolean(actions?.length);
+  const fields = getFields(searchParams, zaaktypeChoicesState, hasActions).map(
     (field) => {
       const isActiveFromStorage = fieldSelectionState?.[field.name];
       const isActive =
@@ -97,10 +112,48 @@ export function useDataGridProps(
   //
   // Get object list.
   //
-  const objectList = paginatedResults.results.map((zaak) => ({
-    ...zaak,
-    href: formatMessage(REACT_APP_ZAAK_URL_TEMPLATE || "", zaak),
-  })) as unknown as AttributeData[];
+  const objectList = paginatedResults.results.map((zaak) => {
+    return {
+      ...zaak,
+      href: formatMessage(REACT_APP_ZAAK_URL_TEMPLATE || "", zaak),
+      acties: (
+        <>
+          {actions?.map(
+            ({ onClick, onMouseEnter, tooltip, ...action }, index) => {
+              const ButtonComponent = (
+                <Button
+                  pad={false}
+                  variant={"transparent"}
+                  key={index}
+                  onClick={async () => {
+                    const foundZaak = await getSpecificZaakSelection(zaak.url!);
+                    onClick?.(zaak, foundZaak);
+                  }}
+                  onMouseEnter={async () => {
+                    const foundZaak = await getSpecificZaakSelection(zaak.url!);
+                    onMouseEnter?.(zaak, foundZaak);
+                  }}
+                  {...action}
+                />
+              );
+              if (tooltip) {
+                return (
+                  <Tooltip
+                    key={index}
+                    content={tooltip}
+                    placement={"bottom-start"}
+                  >
+                    {ButtonComponent}
+                  </Tooltip>
+                );
+              }
+              return ButtonComponent;
+            },
+          )}
+        </>
+      ),
+    };
+  }) as unknown as AttributeData[];
 
   /**
    * Gets called when the fields selection is changed.
@@ -230,7 +283,7 @@ export function useDataGridProps(
 export function getFields(
   searchParams: URLSearchParams,
   zaaktypeChoices: ZaaktypeChoice[],
-  hasAction: boolean,
+  hasActions: boolean,
 ): TypedField[] {
   return [
     {
@@ -349,15 +402,8 @@ export function getFields(
         { value: "false", label: "Nee" },
       ],
     },
-    // Only show action column if there are actions to show
-    ...(hasAction
-      ? [
-          {
-            name: "action",
-            type: "action",
-            filterable: false,
-          },
-        ]
-      : []),
+    ...([hasActions && { name: "acties", type: "string" }].filter(
+      Boolean,
+    ) as TypedField[]),
   ];
 }
diff --git a/frontend/src/pages/destructionlist/review/DestructionListReview.tsx b/frontend/src/pages/destructionlist/review/DestructionListReview.tsx
@@ -80,6 +80,9 @@ export function DestructionListReviewPage() {
   const submit = useSubmit();
   const destructionListReviewKey = getDestructionListReviewKey(uuid);
 
+  /* Tooltip Motivation */
+  const [tooltipMotivation, setTooltipMotivation] = useState<string>("");
+
   /* State to manage the count of selected zaken */
   const [zaakSelection, setZaakSelection] = useState<FormDataState[]>([]);
 
@@ -268,6 +271,32 @@ export function DestructionListReviewPage() {
         onSubmitSelection={() => setListModalDataState({ open: true })}
         onSelect={onSelect}
         allowSelectAll={false}
+        actions={[
+          {
+            children: <Outline.ChatBubbleBottomCenterIcon />,
+            tooltip: tooltipMotivation && (
+              <>
+                <H2>Opmerking</H2>
+                <P>{tooltipMotivation}</P>
+              </>
+            ),
+            onMouseEnter: (_, detail) => {
+              const _detail = detail as FormDataState | undefined;
+              if (_detail) {
+                setTooltipMotivation(_detail.motivation);
+              } else {
+                setTooltipMotivation("");
+              }
+            },
+            onClick: (zaak: Zaak) => {
+              setZaakModalDataState({
+                open: true,
+                uuid: zaak.uuid,
+                title: `${zaak.identificatie} uitzonderen`,
+              });
+            },
+          },
+        ]}
       />
     </>
   );
