Merge pull request #160 from Olog/CSSTUDIO-2716-entry-view-changes

CSSTUDIO-2716 entry view changes

src/beta/components/log/EntryTypeChip.jsx

@@ -1,16 +1,13 @@
 import { Chip } from "@mui/material";
 import React from "react";
 
-export const EntryTypeChip = ({value, ...props}) => {
-
-  return (
-    <Chip
-      label={`type: ${value}`} 
-      aria-label={`has level ${value}`} 
-      size="small"
-      variant="outlined"
-      color="ologBlack" 
-      {...props} 
-    />
-  );
-};
+export const EntryTypeChip = ({ value, ...props }) => (
+  <Chip
+    label={`${value}`}
+    aria-label={`has level ${value}`}
+    size="small"
+    variant="outlined"
+    color="ologBlack"
+    {...props}
+  />
+);

src/beta/components/log/LogDetails/AttachmentsGallery.js

@@ -1,137 +1,133 @@
-import { IconButton, ImageList, ImageListItem, ImageListItemBar, Stack, styled } from "@mui/material";
+import { IconButton, ImageList, ImageListItem, Link, Stack, styled } from "@mui/material";
 import React, { useState } from "react";
 import { FileImage } from "components/Attachment";
 import Modal from "components/shared/Modal";
 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
 
