Survey details main (#1127)

## JIRA Ticket Parent Jira Ticket : https://jira.csiro.au/browse/BSS-249 Subtaksk Tickets: - https://jira.csiro.au/browse/BSS-250 - https://jira.csiro.au/browse/BSS-252 - https://jira.csiro.au/browse/BSS-254 - https://jira.csiro.au/browse/BSS-253 - https://jira.csiro.au/browse/BSS-276 - https://jira.csiro.au/browse/BSS-277 ## Description This PR includes significant updates to the survey/notebook details section to align with the BSS design requirements. The layout structure, responsiveness, and styling have been enhanced, along with the addition of new features such as an archive survey section and improved refresh functionality. An edit button has also been added to enable content editing in the future. ## Proposed Changes Layout Structure: Updated to match the new design specifications. Responsiveness: Improved across various devices. Styling: Applied consistent styles throughout the section. Tabs: Extended the tabs as per the new design, records is equal to site,so haven't change that wording to 'sites'. Details Tab Content: Updated to reflect the new layout. Archive Survey Section: Added a new section for archiving surveys. Refresh Notebooks Component: Enhanced with better content alignment and added an icon and button to refresh text. Edit Button: Added to allow future content editing. Title - Positioning of Notebook/survey title to the center of screen for better visibility. General styling updates ## How to Test - Run the app - From the list of notebooks, click on any notebook to navigate to the page where notebook details are shown - You should be able to view the update tab layout, details tab layout specifically with all changes mentioned above. ## Checklist - [ Y ] I have confirmed all commits have been signed. - [ Y ] I have added JSDoc style comments to any new functions or classes. - [ Y ] Relevant documentation such as READMEs, guides, and class comments are updated.
FAIMS · Sep 4, 2024 · ac55ad9 · ac55ad9
2 parents f7b7aac + 5a866a8
commit ac55ad9
Show file tree

Hide file tree

Showing 12 changed files with 12,342 additions and 2,958 deletions.
diff --git a/app/package.json b/app/package.json
@@ -64,9 +64,10 @@
         "@faims3/data-model": "*",
         "@fast-check/vitest": "^0.0.7",
         "@ionic/pwa-elements": "^3.2.2",
-        "@mui/icons-material": "5.15.8",
+        "@mui/icons-material": "^5.16.7",
         "@mui/lab": "5.0.0-alpha.129",
-        "@mui/material": "5.12.3",
+        "@mui/material": "^5.16.7",
+        "@mui/system": "^5.16.7",
         "@mui/x-data-grid": "6.3.0",
         "@testing-library/react": "14.0.0",
         "@testing-library/user-event": "14.4.3",
@@ -80,10 +81,8 @@
         "@types/pouchdb": "^6.4.0",
         "@types/proj4": "^2.5.2",
         "@types/qrcode": "^1.5.5",
-        "@types/react": "18.2.74",
         "@types/react-dom": "18.2.3",
         "@types/react-router": "5.1.20",
-        "@types/react-router-dom": "5.3.3",
         "@types/react-router-hash-link": "^2.4.9",
         "@types/trusted-types": "^2.0.3",
         "@types/uuid": "9.0.1",
@@ -119,7 +118,7 @@
         "react-jss": "^10.10.0",
         "react-obfuscate": "^3.6.9",
         "react-router": "^6.26.0",
-        "react-router-dom": "^6.26.0",
+        "react-router-dom": "^6.26.1",
         "react-router-hash-link": "^2.4.3",
         "rollup-plugin-node-polyfills": "^0.2.1",
         "stream": "^0.0.2",
@@ -141,6 +140,7 @@
         "@capacitor/cli": "^6.0.0",
         "@swc/core": "^1.7.10",
         "@testing-library/jest-dom": "6.4.6",
+        "@types/react": "^18.3.3",
         "@vitest/coverage-v8": "^0.34.4",
         "eslint-plugin-react": "^7.32.2",
         "fast-check": "2.25.0",

diff --git a/app/src/gui/components/metadataRenderer.tsx b/app/src/gui/components/metadataRenderer.tsx
@@ -22,6 +22,7 @@ import React, {useEffect, useState} from 'react';
 import {Chip} from '@mui/material';
 import {ProjectID} from '@faims3/data-model';
 import {getMetadataValue} from '../../sync/metadata';
+import {RichTextField} from '../fields/RichText';
 
 type MetadataProps = {
   project_id: ProjectID;
@@ -31,34 +32,36 @@ type MetadataProps = {
 };
 
 export default function MetadataRenderer(props: MetadataProps) {
-  const project_id = props.project_id;
-  const chips = props.chips ?? true;
-  const metadata_key = props.metadata_key;
-  const metadata_label = props.metadata_label;
+  const {project_id, metadata_key, metadata_label, chips = true} = props;
   const [value, setValue] = useState('');
 
   useEffect(() => {
     getMetadataValue(project_id, metadata_key).then(v => {
       setValue(v as string);
     });
-  }, []);
+  }, [project_id, metadata_key]);
 
+  // Use RichTextField for 'pre_description' field
+  if (metadata_key === 'pre_description' && value !== '') {
+    return <RichTextField content={value} />;
+  }
+
+  // For other fields, use original rendering logic
   return chips && value !== '' ? (
     <Chip
       size={'small'}
       style={{marginRight: '5px', marginBottom: '5px'}}
       label={
-        <React.Fragment>
-          {metadata_label ? (
-            <span>{metadata_label}: </span>
-          ) : (
-            <React.Fragment />
-          )}
+        <>
+          {metadata_label && <span>{metadata_label}: </span>}
           <span>{value}</span>
-        </React.Fragment>
+        </>
       }
     />
   ) : (
-    <span>{value}</span>
+    <span>
+      {metadata_label && <span>{metadata_label}: </span>}
+      <span>{value}</span>
+    </span>
   );
 }
diff --git a/app/src/gui/components/notebook/archive_survey.tsx b/app/src/gui/components/notebook/archive_survey.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import {Box, Button, Typography} from '@mui/material';
+import ArchiveIcon from '@mui/icons-material/Archive';
+
+export default function ArchiveSurvey() {
+  return (
+    <Box
+      sx={{
+        marginTop: '50px',
+        paddingTop: '16px',
+        borderTop: '1px solid #ccc',
+        textAlign: 'left',
+      }}
+    >
+      <Typography
+        variant="body1"
+        gutterBottom
+        sx={{textAlign: 'left', fontWeight: 'bold'}}
+      >
+        Archive this survey
+      </Typography>
+      <Typography variant="body1" gutterBottom sx={{textAlign: 'left'}}>
+        Once archived, a survey will not be visible to any users; therefore, no
+        data can be changed or added to the survey.
+      </Typography>
+      <Typography variant="body1" gutterBottom sx={{textAlign: 'left'}}>
+        To recover this survey, navigate to the main menu and click 'Settings'
+        to go to 'Archived surveys'.
+      </Typography>
+      <Box sx={{display: 'flex', justifyContent: 'center', marginTop: '16px'}}>
+        <Button variant="contained" color="error" startIcon={<ArchiveIcon />}>
+          Archive Survey
+        </Button>
+      </Box>
+    </Box>
+  );
+}