Merge pull request #27 from CLIMB-TRE/development

'Export Record to JSON' button on `RecordDetail` modal
CLIMB-TRE · Jul 31, 2024 · ac05253 · ac05253
2 parents df1ec27 + 634e788
commit ac05253
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 20 deletions.
diff --git a/lib/Onyx.tsx b/lib/Onyx.tsx
@@ -14,7 +14,7 @@ import { OnyxProps, ProjectField } from "./types";
 import "./Onyx.css";
 import "./bootstrap.css";
 
-const VERSION = "0.12.0";
+const VERSION = "0.12.3";
 
 function flattenFields(fields: Record<string, ProjectField>) {
   const flatFields: Record<string, ProjectField> = {};

diff --git a/lib/components/LoadingAlert.tsx b/lib/components/LoadingAlert.tsx
@@ -22,16 +22,7 @@ function DelayedLoadingAlert() {
     return () => clearTimeout(timer);
   });
 
-  return (
-    showAlert && (
-      <Alert variant="light">
-        <Stack direction="horizontal" gap={2}>
-          <Spinner />
-          <span>Loading...</span>
-        </Stack>
-      </Alert>
-    )
-  );
+  return showAlert && <LoadingAlert />;
 }
 
 export { LoadingAlert, DelayedLoadingAlert };
diff --git a/lib/pages/Data.tsx b/lib/pages/Data.tsx
@@ -9,7 +9,7 @@ import Button from "react-bootstrap/Button";
 import Card from "react-bootstrap/Card";
 import Pagination from "react-bootstrap/Pagination";
 import Modal from "react-bootstrap/Modal";
-import { mkConfig, generateCsv, download, asString } from "export-to-csv";
+import { mkConfig, generateCsv, asString } from "export-to-csv";
 import { useQuery } from "@tanstack/react-query";
 import { MultiDropdown } from "../components/Dropdowns";
 import Filter from "../components/Filter";
@@ -278,12 +278,12 @@ function Results(props: ResultsProps) {
   });
 
   const handleExportToCSV = () => {
-    const csv = generateCsv(csvConfig)(props.resultData.data || []);
+    const csvData = asString(
+      generateCsv(csvConfig)(props.resultData.data || [])
+    );
 
     if (props.fileWriter) {
-      props.fileWriter(fileName + ".csv", asString(csv));
-    } else {
-      download(csvConfig)(csv);
+      props.fileWriter(fileName + ".csv", csvData);
     }
   };
 
@@ -294,6 +294,7 @@ function Results(props: ResultsProps) {
         <Button
           className="float-end"
           size="sm"
+          disabled={!props.fileWriter}
           variant="success"
           onClick={handleExportToCSV}
         >
@@ -373,6 +374,14 @@ function RecordDetail(props: RecordDetailProps) {
     staleTime: 1 * 60 * 1000,
   });
 
+  const handleExportToJSON = () => {
+    const jsonData = JSON.stringify(recordData.data || {});
+
+    if (props.fileWriter) {
+      props.fileWriter(props.recordID + ".json", jsonData);
+    }
+  };
+
   return (
     <Modal
       className="onyx-record-detail"
@@ -401,13 +410,23 @@ function RecordDetail(props: RecordDetailProps) {
         ) : (
           recordData.data && (
             <Container fluid>
-              <Stack gap={3} direction="vertical">
+              <Stack gap={2} direction="vertical">
                 <h5>
                   Published Date:{" "}
                   <span className="onyx-text-pink">
                     {recordData.data["published_date"]}
                   </span>
+                  <Button
+                    className="float-end"
+                    size="sm"
+                    disabled={!props.fileWriter}
+                    variant="success"
+                    onClick={handleExportToJSON}
+                  >
+                    Export Record to JSON
+                  </Button>
                 </h5>
+
                 <h5>
                   Site:{" "}
                   <span className="onyx-text-pink">

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "climb-onyx-gui",
-  "version": "0.12.0",
+  "version": "0.12.3",
   "type": "module",
   "main": "dist/climb-onyx-gui.js",
   "types": "dist/main.d.ts",