diff --git a/src/features/resources/edit/components/MimeTypeComponent.js b/src/features/resources/edit/components/MimeTypeComponent.js
new file mode 100644
index 0000000..0f013ca
--- /dev/null
+++ b/src/features/resources/edit/components/MimeTypeComponent.js
@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Grid, TextField, FormControlLabel, Checkbox } from "@material-ui/core";
+import Autocomplete from "@material-ui/lab/Autocomplete";
+
+const MimeTypeComponent = ({ mimeType, mimeTypes, onPropertyChange }) => {
+ const [isAutomaticMimeType, setIsAutomaticMimeType] = useState(
+ mimeType.mimeTypeId === null
+ );
+
+ const handleChangeAutomaticMimeType = (event) => {
+ const checked = event.target.checked;
+ setIsAutomaticMimeType(checked);
+ onPropertyChange("mimeTypeId")(null);
+ };
+
+ return (
+ <>
+
+ {isAutomaticMimeType ? (
+
+ ) : (
+
+ onPropertyChange("mimeTypeId")(value.mimeTypeId)
+ }
+ getOptionLabel={(option) => {
+ const optionIsObject =
+ typeof option === "object" && option !== null;
+ if (optionIsObject) return option.mimeTypeName;
+
+ const mimeType = mimeTypes.find((z) => z.mimeTypeId === option);
+ return mimeType.mimeTypeName;
+ }}
+ getOptionSelected={(option, value) => option.mimeTypeId === value}
+ renderInput={(params) => (
+
+ )}
+ />
+ )}
+
+
+
+ }
+ label="Auto mime type"
+ />
+
+ >
+ );
+};
+
+MimeTypeComponent.propTypes = {
+ mimeType: PropTypes.object.isRequired,
+ mimeTypes: PropTypes.array.isRequired,
+ onPropertyChange: PropTypes.func.isRequired
+};
+
+export default MimeTypeComponent;
diff --git a/src/features/resources/edit/components/ResourceComponent.js b/src/features/resources/edit/components/ResourceComponent.js
index 186d80a..bd8cd61 100644
--- a/src/features/resources/edit/components/ResourceComponent.js
+++ b/src/features/resources/edit/components/ResourceComponent.js
@@ -4,12 +4,14 @@ 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 MimeTypeComponent from "./MimeTypeComponent";
import { onTextFieldChange } from "../../../../utils/adapters";
const useStyles = makeStyles(style);
-const ResourceComponent = ({ resource, onPropertyChange }) => {
+const ResourceComponent = ({ resource, mimeTypes, onPropertyChange }) => {
const classes = useStyles();
+
return (
@@ -49,13 +51,21 @@ const ResourceComponent = ({ resource, onPropertyChange }) => {
value={resource.resourcePath}
/>
+
{
ResourceComponent.propTypes = {
resource: PropTypes.object.isRequired,
+ mimeTypes: PropTypes.array.isRequired,
onPropertyChange: PropTypes.func.isRequired
};
diff --git a/src/features/resources/edit/components/ResourceContainer.js b/src/features/resources/edit/components/ResourceContainer.js
index dbbac7c..ceb473f 100644
--- a/src/features/resources/edit/components/ResourceContainer.js
+++ b/src/features/resources/edit/components/ResourceContainer.js
@@ -1,7 +1,7 @@
import React, { useState, useMemo, useEffect } from "react";
import PageTitle from "../../../../components/PageTitle";
import { useParams } from "react-router-dom";
-import { useResourcesApi } from "../../api";
+import { useResourcesApi, useDictionariesApi } from "../../api";
import { LoadingText } from "../../../../components";
import ResourceComponent from "./ResourceComponent";
import { makeStyles } from "@material-ui/core/styles";
@@ -12,13 +12,19 @@ const useStyles = makeStyles(style);
const ResourceContainer = () => {
const [state, setState] = useState(null);
const [loading, setLoading] = useState(false);
+ const [mimeTypes, setMimeTypes] = useState([]);
const classes = useStyles();
const params = useParams();
const { getResource } = useResourcesApi();
+ const { getMimeTypes } = useDictionariesApi();
const isNew = useMemo(() => params.id === "new", [params.id]);
+ useEffect(() => {
+ getMimeTypes().then((r) => setMimeTypes(r));
+ }, [getMimeTypes]);
+
useEffect(() => {
if (isNew) return;
const resourceId = parseInt(params.id);
@@ -41,6 +47,7 @@ const ResourceContainer = () => {