From 291feae595c4a29ead1c146e0c9a4e34bd533dd2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tha=C3=AFs?= Date: Tue, 24 Oct 2023 08:30:13 +0200 Subject: [PATCH] feat: activate, disable and erase fields in Object Detail (#2200) * feat: activate and disable objects Closes #2144, Closes #2148, Closes #2154 * feat: activate, disable and erase fields in Object Detail Closes #2158 --------- Co-authored-by: Charles Bochet --- .../metadata/hooks/useFieldMetadata.ts | 30 ++++++++ .../hooks/useUpdateOneMetadataField.ts | 1 + ...ettingsObjectFieldActiveActionDropdown.tsx | 70 +++++++++++++++++++ ...tingsObjectFieldDisabledActionDropdown.tsx | 68 ++++++++++++++++++ .../SettingsObjectFieldItemTableRow.tsx | 9 +-- .../SettingsObjectDisabledMenuDropDown.tsx | 2 +- front/src/modules/ui/display/icon/index.ts | 1 + .../data-model/SettingsObjectDetail.tsx | 28 +++++++- .../SettingsObjectNewFieldStep1.tsx | 9 ++- 9 files changed, 206 insertions(+), 12 deletions(-) create mode 100644 front/src/modules/metadata/hooks/useFieldMetadata.ts create mode 100644 front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx create mode 100644 front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx diff --git a/front/src/modules/metadata/hooks/useFieldMetadata.ts b/front/src/modules/metadata/hooks/useFieldMetadata.ts new file mode 100644 index 000000000..c174a7bbb --- /dev/null +++ b/front/src/modules/metadata/hooks/useFieldMetadata.ts @@ -0,0 +1,30 @@ +import { Field } from '~/generated/graphql'; + +import { useDeleteOneMetadataField } from './useDeleteOneMetadataField'; +import { useUpdateOneMetadataField } from './useUpdateOneMetadataField'; + +export const useFieldMetadata = () => { + const { updateOneMetadataField } = useUpdateOneMetadataField(); + const { deleteOneMetadataField } = useDeleteOneMetadataField(); + + const activateField = (metadataField: Field) => + updateOneMetadataField({ + fieldIdToUpdate: metadataField.id, + updatePayload: { isActive: true }, + }); + + const disableField = (metadataField: Field) => + updateOneMetadataField({ + fieldIdToUpdate: metadataField.id, + updatePayload: { isActive: false }, + }); + + const eraseField = (metadataField: Field) => + deleteOneMetadataField(metadataField.id); + + return { + activateField, + disableField, + eraseField, + }; +}; diff --git a/front/src/modules/metadata/hooks/useUpdateOneMetadataField.ts b/front/src/modules/metadata/hooks/useUpdateOneMetadataField.ts index f10c937c6..27f003ae0 100644 --- a/front/src/modules/metadata/hooks/useUpdateOneMetadataField.ts +++ b/front/src/modules/metadata/hooks/useUpdateOneMetadataField.ts @@ -35,6 +35,7 @@ export const useUpdateOneMetadataField = () => { variables: { idToUpdate: fieldIdToUpdate, updatePayload: { + ...updatePayload, label: updatePayload.label ?? undefined, }, }, diff --git a/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx b/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx new file mode 100644 index 000000000..471682625 --- /dev/null +++ b/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx @@ -0,0 +1,70 @@ +import { + IconArchive, + IconDotsVertical, + IconEye, + IconPencil, +} from '@/ui/display/icon'; +import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; +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 SettingsObjectFieldActiveActionDropdownProps = { + isCustomField: boolean; + onDisable: () => void; + onEdit: () => void; + scopeKey: string; +}; + +export const SettingsObjectFieldActiveActionDropdown = ({ + isCustomField, + onDisable, + onEdit, + scopeKey, +}: SettingsObjectFieldActiveActionDropdownProps) => { + const dropdownScopeId = `${scopeKey}-settings-field-active-action-dropdown`; + + const { closeDropdown } = useDropdown({ dropdownScopeId }); + + const handleEdit = () => { + onEdit(); + closeDropdown(); + }; + + const handleDisable = () => { + onDisable(); + closeDropdown(); + }; + + return ( + + + } + dropdownComponents={ + + + + + + + } + dropdownHotkeyScope={{ + scope: dropdownScopeId, + }} + /> + + ); +}; diff --git a/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx b/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx new file mode 100644 index 000000000..d9fa6ebf0 --- /dev/null +++ b/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx @@ -0,0 +1,68 @@ +import { IconArchiveOff, IconDotsVertical, IconTrash } from '@/ui/display/icon'; +import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; +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 SettingsObjectFieldDisabledActionDropdownProps = { + isCustomField: boolean; + onActivate: () => void; + onErase: () => void; + scopeKey: string; +}; + +export const SettingsObjectFieldDisabledActionDropdown = ({ + isCustomField, + onActivate, + onErase, + scopeKey, +}: SettingsObjectFieldDisabledActionDropdownProps) => { + const dropdownScopeId = `${scopeKey}-settings-field-disabled-action-dropdown`; + + const { closeDropdown } = useDropdown({ dropdownScopeId }); + + const handleActivate = () => { + onActivate(); + closeDropdown(); + }; + + const handleErase = () => { + onErase(); + closeDropdown(); + }; + + return ( + + + } + dropdownComponents={ + + + + {isCustomField && ( + + )} + + + } + dropdownHotkeyScope={{ + scope: dropdownScopeId, + }} + /> + + ); +}; diff --git a/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx index f427c4b4c..f18f66ebb 100644 --- a/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx +++ b/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx @@ -1,8 +1,7 @@ +import { ReactNode } from 'react'; import { useTheme } from '@emotion/react'; 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'; @@ -13,7 +12,7 @@ import { ObjectFieldDataType } from '../../types/ObjectFieldDataType'; import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType'; type SettingsObjectFieldItemTableRowProps = { - ActionIcon: IconComponent; + ActionIcon: ReactNode; fieldItem: Field; }; @@ -50,9 +49,7 @@ export const SettingsObjectFieldItemTableRow = ({ value={fieldItem.type as ObjectFieldDataType} /> - - - + {ActionIcon} ); }; diff --git a/front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx b/front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx index 568def3c5..57e4d2eda 100644 --- a/front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx +++ b/front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx @@ -19,7 +19,7 @@ export const SettingsObjectDisabledMenuDropDown = ({ onActivate, onErase, }: SettingsObjectDisabledMenuDropDownProps) => { - const dropdownScopeId = scopeKey + '-settings-object-disabled-menu-dropdown'; + const dropdownScopeId = `${scopeKey}-settings-object-disabled-menu-dropdown`; const { closeDropdown } = useDropdown({ dropdownScopeId }); diff --git a/front/src/modules/ui/display/icon/index.ts b/front/src/modules/ui/display/icon/index.ts index 982e32b9a..ea4d21684 100644 --- a/front/src/modules/ui/display/icon/index.ts +++ b/front/src/modules/ui/display/icon/index.ts @@ -4,6 +4,7 @@ export { IconAlertCircle, IconAlertTriangle, IconArchive, + IconArchiveOff, IconArrowBack, IconArrowDown, IconArrowLeft, diff --git a/front/src/pages/settings/data-model/SettingsObjectDetail.tsx b/front/src/pages/settings/data-model/SettingsObjectDetail.tsx index 46a037a4a..593c953f1 100644 --- a/front/src/pages/settings/data-model/SettingsObjectDetail.tsx +++ b/front/src/pages/settings/data-model/SettingsObjectDetail.tsx @@ -2,15 +2,18 @@ import { useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import styled from '@emotion/styled'; +import { useFieldMetadata } from '@/metadata/hooks/useFieldMetadata'; import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata'; import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { SettingsAboutSection } from '@/settings/data-model/object-details/components/SettingsObjectAboutSection'; +import { SettingsObjectFieldActiveActionDropdown } from '@/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown'; +import { SettingsObjectFieldDisabledActionDropdown } from '@/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown'; import { SettingsObjectFieldItemTableRow, StyledObjectFieldTableRow, } from '@/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow'; import { AppPath } from '@/types/AppPath'; -import { IconDotsVertical, IconPlus, IconSettings } from '@/ui/display/icon'; +import { IconPlus, 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'; @@ -41,6 +44,7 @@ export const SettingsObjectDetail = () => { } }, [activeObject, activeObjects.length, navigate]); + const { activateField, disableField, eraseField } = useFieldMetadata(); const activeFields = activeObject?.fields.filter( (fieldItem) => fieldItem.isActive, ); @@ -89,7 +93,18 @@ export const SettingsObjectDetail = () => { + navigate( + `/settings/objects/${pluralObjectName}/${fieldItem.name}`, + ) + } + onDisable={() => disableField(fieldItem)} + /> + } /> ))} @@ -100,7 +115,14 @@ export const SettingsObjectDetail = () => { activateField(fieldItem)} + onErase={() => eraseField(fieldItem)} + /> + } /> ))} diff --git a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx index ebf7fc445..5bf0103c3 100644 --- a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx +++ b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx @@ -14,6 +14,7 @@ import { AppPath } from '@/types/AppPath'; import { IconMinus, IconPlus, IconSettings } from '@/ui/display/icon'; import { H2Title } from '@/ui/display/typography/components/H2Title'; import { Button } from '@/ui/input/button/components/Button'; +import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'; import { Section } from '@/ui/layout/section/components/Section'; import { Table } from '@/ui/layout/table/components/Table'; @@ -93,7 +94,9 @@ export const SettingsObjectNewFieldStep1 = () => { + } /> ))} @@ -104,7 +107,9 @@ export const SettingsObjectNewFieldStep1 = () => { + } /> ))}