Merge pull request #134 from maykinmedia/issue/#120-comments

✨ #120 - feat: implemented comments

Author: Xaohs

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);
 

frontend/src/lib/zaakSelection/zaakSelection.ts

@@ -10,7 +10,7 @@ export type ZaakSelection<DetailType = unknown> = {
    */
   [index: string]: {
     selected: boolean;
-    detail?: DetailType; // todo generic?
+    detail?: DetailType;
   };
 };
 

frontend/src/pages/destructionlist/hooks.ts 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";
@@ -17,20 +20,29 @@ import {
 } from "../../lib/fieldSelection/fieldSelection";
 import {
   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;
 
+export interface DataGridAction
+  extends Omit<ButtonProps, "onClick" | "onMouseEnter"> {
+  onMouseEnter?: (zaak: Zaak, detail?: unknown) => void;
+  onClick?: (zaak: Zaak, detail?: unknown) => void;
+  tooltip?: ReactNode;
+}
+
 /**
  * Hook that returns base props for most Zaak related DataGrid components.
  */
 export function useDataGridProps(
   storageKey: string,
   paginatedResults: PaginatedZaken,
   selectedResults: (Zaak | { url: string })[],
+  actions?: DataGridAction[],
 ): { props: DataGridProps; error: unknown } {
   const { state } = useNavigation();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -78,22 +90,75 @@ export function useDataGridProps(
     );
   }, []);
 
-  const fields = getFields(searchParams, zaaktypeChoicesState).map((field) => {
-    const isActiveFromStorage = fieldSelectionState?.[field.name];
-    const isActive =
-      typeof isActiveFromStorage === "undefined"
-        ? field.active !== false
-        : isActiveFromStorage;
-    return { ...field, active: isActive } as TypedField;
-  });
+  //
+  // Gets a specific zaak selection based on the url.
+  //
+  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 =
+        typeof isActiveFromStorage === "undefined"
+          ? field.active !== false
+          : isActiveFromStorage;
+      return { ...field, active: isActive } as TypedField;
+    },
+  );
+
+  //
+  // Render action buttons.
+  //
+  const renderActionButtons = (zaak: Zaak, actions?: DataGridAction[]) => {
+    return actions?.map(
+      ({ onClick, onMouseEnter, tooltip, ...action }, index) => {
+        const handleAction = async (
+          zaak: Zaak,
+          actionFn?: (zaak: Zaak, detail?: unknown) => void,
+        ) => {
+          const foundZaak = await getSpecificZaakSelection(zaak.url!);
+          actionFn?.(zaak, foundZaak);
+        };
+
+        const ButtonComponent = (
+          <Button
+            pad={false}
+            variant={"transparent"}
+            key={index}
+            onClick={() => handleAction(zaak, onClick)}
+            onMouseEnter={() => handleAction(zaak, onMouseEnter)}
+            {...action}
+          />
+        );
+
+        if (tooltip) {
+          return (
+            <Tooltip key={index} content={tooltip} placement={"bottom-start"}>
+              {ButtonComponent}
+            </Tooltip>
+          );
+        }
+
+        return ButtonComponent;
+      },
+    );
+  };
 
   //
   // 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: <>{renderActionButtons(zaak, actions)}</>,
+    };
+  }) as unknown as AttributeData[];
 
   /**
    * Gets called when the fields selection is changed.
@@ -223,6 +288,7 @@ export function useDataGridProps(
 export function getFields(
   searchParams: URLSearchParams,
   zaaktypeChoices: ZaaktypeChoice[],
+  hasActions: boolean,
 ): TypedField[] {
   return [
     {
@@ -341,5 +407,8 @@ export function getFields(
         { value: "false", label: "Nee" },
       ],
     },
+    ...([hasActions && { name: "acties", type: "string" }].filter(
+      Boolean,
+    ) as TypedField[]),
   ];
 }

frontend/src/pages/destructionlist/review/DestructionListReview.tsx

@@ -3,7 +3,10 @@ import {
   Body,
   Form,
   FormField,
+  H2,
   Modal,
+  Outline,
+  P,
 } from "@maykin-ui/admin-ui";
 import { FormEvent, useState } from "react";
 import {
@@ -75,8 +78,11 @@ 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 [zaakSelectionCount, setZaakSelectionCount] = useState<number>(0);
+  const [zaakSelection, setZaakSelection] = useState<FormDataState[]>([]);
 
   /* State to manage the state of the zaak modal (when clicking a checkbox) */
   const [zaakModalDataState, setZaakModalDataState] =
@@ -186,7 +192,7 @@ export function DestructionListReviewPage() {
     const zaakSelectionSelected = Object.values(zaakSelection).filter(
       (f) => f.selected,
     );
-    setZaakSelectionCount(zaakSelectionSelected.length);
+    setZaakSelection(zaakSelectionSelected.map((f) => f.detail!));
   };
 
   return (
@@ -207,7 +213,7 @@ export function DestructionListReviewPage() {
         </Body>
       </Modal>
       <Modal
-        title={zaakSelectionCount > 0 ? "Beoordelen" : "Accoderen"}
+        title={zaakSelection.length > 0 ? "Beoordelen" : "Accoderen"}
         open={listModalDataState.open}
         size="m"
         onClose={() => setListModalDataState({ open: false })}
@@ -217,19 +223,46 @@ export function DestructionListReviewPage() {
             fields={listModalFormFields}
             onSubmit={onSubmitDestructionListForm}
             validateOnChange
-            labelSubmit={zaakSelectionCount > 0 ? "Beoordelen" : "Accoderen"}
+            labelSubmit={zaakSelection.length > 0 ? "Beoordelen" : "Accoderen"}
           />
         </Body>
       </Modal>
+
       <DestructionListComponent
         storageKey={destructionListReviewKey}
         zaken={zaken}
         selectedZaken={selectedZaken}
-        labelAction={zaakSelectionCount > 0 ? "Beoordelen" : "Accoderen"}
+        labelAction={zaakSelection.length > 0 ? "Beoordelen" : "Accoderen"}
         title={`${list.name} beoordelen`}
         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`,
+              });
+            },
+          },
+        ]}
       />
     </>
   );