diff --git a/front/src/modules/metadata/hooks/useObjectMetadata.ts b/front/src/modules/metadata/hooks/useObjectMetadata.ts index addab6790..0b30dc02f 100644 --- a/front/src/modules/metadata/hooks/useObjectMetadata.ts +++ b/front/src/modules/metadata/hooks/useObjectMetadata.ts @@ -1,15 +1,35 @@ -import { useRecoilValue } from 'recoil'; +import { MetadataObject } from '../types/MetadataObject'; -import { activeMetadataObjectsSelector } from '../states/selectors/activeMetadataObjectsSelector'; -import { disabledMetadataObjectsSelector } from '../states/selectors/disabledMetadataObjectsSelector'; +import { useFindManyMetadataObjects } from './useFindManyMetadataObjects'; +import { useUpdateOneMetadataObject } from './useUpdateOneMetadataObject'; export const useObjectMetadata = () => { - const activeMetadataObjects = useRecoilValue(activeMetadataObjectsSelector); - const disabledMetadataObjects = useRecoilValue( - disabledMetadataObjectsSelector, + const { metadataObjects } = useFindManyMetadataObjects(); + + const activeMetadataObjects = metadataObjects.filter( + ({ isActive }) => isActive, + ); + const disabledMetadataObjects = metadataObjects.filter( + ({ isActive }) => !isActive, ); + const { updateOneMetadataObject } = useUpdateOneMetadataObject(); + + const activateObject = (metadataObject: MetadataObject) => + updateOneMetadataObject({ + idToUpdate: metadataObject.id, + updatePayload: { isActive: true }, + }); + + const disableObject = (metadataObject: MetadataObject) => + updateOneMetadataObject({ + idToUpdate: metadataObject.id, + updatePayload: { isActive: false }, + }); + return { + activateObject, + disableObject, activeObjects: activeMetadataObjects, disabledObjects: disabledMetadataObjects, }; diff --git a/front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx b/front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx index 442705acd..3e29adb18 100644 --- a/front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx +++ b/front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx @@ -1,81 +1,113 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconDotsVertical } from '@/ui/display/icon'; +import { IconArchive, IconDotsVertical, IconPencil } from '@/ui/display/icon'; import { Tag } from '@/ui/display/tag/components/Tag'; import { H2Title } from '@/ui/display/typography/components/H2Title'; +import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon'; +import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; +import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; +import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; +import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; +import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { Section } from '@/ui/layout/section/components/Section'; -import { TableCell } from '@/ui/layout/table/components/TableCell'; -import { TableRow } from '@/ui/layout/table/components/TableRow'; +import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; type SettingsAboutSectionProps = { iconKey?: string; isCustom: boolean; name: string; + onDisable: () => void; + onEdit: () => void; }; -const StyledIconTableCell = styled(TableCell)` - justify-content: center; - padding-right: ${({ theme }) => theme.spacing(1)}; -`; - -const StyledTableRow = styled(TableRow)` +const StyledCard = styled.div` + align-items: center; background-color: ${({ theme }) => theme.background.secondary}; border: ${({ theme }) => `1px solid ${theme.border.color.medium}`}; + border-radius: ${({ theme }) => theme.border.radius.sm}; + display: flex; + gap: ${({ theme }) => theme.spacing(2)}; + padding: ${({ theme }) => theme.spacing(2)}; `; -const StyledNameTableCell = styled(TableCell)` +const StyledName = styled.div` color: ${({ theme }) => theme.font.color.primary}; + display: flex; gap: ${({ theme }) => theme.spacing(2)}; + margin-right: auto; `; const StyledTag = styled(Tag)` box-sizing: border-box; - height: ${({ theme }) => theme.spacing(4)}; + height: ${({ theme }) => theme.spacing(6)}; `; -const StyledIconDotsVertical = styled(IconDotsVertical)` - color: ${({ theme }) => theme.font.color.tertiary}; -`; - -const StyledFlexContainer = styled.div` - display: flex; - justify-content: flex-end; -`; +const dropdownScopeId = 'settings-object-edit-about-menu-dropdown'; export const SettingsAboutSection = ({ iconKey = '', isCustom, name, + onDisable, + onEdit, }: SettingsAboutSectionProps) => { const theme = useTheme(); const { Icon } = useLazyLoadIcon(iconKey); + const { closeDropdown } = useDropdown({ dropdownScopeId }); + + const handleEdit = () => { + onEdit(); + closeDropdown(); + }; + + const handleDisable = () => { + onDisable(); + closeDropdown(); + }; + return (
- - + + {!!Icon && } {name} - - - - {isCustom ? ( - - ) : ( - - )} - - - - - - + + {isCustom ? ( + + ) : ( + + )} + + + } + dropdownComponents={ + + + + + + + } + dropdownHotkeyScope={{ + scope: dropdownScopeId, + }} + /> + +
); }; diff --git a/front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx b/front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx index ea969e25a..568def3c5 100644 --- a/front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx +++ b/front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx @@ -4,24 +4,37 @@ import { IconArchiveOff } from '@/ui/input/constants/icons'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; +import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; type SettingsObjectDisabledMenuDropDownProps = { scopeKey: string; - handleActivate: () => void; - handleErase: () => void; + onActivate: () => void; + onErase: () => void; }; export const SettingsObjectDisabledMenuDropDown = ({ scopeKey, - handleActivate, - handleErase, + onActivate, + onErase, }: SettingsObjectDisabledMenuDropDownProps) => { + const dropdownScopeId = scopeKey + '-settings-object-disabled-menu-dropdown'; + + const { closeDropdown } = useDropdown({ dropdownScopeId }); + + const handleActivate = () => { + onActivate(); + closeDropdown(); + }; + + const handleErase = () => { + onErase(); + closeDropdown(); + }; + return ( - + @@ -44,7 +57,7 @@ export const SettingsObjectDisabledMenuDropDown = ({ } dropdownHotkeyScope={{ - scope: scopeKey + '-settings-object-disabled-menu-dropdown', + scope: dropdownScopeId, }} /> diff --git a/front/src/modules/settings/data-model/objects/__stories__/SettingsObjectDisabledMenuDropDown.stories.tsx b/front/src/modules/settings/data-model/objects/__stories__/SettingsObjectDisabledMenuDropDown.stories.tsx index 97e67f749..b3344c548 100644 --- a/front/src/modules/settings/data-model/objects/__stories__/SettingsObjectDisabledMenuDropDown.stories.tsx +++ b/front/src/modules/settings/data-model/objects/__stories__/SettingsObjectDisabledMenuDropDown.stories.tsx @@ -23,8 +23,8 @@ const meta: Meta = { component: SettingsObjectDisabledMenuDropDown, args: { scopeKey: 'settings-object-disabled-menu-dropdown', - handleActivate: handleActivateMockFunction, - handleErase: handleEraseMockFunction, + onActivate: handleActivateMockFunction, + onErase: handleEraseMockFunction, }, decorators: [ComponentDecorator, ClearMocksDecorator], parameters: { diff --git a/front/src/pages/settings/data-model/SettingsObjectDetail.tsx b/front/src/pages/settings/data-model/SettingsObjectDetail.tsx index cdca7fbd5..46a037a4a 100644 --- a/front/src/pages/settings/data-model/SettingsObjectDetail.tsx +++ b/front/src/pages/settings/data-model/SettingsObjectDetail.tsx @@ -30,7 +30,7 @@ export const SettingsObjectDetail = () => { const navigate = useNavigate(); const { pluralObjectName = '' } = useParams(); - const { activeObjects } = useObjectMetadata(); + const { activeObjects, disableObject } = useObjectMetadata(); const activeObject = activeObjects.find( (activeObject) => activeObject.namePlural === pluralObjectName, ); @@ -62,6 +62,13 @@ export const SettingsObjectDetail = () => { iconKey={activeObject.icon ?? undefined} name={activeObject.labelPlural || ''} isCustom={activeObject.isCustom} + onDisable={() => { + disableObject(activeObject); + navigate('/settings/objects'); + }} + onEdit={() => + navigate(`/settings/objects/${pluralObjectName}/edit`) + } /> )}
@@ -76,15 +83,17 @@ export const SettingsObjectDetail = () => { Data type - - {activeFields?.map((fieldItem) => ( - - ))} - + {!!activeFields?.length && ( + + {activeFields.map((fieldItem) => ( + + ))} + + )} {!!disabledFields?.length && ( {disabledFields.map((fieldItem) => ( diff --git a/front/src/pages/settings/data-model/SettingsObjectEdit.tsx b/front/src/pages/settings/data-model/SettingsObjectEdit.tsx index cb2d49000..2e5dc3a5e 100644 --- a/front/src/pages/settings/data-model/SettingsObjectEdit.tsx +++ b/front/src/pages/settings/data-model/SettingsObjectEdit.tsx @@ -17,7 +17,7 @@ export const SettingsObjectEdit = () => { const navigate = useNavigate(); const { pluralObjectName = '' } = useParams(); - const { activeObjects } = useObjectMetadata(); + const { activeObjects, disableObject } = useObjectMetadata(); const activeObject = activeObjects.find( (activeObject) => activeObject.namePlural === pluralObjectName, ); @@ -52,17 +52,20 @@ export const SettingsObjectEdit = () => { pluralName={activeObject.labelPlural} description={activeObject.description ?? undefined} /> +
+ +
)} -
- -
); diff --git a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx index ec4b4785e..ebf7fc445 100644 --- a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx +++ b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx @@ -87,15 +87,17 @@ export const SettingsObjectNewFieldStep1 = () => { Data type - - {activeFields?.map((fieldItem) => ( - - ))} - + {!!activeFields?.length && ( + + {activeFields.map((fieldItem) => ( + + ))} + + )} {!!disabledFields?.length && ( {disabledFields.map((fieldItem) => ( diff --git a/front/src/pages/settings/data-model/SettingsObjects.tsx b/front/src/pages/settings/data-model/SettingsObjects.tsx index 2f79fd4fc..657d61287 100644 --- a/front/src/pages/settings/data-model/SettingsObjects.tsx +++ b/front/src/pages/settings/data-model/SettingsObjects.tsx @@ -33,7 +33,8 @@ export const SettingsObjects = () => { const theme = useTheme(); const navigate = useNavigate(); - const { activeObjects, disabledObjects } = useObjectMetadata(); + const { activateObject, activeObjects, disabledObjects } = + useObjectMetadata(); return ( @@ -62,23 +63,25 @@ export const SettingsObjects = () => { Instances - - {activeObjects.map((objectItem) => ( - - } - onClick={() => - navigate(`/settings/objects/${objectItem.namePlural}`) - } - /> - ))} - + {!!activeObjects.length && ( + + {activeObjects.map((objectItem) => ( + + } + onClick={() => + navigate(`/settings/objects/${objectItem.namePlural}`) + } + /> + ))} + + )} {!!disabledObjects.length && ( {disabledObjects.map((objectItem) => ( @@ -88,8 +91,8 @@ export const SettingsObjects = () => { action={ undefined} - handleErase={() => undefined} + onActivate={() => activateObject(objectItem)} + onErase={() => undefined} /> } />