@iapps/ng-dhis2-ui 1.1.5 → 1.1.7

package/fesm2022/iapps-ng-dhis2-ui.mjs

@@ -25,7 +25,7 @@ import { Layer } from '@dhis2-ui/layer';
 import { CircularLoader } from '@dhis2-ui/loader';
 import { MenuItem, MenuDivider } from '@dhis2-ui/menu';
 import parse from 'html-react-parser';
-import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination, FileInputField, FileListItem, TextAreaField } from '@dhis2/ui';
+import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
 import { isObject, isString, sortBy, isArray, find, camelCase, flatten, head, isEmpty } from 'lodash';
 import cx from 'classnames';
@@ -2661,7 +2661,7 @@ const OrgUnitDimension = ({ roots, selected, onSelect, hideGroupSelect, hideLeve
         React__default.createElement("div", { className: cx('orgUnitTreeWrapper', {
                 disabled: selectedItems.some((item) => DYNAMIC_ORG_UNITS.includes(item.id)),
             }) },
-            React__default.createElement(OrganisationUnitTree, { roots: roots, initiallyExpanded: [
+            React__default.createElement(OrganisationUnitTree, { roots: roots, singleSelection: allowSingleSelection, initiallyExpanded: [
                     ...(roots.length === 1 ? [`/${roots[0]}`] : []),
                     ...selectedItems
                         .filter((item) => !DYNAMIC_ORG_UNITS.includes(item.id) &&
@@ -3778,6 +3778,7 @@ class DateRangeValue {
 var FieldType;
 (function (FieldType) {
     FieldType["TEXT"] = "TEXT";
+    FieldType["MULTI_TEXT"] = "MULTI_TEXT";
     FieldType["TRUE_ONLY"] = "TRUE_ONLY";
     FieldType["LONG_TEXT"] = "LONG_TEXT";
     FieldType["BOOLEAN"] = "BOOLEAN";
@@ -3937,11 +3938,16 @@ class FieldUtil {
 class FieldControlTypeUtil {
     static getFieldControlType(valueType, hasOptions) {
         if (hasOptions) {
+            if (valueType === FieldType.MULTI_TEXT) {
+                return 'multi-dropdown';
+            }
             return 'dropdown';
         }
         switch (valueType) {
             case FieldType.TEXT:
                 return 'textbox';
+            case FieldType.MULTI_TEXT:
+                return 'multi-dropdown';
             case FieldType.BOOLEAN:
                 return 'dropdown';
             case FieldType.LONG_TEXT:
@@ -4169,7 +4175,9 @@ class FormFieldGroup {
                 type: FieldUtil.getFieldType(fieldMetaData['valueType']),
                 dependentField,
                 options,
-                disabled: field.disabled ?? fieldMetaData['disabled'],
+                disabled: field.disabled ??
+                    fieldMetaData['disabled'] ??
+                    fieldMetaData['generated'],
                 min: field.min ?? fieldMetaData['min'],
                 max: field.max ?? fieldMetaData['max'],
                 order: field.order ??
@@ -4331,7 +4339,8 @@ class FormMetaData {
     #getSectionFromPrograms(programs) {
         const sections = flatten(programs.map((program) => {
             return [
-                this.#getReportingDetailsSection(program),
+                this.#getRegisteringUnitSection(program),
+                this.#getReportingDateSection(program),
                 new FormMetadataSection({
                     section: {
                         id: 'registration',
@@ -4406,25 +4415,44 @@ class FormMetaData {
         }
         return sections;
     }
-    #getReportingDetailsSection(program) {
+    #getRegisteringUnitSection(program) {
         return new FormMetadataSection({
             section: {
-                id: 'reporting_details',
-                name: 'Reporting details',
+                id: 'registering_unit_details',
+                name: 'Registering unit details',
                 fieldGroups: [
                     {
-                        id: 'reporting_details',
+                        id: 'registering_unit_details',
                         sortOrder: 1,
-                        isFormHorizontal: true,
+                        isFormHorizontal: false,
                         fields: [
                             new FormField({
                                 id: 'orgUnit',
                                 key: 'orgUnit',
-                                label: 'Organisation unit',
+                                label: program.orgUnitLabel || 'Registering unit',
                                 code: 'orgUnit',
                                 required: true,
                                 controlType: 'org-unit',
                             }),
+                        ],
+                    },
+                ],
+            },
+            program,
+            locale: this.params.locale,
+        }).toJson();
+    }
+    #getReportingDateSection(program) {
+        return new FormMetadataSection({
+            section: {
+                id: 'reporting_dates',
+                name: 'Reporting dates',
+                fieldGroups: [
+                    {
+                        id: 'reporting_dates',
+                        sortOrder: 1,
+                        isFormHorizontal: false,
+                        fields: [
                             new DateField({
                                 id: 'enrollmentDate',
                                 label: program.enrollmentDateLabel || 'Enrollment date',
@@ -4512,8 +4540,8 @@ class BaseFormFieldComponent extends ReactWrapperModule {
         this.value = model();
         this.value$ = toObservable(this.value);
         this.FieldOrgUnitSelector = (props) => {
-            const { onSelectOrgUnit, onCancelOrgUnit } = props;
-            const [selected, setSelected] = useState([]);
+            const { onSelectOrgUnit, selectedOrgUnits } = props;
+            const [selected, setSelected] = useState(selectedOrgUnits);
             const [rootOrgUnits, setRootOrgUnits] = useState();
             const [config, setConfig] = useState();
             useEffect(() => {
@@ -4526,19 +4554,14 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                 });
             }, []);
             return config ? (React__default.createElement(Provider, { config: config, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false }, React__default.createElement(Modal$1, { position: "middle", large: true },
-                React__default.createElement(ModalTitle$1, null, "Organisation unit"),
+                React__default.createElement(ModalTitle$1, null,
+                    "Select ",
+                    this.field().label),
                 React__default.createElement(ModalContent$1, null,
-                    React__default.createElement(OrgUnitDimension, { selected: selected, hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect, hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect, hideUserOrgUnits: this.orgUnitSelectionConfig.hideUserOrgUnits, onSelect: (selectionEvent) => {
+                    React__default.createElement(OrgUnitDimension, { selected: selected, allowSingleSelection: true, hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect, hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect, hideUserOrgUnits: this.orgUnitSelectionConfig.hideUserOrgUnits, onSelect: (selectionEvent) => {
                             setSelected(selectionEvent.items);
-                        }, orgUnitGroupPromise: this.getOrgUnitGroups(), orgUnitLevelPromise: this.getOrgUnitLevels(), roots: rootOrgUnits })),
-                React__default.createElement(ModalActions$1, null,
-                    React__default.createElement(ButtonStrip$1, { end: true },
-                        React__default.createElement(Button$1, { onClick: () => {
-                                onCancelOrgUnit();
-                            } }, "Cancel"),
-                        React__default.createElement(Button$1, { primary: true, disabled: selected.length === 0, onClick: () => {
-                                onSelectOrgUnit(selected);
-                            } }, "Confirm")))))) : (React__default.createElement(CircularLoader$1, { small: true }));
+                            onSelectOrgUnit(selectionEvent.items);
+                        }, orgUnitGroupPromise: this.getOrgUnitGroups(), orgUnitLevelPromise: this.getOrgUnitLevels(), roots: rootOrgUnits }))))) : (React__default.createElement(CircularLoader$1, { small: true }));
         };
         this.showOrgUnitTree = signal(false);
         this.orgUnitSelectionConfig = {
@@ -4583,6 +4606,12 @@ class BaseFormFieldComponent extends ReactWrapperModule {
             const [touched, setTouched] = useState(false);
             const [showOrgUnit, setShowOrgUnit] = useState(false);
             const onChange = (payload) => setSelected(payload.selected);
+            const arrayValue = useMemo(() => {
+                if (value && value.length > 0) {
+                    return value.split(',');
+                }
+                return [];
+            }, [value]);
             const hasError = useMemo(() => {
                 return (touched &&
                     (this.form().get(this.field().id) ||
@@ -4647,10 +4676,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                                 });
                                 setTouched(true);
                             } }),
-                        showOrgUnit && (React__default.createElement(this.FieldOrgUnitSelector, { onCancelOrgUnit: () => {
-                                setShowOrgUnit(false);
-                                setTouched(true);
-                            }, onSelectOrgUnit: (selectedOrgUnits) => {
+                        showOrgUnit && (React__default.createElement(this.FieldOrgUnitSelector, { selectedOrgUnits: [], onSelectOrgUnit: (selectedOrgUnits) => {
                                 if ((selectedOrgUnits || [])[0]) {
                                     const selectedOrgUnit = selectedOrgUnits[0];
                                     setDisplayValue(selectedOrgUnit.name);
@@ -4710,6 +4736,20 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             setValue(event.selected);
                             setTouched(true);
                         } }, (this.field().options || []).map((option) => (React__default.createElement(SingleSelectOption, { key: option.key, label: option.label, value: option.value })))));
+                case 'multi-dropdown':
+                    return (React__default.createElement(MultiSelectField, { clearText: "Clear", clearable: true, empty: "No data found", filterable: (this.field().options || []).length > 5, filterPlaceholder: "Type to filter options", error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, label: this.label(), name: this.field().id, required: this.field().required, loadingText: "Loading options", noMatchText: "No options found", onChange: (event) => {
+                            const selectedValue = (event.selected || []).join(',');
+                            this.ngZone.run(() => {
+                                (this.form().get(this.field().id) ||
+                                    this.form().get(this.field().key))?.setValue(selectedValue);
+                                this.update.emit({
+                                    form: this.form(),
+                                    value: selectedValue,
+                                });
+                            });
+                            setValue(selectedValue);
+                            setTouched(true);
+                        }, selected: arrayValue }, (this.field().options || []).map((option) => (React__default.createElement(MultiSelectOption, { key: option.key, label: option.label, value: option.value })))));
                 case 'file':
                     return (React__default.createElement(FileInputField, { accept: "*", buttonLabel: "Upload a file", label: this.label(), name: this.field().id, files: this.uploadedFiles, onChange: (event) => {
                             this.uploadedFiles.push((event?.files || [])[0]);