diff --git a/front/src/modules/settings/data-model/object-edit/SettingsObjectIconSection.tsx b/front/src/modules/settings/data-model/object-edit/SettingsObjectIconSection.tsx index 69c1048f8..1f9030bfa 100644 --- a/front/src/modules/settings/data-model/object-edit/SettingsObjectIconSection.tsx +++ b/front/src/modules/settings/data-model/object-edit/SettingsObjectIconSection.tsx @@ -1,9 +1,9 @@ import styled from '@emotion/styled'; -import { IconPigMoney } from '@/ui/display/icon'; import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { H2Title } from '@/ui/display/typography/components/H2Title'; import { IconPicker } from '@/ui/input/components/IconPicker'; +import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon'; import { Section } from '@/ui/layout/section/components/Section'; import ArrowRight from '../assets/ArrowRight.svg'; @@ -25,7 +25,6 @@ const StyledArrowContainer = styled.div` type SettingsObjectIconSectionProps = { disabled?: boolean; - Icon?: IconComponent; iconKey?: string; label?: string; onChange?: (icon: { Icon: IconComponent; iconKey: string }) => void; @@ -33,11 +32,12 @@ type SettingsObjectIconSectionProps = { export const SettingsObjectIconSection = ({ disabled, - Icon = IconPigMoney, iconKey = 'IconPigMoney', label, onChange, }: SettingsObjectIconSectionProps) => { + const { Icon } = useLazyLoadIcon(iconKey); + return (
- + {!!Icon && ( + + )} {label} diff --git a/front/src/modules/ui/display/icon/index.ts b/front/src/modules/ui/display/icon/index.ts index 2a528203a..456fb1892 100644 --- a/front/src/modules/ui/display/icon/index.ts +++ b/front/src/modules/ui/display/icon/index.ts @@ -69,7 +69,6 @@ export { IconNumbers, IconPencil, IconPhone, - IconPigMoney, IconPlane, IconPlug, IconPlus, diff --git a/front/src/pages/settings/data-model/SettingsObjectEdit.tsx b/front/src/pages/settings/data-model/SettingsObjectEdit.tsx index 765d2b192..cb2d49000 100644 --- a/front/src/pages/settings/data-model/SettingsObjectEdit.tsx +++ b/front/src/pages/settings/data-model/SettingsObjectEdit.tsx @@ -1,9 +1,9 @@ import { useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; +import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata'; import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { SettingsObjectFormSection } from '@/settings/data-model/components/SettingsObjectFormSection'; -import { activeObjectItems } from '@/settings/data-model/constants/mockObjects'; import { SettingsObjectIconSection } from '@/settings/data-model/object-edit/SettingsObjectIconSection'; import { AppPath } from '@/types/AppPath'; import { IconArchive, IconSettings } from '@/ui/display/icon'; @@ -15,14 +15,16 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb'; export const SettingsObjectEdit = () => { 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]); return ( @@ -31,7 +33,7 @@ export const SettingsObjectEdit = () => { links={[ { children: 'Objects', href: '/settings/objects' }, { - children: activeObject?.name ?? '', + children: activeObject?.labelPlural ?? '', href: `/settings/objects/${pluralObjectName}`, }, { children: 'Edit' }, @@ -40,16 +42,15 @@ export const SettingsObjectEdit = () => { {activeObject && ( <> )}