diff --git a/src/components/metadataFormControls/CategoryComboSelect/CategoryComboSelect.tsx b/src/components/metadataFormControls/CategoryComboSelect/CategoryComboSelect.tsx index d65d5700..93142207 100644 --- a/src/components/metadataFormControls/CategoryComboSelect/CategoryComboSelect.tsx +++ b/src/components/metadataFormControls/CategoryComboSelect/CategoryComboSelect.tsx @@ -1,41 +1,39 @@ import i18n from '@dhis2/d2-i18n' -import React, { forwardRef } from 'react' -import { ModelSingleSelect } from '../ModelSingleSelect/ModelSingleSelectRefactor' -import type { ModelSingleSelectProps } from '../ModelSingleSelect/ModelSingleSelectRefactor' -import { useInitialOptionQuery } from './useInitialOptionQuery' -import { useOptionsQuery } from './useOptionsQuery' +import React from 'react' +import { PlainResourceQuery } from '../../../types' +import { CategoryCombo } from '../../../types/generated' import { DisplayableModel } from '../../../types/models' +import { + ModelSingleSelect, + ModelSingleSelectProps, +} from '../ModelSingleSelect/ModelSingleSelectRefactor' -type CategoryComboSelectProps = ModelSingleSelectProps & { - required?: boolean +export const categoryCombosSelectQuery = { + resource: 'categoryCombos', + params: { + filter: 'isDefault:eq:false', + fields: ['id', 'displayName'], + }, +} as const satisfies PlainResourceQuery + +type CategoryComboSelectProps = Omit< + ModelSingleSelectProps, + 'query' +> & { + query?: PlainResourceQuery } -export const CategoryComboSelect = forwardRef(function CategoryComboSelect( - { - onChange, - invalid, - disabled, - placeholder = i18n.t('Category combo'), - required, - selected, - showAllOption, - onBlur, - onFocus, - }: CategoryComboSelectProps, - ref -) { + +export const CategoryComboSelect = < + TCategoryCombo extends Partial & DisplayableModel = Pick< + CategoryCombo, + 'id' | 'displayName' + > +>({ + query, + ...modelSingleSelectProps +}: CategoryComboSelectProps) => { + const resolvedQuery = query ?? categoryCombosSelectQuery return ( - + ) -}) +} diff --git a/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectRefactor.tsx b/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectRefactor.tsx index 04614352..ba0214e3 100644 --- a/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectRefactor.tsx +++ b/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectRefactor.tsx @@ -25,6 +25,7 @@ export type ModelSingleSelectProps = Omit< | 'available' | 'onFilterChange' | 'onRetryClick' + | 'onEndReached' | 'showEndLoader' | 'loading' | 'error' @@ -67,10 +68,8 @@ export const ModelSingleSelect = ({ lastPage.pager.nextPage ? lastPage.pager.page + 1 : undefined, getPreviousPageParam: (firstPage) => firstPage.pager.prevPage ? firstPage.pager.page - 1 : undefined, - // select: select - // ? (data) => select(data.pages.flatMap((p) => p[modelName])) - // : undefined, }) + const allDataMap = useMemo(() => { const flatData = queryResult.data?.pages.flatMap((page) => page[modelName]) ?? [] diff --git a/src/components/metadataFormControls/ModelSingleSelect/useRefreshSingleSelect.tsx b/src/components/metadataFormControls/ModelSingleSelect/useRefreshSingleSelect.tsx index 6a65948d..d1b53384 100644 --- a/src/components/metadataFormControls/ModelSingleSelect/useRefreshSingleSelect.tsx +++ b/src/components/metadataFormControls/ModelSingleSelect/useRefreshSingleSelect.tsx @@ -9,9 +9,10 @@ export const useRefreshModelSingleSelect = ( return useCallback( (invalidateFilters?: InvalidateQueryFilters) => { + console.log('invalidate', query) queryClient.invalidateQueries({ queryKey: [query], - ...invalidateFilters, + // ...invalidateFilters, }) }, [queryClient, query] diff --git a/src/lib/query/index.ts b/src/lib/query/index.ts index c6fa51de..b9326c9e 100644 --- a/src/lib/query/index.ts +++ b/src/lib/query/index.ts @@ -1,3 +1,4 @@ export * from './useInfiniteDataQuery' export { useBoundQueryFn } from './useBoundQueryFn' export { createBoundQueryFn } from './createBoundQueryFn' +export { mergePlainResourceQueries } from './mergeQuery' diff --git a/src/pages/dataElements/Edit.tsx b/src/pages/dataElements/Edit.tsx index f58798d8..578442c1 100644 --- a/src/pages/dataElements/Edit.tsx +++ b/src/pages/dataElements/Edit.tsx @@ -41,7 +41,11 @@ function useDataElementQuery(id: string) { dataElement: { resource: `dataElements/${id}`, params: { - fields: ['*', 'attributeValues[*]'], + fields: [ + '*', + 'categoryCombo[id,displayName]', + 'attributeValues[*]', + ], }, }, } diff --git a/src/pages/dataElements/fields/CategoryComboField.tsx b/src/pages/dataElements/fields/CategoryComboField.tsx index c72277c4..b45842f2 100644 --- a/src/pages/dataElements/fields/CategoryComboField.tsx +++ b/src/pages/dataElements/fields/CategoryComboField.tsx @@ -1,23 +1,21 @@ import i18n from '@dhis2/d2-i18n' -import React, { useEffect, useRef } from 'react' -import { useForm, useFormState } from 'react-final-form' +import React, { useEffect } from 'react' +import { useField, useForm } from 'react-final-form' import { useHref } from 'react-router' import { EditableFieldWrapper } from '../../../components' import { ModelSingleSelectField } from '../../../components/metadataFormControls/ModelSingleSelect/ModelSingleSelectField' import { useRefreshModelSingleSelect } from '../../../components/metadataFormControls/ModelSingleSelect/useRefreshSingleSelect' -import { - DEFAULT_CATEGORY_COMBO, - useDefaultCategoryComboQuery, -} from '../../../lib' +import { DEFAULT_CATEGORY_COMBO } from '../../../lib' import { PlainResourceQuery } from '../../../types' import classes from './CategoryComboField.module.css' const query = { resource: 'categoryCombos', params: { - filter: 'isDefault:eq:false', + filter: ['isDefault:eq:false'], + fields: ['id', 'displayName'], }, -} satisfies PlainResourceQuery +} as const satisfies PlainResourceQuery /* * @TODO: Verify that the api ignores the category combo when it's disabled. @@ -30,23 +28,25 @@ const query = { */ export function CategoryComboField() { const refresh = useRefreshModelSingleSelect(query) - const defaultCategoryComboQuery = useDefaultCategoryComboQuery() const { change } = useForm() - const { values } = useFormState({ subscription: { values: true } }) - const domainTypeIsTracker = values.domainType === 'TRACKER' + const { + input: { value: domainTypeValue }, + } = useField('domainType') + + const domainTypeIsTracker = domainTypeValue === 'TRACKER' const disabled = domainTypeIsTracker const newCategoryComboLink = useHref('/categoryCombos/new') useEffect(() => { - if (defaultCategoryComboQuery.data?.id && domainTypeIsTracker) { - change('categoryCombo.id', defaultCategoryComboQuery.data.id) + if (domainTypeIsTracker) { + change('categoryCombo', DEFAULT_CATEGORY_COMBO) } - }, [change, defaultCategoryComboQuery.data?.id, domainTypeIsTracker]) + }, [change, domainTypeIsTracker]) return ( refresh} + onRefresh={() => refresh()} onAddNew={() => window.open(newCategoryComboLink, '_blank')} >
diff --git a/src/types/query.ts b/src/types/query.ts index 26887911..03b098f7 100644 --- a/src/types/query.ts +++ b/src/types/query.ts @@ -14,6 +14,7 @@ type QueryParams = { [key: string]: unknown } +/* A simple resource-query, without params callback */ export type PlainResourceQuery = { resource: string id?: string