Skip to content

Commit

Permalink
file component as a subcomponent of dataset
Browse files Browse the repository at this point in the history
  • Loading branch information
@longshuicy
longshuicy committed Aug 5, 2021
1 parent ca43262 commit b24e77a
Show file tree
Hide file tree
Showing 6 changed files with 258 additions and 144 deletions.
Empty file added src/actions/dataset.js
View file
Empty file.
97 changes: 97 additions & 0 deletions src/components/Dataset.jsx
View file
Original file line number Diff line number Diff line change
@@ -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);

{/*<TopBar/>*/}
{/*<div className="outer-container">*/}
{/* <Breadcrumbs paths={["explore", "collection", "dataset", fileMetadata["filename"]]}/>*/}

}

return (
<div>
<TopBar/>
<div className="outer-container">
<Breadcrumbs paths={paths}/>
<Button color="inherit" onClick={() => selectFile("60ee082d5e0e3ff9d746b5fc")}>Text File</Button>
<Button color="inherit" onClick={() => selectFile("59933ae8e4b04cf488f47aba")}>PDF File</Button>
<Button color="inherit" onClick={() => selectFile("5d974f435e0eb9edf7b3cf00")}>Audio File</Button>
<Button color="inherit" onClick={() => selectFile("59933ae9e4b04cf488f47b48")}>Video File</Button>
<Button color="inherit" onClick={() => selectFile("576b0b1ce4b0e899329e8553")}>Image File</Button>
<Button color="inherit" onClick={() => selectFile("60ee08325e0e3ff9d746bc57")}>Three D File</Button>
{
fileId !== "" ?
<File fileMetadata={fileMetadata}
fileExtractedMetadata={fileExtractedMetadata}
fileMetadataJsonld={fileMetadataJsonld}
filePreviews={filePreviews}
fileId={fileId} />
:
<></>
}
</div>
</div>
);
}
235 changes: 106 additions & 129 deletions src/components/File.jsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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);

Expand All @@ -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) => {
Expand All @@ -90,131 +82,116 @@ export default function File(props) {
}
});
}
}, [filePreviews])

const selectFile = (fileId) => {
listFileMetadata(fileId);
listFileExtractedMetadata(fileId);
listFileMetadataJsonld(fileId);
listFilePreviews(fileId);
}
}, [filePreviews]);

const handleTabChange = (event, newTabIndex) => {
setSelectedTabIndex(newTabIndex);
};

