feat: add Object Field Edit page sections (#2243)

Closes #2160, Closes #2163
2023-10-27 12:13:01 +02:00
parent d02dd69613
commit d7b0c1190a
12 changed files with 206 additions and 134 deletions
--- a/front/src/pages/settings/data-model/SettingsObjectDetail.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjectDetail.tsx
@ -4,6 +4,7 @@ import styled from '@emotion/styled';

 import { useFieldMetadata } from '@/metadata/hooks/useFieldMetadata';
 import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
+import { getFieldSlug } from '@/metadata/utils/getFieldSlug';
 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';
@ -33,49 +34,51 @@ export const SettingsObjectDetail = () => {
  const navigate = useNavigate();

  const { objectSlug = '' } = useParams();
-  const { activeObjects, disableObject, findActiveObjectBySlug } =
+  const { disableObject, findActiveObjectBySlug, loading } =
    useObjectMetadata();
  const activeObject = findActiveObjectBySlug(objectSlug);

  useEffect(() => {
-    if (activeObjects.length && !activeObject) {
-      navigate(AppPath.NotFound);
-    }
-  }, [activeObject, activeObjects.length, navigate]);
+    if (loading) return;
+    if (!activeObject) navigate(AppPath.NotFound);
+  }, [activeObject, loading, navigate]);

  const { activateField, disableField, eraseField } = useFieldMetadata();
