Created
April 3, 2019 15:50
-
-
Save jefo/954989756179d95582127aa90e7f2177 to your computer and use it in GitHub Desktop.
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
| import * as React from 'react'; | |
| import Grid, { IGridProps } from '../Grid'; | |
| import ImgCell from '../Grid/ImgCell'; | |
| import TextCell from '../Grid/TextCell'; | |
| import LinkCell from '../Grid/LinkCell'; | |
| import { IUsersToRender } from '@src/contacts/containers/interfaces'; | |
| import UserProfilePreview from '@src/shared/UserProfilePreview'; | |
| import { ProjectRow, IProjectRowProps } from '../ProjectsGrid'; | |
| const mail = require('./assets/images/mail.svg'); | |
| const slackIcon = require('./assets/images/slackIcon.svg'); | |
| const defaultUserPick = require('./assets/images/defaultUserpic.svg'); | |
| const get = require('lodash/get'); | |
| export interface IPeopleGridItem { | |
| pk: number; | |
| icon: string; | |
| name: string; | |
| phone: string; | |
| grade: string; | |
| telegram: string; | |
| slackName: string; | |
| email: string; | |
| occupation: string; | |
| affiliate: string; | |
| } | |
| export interface IPeopleGridParent { | |
| pk: number; | |
| name: string; | |
| parentName: string; | |
| members: string[]; | |
| } | |
| export interface IPeopleGridProps extends IGridProps { | |
| items: IUsersToRender[]; | |
| parent: IProjectRowProps; | |
| returnLink: string; | |
| reset: () => void; | |
| } | |
| const filterFields = [ | |
| { placeholder: 'Имя сотрудника', name: 'name' }, | |
| { placeholder: 'Телефон', name: 'phone' }, | |
| ]; | |
| const PeopleGrid: React.FunctionComponent<IPeopleGridProps> = ({ | |
| items, | |
| parent, | |
| returnLink, | |
| ...rest | |
| }) => { | |
| React.useEffect(() => { | |
| rest.reset(); | |
| rest.load({ limit: rest.limit, offset: 0 }, true); | |
| }, [rest.limit]); | |
| const [currentUser, setCurrentUser] = React.useState(null); | |
| return ( | |
| <> | |
| {parent && <ProjectRow single {...parent} />} | |
| <Grid | |
| rounded={!!parent} | |
| filterFields={filterFields} | |
| items={items} {...rest} | |
| > | |
| {items.map((user: IUsersToRender, i) => { | |
| return ( | |
| <Grid.Row key={user.pk} onClick={() => setCurrentUser(user)}> | |
| <ImgCell | |
| width={'40px'} | |
| height={'40px'} | |
| src={user.crop128 || defaultUserPick} | |
| /> | |
| <TextCell | |
| bold | |
| content={`${user.firstName} ${user.lastName}`} | |
| caption={`${get( | |
| user, | |
| 'position.title', | |
| 'Не указана должность', | |
| )} | ${get(user, 'city.title', 'Не указан город')}`} | |
| /> | |
| <TextCell content={user.phone || 'Не указан телефон'} /> | |
| <LinkCell | |
| href={`https://skyeng.slack.com/channels/${user.slackName || | |
| ''}`} | |
| iconSrc={slackIcon} | |
| > | |
| {user.slackName} | |
| </LinkCell> | |
| <LinkCell href={`mailto:${user.email}`} iconSrc={mail}> | |
| {user.email} | |
| </LinkCell> | |
| </Grid.Row> | |
| ); | |
| })} | |
| {currentUser && ( | |
| <UserProfilePreview | |
| isOpen={!!currentUser} | |
| closeModal={() => { | |
| setCurrentUser(null); | |
| }} | |
| chosenUser={currentUser} | |
| /> | |
| )} | |
| </Grid> | |
| </> | |
| ); | |
| }; | |
| PeopleGrid.defaultProps = { | |
| limit: 7, | |
| offset: 0, | |
| }; | |
| export default PeopleGrid; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment