Pagination on parcels

apps/logistics/src/App.tsx

@@ -9,11 +9,14 @@ function App() {
       name="Logistics"
       routes={routes}
       navigationBar={[
+        <Nav.Link key="investigations" as={Link} to="/investigation">
+          Investigations
+        </Nav.Link>,
         <Nav.Link key="addresses" as={Link} to="/">
-          Addresses
+          My addresses
         </Nav.Link>,
         <Nav.Link key="parcels" as={Link} to="/parcels">
-          Parcels
+          My parcels
         </Nav.Link>,
       ]}
     />

apps/logistics/src/components/investigation/shipment/parcel/parcelList.tsx

@@ -5,7 +5,7 @@ import {
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
-  useReactTable
+  useReactTable,
 } from "@tanstack/react-table";
 import dayjs from "dayjs";
 import type { Parcel } from "dm-lib";
@@ -15,14 +15,14 @@ import { useNavigate } from "react-router-dom";
 
 export function ParcelList({
   shipmentId,
-  investigationId
+  investigationId,
 }: {
   shipmentId: string;
   investigationId: string;
 }) {
   const parcels = useParcelList({
     shipmentId,
-    investigationId
+    investigationId,
   });
 
   const columns: ColumnDef<Parcel>[] = [
@@ -32,42 +32,42 @@ export function ParcelList({
       id: "open",
       header: "",
       footer: "",
-      enableColumnFilter: false
+      enableColumnFilter: false,
     },
     { accessorKey: "name", header: "Name", footer: "Name" },
     {
       accessorFn: (d) => dayjs(d.createdAt).format("DD/MM/YYYY HH:mm"),
       header: "Creation date",
-      footer: "Creation date"
+      footer: "Creation date",
     },
     {
       accessorFn: (d) => (d.containsDangerousGoods ? "Yes" : "No"),
       cell: (info) => (
         <span
           style={{
-            color: info.getValue() === "Yes" ? "red" : "green"
+            color: info.getValue() === "Yes" ? "red" : "green",
           }}
         >
           {info.getValue() as string}
         </span>
       ),
       header: "Dangerous goods",
-      footer: "Dangerous goods"
+      footer: "Dangerous goods",
     },
     {
       accessorFn: (d) => (d.returnAddress ? "Ship back" : "Destroy"),
       cell: (info) => (
         <span
           style={{
-            color: info.getValue() === "Ship back" ? "green" : "red"
+            color: info.getValue() === "Ship back" ? "green" : "red",
           }}
         >
           {info.getValue() as string}
         </span>
       ),
       header: "After experiment",
-      footer: "After experiment"
-    }
+      footer: "After experiment",
+    },
   ];
 
   const table = useReactTable<Parcel>({
@@ -75,7 +75,7 @@ export function ParcelList({
     columns,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel()
+    getPaginationRowModel: getPaginationRowModel(),
   });
 
   return <TanstackBootstrapTable table={table} />;

apps/logistics/src/components/parcels/parcelsHome.tsx

 import { faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import type { ColumnDef } from "@tanstack/react-table";
+import type {
+  ColumnDef,
+  OnChangeFn,
+  PaginationState,
+} from "@tanstack/react-table";
 import {
   getCoreRowModel,
   getFilteredRowModel,
@@ -8,11 +12,16 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import dayjs from "dayjs";
+import React, { Suspense } from "react";
 import type { Parcel, Investigation, Instrument } from "dm-lib";
 import { TanstackBootstrapTable, useParcelList, usePagination } from "dm-lib";
 import { Button } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 
+/**
+ * Display the list of parcels of a user
+ * @returns
+ */
 export function ParcelsHome() {
   const pagination = usePagination();
   const parcels = useParcelList({ ...pagination.queryParams });
@@ -27,6 +36,8 @@ export function ParcelsHome() {
       enableColumnFilter: false,
     },
     { accessorKey: "name", header: "Name", footer: "Name" },
+    { accessorKey: "status", header: "Status", footer: "Status" },
+
     {
       accessorKey: "investigation",
       header: "A-Form",
@@ -78,12 +89,36 @@ export function ParcelsHome() {
     },
   ];
 
+  const tablePagination = React.useMemo(
+    () => ({
+      pageIndex: pagination.page,
+      pageSize: pagination.size,
+    }),
+    [pagination.page, pagination.size]
+  );
+
+  const onPaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    if (typeof updater === "function") {
+      const state = updater(tablePagination);
+      pagination.handlePageChange(state.pageIndex);
+      pagination.handlePageSizeChange(state.pageSize);
+    } else {
+      const state = updater;
+      pagination.handlePageChange(state.pageIndex);
+      pagination.handlePageSizeChange(state.pageSize);
+    }
+  };
+
   const table = useReactTable<Parcel>({
     data: parcels,
     columns,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
+    manualPagination: true,
+    state: { pagination: tablePagination },
+    onPaginationChange,
+    pageCount: parcels[0]?.meta?.page?.totalPages || -1,
   });
 
   return <TanstackBootstrapTable table={table} />;
@@ -100,11 +135,15 @@ export function ParcelOpenBtn({ parcelId }: { parcelId: string }) {
 
 export function AFormLink({ investigation }: { investigation: Investigation }) {
   if (investigation) {
-    return (investigation.parameters.Id as string)
+    const label = (investigation.parameters.Id as string)
       ? investigation.parameters.Id
       : investigation.name;
+    return (
+      <a href="https://smis.esrf.fr/misapps/SMISWebClient/protected/aform/manageAForm.do?action=view&expSessionVO.pk=">
+        {label}
+      </a>
+    );
   }
-  return "";
 }
 
 export function InstrumentLabel({ instrument }: { instrument: Instrument }) {

packages/dm-lib/src/config/default.ts

@@ -36,5 +36,8 @@ export const DEFAULT: Config = {
       },
     ],
   },
+  userPortal: {
+    sessionLink: env.VITE_USERPORTAL_SESSION_LINK,
+  },
   ui: UIDEFAULT,
 };

packages/dm-lib/src/config/definition/configtype.ts

@@ -12,10 +12,15 @@ export interface LoginForm {
 export interface UIConfig {
   loginForm: LoginForm;
 }
+
+export interface UserPortal {
+  sessionLink: string | undefined;
+}
 export interface Config {
   icat_url: string | undefined;
   authentication: Authentication;
   ui: UIConfig;
+  userPortal: UserPortal;
 }
 
 export interface GenericAuthenticator {