✨ #104 - feat: show badge as status on destruction list detail page

maykinmedia · Jun 13, 2024 · b135862 · b135862
1 parent 4bd625f
commit b135862
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/frontend/src/pages/destructionlist/detail/DestructionListDetail.stories.tsx b/frontend/src/pages/destructionlist/detail/DestructionListDetail.stories.tsx
@@ -44,11 +44,11 @@ const FIXTURE: DestructionListDetailContext = {
       FIXTURE_PAGINATED_ZAKEN.results[2],
     ].map((z, i) => ({
       zaak: z.url || "",
-      status: "DEMO",
+      status: "",
       zaakData: z,
     })),
     containsSensitiveInfo: false,
-    status: "Pending",
+    status: "in_progress",
     assignees: FIXTURE_USERS.map((u, i) => ({ user: u, order: i })),
     assignee: FIXTURE_USERS[0],
     created: "2024-07-11:16:57",

diff --git a/frontend/src/pages/destructionlist/detail/DestructionListDetail.tsx b/frontend/src/pages/destructionlist/detail/DestructionListDetail.tsx
@@ -1,5 +1,6 @@
 import {
   AttributeTable,
+  Badge,
   Body,
   CardBaseTemplate,
   Column,
@@ -20,7 +21,7 @@ import { formatUser } from "../utils";
 import { AssigneesEditable } from "./Assignees";
 import "./DestructionListDetail.css";
 import { DestructionListItems } from "./DestructionListItems";
-import { STATUS_MAPPING } from "./constants";
+import { STATUS_LEVEL_MAPPING, STATUS_MAPPING } from "./constants";
 import {
   DestructionListData,
   DestructionListDetailContext,
@@ -46,7 +47,14 @@ function getDisplayableList(
       label: "Bevat gevoelige informatie",
       value: destructionList.containsSensitiveInfo,
     },
-    status: { label: "Status", value: STATUS_MAPPING[destructionList.status] },
+    status: {
+      label: "Status",
+      value: (
+        <Badge level={STATUS_LEVEL_MAPPING[destructionList.status]}>
+          {STATUS_MAPPING[destructionList.status]}
+        </Badge>
+      ),
+    },
     aangemaakt: {
       label: "Aangemaakt",
       value: formattedCreatedOn,

diff --git a/frontend/src/pages/destructionlist/detail/constants.ts b/frontend/src/pages/destructionlist/detail/constants.ts
@@ -1,6 +1,14 @@
 // Todo: should this come from the backend?
+import { BadgeProps } from "@maykin-ui/admin-ui";
+
 export const STATUS_MAPPING: { [key: string]: string } = {
   in_progress: "In progress",
   processing: "Processing",
   completed: "Completed",
 };
+
+export const STATUS_LEVEL_MAPPING: { [key: string]: BadgeProps["level"] } = {
+  in_progress: "warning",
+  processing: "danger",
+  completed: "success",
+};