resource component

master
Tudor Stanciu 2022-12-15 00:05:32 +02:00
parent 2b9bc9fb08
commit 3153d17e42
6 changed files with 170 additions and 2 deletions

View File

@ -0,0 +1,74 @@
import React from "react";
import PropTypes from "prop-types";
import { Grid, Paper, ButtonBase, TextField } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import style from "../styles";
import ResourcePreviewComponent from "./ResourcePreviewComponent";
import { onTextFieldChange } from "../../../../utils/adapters";
const useStyles = makeStyles(style);
const ResourceComponent = ({ resource, onPropertyChange }) => {
const classes = useStyles();
return (
<Paper className={classes.paper}>
<Grid container spacing={2}>
<Grid item xs={12} sm={5}>
<ButtonBase>
<ResourcePreviewComponent resource={resource} />
</ButtonBase>
</Grid>
<Grid item xs={12} sm={7}>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<TextField
id="resource-code"
label="Code"
fullWidth
required
value={resource.resourceCode}
onChange={onTextFieldChange(onPropertyChange("resourceCode"))}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
id="resource-name"
label="Name"
fullWidth
required
value={resource.resourceName}
onChange={onTextFieldChange(onPropertyChange("resourceName"))}
/>
</Grid>
<Grid item xs={12}>
<TextField
id="resource-path"
label="Path on disk"
fullWidth
disabled
value={resource.resourcePath}
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<TextField
fullWidth
multiline
rows={3}
id="resource-description"
label="Description"
variant="outlined"
/>
</Grid>
</Grid>
</Paper>
);
};
ResourceComponent.propTypes = {
resource: PropTypes.object.isRequired,
onPropertyChange: PropTypes.func.isRequired
};
export default ResourceComponent;

View File

@ -3,11 +3,17 @@ import PageTitle from "../../../../components/PageTitle";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { useResourcesApi } from "../../api"; import { useResourcesApi } from "../../api";
import { LoadingText } from "../../../../components"; import { LoadingText } from "../../../../components";
import ResourceComponent from "./ResourceComponent";
import { makeStyles } from "@material-ui/core/styles";
import style from "../styles";
const useStyles = makeStyles(style);
const ResourceContainer = () => { const ResourceContainer = () => {
const [state, setState] = useState(null); const [state, setState] = useState(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const classes = useStyles();
const params = useParams(); const params = useParams();
const { getResource } = useResourcesApi(); const { getResource } = useResourcesApi();
@ -23,12 +29,21 @@ const ResourceContainer = () => {
}); });
}, [getResource, isNew, params.id]); }, [getResource, isNew, params.id]);
const handlePropertyChange = (prop) => (value) => {
setState((prev) => ({ ...prev, [prop]: value }));
};
if (loading || state === null) return <LoadingText lines={15} onPaper />; if (loading || state === null) return <LoadingText lines={15} onPaper />;
return ( return (
<> <>
<PageTitle title={state.resourceName} /> <PageTitle title={state.resourceName} />
<>.................</> <div className={classes.root}>
<ResourceComponent
resource={state}
onPropertyChange={handlePropertyChange}
/>
</div>
</> </>
); );
}; };

View File

@ -1,3 +1,61 @@
const ResourcePreviewComponent = () => {}; import React, { useMemo } from "react";
import PropTypes from "prop-types";
import UnknownResourceType from "../../../../images/UnknownResourceType.jpg";
import style from "../styles";
import { makeStyles } from "@material-ui/core/styles";
import { useResourceSecurity } from "../../../../hooks";
const useStyles = makeStyles(style);
const RESOURCE_TYPES = {
UNKNOWN: "UNKNOWN",
IMAGE: "IMAGE"
};
const getResourceType = (mimeType) => {
if (mimeType.startsWith("image/")) return RESOURCE_TYPES.IMAGE;
return RESOURCE_TYPES.UNKNOWN;
};
const ResourcePreviewComponent = ({ resource }) => {
const classes = useStyles();
const { secureUrl } = useResourceSecurity();
const resourceType = useMemo(() => getResourceType(resource.mimeType), [
resource.mimeType
]);
const resourceUrl = useMemo(
() => (resource.secured ? secureUrl(resource.urls[2]) : resource.urls[2]),
[resource.secured, resource.urls, secureUrl]
);
const isImage = useMemo(() => resourceType === RESOURCE_TYPES.IMAGE, [
resourceType
]);
const isUnknown = useMemo(() => resourceType === RESOURCE_TYPES.UNKNOWN, [
resourceType
]);
return (
<>
{isImage && (
<img src={resourceUrl} alt="..." className={classes.resourceImage} />
)}
{isUnknown && (
<img
src={UnknownResourceType}
alt="..."
className={classes.resourceImage}
/>
)}
</>
);
};
ResourcePreviewComponent.propTypes = {
resource: PropTypes.object.isRequired
};
export default ResourcePreviewComponent; export default ResourcePreviewComponent;

View File

@ -0,0 +1,19 @@
const style = (theme) => {
return {
root: {
flexGrow: 1
},
paper: {
padding: theme.spacing(2),
margin: "auto"
},
resourceImage: {
margin: "auto",
display: "block",
maxWidth: "100%",
maxHeight: "100%"
}
};
};
export default style;

Binary file not shown.

After

Width:  |  Height:  |  Size: 967 KiB

View File

@ -0,0 +1,2 @@
export const onTextFieldChange = (onPropertyChange) => (event) =>
onPropertyChange(event.target.value);