Merge branch 'master' of github-chisom:dhis2/maintenance-app-beta int…

…o DHIS2-18283-indicator-types-list

CHANGELOG.md

@@ -1,3 +1,18 @@
+## [0.16.1](https://github.com/dhis2/maintenance-app-beta/compare/v0.16.0...v0.16.1) (2024-11-25)
+
+
+### Bug Fixes
+
+* address feedback from org unit new form ([#447](https://github.com/dhis2/maintenance-app-beta/issues/447)) ([958563e](https://github.com/dhis2/maintenance-app-beta/commit/958563e5805fcb7d942749aabb82964f80492bc7))
+
+# [0.16.0](https://github.com/dhis2/maintenance-app-beta/compare/v0.15.0...v0.16.0) (2024-11-25)
+
+
+### Features
+
+* add indicator list type list view ([#433](https://github.com/dhis2/maintenance-app-beta/issues/433)) ([2668c68](https://github.com/dhis2/maintenance-app-beta/commit/2668c683fcda0807f34cb3c2a92f405d5ff66578))
+* upgrade ui library to latest version ([#448](https://github.com/dhis2/maintenance-app-beta/issues/448)) ([ba73ad8](https://github.com/dhis2/maintenance-app-beta/commit/ba73ad8f9b8114203b3c874f6d8e055fe83856e2))
+
 # [0.15.0](https://github.com/dhis2/maintenance-app-beta/compare/v0.14.0...v0.15.0) (2024-11-22)
 
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "maintenance-app",
-    "version": "0.15.0",
+    "version": "0.16.1",
     "description": "",
     "license": "BSD-3-Clause",
     "private": true,
@@ -39,8 +39,8 @@
     },
     "dependencies": {
         "@dhis2/app-runtime": "^3.9.3",
-        "@dhis2/multi-calendar-dates": "^2.0.0-alpha.5",
-        "@dhis2/ui": "^10.0.0",
+        "@dhis2/multi-calendar-dates": "^2.0.0",
+        "@dhis2/ui": "^10.0.2",
         "@tanstack/react-table": "^8.16.0",
         "@types/lodash": "^4.14.198",
         "lodash": "^4.17.21",
@@ -55,7 +55,7 @@
     },
     "resolutions": {
         "eslint": "^8",
-        "@dhis2/multi-calendar-dates": "^2.0.0-alpha.5",
-        "@dhis2/ui": "^10.0.0"
+        "@dhis2/multi-calendar-dates": "^2.0.0",
+        "@dhis2/ui": "^10.0.2"
     }
 }

src/components/form/attributes/CustomAttributes.tsx

@@ -3,6 +3,7 @@ import { InputFieldFF, SingleSelectFieldFF, TextAreaFieldFF } from '@dhis2/ui'
 import * as React from 'react'
 import { Field as FieldRFF, useFormState } from 'react-final-form'
 import {
+    StandardFormField,
     StandardFormSection,
     StandardFormSectionDescription,
     StandardFormSectionTitle,
@@ -38,7 +39,7 @@ function CustomAttribute({ attribute, index }: CustomAttributeProps) {
         }
 
         return (
-            <StandardFormSection key={attribute.id}>
+            <StandardFormField key={attribute.id}>
                 <FieldRFF
                     component={SingleSelectFieldFF}
                     required={required}
@@ -47,49 +48,49 @@ function CustomAttribute({ attribute, index }: CustomAttributeProps) {
                     name={name}
                     options={options}
                 />
-            </StandardFormSection>
+            </StandardFormField>
         )
     }
 
     if (attribute.valueType === 'TEXT') {
         return (
-            <StandardFormSection key={attribute.id}>
+            <StandardFormField key={attribute.id}>
                 <FieldRFF
                     component={InputFieldFF}
                     required={required}
                     inputWidth={inputWidth}
                     label={attribute.displayFormName}
                     name={name}
                 />
-            </StandardFormSection>
+            </StandardFormField>
         )
     }
 
     if (attribute.valueType === 'LONG_TEXT') {
         return (
-            <StandardFormSection key={attribute.id}>
+            <StandardFormField key={attribute.id}>
                 <FieldRFF
                     component={TextAreaFieldFF}
                     required={required}
                     inputWidth={inputWidth}
                     label={attribute.displayFormName}
                     name={name}
                 />
-            </StandardFormSection>
+            </StandardFormField>
         )
     }
 
     if (attribute.valueType === 'GEOJSON') {
         return (
-            <StandardFormSection key={attribute.id}>
+            <StandardFormField key={attribute.id}>
                 <FieldRFF
                     component={TextAreaFieldFF}
                     required={required}
                     inputWidth={inputWidth}
                     label={attribute.displayFormName}
                     name={name}
                 />
-            </StandardFormSection>
+            </StandardFormField>
         )
     }
     // @TODO: Verify that all value types have been covered!

src/components/form/fields/DateField.tsx

@@ -1,5 +1,5 @@
 import { CalendarInput, CalendarInputProps } from '@dhis2/ui'
-import React from 'react'
+import React, { useState } from 'react'
 import { useField } from 'react-final-form'
 import { selectedLocale, useSystemSetting } from '../../../lib'
 
@@ -12,6 +12,11 @@ type DateFieldProps = Omit<
     label?: string
     required?: boolean
 }
+type ValidationProps = {
+    error: boolean
+    validationText?: string
+    valid?: boolean
+}
 export function DateField({
     name,
     label,
@@ -20,35 +25,44 @@ export function DateField({
 }: DateFieldProps) {
     const calendar = useSystemSetting('keyCalendar')
     const locale = selectedLocale
-    const { meta, input } = useField<string | undefined>(name, {
-        format: (value) => {
-            if (value) {
-                return value.slice(0, 10)
+    const [validation, setValidation] = useState<ValidationProps>({
+        error: false,
+    })
+
+    const { input } = useField<string | undefined>(name, {
+        validate: () => {
+            if (validation.error) {
+                return validation.validationText
             }
-            return value
         },
     })
 
-    const handleChange: CalendarInputProps['onDateSelect'] = (payload) => {
-        input.onChange(payload?.calendarDateString)
+    const handleChange: CalendarInputProps['onDateSelect'] = (
+        payload: {
+            calendarDateString: string
+            validation?: ValidationProps
+        } | null
+    ) => {
+        setValidation(payload?.validation || { error: false })
+        input.onChange(payload?.calendarDateString || '')
         input.onBlur()
     }
 
     return (
-        <div style={{ width: '400px' }}>
-            {/* TODO: we can remove style above, once inputWidth for CalendarInput is fixed */}
+        <div>
             <CalendarInput
+                inputWidth={'400px'}
                 date={input.value}
                 name={name}
                 calendar={calendar as CalendarInputProps['calendar']}
                 onDateSelect={handleChange}
                 timeZone={'utc'}
                 locale={locale}
-                error={!!(meta.touched && meta.invalid && meta.error)}
-                validationText={meta.touched ? meta.error : undefined}
                 onBlur={(_, e) => input.onBlur(e)}
                 clearable
-                label={required ? `${label} *` : label}
+                label={required ? `${label} (required) *` : label}
+                {...validation}
+                valid={validation?.valid && input?.value !== ''}
                 {...calendarInputProps}
             />
         </div>

src/components/sectionList/bulk/Bulk.module.css

@@ -8,7 +8,8 @@
     flex-shrink: 0;
     flex-basis: 160px;
     flex-grow: 1;
-    max-width: 250px;
+    min-width: 250px;
+    max-width: 300px;
 }
 
 .subtitle {
@@ -27,7 +28,7 @@
     flex-basis: 160px;
     flex-grow: 1;
     flex-shrink: 0;
-    max-width: 250px;
+    max-width: 225px;
 }
 
 .addActionButton {

src/lib/form/modelFormSchemas.ts

@@ -1,6 +1,7 @@
+import i18n from '@dhis2/d2-i18n'
 import { z } from 'zod'
 
-/*  Note that these schemas describes validations for what we send to the server, 
+/*  Note that these schemas describes validations for what we send to the server,
     and not what is stored in the form. Unknown keys are stripped by default. */
 
 const modelReference = z.object({ id: z.string() })
@@ -15,7 +16,11 @@ const identifiable = z.object({
 const attributeValues = z
     .array(
         z.object({
-            value: z.string(),
+            value: z.string().max(230, {
+                message: i18n.t('Should not exceed {{maxLength}} characters', {
+                    maxLength: 230,
+                }),
+            }),
             attribute: z.object({
                 id: z.string(),
             }),

src/pages/organisationUnits/Edit.tsx

@@ -7,11 +7,10 @@ import {
     DEFAULT_FIELD_FILTERS,
     SECTIONS_MAP,
     useOnSubmitEdit,
-    validate,
 } from '../../lib'
 import { useBoundResourceQueryFn } from '../../lib/query/useBoundQueryFn'
 import { OrganisationUnit, PickWithFieldFilters } from '../../types/generated'
-import { OrganisationUnitFormField, organisationUnitSchema } from './form'
+import { OrganisationUnitFormField, validate } from './form'
 
 const fieldFilters = [
     ...DEFAULT_FIELD_FILTERS,
@@ -68,9 +67,7 @@ export const Component = () => {
             })}
             section={section}
             initialValues={orgUnit.data}
-            validate={(values: OrgUnitFormValues) => {
-                return validate(organisationUnitSchema, values)
-            }}
+            validate={validate}
         >
             <DefaultEditFormContents section={section}>
                 <OrganisationUnitFormField />

src/pages/organisationUnits/New.tsx

@@ -1,26 +1,18 @@
 import React from 'react'
 import { FormBase } from '../../components'
 import { DefaultNewFormContents } from '../../components/form/DefaultFormContents'
-import { SECTIONS_MAP, useOnSubmitNew, validate } from '../../lib'
-import {
-    FormValues,
-    initialValues,
-    OrganisationUnitFormField,
-    organisationUnitSchema,
-} from './form'
+import { SECTIONS_MAP, useOnSubmitNew } from '../../lib'
+import { initialValues, OrganisationUnitFormField, validate } from './form'
 
 const section = SECTIONS_MAP.organisationUnit
-
 export const Component = () => {
     return (
         <FormBase
             onSubmit={useOnSubmitNew({
                 section,
             })}
-            initialValues={initialValues as FormValues}
-            validate={(values: FormValues) => {
-                return validate(organisationUnitSchema, values)
-            }}
+            initialValues={initialValues}
+            validate={validate}
         >
             <DefaultNewFormContents section={section}>
                 <OrganisationUnitFormField />

src/pages/organisationUnits/form/GeometryFields.module.css

@@ -0,0 +1,5 @@
+.coordinateField > div {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacers-dp16);
+}

src/pages/organisationUnits/form/GeometryFields.tsx

@@ -3,6 +3,7 @@ import { Field, InputField } from '@dhis2/ui'
 import React from 'react'
 import { useField } from 'react-final-form'
 import { getConstantTranslation } from '../../../lib'
+import css from './GeometryFields.module.css'
 
 export function GeometryFields() {
     const fieldName = 'geometry'
@@ -19,16 +20,19 @@ export function GeometryFields() {
             type: 'Point',
             coordinates: [longitude || undefined, latitude || undefined],
         }
-
         input.onChange(geometry)
+        input.onBlur()
     }
 
     return !input.value || input.value?.type === 'Point' ? (
         <>
             <Field
+                className={css.coordinateField}
                 name={fieldName}
                 error={meta.touched && !!meta.error}
-                validationText={meta.touched ? meta.error?.type : undefined}
+                validationText={
+                    meta.touched ? meta.error?.coordinates : undefined
+                }
             >
                 <InputField
                     onChange={(e) =>

src/pages/organisationUnits/form/ImageField.tsx

@@ -25,7 +25,7 @@ const fileToBase64 = (file: File): Promise<string> => {
 export function ImageField() {
     const dataEngine = useDataEngine()
     const fieldName = 'image'
-    const { input } = useField(fieldName, { format: (value) => value })
+    const { input, meta } = useField(fieldName, { format: (value) => value })
 
     const [fileBase64, setFileBase64] = useState<string | undefined>()
 
@@ -87,7 +87,13 @@ export function ImageField() {
     }
 
     return (
-        <UIField label={i18n.t('Image')} name="image">
+        <UIField
+            label={i18n.t('Image')}
+            name="image"
+            error={meta.invalid}
+            valid={meta.valid}
+            validationText={input.value?.error}
+        >
             <div className={css.fileInputWrapper}>
                 <ImagePreview
                     fileBase64={fileBase64}

src/pages/organisationUnits/form/OrganisationUnitFormFields.tsx

@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import { InputFieldFF } from '@dhis2/ui'
+import { InputFieldFF, TextAreaFieldFF } from '@dhis2/ui'
 import React from 'react'
 import { Field as FieldRFF } from 'react-final-form'
 import {
@@ -31,7 +31,9 @@ export function OrganisationUnitFormField() {
         <>
             <StandardFormSection>
                 <StandardFormSectionTitle>
-                    {i18n.t('Placement in hierarchy')}
+                    <label htmlFor="parent">
+                        {i18n.t('Placement in hierarchy')}
+                    </label>
                 </StandardFormSectionTitle>
                 <StandardFormSectionDescription>
                     {i18n.t(
@@ -49,7 +51,7 @@ export function OrganisationUnitFormField() {
 
                 <StandardFormSectionDescription>
                     {i18n.t(
-                        'Set up the basic information for this organisation unit.'
+                        'Set up the basic information for this organisation unit'
                     )}
                 </StandardFormSectionDescription>
                 <DefaultIdentifiableFields />
@@ -68,7 +70,7 @@ export function OrganisationUnitFormField() {
                 </StandardFormField>
                 <StandardFormField>
                     <FieldRFF<string | undefined>
-                        component={InputFieldFF}
+                        component={TextAreaFieldFF}
                         inputWidth="400px"
                         label={i18n.t('Comment')}
                         name="comment"