Feature/destruction list create

backend/src/openarchiefbeheer/destruction/api/permissions.py

@@ -7,4 +7,4 @@ class CanStartDestructionPermission(permissions.BasePermission):
     message = _("You are not allowed to create a destruction list.")
 
     def has_permission(self, request, view):
-        return request.user.role.can_start_destruction
+        return request.user.role and request.user.role.can_start_destruction

backend/src/openarchiefbeheer/zaken/admin.py

@@ -0,0 +1,8 @@
+from django.contrib import admin
+
+from .models import Zaak
+
+
+@admin.register(Zaak)
+class ZaakAdmin(admin.ModelAdmin):
+    pass

backend/src/openarchiefbeheer/zaken/models.py

@@ -97,3 +97,6 @@ class Zaak(models.Model):
     class Meta:
         verbose_name = "Zaak"
         verbose_name_plural = "Zaken"
+
+    def __str__(self):
+        return self.identificatie

frontend/.storybook/decorators.tsx

@@ -14,15 +14,16 @@ export const ReactRouterDecorator = (
 ) => {
   const router = createBrowserRouter([
     {
-      path: "*",
-      element: <Story />,
-      loader: parameters.loader,
+      path: "/",
+      element: <App />,
+      children: [
+        {
+          path: "*",
+          element: <Story />,
+          ...parameters.reactRouterDecorator?.route,
+        },
+      ],
     },
   ]);
-
-  return (
-    <App>
-      <RouterProvider router={router} />
-    </App>
-  );
+  return <RouterProvider router={router} />;
 };

frontend/bin/create_page.sh

@@ -58,18 +58,17 @@ EOF
 # Function to create the page file
 function create_page_file() {
   cat > "$2/$capitalized_page_name.tsx" <<EOF
-import React from "react";
 
 import "./$capitalized_page_name.css";
 
-export type ${capitalized_page_name}Props = React.ComponentProps<"main"> & {
+export type ${capitalized_page_name}PageProps = React.ComponentProps<"main"> & {
   // Props here.
 };
 
 /**
  * ${capitalized_page_name} page
  */
-export function ${capitalized_page_name}Page({ children, ...props }: ${capitalized_page_name}Props) {
+export function ${capitalized_page_name}Page({ children, ...props }: ${capitalized_page_name}PageProps) {
   return (
     <main className="${capitalized_page_name}Page" {...props}>
       {children}

frontend/src/App.test.tsx

@@ -1,8 +1,15 @@
 import { render } from "@testing-library/react";
-import React from "react";
+import * as React from "react";
+import { createBrowserRouter } from "react-router-dom";
 
 import App from "./App";
 
 test("renders app", () => {
+  const router = createBrowserRouter([
+    {
+      path: "*",
+      element: <App />,
+    },
+  ]);
   render(<App />);
 });

frontend/src/App.tsx

@@ -1,11 +1,37 @@
+import { NavigationContext, Outline } from "@maykin-ui/admin-ui";
 import React from "react";
+import { Outlet, useNavigate } from "react-router-dom";
 
 import "./App.css";
 
 export type AppProps = React.ComponentProps<"div">;
 
 function App({ children }: AppProps) {
-  return <div className="App">{children}</div>;
+  const navigate = useNavigate();
+
+  return (
+    <div className="App">
+      <NavigationContext.Provider
+        value={{
+          primaryNavigationItems: [
+            {
+              children: <Outline.HomeIcon />,
+              title: "Home",
+              onClick: () => navigate("/"),
+            },
+            "spacer",
+            {
+              children: <Outline.ArrowRightOnRectangleIcon />,
+              title: "Uitloggen",
+              onClick: () => navigate("/logout"),
+            },
+          ],
+        }}
+      >
+        <Outlet />
+      </NavigationContext.Provider>
+    </div>
+  );
 }
 
 export default App;

frontend/src/index.tsx

@@ -1,12 +1,14 @@
+import "@maykin-ui/admin-ui/style";
 import * as React from "react";
 import * as ReactDOM from "react-dom/client";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 
 import App from "./App";
 import "./index.css";
 import {
-  LandingPage,
+  DestructionListCreatePage,
   LoginPage,
+  destructionListCreateLoader,
   landingLoader,
   loginAction,
   logoutLoader,
@@ -15,24 +17,32 @@ import {
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <LandingPage />,
-    loader: landingLoader,
-  },
-  {
-    path: "/login",
-    element: <LoginPage />,
-    action: loginAction,
-  },
-  {
-    path: "/logout",
-    loader: logoutLoader,
+    element: <App />,
+    children: [
+      {
+        path: "/",
+        loader: landingLoader,
+      },
+      {
+        path: "/destruction-lists/create",
+        element: <DestructionListCreatePage />,
+        loader: destructionListCreateLoader,
+      },
+      {
+        path: "/login",
+        element: <LoginPage />,
+        action: loginAction,
+      },
+      {
+        path: "/logout",
+        loader: logoutLoader,
+      },
+    ],
   },
 ]);
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <App>
-      <RouterProvider router={router} />
-    </App>
+    <RouterProvider router={router} />
   </React.StrictMode>,
 );

frontend/src/lib/api/loginRequired.ts

@@ -14,8 +14,8 @@ export function loginRequired<T>(
   return async () => {
     try {
       return await fn(...args);
-    } catch (e: any) {
-      if (e?.status === 403) {
+    } catch (e: unknown) {
+      if ((e as Response)?.status === 403) {
         return redirect("/login");
       }
       throw e;

frontend/src/lib/api/request.ts

@@ -1,7 +1,19 @@
 import { getCookie } from "../cookie/cookie";
 
+/** Scheme for all API requests.. */
+export const API_SCHEME = "http";
+
+/** The host for the API server. */
+export const API_HOST = "localhost";
+
+/** The port for the API server. */
+export const API_PORT = 8080;
+
+/** The base path for all API requests. */
+export const API_PATH = "/api/v1";
+
 /** The base url for all API requests. */
-export const BASE_URL = "http://localhost:8000/api/v1";
+export const API_BASE_URL = `${API_SCHEME}://${API_HOST}:${API_PORT}${API_PATH}`;
 
 /**
  * Makes an actual fetch request to the API, should be used by all other API implementations.
@@ -17,7 +29,7 @@ export async function request(
   headers?: Record<string, string>,
 ) {
   const csrfToken = getCookie("csrftoken");
-  const url = BASE_URL + endpoint;
+  const url = API_BASE_URL + endpoint;
   const abortController = new AbortController();
 
   const response = await fetch(url, {

frontend/src/lib/api/zaken.ts

@@ -1,7 +1,9 @@
+import { Zaak } from "../../types";
 import { request } from "./request";
 
-export type Zaak = {
-  // TODO
+export type PaginatedZaken = {
+  count: number;
+  results: Zaak[];
 };
 
 /**
@@ -10,6 +12,6 @@ export type Zaak = {
  */
 export async function listZaken() {
   const response = await request("GET", "/zaken/");
-  const promise: Promise<Zaak[]> = response.json();
+  const promise: Promise<PaginatedZaken[]> = response.json();
   return promise;
 }

frontend/src/pages/destructionlist/DestructionListCreate.css

@@ -0,0 +1,3 @@
+.DestructionListCreatePage {
+  /* Rules here. */
+}