<commit_before>kd    = require 'kd'
React = require 'kd-react'
ProfilePicture = require 'app/components/profile/profilepicture'
capitalizeFirstLetter = require 'app/util/capitalizefirstletter'
ButtonWithMenu = require 'app/components/buttonwithmenu'


module.exports = class Member extends React.Component

  constructor: (props) ->

    super props

    @state =
      isMenuOpen: no


  onClickMemberRole: (role, event) ->
    kd.utils.stopDOMEvent event
    @setState { isMenuOpen: yes }


  componentWillReceiveProps: (nextProps) ->

    { isMenuOpen } = nextProps

    @setState { isMenuOpen }


  getMenuItems: (role) ->

    items = []

    if role is 'owner'
      items.push { title: 'Make member', key: 'makemember', onClick: @props.handleRoleChange.bind(this, @props.member, 'member') }
    else if role is 'admin'
      items.push { title: 'Make owner', key: 'mameowner', onClick: @props.handleRoleChange.bind(this, @props.member, 'owner') }
      items.push { title: 'Make member', key: 'makemember', onClick: @props.handleRoleChange.bind(this, @props.member, 'member') }
      items.push { title: 'Disable user', key: 'disableuser', onClick: @props.handleRoleChange.bind(this, @props.member, 'kick') }
    else if role is 'Invitation Sent'
      items.push {title: 'Resend Invitation', key: 'resend', onClick: @props.handleInvitation.bind(this, @props.member, 'resend')}
      items.push {title: 'Revoke Invitation', key: 'revoke', onClick: @props.handleInvitation.bind(this, @props.member, 'revoke')}
    else
      items.push { title: 'Make owner', key: 'makemember', onClick: @props.handleRoleChange.bind(this, @props.member, 'owner') }
      items.push { title: 'Make admin', key: 'makeadmin', onClick: @props.handleRoleChange.bind(this, @props.member, 'admin') }
      items.push { title: 'Disable user', key: 'disableuser', onClick: @props.handleRoleChange.bind(this, @props.member, 'kick') }

    return items


  getData: ->

    nickname = @props.member.getIn ['profile', 'nickname']
    email = @props.member.getIn ['profile', 'email']
    role = @props.member.get 'role'
    firstName = @props.member.getIn ['profile', 'firstName']
    lastName = @props.member.getIn ['profile', 'lastName']
    fullName = "#{firstName} #{lastName}"

    if @props.member.get('status') is 'pending'
      role = 'Invitation Sent'
      firstName = @props.member.get('firstName') or ''
      lastName = @props.member.get('lastName') or ''
      fullName = @props.member.get 'email'
      email = "#{firstName} #{lastName}"
      nickname = ''

    return { nickname, email, role, firstName, lastName, fullName }


  render: ->

    { nickname, email, role, firstName, lastName, fullName } = @getData()

    <div className='kdview kdlistitemview kdlistitemview-member'>
      <div className='details'>
        <AvatarView member={@props.member} />
        <p className='fullname'>{fullName}</p>
      </div>
      <Email email={email} />
      <NickName nickname={nickname}/>
      <span onClick={@onClickMemberRole.bind(this, role)}>
        <MemberRole role={role} />
      </span>
      <div className='clear'></div>
      <ButtonWithMenu menuClassName='menu-class' items={@getMenuItems role} isMenuOpen={@state.isMenuOpen} />
    </div>


NickName = ({ nickname }) ->

  if nickname.length
    <p className='nickname'> | @{nickname}</p>
  else
    <p className='nickname'></p>

Email = ({ email }) ->

  <p className='email-js' title={email}>{email}</p>

AvatarView = ({ member }) ->

  unless member.get 'status'
    <span className='avatarview' href='#'>
      <ProfilePicture account={member.toJS()} height={40} width={40} />
      <cite className='super-admin'></cite>
    </span>
  else
    <span className='avatarview' href='#'>
      <cite className='super-admin'></cite>
    </span>


MemberRole = ({ role }) ->
  className = 'role'
  role = capitalizeFirstLetter role
  <div className={className}>
    {role}
    <span className='settings-icon'></span>
  </div><commit_msg>home/teammates: update member component for ui<commit_after>kd    = require 'kd'
React = require 'kd-react'
ProfilePicture = require 'app/components/profile/profilepicture'
capitalizeFirstLetter = require 'app/util/capitalizefirstletter'
ButtonWithMenu = require 'app/components/buttonwithmenu'


module.exports = class Member extends React.Component

  constructor: (props) ->

    super props

    @state =
      isMenuOpen: no


  onClickMemberRole: (role, event) ->

    kd.utils.stopDOMEvent event
    @setState { isMenuOpen: yes }


  componentWillReceiveProps: (nextProps) ->

    { isMenuOpen } = nextProps

    @setState { isMenuOpen }


  getMenuItems: (role) ->

    items = []

    if role is 'owner'
      items.push { title: 'Make member', key: 'makemember', onClick: @props.handleRoleChange.bind(this, @props.member, 'member') }
    else if role is 'admin'
      items.push { title: 'Make owner', key: 'mameowner', onClick: @props.handleRoleChange.bind(this, @props.member, 'owner') }
      items.push { title: 'Make member', key: 'makemember', onClick: @props.handleRoleChange.bind(this, @props.member, 'member') }
      items.push { title: 'Disable user', key: 'disableuser', onClick: @props.handleRoleChange.bind(this, @props.member, 'kick') }
    else if role is 'Invitation Sent'
      items.push {title: 'Resend Invitation', key: 'resend', onClick: @props.handleInvitation.bind(this, @props.member, 'resend')}
      items.push {title: 'Revoke Invitation', key: 'revoke', onClick: @props.handleInvitation.bind(this, @props.member, 'revoke')}
    else
      items.push { title: 'Make owner', key: 'makemember', onClick: @props.handleRoleChange.bind(this, @props.member, 'owner') }
      items.push { title: 'Make admin', key: 'makeadmin', onClick: @props.handleRoleChange.bind(this, @props.member, 'admin') }
      items.push { title: 'Disable user', key: 'disableuser', onClick: @props.handleRoleChange.bind(this, @props.member, 'kick') }

    return items


  getData: ->

    nickname = @props.member.getIn ['profile', 'nickname']
    email = @props.member.getIn ['profile', 'email']
    role = @props.member.get 'role'
    firstName = @props.member.getIn ['profile', 'firstName']
    lastName = @props.member.getIn ['profile', 'lastName']
    fullName = "#{firstName} #{lastName}"

    if @props.member.get('status') is 'pending'
      role = 'Invitation Sent'
      firstName = @props.member.get('firstName') or ''
      lastName = @props.member.get('lastName') or ''
      fullName = @props.member.get 'email'
      email = "#{firstName} #{lastName}"
      nickname = ''

    return { nickname, email, role, firstName, lastName, fullName }


  render: ->

    { nickname, email, role, firstName, lastName, fullName } = @getData()

    <div>
      <AvatarView member={@props.member} />
      <div className='details'>
        <div className='fullname'>{fullName}</div>
        <div className='metaData'>
          <Email email={email} />
          <NickName nickname={nickname}/>
        </div>
      </div>
      <div className='dropdown' onClick={@onClickMemberRole.bind(this, role)}>
        <MemberRole role={role}  />
        <ButtonWithMenu menuClassName='menu-class' items={@getMenuItems role} isMenuOpen={@state.isMenuOpen} />
      </div>
    </div>


NickName = ({ nickname }) ->

  if nickname.length
  then <span className='nickname'>@{nickname}</span>
  else <i></i>

Email = ({ email }) ->

  <span className='email-js email' title={email}>{email}</span>

AvatarView = ({ member }) ->

  unless member.get 'status'
    <div className='avatarview' href='#'>
      <ProfilePicture account={member.toJS()} height={40} width={40} />
    </div>
  else
    <div className='avatarview default' href='#'>
    </div>


MemberRole = ({ role }) ->

  role = capitalizeFirstLetter role
  <div className='role'>{role}</div>
{'fraction_non_alphanumeric': 0.16160714285714287, 'fraction_numerical': 0.0010204081632653062, 'mean_word_length': 3.653412462908012, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 85, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4823486', 'n_tokens_mistral': 2540, 'n_tokens_neox': 2445, 'n_words': 572}