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

feat: add Object Field Edit page sections (#2243)

Browse Source 
Closes #2160, Closes #2163
This commit is contained in:
Thaïs
2023-10-27 12:13:01 +02:00
committed by GitHub
parent d02dd69613
commit d7b0c1190a
12 changed files with 206 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
front/src/modules/metadata/hooks/useObjectMetadata.ts
View File

@ -8,7 +8,7 @@ import { useFindManyMetadataObjects } from './useFindManyMetadataObjects';
import { useUpdateOneMetadataObject } from './useUpdateOneMetadataObject'; import { useUpdateOneMetadataObject } from './useUpdateOneMetadataObject';
export const useObjectMetadata = () => { export const useObjectMetadata = () => {
const { metadataObjects } = useFindManyMetadataObjects(); const { metadataObjects, loading } = useFindManyMetadataObjects();
const activeMetadataObjects = metadataObjects.filter( const activeMetadataObjects = metadataObjects.filter(
({ isActive }) => isActive, ({ isActive }) => isActive,
@ -68,5 +68,6 @@ export const useObjectMetadata = () => {
editObject, editObject,
eraseObject, eraseObject,
findActiveObjectBySlug, findActiveObjectBySlug,
loading,
}; };
}; };

6
front/src/modules/metadata/utils/getFieldSlug.ts Normal file
View File

@ -0,0 +1,6 @@
import toKebabCase from 'lodash.kebabcase';
import { Field } from '~/generated-metadata/graphql';
export const getFieldSlug = (metadataField: Pick<Field, 'label'>) =>
toKebabCase(metadataField.label);

7
front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx
View File

@ -6,16 +6,18 @@ import { dataTypes } from '../constants/dataTypes';
import { ObjectFieldDataType } from '../types/ObjectFieldDataType'; import { ObjectFieldDataType } from '../types/ObjectFieldDataType';
type SettingsObjectFieldTypeSelectSectionProps = { type SettingsObjectFieldTypeSelectSectionProps = {
disabled?: boolean;
onChange?: (value: ObjectFieldDataType) => void;
type: ObjectFieldDataType; type: ObjectFieldDataType;
onChange: (value: ObjectFieldDataType) => void;
}; };
// TODO: remove "relation" type for now, add it back when the backend is ready. // TODO: remove "relation" type for now, add it back when the backend is ready.
const { relation: _, ...dataTypesWithoutRelation } = dataTypes; const { relation: _, ...dataTypesWithoutRelation } = dataTypes;
export const SettingsObjectFieldTypeSelectSection = ({ export const SettingsObjectFieldTypeSelectSection = ({
type, disabled,
onChange, onChange,
type,
}: SettingsObjectFieldTypeSelectSectionProps) => ( }: SettingsObjectFieldTypeSelectSectionProps) => (
<Section> <Section>
<H2Title <H2Title
@ -23,6 +25,7 @@ export const SettingsObjectFieldTypeSelectSection = ({
description="The field's type and values." description="The field's type and values."
/> />
<Select <Select
disabled={disabled}
dropdownScopeId="object-field-type-select" dropdownScopeId="object-field-type-select"
value={type} value={type}
onChange={onChange} onChange={onChange}

2
front/src/modules/types/SettingsPath.ts
View File

@ -6,7 +6,7 @@ export enum SettingsPath {
ObjectEdit = 'objects/:objectSlug/edit', ObjectEdit = 'objects/:objectSlug/edit',
ObjectNewFieldStep1 = 'objects/:objectSlug/new-field/step-1', ObjectNewFieldStep1 = 'objects/:objectSlug/new-field/step-1',
ObjectNewFieldStep2 = 'objects/:objectSlug/new-field/step-2', ObjectNewFieldStep2 = 'objects/:objectSlug/new-field/step-2',
ObjectFieldEdit = 'objects/:objectSlug/:fieldName', ObjectFieldEdit = 'objects/:objectSlug/:fieldSlug',
NewObject = 'objects/new', NewObject = 'objects/new',
WorkspaceMembersPage = 'workspace-members', WorkspaceMembersPage = 'workspace-members',
Workspace = 'workspace', Workspace = 'workspace',

1
front/src/modules/ui/display/icon/types/IconComponent.ts
View File

@ -1,6 +1,7 @@
import { FunctionComponent } from 'react'; import { FunctionComponent } from 'react';
export type IconComponent = FunctionComponent<{ export type IconComponent = FunctionComponent<{
color?: string;
size?: number; size?: number;
stroke?: number; stroke?: number;
}>; }>;

56
front/src/modules/ui/input/components/Select.tsx
View File

@ -12,19 +12,21 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { SelectHotkeyScope } from '../types/SelectHotkeyScope'; import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
export type SelectProps<Value extends string | number | null> = { export type SelectProps<Value extends string | number | null> = {
disabled?: boolean;
dropdownScopeId: string; dropdownScopeId: string;
onChange: (value: Value) => void; onChange?: (value: Value) => void;
options: { value: Value; label: string; Icon?: IconComponent }[]; options: { value: Value; label: string; Icon?: IconComponent }[];
value?: Value; value?: Value;
}; };
const StyledContainer = styled.div` const StyledContainer = styled.div<{ disabled?: boolean }>`
align-items: center; align-items: center;
background-color: ${({ theme }) => theme.background.transparent.lighter}; background-color: ${({ theme }) => theme.background.transparent.lighter};
border: 1px solid ${({ theme }) => theme.border.color.medium}; border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.sm}; border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.primary}; color: ${({ disabled, theme }) =>
cursor: pointer; disabled ? theme.font.color.tertiary : theme.font.color.primary};
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
display: flex; display: flex;
gap: ${({ theme }) => theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
height: ${({ theme }) => theme.spacing(8)}; height: ${({ theme }) => theme.spacing(8)};
@ -38,7 +40,13 @@ const StyledLabel = styled.div`
gap: ${({ theme }) => theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
`; `;
const StyledIconChevronDown = styled(IconChevronDown)<{ disabled?: boolean }>`
color: ${({ disabled, theme }) =>
disabled ? theme.font.color.extraLight : theme.font.color.tertiary};
`;
export const Select = <Value extends string | number | null>({ export const Select = <Value extends string | number | null>({
disabled,
dropdownScopeId, dropdownScopeId,
onChange, onChange,
options, options,
@ -50,28 +58,30 @@ export const Select = <Value extends string | number | null>({
const { closeDropdown } = useDropdown({ dropdownScopeId }); const { closeDropdown } = useDropdown({ dropdownScopeId });
return ( const selectControl = (
<StyledContainer disabled={disabled}>
<StyledLabel>
{!!selectedOption.Icon && (
<selectedOption.Icon
color={disabled ? theme.font.color.light : theme.font.color.primary}
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
/>
)}
{selectedOption.label}
</StyledLabel>
<StyledIconChevronDown disabled={disabled} size={theme.icon.size.md} />
</StyledContainer>
);
return disabled ? (
selectControl
) : (
<DropdownScope dropdownScopeId={dropdownScopeId}> <DropdownScope dropdownScopeId={dropdownScopeId}>
<Dropdown <Dropdown
dropdownMenuWidth={176} dropdownMenuWidth={176}
dropdownPlacement="bottom-start" dropdownPlacement="bottom-start"
clickableComponent={ clickableComponent={selectControl}
<StyledContainer>
<StyledLabel>
{!!selectedOption.Icon && (
<selectedOption.Icon
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
/>
)}
{selectedOption.label}
</StyledLabel>
<IconChevronDown
color={theme.font.color.tertiary}
size={theme.icon.size.md}
/>
</StyledContainer>
}
dropdownComponents={ dropdownComponents={
<DropdownMenuItemsContainer> <DropdownMenuItemsContainer>
{options.map((option) => ( {options.map((option) => (
@ -80,7 +90,7 @@ export const Select = <Value extends string | number | null>({
LeftIcon={option.Icon} LeftIcon={option.Icon}
text={option.label} text={option.label}
onClick={() => { onClick={() => {
onChange(option.value); onChange?.(option.value);
closeDropdown(); closeDropdown();
}} }}
/> />

4
front/src/modules/ui/input/components/__stories__/Select.stories.tsx
View File

@ -49,3 +49,7 @@ export const Open: Story = {
await userEvent.click(selectLabel); await userEvent.click(selectLabel);
}, },
}; };
export const Disabled: Story = {
args: { disabled: true },
};

53
front/src/pages/settings/data-model/SettingsObjectDetail.tsx
View File

@ -4,6 +4,7 @@ import styled from '@emotion/styled';
import { useFieldMetadata } from '@/metadata/hooks/useFieldMetadata'; import { useFieldMetadata } from '@/metadata/hooks/useFieldMetadata';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata'; import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { getFieldSlug } from '@/metadata/utils/getFieldSlug';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsAboutSection } from '@/settings/data-model/object-details/components/SettingsObjectAboutSection'; import { SettingsAboutSection } from '@/settings/data-model/object-details/components/SettingsObjectAboutSection';
import { SettingsObjectFieldActiveActionDropdown } from '@/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown'; import { SettingsObjectFieldActiveActionDropdown } from '@/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown';
@ -33,49 +34,51 @@ export const SettingsObjectDetail = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const { objectSlug = '' } = useParams(); const { objectSlug = '' } = useParams();
const { activeObjects, disableObject, findActiveObjectBySlug } = const { disableObject, findActiveObjectBySlug, loading } =
useObjectMetadata(); useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug); const activeObject = findActiveObjectBySlug(objectSlug);
useEffect(() => { useEffect(() => {
if (activeObjects.length && !activeObject) { if (loading) return;
navigate(AppPath.NotFound); if (!activeObject) navigate(AppPath.NotFound);
} }, [activeObject, loading, navigate]);
}, [activeObject, activeObjects.length, navigate]);
const { activateField, disableField, eraseField } = useFieldMetadata(); const { activateField, disableField, eraseField } = useFieldMetadata();
const activeFields = activeObject?.fields.filter(
if (!activeObject) return null;
const activeFields = activeObject.fields.filter(
(fieldItem) => fieldItem.isActive, (fieldItem) => fieldItem.isActive,
); );
const disabledFields = activeObject?.fields.filter( const disabledFields = activeObject.fields.filter(
(fieldItem) => !fieldItem.isActive, (fieldItem) => !fieldItem.isActive,
); );
const handleDisable = async () => {
await disableObject(activeObject);
navigate('/settings/objects');
};
return ( return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings"> <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer> <SettingsPageContainer>
<Breadcrumb <Breadcrumb
links={[ links={[
{ children: 'Objects', href: '/settings/objects' }, { children: 'Objects', href: '/settings/objects' },
{ children: activeObject?.labelPlural ?? '' }, { children: activeObject.labelPlural },
]} ]}
/> />
{activeObject && ( <SettingsAboutSection
<SettingsAboutSection iconKey={activeObject.icon ?? undefined}
iconKey={activeObject.icon ?? undefined} name={activeObject.labelPlural || ''}
name={activeObject.labelPlural || ''} isCustom={activeObject.isCustom}
isCustom={activeObject.isCustom} onDisable={handleDisable}
onDisable={() => { onEdit={() => navigate('./edit')}
disableObject(activeObject); />
navigate('/settings/objects');
}}
onEdit={() => navigate('./edit')}
/>
)}
<Section> <Section>
<H2Title <H2Title
title="Fields" title="Fields"
description={`Customise the fields available in the ${activeObject?.labelSingular} views and their display order in the ${activeObject?.labelSingular} detail view and menus.`} description={`Customise the fields available in the ${activeObject.labelSingular} views and their display order in the ${activeObject.labelSingular} detail view and menus.`}
/> />
<Table> <Table>
<StyledObjectFieldTableRow> <StyledObjectFieldTableRow>
@ -84,7 +87,7 @@ export const SettingsObjectDetail = () => {
<TableHeader>Data type</TableHeader> <TableHeader>Data type</TableHeader>
<TableHeader></TableHeader> <TableHeader></TableHeader>
</StyledObjectFieldTableRow> </StyledObjectFieldTableRow>
{!!activeFields?.length && ( {!!activeFields.length && (
<TableSection title="Active"> <TableSection title="Active">
{activeFields.map((fieldItem) => ( {activeFields.map((fieldItem) => (
<SettingsObjectFieldItemTableRow <SettingsObjectFieldItemTableRow
@ -94,7 +97,7 @@ export const SettingsObjectDetail = () => {
<SettingsObjectFieldActiveActionDropdown <SettingsObjectFieldActiveActionDropdown
isCustomField={fieldItem.isCustom} isCustomField={fieldItem.isCustom}
scopeKey={fieldItem.id} scopeKey={fieldItem.id}
onEdit={() => navigate(`./${fieldItem.name}`)} onEdit={() => navigate(`./${getFieldSlug(fieldItem)}`)}
onDisable={() => disableField(fieldItem)} onDisable={() => disableField(fieldItem)}
/> />
} }
@ -102,7 +105,7 @@ export const SettingsObjectDetail = () => {
))} ))}
</TableSection> </TableSection>
)} )}
{!!disabledFields?.length && ( {!!disabledFields.length && (
<TableSection isInitiallyExpanded={false} title="Disabled"> <TableSection isInitiallyExpanded={false} title="Disabled">
{disabledFields.map((fieldItem) => ( {disabledFields.map((fieldItem) => (
<SettingsObjectFieldItemTableRow <SettingsObjectFieldItemTableRow
@ -129,7 +132,7 @@ export const SettingsObjectDetail = () => {
variant="secondary" variant="secondary"
onClick={() => onClick={() =>
navigate( navigate(
disabledFields?.length disabledFields.length
? './new-field/step-1' ? './new-field/step-1'
: './new-field/step-2', : './new-field/step-2',
) )

102
front/src/pages/settings/data-model/SettingsObjectEdit.tsx
View File

@ -20,7 +20,7 @@ export const SettingsObjectEdit = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const { objectSlug = '' } = useParams(); const { objectSlug = '' } = useParams();
const { activeObjects, disableObject, editObject, findActiveObjectBySlug } = const { disableObject, editObject, findActiveObjectBySlug, loading } =
useObjectMetadata(); useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug); const activeObject = findActiveObjectBySlug(objectSlug);
@ -34,7 +34,7 @@ export const SettingsObjectEdit = () => {
>({}); >({});
useEffect(() => { useEffect(() => {
if (!activeObjects.length) return; if (loading) return;
if (!activeObject) { if (!activeObject) {
navigate(AppPath.NotFound); navigate(AppPath.NotFound);
@ -49,22 +49,22 @@ export const SettingsObjectEdit = () => {
description: activeObject.description ?? undefined, description: activeObject.description ?? undefined,
}); });
} }
}, [activeObject, activeObjects.length, formValues, navigate]); }, [activeObject, formValues, loading, navigate]);
if (!activeObject) return null;
const areRequiredFieldsFilled = const areRequiredFieldsFilled =
!!formValues.labelSingular && !!formValues.labelPlural; !!formValues.labelSingular && !!formValues.labelPlural;
const hasChanges = const hasChanges =
formValues.description !== activeObject?.description || formValues.description !== activeObject.description ||
formValues.icon !== activeObject?.icon || formValues.icon !== activeObject.icon ||
formValues.labelPlural !== activeObject?.labelPlural || formValues.labelPlural !== activeObject.labelPlural ||
formValues.labelSingular !== activeObject?.labelSingular; formValues.labelSingular !== activeObject.labelSingular;
const canSave = areRequiredFieldsFilled && hasChanges; const canSave = areRequiredFieldsFilled && hasChanges;
const handleSave = async () => { const handleSave = async () => {
if (!activeObject) return;
const editedObject = { ...activeObject, ...formValues }; const editedObject = { ...activeObject, ...formValues };
await editObject(editedObject); await editObject(editedObject);
@ -72,6 +72,11 @@ export const SettingsObjectEdit = () => {
navigate(`/settings/objects/${getObjectSlug(editedObject)}`); navigate(`/settings/objects/${getObjectSlug(editedObject)}`);
}; };
const handleDisable = async () => {
await disableObject(activeObject);
navigate('/settings/objects');
};
return ( return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings"> <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer> <SettingsPageContainer>
@ -80,61 +85,52 @@ export const SettingsObjectEdit = () => {
links={[ links={[
{ children: 'Objects', href: '/settings/objects' }, { children: 'Objects', href: '/settings/objects' },
{ {
children: activeObject?.labelPlural ?? '', children: activeObject.labelPlural,
href: `/settings/objects/${objectSlug}`, href: `/settings/objects/${objectSlug}`,
}, },
{ children: 'Edit' }, { children: 'Edit' },
]} ]}
/> />
{!!activeObject?.isCustom && ( {!!activeObject.isCustom && (
<SaveAndCancelButtons <SaveAndCancelButtons
isSaveDisabled={!canSave} isSaveDisabled={!canSave}
onCancel={() => { onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
navigate(`/settings/objects/${objectSlug}`);
}}
onSave={handleSave} onSave={handleSave}
/> />
)} )}
</SettingsHeaderContainer> </SettingsHeaderContainer>
{activeObject && ( <SettingsObjectIconSection
<> disabled={!activeObject.isCustom}
<SettingsObjectIconSection iconKey={formValues.icon}
disabled={!activeObject.isCustom} label={formValues.labelPlural}
iconKey={formValues.icon} onChange={({ iconKey }) =>
label={formValues.labelPlural} setFormValues((previousFormValues) => ({
onChange={({ iconKey }) => ...previousFormValues,
setFormValues((previousFormValues) => ({ icon: iconKey,
...previousFormValues, }))
icon: iconKey, }
})) />
} <SettingsObjectFormSection
/> disabled={!activeObject.isCustom}
<SettingsObjectFormSection singularName={formValues.labelSingular}
disabled={!activeObject.isCustom} pluralName={formValues.labelPlural}
singularName={formValues.labelSingular} description={formValues.description}
pluralName={formValues.labelPlural} onChange={(values) =>
description={formValues.description} setFormValues((previousFormValues) => ({
onChange={(values) => ...previousFormValues,
setFormValues((previousFormValues) => ({ ...values,
...previousFormValues, }))
...values, }
})) />
} <Section>
/> <H2Title title="Danger zone" description="Disable object" />
<Section> <Button
<H2Title title="Danger zone" description="Disable object" /> Icon={IconArchive}
<Button title="Disable"
Icon={IconArchive} size="small"
title="Disable" onClick={handleDisable}
size="small" />
onClick={() => { </Section>
disableObject(activeObject);
navigate('/settings/objects');
}}
/>
</Section>
</>
)}
</SettingsPageContainer> </SettingsPageContainer>
</SubMenuTopBarContainer> </SubMenuTopBarContainer>
); );

65
front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
View File

@ -1,13 +1,46 @@
import { useParams } from 'react-router-dom'; import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useFieldMetadata } from '@/metadata/hooks/useFieldMetadata';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { getFieldSlug } from '@/metadata/utils/getFieldSlug';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer'; import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { IconSettings } from '@/ui/display/icon'; import { SettingsObjectFieldFormSection } from '@/settings/data-model/components/SettingsObjectFieldFormSection';
import { SettingsObjectFieldTypeSelectSection } from '@/settings/data-model/components/SettingsObjectFieldTypeSelectSection';
import { ObjectFieldDataType } from '@/settings/data-model/types/ObjectFieldDataType';
import { AppPath } from '@/types/AppPath';
import { IconArchive, IconSettings } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Button } from '@/ui/input/button/components/Button';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'; import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb'; import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
export const SettingsObjectFieldEdit = () => { export const SettingsObjectFieldEdit = () => {
const { objectSlug = '', fieldName = '' } = useParams(); const navigate = useNavigate();
const { objectSlug = '', fieldSlug = '' } = useParams();
const { findActiveObjectBySlug, loading } = useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug);
const { disableField } = useFieldMetadata();
const activeField = activeObject?.fields.find(
(field) => field.isActive && getFieldSlug(field) === fieldSlug,
);
useEffect(() => {
if (loading) return;
if (!activeObject || !activeField) navigate(AppPath.NotFound);
}, [activeField, activeObject, loading, navigate]);
if (!activeObject || !activeField) return null;
const handleDisable = async () => {
await disableField(activeField);
navigate(`/settings/objects/${objectSlug}`);
};
return ( return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings"> <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer> <SettingsPageContainer>
@ -16,15 +49,33 @@ export const SettingsObjectFieldEdit = () => {
links={[ links={[
{ children: 'Objects', href: '/settings/objects' }, { children: 'Objects', href: '/settings/objects' },
{ {
children: `${objectSlug}`, children: activeObject.labelPlural,
href: `/settings/objects/${objectSlug}`, href: `/settings/objects/${objectSlug}`,
}, },
{ { children: activeField.label },
children: `${fieldName}`,
},
]} ]}
/> />
</SettingsHeaderContainer> </SettingsHeaderContainer>
<SettingsObjectFieldFormSection
disabled={!activeField.isCustom}
name={activeField.label}
description={activeField.description ?? undefined}
iconKey={activeField.icon ?? undefined}
onChange={() => undefined}
/>
<SettingsObjectFieldTypeSelectSection
disabled
type={activeField.type as ObjectFieldDataType}
/>
<Section>
<H2Title title="Danger zone" description="Disable this field" />
<Button
Icon={IconArchive}
title="Disable"
size="small"
onClick={handleDisable}
/>
</Section>
</SettingsPageContainer> </SettingsPageContainer>
</SubMenuTopBarContainer> </SubMenuTopBarContainer>
); );

25
front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
View File

@ -36,19 +36,20 @@ export const SettingsObjectNewFieldStep1 = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const { objectSlug = '' } = useParams(); const { objectSlug = '' } = useParams();
const { activeObjects, findActiveObjectBySlug } = useObjectMetadata(); const { findActiveObjectBySlug, loading } = useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug); const activeObject = findActiveObjectBySlug(objectSlug);
useEffect(() => { useEffect(() => {
if (activeObjects.length && !activeObject) { if (loading) return;
navigate(AppPath.NotFound); if (!activeObject) navigate(AppPath.NotFound);
} }, [activeObject, loading, navigate]);
}, [activeObject, activeObjects.length, navigate]);
const activeFields = activeObject?.fields.filter( if (!activeObject) return null;
const activeFields = activeObject.fields.filter(
(fieldItem) => fieldItem.isActive, (fieldItem) => fieldItem.isActive,
); );
const disabledFields = activeObject?.fields.filter( const disabledFields = activeObject.fields.filter(
(fieldItem) => !fieldItem.isActive, (fieldItem) => !fieldItem.isActive,
); );
@ -60,7 +61,7 @@ export const SettingsObjectNewFieldStep1 = () => {
links={[ links={[
{ children: 'Objects', href: '/settings/objects' }, { children: 'Objects', href: '/settings/objects' },
{ {
children: activeObject?.labelPlural ?? '', children: activeObject.labelPlural,
href: `/settings/objects/${objectSlug}`, href: `/settings/objects/${objectSlug}`,
}, },
{ children: 'New Field' }, { children: 'New Field' },
@ -68,9 +69,7 @@ export const SettingsObjectNewFieldStep1 = () => {
/> />
<SaveAndCancelButtons <SaveAndCancelButtons
isSaveDisabled isSaveDisabled
onCancel={() => { onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
navigate(`/settings/objects/${objectSlug}`);
}}
onSave={() => undefined} onSave={() => undefined}
/> />
</SettingsHeaderContainer> </SettingsHeaderContainer>
@ -86,7 +85,7 @@ export const SettingsObjectNewFieldStep1 = () => {
<TableHeader>Data type</TableHeader> <TableHeader>Data type</TableHeader>
<TableHeader></TableHeader> <TableHeader></TableHeader>
</StyledObjectFieldTableRow> </StyledObjectFieldTableRow>
{!!activeFields?.length && ( {!!activeFields.length && (
<TableSection isInitiallyExpanded={false} title="Active"> <TableSection isInitiallyExpanded={false} title="Active">
{activeFields.map((fieldItem) => ( {activeFields.map((fieldItem) => (
<SettingsObjectFieldItemTableRow <SettingsObjectFieldItemTableRow
@ -99,7 +98,7 @@ export const SettingsObjectNewFieldStep1 = () => {
))} ))}
</TableSection> </TableSection>
)} )}
{!!disabledFields?.length && ( {!!disabledFields.length && (
<TableSection title="Disabled"> <TableSection title="Disabled">
{disabledFields.map((fieldItem) => ( {disabledFields.map((fieldItem) => (
<SettingsObjectFieldItemTableRow <SettingsObjectFieldItemTableRow

16
front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
View File

@ -17,13 +17,14 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
export const SettingsObjectNewFieldStep2 = () => { export const SettingsObjectNewFieldStep2 = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const { objectSlug = '' } = useParams(); const { objectSlug = '' } = useParams();
const { findActiveObjectBySlug } = useObjectMetadata(); const { findActiveObjectBySlug, loading } = useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug); const activeObject = findActiveObjectBySlug(objectSlug);
const { createField } = useFieldMetadata(); const { createField } = useFieldMetadata();
useEffect(() => { useEffect(() => {
if (loading) return;
if (!activeObject) navigate(AppPath.NotFound); if (!activeObject) navigate(AppPath.NotFound);
}, [activeObject, navigate]); }, [activeObject, loading, navigate]);
const [formValues, setFormValues] = useState<{ const [formValues, setFormValues] = useState<{
description?: string; description?: string;
@ -32,13 +33,12 @@ export const SettingsObjectNewFieldStep2 = () => {
type: ObjectFieldDataType; type: ObjectFieldDataType;
}>({ icon: 'IconUsers', label: '', type: 'number' }); }>({ icon: 'IconUsers', label: '', type: 'number' });
if (!activeObject) return null;
const canSave = !!formValues.label; const canSave = !!formValues.label;
const handleSave = async () => { const handleSave = async () => {
if (!activeObject) return;
await createField({ ...formValues, objectId: activeObject.id }); await createField({ ...formValues, objectId: activeObject.id });
navigate(`/settings/objects/${objectSlug}`); navigate(`/settings/objects/${objectSlug}`);
}; };
@ -50,7 +50,7 @@ export const SettingsObjectNewFieldStep2 = () => {
links={[ links={[
{ children: 'Objects', href: '/settings/objects' }, { children: 'Objects', href: '/settings/objects' },
{ {
children: activeObject?.labelPlural ?? '', children: activeObject.labelPlural,
href: `/settings/objects/${objectSlug}`, href: `/settings/objects/${objectSlug}`,
}, },
{ children: 'New Field' }, { children: 'New Field' },
@ -58,9 +58,7 @@ export const SettingsObjectNewFieldStep2 = () => {
/> />
<SaveAndCancelButtons <SaveAndCancelButtons
isSaveDisabled={!canSave} isSaveDisabled={!canSave}
onCancel={() => { onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
navigate(`/settings/objects/${objectSlug}`);
}}
onSave={handleSave} onSave={handleSave}
/> />
</SettingsHeaderContainer> </SettingsHeaderContainer>