-const Image = styled(({attachment, className}) => {
-
-    return (
-        <img 
-            className={className}
-            alt={attachment.filename} 
-            src={attachment.url} 
-        />
-    )
-})(({size, fullSize, maxHeight, maxWidth}) => {
-    if(fullSize) {
-        return {
-            objectFit: "contain",
-            maxHeight, maxWidth
-        }
-    } else {
-        return  {
-            height: size,
-            width: size,
-            objectFit: "cover"
-        }
+const Image = styled(({ attachment, className }) => {
+
+  return (
+    <img
+      className={className}
+      alt={attachment.filename}
+      src={attachment.url}
+    />
+  )
+})(({ size, fullSize, maxHeight, maxWidth }) => {
+  if (fullSize) {
+    return {
+      objectFit: "contain",
+      maxHeight, maxWidth
     }
+  } else {
+    return {
+      height: size,
+      width: size,
+      objectFit: "cover"
+    }
+  }
 });
 
-const FileIcon = ({attachment, size}) => {
-
-    return (
-        <FileImage 
-            alt={`file: ${attachment.filename}`} 
-            fontSize={size} 
-            sx={{
-                height: size,
-                width: size
-            }}
-        />
-    )
+const FileLink = ({ attachment, size }) => (
+  <Link href={attachment.url} download>
+    <FileImage
+      alt={`file: ${attachment.filename}`}
+      fontSize={size}
+      sx={{
+        height: size,
+        width: size
+      }}
+    />
+  </Link>
+);
+
+const GalleryView = ({ attachments, onPrevious, onNext, currentIndex }) => {
+
+  const attachment = attachments[currentIndex];
+
+  return (
+    <Stack flexDirection="row" alignItems="center" justifyContent="center">
+      <IconButton
+        onClick={onPrevious}
+        sx={{ height: "min-content" }}
+        disabled={currentIndex === 0}
+      >
+        <NavigateBeforeIcon />
+      </IconButton>
+      <Image {...{ attachment, fullSize: true, maxHeight: 500, maxWidth: 500 }} />
+      <IconButton
+        onClick={onNext}
+        sx={{ height: "min-content" }}
+        disabled={currentIndex === attachments.length - 1}
+      >
+        <NavigateNextIcon />
+      </IconButton>
+    </Stack>
+  )
 }
 
-const GalleryView = ({attachments, onPrevious, onNext, currentIndex}) => {
-
-    const attachment = attachments[currentIndex];
-
-    return (
-        <Stack flexDirection="row" alignItems="center" justifyContent="center">
-            <IconButton 
-                onClick={onPrevious} 
-                sx={{ height: "min-content"}} 
-                disabled={currentIndex === 0}
-            >
-                    <NavigateBeforeIcon />
-            </IconButton>
-            {attachment.isImage 
-                ? <Image {...{attachment, fullSize: true, maxHeight: 500, maxWidth: 500}} /> 
-                : <FileIcon {...{attachment, size: 300}} />
-            }
-            <IconButton 
-                onClick={onNext} 
-                sx={{ height: "min-content"}} 
-                disabled={currentIndex === attachments.length - 1}
-            >
-                <NavigateNextIcon />
-            </IconButton>
-        </Stack>
-    )
-}
+const AttachmentsGallery = ({ attachments, size = 100 }) => {
 
-const AttachmentsGallery = ({attachments, size=100}) => {
+  const [show, setShow] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
 
-    const [show, setShow] = useState(false);
-    const [currentIndex, setCurrentIndex] = useState(0);
+  const imageAttachments = attachments.filter(it => it.isImage);
+  const fileAttachments = attachments.filter(it => !it.isImage);
 
-    const onClick = (index) => {
-        setShow(true);
-        setCurrentIndex(index);
-    }
+  const onClick = (index) => {
+    setShow(true);
+    setCurrentIndex(index);
+  }
 
-    const isValidIndex = (index) => {
-        if(index >=0 && index < attachments.length) {
-            return true;
-        }
-        return false;
+  const isValidIndex = (index) => {
+    if (index >= 0 && index < attachments.length) {
+      return true;
     }
+    return false;
+  }
 
-    const onPrevious = () => {
-        if(isValidIndex(currentIndex - 1)) {
-            setCurrentIndex(currentIndex - 1)
-        }
+  const onPrevious = () => {
+    if (isValidIndex(currentIndex - 1)) {
+      setCurrentIndex(currentIndex - 1)
     }
+  }
 
-    const onNext = () => {
-        if(isValidIndex(currentIndex + 1)) {
-            setCurrentIndex(currentIndex + 1)
-        }
+  const onNext = () => {
+    if (isValidIndex(currentIndex + 1)) {
+      setCurrentIndex(currentIndex + 1)
     }
+  }
 
-    const onKeyPress = (e) => {
-
-        if(e.key === "ArrowLeft") {
-            onPrevious();
-        }
-        if(e.key === "ArrowRight") {
-            onNext();
-        }
+  const onKeyPress = (e) => {
+    if (e.key === "ArrowLeft") {
+      onPrevious();
     }
-
-    return (
-        <Stack onKeyUp={onKeyPress} >
-            <ImageList gap={5} cols={10} >
-                {attachments.map((attachment, index) => {
-                    return (
-                        <ImageListItem key={attachment.id} onClick={() => onClick(index)} sx={{ cursor: "pointer"}}>
-                            {attachment.isImage ? <Image {...{attachment, size}} /> : <FileIcon {...{attachment, size}} />}
-                            <ImageListItemBar 
-                                title={attachment.filename}
-                            />
-                        </ImageListItem>
-                    )
-                })}
-            </ImageList>
-            <Modal 
-                open={show}
-                onClose={() => setShow(false)}
-                title={attachments[currentIndex].filename}
-                content={<GalleryView {...{attachments, currentIndex, setCurrentIndex, onPrevious, onNext}} />}
-            />
-        </Stack>
-    );
+    if (e.key === "ArrowRight") {
+      onNext();
+    }
+  }
+
+  return (
+    <Stack onKeyUp={onKeyPress} >
+      <ImageList gap={5} cols={10} >
+        {imageAttachments.map((attachment, index) => (
+          <ImageListItem key={attachment.id} onClick={() => onClick(index)} sx={{ cursor: "pointer" }}>
+            <Image attachment={attachment} size={size} />
+          </ImageListItem>
+        ))}
+        {fileAttachments.map((attachment) => (
+          <FileLink key={attachment.id} attachment={attachment} size={size} />
+        ))}
+      </ImageList>
+      <Modal
+        open={show}
+        onClose={() => setShow(false)}
+        title={attachments[currentIndex].filename}
+        content={<GalleryView {...{ attachments: imageAttachments, currentIndex, setCurrentIndex, onPrevious, onNext }} />}
+      />
+    </Stack>
+  );
 
 };
 

src/beta/components/log/LogDetails/LogDetails.js

@@ -9,46 +9,46 @@ import { LogbookChip } from "../LogbookChip";
 import { TagChip } from "../TagChip";
 import { EntryTypeChip } from "../EntryTypeChip";
 
-const ChipList = ({children}) => {
+const ChipList = ({ children }) => {
   return (
     <Stack flexDirection="row" gap={0.5} flexWrap="wrap">
       {children}
     </Stack>
   )
 }
 
-const LogDetails = styled(({log, className}) => {
+const LogDetails = styled(({ log, className }) => {
 
-    return (
-        <Stack 
-            className={`LogDetails ${className}`} 
-            gap={1} 
-            padding={1} 
-            sx={{ 
-                overflow: "scroll"
-            }} 
-        >
-          <LogAttachmentsHeader log={log} />
-          <Typography variant="h2">{log.title}</Typography>
-          <Divider />
-          <CommonmarkPreview commonmarkSrc={log.source} imageUrlPrefix={customization.APP_BASE_URL + "/"} />
-          { log?.properties
-              ?.filter(it => it.name.toLowerCase() !== "log entry group" && it.state.toLowerCase() === "active")
-              ?.map(it => <LogProperty property={it} key={it.name} />)
-          }
-          <Divider />
-          <MetadataTable
-            ValueProps={{
-              component: "div"
-            }}
-            data={{
-              Logbooks: <ChipList>{log?.logbooks?.map(it => <LogbookChip key={it.name} value={it.name} />)}</ChipList>,
-              Tags: <ChipList>{log?.tags?.map(it => <TagChip key={it.name} value={it.name} />)}</ChipList>,
-              "Entry Type": <EntryTypeChip value={log?.level} />
-            }}
-          />
-        </Stack>
-    )
+  return (
+    <Stack
+      className={`LogDetails ${className}`}
+      gap={1}
+      padding={1}
+      sx={{
+        overflow: "scroll"
+      }}
+    >
+      <LogAttachmentsHeader log={log} />
+      <Typography component="h2" variant="h4">{log.title}</Typography>
+      <Divider />
+      <CommonmarkPreview commonmarkSrc={log.source} imageUrlPrefix={customization.APP_BASE_URL + "/"} />
+      {log?.properties
+        ?.filter(it => it.name.toLowerCase() !== "log entry group" && it.state.toLowerCase() === "active")
+        ?.map(it => <LogProperty property={it} key={it.name} />)
+      }
+      <Divider />
+      <MetadataTable
+        ValueProps={{
+          component: "div"
+        }}
+        data={{
+          Logbooks: <ChipList>{log?.logbooks?.map(it => <LogbookChip key={it.name} value={it.name} />)}</ChipList>,
+          Tags: <ChipList>{log?.tags?.map(it => <TagChip key={it.name} value={it.name} />)}</ChipList>,
+          "Entry Type": <EntryTypeChip value={log?.level} />
+        }}
+      />
+    </Stack>
+  )
 
 })({})