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

Clean and re-organize post table refactoring (#1000)

Browse Source 
* Clean and re-organize post table refactoring

* Fix tests
This commit is contained in:
Charles Bochet
2023-07-30 18:26:32 -07:00
committed by GitHub
parent 86a2d67efd
commit ade5e52e55
336 changed files with 638 additions and 2757 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
front/src/modules/people/components/EditablePeopleFullName.tsx
View File

@ -1,58 +0,0 @@
import styled from '@emotion/styled';
import { EditableCellDoubleText } from '@/ui/table/editable-cell/types/EditableCellDoubleText';
import { Person } from '~/generated/graphql';
import { PersonChip } from './PersonChip';
type OwnProps = {
person:
| Partial<
Pick<
Person,
| 'id'
| 'firstName'
| 'lastName'
| 'displayName'
| 'avatarUrl'
| '_activityCount'
>
>
| null
| undefined;
onSubmit?: (firstName: string, lastName: string) => void;
onCancel?: () => void;
};
const NoEditModeContainer = styled.div`
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;
`;
export function EditablePeopleFullName({
person,
onSubmit,
onCancel,
}: OwnProps) {
return (
<EditableCellDoubleText
firstValue={person?.firstName ?? ''}
secondValue={person?.lastName ?? ''}
firstValuePlaceholder="First name"
secondValuePlaceholder="Last name"
onSubmit={onSubmit}
onCancel={onCancel}
nonEditModeContent={
<NoEditModeContainer>
<PersonChip
name={`${person?.firstName ?? ''} ${person?.lastName ?? ''}`}
id={person?.id ?? ''}
pictureUrl={person?.avatarUrl ?? ''}
/>
</NoEditModeContainer>
}
/>
);
}

4
front/src/modules/people/components/FilterDropdownPeopleSearchSelect.tsx
View File

@ -4,8 +4,8 @@ import { useFilteredSearchPeopleQuery } from '@/people/queries';
import { FilterDropdownEntitySearchSelect } from '@/ui/filter-n-sort/components/FilterDropdownEntitySearchSelect';
import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState';
import { filterDropdownSelectedEntityIdScopedState } from '@/ui/filter-n-sort/states/filterDropdownSelectedEntityIdScopedState';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
export function FilterDropdownPeopleSearchSelect({
context,

46
front/src/modules/people/components/PeopleCompanyCell.tsx
View File

@ -1,46 +0,0 @@
import { CompanyChip } from '@/companies/components/CompanyChip';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState';
import { Company, Person } from '~/generated/graphql';
import { getLogoUrlFromDomainName } from '~/utils';
import { PeopleCompanyCreateCell } from './PeopleCompanyCreateCell';
import { PeopleCompanyPicker } from './PeopleCompanyPicker';
export type PeopleWithCompany = Pick<Person, 'id'> & {
company?: Pick<Company, 'id' | 'name' | 'domainName'> | null;
};
export type OwnProps = {
people: Pick<Person, 'id'> & {
company?: Pick<Company, 'id' | 'name' | 'domainName'> | null;
};
};
export function PeopleCompanyCell({ people }: OwnProps) {
const [isCreating] = useRecoilScopedState(isCreateModeScopedState);
return (
<EditableCell
transparent
maxContentWidth={160}
editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
editModeContent={
isCreating ? (
<PeopleCompanyCreateCell people={people} />
) : (
<PeopleCompanyPicker people={people} />
)
}
nonEditModeContent={
<CompanyChip
id={people.company?.id ?? ''}
name={people.company?.name ?? ''}
pictureUrl={getLogoUrlFromDomainName(people.company?.domainName)}
/>
}
/>
);
}

91
front/src/modules/people/components/PeopleCompanyCreateCell.tsx
View File

@ -1,91 +0,0 @@
import { useState } from 'react';
import { getOperationName } from '@apollo/client/utilities';
import { v4 } from 'uuid';
import { GET_COMPANIES } from '@/companies/queries';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState';
import { EditableCellDoubleTextEditMode } from '@/ui/table/editable-cell/types/EditableCellDoubleTextEditMode';
import {
Person,
useInsertOneCompanyMutation,
useUpdateOnePersonMutation,
} from '~/generated/graphql';
import { logError } from '~/utils/logError';
import { SEARCH_COMPANY_QUERY } from '../../search/queries/search';
type OwnProps = {
people: Pick<Person, 'id'>;
};
export function PeopleCompanyCreateCell({ people }: OwnProps) {
const [, setIsCreating] = useRecoilScopedState(isCreateModeScopedState);
const [currentSearchFilter] = useRecoilScopedState(
relationPickerSearchFilterScopedState,
);
const [companyName, setCompanyName] = useState(currentSearchFilter);
const [companyDomainName, setCompanyDomainName] = useState('');
const [insertCompany] = useInsertOneCompanyMutation();
const [updatePerson] = useUpdateOnePersonMutation();
function handleDoubleTextChange(leftValue: string, rightValue: string): void {
setCompanyDomainName(leftValue);
setCompanyName(rightValue);
}
async function handleCompanyCreate(
companyName: string,
companyDomainName: string,
) {
const newCompanyId = v4();
try {
await insertCompany({
variables: {
data: {
id: newCompanyId,
name: companyName,
domainName: companyDomainName,
address: '',
},
},
refetchQueries: [
getOperationName(GET_COMPANIES) ?? '',
getOperationName(SEARCH_COMPANY_QUERY) ?? '',
],
});
await updatePerson({
variables: {
where: {
id: people.id,
},
data: {
company: { connect: { id: newCompanyId } },
},
},
});
} catch (error) {
// TODO: handle error better
logError(error);
}
setIsCreating(false);
}
return (
<EditableCellDoubleTextEditMode
firstValue={companyDomainName}
secondValue={companyName}
firstValuePlaceholder="URL"
secondValuePlaceholder="Name"
onChange={handleDoubleTextChange}
onSubmit={() => handleCompanyCreate(companyName, companyDomainName)}
onCancel={() => setIsCreating(false)}
/>
);
}

11
front/src/modules/people/components/PeopleCompanyPicker.tsx
View File

@ -1,19 +1,18 @@
import { useFilteredSearchCompanyQuery } from '@/companies/queries';
import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
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';
import { EntityForSelect } from '../../ui/relation-picker/types/EntityForSelect';
export type OwnProps = {
people: Pick<Person, 'id'> & { company?: Pick<Company, 'id'> | null };
};

10
front/src/modules/people/components/PeoplePicker.tsx
View File

@ -1,9 +1,9 @@
import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect';
import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
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 { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useSearchPeopleQuery } from '~/generated/graphql';
export type OwnProps = {