RSDEV-282 By default, hide all but the most recent two notes on subsamples (#64)

If subsamples have lots of notes then it could make the UI quite
cumbersome, especially where the subsample notes are now shown on the
sample page they are no longer at the very foot of the page as they are
on the subsample page.

This change hides all but the two most recent notes by default, with the
rest hidden behind a "Show more" button. The new note field is placed at
the top of the list, where it appears before the most recent note and is
readily available even when the list of notes is long.

This change also improves the aesthetics of the notes somewhat,
utilising the theme colour of the subsamples to make it clear that the
notes are associated with the physical quantity of the sample, and not
the grouping that forms the whole sample.

Author: rlamacraft

src/main/webapp/ui/src/Inventory/Subsample/Fields/Notes/NoteItem.js

@@ -9,14 +9,34 @@ import TextField from "../../../../components/Inputs/TextField";
 import { type Note } from "../../../../stores/models/SubSampleModel";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
+import { styled, darken } from "@mui/material/styles";
+import { chipClasses } from "@mui/material/Chip";
 
 type NoteItemArgs = {|
   note: Note,
 |};
 
+const CustomListItem = styled(ListItem)(({ theme }) => ({
+  borderLeft: `4px solid ${theme.palette.record.subSample.bg}`,
+  backgroundColor: theme.palette.hover.tableRow,
+  color: darken(theme.palette.record.subSample.bg, 0.9),
+  padding: theme.spacing(0, 1),
+  marginBottom: theme.spacing(1),
+  "& p": {
+    marginBlockStart: theme.spacing(0.25),
+    marginBlockEnd: theme.spacing(0.25),
+    marginLeft: theme.spacing(2),
+    fontSize: "0.85rem",
+  },
+  [`& .${chipClasses.root}`]: {
+    background: "transparent",
+    border: `2px solid ${theme.palette.record.subSample.bg}`,
+  },
+}));
+
 export default function NoteItem({ note }: NoteItemArgs): Node {
   return (
-    <ListItem alignItems="flex-start" divider>
+    <CustomListItem alignItems="flex-start">
       <ListItemText
         disableTypography
         primary={
@@ -37,6 +57,6 @@ export default function NoteItem({ note }: NoteItemArgs): Node {
           <TextField value={note.content} disabled={true} variant="standard" />
         }
       />
-    </ListItem>
+    </CustomListItem>
   );
 }

src/main/webapp/ui/src/Inventory/Subsample/Fields/Notes/Notes.js

@@ -22,10 +22,10 @@ function Notes({
   return (
     <FormControl>
       {!hideLabel && <FormLabel>Notes</FormLabel>}
-      {record.isFieldVisible("notes") && <NotesList record={record} />}
-      {record.isFieldVisible("notes") && (
+      {record.isFieldEditable("notes") && record.isFieldVisible("notes") && (
         <NewNote record={record} onErrorStateChange={onErrorStateChange} />
       )}
+      {record.isFieldVisible("notes") && <NotesList record={record} />}
     </FormControl>
   );
 }

src/main/webapp/ui/src/Inventory/Subsample/Fields/Notes/NotesList.js

@@ -5,21 +5,43 @@ import { observer } from "mobx-react-lite";
 import NoteItem from "./NoteItem";
 import List from "@mui/material/List";
 import SubSampleModel from "../../../../stores/models/SubSampleModel";
+import Button from "@mui/material/Button";
+import Collapse from "@mui/material/Collapse";
+import Divider from "@mui/material/Divider";
 
 type NotesListArgs = {|
   record: SubSampleModel,
 |};
 
 function NotesList({ record }: NotesListArgs): Node {
+  const [firstNote, secondNote, ...restOfNotes] = record.notes.toReversed();
+  const [open, setOpen] = React.useState(false);
+
+  if (record.loading) return null;
+  if (record.notes.length === 0) return null;
+
   return (
-    !record.loading &&
-    record.notes.length > 0 && (
-      <List disablePadding>
-        {record.notes.map((note, i) => (
-          <NoteItem key={i} note={note} />
+    <List disablePadding sx={{ mt: 1 }}>
+      {firstNote && <NoteItem key={0} note={firstNote} />}
+      {secondNote && <NoteItem key={1} note={secondNote} />}
+      {restOfNotes.length > 0 && (
+        <Divider textAlign="center" sx={{ backgroundColor: "white", mb: 1 }}>
+          <Button
+            size="small"
+            onClick={() => {
+              setOpen(!open);
+            }}
+          >
+            {open ? "Show fewer" : "Show more"}
+          </Button>
+        </Divider>
+      )}
+      <Collapse in={open}>
+        {restOfNotes.map((note, i) => (
+          <NoteItem key={i + 2} note={note} />
         ))}
-      </List>
-    )
+      </Collapse>
+    </List>
   );
 }