From 22b4bffcde4f51ac89d5f7d129e19fe0d4614f33 Mon Sep 17 00:00:00 2001 From: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com> Date: Thu, 10 Aug 2023 05:09:01 +0800 Subject: [PATCH] feat: Add team section on company show (#1119) * Add team section on company show Co-authored-by: RubensRafael * Add requested changes Co-authored-by: RubensRafael Co-authored-by: v1b3m * Fix padding Co-authored-by: RubensRafael Co-authored-by: v1b3m --------- Co-authored-by: RubensRafael Co-authored-by: v1b3m --- .../companies/components/CompanyTeam.tsx | 74 +++++++++++++++++++ .../modules/people/components/PeopleCard.tsx | 68 +++++++++++++++++ front/src/pages/companies/CompanyShow.tsx | 2 + 3 files changed, 144 insertions(+) create mode 100644 front/src/modules/companies/components/CompanyTeam.tsx create mode 100644 front/src/modules/people/components/PeopleCard.tsx diff --git a/front/src/modules/companies/components/CompanyTeam.tsx b/front/src/modules/companies/components/CompanyTeam.tsx new file mode 100644 index 000000000..eb7e057b2 --- /dev/null +++ b/front/src/modules/companies/components/CompanyTeam.tsx @@ -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; +}; + +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) && ( + + + Team + + + {data?.people?.map((person) => ( + + ))} + + + )} + + ); +} diff --git a/front/src/modules/people/components/PeopleCard.tsx b/front/src/modules/people/components/PeopleCard.tsx new file mode 100644 index 000000000..71b38a47d --- /dev/null +++ b/front/src/modules/people/components/PeopleCard.tsx @@ -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; +}; + +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 ( + navigate(`/person/${person.id}`)}> + + + {person.displayName} + {person.jobTitle ?? 'Add job title'} + + + ); +} diff --git a/front/src/pages/companies/CompanyShow.tsx b/front/src/pages/companies/CompanyShow.tsx index 64ca1281c..147c54207 100644 --- a/front/src/pages/companies/CompanyShow.tsx +++ b/front/src/pages/companies/CompanyShow.tsx @@ -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() { +