97 lines
2.7 KiB
JavaScript
Raw Normal View History

/**
2019-06-19 11:51:44 +02:00
*
* Controller
*
*/
import React, { useState } from 'react';
import PropTypes from 'prop-types';
2019-07-02 08:37:41 +02:00
import { get, map } from 'lodash';
2017-11-29 18:51:56 +01:00
import { FormattedMessage } from 'react-intl';
2019-06-19 11:51:44 +02:00
import pluginId from '../../pluginId';
2019-10-03 12:58:20 +02:00
import { useEditPageContext } from '../../contexts/EditPage';
2019-02-22 11:16:42 +01:00
import InputCheckbox from '../InputCheckboxPlugin';
2019-09-16 19:18:35 +02:00
import { Header, Label, Separator, Wrapper } from './Components';
function Controller({ actions, inputNamePath, isOpen, name }) {
2019-10-03 12:58:20 +02:00
const { selectAllActions } = useEditPageContext();
const [inputSelected, setInputSelected] = useState('');
2017-11-16 15:13:46 +01:00
2019-09-17 17:36:03 +02:00
const areAllActionsSelected = () => {
return Object.keys(actions).every(action => actions[action].enabled === true);
2019-06-19 11:51:44 +02:00
};
2017-11-29 18:51:56 +01:00
2019-09-17 17:36:03 +02:00
const handleChange = () => {
selectAllActions(`${inputNamePath}.controllers.${name}`, !areAllActionsSelected());
2019-06-19 11:51:44 +02:00
};
2017-11-29 18:51:56 +01:00
2019-09-17 17:36:03 +02:00
const hasSomeActionsSelected = () => {
return Object.keys(actions).some(action => actions[action].enabled === true);
2019-06-19 11:51:44 +02:00
};
2019-09-17 17:36:03 +02:00
const setNewInputSelected = name => {
setInputSelected(name);
2019-06-19 11:51:44 +02:00
};
2017-11-16 15:13:46 +01:00
2019-09-17 17:36:03 +02:00
const labelId = areAllActionsSelected() ? 'unselectAll' : 'selectAll';
return (
<Wrapper>
<Header>
<div>{name}</div>
<Separator />
<div className="checkbox-wrapper">
<div className="form-check">
<Label
className={`form-check-label ${areAllActionsSelected() &&
'checked'} ${!areAllActionsSelected() &&
hasSomeActionsSelected() &&
'some-checked'}`}
htmlFor={name}
>
<input
className="form-check-input"
checked={areAllActionsSelected()}
id={name}
name={name}
onChange={handleChange}
type="checkbox"
/>
<FormattedMessage id={`${pluginId}.Controller.${labelId}`} />
</Label>
2017-11-29 18:51:56 +01:00
</div>
2017-11-16 15:13:46 +01:00
</div>
2019-09-17 17:36:03 +02:00
</Header>
<div className="row">
{map(Object.keys(actions).sort(), actionKey => (
<InputCheckbox
inputSelected={inputSelected}
isOpen={isOpen}
key={actionKey}
label={actionKey}
name={`${inputNamePath}.controllers.${name}.${actionKey}.enabled`}
setNewInputSelected={setNewInputSelected}
value={get(actions[actionKey], 'enabled')}
/>
))}
</div>
</Wrapper>
);
}
Controller.defaultProps = {
actions: {},
inputNamePath: 'permissions.application',
name: '',
};
Controller.propTypes = {
actions: PropTypes.object,
inputNamePath: PropTypes.string,
2017-11-30 15:01:19 +01:00
isOpen: PropTypes.bool.isRequired,
name: PropTypes.string,
};
export default Controller;