update: Handle series details view

.env

@@ -1,2 +1,3 @@
 REACT_APP_USE_MOCK_API=false
-REACT_APP_ENABLE_PERMISSIONS=true
+REACT_APP_ENABLE_PERMISSIONS=true
+REACT_APP_ORTHANC_EXPLORER=https://orthanc.uni2growcameroun.com/app/explorer.html

.env.development

@@ -1,2 +1,3 @@
 REACT_APP_USE_MOCK_API=true
-REACT_APP_ENABLE_PERMISSIONS=false
+REACT_APP_ENABLE_PERMISSIONS=false
+REACT_APP_ORTHANC_EXPLORER=https://orthanc.uni2growcameroun.com/app/explorer.html

src/components/accessories/radiology/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useViewMore";

src/components/accessories/radiology/hooks/useViewMore.ts

@@ -0,0 +1,15 @@
+import { useCallback } from "react";
+
+export const useViewMore = (level: "study" | "series" | "instance") => {
+  const handleViewMore = useCallback(
+    (row: any) => () => {
+      window.open(
+        `${process.env.REACT_APP_ORTHANC_EXPLORER}#${level}?uuid=${row.id}`,
+        "_blank"
+      );
+    },
+    [level]
+  );
+
+  return handleViewMore;
+};

src/components/accessories/radiology/series/Series.tsx

@@ -1,5 +1,11 @@
-import { ChevronLeft } from "@mui/icons-material";
-import { Backdrop, Button, CircularProgress } from "@mui/material";
+import { ChevronLeft, Visibility } from "@mui/icons-material";
+import {
+  Backdrop,
+  Button,
+  CircularProgress,
+  IconButton,
+  Tooltip,
+} from "@mui/material";
 import InfoBox from "components/accessories/infoBox/InfoBox";
 import Table from "components/accessories/table/Table";
 import { TFilterField } from "components/accessories/table/filter/types";
@@ -17,6 +23,7 @@ import {
   getStudySeriesWithInstances,
   getStudySeriesWithInstancesReset,
 } from "state/radiology";
+import { useViewMore } from "../hooks";
 import { Instances } from "./instances/Instances";
 import { Preview } from "./preview/Preview";
 import "./styles.scss";
@@ -131,6 +138,8 @@ export const Series = () => {
     }
   }, [previewState.status, setOpenPreview]);
 
+  const handleViewSeries = useViewMore("series");
+
   return (
     <div className="series">
       {(() => {
@@ -182,7 +191,15 @@ export const Series = () => {
                   columnsOrder={order}
                   rowsPerPage={5}
                   isCollapsabile={true}
-                  renderCustomActions={(row) => <></>}
+                  renderCustomActions={(row) => (
+                    <div className="series__actions">
+                      <Tooltip title={t("radiology.series.viewMore")}>
+                        <IconButton onClick={handleViewSeries(row)}>
+                          <Visibility />
+                        </IconButton>
+                      </Tooltip>
+                    </div>
+                  )}
                   filterColumns={filters}
                   rawData={(seriesState.data ?? []).map((series) => ({
                     id: series.id ?? "",

src/components/accessories/radiology/series/styles.scss

@@ -12,6 +12,11 @@
     text-transform: none;
   }
 
+  .series__actions {
+    display: flex;
+    justify-content: end;
+  }
+
   .header {
     margin-top: 16px;
   }

src/resources/i18n/en.json

@@ -21,7 +21,8 @@
       "station": "Station Name",
       "status": "Status",
       "lastUpdate": "Last Update",
-      "backToStudies": "Back to studies"
+      "backToStudies": "Back to studies",
+      "viewMore": "View More"
     },
     "instances": {
       "date": "Creation Date",