⬆️ - chore: update @maykin-ui/admin-ui (and migrate code accordingly)

maykinmedia · Dec 9, 2024 · c60d54e · c60d54e
1 parent 95cf008
commit c60d54e
Show file tree

Hide file tree

Showing 26 changed files with 278 additions and 247 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -125,6 +125,7 @@ function App() {
                 />
               }
               pad="v"
+              variant="transparent"
             >
               <Body>
                 <Card>

diff --git a/frontend/src/components/DestructionListReviewer/DestructionListReviewer.tsx b/frontend/src/components/DestructionListReviewer/DestructionListReviewer.tsx
@@ -3,7 +3,6 @@ import {
   Button,
   FormField,
   P,
-  SerializedFormData,
   Solid,
   useAlert,
   useFormDialog,
@@ -34,6 +33,12 @@ export type DestructionListReviewerProps = {
   destructionList: DestructionList;
 };
 
+export type DestructionListReviewerFormType = {
+  comment: string;
+  reviewer?: string;
+  coReviewer?: string[];
+};
+
 /**
  * Allows viewing/assigning the reviewers of a destruction list.
  * @param destructionList
@@ -45,7 +50,7 @@ export function DestructionListReviewer({
   const { state } = useNavigation();
   const revalidator = useRevalidator();
   const alert = useAlert();
-  const formDialog = useFormDialog();
+  const formDialog = useFormDialog<DestructionListReviewerFormType>();
   const coReviews = useCoReviews(destructionList);
   const reviewers = useReviewers();
   const coReviewers = useCoReviewers();
@@ -55,12 +60,8 @@ export function DestructionListReviewer({
   /**
    * Gets called when the change is confirmed.
    */
-  const handleSubmit = (data: SerializedFormData) => {
-    const { coReviewer, reviewer, comment } = data as {
-      comment: string;
-      reviewer?: string;
-      coReviewer?: string[];
-    };
+  const handleSubmit = (data: DestructionListReviewerFormType) => {
+    const { coReviewer, reviewer, comment } = data;
 
     const promises: Promise<unknown>[] = [];
 
@@ -198,6 +199,7 @@ export function DestructionListReviewer({
       {reviewer && (
         <>
           <AttributeTable
+            compact
             labeledObject={{
               reviewer: {
                 label: "Beoordelaar",

diff --git a/frontend/src/components/DestructionListToolbar/DestructionListToolbar.tsx b/frontend/src/components/DestructionListToolbar/DestructionListToolbar.tsx
@@ -3,11 +3,12 @@ import {
   Badge,
   Body,
   Column,
+  Form,
   Grid,
   H2,
   Tab,
   Tabs,
-  field2Title,
+  string2Title,
   ucFirst,
 } from "@maykin-ui/admin-ui";
 
@@ -47,6 +48,7 @@ export function DestructionListToolbar({
       {destructionList && (
         <Column span={3}>
           <AttributeTable
+            compact
             labeledObject={{
               auteur: {
                 label: "Auteur",
@@ -90,6 +92,7 @@ export function DestructionListToolbar({
       {review && (
         <Column span={3}>
           <AttributeTable
+            compact
             object={{
               "Laatste review door": review.author && formatUser(review.author),
               Opmerking: review.listFeedback,
@@ -106,6 +109,7 @@ export function DestructionListToolbar({
       {reviewResponse && (
         <Column span={3}>
           <AttributeTable
+            compact
             object={{
               "Laatst ingediend": formatDate(
                 new Date(String(reviewResponse.created)),
@@ -124,7 +128,7 @@ export function DestructionListToolbar({
         <H2>{title}</H2>
       ) : (
         destructionList && (
-          <H2>{field2Title(destructionList.name, { unHyphen: false })}</H2>
+          <H2>{string2Title(destructionList.name, { unHyphen: false })}</H2>
         )
       )}
       {logItems?.length ? (

diff --git a/frontend/src/components/ProcessingStatusBadge/ProcessingStatusBadge.tsx b/frontend/src/components/ProcessingStatusBadge/ProcessingStatusBadge.tsx
@@ -1,4 +1,4 @@
-import { Badge, Outline, field2Title } from "@maykin-ui/admin-ui";
+import { Badge, Outline, string2Title } from "@maykin-ui/admin-ui";
 import React from "react";
 
 import { ProcessingStatus } from "../../lib/api/processingStatus";
@@ -41,7 +41,7 @@ export const ProcessingStatusBadge: React.FC<ProcessingStatusBadgeProps> = ({
       }
       return `Wordt vernietigd ${timeAgo(plannedDestructionDate, { shortFormat: true })}`;
     }
-    return field2Title(PROCESSING_STATUS_MAPPING[processingStatus], {
+    return string2Title(PROCESSING_STATUS_MAPPING[processingStatus], {
       unHyphen: false,
     });
   };

diff --git a/frontend/src/hooks/useFields.test.ts b/frontend/src/hooks/useFields.test.ts
@@ -3,6 +3,7 @@ import { act, renderHook, waitFor } from "@testing-library/react";
 
 import { selectieLijstKlasseFactory as mockSelectieLijstKlasseFactory } from "../fixtures/selectieLijstKlasseChoices";
 import * as fieldSelection from "../lib/fieldSelection/fieldSelection";
+import { Zaak } from "../types";
 import { useFields } from "./useFields";
 
 jest.mock("./useSelectielijstKlasseChoices", () => ({

diff --git a/frontend/src/hooks/useFields.ts b/frontend/src/hooks/useFields.ts
@@ -1,4 +1,4 @@
-import { AttributeData, TypedField } from "@maykin-ui/admin-ui";
+import { TypedField, TypedSerializedFormData } from "@maykin-ui/admin-ui";
 import { useCallback, useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 
@@ -16,17 +16,35 @@ import { ExpandZaak, Zaak } from "../types";
 import { useSelectielijstKlasseChoices } from "./useSelectielijstKlasseChoices";
 import { useZaaktypeChoices } from "./useZaaktypeChoices";
 
+type FilterTransformReturnType<T> = Record<
+  | "startdatum__gte"
+  | "startdatum__lte"
+  | "einddatum__gte"
+  | "einddatum__lte"
+  | "archiefactiedatum__gte"
+  | "archiefactiedatum__lte",
+  string | null
+> &
+  Partial<
+    Omit<
+      TypedSerializedFormData<keyof T & string>,
+      "startdatum" | "einddatum" | "archiefactiedatum"
+    >
+  >;
+
 /**
- * Hook resolving zaaktype choices, returns: `[TypedField[], Function]` tuple.
+ * Hook resolving the base fields for lists.
  */
-export function useFields(
+export function useFields<T extends Zaak = Zaak>(
   destructionList?: DestructionList,
   review?: Review,
-  extraFields?: TypedField[],
+  extraFields?: TypedField<T>[],
 ): [
-  TypedField[],
-  (fields: TypedField[]) => void,
-  (filterData: AttributeData) => AttributeData,
+  TypedField<T>[],
+  (fields: TypedField<T>[]) => void,
+  (
+    filterData: Partial<TypedSerializedFormData<keyof T & string>>,
+  ) => FilterTransformReturnType<T>,
 ] {
   const [fieldSelectionState, setFieldSelectionState] =
     useState<FieldSelection>();
@@ -45,7 +63,7 @@ export function useFields(
 
   // The raw, unfiltered configuration of the available base fields.
   // NOTE: This get filtered by `getActiveFields()`.
-  const fields: TypedField[] = [
+  const fields: TypedField<T>[] = [
     {
       name: "identificatie",
       filterLookup: "identificatie__icontains",
@@ -190,7 +208,8 @@ export function useFields(
 
   const getActiveFields = useCallback(() => {
     return fields.map((field) => {
-      const isActiveFromStorage = fieldSelectionState?.[field.name];
+      const isActiveFromStorage =
+        fieldSelectionState?.[field.name as keyof typeof fieldSelectionState];
       const isActive =
         typeof isActiveFromStorage === "undefined"
           ? field.active !== false
@@ -204,7 +223,7 @@ export function useFields(
    * Pass this to `filterTransform` of a DataGrid component.
    * @param fields
    */
-  const setFields = async (fields: TypedField[]) => {
+  const setFields = async (fields: TypedField<T>[]) => {
     const activeFields = fields.filter((f) => f.active !== false);
     const inActiveFields = fields.filter((f) => f.active === false);
     await addToFieldSelection(FIELD_SELECTION_STORAGE_KEY, activeFields);
@@ -218,20 +237,26 @@ export function useFields(
    * Pass this to `filterTransform` of a DataGrid component.
    * @param filterData
    */
-  const filterTransform = (filterData: AttributeData) => {
+  const filterTransform = (
+    filterData: Partial<TypedSerializedFormData<keyof T & string>>,
+  ): FilterTransformReturnType<T> => {
     const {
       startdatum = "",
       einddatum = "",
       archiefactiedatum = "",
       ..._filterData
     } = filterData;
 
-    const [startdatum__gte = "", startdatum__lte = ""] =
-      String(startdatum).split("/");
-    const [einddatum__gte = "", einddatum__lte = ""] =
-      String(einddatum).split("/");
-    const [archiefactiedatum__gte = "", archiefactiedatum__lte = ""] =
-      String(archiefactiedatum).split("/");
+    const [startdatum__gte = null, startdatum__lte = null] = (startdatum &&
+      (startdatum as Date[]).map((d) => formatDate(d, "iso"))) || [null, null];
+    const [einddatum__gte = null, einddatum__lte = null] = (einddatum &&
+      (einddatum as Date[]).map((d) => formatDate(d, "iso"))) || [null, null];
+    const [archiefactiedatum__gte = null, archiefactiedatum__lte = null] =
+      (archiefactiedatum &&
+        (archiefactiedatum as Date[]).map((d) => formatDate(d, "iso"))) || [
+        null,
+        null,
+      ];
 
     return {
       startdatum__gte,

diff --git a/frontend/src/hooks/useFilter.ts b/frontend/src/hooks/useFilter.ts
@@ -1,11 +1,12 @@
-import { AttributeData } from "@maykin-ui/admin-ui";
-
 import { useCombinedSearchParams } from "./useCombinedSearchParams";
 
 /**
  * Hook providing filter interaction, returns: `[RESERVED, Function]` tuple.
  */
-export function useFilter(): [object, (filterData: AttributeData) => void] {
+export function useFilter<T extends object>(): [
+  object,
+  (filterData: T) => void,
+] {
   const [, setCombinedSearchParams] = useCombinedSearchParams();
   // Reserved for possible future expansion (filter state)
   const RESERVED = {};
@@ -15,9 +16,9 @@ export function useFilter(): [object, (filterData: AttributeData) => void] {
    * Pass this to `onFilter` of a DataGrid component.
    * @param filterData
    */
-  const setFilterField = (filterData: AttributeData) => {
+  const setFilterField = (filterData: T) => {
     setCombinedSearchParams({
-      ...(filterData as AttributeData<string>),
+      ...(filterData as object),
       page: "1",
     });
   };

diff --git a/frontend/src/hooks/useZaakSelection.test.ts b/frontend/src/hooks/useZaakSelection.test.ts
@@ -1,6 +1,7 @@
 import { act, renderHook, waitFor } from "@testing-library/react";
 
 import { ZaakSelectionContextProvider } from "../contexts";
+import { ZaakIdentifier } from "../lib/zaakSelection";
 import { Zaak } from "../types";
 import { useZaakSelection } from "./useZaakSelection";
 
@@ -10,10 +11,10 @@ jest.mock("react-router-dom", () => ({
 }));
 
 describe("useZaakSelection hook", () => {
-  const zaken = [
-    { url: "zaak-1" } as Zaak,
-    { url: "zaak-2" } as Zaak,
-    { url: "zaak-3" } as Zaak,
+  const zaken: ZaakIdentifier[] = [
+    { url: "zaak-1" },
+    { url: "zaak-2" },
+    { url: "zaak-3" },
   ];
 
   beforeEach(() => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -125,6 +125,7 @@ function App() { @@
                     />
                   }
                   pad="v"
+                  variant="transparent"
                 >
                   <Body>
                     <Card>
@@ Expand Down @@