@iapps/ng-dhis2-ui 1.2.133 → 1.2.135

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

@@ -6536,6 +6536,157 @@ const CoordinatePickerField = ({ label, name, value, required, disabled, error,
                     React__default.createElement(Button$1, { primary: true, onClick: handleConfirmFromMap, disabled: !pendingCoordinate }, "Use Selected Location")))))));
 };
 
+const ALL_COUNTRIES = [
+    // East Africa first (for convenience)
+    { isoCode: 'TZ', dialCode: '+255', name: 'Tanzania', flag: '🇹🇿' },
+    { isoCode: 'KE', dialCode: '+254', name: 'Kenya', flag: '🇰🇪' },
+    { isoCode: 'UG', dialCode: '+256', name: 'Uganda', flag: '🇺🇬' },
+    { isoCode: 'RW', dialCode: '+250', name: 'Rwanda', flag: '🇷🇼' },
+    { isoCode: 'BI', dialCode: '+257', name: 'Burundi', flag: '🇧🇮' },
+    { isoCode: 'SS', dialCode: '+211', name: 'South Sudan', flag: '🇸🇸' },
+    { isoCode: 'ET', dialCode: '+251', name: 'Ethiopia', flag: '🇪🇹' },
+    // A few examples from other regions:
+    { isoCode: 'GB', dialCode: '+44', name: 'United Kingdom', flag: '🇬🇧' },
+    { isoCode: 'US', dialCode: '+1', name: 'United States', flag: '🇺🇸' },
+    { isoCode: 'CA', dialCode: '+1', name: 'Canada', flag: '🇨🇦' },
+    { isoCode: 'DE', dialCode: '+49', name: 'Germany', flag: '🇩🇪' },
+    { isoCode: 'IN', dialCode: '+91', name: 'India', flag: '🇮🇳' },
+    { isoCode: 'CN', dialCode: '+86', name: 'China', flag: '🇨🇳' },
+    { isoCode: 'BR', dialCode: '+55', name: 'Brazil', flag: '🇧🇷' },
+    // 👉 Here you add the rest of the world.
+    // You can load a standard JSON of all countries (isoCode, dialCode, name, flag)
+    // and generate this array at build time if you prefer.
+];
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+const DEFAULT_COUNTRY_ISO = 'TZ';
+const FilterableSingleSelectField = SingleSelectField;
+function normalizeTanzaniaLocal(raw) {
+    const digits = (raw || '').replace(/\D/g, '');
+    if (!digits)
+        return '';
+    if (digits.startsWith('255')) {
+        let sub = digits.slice(3);
+        if (sub.startsWith('0'))
+            sub = sub.slice(1);
+        return ('0' + sub).slice(0, 10);
+    }
+    if (digits.startsWith('0')) {
+        return digits.slice(0, 10);
+    }
+    if (/^[67]\d{7,9}$/.test(digits)) {
+        return ('0' + digits).slice(0, 10);
+    }
+    if (digits.length >= 9 && !digits.startsWith('0')) {
+        return ('0' + digits.slice(0, 9)).slice(0, 10);
+    }
+    return digits.slice(0, 10);
+}
+const InternationalPhoneField = ({ name, label, placeholder, value, required, disabled, error, validationText, inputWidth, defaultCountryIsoCode = DEFAULT_COUNTRY_ISO, onChange, onBlur, }) => {
+    const [selectedIsoCode, setSelectedIsoCode] = React__default.useState(defaultCountryIsoCode);
+    const [filterText, setFilterText] = React__default.useState('');
+    const [leadingZeroWarning, setLeadingZeroWarning] = React__default.useState(null);
+    const selectedCountry = ALL_COUNTRIES.find((c) => c.isoCode === selectedIsoCode) ??
+        ALL_COUNTRIES.find((c) => c.isoCode === DEFAULT_COUNTRY_ISO);
+    const [localNumber, setLocalNumber] = React__default.useState('');
+    React__default.useEffect(() => {
+        const raw = value ?? '';
+        if (selectedCountry.isoCode === 'TZ') {
+            const normalizedStored = normalizeTanzaniaLocal(raw);
+            if (!normalizedStored) {
+                setLocalNumber('');
+                return;
+            }
+            const digits = normalizedStored.replace(/\D/g, '');
+            const ui = digits.startsWith('0') ? digits.slice(1) : digits;
+            setLocalNumber(ui);
+        }
+        else {
+            const digits = raw.replace(/\D/g, '').slice(0, 15);
+            setLocalNumber(digits);
+        }
+        setLeadingZeroWarning(null);
+    }, [value, selectedCountry.isoCode]);
+    const filteredCountries = React__default.useMemo(() => {
+        const term = filterText.trim().toLowerCase();
+        if (!term)
+            return ALL_COUNTRIES;
+        return ALL_COUNTRIES.filter((c) => {
+            const haystack = `${c.name} ${c.dialCode} ${c.isoCode}`.toLowerCase();
+            return haystack.includes(term);
+        });
+    }, [filterText]);
+    const handleCountryChange = ({ selected }) => {
+        setSelectedIsoCode(selected);
+    };
+    const handleLocalChange = ({ value }) => {
+        const digitsOnly = (value || '').replace(/\D/g, '');
+        if (selectedCountry.isoCode === 'TZ') {
+            let ui = digitsOnly;
+            if (ui.startsWith('0')) {
+                setLeadingZeroWarning('For Tanzania, do not start the number with 0. Enter it without the leading 0 (e.g. 767000000).');
+                ui = ui.slice(1);
+            }
+            else {
+                setLeadingZeroWarning(null);
+            }
+            ui = ui.slice(0, 9);
+            const stored = ui ? '0' + ui : '';
+            setLocalNumber(ui);
+            onChange(stored);
+        }
+        else {
+            const ui = digitsOnly.slice(0, 15);
+            setLocalNumber(ui);
+            onChange(ui);
+            setLeadingZeroWarning(null);
+        }
+    };
+    const effectiveValidationText = leadingZeroWarning ??
+        validationText ??
+        'Enter the phone number without the leading 0 (e.g. 767000000). The country code is already applied, and the system will store it as 0767000000 for Tanzania.';
+    const hasError = Boolean(error || leadingZeroWarning);
+    const wrapperStyle = {
+        maxWidth: typeof inputWidth === 'number' ? inputWidth : inputWidth || 480,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.5rem',
+    };
+    return (React__default.createElement("div", { style: wrapperStyle },
+        label && (React__default.createElement("label", { htmlFor: name, style: {
+                fontSize: '0.875rem',
+                fontWeight: 500,
+                color: '#1f2933',
+            } },
+            label,
+            required ? (React__default.createElement("span", { style: { color: '#e53935', marginLeft: 4 } }, "*")) : null)),
+        React__default.createElement("div", { style: {
+                display: 'flex',
+                width: '100%',
+                gap: '0.75rem',
+                alignItems: 'stretch',
+            } },
+            React__default.createElement("div", { style: {
+                    flex: '0 0 auto',
+                    width: 260,
+                } },
+                React__default.createElement(FilterableSingleSelectField, { selected: selectedIsoCode, onChange: handleCountryChange, disabled: disabled, dense: true, filterable: true, onFilterChange: ({ value }) => setFilterText(value), noMatchText: "No matching country" }, filteredCountries.map((country) => (React__default.createElement(SingleSelectOption, { disabled: disabled, key: country.isoCode, value: country.isoCode, label: `${country.flag} ${country.name} (${country.dialCode})` }))))),
+            React__default.createElement("div", { style: { flex: '1 1 0', minWidth: 0 } },
+                React__default.createElement(InputField$1, { type: "tel", name: name, placeholder: placeholder ?? '767000000', value: localNumber, required: required, disabled: disabled, error: hasError, validationText: effectiveValidationText, autoComplete: "tel", max: selectedCountry.isoCode === 'TZ' ? '9' : '15', onChange: handleLocalChange, onBlur: () => {
+                        if (selectedCountry.isoCode === 'TZ') {
+                            const digits = (localNumber || '')
+                                .replace(/\D/g, '')
+                                .slice(0, 9);
+                            const stored = digits ? '0' + digits : '';
+                            if (digits !== localNumber) {
+                                setLocalNumber(digits);
+                                onChange(stored);
+                            }
+                        }
+                        onBlur?.();
+                    } })))));
+};
+
 // Copyright 2024 UDSM DHIS2 Lab. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
