admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[PersonShow] use fieldDefinition for editable fields (#1178)

Browse Source 
* [PersonShow] use fieldDefinition for editable fields

* remove unused files

* fix company chip display field
This commit is contained in:
Weiko
2023-08-11 16:36:38 -07:00
committed by GitHub
parent 007e42a2e6
commit a30222fe76
16 changed files with 316 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
front/src/pages/people/PersonShow.tsx
View File

@ -4,8 +4,12 @@ import { useTheme } from '@emotion/react';
import { Timeline } from '@/activities/timeline/components/Timeline';
import { useFavorites } from '@/favorites/hooks/useFavorites';
import { PersonPropertyBox } from '@/people/components/PersonPropertyBox';
import { GET_PERSON, usePersonQuery } from '@/people/queries';
import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
import { EditableFieldDefinitionContext } from '@/ui/editable-field/states/EditableFieldDefinitionContext';
import { EditableFieldEntityIdContext } from '@/ui/editable-field/states/EditableFieldEntityIdContext';
import { EditableFieldMutationContext } from '@/ui/editable-field/states/EditableFieldMutationContext';
import { IconUser } from '@/ui/icon';
import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
@ -13,25 +17,30 @@ import { ShowPageRightContainer } from '@/ui/layout/show-page/components/ShowPag
import { ShowPageSummaryCard } from '@/ui/layout/show-page/components/ShowPageSummaryCard';
import {
CommentableType,
useUpdateOnePersonMutation,
useUploadPersonPictureMutation,
} from '~/generated/graphql';
import { PeopleFullNameEditableField } from '../../modules/people/editable-field/components/PeopleFullNameEditableField';
import { ShowPageContainer } from '../../modules/ui/layout/components/ShowPageContainer';
import { personShowFieldDefinition } from './constants/personShowFieldDefinition';
export function PersonShow() {
const personId = useParams().personId ?? '';
const { insertPersonFavorite, deletePersonFavorite } = useFavorites();
const theme = useTheme();
const { data } = usePersonQuery(personId);
const person = data?.findUniquePerson;
const isFavorite =
person?.Favorite && person?.Favorite?.length > 0 ? true : false;
const theme = useTheme();
const [uploadPicture] = useUploadPersonPictureMutation();
if (!person) return <></>;
const isFavorite =
person.Favorite && person.Favorite?.length > 0 ? true : false;
async function onUploadPicture(file: File) {
if (!file || !person?.id) {
return;
@ -39,7 +48,7 @@ export function PersonShow() {
await uploadPicture({
variables: {
file,
id: person?.id,
id: person.id,
},
refetchQueries: [getOperationName(GET_PERSON) ?? ''],
});
@ -52,7 +61,7 @@ export function PersonShow() {
return (
<WithTopBarContainer
title={person?.firstName ?? ''}
title={person.firstName ?? ''}
icon={<IconUser size={theme.icon.size.md} />}
hasBackButton
isFavorite={isFavorite}
@ -61,20 +70,37 @@ export function PersonShow() {
<ShowPageContainer>
<ShowPageLeftContainer>
<ShowPageSummaryCard
id={person?.id}
title={person?.displayName ?? 'No name'}
logoOrAvatar={person?.avatarUrl ?? undefined}
date={person?.createdAt ?? ''}
id={person.id}
title={person.displayName ?? 'No name'}
logoOrAvatar={person.avatarUrl ?? undefined}
date={person.createdAt ?? ''}
renderTitleEditComponent={() =>
person ? <PeopleFullNameEditableField people={person} /> : <></>
}
onUploadPicture={onUploadPicture}
/>
{person && <PersonPropertyBox person={person} />}
<PropertyBox extraPadding={true}>
<EditableFieldMutationContext.Provider
value={useUpdateOnePersonMutation}
>
<EditableFieldEntityIdContext.Provider value={person.id}>
{personShowFieldDefinition.map((fieldDefinition) => {
return (
<EditableFieldDefinitionContext.Provider
value={fieldDefinition}
key={fieldDefinition.id}
>
<GenericEditableField />
</EditableFieldDefinitionContext.Provider>
);
})}
</EditableFieldEntityIdContext.Provider>
</EditableFieldMutationContext.Provider>
</PropertyBox>
</ShowPageLeftContainer>
<ShowPageRightContainer>
<Timeline
entity={{ id: person?.id ?? '', type: CommentableType.Person }}
entity={{ id: person.id ?? '', type: CommentableType.Person }}
/>
</ShowPageRightContainer>
</ShowPageContainer>

69
front/src/pages/people/constants/personShowFieldDefinition.tsx Normal file
View File

@ -0,0 +1,69 @@
import { FieldDefinition } from '@/ui/editable-field/types/FieldDefinition';
import {
FieldDateMetadata,
FieldMetadata,
FieldPhoneMetadata,
FieldRelationMetadata,
FieldTextMetadata,
} from '@/ui/editable-field/types/FieldMetadata';
import {
IconBuildingSkyscraper,
IconCalendar,
IconMail,
IconMap,
IconPhone,
} from '@/ui/icon';
import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
{
id: 'email',
label: 'Email',
icon: <IconMail />,
type: 'text',
metadata: {
fieldName: 'email',
placeHolder: 'Email',
},
} satisfies FieldDefinition<FieldTextMetadata>,
{
id: 'phone',
label: 'Phone',
icon: <IconPhone />,
type: 'phone',
metadata: {
fieldName: 'phone',
placeHolder: 'Phone',
},
} satisfies FieldDefinition<FieldPhoneMetadata>,
{
id: 'createdAt',
label: 'Created at',
icon: <IconCalendar />,
type: 'date',
metadata: {
fieldName: 'createdAt',
},
} satisfies FieldDefinition<FieldDateMetadata>,
{
id: 'company',
label: 'Company',
icon: <IconBuildingSkyscraper />,
type: 'relation',
metadata: {
fieldName: 'company',
relationType: Entity.Company,
useEditButton: true,
},
} satisfies FieldDefinition<FieldRelationMetadata>,
{
id: 'city',
label: 'City',
icon: <IconMap />,
type: 'text',
metadata: {
fieldName: 'city',
placeHolder: 'City',
},
} satisfies FieldDefinition<FieldTextMetadata>,
];