-  const activeFields = activeObject?.fields.filter(
+
+  if (!activeObject) return null;
+
+  const activeFields = activeObject.fields.filter(
    (fieldItem) => fieldItem.isActive,
  );
-  const disabledFields = activeObject?.fields.filter(
+  const disabledFields = activeObject.fields.filter(
    (fieldItem) => !fieldItem.isActive,
  );

+  const handleDisable = async () => {
+    await disableObject(activeObject);
+    navigate('/settings/objects');
+  };
+
  return (
    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
      <SettingsPageContainer>
        <Breadcrumb
          links={[
            { children: 'Objects', href: '/settings/objects' },
-            { children: activeObject?.labelPlural ?? '' },
+            { children: activeObject.labelPlural },
          ]}
        />
-        {activeObject && (
-          <SettingsAboutSection
-            iconKey={activeObject.icon ?? undefined}
-            name={activeObject.labelPlural || ''}
-            isCustom={activeObject.isCustom}
-            onDisable={() => {
-              disableObject(activeObject);
-              navigate('/settings/objects');
-            }}
-            onEdit={() => navigate('./edit')}
-          />
-        )}
+        <SettingsAboutSection
+          iconKey={activeObject.icon ?? undefined}
+          name={activeObject.labelPlural || ''}
+          isCustom={activeObject.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 ${activeObject.labelSingular} views and their display order in the ${activeObject.labelSingular} detail view and menus.`}
          />
          <Table>
            <StyledObjectFieldTableRow>
@ -84,7 +87,7 @@ export const SettingsObjectDetail = () => {
              <TableHeader>Data type</TableHeader>
              <TableHeader></TableHeader>
            </StyledObjectFieldTableRow>
-            {!!activeFields?.length && (
+            {!!activeFields.length && (
              <TableSection title="Active">
                {activeFields.map((fieldItem) => (
                  <SettingsObjectFieldItemTableRow
@ -94,7 +97,7 @@ export const SettingsObjectDetail = () => {
                      <SettingsObjectFieldActiveActionDropdown
                        isCustomField={fieldItem.isCustom}
                        scopeKey={fieldItem.id}
-                        onEdit={() => navigate(`./${fieldItem.name}`)}
+                        onEdit={() => navigate(`./${getFieldSlug(fieldItem)}`)}
                        onDisable={() => disableField(fieldItem)}
                      />
                    }
@ -102,7 +105,7 @@ export const SettingsObjectDetail = () => {
                ))}
              </TableSection>
            )}
-            {!!disabledFields?.length && (
+            {!!disabledFields.length && (
              <TableSection isInitiallyExpanded={false} title="Disabled">
                {disabledFields.map((fieldItem) => (
                  <SettingsObjectFieldItemTableRow
@ -129,7 +132,7 @@ export const SettingsObjectDetail = () => {
              variant="secondary"
              onClick={() =>
                navigate(
-                  disabledFields?.length
+                  disabledFields.length
                    ? './new-field/step-1'
                    : './new-field/step-2',
                )
--- a/front/src/pages/settings/data-model/SettingsObjectEdit.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjectEdit.tsx
@ -20,7 +20,7 @@ export const SettingsObjectEdit = () => {
  const navigate = useNavigate();

  const { objectSlug = '' } = useParams();
-  const { activeObjects, disableObject, editObject, findActiveObjectBySlug } =
+  const { disableObject, editObject, findActiveObjectBySlug, loading } =
    useObjectMetadata();
  const activeObject = findActiveObjectBySlug(objectSlug);

@ -34,7 +34,7 @@ export const SettingsObjectEdit = () => {
  >({});

  useEffect(() => {
-    if (!activeObjects.length) return;
+    if (loading) return;

    if (!activeObject) {
      navigate(AppPath.NotFound);
@ -49,22 +49,22 @@ export const SettingsObjectEdit = () => {
        description: activeObject.description ?? undefined,
      });
    }
-  }, [activeObject, activeObjects.length, formValues, navigate]);
+  }, [activeObject, formValues, loading, navigate]);
+
+  if (!activeObject) 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 !== activeObject.description ||
+    formValues.icon !== activeObject.icon ||
+    formValues.labelPlural !== activeObject.labelPlural ||
+    formValues.labelSingular !== activeObject.labelSingular;

  const canSave = areRequiredFieldsFilled && hasChanges;

  const handleSave = async () => {
-    if (!activeObject) return;
-
    const editedObject = { ...activeObject, ...formValues };

    await editObject(editedObject);
@ -72,6 +72,11 @@ export const SettingsObjectEdit = () => {
    navigate(`/settings/objects/${getObjectSlug(editedObject)}`);
  };

+  const handleDisable = async () => {
+    await disableObject(activeObject);
+    navigate('/settings/objects');
+  };
+
  return (
    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
      <SettingsPageContainer>
@ -80,61 +85,52 @@ export const SettingsObjectEdit = () => {
            links={[
              { children: 'Objects', href: '/settings/objects' },
              {
-                children: activeObject?.labelPlural ?? '',
+                children: activeObject.labelPlural,
                href: `/settings/objects/${objectSlug}`,
              },
              { children: 'Edit' },
            ]}
          />
-          {!!activeObject?.isCustom && (
+          {!!activeObject.isCustom && (
            <SaveAndCancelButtons
              isSaveDisabled={!canSave}
-              onCancel={() => {
-                navigate(`/settings/objects/${objectSlug}`);
-              }}
+              onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
              onSave={handleSave}
            />
          )}
        </SettingsHeaderContainer>
-        {activeObject && (
-          <>
-            <SettingsObjectIconSection
-              disabled={!activeObject.isCustom}
-              iconKey={formValues.icon}
-              label={formValues.labelPlural}
-              onChange={({ iconKey }) =>
-                setFormValues((previousFormValues) => ({
-                  ...previousFormValues,
-                  icon: iconKey,
-                }))
-              }
-            />
-            <SettingsObjectFormSection
-              disabled={!activeObject.isCustom}
-              singularName={formValues.labelSingular}
-              pluralName={formValues.labelPlural}
-              description={formValues.description}
-              onChange={(values) =>
-                setFormValues((previousFormValues) => ({
-                  ...previousFormValues,
-                  ...values,
-                }))
-              }
-            />
-            <Section>
-              <H2Title title="Danger zone" description="Disable object" />
-              <Button
-                Icon={IconArchive}
-                title="Disable"
-                size="small"
-                onClick={() => {
-                  disableObject(activeObject);
-                  navigate('/settings/objects');
-                }}
-              />
-            </Section>
-          </>
-        )}
+        <SettingsObjectIconSection
+          disabled={!activeObject.isCustom}
+          iconKey={formValues.icon}
+          label={formValues.labelPlural}
+          onChange={({ iconKey }) =>
+            setFormValues((previousFormValues) => ({
+              ...previousFormValues,
+              icon: iconKey,
+            }))
+          }
+        />
+        <SettingsObjectFormSection
+          disabled={!activeObject.isCustom}
+          singularName={formValues.labelSingular}
+          pluralName={formValues.labelPlural}
+          description={formValues.description}
+          onChange={(values) =>
+            setFormValues((previousFormValues) => ({
+              ...previousFormValues,
+              ...values,
+            }))
+          }
+        />
+        <Section>
+          <H2Title title="Danger zone" description="Disable object" />
+          <Button
+            Icon={IconArchive}
+            title="Disable"
+            size="small"
+            onClick={handleDisable}
+          />
+        </Section>
      </SettingsPageContainer>
    </SubMenuTopBarContainer>
  );
--- a/front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
@ -1,13 +1,46 @@
-import { useParams } from 'react-router-dom';
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';

+import { useFieldMetadata } from '@/metadata/hooks/useFieldMetadata';
+import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
+import { getFieldSlug } from '@/metadata/utils/getFieldSlug';
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { IconSettings } from '@/ui/display/icon';
+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 { AppPath } from '@/types/AppPath';
+import { IconArchive, 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';
+import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';

 export const SettingsObjectFieldEdit = () => {
-  const { objectSlug = '', fieldName = '' } = useParams();
+  const navigate = useNavigate();
+
+  const { objectSlug = '', fieldSlug = '' } = useParams();
+  const { findActiveObjectBySlug, loading } = useObjectMetadata();
+  const activeObject = findActiveObjectBySlug(objectSlug);
+
+  const { disableField } = useFieldMetadata();
+  const activeField = activeObject?.fields.find(
+    (field) => field.isActive && getFieldSlug(field) === fieldSlug,
+  );
+
+  useEffect(() => {
+    if (loading) return;
+    if (!activeObject || !activeField) navigate(AppPath.NotFound);
+  }, [activeField, activeObject, loading, navigate]);
+
+  if (!activeObject || !activeField) return null;
+
+  const handleDisable = async () => {
+    await disableField(activeField);
+    navigate(`/settings/objects/${objectSlug}`);
+  };
+
  return (
    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
      <SettingsPageContainer>
@ -16,15 +49,33 @@ export const SettingsObjectFieldEdit = () => {
            links={[
              { children: 'Objects', href: '/settings/objects' },
              {
-                children: `${objectSlug}`,
+                children: activeObject.labelPlural,
                href: `/settings/objects/${objectSlug}`,
              },
-              {
-                children: `${fieldName}`,
-              },
+              { children: activeField.label },
            ]}
          />
        </SettingsHeaderContainer>
+        <SettingsObjectFieldFormSection
+          disabled={!activeField.isCustom}
+          name={activeField.label}
+          description={activeField.description ?? undefined}
+          iconKey={activeField.icon ?? undefined}
+          onChange={() => undefined}
+        />
+        <SettingsObjectFieldTypeSelectSection
+          disabled
+          type={activeField.type as ObjectFieldDataType}
+        />
+        <Section>
+          <H2Title title="Danger zone" description="Disable this field" />
+          <Button
+            Icon={IconArchive}
+            title="Disable"
+            size="small"
+            onClick={handleDisable}
+          />
+        </Section>
      </SettingsPageContainer>
    </SubMenuTopBarContainer>
  );
--- a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
@ -36,19 +36,20 @@ export const SettingsObjectNewFieldStep1 = () => {
  const navigate = useNavigate();

  const { objectSlug = '' } = useParams();
-  const { activeObjects, findActiveObjectBySlug } = useObjectMetadata();
+  const { findActiveObjectBySlug, loading } = useObjectMetadata();
  const activeObject = findActiveObjectBySlug(objectSlug);

  useEffect(() => {
-    if (activeObjects.length && !activeObject) {
-      navigate(AppPath.NotFound);
-    }
-  }, [activeObject, activeObjects.length, navigate]);
+    if (loading) return;
+    if (!activeObject) navigate(AppPath.NotFound);
+  }, [activeObject, loading, navigate]);

-  const activeFields = activeObject?.fields.filter(
+  if (!activeObject) return null;
+
+  const activeFields = activeObject.fields.filter(
    (fieldItem) => fieldItem.isActive,
  );
-  const disabledFields = activeObject?.fields.filter(
+  const disabledFields = activeObject.fields.filter(
    (fieldItem) => !fieldItem.isActive,
  );

@ -60,7 +61,7 @@ export const SettingsObjectNewFieldStep1 = () => {
            links={[
              { children: 'Objects', href: '/settings/objects' },
              {
-                children: activeObject?.labelPlural ?? '',
+                children: activeObject.labelPlural,
                href: `/settings/objects/${objectSlug}`,
              },
              { children: 'New Field' },
@ -68,9 +69,7 @@ export const SettingsObjectNewFieldStep1 = () => {
          />
          <SaveAndCancelButtons
            isSaveDisabled
-            onCancel={() => {
-              navigate(`/settings/objects/${objectSlug}`);
-            }}
+            onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
            onSave={() => undefined}
          />
        </SettingsHeaderContainer>
@ -86,7 +85,7 @@ export const SettingsObjectNewFieldStep1 = () => {
              <TableHeader>Data type</TableHeader>
              <TableHeader></TableHeader>
            </StyledObjectFieldTableRow>
-            {!!activeFields?.length && (
+            {!!activeFields.length && (
              <TableSection isInitiallyExpanded={false} title="Active">
                {activeFields.map((fieldItem) => (
                  <SettingsObjectFieldItemTableRow
@ -99,7 +98,7 @@ export const SettingsObjectNewFieldStep1 = () => {
                ))}
              </TableSection>
            )}
-            {!!disabledFields?.length && (
+            {!!disabledFields.length && (
              <TableSection title="Disabled">
                {disabledFields.map((fieldItem) => (
                  <SettingsObjectFieldItemTableRow
--- a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
@ -17,13 +17,14 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 export const SettingsObjectNewFieldStep2 = () => {
  const navigate = useNavigate();
  const { objectSlug = '' } = useParams();
-  const { findActiveObjectBySlug } = useObjectMetadata();
+  const { findActiveObjectBySlug, loading } = useObjectMetadata();
  const activeObject = findActiveObjectBySlug(objectSlug);
  const { createField } = useFieldMetadata();

  useEffect(() => {
+    if (loading) return;
    if (!activeObject) navigate(AppPath.NotFound);
-  }, [activeObject, navigate]);
+  }, [activeObject, loading, navigate]);

  const [formValues, setFormValues] = useState<{
    description?: string;
@ -32,13 +33,12 @@ export const SettingsObjectNewFieldStep2 = () => {
    type: ObjectFieldDataType;
  }>({ icon: 'IconUsers', label: '', type: 'number' });

+  if (!activeObject) return null;
+
  const canSave = !!formValues.label;

  const handleSave = async () => {
-    if (!activeObject) return;
-
    await createField({ ...formValues, objectId: activeObject.id });
-
    navigate(`/settings/objects/${objectSlug}`);
  };

@ -50,7 +50,7 @@ export const SettingsObjectNewFieldStep2 = () => {
            links={[
              { children: 'Objects', href: '/settings/objects' },
              {
-                children: activeObject?.labelPlural ?? '',
+                children: activeObject.labelPlural,
                href: `/settings/objects/${objectSlug}`,
              },
              { children: 'New Field' },
@ -58,9 +58,7 @@ export const SettingsObjectNewFieldStep2 = () => {
          />
          <SaveAndCancelButtons
            isSaveDisabled={!canSave}
-            onCancel={() => {
-              navigate(`/settings/objects/${objectSlug}`);
-            }}
+            onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
            onSave={handleSave}
          />
        </SettingsHeaderContainer>