diff --git a/front/src/modules/companies/components/CompanyPicker.tsx b/front/src/modules/companies/components/CompanyPicker.tsx new file mode 100644 index 0000000000..102e71f9b2 --- /dev/null +++ b/front/src/modules/companies/components/CompanyPicker.tsx @@ -0,0 +1,41 @@ +import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect'; +import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState'; +import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; + +import { useFilteredSearchCompanyQuery } from '../queries'; + +export type OwnProps = { + companyId: string | null; + onSubmit: (newCompanyId: EntityForSelect | null) => void; + onCancel?: () => void; +}; + +export function CompanyPicker({ companyId, onSubmit, onCancel }: OwnProps) { + const [searchFilter] = useRecoilScopedState( + relationPickerSearchFilterScopedState, + ); + + const companies = useFilteredSearchCompanyQuery({ + searchFilter, + selectedIds: companyId ? [companyId] : [], + }); + + async function handleEntitySelected( + selectedCompany: EntityForSelect | null | undefined, + ) { + onSubmit(selectedCompany ?? null); + } + + return ( + + ); +} diff --git a/front/src/modules/people/components/PeopleCompanyPicker.tsx b/front/src/modules/people/components/PeopleCompanyPicker.tsx deleted file mode 100644 index b61c88405b..0000000000 --- a/front/src/modules/people/components/PeopleCompanyPicker.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { useFilteredSearchCompanyQuery } from '@/companies/queries'; -import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect'; -import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState'; -import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect'; -import { useEditableCell } from '@/ui/table/editable-cell/hooks/useEditableCell'; -import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState'; -import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope'; -import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; -import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; -import { - Company, - Person, - useUpdateOnePersonMutation, -} from '~/generated/graphql'; - -export type OwnProps = { - people: Pick & { company?: Pick | null }; -}; - -export function PeopleCompanyPicker({ people }: OwnProps) { - const [, setIsCreating] = useRecoilScopedState(isCreateModeScopedState); - - const [searchFilter] = useRecoilScopedState( - relationPickerSearchFilterScopedState, - ); - const [updatePerson] = useUpdateOnePersonMutation(); - - const { closeEditableCell } = useEditableCell(); - - const addToScopeStack = useSetHotkeyScope(); - - const companies = useFilteredSearchCompanyQuery({ - searchFilter, - selectedIds: people.company?.id ? [people.company.id] : [], - }); - - async function handleEntitySelected( - entity: EntityForSelect | null | undefined, - ) { - if (entity) { - await updatePerson({ - variables: { - where: { - id: people.id, - }, - data: { - company: { connect: { id: entity.id } }, - }, - }, - }); - } - - closeEditableCell(); - } - - function handleCreate() { - setIsCreating(true); - addToScopeStack(TableHotkeyScope.CellDoubleTextInput); - } - - return ( - closeEditableCell()} - onEntitySelected={handleEntitySelected} - entities={{ - entitiesToSelect: companies.entitiesToSelect, - selectedEntity: companies.selectedEntities[0], - loading: companies.loading, - }} - /> - ); -} diff --git a/front/src/modules/people/components/PersonPropertyBox.tsx b/front/src/modules/people/components/PersonPropertyBox.tsx deleted file mode 100644 index 841758b382..0000000000 --- a/front/src/modules/people/components/PersonPropertyBox.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import { - IconCalendar, - IconMail, - IconMap, - IconPhone, -} from '@tabler/icons-react'; - -import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox'; -import { DateEditableField } from '@/ui/editable-field/variants/components/DateEditableField'; -import { PhoneEditableField } from '@/ui/editable-field/variants/components/PhoneEditableField'; -import { TextEditableField } from '@/ui/editable-field/variants/components/TextEditableField'; -import { - Company, - Person, - useUpdateOnePersonMutation, -} from '~/generated/graphql'; - -import { PeopleCompanyEditableField } from '../editable-field/components/PeopleCompanyEditableField'; - -type OwnProps = { - person: Pick< - Person, - 'id' | 'city' | 'email' | 'displayName' | 'phone' | 'createdAt' - > & { - company?: Pick | null; - }; -}; - -export function PersonPropertyBox({ person }: OwnProps) { - const [updatePerson] = useUpdateOnePersonMutation(); - - return ( - - } - placeholder={'Email'} - onSubmit={(newEmail) => { - updatePerson({ - variables: { - where: { - id: person.id, - }, - data: { - email: newEmail, - }, - }, - }); - }} - /> - } - placeholder={'Phone'} - onSubmit={(newPhone) => { - updatePerson({ - variables: { - where: { - id: person.id, - }, - data: { - phone: newPhone, - }, - }, - }); - }} - /> - } - onSubmit={(newDate) => { - updatePerson({ - variables: { - where: { - id: person.id, - }, - data: { - createdAt: newDate, - }, - }, - }); - }} - /> - - } - placeholder={'City'} - onSubmit={(newCity) => { - updatePerson({ - variables: { - where: { - id: person.id, - }, - data: { - city: newCity, - }, - }, - }); - }} - /> - - ); -} diff --git a/front/src/modules/people/components/__stories__/PeopleCompanyEditableField.stories.tsx b/front/src/modules/people/components/__stories__/PeopleCompanyEditableField.stories.tsx deleted file mode 100644 index 6ecc78aae9..0000000000 --- a/front/src/modules/people/components/__stories__/PeopleCompanyEditableField.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { BrowserRouter } from 'react-router-dom'; -import type { Meta, StoryObj } from '@storybook/react'; - -import { mockedPeopleData } from '~/testing/mock-data/people'; - -import { PeopleCompanyEditableField } from '../../editable-field/components/PeopleCompanyEditableField'; - -const meta: Meta = { - title: 'Modules/People/EditableFields/PeopleCompanyEditableField', - component: PeopleCompanyEditableField, -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - render: () => ( - - - - ), -}; diff --git a/front/src/modules/people/editable-field/components/PeopleCompanyEditableField.tsx b/front/src/modules/people/editable-field/components/PeopleCompanyEditableField.tsx deleted file mode 100644 index 70d3eb2570..0000000000 --- a/front/src/modules/people/editable-field/components/PeopleCompanyEditableField.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { IconBuildingSkyscraper } from '@tabler/icons-react'; - -import { CompanyChip } from '@/companies/components/CompanyChip'; -import { EditableField } from '@/ui/editable-field/components/EditableField'; -import { FieldContext } from '@/ui/editable-field/states/FieldContext'; -import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope'; -import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; -import { Company, Person } from '~/generated/graphql'; -import { getLogoUrlFromDomainName } from '~/utils'; - -import { PeopleCompanyEditableFieldEditMode } from './PeopleCompanyEditableFieldEditMode'; - -export type OwnProps = { - people: Pick & { - company?: Pick | null; - }; -}; - -export function PeopleCompanyEditableField({ people }: OwnProps) { - return ( - - - } - editModeContent={ - - } - displayModeContent={ - people.company ? ( - - ) : ( - <> - ) - } - isDisplayModeContentEmpty={!people.company} - isDisplayModeFixHeight - /> - - - ); -} diff --git a/front/src/modules/people/editable-field/components/PeopleCompanyEditableFieldEditMode.tsx b/front/src/modules/people/editable-field/components/PeopleCompanyEditableFieldEditMode.tsx deleted file mode 100644 index 01f790a4c3..0000000000 --- a/front/src/modules/people/editable-field/components/PeopleCompanyEditableFieldEditMode.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import styled from '@emotion/styled'; - -import { useFilteredSearchCompanyQuery } from '@/companies/queries'; -import { useEditableField } from '@/ui/editable-field/hooks/useEditableField'; -import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect'; -import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState'; -import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect'; -import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; -import { - Company, - Person, - useUpdateOnePersonMutation, -} from '~/generated/graphql'; - -export type OwnProps = { - people: Pick & { company?: Pick | null }; -}; - -const StyledContainer = styled.div` - left: 0px; - position: absolute; - top: -8px; -`; - -export function PeopleCompanyEditableFieldEditMode({ people }: OwnProps) { - const { closeEditableField } = useEditableField(); - - const [searchFilter] = useRecoilScopedState( - relationPickerSearchFilterScopedState, - ); - const [updatePerson] = useUpdateOnePersonMutation(); - - const companies = useFilteredSearchCompanyQuery({ - searchFilter, - selectedIds: people.company?.id ? [people.company.id] : [], - }); - - async function handleEntitySelected( - entity: EntityForSelect | null | undefined, - ) { - if (entity) { - await updatePerson({ - variables: { - where: { - id: people.id, - }, - data: { - company: { connect: { id: entity.id } }, - }, - }, - }); - } - - closeEditableField(); - } - - function handleCancel() { - closeEditableField(); - } - - return ( - - - - ); -} diff --git a/front/src/modules/people/queries/show.ts b/front/src/modules/people/queries/show.ts index 26c1ae3c49..07096f96d4 100644 --- a/front/src/modules/people/queries/show.ts +++ b/front/src/modules/people/queries/show.ts @@ -1,5 +1,7 @@ import { gql } from '@apollo/client'; +import { useSetRecoilState } from 'recoil'; +import { genericEntitiesFamilyState } from '@/ui/editable-field/states/genericEntitiesFamilyState'; import { useGetPersonQuery } from '~/generated/graphql'; export const GET_PERSON = gql` @@ -37,5 +39,13 @@ export const GET_PERSON = gql` `; export function usePersonQuery(id: string) { - return useGetPersonQuery({ variables: { id } }); + const updatePersonShowPage = useSetRecoilState( + genericEntitiesFamilyState(id), + ); + return useGetPersonQuery({ + variables: { id }, + onCompleted: (data) => { + updatePersonShowPage(data?.findUniquePerson); + }, + }); } diff --git a/front/src/modules/ui/editable-field/components/GenericEditableField.tsx b/front/src/modules/ui/editable-field/components/GenericEditableField.tsx index 7c6a40b42c..501b1ddf7f 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableField.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableField.tsx @@ -3,6 +3,7 @@ import { useContext } from 'react'; import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; import { isFieldDate } from '../types/guards/isFieldDate'; import { isFieldNumber } from '../types/guards/isFieldNumber'; +import { isFieldPhone } from '../types/guards/isFieldPhone'; import { isFieldProbability } from '../types/guards/isFieldProbability'; import { isFieldRelation } from '../types/guards/isFieldRelation'; import { isFieldText } from '../types/guards/isFieldText'; @@ -10,6 +11,7 @@ import { isFieldURL } from '../types/guards/isFieldURL'; import { GenericEditableDateField } from './GenericEditableDateField'; import { GenericEditableNumberField } from './GenericEditableNumberField'; +import { GenericEditablePhoneField } from './GenericEditablePhoneField'; import { GenericEditableRelationField } from './GenericEditableRelationField'; import { GenericEditableTextField } from './GenericEditableTextField'; import { GenericEditableURLField } from './GenericEditableURLField'; @@ -30,6 +32,8 @@ export function GenericEditableField() { return ; } else if (isFieldText(fieldDefinition)) { return ; + } else if (isFieldPhone(fieldDefinition)) { + return ; } else { console.warn( `Unknown field metadata type: ${fieldDefinition.type} in GenericEditableField`, diff --git a/front/src/modules/ui/editable-field/components/GenericEditablePhoneField.tsx b/front/src/modules/ui/editable-field/components/GenericEditablePhoneField.tsx new file mode 100644 index 0000000000..69a252f9f9 --- /dev/null +++ b/front/src/modules/ui/editable-field/components/GenericEditablePhoneField.tsx @@ -0,0 +1,43 @@ +import { useContext } from 'react'; +import { useRecoilValue } from 'recoil'; + +import { PhoneInputDisplay } from '@/ui/input/phone/components/PhoneInputDisplay'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; + +import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; +import { FieldContext } from '../states/FieldContext'; +import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; +import { FieldDefinition } from '../types/FieldDefinition'; +import { FieldPhoneMetadata } from '../types/FieldMetadata'; + +import { EditableField } from './EditableField'; +import { GenericEditablePhoneFieldEditMode } from './GenericEditablePhoneFieldEditMode'; + +export function GenericEditablePhoneField() { + const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext); + const currentEditableFieldDefinition = useContext( + EditableFieldDefinitionContext, + ) as FieldDefinition; + + const fieldValue = useRecoilValue( + genericEntityFieldFamilySelector({ + entityId: currentEditableFieldEntityId ?? '', + fieldName: currentEditableFieldDefinition + ? currentEditableFieldDefinition.metadata.fieldName + : '', + }), + ); + + return ( + + } + displayModeContent={} + isDisplayModeContentEmpty={!fieldValue} + /> + + ); +} diff --git a/front/src/modules/ui/editable-field/components/GenericEditablePhoneFieldEditMode.tsx b/front/src/modules/ui/editable-field/components/GenericEditablePhoneFieldEditMode.tsx new file mode 100644 index 0000000000..23a59b25f7 --- /dev/null +++ b/front/src/modules/ui/editable-field/components/GenericEditablePhoneFieldEditMode.tsx @@ -0,0 +1,72 @@ +import { useContext, useRef, useState } from 'react'; +import { useRecoilState } from 'recoil'; + +import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit'; + +import { useRegisterCloseFieldHandlers } from '../hooks/useRegisterCloseFieldHandlers'; +import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField'; +import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; +import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; +import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector'; +import { FieldDefinition } from '../types/FieldDefinition'; +import { FieldPhoneMetadata } from '../types/FieldMetadata'; + +export function GenericEditablePhoneFieldEditMode() { + const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext); + const currentEditableFieldDefinition = useContext( + EditableFieldDefinitionContext, + ) as FieldDefinition; + + // TODO: we could use a hook that would return the field value with the right type + const [fieldValue, setFieldValue] = useRecoilState( + genericEntityFieldFamilySelector({ + entityId: currentEditableFieldEntityId ?? '', + fieldName: currentEditableFieldDefinition + ? currentEditableFieldDefinition.metadata.fieldName + : '', + }), + ); + + const [internalValue, setInternalValue] = useState(fieldValue); + + const updateField = useUpdateGenericEntityField(); + + const wrapperRef = useRef(null); + + useRegisterCloseFieldHandlers(wrapperRef, handleSubmit, onCancel); + + function handleSubmit() { + if (internalValue === fieldValue) return; + + setFieldValue(internalValue); + + if (currentEditableFieldEntityId && updateField) { + updateField( + currentEditableFieldEntityId, + currentEditableFieldDefinition, + internalValue, + ); + } + } + + function onCancel() { + setFieldValue(fieldValue); + } + + function handleChange(newValue: string) { + setInternalValue(newValue); + } + + return ( +
+ { + handleChange(newValue); + }} + /> +
+ ); +} diff --git a/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldDisplayMode.tsx b/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldDisplayMode.tsx index 990a106247..d369ed8389 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldDisplayMode.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldDisplayMode.tsx @@ -1,9 +1,11 @@ import { useContext } from 'react'; import { useRecoilValue } from 'recoil'; +import { CompanyChip } from '@/companies/components/CompanyChip'; import { PersonChip } from '@/people/components/PersonChip'; import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; import { UserChip } from '@/users/components/UserChip'; +import { getLogoUrlFromDomainName } from '~/utils'; import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext'; import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext'; @@ -45,6 +47,19 @@ export function GenericEditableRelationFieldDisplayMode() { /> ); } + case Entity.Company: { + return ( + + ); + } default: console.warn( `Unknown relation type: "${currentEditableFieldDefinition.metadata.relationType}" diff --git a/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx b/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx index 18d9d2ab97..dc3650e5dd 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx @@ -2,6 +2,7 @@ import { useContext } from 'react'; import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; +import { CompanyPicker } from '@/companies/components/CompanyPicker'; import { PeoplePicker } from '@/people/components/PeoplePicker'; import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect'; import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; @@ -54,6 +55,15 @@ function RelationPicker({ /> ); } + case Entity.Company: { + return ( + + ); + } default: console.warn( `Unknown relation type: "${fieldDefinition.metadata.relationType}" in GenericEditableRelationField`, diff --git a/front/src/pages/companies/CompanyShow.tsx b/front/src/pages/companies/CompanyShow.tsx index b914e9a1e6..b20826e35f 100644 --- a/front/src/pages/companies/CompanyShow.tsx +++ b/front/src/pages/companies/CompanyShow.tsx @@ -24,7 +24,7 @@ import { getLogoUrlFromDomainName } from '~/utils'; import { CompanyNameEditableField } from '../../modules/companies/editable-field/components/CompanyNameEditableField'; import { ShowPageContainer } from '../../modules/ui/layout/components/ShowPageContainer'; -import { companyShowFieldsDefinition } from './constants/companyShowFieldsDefinition'; +import { companyShowFieldDefinition } from './constants/companyShowFieldDefinition'; export function CompanyShow() { const companyId = useParams().companyId ?? ''; @@ -33,11 +33,12 @@ export function CompanyShow() { const theme = useTheme(); const { data } = useCompanyQuery(companyId); const company = data?.findUniqueCompany; - const isFavorite = - company?.Favorite && company?.Favorite?.length > 0 ? true : false; if (!company) return <>; + const isFavorite = + company.Favorite && company.Favorite?.length > 0 ? true : false; + async function handleFavoriteButtonClick() { if (isFavorite) deleteCompanyFavorite(companyId); else insertCompanyFavorite(companyId); @@ -45,7 +46,7 @@ export function CompanyShow() { return ( } @@ -54,10 +55,10 @@ export function CompanyShow() { ( )} @@ -67,7 +68,7 @@ export function CompanyShow() { value={useUpdateOneCompanyMutation} > - {companyShowFieldsDefinition.map((fieldDefinition) => { + {companyShowFieldDefinition.map((fieldDefinition) => { return ( diff --git a/front/src/pages/companies/constants/companyShowFieldsDefinition.tsx b/front/src/pages/companies/constants/companyShowFieldDefinition.tsx similarity index 95% rename from front/src/pages/companies/constants/companyShowFieldsDefinition.tsx rename to front/src/pages/companies/constants/companyShowFieldDefinition.tsx index a834b4237e..dc9cd4b477 100644 --- a/front/src/pages/companies/constants/companyShowFieldsDefinition.tsx +++ b/front/src/pages/companies/constants/companyShowFieldDefinition.tsx @@ -16,7 +16,7 @@ import { } from '@/ui/icon'; import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; -export const companyShowFieldsDefinition: FieldDefinition[] = [ +export const companyShowFieldDefinition: FieldDefinition[] = [ { id: 'domainName', label: 'Domain name', diff --git a/front/src/pages/people/PersonShow.tsx b/front/src/pages/people/PersonShow.tsx index c78029cb28..9eebe92c2d 100644 --- a/front/src/pages/people/PersonShow.tsx +++ b/front/src/pages/people/PersonShow.tsx @@ -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 ( } hasBackButton isFavorite={isFavorite} @@ -61,20 +70,37 @@ export function PersonShow() { person ? : <> } onUploadPicture={onUploadPicture} /> - {person && } + + + + {personShowFieldDefinition.map((fieldDefinition) => { + return ( + + + + ); + })} + + + diff --git a/front/src/pages/people/constants/personShowFieldDefinition.tsx b/front/src/pages/people/constants/personShowFieldDefinition.tsx new file mode 100644 index 0000000000..912569323b --- /dev/null +++ b/front/src/pages/people/constants/personShowFieldDefinition.tsx @@ -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[] = [ + { + id: 'email', + label: 'Email', + icon: , + type: 'text', + metadata: { + fieldName: 'email', + placeHolder: 'Email', + }, + } satisfies FieldDefinition, + { + id: 'phone', + label: 'Phone', + icon: , + type: 'phone', + metadata: { + fieldName: 'phone', + placeHolder: 'Phone', + }, + } satisfies FieldDefinition, + { + id: 'createdAt', + label: 'Created at', + icon: , + type: 'date', + metadata: { + fieldName: 'createdAt', + }, + } satisfies FieldDefinition, + { + id: 'company', + label: 'Company', + icon: , + type: 'relation', + metadata: { + fieldName: 'company', + relationType: Entity.Company, + useEditButton: true, + }, + } satisfies FieldDefinition, + { + id: 'city', + label: 'City', + icon: , + type: 'text', + metadata: { + fieldName: 'city', + placeHolder: 'City', + }, + } satisfies FieldDefinition, +];