forked from plone/volto
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: David Glick <[email protected]>
- Loading branch information
1 parent
4050e50
commit 86d9a50
Showing
3 changed files
with
81 additions
and
128 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| Refactor ControlPanels/Groups RenderGroups from class components to functional component. @Tishasoumya-02 |
196 changes: 74 additions & 122 deletions
196
packages/volto/src/components/manage/Controlpanels/Groups/RenderGroups.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,134 +1,86 @@ | ||
| /** | ||
| * Users controlpanel groups. | ||
| * @module components/manage/Controlpanels/UsersControlpanelGroups | ||
| */ | ||
| import PropTypes from 'prop-types'; | ||
| import React, { Component } from 'react'; | ||
| import { FormattedMessage, injectIntl } from 'react-intl'; | ||
| import { FormattedMessage } from 'react-intl'; | ||
| import { Dropdown, Table, Checkbox } from 'semantic-ui-react'; | ||
| import trashSVG from '@plone/volto/icons/delete.svg'; | ||
| import ploneSVG from '@plone/volto/icons/plone.svg'; | ||
| import { Icon } from '@plone/volto/components'; | ||
| import { canAssignRole } from '@plone/volto/helpers'; | ||
|
|
||
| /** | ||
| * UsersControlpanelGroups class. | ||
| * @class UsersControlpanelGroups | ||
| * @extends Component | ||
| */ | ||
| class RenderGroups extends Component { | ||
| /** | ||
| * Property types. | ||
| * @property {Object} propTypes Property types. | ||
| * @static | ||
| */ | ||
| static propTypes = { | ||
| //single group | ||
| group: PropTypes.shape({ | ||
| title: PropTypes.string, | ||
| description: PropTypes.string, | ||
| email: PropTypes.string, | ||
| groupname: PropTypes.string, | ||
| roles: PropTypes.arrayOf(PropTypes.string), | ||
| }).isRequired, | ||
|
|
||
| roles: PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| id: PropTypes.string, | ||
| }), | ||
| ).isRequired, | ||
| inheritedRole: PropTypes.array, | ||
| onDelete: PropTypes.func.isRequired, | ||
| isUserManager: PropTypes.bool.isRequired, | ||
| const RenderGroups = (props) => { | ||
| const onChange = (event, { value }) => { | ||
| const [group, role] = value.split('.'); | ||
| props.updateGroups(group, role); | ||
| }; | ||
|
|
||
| /** | ||
| * Constructor | ||
| * @method constructor | ||
| * @param {Object} props Component properties | ||
| * @constructs Sharing | ||
| */ | ||
| constructor(props) { | ||
| super(props); | ||
| this.onChange = this.onChange.bind(this); | ||
| } | ||
|
|
||
| /** | ||
| * @param {*} event | ||
| * @param {*} { value } | ||
| * @memberof UsersControlpanelUser | ||
| */ | ||
| onChange(event, { value }) { | ||
| const [group, role] = value.split('&role='); | ||
| this.props.updateGroups(group, role); | ||
| } | ||
|
|
||
| /** | ||
| *@param {*} | ||
| *@returns {Boolean} | ||
| *@memberof RenderGroups | ||
| */ | ||
| isAuthGroup = (roleId) => { | ||
| return this.props.inheritedRole.includes(roleId); | ||
| const isAuthGroup = (roleId) => { | ||
| return props.inheritedRole.includes(roleId); | ||
| }; | ||
|
|
||
| canDeleteGroup() { | ||
| if (this.props.isUserManager) return true; | ||
| return !this.props.group.roles.includes('Manager'); | ||
| } | ||
|
|
||
| /** | ||
| * Render method. | ||
| * @method render | ||
| * @returns {string} Markup for the component. | ||
| */ | ||
| render() { | ||
| return ( | ||
| <Table.Row key={this.props.group.title}> | ||
| <Table.Cell>{this.props.group.groupname}</Table.Cell> | ||
| {this.props.roles.map((role) => ( | ||
| <Table.Cell key={role.id}> | ||
| {this.props.inheritedRole && | ||
| this.props.inheritedRole.includes(role.id) && | ||
| this.props.group.roles.includes('Authenticated') ? ( | ||
| <Icon | ||
| name={ploneSVG} | ||
| size="20px" | ||
| color="#007EB1" | ||
| title={'plone-svg'} | ||
| /> | ||
| ) : ( | ||
| <Checkbox | ||
| checked={ | ||
| this.props.group.id === 'AuthenticatedUsers' | ||
| ? this.isAuthGroup(role.id) | ||
| : this.props.group.roles.includes(role.id) | ||
| } | ||
| onChange={this.onChange} | ||
| value={`${this.props.group.id}&role=${role.id}`} | ||
| disabled={!canAssignRole(this.props.isUserManager, role)} | ||
| /> | ||
| )} | ||
| </Table.Cell> | ||
| ))} | ||
| <Table.Cell textAlign="right"> | ||
| {this.canDeleteGroup() && ( | ||
| <Dropdown icon="ellipsis horizontal"> | ||
| <Dropdown.Menu className="left"> | ||
| <Dropdown.Item | ||
| onClick={this.props.onDelete} | ||
| value={this.props.group['@id']} | ||
| > | ||
| <Icon name={trashSVG} size="15px" /> | ||
| <FormattedMessage id="Delete" defaultMessage="Delete" /> | ||
| </Dropdown.Item> | ||
| </Dropdown.Menu> | ||
| </Dropdown> | ||
| const canDeleteGroup = () => { | ||
| if (props.isUserManager) return true; | ||
| return !props.group.roles.includes('Manager'); | ||
| }; | ||
| return ( | ||
| <Table.Row key={props.group.title}> | ||
| <Table.Cell>{props.group.groupname}</Table.Cell> | ||
| {props.roles.map((role) => ( | ||
| <Table.Cell key={role.id}> | ||
| {props.inheritedRole && | ||
| props.inheritedRole.includes(role.id) && | ||
| props.group.roles.includes('Authenticated') ? ( | ||
| <Icon | ||
| name={ploneSVG} | ||
| size="20px" | ||
| color="#007EB1" | ||
| title={'plone-svg'} | ||
| /> | ||
| ) : ( | ||
| <Checkbox | ||
| checked={ | ||
| props.group.id === 'AuthenticatedUsers' | ||
| ? isAuthGroup(role.id) | ||
| : props.group.roles.includes(role.id) | ||
| } | ||
| onChange={onChange} | ||
| value={`${props.group.id}.${role.id}`} | ||
| disabled={!canAssignRole(props.isUserManager, role)} | ||
| /> | ||
| )} | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| ); | ||
| } | ||
| } | ||
| ))} | ||
| <Table.Cell textAlign="right"> | ||
| {canDeleteGroup() && ( | ||
| <Dropdown icon="ellipsis horizontal"> | ||
| <Dropdown.Menu className="left"> | ||
| <Dropdown.Item | ||
| onClick={props.onDelete} | ||
| value={props.group['@id']} | ||
| > | ||
| <Icon name={trashSVG} size="15px" /> | ||
| <FormattedMessage id="Delete" defaultMessage="Delete" /> | ||
| </Dropdown.Item> | ||
| </Dropdown.Menu> | ||
| </Dropdown> | ||
| )} | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| ); | ||
| }; | ||
|
|
||
| RenderGroups.propTypes = { | ||
| //single group | ||
| group: PropTypes.shape({ | ||
| title: PropTypes.string, | ||
| description: PropTypes.string, | ||
| email: PropTypes.string, | ||
| groupname: PropTypes.string, | ||
| roles: PropTypes.arrayOf(PropTypes.string), | ||
| }).isRequired, | ||
|
|
||
| export default injectIntl(RenderGroups); | ||
| roles: PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| id: PropTypes.string, | ||
| }), | ||
| ).isRequired, | ||
| inheritedRole: PropTypes.array, | ||
| onDelete: PropTypes.func.isRequired, | ||
| }; | ||
| export default RenderGroups; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters