akillibulut
/
coriolis-web
Mirror von https://github.com/cloudbase/coriolis-web.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
							/*
Copyright (C) 2017  Cloudbase Solutions SRL
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

// @flow

import React from 'react'
import styled from 'styled-components'
import { observer } from 'mobx-react'

import type { User } from '../../../types/User'
import Palette from '../../styleUtils/Palette'
import StyleProps from '../../styleUtils/StyleProps'

import userImage from './images/user.svg'

const Content = styled.div`
  display: flex;
  align-items: center;
  border-top: 1px solid ${Palette.grayscale[1]};
  padding: 8px 16px;
  cursor: pointer;
  flex-grow: 1;
  transition: all ${StyleProps.animations.swift};
  min-width: 785px;

  &:hover {
    background: ${Palette.grayscale[1]};
  }
`
const Wrapper = styled.div`
  display: flex;
  align-items: center;

  &:last-child ${Content} {
    border-bottom: 1px solid ${Palette.grayscale[1]};
  }
`
const Image = styled.div`
  min-width: 48px;
  height: 48px;
  background: url('${userImage}') no-repeat center;
  margin-right: 16px;
`
const Title = styled.div`
  flex-grow: 1;
  overflow: hidden;
  margin-right: 48px;
  min-width: 100px;
`
const TitleLabel = styled.div`
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
`
const Subtitle = styled.div`
  color: ${Palette.grayscale[4]};
  margin-top: 3px;
`
const ItemLabel = styled.div`
  color: ${Palette.grayscale[4]};
`
const ItemValue = styled.div`
  color: ${Palette.primary};
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`
const bodyWidth = 620
const Body = styled.div`
  ${StyleProps.exactWidth(`${bodyWidth}px`)}
  display: flex;
`
const Data = styled.div`
  ${props => StyleProps.exactWidth(`${Math.floor(bodyWidth / (100 / props.percentage)) - 68}px`)}
  margin: 0 32px;

  &:last-child {
    margin-right: 0;
  }
`

type Props = {
  item: User,
  onClick: () => void,
  getProjectName: (projectId: ?string) => string,
}
const testName = 'ulItem'
@observer
class UserListItem extends React.Component<Props> {
  render() {
    return (
      <Wrapper>
        <Content data-test-id={`${testName}-content`} onClick={this.props.onClick}>
          <Image />
          <Title>
            <TitleLabel data-test-id={`${testName}-name`}>{this.props.item.name}</TitleLabel>
            <Subtitle data-test-id={`${testName}-description`}>{this.props.item.description}</Subtitle>
          </Title>
          <Body>
            <Data percentage={45}>
              <ItemLabel>Email</ItemLabel>
              <ItemValue data-test-id={`${testName}-email`}>
                {this.props.item.email || '-'}
              </ItemValue>
            </Data>
            <Data percentage={35}>
              <ItemLabel>Primary Project</ItemLabel>
              <ItemValue data-test-id={`${testName}-project`}>
                {this.props.getProjectName(this.props.item.project_id)}
              </ItemValue>
            </Data>
            <Data percentage={20}>
              <ItemLabel>Enabled</ItemLabel>
              <ItemValue data-test-id={`${testName}-enabled`}>
                {this.props.item.enabled ? 'Yes' : 'No'}
              </ItemValue>
            </Data>
          </Body>
        </Content>
      </Wrapper>
    )
  }
}

export default UserListItem