Merge pull request #324 from maykinmedia/feature/#316-ordering-frontend

✨ - feat: ordering

Author: Xaohs

frontend/src/lib/api/destructionLists.ts

@@ -1,4 +1,5 @@
 import { isPrimitive } from "@maykin-ui/admin-ui";
+import { URLSearchParams } from "url";
 
 import { Zaak } from "../../types";
 import { User } from "./auth";
@@ -110,8 +111,10 @@ export async function getDestructionList(uuid: string) {
 /**
  * List destruction lists.
  */
-export async function listDestructionLists() {
-  const response = await request("GET", "/destruction-lists/");
+export async function listDestructionLists(
+  params?: URLSearchParams | { ordering?: string },
+) {
+  const response = await request("GET", "/destruction-lists/", params);
   const promise: Promise<DestructionList[]> = response.json();
   return promise;
 }

frontend/src/pages/landing/Landing.loader.tsx

@@ -14,8 +14,11 @@ export interface LandingContext {
 }
 
 export const landingLoader = loginRequired(
-  async (): Promise<LandingContext> => {
-    const statusMap = await getStatusMap();
+  async ({ request }): Promise<LandingContext> => {
+    const url = new URL(request.url);
+    const queryParams = url.searchParams;
+    const orderQuery = queryParams.get("ordering");
+    const statusMap = await getStatusMap(orderQuery);
     const user = await whoAmI();
 
     return {
@@ -25,8 +28,10 @@ export const landingLoader = loginRequired(
   },
 );
 
-export const getStatusMap = async () => {
-  const lists = await listDestructionLists();
+export const getStatusMap = async (orderQuery: string | null) => {
+  const lists = await listDestructionLists({
+    ordering: orderQuery ?? "-created",
+  });
   return STATUSES.reduce((acc, val) => {
     const status = val[0] || "";
     const destructionLists = lists.filter(

frontend/src/pages/landing/Landing.tsx

@@ -88,8 +88,12 @@ export const Landing = () => {
   const { statusMap, user } = useLoaderData() as LandingContext;
   const navigate = useNavigate();
   const revalidator = useRevalidator();
+
   usePoll(async () => {
-    const _statusMap = await getStatusMap();
+    const orderQuery = new URLSearchParams(window.location.search).get(
+      "ordering",
+    );
+    const _statusMap = await getStatusMap(orderQuery);
     const equal = JSON.stringify(_statusMap) === JSON.stringify(statusMap);
     if (!equal) {
       revalidator.revalidate();
@@ -193,6 +197,25 @@ export const Landing = () => {
       };
     }),
   );
+
+  const sortOptions = [
+    { label: "Nieuwste eerst", value: "-created" },
+    { label: "Oudste eerst", value: "created" },
+  ];
+
+  const selectedSort =
+    new URLSearchParams(window.location.search).get("ordering") || "-created";
+
+  const sortedOptions = sortOptions.map((option) => ({
+    ...option,
+    selected: option.value === selectedSort,
+  }));
+
+  const onChangeSort = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    // update the query string
+    navigate(`?ordering=${event.target.value}`);
+  };
+
   return (
     <KanbanTemplate
       kanbanProps={{
@@ -201,10 +224,15 @@ export const Landing = () => {
         objectLists: objectLists,
         toolbarProps: {
           items: [
-            // TODO: SORT
+            {
+              direction: "horizontal",
+              label: "Sorteren",
+              required: true,
+              options: sortedOptions,
+              onChange: onChangeSort,
+            },
             "spacer",
             {
-              // TODO: LINK
               children: (
                 <>
                   <Solid.DocumentPlusIcon />