diff --git a/src/actions/dataset.js b/src/actions/dataset.js new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Dataset.jsx b/src/components/Dataset.jsx index e69de29..f8928f0 100644 --- a/src/components/Dataset.jsx +++ b/src/components/Dataset.jsx @@ -0,0 +1,97 @@ +import React, {useEffect, useState} from "react"; +import TopBar from "./childComponents/TopBar"; +import Breadcrumbs from "./childComponents/BreadCrumb"; +import {makeStyles} from "@material-ui/core/styles"; +import {Link, Button} from "@material-ui/core"; +import File from "./File"; + +const useStyles = makeStyles((theme) => ({ + root: { + flexGrow: 1, + }, + appBar:{ + background: "#FFFFFF", + boxShadow: "none", + }, + tab:{ + fontStyle: "normal", + fontWeight: "normal", + fontSize: "16px", + color: "#495057", + textTransform:"capitalize", + }, + infoCard:{ + padding: "48px 0", + }, + title:{ + fontWeight: "600", + fontSize: "16px", + color: "#000000", + marginBottom:"8px" + }, + content:{ + fontSize: "14px", + color: "#000000", + } +})); + +export default function Dataset(props) { + const classes = useStyles(); + + const [fileId, setFileId] = useState(""); + const [paths, setPaths] = useState(["explore","collection", "datasetID"]); + + const { + listFileMetadata, fileMetadata, + listFileExtractedMetadata, fileExtractedMetadata, + listFileMetadataJsonld, fileMetadataJsonld, + listFilePreviews, filePreviews, + ...other + } = props; + + useEffect(() => { + // set breadcrumbs + setPaths(paths => [...paths.slice(0, paths.length), fileMetadata["filename"]]); + }, [fileMetadata]); + + const selectFile = (selectedFileId) => { + // pass that id to file component + setFileId(selectedFileId); + + // load file information + listFileMetadata(selectedFileId); + listFileExtractedMetadata(selectedFileId); + listFileMetadataJsonld(selectedFileId); + listFilePreviews(selectedFileId); + + {/**/} + {/*
*/} + {/* */} + + } + + return ( +
+ +
+ + + + + + + + { + fileId !== "" ? + + : + <> + } +
+
+ ); +} diff --git a/src/components/File.jsx b/src/components/File.jsx index 4c780a4..37cfedf 100644 --- a/src/components/File.jsx +++ b/src/components/File.jsx @@ -1,8 +1,6 @@ import React, {useEffect, useState} from "react"; import config from "../app.config"; -import TopBar from "./childComponents/TopBar"; -import Breadcrumbs from "./childComponents/BreadCrumb"; -import {AppBar, Box, Tab, Tabs, Typography, Grid, Divider} from "@material-ui/core" +import {AppBar, Box, Divider, Grid, Tab, Tabs, Typography} from "@material-ui/core" import {makeStyles} from "@material-ui/core/styles"; import {ClowderInput} from "./styledComponents/ClowderInput"; import {ClowderButton} from "./styledComponents/ClowderButton"; @@ -11,42 +9,36 @@ const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, - appBar:{ + appBar: { background: "#FFFFFF", boxShadow: "none", }, - tab:{ + tab: { fontStyle: "normal", fontWeight: "normal", fontSize: "16px", color: "#495057", - textTransform:"capitalize", + textTransform: "capitalize", }, - infoCard:{ + infoCard: { padding: "48px 0", }, - title:{ + title: { fontWeight: "600", fontSize: "16px", color: "#000000", - marginBottom:"8px" + marginBottom: "8px" }, - content:{ + content: { fontSize: "14px", color: "#000000", -} + } })); export default function File(props) { const classes = useStyles(); - const { - listFileMetadata, fileMetadata, - listFileExtractedMetadata, fileExtractedMetadata, - listFileMetadataJsonld, fileMetadataJsonld, - listFilePreviews, filePreviews, - ...other - } = props; + const {fileMetadata, fileExtractedMetadata, fileMetadataJsonld, filePreviews, fileId, ...other} = props; const [selectedTabIndex, setSelectedTabIndex] = useState(0); @@ -69,7 +61,7 @@ export default function File(props) { previewerScripts[0].parentNode.removeChild(previewerScripts[0]); } - if (filePreviews.length > 0 && filePreviews[0].previews !== undefined) { + if (filePreviews !== undefined && filePreviews.length > 0 && filePreviews[0].previews !== undefined) { let uniquePid = []; // look at which previewer to load filePreviews[0].previews.map((filePreview, index) => { @@ -90,14 +82,7 @@ export default function File(props) { } }); } - }, [filePreviews]) - - const selectFile = (fileId) => { - listFileMetadata(fileId); - listFileExtractedMetadata(fileId); - listFileMetadataJsonld(fileId); - listFilePreviews(fileId); - } + }, [filePreviews]); const handleTabChange = (event, newTabIndex) => { setSelectedTabIndex(newTabIndex); @@ -105,116 +90,108 @@ export default function File(props) { return (
- -
- - - {/*tabs*/} -
- - - - - - - - - - - - - { - filePreviews.length > 0 && filePreviews[0].previews !== undefined - ? - filePreviews[0].previews.map((filePreview, index) => { - const Configuration = {}; - Configuration.tab = `#previewer_${filePreviews[0]["file_id"]}_${index}`; - Configuration.url = `${config.hostname}${filePreview["pv_route"]}?superAdmin=true`; - Configuration.fileid = filePreview["pv_id"]; - Configuration.previewer = `/public${filePreview["p_path"]}/`; - Configuration.fileType = filePreview["pv_contenttype"]; - Configuration.APIKEY = config.apikey; - Configuration.authenticated = true; - // Configuration.metadataJsonld = fileMetadataJsonld; - - let previewId = filePreview["p_id"].replace(" ", "-").toLowerCase(); - return (
-
-
); - }) - : - <> - } -
- - NA - - - { + {/*tabs*/} +
+ + + + + + + + + + + + + { + filePreviews !== undefined && filePreviews.length > 0 && filePreviews[0].previews !== undefined + ? + filePreviews[0].previews.map((filePreview, index) => { + const Configuration = {}; + Configuration.tab = `#previewer_${filePreviews[0]["file_id"]}_${index}`; + Configuration.url = `${config.hostname}${filePreview["pv_route"]}?superAdmin=true`; + Configuration.fileid = filePreview["pv_id"]; + Configuration.previewer = `/public${filePreview["p_path"]}/`; + Configuration.fileType = filePreview["pv_contenttype"]; + Configuration.APIKEY = config.apikey; + Configuration.authenticated = true; + // Configuration.metadataJsonld = fileMetadataJsonld; + + let previewId = filePreview["p_id"].replace(" ", "-").toLowerCase(); + return (
+
+
); + }) + : + <> + } +
+ + NA + + + { + fileMetadataJsonld !== undefined && fileMetadataJsonld.length > 0 ? fileMetadataJsonld.map((item) => { return Object.keys(item["content"]).map((key) => { return (

{key} - {JSON.stringify(item["content"][key])}

); } ); - }) - } -
- - Extractions - - - Comments - -
- - - About - Type: {fileMetadata["content-type"]} - File size: {fileMetadata["size"]} - Uploaded on: {fileMetadata["date-created"]} - Uploaded as: {fileMetadata["filename"]} - Uploaded by: {fileMetadata["authorId"]} - Status: {fileMetadata["status"]} - - - - Statistics - Views:10 - Last viewed:Jun 07, 2021 21:49:09 - Downloads:0 - Last downloaded:Never - - - - Tags - - - - - - Search - + }) : <> + } + + + Extractions + + + Comments + + + + { + fileMetadata !== undefined ? + + About + Type: {fileMetadata["content-type"]} + File + size: {fileMetadata["size"]} + Uploaded + on: {fileMetadata["date-created"]} + Uploaded + as: {fileMetadata["filename"]} + Uploaded + by: {fileMetadata["authorId"]} + Status: {fileMetadata["status"]} + : <> + } + + + Statistics + Views:10 + Last viewed:Jun 07, 2021 21:49:09 + Downloads:0 + Last downloaded:Never + + + + Tags + + + + + + Search - - - + + +
- - -
+
- -
); } diff --git a/src/components/childComponents/BreadCrumb.jsx b/src/components/childComponents/BreadCrumb.jsx index 3548096..ccd5963 100644 --- a/src/components/childComponents/BreadCrumb.jsx +++ b/src/components/childComponents/BreadCrumb.jsx @@ -19,28 +19,28 @@ const useStyles = makeStyles((theme) => ({ fontStyle: "normal", fontWeight: "600", fontSize: "24px", - color: "#6C757D" + color: "#6C757D", + textTransform: "capitalize" } })); export default function Breadcrumbs(props) { const classes = useStyles(); - const { - filename, ...other} = props; + const { paths, ...other} = props; return (
- - Explore - - - Collection - - - Dataset - - {filename} + { + paths.map((path, index) => { + if (index !== paths.length -1){ + return ({path}); + } + else{ + return ({path}); + } + }) + }
diff --git a/src/containers/Dataset.jsx b/src/containers/Dataset.jsx new file mode 100644 index 0000000..c9cdc5f --- /dev/null +++ b/src/containers/Dataset.jsx @@ -0,0 +1,38 @@ +import {connect} from "react-redux"; +import DatasetComponents from "../components/Dataset"; +import { + fetchFileExtractedMetadata, + fetchFileMetadata, + fetchFileMetadataJsonld, + fetchFilePreviews +} from "../actions/file"; + +const mapStateToProps = (state) => { + return { + fileMetadata: state.file.metadata, + fileExtractedMetadata: state.file.extractedMetadata, + fileMetadataJsonld: state.file.metadataJsonld, + filePreviews: state.file.previews, + }; +}; + +const mapDispatchToProps = (dispatch) => { + return { + listFileMetadata: (id) => { + dispatch(fetchFileMetadata(id)); + }, + listFileExtractedMetadata: (id) => { + dispatch(fetchFileExtractedMetadata(id)); + }, + listFileMetadataJsonld: (id) => { + dispatch(fetchFileMetadataJsonld(id)); + }, + listFilePreviews: (fileId) => { + dispatch(fetchFilePreviews(fileId)); + } + }; +}; + +const Dataset = connect(mapStateToProps, mapDispatchToProps)(DatasetComponents); + +export default Dataset; diff --git a/src/routes.js b/src/routes.js index 5455269..fc61e17 100644 --- a/src/routes.js +++ b/src/routes.js @@ -2,12 +2,14 @@ import React from "react"; import {Route, Switch} from "react-router-dom"; import File from "./containers/File"; +import Dataset from "./containers/Dataset"; export default ( - { - return (); + { + return (); }}/> + {return ();}}/> );