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

feat: activate standard objects in New Object page (#2232)

Browse Source 
* feat: activate standard objects in New Object page

Closes #2010, Closes #2173

* Pagination limit = 1000

* Various fixes

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Thaïs
2023-10-27 15:46:29 +02:00
committed by GitHub
parent ec3327ca81
commit 3c6ce75606
29 changed files with 470 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
front/src/pages/settings/data-model/SettingsNewObject.tsx
View File

@ -1,11 +1,12 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { useMetadataObjectForSettings } from '@/metadata/hooks/useMetadataObjectForSettings';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsObjectFormSection } from '@/settings/data-model/components/SettingsObjectFormSection';
import { SettingsAvailableStandardObjectsSection } from '@/settings/data-model/new-object/components/SettingsAvailableStandardObjectsSection';
import {
NewObjectType,
SettingsNewObjectType,
@ -22,7 +23,15 @@ export const SettingsNewObject = () => {
const [selectedObjectType, setSelectedObjectType] =
useState<NewObjectType>('Standard');
const { createObject } = useObjectMetadata();
const {
activateMetadataObject: activateObject,
createMetadataObject: createObject,
disabledMetadataObjects: disabledObjects,
} = useMetadataObjectForSettings();
const [selectedStandardObjectIds, setSelectedStandardObjectIds] = useState<
Record<string, boolean>
>({});
const [customFormValues, setCustomFormValues] = useState<{
description?: string;
@ -32,11 +41,24 @@ export const SettingsNewObject = () => {
}>({ icon: 'IconPigMoney', labelPlural: '', labelSingular: '' });
const canSave =
selectedObjectType === 'Custom' &&
!!customFormValues.labelPlural &&
!!customFormValues.labelSingular;
(selectedObjectType === 'Standard' &&
Object.values(selectedStandardObjectIds).some(
(isSelected) => isSelected,
)) ||
(selectedObjectType === 'Custom' &&
!!customFormValues.labelPlural &&
!!customFormValues.labelSingular);
const handleSave = async () => {
if (selectedObjectType === 'Standard') {
await Promise.all(
Object.entries(selectedStandardObjectIds).map(
([standardObjectId, isSelected]) =>
isSelected ? activateObject({ id: standardObjectId }) : undefined,
),
);
}
if (selectedObjectType === 'Custom') {
await createObject({
labelPlural: customFormValues.labelPlural,
@ -69,7 +91,7 @@ export const SettingsNewObject = () => {
</SettingsHeaderContainer>
<Section>
<H2Title
title="Object Type"
title="Object type"
description="The type of object you want to add"
/>
<SettingsNewObjectType
@ -77,6 +99,18 @@ export const SettingsNewObject = () => {
onTypeSelect={setSelectedObjectType}
/>
</Section>
{selectedObjectType === 'Standard' && (
<SettingsAvailableStandardObjectsSection
objectItems={disabledObjects.filter(({ isCustom }) => !isCustom)}
onChange={(selectedIds) =>
setSelectedStandardObjectIds((previousSelectedIds) => ({
...previousSelectedIds,
...selectedIds,
}))
}
selectedIds={selectedStandardObjectIds}
/>
)}
{selectedObjectType === 'Custom' && (
<>
<SettingsObjectIconSection

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

@ -2,8 +2,8 @@ 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 { useMetadataField } from '@/metadata/hooks/useMetadataField';
import { useMetadataObjectForSettings } from '@/metadata/hooks/useMetadataObjectForSettings';
import { getFieldSlug } from '@/metadata/utils/getFieldSlug';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsAboutSection } from '@/settings/data-model/object-details/components/SettingsObjectAboutSection';
@ -34,28 +34,30 @@ export const SettingsObjectDetail = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
const { disableObject, findActiveObjectBySlug, loading } =
useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug);
const { disableMetadataObject, findActiveMetadataObjectBySlug, loading } =
useMetadataObjectForSettings();
const activeMetadataObject = findActiveMetadataObjectBySlug(objectSlug);
useEffect(() => {
if (loading) return;
if (!activeObject) navigate(AppPath.NotFound);
}, [activeObject, loading, navigate]);
if (!activeMetadataObject) navigate(AppPath.NotFound);
}, [activeMetadataObject, loading, navigate]);
const { activateField, disableField, eraseField } = useFieldMetadata();
const { activateMetadataField, disableMetadataField, eraseMetadataField } =
useMetadataField();
if (!activeObject) return null;
if (!activeMetadataObject) return null;
const activeFields = activeObject.fields.filter(
(fieldItem) => fieldItem.isActive,
const activeMetadataFields = activeMetadataObject.fields.filter(
(metadataField) => metadataField.isActive,
);
const disabledFields = activeObject.fields.filter(
(fieldItem) => !fieldItem.isActive,
const disabledMetadataFields = activeMetadataObject.fields.filter(
(metadataField) => !metadataField.isActive,
);
const handleDisable = async () => {
await disableObject(activeObject);
await disableMetadataObject(activeMetadataObject);
navigate('/settings/objects');
};
@ -65,20 +67,20 @@ export const SettingsObjectDetail = () => {
<Breadcrumb
links={[
{ children: 'Objects', href: '/settings/objects' },
{ children: activeObject.labelPlural },
{ children: activeMetadataObject.labelPlural },
]}
/>
<SettingsAboutSection
iconKey={activeObject.icon ?? undefined}
name={activeObject.labelPlural || ''}
isCustom={activeObject.isCustom}
iconKey={activeMetadataObject.icon ?? undefined}
name={activeMetadataObject.labelPlural || ''}
isCustom={activeMetadataObject.isCustom}
onDisable={handleDisable}
onEdit={() => navigate('./edit')}
/>
<Section>
<H2Title
title="Fields"
description={`Customise the fields available in the ${activeObject.labelSingular} views and their display order in the ${activeObject.labelSingular} detail view and menus.`}
description={`Customise the fields available in the ${activeMetadataObject.labelSingular} views and their display order in the ${activeMetadataObject.labelSingular} detail view and menus.`}
/>
<Table>
<StyledObjectFieldTableRow>
@ -87,36 +89,44 @@ export const SettingsObjectDetail = () => {
<TableHeader>Data type</TableHeader>
<TableHeader></TableHeader>
</StyledObjectFieldTableRow>
{!!activeFields.length && (
{!!activeMetadataFields.length && (
<TableSection title="Active">
{activeFields.map((fieldItem) => (
{activeMetadataFields.map((activeMetadataField) => (
<SettingsObjectFieldItemTableRow
key={fieldItem.id}
fieldItem={fieldItem}
key={activeMetadataField.id}
fieldItem={activeMetadataField}
ActionIcon={
<SettingsObjectFieldActiveActionDropdown
isCustomField={fieldItem.isCustom}
scopeKey={fieldItem.id}
onEdit={() => navigate(`./${getFieldSlug(fieldItem)}`)}
onDisable={() => disableField(fieldItem)}
isCustomField={activeMetadataField.isCustom}
scopeKey={activeMetadataField.id}
onEdit={() =>
navigate(`./${getFieldSlug(activeMetadataField)}`)
}
onDisable={() =>
disableMetadataField(activeMetadataField)
}
/>
}
/>
))}
</TableSection>
)}
{!!disabledFields.length && (
{!!disabledMetadataFields.length && (
<TableSection isInitiallyExpanded={false} title="Disabled">
{disabledFields.map((fieldItem) => (
{disabledMetadataFields.map((disabledMetadataField) => (
<SettingsObjectFieldItemTableRow
key={fieldItem.id}
fieldItem={fieldItem}
key={disabledMetadataField.id}
fieldItem={disabledMetadataField}
ActionIcon={
<SettingsObjectFieldDisabledActionDropdown
isCustomField={fieldItem.isCustom}
scopeKey={fieldItem.id}
onActivate={() => activateField(fieldItem)}
onErase={() => eraseField(fieldItem)}
isCustomField={disabledMetadataField.isCustom}
scopeKey={disabledMetadataField.id}
onActivate={() =>
activateMetadataField(disabledMetadataField)
}
onErase={() =>
eraseMetadataField(disabledMetadataField)
}
/>
}
/>
@ -132,7 +142,7 @@ export const SettingsObjectDetail = () => {
variant="secondary"
onClick={() =>
navigate(
disabledFields.length
disabledMetadataFields.length
? './new-field/step-1'
: './new-field/step-2',
)

51
front/src/pages/settings/data-model/SettingsObjectEdit.tsx
View File

@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { useMetadataObjectForSettings } from '@/metadata/hooks/useMetadataObjectForSettings';
import { getObjectSlug } from '@/metadata/utils/getObjectSlug';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
@ -20,9 +20,14 @@ export const SettingsObjectEdit = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
const { disableObject, editObject, findActiveObjectBySlug, loading } =
useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug);
const {
disableMetadataObject,
editMetadataObject,
findActiveMetadataObjectBySlug,
loading,
} = useMetadataObjectForSettings();
const activeMetadataObject = findActiveMetadataObjectBySlug(objectSlug);
const [formValues, setFormValues] = useState<
Partial<{
@ -36,44 +41,44 @@ export const SettingsObjectEdit = () => {
useEffect(() => {
if (loading) return;
if (!activeObject) {
if (!activeMetadataObject) {
navigate(AppPath.NotFound);
return;
}
if (!Object.keys(formValues).length) {
setFormValues({
icon: activeObject.icon ?? undefined,
labelSingular: activeObject.labelSingular,
labelPlural: activeObject.labelPlural,
description: activeObject.description ?? undefined,
icon: activeMetadataObject.icon ?? undefined,
labelSingular: activeMetadataObject.labelSingular,
labelPlural: activeMetadataObject.labelPlural,
description: activeMetadataObject.description ?? undefined,
});
}
}, [activeObject, formValues, loading, navigate]);
}, [activeMetadataObject, formValues, loading, navigate]);
if (!activeObject) return null;
if (!activeMetadataObject) return null;
const areRequiredFieldsFilled =
!!formValues.labelSingular && !!formValues.labelPlural;
const hasChanges =
formValues.description !== activeObject.description ||
formValues.icon !== activeObject.icon ||
formValues.labelPlural !== activeObject.labelPlural ||
formValues.labelSingular !== activeObject.labelSingular;
formValues.description !== activeMetadataObject.description ||
formValues.icon !== activeMetadataObject.icon ||
formValues.labelPlural !== activeMetadataObject.labelPlural ||
formValues.labelSingular !== activeMetadataObject.labelSingular;
const canSave = areRequiredFieldsFilled && hasChanges;
const handleSave = async () => {
const editedObject = { ...activeObject, ...formValues };
const editedMetadataObject = { ...activeMetadataObject, ...formValues };
await editObject(editedObject);
await editMetadataObject(editedMetadataObject);
navigate(`/settings/objects/${getObjectSlug(editedObject)}`);
navigate(`/settings/objects/${getObjectSlug(editedMetadataObject)}`);
};
const handleDisable = async () => {
await disableObject(activeObject);
await disableMetadataObject(activeMetadataObject);
navigate('/settings/objects');
};
@ -85,13 +90,13 @@ export const SettingsObjectEdit = () => {
links={[
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObject.labelPlural,
children: activeMetadataObject.labelPlural,
href: `/settings/objects/${objectSlug}`,
},
{ children: 'Edit' },
]}
/>
{!!activeObject.isCustom && (
{!!activeMetadataObject.isCustom && (
<SaveAndCancelButtons
isSaveDisabled={!canSave}
onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
@ -100,7 +105,7 @@ export const SettingsObjectEdit = () => {
)}
</SettingsHeaderContainer>
<SettingsObjectIconSection
disabled={!activeObject.isCustom}
disabled={!activeMetadataObject.isCustom}
iconKey={formValues.icon}
label={formValues.labelPlural}
onChange={({ iconKey }) =>
@ -111,7 +116,7 @@ export const SettingsObjectEdit = () => {
}
/>
<SettingsObjectFormSection
disabled={!activeObject.isCustom}
disabled={!activeMetadataObject.isCustom}
singularName={formValues.labelSingular}
pluralName={formValues.labelPlural}
description={formValues.description}

42
front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
View File

@ -1,14 +1,14 @@
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useFieldMetadata } from '@/metadata/hooks/useFieldMetadata';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { useMetadataField } from '@/metadata/hooks/useMetadataField';
import { useMetadataObjectForSettings } from '@/metadata/hooks/useMetadataObjectForSettings';
import { getFieldSlug } from '@/metadata/utils/getFieldSlug';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsObjectFieldFormSection } from '@/settings/data-model/components/SettingsObjectFieldFormSection';
import { SettingsObjectFieldTypeSelectSection } from '@/settings/data-model/components/SettingsObjectFieldTypeSelectSection';
import { ObjectFieldDataType } from '@/settings/data-model/types/ObjectFieldDataType';
import { MetadataFieldDataType } from '@/settings/data-model/types/ObjectFieldDataType';
import { AppPath } from '@/types/AppPath';
import { IconArchive, IconSettings } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
@ -21,23 +21,27 @@ export const SettingsObjectFieldEdit = () => {
const navigate = useNavigate();
const { objectSlug = '', fieldSlug = '' } = useParams();
const { findActiveObjectBySlug, loading } = useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug);
const { findActiveMetadataObjectBySlug, loading } =
useMetadataObjectForSettings();
const { disableField } = useFieldMetadata();
const activeField = activeObject?.fields.find(
(field) => field.isActive && getFieldSlug(field) === fieldSlug,
const activeMetadataObject = findActiveMetadataObjectBySlug(objectSlug);
const { disableMetadataField: disableField } = useMetadataField();
const activeMetadataField = activeMetadataObject?.fields.find(
(metadataField) =>
metadataField.isActive && getFieldSlug(metadataField) === fieldSlug,
);
useEffect(() => {
if (loading) return;
if (!activeObject || !activeField) navigate(AppPath.NotFound);
}, [activeField, activeObject, loading, navigate]);
if (!activeMetadataObject || !activeMetadataField)
navigate(AppPath.NotFound);
}, [activeMetadataField, activeMetadataObject, loading, navigate]);
if (!activeObject || !activeField) return null;
if (!activeMetadataObject || !activeMetadataField) return null;
const handleDisable = async () => {
await disableField(activeField);
await disableField(activeMetadataField);
navigate(`/settings/objects/${objectSlug}`);
};
@ -49,23 +53,23 @@ export const SettingsObjectFieldEdit = () => {
links={[
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObject.labelPlural,
children: activeMetadataObject.labelPlural,
href: `/settings/objects/${objectSlug}`,
},
{ children: activeField.label },
{ children: activeMetadataField.label },
]}
/>
</SettingsHeaderContainer>
<SettingsObjectFieldFormSection
disabled={!activeField.isCustom}
name={activeField.label}
description={activeField.description ?? undefined}
iconKey={activeField.icon ?? undefined}
disabled={!activeMetadataField.isCustom}
name={activeMetadataField.label}
description={activeMetadataField.description ?? undefined}
iconKey={activeMetadataField.icon ?? undefined}
onChange={() => undefined}
/>
<SettingsObjectFieldTypeSelectSection
disabled
type={activeField.type as ObjectFieldDataType}
type={activeMetadataField.type as MetadataFieldDataType}
/>
<Section>
<H2Title title="Danger zone" description="Disable this field" />

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

@ -2,7 +2,7 @@ import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import styled from '@emotion/styled';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { useMetadataObjectForSettings } from '@/metadata/hooks/useMetadataObjectForSettings';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
@ -36,21 +36,23 @@ export const SettingsObjectNewFieldStep1 = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
const { findActiveObjectBySlug, loading } = useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug);
const { findActiveMetadataObjectBySlug, loading } =
useMetadataObjectForSettings();
const activeMetadataObject = findActiveMetadataObjectBySlug(objectSlug);
useEffect(() => {
if (loading) return;
if (!activeObject) navigate(AppPath.NotFound);
}, [activeObject, loading, navigate]);
if (!activeMetadataObject) navigate(AppPath.NotFound);
}, [activeMetadataObject, loading, navigate]);
if (!activeObject) return null;
if (!activeMetadataObject) return null;
const activeFields = activeObject.fields.filter(
(fieldItem) => fieldItem.isActive,
const activeMetadataFields = activeMetadataObject.fields.filter(
(metadataField) => metadataField.isActive,
);
const disabledFields = activeObject.fields.filter(
(fieldItem) => !fieldItem.isActive,
const disabledMetadataFields = activeMetadataObject.fields.filter(
(metadataField) => !metadataField.isActive,
);
return (
@ -61,7 +63,7 @@ export const SettingsObjectNewFieldStep1 = () => {
links={[
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObject.labelPlural,
children: activeMetadataObject.labelPlural,
href: `/settings/objects/${objectSlug}`,
},
{ children: 'New Field' },
@ -85,12 +87,12 @@ export const SettingsObjectNewFieldStep1 = () => {
<TableHeader>Data type</TableHeader>
<TableHeader></TableHeader>
</StyledObjectFieldTableRow>
{!!activeFields.length && (
{!!activeMetadataFields.length && (
<TableSection isInitiallyExpanded={false} title="Active">
{activeFields.map((fieldItem) => (
{activeMetadataFields.map((activeMetadataField) => (
<SettingsObjectFieldItemTableRow
key={fieldItem.id}
fieldItem={fieldItem}
key={activeMetadataField.id}
fieldItem={activeMetadataField}
ActionIcon={
<LightIconButton Icon={IconMinus} accent="tertiary" />
}
@ -98,12 +100,12 @@ export const SettingsObjectNewFieldStep1 = () => {
))}
</TableSection>
)}
{!!disabledFields.length && (
{!!disabledMetadataFields.length && (
<TableSection title="Disabled">
{disabledFields.map((fieldItem) => (
{disabledMetadataFields.map((disabledMetadataField) => (
<SettingsObjectFieldItemTableRow
key={fieldItem.name}
fieldItem={fieldItem}
key={disabledMetadataField.name}
fieldItem={disabledMetadataField}
ActionIcon={
<LightIconButton Icon={IconPlus} accent="tertiary" />
}

30
front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
View File

@ -1,14 +1,14 @@
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useFieldMetadata } from '@/metadata/hooks/useFieldMetadata';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { useMetadataField } from '@/metadata/hooks/useMetadataField';
import { useMetadataObjectForSettings } from '@/metadata/hooks/useMetadataObjectForSettings';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsObjectFieldFormSection } from '@/settings/data-model/components/SettingsObjectFieldFormSection';
import { SettingsObjectFieldTypeSelectSection } from '@/settings/data-model/components/SettingsObjectFieldTypeSelectSection';
import { ObjectFieldDataType } from '@/settings/data-model/types/ObjectFieldDataType';
import { MetadataFieldDataType } from '@/settings/data-model/types/ObjectFieldDataType';
import { AppPath } from '@/types/AppPath';
import { IconSettings } from '@/ui/display/icon';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
@ -17,28 +17,34 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
export const SettingsObjectNewFieldStep2 = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
const { findActiveObjectBySlug, loading } = useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug);
const { createField } = useFieldMetadata();
const { findActiveMetadataObjectBySlug, loading } =
useMetadataObjectForSettings();
const activeMetadataObject = findActiveMetadataObjectBySlug(objectSlug);
const { createMetadataField } = useMetadataField();
useEffect(() => {
if (loading) return;
if (!activeObject) navigate(AppPath.NotFound);
}, [activeObject, loading, navigate]);
if (!activeMetadataObject) navigate(AppPath.NotFound);
}, [activeMetadataObject, loading, navigate]);
const [formValues, setFormValues] = useState<{
description?: string;
icon: string;
label: string;
type: ObjectFieldDataType;
type: MetadataFieldDataType;
}>({ icon: 'IconUsers', label: '', type: 'number' });
if (!activeObject) return null;
if (!activeMetadataObject) return null;
const canSave = !!formValues.label;
const handleSave = async () => {
await createField({ ...formValues, objectId: activeObject.id });
await createMetadataField({
...formValues,
objectId: activeMetadataObject.id,
});
navigate(`/settings/objects/${objectSlug}`);
};
@ -50,7 +56,7 @@ export const SettingsObjectNewFieldStep2 = () => {
links={[
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObject.labelPlural,
children: activeMetadataObject.labelPlural,
href: `/settings/objects/${objectSlug}`,
},
{ children: 'New Field' },

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

@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { useMetadataObjectForSettings } from '@/metadata/hooks/useMetadataObjectForSettings';
import { getObjectSlug } from '@/metadata/utils/getObjectSlug';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
@ -34,8 +34,12 @@ export const SettingsObjects = () => {
const theme = useTheme();
const navigate = useNavigate();
const { activateObject, activeObjects, disabledObjects, eraseObject } =
useObjectMetadata();
const {
activateMetadataObject,
activeMetadataObjects,
disabledMetadataObjects,
eraseMetadataObject,
} = useMetadataObjectForSettings();
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@ -62,12 +66,12 @@ export const SettingsObjects = () => {
<TableHeader align="right">Instances</TableHeader>
<TableHeader></TableHeader>
</StyledObjectTableRow>
{!!activeObjects.length && (
{!!activeMetadataObjects.length && (
<TableSection title="Active">
{activeObjects.map((objectItem) => (
{activeMetadataObjects.map((activeMetadataObject) => (
<SettingsObjectItemTableRow
key={objectItem.namePlural}
objectItem={objectItem}
key={activeMetadataObject.namePlural}
objectItem={activeMetadataObject}
action={
<StyledIconChevronRight
size={theme.icon.size.md}
@ -76,25 +80,31 @@ export const SettingsObjects = () => {
}
onClick={() =>
navigate(
`/settings/objects/${getObjectSlug(objectItem)}`,
`/settings/objects/${getObjectSlug(
activeMetadataObject,
)}`,
)
}
/>
))}
</TableSection>
)}
{!!disabledObjects.length && (
{!!disabledMetadataObjects.length && (
<TableSection title="Disabled">
{disabledObjects.map((objectItem) => (
{disabledMetadataObjects.map((disabledMetadataObject) => (
<SettingsObjectItemTableRow
key={objectItem.namePlural}
objectItem={objectItem}
key={disabledMetadataObject.namePlural}
objectItem={disabledMetadataObject}
action={
<SettingsObjectDisabledMenuDropDown
isCustomObject={objectItem.isCustom}
scopeKey={objectItem.namePlural}
onActivate={() => activateObject(objectItem)}
onErase={() => eraseObject(objectItem)}
isCustomObject={disabledMetadataObject.isCustom}
scopeKey={disabledMetadataObject.namePlural}
onActivate={() =>
activateMetadataObject(disabledMetadataObject)
}
onErase={() =>
eraseMetadataObject(disabledMetadataObject)
}
/>
}
/>