feat(de fields): add field rules & move catcombo validation to fields…

….tsx

src/pages/dataElements/form/createDataElementSchema.ts

@@ -128,9 +128,6 @@ export const createDataElementSchema = (schemas: ModelSchemas) =>
                 z.literal('DEFAULT'),
             ])
             .refine((v) => !!v, { message: requiredMessage }),
-        categoryCombo: z.object({
-            id: z.string().min(1, { message: requiredMessage }),
-        }),
         optionSet: z.object({
             id: z.string().optional(),
         }),

src/pages/dataElements/form/fields.tsx

@@ -9,8 +9,13 @@ import {
     SingleSelectFieldFF,
     TextAreaFieldFF,
 } from '@dhis2/ui'
-import React, { useRef } from 'react'
-import { Field as FieldRFF, useField } from 'react-final-form'
+import React, { useEffect, useRef, useState } from 'react'
+import {
+    Field as FieldRFF,
+    useField,
+    useForm,
+    useFormState,
+} from 'react-final-form'
 import { useHref } from 'react-router'
 import { useParams } from 'react-router-dom'
 import {
@@ -21,11 +26,16 @@ import {
     LegendSetTransfer,
 } from '../../../components'
 import { AGGREGATION_TYPE, DOMAIN_TYPE, VALUE_TYPE } from '../../../constants'
-import { useSchemas } from '../../../lib'
+import { useOptionSetQuery, useSchemas } from '../../../lib'
 import classes from './customFields.module.css'
 import { EditableFieldWrapper } from './EditableFieldWrapper'
 import { useIsFieldValueUnique } from './useIsFieldValueUnique'
 
+/**
+ *
+ * Name
+ *
+ */
 export function NameField() {
     const params = useParams()
     const dataElementId = params.id as string
@@ -59,6 +69,11 @@ export function NameField() {
     )
 }
 
+/**
+ *
+ * ShortName
+ *
+ */
 export function ShortNameField() {
     const params = useParams()
     const dataElementId = params.id as string
@@ -90,6 +105,11 @@ export function ShortNameField() {
     )
 }
 
+/**
+ *
+ * Code
+ *
+ */
 export function CodeField() {
     return (
         <FieldRFF
@@ -103,6 +123,11 @@ export function CodeField() {
     )
 }
 
+/**
+ *
+ * Description
+ *
+ */
 export function DescriptionField() {
     return (
         <FieldRFF
@@ -119,6 +144,11 @@ export function DescriptionField() {
     )
 }
 
+/**
+ *
+ * Url
+ *
+ */
 export function UrlField() {
     return (
         <FieldRFF
@@ -133,6 +163,11 @@ export function UrlField() {
     )
 }
 
+/**
+ *
+ * ColorAndIcon
+ *
+ */
 export function ColorAndIconField() {
     const { input: colorInput } = useField('style.color', {
         validateFields: [],
@@ -163,6 +198,11 @@ export function ColorAndIconField() {
     )
 }
 
+/**
+ *
+ * FieldMask
+ *
+ */
 export function FieldMaskField() {
     return (
         <FieldRFF
@@ -180,6 +220,11 @@ export function FieldMaskField() {
     )
 }
 
+/**
+ *
+ * FormName
+ *
+ */
 export function FormNameField() {
     return (
         <FieldRFF
@@ -196,6 +241,11 @@ export function FormNameField() {
     )
 }
 
+/**
+ *
+ * ZeroIsSignificant
+ *
+ */
 export function ZeroIsSignificantField() {
     return (
         <FieldRFF
@@ -209,6 +259,11 @@ export function ZeroIsSignificantField() {
     )
 }
 
+/**
+ *
+ * Domain
+ *
+ */
 export function DomainField() {
     const name = 'domainType'
     const validate = (value: string) => (!value ? 'Required' : undefined)
@@ -270,6 +325,11 @@ export function DomainField() {
     )
 }
 
+/**
+ *
+ * LegendSet
+ *
+ */
 export function LegendSetField() {
     const name = 'legendSets'
     const { input, meta } = useField(name, {
@@ -328,18 +388,65 @@ export function LegendSetField() {
     )
 }
 
+/**
+ *
+ * ValueType
+ * * Field rule: Unless valueType or the selected optionSet's valueType is
+ *   MULTI_TEXT, filter out the MULTI_TEXT option
+ * * Field rule: When the selected optionSet's valueType is MULTI_TEXT, disable
+ *   valueType field
+ * * Field rule: When the selected optionSet's valueType is MULTI_TEXT, set
+ *   valueTypeField value to optionSet's valueType
+ *
+ */
 export function ValueTypeField() {
+    const { change } = useForm()
+    const { values } = useFormState({ subscription: { values: true } })
+    const disabled = !!values.optionSet.id
+    const [lazy] = useState(!values.optionSet.id)
+    const { refetch, ...optionSetQuery } = useOptionSetQuery({
+        lazy,
+        id: values.optionSet.id,
+        fields: ['id', 'valueType'],
+    })
+
+    useEffect(() => {
+        if (values.optionSet.id) {
+            refetch({ id: values.optionSet.id })
+        }
+    }, [refetch, values.optionSet.id])
+
+    useEffect(() => {
+        if (
+            values.optionSet.id &&
+            !optionSetQuery.loading &&
+            !optionSetQuery.fetching &&
+            !optionSetQuery.error &&
+            optionSetQuery.data?.optionSets.valueType
+        ) {
+            change('valueType', optionSetQuery.data?.optionSets.valueType)
+        }
+    })
+
     const schemas = useSchemas()
     const { dataElement } = schemas
-    const options = dataElement.properties.valueType.constants?.map(
-        (constant) => ({
+    const optionSetHasMultiTextValueType =
+        values.valueType === 'MULTI_TEXT' ||
+        (values.optionSet?.id &&
+            optionSetQuery.data?.optionSets.valueType === 'MULTI_TEXT')
+    const options = dataElement.properties.valueType.constants
+        ?.map((constant) => ({
             value: constant,
             label: VALUE_TYPE[constant as keyof typeof VALUE_TYPE],
+        }))
+        .filter(({ value }) => {
+            return optionSetHasMultiTextValueType || value !== 'MULTI_TEXT'
         })
-    )
+
     return (
         <FieldRFF
             required
+            disabled={disabled}
             component={SingleSelectFieldFF}
             dataTest="dataelementsformfields-valuetype"
             inputWidth="400px"
@@ -354,7 +461,37 @@ export function ValueTypeField() {
     )
 }
 
+/**
+ *
+ * AggregationType
+ * * Field rule: When value type has a certain value, disable aggregationType
+ *   field
+ * * Field rule: When value type has a certain value, disable aggregationType
+ *   value to ''
+ *
+ */
 export function AggregationTypeField() {
+    const { change } = useForm()
+    const { values } = useFormState({ subscription: { values: true } })
+    const disabled = [
+        'TEXT',
+        'LONG_TEXT',
+        'MULTI_TEXT',
+        'LETTER',
+        'PHONE_NUMBER',
+        'EMAIL',
+        'TRACKER_ASSOCIATE',
+        'USERNAME',
+        'FILE_RESOURCE',
+        'COORDINATE',
+    ].includes(values.valueType)
+
+    useEffect(() => {
+        if (disabled) {
+            change('aggregationType', '')
+        }
+    }, [change, disabled])
+
     const { dataElement } = useSchemas()
     const options = dataElement.properties.aggregationType.constants?.map(
         (constant) => ({
@@ -365,6 +502,7 @@ export function AggregationTypeField() {
 
     return (
         <FieldRFF
+            disabled={disabled}
             component={SingleSelectFieldFF}
             dataTest="dataelementsformfields-aggregationtype"
             required
@@ -382,10 +520,31 @@ export function AggregationTypeField() {
     )
 }
 
+/**
+ *
+ * CategoryCombo
+ * * Field rule: Disable when domainType is TRACKER
+ *
+ */
+const validateCategoryCombo = (value: string) => {
+    if (!value) {
+        return i18n.t('Required')
+    }
+}
+
+/*
+ * @TODO: Verify that the api ignores the category combo when it's disabled.
+ *        If it does not, file a jira issue and "escalate" this so it will be
+ *        implemented
+ */
 export function CategoryComboField() {
+    const { values } = useFormState({ subscription: { values: true } })
+    const disabled = values.domainType === 'TRACKER'
+    const validate = disabled ? undefined : validateCategoryCombo
     const newCategoryComboLink = useHref('/categoryCombos/new')
     const { input, meta } = useField('categoryCombo.id', {
         validateFields: [],
+        validate,
     })
     const categoryComboHandle = useRef({
         refetch: () => {
@@ -415,6 +574,7 @@ export function CategoryComboField() {
                 >
                     <CategoryComboSelect
                         placeholder=""
+                        disabled={disabled}
                         invalid={meta.touched && !!meta.error}
                         ref={categoryComboHandle}
                         selected={input.value}
@@ -428,6 +588,11 @@ export function CategoryComboField() {
     )
 }
 
+/**
+ *
+ * OptionSet
+ *
+ */
 export function OptionSetField() {
     const newOptionSetLink = useHref('/optionSets/new')
     const { input, meta } = useField('optionSet.id', {
@@ -471,6 +636,11 @@ export function OptionSetField() {
     )
 }
 
+/**
+ *
+ * OptionSetComment
+ *
+ */
 export function OptionSetCommentField() {
     const newOptionSetLink = useHref('/optionSets/new')
     const { input, meta } = useField('commentOptionSet.id', {
@@ -514,6 +684,11 @@ export function OptionSetCommentField() {
     )
 }
 
+/**
+ *
+ * AggregationLevels
+ *
+ */
 export function AggregationLevelsField() {
     const newAggregationLevelLink = useHref('/organisationUnitLevel/new')
     const { input, meta } = useField('aggregationLevels', {