Commit 36b7dc71 authored by mgabdev's avatar mgabdev

Updated GroupMembers functionality

• Updated:
- GroupMembers functionality to include actions for admin to remove account and make account admin

• Added:
- GroupMemberOptionsPopover
parent aa220c08
......@@ -95,8 +95,8 @@ class Account extends ImmutablePureComponent {
'withBio',
]
handleAction = () => {
this.props.onActionClick(this.props.account)
handleAction = (e) => {
this.props.onActionClick(this.props.account, e)
}
handleUnrequest = () => {
......
import { closePopover } from '../../actions/popover'
import {
updateRole,
createRemovedAccount,
} from '../../actions/groups'
import PopoverLayout from './popover_layout'
import List from '../list'
const mapDispatchToProps = (dispatch) => ({
onUpdateRole(groupId, accountId, type) {
dispatch(closePopover())
dispatch(updateRole(groupId, accountId, type))
},
onCreateRemovedAccount(groupId, accountId) {
dispatch(closePopover())
dispatch(createRemovedAccount(groupId, accountId))
},
})
export default
@connect(null, mapDispatchToProps)
class GroupMemberOptionsPopover extends PureComponent {
static defaultProps = {
accountId: PropTypes.string.isRequired,
groupId: PropTypes.string.isRequired,
isXS: PropTypes.bool,
onUpdateRole: PropTypes.func.isRequired,
onCreateRemovedAccount: PropTypes.func.isRequired,
}
handleOnRemoveFromGroup = () => {
this.props.onCreateRemovedAccount(this.props.groupId, this.props.accountId)
}
handleOnMakeAdmin = () => {
this.props.onUpdateRole(this.props.groupId, this.props.accountId, 'admin')
}
render() {
const { isXS } = this.props
const listItems = [
{
hideArrow: true,
icon: 'block',
title: 'Remove from group',
onClick: this.handleOnRemoveFromGroup,
},
{
hideArrow: true,
icon: 'groups',
title: 'Make group admin',
onClick: this.handleOnMakeAdmin,
},
]
return (
<PopoverLayout width={210} isXS={isXS}>
<List
scrollKey='group_options'
items={listItems}
size='large'
/>
</PopoverLayout>
)
}
}
\ No newline at end of file
......@@ -3,6 +3,7 @@ import {
POPOVER_COMMENT_SORTING_OPTIONS,
POPOVER_DATE_PICKER,
POPOVER_EMOJI_PICKER,
POPOVER_GROUP_MEMBER_OPTIONS,
POPOVER_GROUP_OPTIONS,
POPOVER_NAV_SETTINGS,
POPOVER_PROFILE_OPTIONS,
......@@ -17,6 +18,7 @@ import {
CommentSortingOptionsPopover,
DatePickerPopover,
EmojiPickerPopover,
GroupMemberOptionsPopover,
GroupOptionsPopover,
NavSettingsPopover,
ProfileOptionsPopover,
......@@ -40,6 +42,7 @@ const POPOVER_COMPONENTS = {}
POPOVER_COMPONENTS[POPOVER_COMMENT_SORTING_OPTIONS] = CommentSortingOptionsPopover
POPOVER_COMPONENTS[POPOVER_DATE_PICKER] = DatePickerPopover
POPOVER_COMPONENTS[POPOVER_EMOJI_PICKER] = EmojiPickerPopover
POPOVER_COMPONENTS[POPOVER_GROUP_MEMBER_OPTIONS] = GroupMemberOptionsPopover
POPOVER_COMPONENTS[POPOVER_GROUP_OPTIONS] = GroupOptionsPopover
POPOVER_COMPONENTS[POPOVER_NAV_SETTINGS] = NavSettingsPopover
POPOVER_COMPONENTS[POPOVER_PROFILE_OPTIONS] = ProfileOptionsPopover
......
......@@ -22,6 +22,7 @@ export const PLACEHOLDER_MISSING_HEADER_SRC = '/original/missing.png'
export const POPOVER_COMMENT_SORTING_OPTIONS = 'COMMENT_SORTING_OPTIONS'
export const POPOVER_DATE_PICKER = 'DATE_PICKER'
export const POPOVER_EMOJI_PICKER = 'EMOJI_PICKER'
export const POPOVER_GROUP_MEMBER_OPTIONS = 'GROUP_MEMBER_OPTIONS'
export const POPOVER_GROUP_OPTIONS = 'GROUP_OPTIONS'
export const POPOVER_NAV_SETTINGS = 'NAV_SETTINGS'
export const POPOVER_PROFILE_OPTIONS = 'PROFILE_OPTIONS'
......
import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
import debounce from 'lodash.debounce'
import { FormattedMessage } from 'react-intl'
import {
fetchMembers,
expandMembers,
updateRole,
createRemovedAccount,
} from '../actions/groups'
import { FormattedMessage } from 'react-intl'
import { openPopover } from '../actions/popover'
import Account from '../components/account'
import ScrollableList from '../components/scrollable_list'
......@@ -25,6 +24,14 @@ const mapDispatchToProps = (dispatch) => ({
onExpandMembers(groupId) {
dispatch(expandMembers(groupId))
},
onOpenGroupMemberOptions(targetRef, accountId, groupId) {
dispatch(openPopover('GROUP_MEMBER_OPTIONS', {
targetRef,
accountId,
groupId,
position: 'top',
}))
},
})
export default
......@@ -37,6 +44,7 @@ class GroupMembers extends ImmutablePureComponent {
hasMore: PropTypes.bool,
onExpandMembers: PropTypes.func.isRequired,
onFetchMembers: PropTypes.func.isRequired,
onOpenGroupMemberOptions: PropTypes.func.isRequired,
}
componentWillMount() {
......@@ -51,6 +59,10 @@ class GroupMembers extends ImmutablePureComponent {
}
}
handleOpenGroupMemberOptions = (e, accountId) => {
this.props.onOpenGroupMemberOptions(e.currentTarget, accountId, this.props.groupId)
}
handleLoadMore = debounce(() => {
this.props.onExpandMembers(this.props.groupId)
}, 300, { leading: true })
......@@ -61,9 +73,10 @@ class GroupMembers extends ImmutablePureComponent {
hasMore,
group,
relationships,
dispatch,
} = this.props
const isAdmin = relationships.get('admin')
return (
<ScrollableList
scrollKey='group-members'
......@@ -73,26 +86,17 @@ class GroupMembers extends ImmutablePureComponent {
emptyMessage={<FormattedMessage id='group.members.empty' defaultMessage='This group does not has any members.' />}
>
{
accountIds && accountIds.map((id) => {
let menu = []
if (relationships.get('admin')) {
menu = [
{ text: 'Remove from group', action: () => dispatch(createRemovedAccount(group.get('id'), id)) },
{ text: 'Make administrator', action: () => dispatch(updateRole(group.get('id'), id, 'admin')) },
]
}
return (
<Account
compact
key={id}
id={id}
actionIcon='ellipsis'
onActionClick={() => true}
/>
)
})
accountIds && accountIds.map((id) => (
<Account
compact
key={id}
id={id}
actionIcon={!isAdmin ? undefined : 'ellipsis'}
onActionClick={(data, event) => {
return !isAdmin ? false : this.handleOpenGroupMemberOptions(event, id)
}}
/>
))
}
</ScrollableList>
)
......
......@@ -29,6 +29,7 @@ export function GroupCreateModal() { return import(/* webpackChunkName: "compone
export function GroupDeleteModal() { return import(/* webpackChunkName: "components/group_delete_modal" */'../../../components/modal/group_delete_modal') }
export function GroupRemovedAccountsModal() { return import(/* webpackChunkName: "components/group_removed_accounts_modal" */'../../../components/modal/group_removed_accounts_modal') }
export function GroupMembersModal() { return import(/* webpackChunkName: "components/group_members_modal" */'../../../components/modal/group_members_modal') }
export function GroupMemberOptionsPopover() { return import(/* webpackChunkName: "components/group_member_options_popover" */'../../../components/popover/group_member_options_popover') }
export function GroupOptionsPopover() { return import(/* webpackChunkName: "components/group_options_popover" */'../../../components/popover/group_options_popover') }
export function GroupMembers() { return import(/* webpackChunkName: "features/group_members" */'../../group_members') }
export function GroupRemovedAccounts() { return import(/* webpackChunkName: "features/group_removed_accounts" */'../../group_removed_accounts') }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment