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

2282 Rename components to use the new naming convention part 3 (#2296)

Browse Source 
part 3 of the renaming
This commit is contained in:
bosiraphael
2023-10-31 12:38:53 +01:00
committed by GitHub
parent adeaa35e8d
commit a2e84db049
69 changed files with 604 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useCreateOneObject } from '@/metadata/hooks/useCreateOneObject';
import { useMetadataObjectForSettings } from '@/metadata/hooks/useMetadataObjectForSettings';
import { useObjectMetadataItemForSettings } from '@/metadata/hooks/useObjectMetadataItemForSettings';
import { getObjectSlug } from '@/metadata/utils/getObjectSlug';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
@ -27,10 +27,10 @@ export const SettingsNewObject = () => {
useState<NewObjectType>('Standard');
const {
activateMetadataObject: activateObject,
createMetadataObject: createObject,
disabledMetadataObjects: disabledObjects,
} = useMetadataObjectForSettings();
activateObjectMetadataItem: activateObject,
createObjectMetadataItem: createObject,
disabledObjectMetadataItems: disabledObjects,
} = useObjectMetadataItemForSettings();
const { createOneObject: createOneView } = useCreateOneObject({
objectNamePlural: 'viewsV2',

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

@ -3,7 +3,7 @@ import { useNavigate, useParams } from 'react-router-dom';
import styled from '@emotion/styled';
import { useMetadataField } from '@/metadata/hooks/useMetadataField';
import { useMetadataObjectForSettings } from '@/metadata/hooks/useMetadataObjectForSettings';
import { useObjectMetadataItemForSettings } from '@/metadata/hooks/useObjectMetadataItemForSettings';
import { getFieldSlug } from '@/metadata/utils/getFieldSlug';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsAboutSection } from '@/settings/data-model/object-details/components/SettingsObjectAboutSection';
@ -34,30 +34,34 @@ export const SettingsObjectDetail = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
const { disableMetadataObject, findActiveMetadataObjectBySlug, loading } =
useMetadataObjectForSettings();
const {
disableObjectMetadataItem,
findActiveObjectMetadataItemBySlug,
loading,
} = useObjectMetadataItemForSettings();
const activeMetadataObject = findActiveMetadataObjectBySlug(objectSlug);
const activeObjectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug);
useEffect(() => {
if (loading) return;
if (!activeMetadataObject) navigate(AppPath.NotFound);
}, [activeMetadataObject, loading, navigate]);
if (!activeObjectMetadataItem) navigate(AppPath.NotFound);
}, [activeObjectMetadataItem, loading, navigate]);
const { activateMetadataField, disableMetadataField, eraseMetadataField } =
useMetadataField();
if (!activeMetadataObject) return null;
if (!activeObjectMetadataItem) return null;
const activeMetadataFields = activeMetadataObject.fields.filter(
const activeMetadataFields = activeObjectMetadataItem.fields.filter(
(metadataField) => metadataField.isActive,
);
const disabledMetadataFields = activeMetadataObject.fields.filter(
const disabledMetadataFields = activeObjectMetadataItem.fields.filter(
(metadataField) => !metadataField.isActive,
);
const handleDisable = async () => {
await disableMetadataObject(activeMetadataObject);
await disableObjectMetadataItem(activeObjectMetadataItem);
navigate('/settings/objects');
};
@ -67,20 +71,20 @@ export const SettingsObjectDetail = () => {
<Breadcrumb
links={[
{ children: 'Objects', href: '/settings/objects' },
{ children: activeMetadataObject.labelPlural },
{ children: activeObjectMetadataItem.labelPlural },
]}
/>
<SettingsAboutSection
iconKey={activeMetadataObject.icon ?? undefined}
name={activeMetadataObject.labelPlural || ''}
isCustom={activeMetadataObject.isCustom}
iconKey={activeObjectMetadataItem.icon ?? undefined}
name={activeObjectMetadataItem.labelPlural || ''}
isCustom={activeObjectMetadataItem.isCustom}
onDisable={handleDisable}
onEdit={() => navigate('./edit')}
/>
<Section>
<H2Title
title="Fields"
description={`Customise the fields available in the ${activeMetadataObject.labelSingular} views and their display order in the ${activeMetadataObject.labelSingular} detail view and menus.`}
description={`Customise the fields available in the ${activeObjectMetadataItem.labelSingular} views and their display order in the ${activeObjectMetadataItem.labelSingular} detail view and menus.`}
/>
<Table>
<StyledObjectFieldTableRow>

54
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 { useMetadataObjectForSettings } from '@/metadata/hooks/useMetadataObjectForSettings';
import { useObjectMetadataItemForSettings } from '@/metadata/hooks/useObjectMetadataItemForSettings';
import { getObjectSlug } from '@/metadata/utils/getObjectSlug';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
@ -21,13 +21,14 @@ export const SettingsObjectEdit = () => {
const { objectSlug = '' } = useParams();
const {
disableMetadataObject,
editMetadataObject,
findActiveMetadataObjectBySlug,
disableObjectMetadataItem,
editObjectMetadataItem,
findActiveObjectMetadataItemBySlug,
loading,
} = useMetadataObjectForSettings();
} = useObjectMetadataItemForSettings();
const activeMetadataObject = findActiveMetadataObjectBySlug(objectSlug);
const activeObjectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug);
const [formValues, setFormValues] = useState<
Partial<{
@ -41,44 +42,47 @@ export const SettingsObjectEdit = () => {
useEffect(() => {
if (loading) return;
if (!activeMetadataObject) {
if (!activeObjectMetadataItem) {
navigate(AppPath.NotFound);
return;
}
if (!Object.keys(formValues).length) {
setFormValues({
icon: activeMetadataObject.icon ?? undefined,
labelSingular: activeMetadataObject.labelSingular,
labelPlural: activeMetadataObject.labelPlural,
description: activeMetadataObject.description ?? undefined,
icon: activeObjectMetadataItem.icon ?? undefined,
labelSingular: activeObjectMetadataItem.labelSingular,
labelPlural: activeObjectMetadataItem.labelPlural,
description: activeObjectMetadataItem.description ?? undefined,
});
}
}, [activeMetadataObject, formValues, loading, navigate]);
}, [activeObjectMetadataItem, formValues, loading, navigate]);
if (!activeMetadataObject) return null;
if (!activeObjectMetadataItem) return null;
const areRequiredFieldsFilled =
!!formValues.labelSingular && !!formValues.labelPlural;
const hasChanges =
formValues.description !== activeMetadataObject.description ||
formValues.icon !== activeMetadataObject.icon ||
formValues.labelPlural !== activeMetadataObject.labelPlural ||
formValues.labelSingular !== activeMetadataObject.labelSingular;
formValues.description !== activeObjectMetadataItem.description ||
formValues.icon !== activeObjectMetadataItem.icon ||
formValues.labelPlural !== activeObjectMetadataItem.labelPlural ||
formValues.labelSingular !== activeObjectMetadataItem.labelSingular;
const canSave = areRequiredFieldsFilled && hasChanges;
const handleSave = async () => {
const editedMetadataObject = { ...activeMetadataObject, ...formValues };
const editedObjectMetadataItem = {
...activeObjectMetadataItem,
...formValues,
};
await editMetadataObject(editedMetadataObject);
await editObjectMetadataItem(editedObjectMetadataItem);
navigate(`/settings/objects/${getObjectSlug(editedMetadataObject)}`);
navigate(`/settings/objects/${getObjectSlug(editedObjectMetadataItem)}`);
};
const handleDisable = async () => {
await disableMetadataObject(activeMetadataObject);
await disableObjectMetadataItem(activeObjectMetadataItem);
navigate('/settings/objects');
};
@ -90,13 +94,13 @@ export const SettingsObjectEdit = () => {
links={[
{ children: 'Objects', href: '/settings/objects' },
{
children: activeMetadataObject.labelPlural,
children: activeObjectMetadataItem.labelPlural,
href: `/settings/objects/${objectSlug}`,
},
{ children: 'Edit' },
]}
/>
{activeMetadataObject.isCustom && (
{activeObjectMetadataItem.isCustom && (
<SaveAndCancelButtons
isSaveDisabled={!canSave}
onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
@ -105,7 +109,7 @@ export const SettingsObjectEdit = () => {
)}
</SettingsHeaderContainer>
<SettingsObjectIconSection
disabled={!activeMetadataObject.isCustom}
disabled={!activeObjectMetadataItem.isCustom}
iconKey={formValues.icon}
label={formValues.labelPlural}
onChange={({ iconKey }) =>
@ -116,7 +120,7 @@ export const SettingsObjectEdit = () => {
}
/>
<SettingsObjectFormSection
disabled={!activeMetadataObject.isCustom}
disabled={!activeObjectMetadataItem.isCustom}
singularName={formValues.labelSingular}
pluralName={formValues.labelPlural}
description={formValues.description}

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

@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useMetadataField } from '@/metadata/hooks/useMetadataField';
import { useMetadataObjectForSettings } from '@/metadata/hooks/useMetadataObjectForSettings';
import { useObjectMetadataItemForSettings } from '@/metadata/hooks/useObjectMetadataItemForSettings';
import { getFieldSlug } from '@/metadata/utils/getFieldSlug';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
@ -22,13 +22,14 @@ export const SettingsObjectFieldEdit = () => {
const navigate = useNavigate();
const { objectSlug = '', fieldSlug = '' } = useParams();
const { findActiveMetadataObjectBySlug, loading } =
useMetadataObjectForSettings();
const { findActiveObjectMetadataItemBySlug, loading } =
useObjectMetadataItemForSettings();
const activeMetadataObject = findActiveMetadataObjectBySlug(objectSlug);
const activeObjectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug);
const { disableMetadataField, editMetadataField } = useMetadataField();
const activeMetadataField = activeMetadataObject?.fields.find(
const activeMetadataField = activeObjectMetadataItem?.fields.find(
(metadataField) =>
metadataField.isActive && getFieldSlug(metadataField) === fieldSlug,
);
@ -44,7 +45,7 @@ export const SettingsObjectFieldEdit = () => {
useEffect(() => {
if (loading) return;
if (!activeMetadataObject || !activeMetadataField) {
if (!activeObjectMetadataItem || !activeMetadataField) {
navigate(AppPath.NotFound);
return;
}
@ -58,13 +59,13 @@ export const SettingsObjectFieldEdit = () => {
}
}, [
activeMetadataField,
activeMetadataObject,
activeObjectMetadataItem,
formValues,
loading,
navigate,
]);
if (!activeMetadataObject || !activeMetadataField) return null;
if (!activeObjectMetadataItem || !activeMetadataField) return null;
const areRequiredFieldsFilled = !!formValues.label;
@ -96,7 +97,7 @@ export const SettingsObjectFieldEdit = () => {
links={[
{ children: 'Objects', href: '/settings/objects' },
{
children: activeMetadataObject.labelPlural,
children: activeObjectMetadataItem.labelPlural,
href: `/settings/objects/${objectSlug}`,
},
{ children: activeMetadataField.label },

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

@ -3,7 +3,7 @@ import { useNavigate, useParams } from 'react-router-dom';
import styled from '@emotion/styled';
import { useMetadataField } from '@/metadata/hooks/useMetadataField';
import { useMetadataObjectForSettings } from '@/metadata/hooks/useMetadataObjectForSettings';
import { useObjectMetadataItemForSettings } from '@/metadata/hooks/useObjectMetadataItemForSettings';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
@ -37,14 +37,15 @@ export const SettingsObjectNewFieldStep1 = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
const { findActiveMetadataObjectBySlug, loading } =
useMetadataObjectForSettings();
const { findActiveObjectMetadataItemBySlug, loading } =
useObjectMetadataItemForSettings();
const activeMetadataObject = findActiveMetadataObjectBySlug(objectSlug);
const activeObjectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug);
const { activateMetadataField, disableMetadataField } = useMetadataField();
const [metadataFields, setMetadataFields] = useState(
activeMetadataObject?.fields ?? [],
activeObjectMetadataItem?.fields ?? [],
);
const activeMetadataFields = metadataFields.filter((field) => field.isActive);
@ -54,21 +55,22 @@ export const SettingsObjectNewFieldStep1 = () => {
const canSave = metadataFields.some(
(field, index) =>
field.isActive !== activeMetadataObject?.fields[index].isActive,
field.isActive !== activeObjectMetadataItem?.fields[index].isActive,
);
useEffect(() => {
if (loading) return;
if (!activeMetadataObject) {
if (!activeObjectMetadataItem) {
navigate(AppPath.NotFound);
return;
}
if (!metadataFields.length) setMetadataFields(activeMetadataObject.fields);
}, [activeMetadataObject, metadataFields.length, loading, navigate]);
if (!metadataFields.length)
setMetadataFields(activeObjectMetadataItem.fields);
}, [activeObjectMetadataItem, metadataFields.length, loading, navigate]);
if (!activeMetadataObject) return null;
if (!activeObjectMetadataItem) return null;
const handleToggleField = (fieldId: string) =>
setMetadataFields((previousFields) =>
@ -81,7 +83,8 @@ export const SettingsObjectNewFieldStep1 = () => {
await Promise.all(
metadataFields.map((metadataField, index) => {
if (
metadataField.isActive === activeMetadataObject.fields[index].isActive
metadataField.isActive ===
activeObjectMetadataItem.fields[index].isActive
) {
return;
}
@ -103,7 +106,7 @@ export const SettingsObjectNewFieldStep1 = () => {
links={[
{ children: 'Objects', href: '/settings/objects' },
{
children: activeMetadataObject.labelPlural,
children: activeObjectMetadataItem.labelPlural,
href: `/settings/objects/${objectSlug}`,
},
{ children: 'New Field' },

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

@ -4,7 +4,7 @@ import { useNavigate, useParams } from 'react-router-dom';
import { useCreateOneObject } from '@/metadata/hooks/useCreateOneObject';
import { useFindManyObjects } from '@/metadata/hooks/useFindManyObjects';
import { useMetadataField } from '@/metadata/hooks/useMetadataField';
import { useMetadataObjectForSettings } from '@/metadata/hooks/useMetadataObjectForSettings';
import { useObjectMetadataItemForSettings } from '@/metadata/hooks/useObjectMetadataItemForSettings';
import { PaginatedObjectTypeResults } from '@/metadata/types/PaginatedObjectTypeResults';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
@ -23,16 +23,17 @@ export const SettingsObjectNewFieldStep2 = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
const { findActiveMetadataObjectBySlug, loading } =
useMetadataObjectForSettings();
const { findActiveObjectMetadataItemBySlug, loading } =
useObjectMetadataItemForSettings();
const activeMetadataObject = findActiveMetadataObjectBySlug(objectSlug);
const activeObjectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug);
const { createMetadataField } = useMetadataField();
useEffect(() => {
if (loading) return;
if (!activeMetadataObject) navigate(AppPath.NotFound);
}, [activeMetadataObject, loading, navigate]);
if (!activeObjectMetadataItem) navigate(AppPath.NotFound);
}, [activeObjectMetadataItem, loading, navigate]);
const [formValues, setFormValues] = useState<{
description?: string;
@ -51,7 +52,7 @@ export const SettingsObjectNewFieldStep2 = () => {
objectNamePlural: 'viewsV2',
filter: {
type: { eq: ViewType.Table },
objectId: { eq: activeMetadataObject?.id },
objectId: { eq: activeObjectMetadataItem?.id },
},
onCompleted: async (data: PaginatedObjectTypeResults<View>) => {
const views = data.edges;
@ -64,20 +65,20 @@ export const SettingsObjectNewFieldStep2 = () => {
},
});
if (!activeMetadataObject || !objectViews.length) return null;
if (!activeObjectMetadataItem || !objectViews.length) return null;
const canSave = !!formValues.label;
const handleSave = async () => {
const createdField = await createMetadataField({
...formValues,
objectId: activeMetadataObject.id,
objectId: activeObjectMetadataItem.id,
});
objectViews.forEach(async (view) => {
await createOneViewField?.({
viewId: view.id,
fieldId: createdField.data?.createOneField.id,
position: activeMetadataObject.fields.length,
position: activeObjectMetadataItem.fields.length,
isVisible: true,
size: 100,
});
@ -93,7 +94,7 @@ export const SettingsObjectNewFieldStep2 = () => {
links={[
{ children: 'Objects', href: '/settings/objects' },
{
children: activeMetadataObject.labelPlural,
children: activeObjectMetadataItem.labelPlural,
href: `/settings/objects/${objectSlug}`,
},
{ children: 'New Field' },

66
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 { useMetadataObjectForSettings } from '@/metadata/hooks/useMetadataObjectForSettings';
import { useObjectMetadataItemForSettings } from '@/metadata/hooks/useObjectMetadataItemForSettings';
import { getObjectSlug } from '@/metadata/utils/getObjectSlug';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
@ -35,11 +35,11 @@ export const SettingsObjects = () => {
const navigate = useNavigate();
const {
activateMetadataObject,
activeMetadataObjects,
disabledMetadataObjects,
eraseMetadataObject,
} = useMetadataObjectForSettings();
activateObjectMetadataItem,
activeObjectMetadataItems,
disabledObjectMetadataItems,
eraseObjectMetadataItem,
} = useObjectMetadataItemForSettings();
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@ -66,12 +66,12 @@ export const SettingsObjects = () => {
<TableHeader align="right">Instances</TableHeader>
<TableHeader></TableHeader>
</StyledObjectTableRow>
{!!activeMetadataObjects.length && (
{!!activeObjectMetadataItems.length && (
<TableSection title="Active">
{activeMetadataObjects.map((activeMetadataObject) => (
{activeObjectMetadataItems.map((activeObjectMetadataItem) => (
<SettingsObjectItemTableRow
key={activeMetadataObject.namePlural}
objectItem={activeMetadataObject}
key={activeObjectMetadataItem.namePlural}
objectItem={activeObjectMetadataItem}
action={
<StyledIconChevronRight
size={theme.icon.size.md}
@ -81,7 +81,7 @@ export const SettingsObjects = () => {
onClick={() =>
navigate(
`/settings/objects/${getObjectSlug(
activeMetadataObject,
activeObjectMetadataItem,
)}`,
)
}
@ -89,26 +89,32 @@ export const SettingsObjects = () => {
))}
</TableSection>
)}
{!!disabledMetadataObjects.length && (
{!!disabledObjectMetadataItems.length && (
<TableSection title="Disabled">
{disabledMetadataObjects.map((disabledMetadataObject) => (
<SettingsObjectItemTableRow
key={disabledMetadataObject.namePlural}
objectItem={disabledMetadataObject}
action={
<SettingsObjectDisabledMenuDropDown
isCustomObject={disabledMetadataObject.isCustom}
scopeKey={disabledMetadataObject.namePlural}
onActivate={() =>
activateMetadataObject(disabledMetadataObject)
}
onErase={() =>
eraseMetadataObject(disabledMetadataObject)
}
/>
}
/>
))}
{disabledObjectMetadataItems.map(
(disabledObjectMetadataItem) => (
<SettingsObjectItemTableRow
key={disabledObjectMetadataItem.namePlural}
objectItem={disabledObjectMetadataItem}
action={
<SettingsObjectDisabledMenuDropDown
isCustomObject={disabledObjectMetadataItem.isCustom}
scopeKey={disabledObjectMetadataItem.namePlural}
onActivate={() =>
activateObjectMetadataItem(
disabledObjectMetadataItem,
)
}
onErase={() =>
eraseObjectMetadataItem(
disabledObjectMetadataItem,
)
}
/>
}
/>
),
)}
</TableSection>
)}
</Table>