@@ -6661,7 +6812,6 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                         value &&
                         value.length > 0 &&
                         touched)) {
-                    //  if (this.field().unique && value && value.length > 0 && touched) {
                     setCheckingUniqueness(true);
                     setRecordExistError(undefined);
                     try {
@@ -6684,6 +6834,18 @@ class BaseFormFieldComponent extends ReactWrapperModule {
             };
             const formFieldContent = () => {
                 switch (this.field().controlType) {
+                    case 'number':
+                        return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: this.field().type, inputWidth: inputWidth, required: this.field().required, name: this.field().id, label: this.label(), min: this.field().min?.toString(), max: this.field().max?.toString(), placeholder: this.placeholder(), value: value, readOnly: disabled, onChange: (event) => {
+                                onValueChange(event.value);
+                            }, onBlur: () => {
+                                checkValueUniqueness();
+                            } }));
+                    case 'tel':
+                        return (React__default.createElement(InternationalPhoneField, { name: this.field().id, label: this.label(), placeholder: this.placeholder(), value: value ?? '', required: this.field().required, disabled: disabled, error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, defaultCountryIsoCode: "TZ", onChange: (localNumber) => {
+                                onValueChange(localNumber);
+                            }, onBlur: () => {
+                                checkValueUniqueness();
+                            } }));
                     case 'coordinate':
                         return (React__default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
                             React__default.createElement(NoticeBox, { title: "Location capture required" },
@@ -6772,9 +6934,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                     case 'date-time': {
                         const field = this.field();
                         const isDateTimeField = field.type === 'date-time';
-                        const inputType = isDateTimeField
-                            ? 'datetime-local'
-                            : 'date';
+                        const inputType = isDateTimeField ? 'datetime-local' : 'date';
                         // Value coming from DHIS2 store
                         const htmlValue = this.formatValueForHtmlInputFromDhis(value, isDateTimeField);
                         const htmlMin = field.min
@@ -7780,9 +7940,9 @@ class FieldUtil {
             case FieldType.TRUE_ONLY:
                 return 'checkbox';
             case FieldType.NUMBER:
-                return 'textbox';
+                return 'number';
             case FieldType.PHONE_NUMBER:
-                return 'textbox';
+                return 'tel';
             case FieldType.ORG_UNIT:
                 return 'org-unit';
             case FieldType.DATE:
@@ -7826,7 +7986,9 @@ class FieldControlTypeUtil {
             case FieldType.TRUE_ONLY:
                 return 'checkbox';
             case FieldType.NUMBER:
-                return 'textbox';
+                return 'number';
+            case FieldType.PHONE_NUMBER:
+                return 'tel';
             case FieldType.INTEGER_ZERO_OR_POSITIVE:
                 return 'textbox';
             case FieldType.ORG_UNIT:
@@ -7864,6 +8026,8 @@ class FormFieldTypeUtil {
                 return 'coordinate';
             case FieldType.DATE_TIME:
                 return 'date-time';
+            case FieldType.PHONE_NUMBER:
+                return 'tel';
             default:
                 return 'text';
         }
@@ -10104,6 +10268,47 @@ class ProgramEntryFormMetaData {
         this.config = config;
         return this;
     }
+    getFieldIdentifiers(field) {
+        const f = field;
+        const candidateIds = [
+            f.key,
+            field.id,
+            f.code,
+            f.attribute,
+            f.trackedEntityAttribute,
+            f.dataElement,
+        ];
+        return candidateIds.filter((value) => typeof value === 'string' && value.length > 0);
+    }
+    getAutoAssignedFieldIdSet() {
+        const autoAssigned = this.config?.autoAssignedValues;
+        if (!autoAssigned?.length) {
+            return null;
+        }
+        if (!this.autoAssignedFieldIdSet) {
+            this.autoAssignedFieldIdSet = new Set(autoAssigned
+                .map(({ field }) => field)
+                .filter((value) => typeof value === 'string' && value.length > 0));
+        }
+        return this.autoAssignedFieldIdSet;
+    }
+    shouldDisableField(field) {
+        const fieldIdentifiers = this.getFieldIdentifiers(field);
+        if (!fieldIdentifiers.length) {
+            return false;
+        }
+        const autoAssignedIdSet = this.getAutoAssignedFieldIdSet();
+        if (!autoAssignedIdSet) {
+            return false;
+        }
+        return fieldIdentifiers.some((id) => autoAssignedIdSet.has(id));
+    }
+    withDisabledFlags(field) {
+        return {
+            ...field,
+            disabled: true,
+        };
+    }
     getProgramPromise() {
         const program = this.config.program;
         const programQuery = this.d2.programModule.program
@@ -10206,37 +10411,115 @@ class ProgramEntryFormMetaData {
         if (!this.program) {
             return [];
         }
-        return new ProgramEntryFormFieldUtil(this.program, this.config).fields;
+        const fields = new ProgramEntryFormFieldUtil(this.program, this.config)
+            .fields;
+        const autoAssigned = this.config?.autoAssignedValues;
+        if (!autoAssigned?.length) {
+            return fields;
+        }
+        return fields.map((field) => this.shouldDisableField(field) ? this.withDisabledFlags(field) : field);
     }
+    // get sections(): IProgramEntryFormSection[] {
+    //   if (!this.program) {
+    //     return [];
+    //   }
+    //   const { displayType, formType } = this.config;
+    //   if (!this.program || this.config.displayType !== 'FLAT') {
+    //     return [];
+    //   }
+    //   if (displayType === 'FLAT' && formType === 'TRACKER') {
+    //     return new ProgramEntryFormSectionUtil(this.program, this.config)
+    //       .programEntryFormSections;
+    //   }
+    //   return new ProgramEntryFormSectionUtil(this.program, this.config)
+    //     .programEntryFormSections;
+    // }
+    // get programStageSections(): IProgramEntryFormSection[] {
+    //   if (!this.program) {
+    //     return [];
+    //   }
+    //   const { displayType, formType } = this.config;
+    //   if (displayType === 'FLAT' && formType === 'EVENT') {
+    //     return new ProgramStageEntryFormSectionUtil(this.program, this.config)
+    //       .programStageEntryFormSections;
+    //   }
+    //   if (displayType === 'SECTION') {
+    //     return new ProgramStageEntryFormSectionUtil(this.program, this.config)
+    //       .programStageEntryFormSections;
+    //   }
+    //   return [];
+    // }
     get sections() {
         if (!this.program) {
             return [];
         }
-        const { displayType, formType } = this.config;
-        if (!this.program || this.config.displayType !== 'FLAT') {
+        const { displayType } = this.config;
+        if (displayType !== 'FLAT') {
             return [];
         }
-        if (displayType === 'FLAT' && formType === 'TRACKER') {
-            return new ProgramEntryFormSectionUtil(this.program, this.config)
-                .programEntryFormSections;
+        const baseSections = new ProgramEntryFormSectionUtil(this.program, this.config).programEntryFormSections;
+        const autoAssigned = this.config?.autoAssignedValues;
+        if (!autoAssigned?.length) {
+            return baseSections;
         }
-        return new ProgramEntryFormSectionUtil(this.program, this.config)
-            .programEntryFormSections;
+        return baseSections.map((section) => {
+            const formFields = section.formFields ?? [];
+            if (!formFields.length) {
+                return section;
+            }
+            let hasDisabledField = false;
+            const updatedFields = formFields.map((field) => {
+                if (this.shouldDisableField(field)) {
+                    hasDisabledField = true;
+                    return this.withDisabledFlags(field);
+                }
+                return field;
+            });
+            if (!hasDisabledField) {
+                return section;
+            }
+            return {
+                ...section,
+                formFields: updatedFields,
+            };
+        });
     }
     get programStageSections() {
         if (!this.program) {
             return [];
         }
         const { displayType, formType } = this.config;
-        if (displayType === 'FLAT' && formType === 'EVENT') {
-            return new ProgramStageEntryFormSectionUtil(this.program, this.config)
-                .programStageEntryFormSections;
+        const isFlatEvent = displayType === 'FLAT' && formType === 'EVENT';
+        const isSectionDisplay = displayType === 'SECTION';
+        if (!isFlatEvent && !isSectionDisplay) {
+            return [];
         }
-        if (displayType === 'SECTION') {
-            return new ProgramStageEntryFormSectionUtil(this.program, this.config)
-                .programStageEntryFormSections;
+        const baseSections = new ProgramStageEntryFormSectionUtil(this.program, this.config).programStageEntryFormSections;
+        const autoAssigned = this.config?.autoAssignedValues;
+        if (!autoAssigned?.length) {
+            return baseSections;
         }
-        return [];
+        return baseSections.map((section) => {
+            const formFields = section.formFields ?? [];
+            if (!formFields.length) {
+                return section;
+            }
+            let hasDisabledField = false;
+            const updatedFields = formFields.map((field) => {
+                if (this.shouldDisableField(field)) {
+                    hasDisabledField = true;
+                    return this.withDisabledFlags(field);
+                }
+                return field;
+            });
+            if (!hasDisabledField) {
+                return section;
+            }
+            return {
+                ...section,
+                formFields: updatedFields,
+            };
+        });
     }
     get rules() {
         if (!this.program || !this.program.programRules) {
@@ -10355,23 +10638,54 @@ class ProgramEntryFormModule {
             };
         }, ...(ngDevMode ? [{ debugName: "FormActionButtons" }] : []));
     }
+    // async ngOnInit() {
+    //   this.loading.set(true);
+    //   try {
+    //     // Loading metadata
+    //     const metaData = await new ProgramEntryFormMetaData()
+    //       .setConfig(this.config())
+    //       .get();
+    //     this.metaData.set(metaData);
+    //     // Load initial instance information
+    //     const instance = await this.#getInstance();
+    //     this.instance.set(instance);
+    //     if (this.config().autoAssignedValues) {
+    //       this.#updateInstanceWithAutoAssignedValues(
+    //         this.config().autoAssignedValues || []
+    //       );
+    //     }
+    //     this.loading.set(false);
+    //   } catch (err) {
+    //     this.loading.set(false);
+    //   }
+    // }
     async ngOnInit() {
         this.loading.set(true);
         try {
-            // Loading metadata
+            const config = this.config();
             const metaData = await new ProgramEntryFormMetaData()
-                .setConfig(this.config())
+                .setConfig(config)
                 .get();
+            if (!metaData) {
+                console.error('ProgramEntryFormMetaData.get() returned null');
+                return;
+            }
             this.metaData.set(metaData);
-            // Load initial instance information
             const instance = await this.#getInstance();
+            if (!instance) {
+                console.error('Failed to create or load instance for program entry form');
+                return;
+            }
             this.instance.set(instance);
-            if (this.config().autoAssignedValues) {
-                this.#updateInstanceWithAutoAssignedValues(this.config().autoAssignedValues || []);
+            const autoAssigned = config.autoAssignedValues;
+            if (autoAssigned?.length) {
+                this.#updateInstanceWithAutoAssignedValues(autoAssigned);
             }
-            this.loading.set(false);
         }
-        catch (err) {
+        catch (error) {
+            console.error('Error during ProgramEntryForm initialization', error);
+        }
+        finally {
             this.loading.set(false);
         }
     }
@@ -10388,18 +10702,93 @@ class ProgramEntryFormModule {
     onCancel() {
         this.formCancel.emit();
     }
+    #resolveFieldRuntimeId(configuredKey, metaData) {
+        const formFields = metaData?.formFields;
+        if (!formFields || formFields.length === 0) {
+            return configuredKey;
+        }
+        for (let index = 0; index < formFields.length; index++) {
+            const currentField = formFields[index];
+            if (currentField.id === configuredKey) {
+                return currentField.id;
+            }
+            if (currentField.attribute === configuredKey ||
+                currentField.trackedEntityAttribute === configuredKey) {
+                return currentField.id;
+            }
+            if (currentField.dataElement === configuredKey) {
+                return currentField.id;
+            }
+        }
+        return configuredKey;
+    }
+    // #updateInstanceWithAutoAssignedValues(
+    //   autoAssignedValues: AutoAssignedValues[]
+    // ) {
+    //   const assignedDataValues = autoAssignedValues.reduce(
+    //     (entities, assignedValue) => {
+    //       return {
+    //         ...entities,
+    //         [assignedValue.field]: assignedValue.value,
+    //       };
+    //     },
+    //     {}
+    //   );
+    //   this.#updateInstance(assignedDataValues);
+    // }
     #updateInstanceWithAutoAssignedValues(autoAssignedValues) {
-        const assignedDataValues = autoAssignedValues.reduce((entities, assignedValue) => {
-            return {
-                ...entities,
-                [assignedValue.field]: assignedValue.value,
-            };
-        }, {});
-        this.#updateInstance(assignedDataValues);
+        const valueCount = autoAssignedValues?.length ?? 0;
+        if (valueCount === 0) {
+            return;
+        }
+        const metaData = this.metaData();
+        const aggregatedValues = {};
+        for (let index = 0; index < valueCount; index++) {
+            const { field: configuredKey, value } = autoAssignedValues[index];
+            const semanticKey = metaData
+                ? this.#resolveFieldRuntimeId(configuredKey, metaData)
+                : configuredKey;
+            aggregatedValues[semanticKey] = value;
+            if (configuredKey !== semanticKey) {
+                aggregatedValues[configuredKey] = value;
+            }
+        }
+        if (Object.keys(aggregatedValues).length === 0) {
+            return;
+        }
+        this.#updateInstance(aggregatedValues);
     }
+    // #updateInstance(dataValues: Record<string, unknown>) {
+    //   this.instance.update((instance) => {
+    //     instance?.updateDataValues(dataValues, this.config().updateTeiOrgUnit);
+    //     return instance;
+    //   });
+    // }
+    // #updateInstance(dataValues: Record<string, unknown>) {
+    //   this.instance.update((instance) => {
+    //     if (!instance) {
+    //       return instance;
+    //     }
+    //     instance.updateDataValues(dataValues, this.config().updateTeiOrgUnit);
+    //     return instance;
+    //   });
+    // }
     #updateInstance(dataValues) {
+        if (!dataValues || Object.keys(dataValues).length === 0) {
+            return;
+        }
+        const shouldUpdateOrgUnit = this.config().updateTeiOrgUnit;
         this.instance.update((instance) => {
-            instance?.updateDataValues(dataValues, this.config().updateTeiOrgUnit);
+            if (!instance) {
+                return instance;
+            }
+            for (const key in dataValues) {
+                if (Object.prototype.hasOwnProperty.call(dataValues, key)) {
+                    instance[key] =
+                        dataValues[key];
+                }
+            }
+            instance.updateDataValues(dataValues, shouldUpdateOrgUnit);
             return instance;
         });
     }