return (
<div>
<TopBar/>
<div className="outer-container">
<Breadcrumbs filename={fileMetadata["filename"]}/>

{/*tabs*/}
<div className="inner-container">
<Grid container spacing={4}>
<Grid item lg={8} sm={8} xl={8} xs={12}>
<AppBar className={classes.appBar} position="static">
<Tabs value={selectedTabIndex} onChange={handleTabChange} aria-label="file tabs">
<Tab className={classes.tab} label="Previews" {...a11yProps(0)} />
<Tab className={classes.tab} label="Sections" {...a11yProps(1)} />
<Tab className={classes.tab} label="Metadata" {...a11yProps(2)} />
<Tab className={classes.tab} label="Extractions" {...a11yProps(3)} />
<Tab className={classes.tab} label="Comments" {...a11yProps(4)} />
</Tabs>
</AppBar>
<TabPanel value={selectedTabIndex} index={0}>
{
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 (<div className={`configuration ${previewId}`}
data-configuration={JSON.stringify(Configuration)}>
<div id={Configuration.tab.slice(1)}></div>
</div>);
})
:
<></>
}
</TabPanel>
<TabPanel value={selectedTabIndex} index={1}>
NA
</TabPanel>
<TabPanel value={selectedTabIndex} index={2}>
{
{/*tabs*/}
<div className="inner-container">
<Grid container spacing={4}>
<Grid item lg={8} sm={8} xl={8} xs={12}>
<AppBar className={classes.appBar} position="static">
<Tabs value={selectedTabIndex} onChange={handleTabChange} aria-label="file tabs">
<Tab className={classes.tab} label="Previews" {...a11yProps(0)} />
<Tab className={classes.tab} label="Sections" {...a11yProps(1)} />
<Tab className={classes.tab} label="Metadata" {...a11yProps(2)} />
<Tab className={classes.tab} label="Extractions" {...a11yProps(3)} />
<Tab className={classes.tab} label="Comments" {...a11yProps(4)} />
</Tabs>
</AppBar>
<TabPanel value={selectedTabIndex} index={0}>
{
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 (<div className={`configuration ${previewId}`}
data-configuration={JSON.stringify(Configuration)}>
<div id={Configuration.tab.slice(1)}></div>
</div>);
})
:
<></>
}
</TabPanel>
<TabPanel value={selectedTabIndex} index={1}>
NA
</TabPanel>
<TabPanel value={selectedTabIndex} index={2}>
{
fileMetadataJsonld !== undefined && fileMetadataJsonld.length > 0 ?
fileMetadataJsonld.map((item) => {
return Object.keys(item["content"]).map((key) => {
return (<p>{key} - {JSON.stringify(item["content"][key])}</p>);
}
);
})
}
</TabPanel>
<TabPanel value={selectedTabIndex} index={3}>
Extractions
</TabPanel>
<TabPanel value={selectedTabIndex} index={4}>
Comments
</TabPanel>
</Grid>
<Grid item lg={4} sm={4} xl={4} xs={12}>
<Box className={classes.infoCard}>
<Typography className={classes.title}>About</Typography>
<Typography className={classes.content}>Type: {fileMetadata["content-type"]}</Typography>
<Typography className={classes.content}>File size: {fileMetadata["size"]}</Typography>
<Typography className={classes.content}>Uploaded on: {fileMetadata["date-created"]}</Typography>
<Typography className={classes.content}>Uploaded as: {fileMetadata["filename"]}</Typography>
<Typography className={classes.content}>Uploaded by: {fileMetadata["authorId"]}</Typography>
<Typography className={classes.content}>Status: {fileMetadata["status"]}</Typography>
</Box>
<Divider light />
<Box className={classes.infoCard}>
<Typography className={classes.title}>Statistics</Typography>
<Typography className={classes.content}>Views:10</Typography>
<Typography className={classes.content}>Last viewed:Jun 07, 2021 21:49:09</Typography>
<Typography className={classes.content}>Downloads:0</Typography>
<Typography className={classes.content}>Last downloaded:Never</Typography>
</Box>
<Divider light />
<Box className={classes.infoCard}>
<Typography className={classes.title}>Tags</Typography>
<Grid container spacing={}>
<Grid item lg={8} sm={8} xl={8} xs={12}>
<ClowderInput defaultValue="Tag"/>
</Grid>
<Grid item lg={4} sm={4} xl={4} xs={12}>
<ClowderButton>Search</ClowderButton>
</Grid>
}) : <></>
}
</TabPanel>
<TabPanel value={selectedTabIndex} index={3}>
Extractions
</TabPanel>
<TabPanel value={selectedTabIndex} index={4}>
Comments
</TabPanel>
</Grid>
<Grid item lg={4} sm={4} xl={4} xs={12}>
{
fileMetadata !== undefined ?
<Box className={classes.infoCard}>
<Typography className={classes.title}>About</Typography>
<Typography
className={classes.content}>Type: {fileMetadata["content-type"]}</Typography>
<Typography className={classes.content}>File
size: {fileMetadata["size"]}</Typography>
<Typography className={classes.content}>Uploaded
on: {fileMetadata["date-created"]}</Typography>
<Typography className={classes.content}>Uploaded
as: {fileMetadata["filename"]}</Typography>
<Typography className={classes.content}>Uploaded
by: {fileMetadata["authorId"]}</Typography>
<Typography
className={classes.content}>Status: {fileMetadata["status"]}</Typography>
</Box> : <></>
}
<Divider light/>
<Box className={classes.infoCard}>
<Typography className={classes.title}>Statistics</Typography>
<Typography className={classes.content}>Views:10</Typography>
<Typography className={classes.content}>Last viewed:Jun 07, 2021 21:49:09</Typography>
<Typography className={classes.content}>Downloads:0</Typography>
<Typography className={classes.content}>Last downloaded:Never</Typography>
</Box>
<Divider light/>
<Box className={classes.infoCard}>
<Typography className={classes.title}>Tags</Typography>
<Grid container spacing={4}>
<Grid item lg={8} sm={8} xl={8} xs={12}>
<ClowderInput defaultValue="Tag"/>
</Grid>
<Grid item lg={4} sm={4} xl={4} xs={12}>
<ClowderButton>Search</ClowderButton>
</Grid>
</Box>
<Divider light />
</Grid>
</Grid>
</Box>
<Divider light/>
</Grid>

<select name="files" id="files" onChange={(e) => { selectFile(e.target.value);}}
defaultValue="select">
<option value="select" disabled>Select A File</option>
<option value="60ee082d5e0e3ff9d746b5fc">Text File</option>
<option value="59933ae8e4b04cf488f47aba">PDF</option>
<option value="5d974f435e0eb9edf7b3cf00">Audio</option>
<option value="59933ae9e4b04cf488f47b48">Video</option>
<option value="576b0b1ce4b0e899329e8553">Image</option>
<option value="60ee08325e0e3ff9d746bc57">Three D</option>
</select>
</div>
</Grid>
</div>


</div>
);
}
Expand Down
Loading

0 comments on commit b24e77a

Please sign in to comment.