@eureca/eureca-ui/src/components/Inputs/select-permissions.js

UI component library of Eureca's user and admin apps

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import _ from 'lodash';
import { Box, Menu, MenuItem, Typography } from '@material-ui/core';

import { colors } from '../../theme/colors';

import { Checkbox } from '../Checkbox';
import { Flex } from '../Flex';

const SelectFlex = styled(Flex)`
  ${({ error }) => css`
    border: 1px solid rgba(0, 0, 0, 0.23);
    &:hover {
      border: 1px solid rgba(0, 0, 0, 0.87);
    }

    ${error &&
      css`
        border: 1px solid ${colors.error1};
        &:hover {
          border: 1px solid ${colors.error1};
        }
      `}
  `}
`;

const permissionOptions = [
  {
    id: 0,
    label: 'Administrador',
    value: 'administrator',
  },
  {
    id: 1,
    label: 'Editor',
    value: 'editor',
  },
  {
    id: 2,
    label: 'Avaliador',
    value: 'reviewer',
  },
  {
    id: 3,
    label: 'Observador',
    value: 'observer',
  },
];

function setDisabled(value, values) {
  const rules = {
    administrator: false,
    editor: false || values.includes('administrator'),
    reviewer: false || values.includes('administrator') || values.includes('editor'),
    observer: false || values.includes('administrator') || values.includes('editor'),
  };

  return rules[value];
}

function setChecked(value, values) {
  const rules = {
    administrator: values.includes('administrator'),
    editor: values.includes('editor') || values.includes('administrator'),
    reviewer:
      values.includes('reviewer') || values.includes('administrator') || values.includes('editor'),
    observer:
      values.includes('observer') || values.includes('administrator') || values.includes('editor'),
  };

  return rules[value];
}

function showValues(values) {
  return values.map(item => {
    return permissionOptions.map(option => {
      return option.value === item && ` ${option.label}`;
    });
  });
}

function SelectPermissions({ data, onChange, helperText, error, ...props }) {
  const [values, setValues] = useState(data ? [...data] : []);
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const checksItems = item => {
    const copyValues = _.cloneDeep(values);

    switch (item) {
      case 'administrator':
        if (values.includes('administrator')) {
          setValues([]);
        } else {
          setValues(['administrator']);
        }
        break;
      case 'editor':
        if (values.includes('editor')) {
          setValues([]);
        } else {
          setValues(['editor']);
        }
        break;
      case 'reviewer':
        if (values.includes('reviewer')) {
          setValues([...copyValues.filter(e => e !== 'reviewer')]);
        } else {
          setValues([
            ...copyValues.filter(e => e !== 'editor' && e !== 'administrator'),
            'reviewer',
          ]);
        }
        break;
      case 'observer':
        if (values.includes('observer')) {
          setValues([...copyValues.filter(e => e !== 'observer')]);
        } else {
          setValues([
            ...copyValues.filter(e => e !== 'editor' && e !== 'administrator'),
            'observer',
          ]);
        }
        break;
      default:
        break;
    }
  };

  useEffect(() => {
    onChange(values);
  }, [onChange, values]);

  return (
    <Box position="relative">
      <SelectFlex
        px={1.5}
        height={56}
        borderRadius={4}
        cursorPointer
        directionRow
        alignCenter
        justifySpaceBetween
        onClick={handleClick}
        error={error}
        data-testid="select-permissions-button"
      >
        <Typography style={{ color: error ? colors.error1 : colors.gray3 }}>
          {values.length > 0 ? showValues(values) : 'Permissão'}
        </Typography>
        <Box
          width={0}
          height={0}
          borderLeft="5px solid transparent"
          borderRight="5px solid transparent"
          borderTop={`5px solid ${error ? colors.error1 : 'rgba(0, 0, 0, 0.54)'}`}
        />
      </SelectFlex>
      <Box mt="3px" ml="14px">
        <Typography
          variant="body2"
          style={{
            color: error ? colors.error1 : colors.gray3,
            lineHeight: 1.66,
          }}
        >
          {helperText}
        </Typography>
      </Box>
      <Menu
        id="select-permissions"
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        {permissionOptions.map(item => {
          return (
            <MenuItem
              key={item.id}
              onClick={e => {
                e.preventDefault();
                checksItems(item.value);
              }}
            >
              <Checkbox
                label={item.label}
                name={item.label}
                disabled={setDisabled(item.value, values)}
                value={values.includes(item.value)}
                checked={setChecked(item.value, values)}
                data-testid={`select-checkbox-${item.value}`}
              />
            </MenuItem>
          );
        })}
      </Menu>
    </Box>
  );
}

SelectPermissions.propTypes = {
  data: PropTypes.array.isRequired,
  onChange: PropTypes.func.isRequired,
  helperText: PropTypes.string,
  error: PropTypes.bool,
};

export { SelectPermissions };