cdn-frontend/src/features/resources/edit/components/ResourceComponent.js

import React from "react";
import PropTypes from "prop-types";
import {
  Grid,
  Paper,
  ButtonBase,
  TextField,
  FormControlLabel,
  Checkbox,
  Button
} from "@material-ui/core";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { Save as SaveIcon, Delete as DeleteIcon } from "@material-ui/icons";
import { makeStyles } from "@material-ui/core/styles";
import style from "../styles";
import ResourcePreviewComponent from "./ResourcePreviewComponent";
import MimeTypeComponent from "./MimeTypeComponent";
import DeleteDialog from "./DeleteDialog";
import { onTextFieldChange } from "../../../../utils/adapters";

const useStyles = makeStyles(style);

const ResourceComponent = ({
  resource,
  mimeTypes,
  resourceCategories,
  onPropertyChange,
  deleteProps,
  processing
}) => {
  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>
              <MimeTypeComponent
                mimeType={{
                  mimeTypeId: resource.mimeTypeId,
                  mimeTypeName: resource.mimeType
                }}
                mimeTypes={mimeTypes}
                onPropertyChange={onPropertyChange}
              />
              <Grid item xs={12} sm={9}>
                <Autocomplete
                  id="resource-category"
                  options={resourceCategories}
                  value={resource.categoryId}
                  onChange={(_event, value, _reason, _details) =>
                    onPropertyChange("categoryId")(value.categoryId)
                  }
                  getOptionLabel={(option) => {
                    const optionIsObject =
                      typeof option === "object" && option !== null;
                    if (optionIsObject) return option.categoryName;

                    const category = resourceCategories.find(
                      (z) => z.categoryId === option
                    );
                    return category.categoryName;
                  }}
                  getOptionSelected={(option, value) =>
                    option.categoryId === value
                  }
                  renderInput={(params) => (
                    <TextField {...params} label="Category" />
                  )}
                />
              </Grid>
              <Grid item xs={12} sm={3}>
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={resource.secured}
                      onChange={(event) =>
                        onPropertyChange("secured")(event.target.checked)
                      }
                      name="resources-is-secured"
                      color="primary"
                    />
                  }
                  label="Secured"
                />
              </Grid>
            </Grid>
          </Grid>
          <Grid item xs={12}>
            <TextField
              fullWidth
              multiline
              rows={12}
              id="resource-description"
              label="Description"
              variant="outlined"
            />
          </Grid>
          <Grid container justify="flex-end">
            <Grid item>
              <Button
                variant="outlined"
                color="secondary"
                className={classes.button}
                startIcon={<DeleteIcon />}
                onClick={deleteProps.onOpen}
                disabled={!!processing}
              >
                {processing === "delete" ? "Deleting" : "Delete"}
              </Button>
              <Button
                variant="outlined"
                color="primary"
                className={classes.button}
                startIcon={<SaveIcon />}
                disabled={!!processing}
              >
                {processing === "delete" ? "Saving" : "Save"}
              </Button>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
      <DeleteDialog {...deleteProps} title={resource.resourceName} />
    </>
  );
};

ResourceComponent.propTypes = {
  resource: PropTypes.object.isRequired,
  mimeTypes: PropTypes.array.isRequired,
  resourceCategories: PropTypes.array.isRequired,
  onPropertyChange: PropTypes.func.isRequired,
  deleteProps: PropTypes.object.isRequired,
  processing: PropTypes.bool.isRequired
};

export default ResourceComponent;