From e085a9cba345563b75b6c6dd8c31f3409398557a Mon Sep 17 00:00:00 2001 From: ismay Date: Wed, 19 Jul 2023 15:10:18 +0200 Subject: [PATCH] chore: add selected values to existing queueables --- .../SequenceOrderEditField.js | 50 +++++++++++++++++++ .../SequenceOrderField/SequenceOrderField.js | 4 +- .../FormFields/SequenceOrderField/index.js | 3 +- src/components/FormFields/index.js | 5 +- src/components/Forms/SequenceEditForm.js | 5 +- .../Forms/SequenceEditFormContainer.js | 6 +-- src/components/Routes/Routes.js | 2 +- src/pages/SequenceEdit/SequenceEdit.js | 23 ++++++++- 8 files changed, 85 insertions(+), 13 deletions(-) create mode 100644 src/components/FormFields/SequenceOrderField/SequenceOrderEditField.js diff --git a/src/components/FormFields/SequenceOrderField/SequenceOrderEditField.js b/src/components/FormFields/SequenceOrderField/SequenceOrderEditField.js new file mode 100644 index 000000000..35a1a47f4 --- /dev/null +++ b/src/components/FormFields/SequenceOrderField/SequenceOrderEditField.js @@ -0,0 +1,50 @@ +import React from 'react' +import { ReactFinalForm, CircularLoader, NoticeBox } from '@dhis2/ui' +import i18n from '@dhis2/d2-i18n' +import { jobTypesMap } from '../../../services/server-translations' +import { useQueueables } from '../../../hooks/queueables' +import SequenceTransfer from './SequenceTransfer' + +const { Field } = ReactFinalForm + +// The key under which this field will be sent to the backend +const FIELD_NAME = 'sequence' +const hasEnoughJobs = (value) => + value?.length > 1 ? undefined : i18n.t('Please select at least two jobs') + +const SequenceOrderEditField = ({ selectedValues }) => { + const { loading, error, data } = useQueueables() + + if (loading) { + return + } + + if (error) { + return ( + + ) + } + + // The selected values aren't part of the queueables, so we need to add them + const options = data.concat(selectedValues).map(({ name, id, type }) => ({ + label: name, + value: id, + type: jobTypesMap[type], + })) + + return ( + + ) +} + +export default SequenceOrderEditField diff --git a/src/components/FormFields/SequenceOrderField/SequenceOrderField.js b/src/components/FormFields/SequenceOrderField/SequenceOrderField.js index 37f1616e4..083bd859c 100644 --- a/src/components/FormFields/SequenceOrderField/SequenceOrderField.js +++ b/src/components/FormFields/SequenceOrderField/SequenceOrderField.js @@ -9,9 +9,8 @@ const { Field } = ReactFinalForm // The key under which this field will be sent to the backend const FIELD_NAME = 'sequence' -const initialValue = [] const hasEnoughJobs = (value) => - value.length > 1 ? undefined : i18n.t('Please select at least two jobs') + value?.length > 1 ? undefined : i18n.t('Please select at least two jobs') const SequenceOrderField = () => { const { loading, error, data } = useQueueables() @@ -42,7 +41,6 @@ const SequenceOrderField = () => { name={FIELD_NAME} component={SequenceTransfer} options={options} - initialValue={initialValue} validate={hasEnoughJobs} /> ) diff --git a/src/components/FormFields/SequenceOrderField/index.js b/src/components/FormFields/SequenceOrderField/index.js index d14ee8e1c..72c0fa2a6 100644 --- a/src/components/FormFields/SequenceOrderField/index.js +++ b/src/components/FormFields/SequenceOrderField/index.js @@ -1 +1,2 @@ -export { default } from './SequenceOrderField' +export { default as SequenceOrderField} from './SequenceOrderField' +export { default as SequenceOrderEditField} from './SequenceOrderEditField' diff --git a/src/components/FormFields/index.js b/src/components/FormFields/index.js index 1c3c7d25c..a1c132a21 100644 --- a/src/components/FormFields/index.js +++ b/src/components/FormFields/index.js @@ -9,6 +9,9 @@ export { default as JobTypeField } from './JobTypeField' export { default as NameField } from './NameField' export { default as ParameterFields } from './ParameterFields' export { default as ScheduleField } from './ScheduleField' -export { default as SequenceOrderField } from './SequenceOrderField' +export { + SequenceOrderField, + SequenceOrderEditField, +} from './SequenceOrderField' export { fieldNames } diff --git a/src/components/Forms/SequenceEditForm.js b/src/components/Forms/SequenceEditForm.js index 0b52b9547..5590022c5 100644 --- a/src/components/Forms/SequenceEditForm.js +++ b/src/components/Forms/SequenceEditForm.js @@ -4,7 +4,7 @@ import i18n from '@dhis2/d2-i18n' import { Button, CircularLoader, Box, ReactFinalForm } from '@dhis2/ui' import { DiscardFormButton } from '../Buttons' import { FormErrorBox } from '../FormErrorBox' -import { NameField, CronField, SequenceOrderField } from '../FormFields' +import { NameField, CronField, SequenceOrderEditField } from '../FormFields' import styles from './SequenceEditForm.module.css' const { useForm } = ReactFinalForm @@ -16,6 +16,7 @@ const SequenceEditForm = ({ submitError, hasSubmitErrors, setIsPristine, + selectedValues }) => { const { subscribe } = useForm() @@ -44,7 +45,7 @@ const SequenceEditForm = ({ - + {hasSubmitErrors && ( diff --git a/src/components/Forms/SequenceEditFormContainer.js b/src/components/Forms/SequenceEditFormContainer.js index 17f350a4d..5d73bb752 100644 --- a/src/components/Forms/SequenceEditFormContainer.js +++ b/src/components/Forms/SequenceEditFormContainer.js @@ -1,7 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' import { ReactFinalForm } from '@dhis2/ui' -import { useParams } from 'react-router-dom' import history from '../../services/history' import { useSubmitJobQueue } from '../../hooks/job-queues' import SequenceEditForm from './SequenceEditForm' @@ -21,7 +20,6 @@ const initialFields = [ ] const SequenceEditFormContainer = ({ sequence, setIsPristine }) => { - const { id } = useParams() const redirect = () => { history.push('/') } @@ -33,6 +31,8 @@ const SequenceEditFormContainer = ({ sequence, setIsPristine }) => { return filtered }, {}) + initialValues.sequence = initialValues.sequence.map(({ id }) => id) + /** * destroyOnUnregister is enabled so that dynamic fields will be unregistered * when they're removed from the form, for instance when the jobType changes. @@ -41,10 +41,10 @@ const SequenceEditFormContainer = ({ sequence, setIsPristine }) => {
) } diff --git a/src/components/Routes/Routes.js b/src/components/Routes/Routes.js index 32e8083dc..31dd3d92c 100644 --- a/src/components/Routes/Routes.js +++ b/src/components/Routes/Routes.js @@ -16,7 +16,7 @@ const Routes = () => ( - + ) diff --git a/src/pages/SequenceEdit/SequenceEdit.js b/src/pages/SequenceEdit/SequenceEdit.js index 643949224..5177c1193 100644 --- a/src/pages/SequenceEdit/SequenceEdit.js +++ b/src/pages/SequenceEdit/SequenceEdit.js @@ -1,12 +1,31 @@ import React, { useState } from 'react' -import { Card, IconInfo16 } from '@dhis2/ui' +import { Card, IconInfo16 , NoticeBox } from '@dhis2/ui' +import { useParams } from 'react-router-dom' import i18n from '@dhis2/d2-i18n' +import { Spinner } from '../../components/Spinner' import { DiscardFormButton } from '../../components/Buttons' import { SequenceEditFormContainer } from '../../components/Forms' +import { useJobScheduleById } from '../../hooks/job-schedules' import styles from './SequenceEdit.module.css' const SequenceEdit = () => { const [isPristine, setIsPristine] = useState(true) + const { id } = useParams() + const { data, fetching, error } = useJobScheduleById(id) + + if (fetching) { + return + } + + if (error) { + return ( + + {i18n.t( + 'Something went wrong whilst loading the requested schedule. Make sure it has not been deleted and try refreshing the page.' + )} + + ) + } return ( @@ -36,7 +55,7 @@ const SequenceEdit = () => { )} - + )