diff --git a/src/components/standardForm/StandardFormActions.module.css b/src/components/standardForm/StandardFormActions.module.css new file mode 100644 index 00000000..177bed9c --- /dev/null +++ b/src/components/standardForm/StandardFormActions.module.css @@ -0,0 +1,4 @@ +.submitButtonLoadingIcon { + display: block; + margin-right: 8px; +} diff --git a/src/components/standardForm/StandardFormActions.tsx b/src/components/standardForm/StandardFormActions.tsx new file mode 100644 index 00000000..27582664 --- /dev/null +++ b/src/components/standardForm/StandardFormActions.tsx @@ -0,0 +1,36 @@ +import { Button, ButtonStrip, CircularLoader } from '@dhis2/ui' +import React from 'react' +import classes from './StandardFormActions.module.css' + +function LoadingIcon() { + return ( + + + + ) +} + +export function StandardFormActions({ + cancelLabel, + submitLabel, + submitting, + onCancelClick, +}: { + cancelLabel: string + submitLabel: string + submitting: boolean + onCancelClick: () => void +}) { + return ( + + + + + + ) +} diff --git a/src/components/standardForm/index.ts b/src/components/standardForm/index.ts index 638dc24c..b024daa5 100644 --- a/src/components/standardForm/index.ts +++ b/src/components/standardForm/index.ts @@ -1,3 +1,4 @@ +export { StandardFormActions } from './StandardFormActions' export { StandardFormSection } from './StandardFormSection' export { StandardFormSectionTitle } from './StandardFormSectionTitle' export { StandardFormSectionDescription } from './StandardFormSectionDescription' diff --git a/src/pages/dataElements/Edit.module.css b/src/pages/dataElements/Edit.module.css index d042c9ca..de17044a 100644 --- a/src/pages/dataElements/Edit.module.css +++ b/src/pages/dataElements/Edit.module.css @@ -13,8 +13,3 @@ box-shadow: 0 0 3px rgba(0, 0, 0, 0.8); background: var(--colors-white); } - -.saveButtonLoadingIcon { - display: block; - margin-right: 8px; -} diff --git a/src/pages/dataElements/Edit.tsx b/src/pages/dataElements/Edit.tsx index 72fba8d3..19522be1 100644 --- a/src/pages/dataElements/Edit.tsx +++ b/src/pages/dataElements/Edit.tsx @@ -1,11 +1,13 @@ import { useDataEngine, useDataQuery } from '@dhis2/app-runtime' -import { Button, ButtonStrip, CircularLoader } from '@dhis2/ui' +import i18n from '@dhis2/d2-i18n' import { FormApi } from 'final-form' import React from 'react' import { withTypes } from 'react-final-form' import { useNavigate, useParams } from 'react-router-dom' +import { StandardFormActions } from '../../components' import { SCHEMA_SECTIONS } from '../../constants' import { getSectionPath } from '../../lib' +import { JsonPatchOperation } from '../../types' import { Attribute, DataElement } from '../../types/generated' import { formatFormValues } from './edit' import classes from './Edit.module.css' @@ -120,7 +122,8 @@ export const Component = () => { resource: 'dataElements', id: dataElementId, type: 'json-patch', - data: ({ operations }: { operations: any[] }) => operations, + data: ({ operations }: { operations: JsonPatchOperation[] }) => + operations, } as const return dataEngine.mutate(ADD_NEW_DATA_ELEMENT_MUTATION, { @@ -142,27 +145,12 @@ export const Component = () => {
- - - - - + navigate(listPath)} + />
)} diff --git a/src/pages/dataElements/New.module.css b/src/pages/dataElements/New.module.css index 884e43aa..331dde3d 100644 --- a/src/pages/dataElements/New.module.css +++ b/src/pages/dataElements/New.module.css @@ -3,8 +3,3 @@ padding: var(--spacers-dp16); padding-bottom: var(--spacers-dp32); } - -.saveButtonLoadingIcon { - display: block; - margin-right: 8px; -} diff --git a/src/pages/dataElements/New.tsx b/src/pages/dataElements/New.tsx index ce38fdc6..4e373409 100644 --- a/src/pages/dataElements/New.tsx +++ b/src/pages/dataElements/New.tsx @@ -1,12 +1,13 @@ import { useDataEngine } from '@dhis2/app-runtime' +import i18n from '@dhis2/d2-i18n' import { Button, ButtonStrip, CircularLoader } from '@dhis2/ui' import React from 'react' import { Form } from 'react-final-form' import { useNavigate } from 'react-router-dom' -import { StandardFormSection } from '../../components' +import { StandardFormActions, StandardFormSection } from '../../components' import { SCHEMA_SECTIONS } from '../../constants' import { getSectionPath } from '../../lib' -import { Attribute, DataElement } from '../../types/generated' +import { Attribute } from '../../types/generated' import { DataElementFormFields, useCustomAttributesQuery } from './form' import { FormValues } from './form/types' import classes from './New.module.css' @@ -135,31 +136,12 @@ export const Component = () => { - - - - - + navigate(listPath)} + />