-
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.
[Frontend] Support assigning users to triage columns
- Loading branch information
1 parent
6bd8470
commit 2b592f1
Showing
8 changed files
with
270 additions
and
9 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
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
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,121 @@ | ||
| import { Avatar, Button, Menu, MenuItem, Theme, withStyles, WithStyles } from "@material-ui/core" | ||
| import { Person } from "@material-ui/icons" | ||
| import * as React from "react" | ||
| import { IReviewerUser } from "../../redux/modules/reviewers" | ||
|
|
||
| const styles = (theme: Theme) => ({ | ||
| button: { | ||
| backgroundColor: "transparent !important", | ||
| }, | ||
| avatar: { | ||
| marginRight: 10, | ||
| }, | ||
| menuItem: { | ||
| paddingTop: 16, | ||
| paddingBottom: 16, | ||
| }, | ||
| }) | ||
|
|
||
| export interface IProps { | ||
| assignedToUser: IReviewerUser | undefined | ||
| triagers: IReviewerUser[] | ||
| onAssign: Function | ||
| onUnassign: Function | ||
| } | ||
|
|
||
| export interface IState { | ||
| anchorEl: HTMLElement | null | ||
| } | ||
|
|
||
| type TComponentProps = IProps & WithStyles | ||
| class AssignerAvatar extends React.PureComponent<TComponentProps, IState> { | ||
| private handleOpenMenu: any | ||
| private handleChooseItem: any | ||
| private handleUnassign: any | ||
| private handleClose: any | ||
|
|
||
| public constructor(props: TComponentProps) { | ||
| super(props) | ||
|
|
||
| this.state = { | ||
| anchorEl: null, | ||
| } | ||
|
|
||
| this.handleOpenMenu = (event: React.MouseEvent<HTMLElement>) => { | ||
| this.setState({ anchorEl: event.currentTarget }) | ||
| } | ||
|
|
||
| this.handleChooseItem = (userId: number) => (event: React.MouseEvent<HTMLElement>) => { | ||
| this.props.onAssign(userId) | ||
| this.handleClose() | ||
| // console.log(this.state) | ||
| // this.setState({ anchorEl: null }) | ||
| } | ||
|
|
||
| this.handleUnassign = () => { | ||
| this.props.onUnassign() | ||
| this.handleClose() | ||
| // console.log(this.state) | ||
| // this.setState({ anchorEl: null }) | ||
| } | ||
|
|
||
| this.handleClose = () => { | ||
| this.setState({ anchorEl: null }) | ||
| } | ||
| } | ||
|
|
||
| public render() { | ||
| const { assignedToUser, triagers, classes } = this.props | ||
| const { anchorEl } = this.state | ||
|
|
||
| return ( | ||
| <React.Fragment> | ||
| {assignedToUser === undefined && ( | ||
| <Button | ||
| aria-owns={anchorEl ? "simple-menu" : undefined} | ||
| aria-haspopup="true" | ||
| className={classes.button} | ||
| onClick={this.handleOpenMenu} | ||
| > | ||
| <Avatar className={classes.avatar}> | ||
| <Person fontSize="large" /> | ||
| </Avatar> | ||
| </Button> | ||
| )} | ||
| {assignedToUser !== undefined && ( | ||
| <Button | ||
| aria-owns={anchorEl ? "simple-menu" : undefined} | ||
| aria-haspopup="true" | ||
| className={classes.button} | ||
| onClick={this.handleOpenMenu} | ||
| > | ||
| <Avatar className={classes.avatar} src={assignedToUser.profile_image_url} /> | ||
| </Button> | ||
| )} | ||
| <Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={this.handleClose}> | ||
| {triagers.map((user: IReviewerUser) => { | ||
| if (assignedToUser === undefined || assignedToUser.id !== user.id) { | ||
| return ( | ||
| <MenuItem key={user.id} className={classes.menuItem} onClick={this.handleChooseItem(user.id)}> | ||
| <Avatar className={classes.avatar} src={user.profile_image_url} /> | ||
| {user.name} | ||
| </MenuItem> | ||
| ) | ||
| } | ||
| return null | ||
| })} | ||
| {assignedToUser !== undefined && ( | ||
| <MenuItem className={classes.menuItem} onClick={this.handleUnassign}> | ||
| <Avatar className={classes.avatar}> | ||
| <Person fontSize="large" /> | ||
| </Avatar> | ||
| Unassign | ||
| </MenuItem> | ||
| )} | ||
| </Menu> | ||
| </React.Fragment> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export default withStyles(styles)(AssignerAvatar) |
53 changes: 53 additions & 0 deletions
53
frontend/src/triage/AssignerAvatar/AssignerAvatarContainer.tsx
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,53 @@ | ||
| import * as React from "react" | ||
| import { connect } from "react-redux" | ||
| import { IStore } from "../../redux/modules/reducer" | ||
| import { IReviewerUser } from "../../redux/modules/reviewers" | ||
| import AssignerAvatar from "./AssignerAvatar" | ||
|
|
||
| export interface IProps { | ||
| assignedToUser: IReviewerUser | undefined | ||
| onAssign: Function | ||
| onUnassign: Function | ||
| } | ||
|
|
||
| export interface IStoreProps { | ||
| triagers: IReviewerUser[] | ||
| } | ||
|
|
||
| export interface IDispatchProps { | ||
| onAssign: Function | ||
| onUnassign: Function | ||
| } | ||
|
|
||
| type TComponentProps = IProps & IStoreProps & IDispatchProps | ||
| class AssignerAvatarContainer extends React.PureComponent<TComponentProps, {}> { | ||
| public render() { | ||
| const { assignedToUser, triagers, onAssign, onUnassign } = this.props | ||
|
|
||
| return <AssignerAvatar assignedToUser={assignedToUser} triagers={triagers} onAssign={onAssign} onUnassign={onUnassign} /> | ||
| } | ||
| } | ||
|
|
||
| const mapStateToProps = (state: IStore, ownProps: IProps): IStoreProps => { | ||
| const { reviewers } = state | ||
|
|
||
| return { | ||
| triagers: reviewers.users, | ||
| } | ||
| } | ||
|
|
||
| const mapDispatchToProps = (dispatch: Function, ownProps: IProps): IDispatchProps => { | ||
| return { | ||
| onAssign: (userId: number) => { | ||
| ownProps.onAssign(userId) | ||
| }, | ||
| onUnassign: () => { | ||
| ownProps.onUnassign() | ||
| }, | ||
| } | ||
| } | ||
|
|
||
| export default connect<IStoreProps, IDispatchProps, IProps, IStore>( | ||
| mapStateToProps, | ||
| mapDispatchToProps | ||
| )(AssignerAvatarContainer) |
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
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
Oops, something went wrong.