feat(merge): add indicator merge form

src/pages/indicatorTypes/Merge.tsx

@@ -0,0 +1,50 @@
+import { Card } from '@dhis2/ui'
+import React from 'react'
+import { useQuery } from 'react-query'
+import { useNavigate } from 'react-router-dom'
+import { StandardFormSectionTitle } from '../../components'
+import { LoadingSpinner } from '../../components/loading/LoadingSpinner'
+import { useLocationWithState } from '../../lib'
+import { useBoundResourceQueryFn } from '../../lib/query/useBoundQueryFn'
+import { ModelCollectionResponse } from '../../types/generated'
+import { IndicatorTypeMergeForm } from './merge/IndicatorTypeMerge'
+
+export const Component = () => {
+    const location = useLocationWithState<{ selectedModels: Set<string> }>()
+    const queryFn = useBoundResourceQueryFn()
+
+    const initialSelected = location.state?.selectedModels
+        ? Array.from(location.state.selectedModels)
+        : []
+
+    const q = useQuery({
+        queryKey: [
+            {
+                resource: 'indicatorTypes',
+                params: {
+                    filter: `id:in:[${initialSelected.join()}]`,
+                    fields: ['id', 'displayName'],
+                    paging: false,
+                },
+            },
+        ],
+        queryFn: queryFn<
+            ModelCollectionResponse<
+                { id: string; displayName: string },
+                'indicatorTypes'
+            >
+        >,
+        enabled: initialSelected.length > 0,
+        select: (data) => data.indicatorTypes,
+    })
+
+    return (
+        <Card>
+            <StandardFormSectionTitle>
+                Configure indicator type merge
+            </StandardFormSectionTitle>
+            {q.isLoading && <LoadingSpinner />}
+            {q.isSuccess && <IndicatorTypeMergeForm selectedModels={q.data} />}
+        </Card>
+    )
+}

src/pages/indicatorTypes/merge/IndicatorTypeMerge.tsx

@@ -0,0 +1,105 @@
+import { useDataEngine } from '@dhis2/app-runtime'
+import i18n from '@dhis2/d2-i18n'
+import { Button, ButtonStrip, CheckboxFieldFF, RadioFieldFF } from '@dhis2/ui'
+import React, { useMemo } from 'react'
+import { Field, Form } from 'react-final-form'
+import { z } from 'zod'
+import { ModelTransferField } from '../../../components'
+import { HorizontalFieldGroup } from '../../../components/form'
+import { getDefaults } from '../../../lib'
+import { mergeFormSchema, validate } from './indicatorTypeMergeSchema'
+
+type DataElementMergeFormProps = {
+    selectedModels: { id: string; displayName: string }[]
+}
+
+type IndicatorTypeFormValues = z.infer<typeof mergeFormSchema>
+
+export const IndicatorTypeMergeForm = ({
+    selectedModels,
+}: DataElementMergeFormProps) => {
+    const dataEngine = useDataEngine()
+
+    const initialValues = useMemo(() => {
+        const defaults = {
+            ...getDefaults(mergeFormSchema),
+            sources: Array.from(selectedModels),
+        }
+        console.log({ defaults, selectedModels })
+        return defaults
+    }, [selectedModels])
+
+    console.log({ initialValues })
+    const onSubmit = async (values: IndicatorTypeFormValues) => {
+        console.log({ values })
+
+        return {}
+    }
+
+    return (
+        <Form
+            initialValues={initialValues}
+            onSubmit={onSubmit}
+            validate={validate}
+        >
+            {({ handleSubmit, values }) => (
+                <form
+                    onSubmit={handleSubmit}
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '16px',
+                        padding: '16px',
+                    }}
+                >
+                    <ModelTransferField
+                        name="sources"
+                        query={{
+                            resource: 'indicatorTypes',
+                            params: {
+                                fields: 'id,displayName',
+                                filter: values.target
+                                    ? `id:!in:[${values.target}]`
+                                    : [],
+                            },
+                        }}
+                        label="Source indicator types"
+                    />
+                    <ModelTransferField
+                        name="target"
+                        label="Target indicator type"
+                        query={{
+                            resource: 'indicatorTypes',
+                            params: {
+                                fields: 'id,displayName',
+                                filter:
+                                    values.sources.length > 0
+                                        ? `id:!in:[${Array.from(
+                                              values.sources.map((s) =>
+                                                  typeof s === 'string'
+                                                      ? s
+                                                      : s.id
+                                              )
+                                          )}]`
+                                        : [],
+                            },
+                        }}
+                    />
+
+                    <Field
+                        component={CheckboxFieldFF}
+                        name="deleteSources"
+                        label={i18n.t('Delete source indicator types')}
+                        type="checkbox"
+                    />
+                    <ButtonStrip>
+                        <Button primary type="submit">
+                            {i18n.t('Merge')}
+                        </Button>
+                        <Button secondary>{i18n.t('Cancel')}</Button>
+                    </ButtonStrip>
+                </form>
+            )}
+        </Form>
+    )
+}

src/pages/indicatorTypes/merge/indicatorTypeMergeSchema.ts

@@ -0,0 +1,16 @@
+import { z } from 'zod'
+import { createFormValidate, modelFormSchemas } from '../../../lib'
+
+const { referenceCollection } = modelFormSchemas
+
+export const mergeFormSchema = z
+    .object({
+        sources: referenceCollection.default([]),
+        target: referenceCollection.length(1).default([]),
+        deleteSources: z.boolean().default(false),
+    })
+    .refine((data) => {
+        return 'error!'
+    })
+
+export const validate = createFormValidate(mergeFormSchema)