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

FieldDisplay & FieldInput (#1708)

Browse Source 
* Removed view field duplicate types

* wip

* wip 2

* wip 3

* Unified state for fields

* Renaming

* Wip

* Post merge

* Post post merge

* wip

* Delete unused file

* Boolean and Probability

* Finished InlineCell

* Renamed EditableCell to TableCell

* Finished double texts

* Finished MoneyField

* Fixed bug inline cell click outside

* Fixed hotkey scope

* Final fixes

* Phone

* Fix url and number input validation

* Fix

* Fix position

* wip refactor activity editor

* Fixed activity editor

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2023-09-27 18:18:02 +02:00
committed by GitHub
parent d9feabbc63
commit cbadcba188
290 changed files with 3152 additions and 4481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
front/src/modules/companies/components/CompanyBoardCard.tsx
View File

@ -7,10 +7,9 @@ import { useBoardContext } from '@/ui/board/hooks/useBoardContext';
import { useCurrentCardSelected } from '@/ui/board/hooks/useCurrentCardSelected';
import { visibleBoardCardFieldsScopedSelector } from '@/ui/board/states/selectors/visibleBoardCardFieldsScopedSelector';
import { EntityChipVariant } from '@/ui/chip/components/EntityChip';
import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
import { EditableFieldDefinitionContext } from '@/ui/editable-field/contexts/EditableFieldDefinitionContext';
import { EditableFieldEntityIdContext } from '@/ui/editable-field/contexts/EditableFieldEntityIdContext';
import { EditableFieldMutationContext } from '@/ui/editable-field/contexts/EditableFieldMutationContext';
import { InlineCell } from '@/ui/editable-field/components/InlineCell';
import { EditableFieldHotkeyScope } from '@/ui/editable-field/types/EditableFieldHotkeyScope';
import { FieldContext } from '@/ui/field/contexts/FieldContext';
import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useUpdateOnePipelineProgressMutation } from '~/generated/graphql';
@ -158,27 +157,28 @@ export const CompanyBoardCard = () => {
</StyledCheckboxContainer>
</StyledBoardCardHeader>
<StyledBoardCardBody>
<EditableFieldMutationContext.Provider
value={useUpdateOnePipelineProgressMutation}
>
<EditableFieldEntityIdContext.Provider value={boardCardId}>
{visibleBoardCardFields.map((viewField) => (
<PreventSelectOnClickContainer key={viewField.key}>
<EditableFieldDefinitionContext.Provider
value={{
key: viewField.key,
name: viewField.name,
Icon: viewField.Icon,
type: viewField.metadata.type,
metadata: viewField.metadata,
}}
>
<GenericEditableField />
</EditableFieldDefinitionContext.Provider>
</PreventSelectOnClickContainer>
))}
</EditableFieldEntityIdContext.Provider>
</EditableFieldMutationContext.Provider>
{visibleBoardCardFields.map((viewField) => (
<PreventSelectOnClickContainer key={viewField.key}>
<FieldContext.Provider
value={{
entityId: boardCardId,
recoilScopeId: boardCardId + viewField.key,
fieldDefinition: {
key: viewField.key,
name: viewField.name,
Icon: viewField.Icon,
type: viewField.type,
metadata: viewField.metadata,
useEditButton: viewField.useEditButton,
},
useUpdateEntityMutation: useUpdateOnePipelineProgressMutation,
hotkeyScope: EditableFieldHotkeyScope.EditableField,
}}
>
<InlineCell />
</FieldContext.Provider>
</PreventSelectOnClickContainer>
))}
</StyledBoardCardBody>
</StyledBoardCard>
</StyledBoardCardWrapper>

102
front/src/modules/companies/components/CompanyPickerCell.tsx
View File

@ -1,102 +0,0 @@
import { useFilteredSearchCompanyQuery } from '@/companies/hooks/useFilteredSearchCompanyQuery';
import { IconBuildingSkyscraper } from '@/ui/icon';
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 { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState';
import { DoubleTextCellEdit } from '@/ui/table/editable-cell/type/components/DoubleTextCellEdit';
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 { useInsertOneCompanyMutation } from '~/generated/graphql';
export type OwnProps = {
companyId: string | null;
onSubmit: (newCompany: CompanyPickerSelectedCompany | null) => void;
onCancel?: () => void;
createModeEnabled?: boolean;
width?: number;
};
export type CompanyPickerSelectedCompany = EntityForSelect & {
domainName: string;
};
export const CompanyPickerCell = ({
companyId,
onSubmit,
onCancel,
createModeEnabled,
width,
}: OwnProps) => {
const [isCreateMode, setIsCreateMode] = useRecoilScopedState(
isCreateModeScopedState,
);
const [insertCompany] = useInsertOneCompanyMutation();
const [relationPickerSearchFilter] = useRecoilScopedState(
relationPickerSearchFilterScopedState,
);
const setHotkeyScope = useSetHotkeyScope();
const companies = useFilteredSearchCompanyQuery({
searchFilter: relationPickerSearchFilter,
selectedIds: [companyId ?? ''],
});
const handleCompanySelected = async (
company: CompanyPickerSelectedCompany | null | undefined,
) => {
onSubmit(company ?? null);
};
const handleStartCreation = () => {
setIsCreateMode(true);
setHotkeyScope(TableHotkeyScope.CellDoubleTextInput);
};
const handleCreate = async (firstValue: string, secondValue: string) => {
const insertCompanyRequest = await insertCompany({
variables: {
data: {
name: firstValue,
domainName: secondValue,
address: '',
},
},
});
const companyCreated = insertCompanyRequest.data?.createOneCompany;
companyCreated &&
onSubmit({
id: companyCreated.id,
name: companyCreated.name,
entityType: Entity.Company,
domainName: companyCreated.domainName,
});
setIsCreateMode(false);
};
return isCreateMode ? (
<DoubleTextCellEdit
firstValue={relationPickerSearchFilter}
secondValue=""
firstValuePlaceholder="Name"
secondValuePlaceholder="Url"
onSubmit={handleCreate}
/>
) : (
<SingleEntitySelect
EmptyIcon={IconBuildingSkyscraper}
emptyLabel="No Company"
entitiesToSelect={companies.entitiesToSelect}
loading={companies.loading}
onCancel={onCancel}
onCreate={createModeEnabled ? handleStartCreation : undefined}
onEntitySelected={handleCompanySelected}
selectedEntity={companies.selectedEntities[0]}
width={width}
/>
);
};