twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-18 17:12:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add team section on company show (#1119)

Browse Source 
* Add team section on company show

Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Add requested changes

Co-authored-by: RubensRafael <rubensrafael2@live.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Fix padding

Co-authored-by: RubensRafael <rubensrafael2@live.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>

---------

Co-authored-by: RubensRafael <rubensrafael2@live.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
This commit is contained in:
gitstart-twenty 2023-08-10 05:09:01 +08:00 committed by GitHub
parent 92ecb8100a
commit 22b4bffcde
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 144 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
front/src/modules/companies/components/CompanyTeam.tsx Normal file
View File

@ -0,0 +1,74 @@
import styled from '@emotion/styled';
import { PeopleCard } from '@/people/components/PeopleCard';
import { Company, useGetPeopleQuery } from '~/generated/graphql';
export type CompanyTeamPropsType = {
company: Pick<Company, 'id'>;
};
const StyledContainer = styled.div`
align-items: flex-start;
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)};
`;
const StyledTitleContainer = styled.div`
align-items: center;
backdrop-filter: blur(5px);
color: ${({ theme }) => theme.font.color.primary};
display: flex;
justify-content: space-between;
padding-bottom: ${({ theme }) => theme.spacing(0)};
padding-left: ${({ theme }) => theme.spacing(3)};
padding-right: ${({ theme }) => theme.spacing(3)};
padding-top: ${({ theme }) => theme.spacing(3)};
`;
const StyledListContainer = styled.div`
align-items: flex-start;
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.spacing(1)};
display: flex;
flex-direction: column;
max-height: ${({ theme }) => theme.spacing(35)};
overflow: auto;
width: 100%;
`;
const StyledTitle = styled.div`
color: ${({ theme }) => theme.font.color.primary};
font-weight: ${({ theme }) => theme.font.weight.medium};
line-height: ${({ theme }) => theme.text.lineHeight.lg};
`;
export function CompanyTeam({ company }: CompanyTeamPropsType) {
const { data } = useGetPeopleQuery({
variables: {
orderBy: [],
where: {
companyId: {
equals: company.id,
},
},
},
});
return (
<>
{Boolean(data?.people?.length) && (
<StyledContainer>
<StyledTitleContainer>
<StyledTitle>Team</StyledTitle>
</StyledTitleContainer>
<StyledListContainer>
{data?.people?.map((person) => (
<PeopleCard key={person.id} person={person} />
))}
</StyledListContainer>
</StyledContainer>
)}
</>
);
}

68
front/src/modules/people/components/PeopleCard.tsx Normal file
View File

@ -0,0 +1,68 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { Avatar } from '@/users/components/Avatar';
import { Person } from '~/generated/graphql';
export type PeopleCardPropsType = {
person: Pick<Person, 'id' | 'avatarUrl' | 'displayName' | 'jobTitle'>;
};
const StyledCard = styled.div`
align-items: center;
align-self: stretch;
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
height: ${({ theme }) => theme.spacing(8)};
padding: ${({ theme }) => theme.spacing(3)};
&:hover {
background: ${({ theme }) => theme.background.tertiary};
cursor: pointer;
}
`;
const StyledCardInfo = styled.div`
align-items: flex-start;
display: flex;
flex: 1 0 0;
flex-direction: column;
`;
const StyledTitle = styled.div`
color: ${({ theme }) => theme.font.color.primary};
font-weight: ${({ theme }) => theme.font.weight.medium};
line-height: ${({ theme }) => theme.text.lineHeight.lg};
`;
const StyledJobTitle = styled.div`
border-radius: ${({ theme }) => theme.spacing(1)};
color: ${({ theme }) => theme.font.color.secondary};
padding-bottom: ${({ theme }) => theme.spacing(0.5)};
padding-left: ${({ theme }) => theme.spacing(0)};
padding-right: ${({ theme }) => theme.spacing(2)};
padding-top: ${({ theme }) => theme.spacing(0.5)};
&:hover {
background: ${({ theme }) => theme.background.tertiary};
}
`;
export function PeopleCard({ person }: PeopleCardPropsType) {
const navigate = useNavigate();
return (
<StyledCard onClick={() => navigate(`/person/${person.id}`)}>
<Avatar
size="lg"
type="rounded"
placeholder={person.displayName}
avatarUrl={person.avatarUrl}
/>
<StyledCardInfo>
<StyledTitle>{person.displayName}</StyledTitle>
<StyledJobTitle> {person.jobTitle ?? 'Add job title'}</StyledJobTitle>
</StyledCardInfo>
</StyledCard>
);
}

2
front/src/pages/companies/CompanyShow.tsx
View File

@ -2,6 +2,7 @@ import { useParams } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import { Timeline } from '@/activities/timeline/components/Timeline';
import { CompanyTeam } from '@/companies/components/CompanyTeam';
import { CompanyAccountOwnerEditableField } from '@/companies/editable-field/components/CompanyAccountOwnerEditableField';
import { CompanyAddressEditableField } from '@/companies/editable-field/components/CompanyAddressEditableField';
import { CompanyCreatedAtEditableField } from '@/companies/editable-field/components/CompanyCreatedAtEditableField';
@ -54,6 +55,7 @@ export function CompanyShow() {
<CompanyAddressEditableField company={company} />
<CompanyCreatedAtEditableField company={company} />
</PropertyBox>
<CompanyTeam company={company}></CompanyTeam>
</ShowPageLeftContainer>
<ShowPageRightContainer>
<Timeline