Mime type component

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 (
+    <>
+      <Grid item xs={12} sm={9}>
+        {isAutomaticMimeType ? (
+          <TextField
+            id="resource-path"
+            label="Path on disk"
+            fullWidth
+            disabled
+            value={mimeType.mimeTypeName}
+          />
+        ) : (
+          <Autocomplete
+            id="resource-mime-type"
+            options={mimeTypes}
+            value={mimeType.mimeTypeId}
+            onChange={(_event, value, _reason, _details) =>
+              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) => (
+              <TextField {...params} label="Mime type" />
+            )}
+          />
+        )}
+      </Grid>
+      <Grid item xs={12} sm={3}>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={isAutomaticMimeType}
+              onChange={handleChangeAutomaticMimeType}
+              name="automatic-mime-type"
+              color="primary"
+            />
+          }
+          label="Auto mime type"
+        />
+      </Grid>
+    </>
+  );
+};
+
+MimeTypeComponent.propTypes = {
+  mimeType: PropTypes.object.isRequired,
+  mimeTypes: PropTypes.array.isRequired,
+  onPropertyChange: PropTypes.func.isRequired
+};
+
+export default MimeTypeComponent;

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 (
     <Paper className={classes.paper}>
       <Grid container spacing={2}>
@@ -49,13 +51,21 @@ const ResourceComponent = ({ resource, onPropertyChange }) => {
                 value={resource.resourcePath}
               />
             </Grid>
+            <MimeTypeComponent
+              mimeType={{
+                mimeTypeId: resource.mimeTypeId,
+                mimeTypeName: resource.mimeType
+              }}
+              mimeTypes={mimeTypes}
+              onPropertyChange={onPropertyChange}
+            />
           </Grid>
         </Grid>
         <Grid item xs={12}>
           <TextField
             fullWidth
             multiline
-            rows={3}
+            rows={12}
             id="resource-description"
             label="Description"
             variant="outlined"
@@ -68,6 +78,7 @@ const ResourceComponent = ({ resource, onPropertyChange }) => {
 
 ResourceComponent.propTypes = {
   resource: PropTypes.object.isRequired,
+  mimeTypes: PropTypes.array.isRequired,
   onPropertyChange: PropTypes.func.isRequired
 };
 

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 = () => {
       <div className={classes.root}>
         <ResourceComponent
           resource={state}
+          mimeTypes={mimeTypes}
           onPropertyChange={handlePropertyChange}
         />
       </div>