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 = () => {
+ }
/>
))}