mirror of
https://github.com/twentyhq/twenty.git
synced 2024-12-18 00:52:21 +03:00
Add profile pictures to people and fix account/workspace deletion (#984)
* Fix LinkedIn URL not redirecting to the right url * add avatars for people and seeds * Fix delete account/workspace * Add people picture on other pages * Change style of delete button * Revert modal to previous size * Fix tests
This commit is contained in:
parent
557e56492a
commit
5c376cbabb
@ -1185,6 +1185,7 @@ export type Person = {
|
||||
ActivityTarget?: Maybe<Array<ActivityTarget>>;
|
||||
_activityCount: Scalars['Int'];
|
||||
activities: Array<Activity>;
|
||||
avatarUrl?: Maybe<Scalars['String']>;
|
||||
city?: Maybe<Scalars['String']>;
|
||||
comments: Array<Comment>;
|
||||
company?: Maybe<Company>;
|
||||
@ -1204,6 +1205,7 @@ export type Person = {
|
||||
|
||||
export type PersonCreateInput = {
|
||||
ActivityTarget?: InputMaybe<ActivityTargetCreateNestedManyWithoutPersonInput>;
|
||||
avatarUrl?: InputMaybe<Scalars['String']>;
|
||||
city?: InputMaybe<Scalars['String']>;
|
||||
company?: InputMaybe<CompanyCreateNestedOneWithoutPeopleInput>;
|
||||
createdAt?: InputMaybe<Scalars['DateTime']>;
|
||||
@ -1242,6 +1244,7 @@ export type PersonOrderByRelationAggregateInput = {
|
||||
|
||||
export type PersonOrderByWithRelationInput = {
|
||||
ActivityTarget?: InputMaybe<ActivityTargetOrderByRelationAggregateInput>;
|
||||
avatarUrl?: InputMaybe<SortOrder>;
|
||||
city?: InputMaybe<SortOrder>;
|
||||
company?: InputMaybe<CompanyOrderByWithRelationInput>;
|
||||
companyId?: InputMaybe<SortOrder>;
|
||||
@ -1263,6 +1266,7 @@ export type PersonRelationFilter = {
|
||||
};
|
||||
|
||||
export enum PersonScalarFieldEnum {
|
||||
AvatarUrl = 'avatarUrl',
|
||||
City = 'city',
|
||||
CompanyId = 'companyId',
|
||||
CreatedAt = 'createdAt',
|
||||
@ -1280,6 +1284,7 @@ export enum PersonScalarFieldEnum {
|
||||
|
||||
export type PersonUpdateInput = {
|
||||
ActivityTarget?: InputMaybe<ActivityTargetUpdateManyWithoutPersonNestedInput>;
|
||||
avatarUrl?: InputMaybe<Scalars['String']>;
|
||||
city?: InputMaybe<Scalars['String']>;
|
||||
company?: InputMaybe<CompanyUpdateOneWithoutPeopleNestedInput>;
|
||||
createdAt?: InputMaybe<Scalars['DateTime']>;
|
||||
@ -1316,6 +1321,7 @@ export type PersonWhereInput = {
|
||||
ActivityTarget?: InputMaybe<ActivityTargetListRelationFilter>;
|
||||
NOT?: InputMaybe<Array<PersonWhereInput>>;
|
||||
OR?: InputMaybe<Array<PersonWhereInput>>;
|
||||
avatarUrl?: InputMaybe<StringNullableFilter>;
|
||||
city?: InputMaybe<StringNullableFilter>;
|
||||
company?: InputMaybe<CompanyRelationFilter>;
|
||||
companyId?: InputMaybe<StringNullableFilter>;
|
||||
@ -2376,7 +2382,7 @@ export type GetPeopleQueryVariables = Exact<{
|
||||
}>;
|
||||
|
||||
|
||||
export type GetPeopleQuery = { __typename?: 'Query', people: Array<{ __typename?: 'Person', id: string, phone?: string | null, email?: string | null, city?: string | null, firstName?: string | null, lastName?: string | null, displayName: string, jobTitle?: string | null, linkedinUrl?: string | null, createdAt: string, _activityCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null }> };
|
||||
export type GetPeopleQuery = { __typename?: 'Query', people: Array<{ __typename?: 'Person', id: string, phone?: string | null, email?: string | null, city?: string | null, firstName?: string | null, lastName?: string | null, displayName: string, jobTitle?: string | null, linkedinUrl?: string | null, avatarUrl?: string | null, createdAt: string, _activityCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null }> };
|
||||
|
||||
export type GetPersonPhoneByIdQueryVariables = Exact<{
|
||||
id: Scalars['String'];
|
||||
@ -2432,7 +2438,7 @@ export type GetPersonQueryVariables = Exact<{
|
||||
}>;
|
||||
|
||||
|
||||
export type GetPersonQuery = { __typename?: 'Query', findUniquePerson: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string, email?: string | null, createdAt: string, city?: string | null, jobTitle?: string | null, linkedinUrl?: string | null, phone?: string | null, _activityCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null } };
|
||||
export type GetPersonQuery = { __typename?: 'Query', findUniquePerson: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string, email?: string | null, createdAt: string, city?: string | null, jobTitle?: string | null, linkedinUrl?: string | null, avatarUrl?: string | null, phone?: string | null, _activityCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null } };
|
||||
|
||||
export type UpdateOnePersonMutationVariables = Exact<{
|
||||
where: PersonWhereUniqueInput;
|
||||
@ -2469,7 +2475,7 @@ export type GetPipelineProgressQueryVariables = Exact<{
|
||||
}>;
|
||||
|
||||
|
||||
export type GetPipelineProgressQuery = { __typename?: 'Query', findManyPipelineProgress: Array<{ __typename?: 'PipelineProgress', id: string, pipelineStageId: string, progressableType: PipelineProgressableType, progressableId: string, amount?: number | null, closeDate?: string | null, pointOfContactId?: string | null, probability?: number | null, pointOfContact?: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string } | null }> };
|
||||
export type GetPipelineProgressQuery = { __typename?: 'Query', findManyPipelineProgress: Array<{ __typename?: 'PipelineProgress', id: string, pipelineStageId: string, progressableType: PipelineProgressableType, progressableId: string, amount?: number | null, closeDate?: string | null, pointOfContactId?: string | null, probability?: number | null, pointOfContact?: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string, avatarUrl?: string | null } | null }> };
|
||||
|
||||
export type UpdateOnePipelineProgressMutationVariables = Exact<{
|
||||
id?: InputMaybe<Scalars['String']>;
|
||||
@ -2523,7 +2529,7 @@ export type SearchPeopleQueryVariables = Exact<{
|
||||
}>;
|
||||
|
||||
|
||||
export type SearchPeopleQuery = { __typename?: 'Query', searchResults: Array<{ __typename?: 'Person', id: string, phone?: string | null, email?: string | null, city?: string | null, firstName?: string | null, lastName?: string | null, displayName: string, createdAt: string }> };
|
||||
export type SearchPeopleQuery = { __typename?: 'Query', searchResults: Array<{ __typename?: 'Person', id: string, phone?: string | null, email?: string | null, city?: string | null, firstName?: string | null, lastName?: string | null, displayName: string, avatarUrl?: string | null, createdAt: string }> };
|
||||
|
||||
export type SearchUserQueryVariables = Exact<{
|
||||
where?: InputMaybe<UserWhereInput>;
|
||||
@ -3617,6 +3623,7 @@ export const GetPeopleDocument = gql`
|
||||
displayName
|
||||
jobTitle
|
||||
linkedinUrl
|
||||
avatarUrl
|
||||
createdAt
|
||||
_activityCount
|
||||
company {
|
||||
@ -3928,6 +3935,7 @@ export const GetPersonDocument = gql`
|
||||
city
|
||||
jobTitle
|
||||
linkedinUrl
|
||||
avatarUrl
|
||||
phone
|
||||
_activityCount
|
||||
company {
|
||||
@ -4152,6 +4160,7 @@ export const GetPipelineProgressDocument = gql`
|
||||
firstName
|
||||
lastName
|
||||
displayName
|
||||
avatarUrl
|
||||
}
|
||||
probability
|
||||
}
|
||||
@ -4383,6 +4392,7 @@ export const SearchPeopleDocument = gql`
|
||||
firstName
|
||||
lastName
|
||||
displayName
|
||||
avatarUrl
|
||||
createdAt
|
||||
}
|
||||
}
|
||||
|
@ -216,7 +216,12 @@ export function ActivityRelationPicker({ activity }: OwnProps) {
|
||||
pictureUrl={entity.avatarUrl}
|
||||
/>
|
||||
) : (
|
||||
<PersonChip key={entity.id} name={entity.name} id={entity.id} />
|
||||
<PersonChip
|
||||
key={entity.id}
|
||||
name={entity.name}
|
||||
id={entity.id}
|
||||
pictureUrl={entity.avatarUrl ?? ''}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
</StyledRelationContainer>
|
||||
|
@ -10,7 +10,12 @@ type OwnProps = {
|
||||
| Partial<
|
||||
Pick<
|
||||
Person,
|
||||
'id' | 'firstName' | 'lastName' | 'displayName' | '_activityCount'
|
||||
| 'id'
|
||||
| 'firstName'
|
||||
| 'lastName'
|
||||
| 'displayName'
|
||||
| 'avatarUrl'
|
||||
| '_activityCount'
|
||||
>
|
||||
>
|
||||
| null
|
||||
@ -44,6 +49,7 @@ export function EditablePeopleFullName({
|
||||
<PersonChip
|
||||
name={`${person?.firstName ?? ''} ${person?.lastName ?? ''}`}
|
||||
id={person?.id ?? ''}
|
||||
pictureUrl={person?.avatarUrl ?? ''}
|
||||
/>
|
||||
</NoEditModeContainer>
|
||||
}
|
||||
|
@ -108,6 +108,7 @@ export function useSetPeopleEntityTable() {
|
||||
lastName: person.lastName ?? null,
|
||||
commentCount: person._activityCount,
|
||||
displayName: person.displayName ?? null,
|
||||
avatarUrl: person.avatarUrl ?? null,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -30,6 +30,7 @@ export const GET_PEOPLE = gql`
|
||||
displayName
|
||||
jobTitle
|
||||
linkedinUrl
|
||||
avatarUrl
|
||||
createdAt
|
||||
_activityCount
|
||||
company {
|
||||
@ -69,6 +70,7 @@ export function useFilteredSearchPeopleQuery({
|
||||
id: entity.id,
|
||||
entityType: CommentableType.Person,
|
||||
name: `${entity.firstName} ${entity.lastName}`,
|
||||
avatarUrl: entity.avatarUrl,
|
||||
avatarType: 'rounded',
|
||||
} as CommentableEntityForSelect),
|
||||
searchFilter,
|
||||
|
@ -14,6 +14,7 @@ export const GET_PERSON = gql`
|
||||
city
|
||||
jobTitle
|
||||
linkedinUrl
|
||||
avatarUrl
|
||||
phone
|
||||
_activityCount
|
||||
company {
|
||||
|
@ -6,6 +6,7 @@ export const peopleNameCellFamilyState = atomFamily<
|
||||
lastName: string | null;
|
||||
commentCount: number | null;
|
||||
displayName: string | null;
|
||||
avatarUrl: string | null;
|
||||
},
|
||||
string
|
||||
>({
|
||||
@ -15,5 +16,6 @@ export const peopleNameCellFamilyState = atomFamily<
|
||||
lastName: null,
|
||||
commentCount: null,
|
||||
displayName: null,
|
||||
avatarUrl: null,
|
||||
},
|
||||
});
|
||||
|
@ -13,9 +13,8 @@ export function EditablePeopleFullNameCell() {
|
||||
|
||||
const [updatePerson] = useUpdateOnePersonMutation();
|
||||
|
||||
const { commentCount, firstName, lastName, displayName } = useRecoilValue(
|
||||
peopleNameCellFamilyState(currentRowEntityId ?? ''),
|
||||
);
|
||||
const { commentCount, firstName, lastName, displayName, avatarUrl } =
|
||||
useRecoilValue(peopleNameCellFamilyState(currentRowEntityId ?? ''));
|
||||
|
||||
return (
|
||||
<EditablePeopleFullName
|
||||
@ -25,6 +24,7 @@ export function EditablePeopleFullNameCell() {
|
||||
firstName,
|
||||
lastName,
|
||||
displayName: displayName ?? undefined,
|
||||
avatarUrl: avatarUrl,
|
||||
}}
|
||||
onSubmit={(newFirstValue, newSecondValue) =>
|
||||
updatePerson({
|
||||
|
@ -10,7 +10,7 @@ import { PipelineProgressPointOfContactPickerFieldEditMode } from './PipelinePro
|
||||
|
||||
type OwnProps = {
|
||||
pipelineProgress: Pick<PipelineProgress, 'id' | 'pointOfContactId'> & {
|
||||
pointOfContact?: Pick<Person, 'id' | 'displayName'> | null;
|
||||
pointOfContact?: Pick<Person, 'id' | 'displayName' | 'avatarUrl'> | null;
|
||||
};
|
||||
};
|
||||
|
||||
@ -36,6 +36,9 @@ export function PipelineProgressPointOfContactEditableField({
|
||||
<PersonChip
|
||||
id={pipelineProgress.pointOfContact.id}
|
||||
name={pipelineProgress.pointOfContact.displayName}
|
||||
pictureUrl={
|
||||
pipelineProgress.pointOfContact.avatarUrl ?? undefined
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<></>
|
||||
|
@ -43,6 +43,7 @@ export const GET_PIPELINE_PROGRESS = gql`
|
||||
firstName
|
||||
lastName
|
||||
displayName
|
||||
avatarUrl
|
||||
}
|
||||
probability
|
||||
}
|
||||
|
@ -52,17 +52,6 @@ export function SettingsNavbar() {
|
||||
}
|
||||
/>
|
||||
<NavTitle label="Workspace" />
|
||||
<NavItem
|
||||
label="Members"
|
||||
to="/settings/workspace-members"
|
||||
icon={<IconUsers size={theme.icon.size.md} />}
|
||||
active={
|
||||
!!useMatch({
|
||||
path: useResolvedPath('/settings/workspace-members').pathname,
|
||||
end: true,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<NavItem
|
||||
label="General"
|
||||
to="/settings/workspace"
|
||||
@ -74,6 +63,17 @@ export function SettingsNavbar() {
|
||||
})
|
||||
}
|
||||
/>
|
||||
<NavItem
|
||||
label="Members"
|
||||
to="/settings/workspace-members"
|
||||
icon={<IconUsers size={theme.icon.size.md} />}
|
||||
active={
|
||||
!!useMatch({
|
||||
path: useResolvedPath('/settings/workspace-members').pathname,
|
||||
end: true,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<NavTitle label="Other" />
|
||||
<NavItem
|
||||
label="Logout"
|
||||
|
@ -0,0 +1,58 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { useAuth } from '@/auth/hooks/useAuth';
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import { ButtonVariant } from '@/ui/button/components/Button';
|
||||
import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
|
||||
import { useDeleteUserAccountMutation } from '~/generated/graphql';
|
||||
|
||||
import { DeleteModal, StyledDeleteButton } from './DeleteModal';
|
||||
|
||||
export function DeleteAccount() {
|
||||
const [isDeleteAccountModalOpen, setIsDeleteAccountModalOpen] =
|
||||
useState(false);
|
||||
|
||||
const [deleteUserAccount] = useDeleteUserAccountMutation();
|
||||
const { signOut } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleLogout = useCallback(() => {
|
||||
signOut();
|
||||
navigate(AppPath.SignIn);
|
||||
}, [signOut, navigate]);
|
||||
|
||||
const deleteAccount = async () => {
|
||||
await deleteUserAccount();
|
||||
handleLogout();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SubSectionTitle
|
||||
title="Danger zone"
|
||||
description="Delete account and all the associated data"
|
||||
/>
|
||||
|
||||
<StyledDeleteButton
|
||||
onClick={() => setIsDeleteAccountModalOpen(true)}
|
||||
variant={ButtonVariant.Secondary}
|
||||
title="Delete account"
|
||||
/>
|
||||
|
||||
<DeleteModal
|
||||
isOpen={isDeleteAccountModalOpen}
|
||||
setIsOpen={setIsDeleteAccountModalOpen}
|
||||
title="Account Deletion"
|
||||
subtitle={
|
||||
<>
|
||||
This action cannot be undone. This will permanently delete your
|
||||
entire account. <br /> Please type in your email to confirm.
|
||||
</>
|
||||
}
|
||||
handleConfirmDelete={deleteAccount}
|
||||
deleteButtonText="Delete account"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
import { useState } from 'react';
|
||||
import { ReactNode, useState } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { AnimatePresence, LayoutGroup } from 'framer-motion';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
@ -12,7 +12,7 @@ import { debounce } from '~/utils/debounce';
|
||||
interface DeleteModalProps {
|
||||
isOpen: boolean;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
subtitle: ReactNode;
|
||||
setIsOpen: (val: boolean) => void;
|
||||
handleConfirmDelete: () => void;
|
||||
deleteButtonText?: string;
|
||||
@ -23,6 +23,10 @@ const StyledTitle = styled.div`
|
||||
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
`;
|
||||
|
||||
const StyledSubtitle = styled.div`
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const StyledModal = styled(Modal)`
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
> * + * {
|
||||
@ -70,22 +74,18 @@ export function DeleteModal({
|
||||
250,
|
||||
);
|
||||
|
||||
const errorMessage =
|
||||
email && !isValidEmail ? 'email provided is not correct' : '';
|
||||
|
||||
return (
|
||||
<AnimatePresence mode="wait">
|
||||
<LayoutGroup>
|
||||
<StyledModal isOpen={isOpen}>
|
||||
<StyledModal isOpen={isOpen} onOutsideClick={() => setIsOpen(!isOpen)}>
|
||||
<StyledTitle>{title}</StyledTitle>
|
||||
<div>{subtitle}</div>
|
||||
<StyledSubtitle>{subtitle}</StyledSubtitle>
|
||||
<TextInput
|
||||
value={email}
|
||||
onChange={handleEmailChange}
|
||||
placeholder={userEmail}
|
||||
fullWidth
|
||||
key={'email-' + userEmail}
|
||||
error={errorMessage}
|
||||
/>
|
||||
<StyledDeleteButton
|
||||
onClick={handleConfirmDelete}
|
||||
|
@ -5,21 +5,15 @@ import { useAuth } from '@/auth/hooks/useAuth';
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import { ButtonVariant } from '@/ui/button/components/Button';
|
||||
import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
|
||||
import {
|
||||
useDeleteCurrentWorkspaceMutation,
|
||||
useDeleteUserAccountMutation,
|
||||
} from '~/generated/graphql';
|
||||
import { useDeleteCurrentWorkspaceMutation } from '~/generated/graphql';
|
||||
|
||||
import { DeleteModal, StyledDeleteButton } from './DeleteModal';
|
||||
|
||||
export function DeleteWorkspace() {
|
||||
const [isDeleteWorkSpaceModalOpen, setIsDeleteWorkSpaceModalOpen] =
|
||||
useState(false);
|
||||
const [isDeleteAccountModalOpen, setIsDeleteAccountModalOpen] =
|
||||
useState(false);
|
||||
|
||||
const [deleteCurrentWorkspace] = useDeleteCurrentWorkspaceMutation();
|
||||
const [deleteUserAccount] = useDeleteUserAccountMutation();
|
||||
const { signOut } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
@ -33,16 +27,6 @@ export function DeleteWorkspace() {
|
||||
handleLogout();
|
||||
};
|
||||
|
||||
const deleteAccount = async () => {
|
||||
await deleteUserAccount();
|
||||
handleLogout();
|
||||
};
|
||||
|
||||
const subtitle = (
|
||||
type: 'workspace' | 'account',
|
||||
) => `This action cannot be undone. This will permanently delete your
|
||||
entire ${type}. Please type in your email to confirm.`;
|
||||
|
||||
return (
|
||||
<>
|
||||
<SubSectionTitle
|
||||
@ -55,33 +39,19 @@ export function DeleteWorkspace() {
|
||||
title="Delete workspace"
|
||||
/>
|
||||
|
||||
<SubSectionTitle
|
||||
title=""
|
||||
description="Delete account and all the associated data"
|
||||
/>
|
||||
<StyledDeleteButton
|
||||
onClick={() => setIsDeleteAccountModalOpen(true)}
|
||||
variant={ButtonVariant.Secondary}
|
||||
title="Delete account"
|
||||
/>
|
||||
|
||||
<DeleteModal
|
||||
isOpen={isDeleteWorkSpaceModalOpen}
|
||||
setIsOpen={setIsDeleteWorkSpaceModalOpen}
|
||||
title="Workspace Deletion"
|
||||
subtitle={subtitle('workspace')}
|
||||
subtitle={
|
||||
<>
|
||||
This action cannot be undone. This will permanently delete your
|
||||
entire workspace. <br /> Please type in your email to confirm.
|
||||
</>
|
||||
}
|
||||
handleConfirmDelete={deleteWorkspace}
|
||||
deleteButtonText="Delete workspace"
|
||||
/>
|
||||
|
||||
<DeleteModal
|
||||
isOpen={isDeleteAccountModalOpen}
|
||||
setIsOpen={setIsDeleteAccountModalOpen}
|
||||
title="Account Deletion"
|
||||
subtitle={subtitle('account')}
|
||||
handleConfirmDelete={deleteAccount}
|
||||
deleteButtonText="Delete account"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -22,7 +22,7 @@ const StyledShowPageSummaryCard = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${({ theme }) => theme.spacing(6)};
|
||||
gap: ${({ theme }) => theme.spacing(3)};
|
||||
justify-content: center;
|
||||
padding: ${({ theme }) => theme.spacing(6)} ${({ theme }) => theme.spacing(3)}
|
||||
${({ theme }) => theme.spacing(3)} ${({ theme }) => theme.spacing(3)};
|
||||
|
@ -1,7 +1,12 @@
|
||||
import React from 'react';
|
||||
import React, { useRef } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
import {
|
||||
ClickOutsideMode,
|
||||
useListenClickOutside,
|
||||
} from '@/ui/hooks/useListenClickOutside';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@ -32,6 +37,7 @@ const BackDrop = styled(motion.div)`
|
||||
type Props = React.PropsWithChildren &
|
||||
React.ComponentProps<'div'> & {
|
||||
isOpen?: boolean;
|
||||
onOutsideClick?: () => void;
|
||||
};
|
||||
|
||||
const modalVariants = {
|
||||
@ -40,24 +46,36 @@ const modalVariants = {
|
||||
exit: { opacity: 0 },
|
||||
};
|
||||
|
||||
export function Modal({ isOpen = false, children, ...restProps }: Props) {
|
||||
export function Modal({
|
||||
isOpen = false,
|
||||
children,
|
||||
onOutsideClick,
|
||||
...restProps
|
||||
}: Props) {
|
||||
const modalRef = useRef(null);
|
||||
|
||||
useListenClickOutside({
|
||||
refs: [modalRef],
|
||||
callback: () => onOutsideClick?.(),
|
||||
mode: ClickOutsideMode.absolute,
|
||||
});
|
||||
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<BackDrop>
|
||||
<ModalDiv
|
||||
layout
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
variants={modalVariants}
|
||||
>
|
||||
<StyledContainer {...restProps}>{children}</StyledContainer>
|
||||
</ModalDiv>
|
||||
</BackDrop>
|
||||
</>
|
||||
<BackDrop>
|
||||
<ModalDiv
|
||||
layout
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
variants={modalVariants}
|
||||
ref={modalRef}
|
||||
>
|
||||
<StyledContainer {...restProps}>{children}</StyledContainer>
|
||||
</ModalDiv>
|
||||
</BackDrop>
|
||||
);
|
||||
}
|
||||
|
@ -36,10 +36,7 @@ export function EditableCellURL({
|
||||
loading ? (
|
||||
<CellSkeleton />
|
||||
) : (
|
||||
<RawLink
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
href={url ? 'https://' + url : ''}
|
||||
>
|
||||
<RawLink onClick={(e) => e.stopPropagation()} href={url ?? ''}>
|
||||
{url}
|
||||
</RawLink>
|
||||
)
|
||||
|
@ -33,6 +33,7 @@ export function PersonShow() {
|
||||
<ShowPageSummaryCard
|
||||
id={person?.id}
|
||||
title={person?.displayName ?? 'No name'}
|
||||
logoOrAvatar={person?.avatarUrl ?? undefined}
|
||||
date={person?.createdAt ?? ''}
|
||||
renderTitleEditComponent={() =>
|
||||
person ? <PeopleFullNameEditableField people={person} /> : <></>
|
||||
|
@ -1,6 +1,6 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace';
|
||||
import { DeleteAccount } from '@/settings/profile/components/DeleteAccount';
|
||||
import { EmailField } from '@/settings/profile/components/EmailField';
|
||||
import { NameFields } from '@/settings/profile/components/NameFields';
|
||||
import { ProfilePictureUploader } from '@/settings/profile/components/ProfilePictureUploader';
|
||||
@ -52,7 +52,7 @@ export function SettingsProfile() {
|
||||
</StyledSectionContainer>
|
||||
|
||||
<StyledSectionContainer>
|
||||
<DeleteWorkspace />
|
||||
<DeleteAccount />
|
||||
</StyledSectionContainer>
|
||||
</StyledContainer>
|
||||
</>
|
||||
|
@ -1,5 +1,6 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace';
|
||||
import { NameField } from '@/settings/workspace/components/NameField';
|
||||
import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
|
||||
import { IconSettings } from '@/ui/icon';
|
||||
@ -40,6 +41,10 @@ export function SettingsWorksapce() {
|
||||
/>
|
||||
<NameField />
|
||||
</StyledSectionContainer>
|
||||
|
||||
<StyledSectionContainer>
|
||||
<DeleteWorkspace />
|
||||
</StyledSectionContainer>
|
||||
</StyledContainer>
|
||||
</div>
|
||||
</SubMenuTopBarContainer>
|
||||
|
@ -17,6 +17,7 @@ type MockedPerson = RequiredAndNotNull<
|
||||
| '__typename'
|
||||
| 'phone'
|
||||
| 'city'
|
||||
| 'avatarUrl'
|
||||
| '_activityCount'
|
||||
| 'createdAt'
|
||||
> & {
|
||||
@ -33,6 +34,8 @@ export const mockedPeopleData: MockedPerson[] = [
|
||||
displayName: 'Alexandre Prot',
|
||||
email: 'alexandre@qonto.com',
|
||||
linkedinUrl: 'https://www.linkedin.com/in/alexandreprot/',
|
||||
avatarUrl:
|
||||
'data:image/jpeg;base64,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',
|
||||
jobTitle: 'CEO',
|
||||
company: {
|
||||
id: '5c21e19e-e049-4393-8c09-3e3f8fb09ecb',
|
||||
@ -53,6 +56,7 @@ export const mockedPeopleData: MockedPerson[] = [
|
||||
lastName: 'Doe',
|
||||
displayName: 'John Doe',
|
||||
linkedinUrl: 'https://www.linkedin.com/in/johndoe/',
|
||||
avatarUrl: '',
|
||||
jobTitle: 'CTO',
|
||||
email: 'john@linkedin.com',
|
||||
company: {
|
||||
@ -74,6 +78,7 @@ export const mockedPeopleData: MockedPerson[] = [
|
||||
lastName: 'Doe',
|
||||
displayName: 'Jane Doe',
|
||||
linkedinUrl: 'https://www.linkedin.com/in/janedoe/',
|
||||
avatarUrl: '',
|
||||
jobTitle: 'Investor',
|
||||
email: 'jane@sequoiacap.com',
|
||||
company: {
|
||||
@ -96,6 +101,7 @@ export const mockedPeopleData: MockedPerson[] = [
|
||||
displayName: 'Janice Dane',
|
||||
email: 'janice@facebook.com',
|
||||
linkedinUrl: 'https://www.linkedin.com/in/janicedane/',
|
||||
avatarUrl: '',
|
||||
jobTitle: 'CEO',
|
||||
company: {
|
||||
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6i',
|
||||
|
File diff suppressed because one or more lines are too long
@ -0,0 +1,2 @@
|
||||
-- AlterTable
|
||||
ALTER TABLE "people" ADD COLUMN "avatarUrl" TEXT;
|
@ -266,6 +266,9 @@ model Person {
|
||||
/// @Validator.IsString()
|
||||
/// @Validator.IsOptional()
|
||||
city String?
|
||||
/// @Validator.IsString()
|
||||
/// @Validator.IsOptional()
|
||||
avatarUrl String?
|
||||
|
||||
company Company? @relation(fields: [companyId], references: [id])
|
||||
companyId String?
|
||||
|
Loading…
Reference in New Issue
Block a user