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

feat: get object metadata from backend in Object Detail and New Field… (#2122)

Browse Source 
* feat: get object metadata from backend in Object Detail and New Field - Step 1

Closes #2008

* refactor: add useLazyLoadIcon hook
This commit is contained in:
Thaïs
2023-10-19 16:58:18 +02:00
committed by GitHub
parent bea9d0835b
commit f35ea19f4d
12 changed files with 133 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx
View File

@ -2,17 +2,17 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconDotsVertical } from '@/ui/display/icon';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { Tag } from '@/ui/display/tag/components/Tag';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
import { Section } from '@/ui/layout/section/components/Section';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';
type SettingsAboutSectionProps = {
Icon: IconComponent;
iconKey?: string;
isCustom: boolean;
name: string;
type: string;
};
const StyledIconTableCell = styled(TableCell)`
@ -45,25 +45,27 @@ const StyledFlexContainer = styled.div`
`;
export const SettingsAboutSection = ({
Icon,
iconKey = '',
isCustom,
name,
type,
}: SettingsAboutSectionProps) => {
const theme = useTheme();
const { Icon } = useLazyLoadIcon(iconKey);
return (
<Section>
<H2Title title="About" description={`Manage you object`} />
<H2Title title="About" description="Manage your object" />
<StyledTableRow>
<StyledNameTableCell>
<Icon size={theme.icon.size.md} />
{!!Icon && <Icon size={theme.icon.size.md} />}
{name}
</StyledNameTableCell>
<StyledFlexContainer>
<TableCell>
{type === 'standard' ? (
<StyledTag color="blue" text="Standard" />
) : (
{isCustom ? (
<StyledTag color="orange" text="Custom" />
) : (
<StyledTag color="blue" text="Standard" />
)}
</TableCell>
<StyledIconTableCell>

8
front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
View File

@ -11,9 +11,9 @@ import {
} from '@/ui/display/icon';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { ObjectFieldItem } from '../../types/ObjectFieldItem';
import { ObjectFieldDataType } from '../../types/ObjectFieldDataType';
const StyledDataType = styled.div<{ value: ObjectFieldItem['dataType'] }>`
const StyledDataType = styled.div<{ value: ObjectFieldDataType }>`
align-items: center;
border: 1px solid transparent;
border-radius: ${({ theme }) => theme.border.radius.sm};
@ -33,7 +33,7 @@ const StyledDataType = styled.div<{ value: ObjectFieldItem['dataType'] }>`
`;
const dataTypes: Record<
ObjectFieldItem['dataType'],
ObjectFieldDataType,
{ label: string; Icon: IconComponent }
> = {
boolean: { label: 'True/False', Icon: IconCheck },
@ -45,7 +45,7 @@ const dataTypes: Record<
};
type SettingsObjectFieldDataTypeProps = {
value: ObjectFieldItem['dataType'];
value: ObjectFieldDataType;
};
export const SettingsObjectFieldDataType = ({

19
front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
View File

@ -3,16 +3,18 @@ import styled from '@emotion/styled';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import { Field } from '~/generated-metadata/graphql';
import { ObjectFieldItem } from '../../types/ObjectFieldItem';
import { ObjectFieldDataType } from '../../types/ObjectFieldDataType';
import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType';
type SettingsObjectFieldItemTableRowProps = {
ActionIcon: IconComponent;
fieldItem: ObjectFieldItem;
fieldItem: Field;
};
export const StyledObjectFieldTableRow = styled(TableRow)`
@ -34,18 +36,19 @@ export const SettingsObjectFieldItemTableRow = ({
fieldItem,
}: SettingsObjectFieldItemTableRowProps) => {
const theme = useTheme();
const { Icon } = useLazyLoadIcon(fieldItem.icon ?? '');
return (
<StyledObjectFieldTableRow>
<StyledNameTableCell>
<fieldItem.Icon size={theme.icon.size.md} />
{fieldItem.name}
{!!Icon && <Icon size={theme.icon.size.md} />}
{fieldItem.label}
</StyledNameTableCell>
<TableCell>{fieldItem.isCustom ? 'Custom' : 'Standard'}</TableCell>
<TableCell>
{fieldItem.type === 'standard' ? 'Standard' : 'Custom'}
</TableCell>
<TableCell>
<SettingsObjectFieldDataType value={fieldItem.dataType} />
<SettingsObjectFieldDataType
value={fieldItem.type as ObjectFieldDataType}
/>
</TableCell>
<StyledIconTableCell>
<LightIconButton Icon={ActionIcon} accent="tertiary" />

6
front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
View File

@ -4,14 +4,13 @@ import styled from '@emotion/styled';
import { useFindManyObjects } from '@/metadata/hooks/useFindManyObjects';
import { MetadataObject } from '@/metadata/types/MetadataObject';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { Tag } from '@/ui/display/tag/components/Tag';
import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';
type SettingsObjectItemTableRowProps = {
action: ReactNode;
Icon?: IconComponent;
objectItem: MetadataObject;
onClick?: () => void;
};
@ -37,7 +36,6 @@ const StyledActionTableCell = styled(TableCell)`
export const SettingsObjectItemTableRow = ({
action,
Icon,
objectItem,
onClick,
}: SettingsObjectItemTableRowProps) => {
@ -47,6 +45,8 @@ export const SettingsObjectItemTableRow = ({
objectNamePlural: objectItem.namePlural,
});
const { Icon } = useLazyLoadIcon(objectItem.icon ?? '');
return (
<StyledObjectTableRow key={objectItem.namePlural} onClick={onClick}>
<StyledNameTableCell>

7
front/src/modules/settings/data-model/types/ObjectFieldDataType.ts Normal file
View File

@ -0,0 +1,7 @@
export type ObjectFieldDataType =
| 'boolean'
| 'number'
| 'relation'
| 'social'
| 'teammate'
| 'text';

4
front/src/modules/settings/data-model/types/ObjectFieldItem.ts
View File

@ -1,8 +1,10 @@
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { ObjectFieldDataType } from './ObjectFieldDataType';
export type ObjectFieldItem = {
name: string;
Icon: IconComponent;
type: 'standard' | 'custom';
dataType: 'boolean' | 'number' | 'relation' | 'social' | 'teammate' | 'text';
dataType: ObjectFieldDataType;
};

12
front/src/modules/ui/input/components/IconPicker.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useMemo, useState } from 'react';
import { useMemo, useState } from 'react';
import styled from '@emotion/styled';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
@ -13,6 +13,7 @@ import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { IconButton } from '../button/components/IconButton';
import { LightIconButton } from '../button/components/LightIconButton';
import { IconApps } from '../constants/icons';
import { useLazyLoadIcons } from '../hooks/useLazyLoadIcons';
import { DropdownMenuSkeletonItem } from '../relation-picker/components/skeletons/DropdownMenuSkeletonItem';
import { IconPickerHotkeyScope } from '../types/IconPickerHotkeyScope';
@ -48,17 +49,10 @@ export const IconPicker = ({
onOpen,
}: IconPickerProps) => {
const [searchString, setSearchString] = useState('');
const [isLoading, setIsLoading] = useState(true);
const [icons, setIcons] = useState<Record<string, IconComponent>>({});
const { closeDropdown } = useDropdown({ dropdownScopeId: 'icon-picker' });
useEffect(() => {
import('../constants/icons').then((lazyLoadedIcons) => {
setIcons(lazyLoadedIcons);
setIsLoading(false);
});
}, []);
const { icons, isLoadingIcons: isLoading } = useLazyLoadIcons();
const iconKeys = useMemo(() => {
const filteredIconKeys = Object.keys(icons).filter(

21
front/src/modules/ui/input/hooks/useLazyLoadIcon.ts Normal file
View File

@ -0,0 +1,21 @@
import { useEffect, useState } from 'react';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
export const useLazyLoadIcon = (iconKey: string) => {
const [Icon, setIcon] = useState<IconComponent | undefined>();
const [isLoadingIcon, setIsLoadingIcon] = useState(true);
useEffect(() => {
if (!iconKey) return;
import(`@tabler/icons-react/dist/esm/icons/${iconKey}.js`).then(
(lazyLoadedIcon) => {
setIcon(lazyLoadedIcon.default);
setIsLoadingIcon(false);
},
);
}, [iconKey]);
return { Icon, isLoadingIcon };
};

17
front/src/modules/ui/input/hooks/useLazyLoadIcons.ts Normal file
View File

@ -0,0 +1,17 @@
import { useEffect, useState } from 'react';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
export const useLazyLoadIcons = () => {
const [icons, setIcons] = useState<Record<string, IconComponent>>({});
const [isLoadingIcons, setIsLoadingIcons] = useState(true);
useEffect(() => {
import('../constants/icons').then((lazyLoadedIcons) => {
setIcons(lazyLoadedIcons);
setIsLoadingIcons(false);
});
}, []);
return { icons, isLoadingIcons };
};

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

@ -2,12 +2,8 @@ import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import styled from '@emotion/styled';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import {
activeFieldItems,
activeObjectItems,
disabledFieldItems,
} from '@/settings/data-model/constants/mockObjects';
import { SettingsAboutSection } from '@/settings/data-model/object-details/components/SettingsObjectAboutSection';
import {
SettingsObjectFieldItemTableRow,
@ -34,13 +30,23 @@ export const SettingsObjectDetail = () => {
const navigate = useNavigate();
const { pluralObjectName = '' } = useParams();
const activeObject = activeObjectItems.find(
(activeObject) => activeObject.name.toLowerCase() === pluralObjectName,
const { activeObjects } = useObjectMetadata();
const activeObject = activeObjects.find(
(activeObject) => activeObject.namePlural === pluralObjectName,
);
useEffect(() => {
if (!activeObject) navigate(AppPath.NotFound);
}, [activeObject, navigate]);
if (activeObjects.length && !activeObject) {
navigate(AppPath.NotFound);
}
}, [activeObject, activeObjects.length, navigate]);
const activeFields = activeObject?.fields.filter(
(fieldItem) => fieldItem.isActive,
);
const disabledFields = activeObject?.fields.filter(
(fieldItem) => !fieldItem.isActive,
);
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@ -48,20 +54,20 @@ export const SettingsObjectDetail = () => {
<Breadcrumb
links={[
{ children: 'Objects', href: '/settings/objects' },
{ children: activeObject?.name ?? '' },
{ children: activeObject?.labelPlural ?? '' },
]}
/>
{activeObject && (
<SettingsAboutSection
Icon={activeObject?.Icon}
name={activeObject.name}
type={activeObject.type}
iconKey={activeObject.icon ?? undefined}
name={activeObject.labelPlural || ''}
isCustom={activeObject.isCustom}
/>
)}
<Section>
<H2Title
title="Fields"
description={`Customise the fields available in the ${activeObject?.singularName} views and their display order in the ${activeObject?.singularName} detail view and menus.`}
description={`Customise the fields available in the ${activeObject?.nameSingular} views and their display order in the ${activeObject?.nameSingular} detail view and menus.`}
/>
<Table>
<StyledObjectFieldTableRow>
@ -71,21 +77,21 @@ export const SettingsObjectDetail = () => {
<TableHeader></TableHeader>
</StyledObjectFieldTableRow>
<TableSection title="Active">
{activeFieldItems.map((fieldItem) => (
{activeFields?.map((fieldItem) => (
<SettingsObjectFieldItemTableRow
key={fieldItem.name}
ActionIcon={IconDotsVertical}
key={fieldItem.id}
fieldItem={fieldItem}
ActionIcon={IconDotsVertical}
/>
))}
</TableSection>
{!!disabledFieldItems.length && (
{!!disabledFields?.length && (
<TableSection isInitiallyExpanded={false} title="Disabled">
{disabledFieldItems.map((fieldItem) => (
{disabledFields.map((fieldItem) => (
<SettingsObjectFieldItemTableRow
key={fieldItem.name}
ActionIcon={IconDotsVertical}
key={fieldItem.id}
fieldItem={fieldItem}
ActionIcon={IconDotsVertical}
/>
))}
</TableSection>
@ -99,7 +105,7 @@ export const SettingsObjectDetail = () => {
variant="secondary"
onClick={() =>
navigate(
disabledFieldItems.length
disabledFields?.length
? './new-field/step-1'
: './new-field/step-2',
)

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

@ -2,14 +2,10 @@ import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import styled from '@emotion/styled';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import {
activeFieldItems,
activeObjectItems,
disabledFieldItems,
} from '@/settings/data-model/constants/mockObjects';
import {
SettingsObjectFieldItemTableRow,
StyledObjectFieldTableRow,
@ -37,14 +33,25 @@ const StyledAddCustomFieldButton = styled(Button)`
export const SettingsObjectNewFieldStep1 = () => {
const navigate = useNavigate();
const { pluralObjectName = '' } = useParams();
const activeObject = activeObjectItems.find(
(activeObject) => activeObject.name.toLowerCase() === pluralObjectName,
const { activeObjects } = useObjectMetadata();
const activeObject = activeObjects.find(
(activeObject) => activeObject.namePlural === pluralObjectName,
);
useEffect(() => {
if (!activeObject) navigate(AppPath.NotFound);
}, [activeObject, navigate]);
if (activeObjects.length && !activeObject) {
navigate(AppPath.NotFound);
}
}, [activeObject, activeObjects.length, navigate]);
const activeFields = activeObject?.fields.filter(
(fieldItem) => fieldItem.isActive,
);
const disabledFields = activeObject?.fields.filter(
(fieldItem) => !fieldItem.isActive,
);
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@ -54,7 +61,7 @@ export const SettingsObjectNewFieldStep1 = () => {
links={[
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObject?.name ?? '',
children: activeObject?.labelPlural ?? '',
href: `/settings/objects/${pluralObjectName}`,
},
{ children: 'New Field' },
@ -65,7 +72,7 @@ export const SettingsObjectNewFieldStep1 = () => {
onCancel={() => {
navigate(`/settings/objects/${pluralObjectName}`);
}}
onSave={() => {}}
onSave={() => undefined}
/>
</SettingsHeaderContainer>
<StyledSection>
@ -81,21 +88,21 @@ export const SettingsObjectNewFieldStep1 = () => {
<TableHeader></TableHeader>
</StyledObjectFieldTableRow>
<TableSection isInitiallyExpanded={false} title="Active">
{activeFieldItems.map((fieldItem) => (
{activeFields?.map((fieldItem) => (
<SettingsObjectFieldItemTableRow
key={fieldItem.name}
ActionIcon={IconMinus}
key={fieldItem.id}
fieldItem={fieldItem}
ActionIcon={IconMinus}
/>
))}
</TableSection>
{!!disabledFieldItems.length && (
{!!disabledFields?.length && (
<TableSection title="Disabled">
{disabledFieldItems.map((fieldItem) => (
{disabledFields.map((fieldItem) => (
<SettingsObjectFieldItemTableRow
key={fieldItem.name}
ActionIcon={IconPlus}
fieldItem={fieldItem}
ActionIcon={IconPlus}
/>
))}
</TableSection>

12
front/src/pages/settings/data-model/SettingsObjects.tsx
View File

@ -1,4 +1,3 @@
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
@ -13,7 +12,6 @@ import {
import { SettingsObjectCoverImage } from '@/settings/data-model/objects/SettingsObjectCoverImage';
import { SettingsObjectDisabledMenuDropDown } from '@/settings/data-model/objects/SettingsObjectDisabledMenuDropDown';
import { IconChevronRight, IconPlus, IconSettings } from '@/ui/display/icon';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { H1Title } from '@/ui/display/typography/components/H1Title';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Button } from '@/ui/input/button/components/Button';
@ -37,14 +35,6 @@ export const SettingsObjects = () => {
const { activeObjects, disabledObjects } = useObjectMetadata();
const [icons, setIcons] = useState<Record<string, IconComponent>>({});
useEffect(() => {
import('@/ui/input/constants/icons').then((lazyLoadedIcons) => {
setIcons(lazyLoadedIcons);
});
}, []);
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
@ -76,7 +66,6 @@ export const SettingsObjects = () => {
{activeObjects.map((objectItem) => (
<SettingsObjectItemTableRow
key={objectItem.namePlural}
Icon={icons[objectItem.icon || '']}
objectItem={objectItem}
action={
<StyledIconChevronRight
@ -95,7 +84,6 @@ export const SettingsObjects = () => {
{disabledObjects.map((objectItem) => (
<SettingsObjectItemTableRow
key={objectItem.namePlural}
Icon={icons[objectItem.icon || '']}
objectItem={objectItem}
action={
<SettingsObjectDisabledMenuDropDown