@iapps/ng-dhis2-ui 1.2.101 → 1.2.103

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

@@ -4,7 +4,6 @@ import * as i0 from '@angular/core';
 import { NgModule, Directive, Input, ContentChild, Component, EventEmitter, Output, inject, NgZone, input, ChangeDetectionStrategy, Injectable, model, computed, signal, effect, ViewChildren } from '@angular/core';
 import { useDataQuery, useConfig, useAlert, clearSensitiveCaches, DataProvider, useDataEngine, Provider } from '@dhis2/app-runtime';
 import * as i1 from '@iapps/ngx-dhis2-http-client';
-import { NgxDhis2HttpClientService } from '@iapps/ngx-dhis2-http-client';
 import * as React from 'react';
 import React__default, { useState, useCallback, useRef, useEffect, createContext, useContext, useMemo } from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -2392,9 +2391,9 @@ PeriodDimension.defaultProps = {
 };
 
 class PeriodSelectorModalComponent extends ReactWrapperModule {
-    constructor(elementRef, httpClient) {
+    constructor(elementRef) {
         super(elementRef);
-        this.httpClient = httpClient;
+        this.d2 = window.d2Web;
         this.selectedPeriods = [];
         this.cancel = new EventEmitter();
         this.confirm = new EventEmitter();
@@ -2422,7 +2421,7 @@ class PeriodSelectorModalComponent extends ReactWrapperModule {
         if (!this.elementRef)
             throw new Error('No element ref');
         this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
-        const systemInfo = await firstValueFrom(this.httpClient.systemInfo());
+        const systemInfo = this.d2.systemInfo;
         const excludedPeriodTypes = this.getExcludedPeriodTypes(systemInfo);
         this.component = () => {
             const [selected, setSelected] = useState(this.selectedPeriods);
@@ -2447,13 +2446,13 @@ class PeriodSelectorModalComponent extends ReactWrapperModule {
     onConfirm(selectedItems) {
         this.confirm.emit(selectedItems);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PeriodSelectorModalComponent, deps: [{ token: i0.ElementRef }, { token: i1.NgxDhis2HttpClientService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PeriodSelectorModalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: PeriodSelectorModalComponent, isStandalone: false, selector: "ng-dhis2-ui-period-selector-modal", inputs: { selectedPeriods: "selectedPeriods" }, outputs: { cancel: "cancel", confirm: "confirm" }, usesInheritance: true, ngImport: i0, template: `<ng-container></ng-container>`, isInline: true, styles: ["::ng-deep .layer{z-index:2!important}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PeriodSelectorModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-dhis2-ui-period-selector-modal', template: `<ng-container></ng-container>`, standalone: false, styles: ["::ng-deep .layer{z-index:2!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NgxDhis2HttpClientService }], propDecorators: { selectedPeriods: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectedPeriods: [{
                 type: Input
             }], cancel: [{
                 type: Output
@@ -2462,10 +2461,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             }] } });
 
 class PeriodSelectorComponent extends ReactWrapperModule {
-    constructor(elementRef, httpClient, ngZone) {
+    constructor(elementRef, ngZone) {
         super(elementRef);
-        this.httpClient = httpClient;
         this.ngZone = ngZone;
+        this.d2 = window.d2Web;
         this.selectedPeriods = [];
         this.selectPeriods = new EventEmitter();
         this.props = {
@@ -2497,7 +2496,7 @@ class PeriodSelectorComponent extends ReactWrapperModule {
         if (!this.elementRef)
             throw new Error('No element ref');
         this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
-        const systemInfo = await firstValueFrom(this.httpClient.systemInfo());
+        const systemInfo = this.d2.systemInfo;
         const excludedPeriodTypes = this.getExcludedPeriodTypes(systemInfo);
         this.component = () => (React__default.createElement(DataProvider, null, React__default.createElement(PeriodDimension, { selectedPeriods: this.selectedPeriods, onSelect: (selectionEvent) => this.ngZone.run(() => {
                 this.onSelectItems(selectionEvent);
@@ -2507,13 +2506,13 @@ class PeriodSelectorComponent extends ReactWrapperModule {
     onSelectItems(selectionEvent) {
         this.selectPeriods.emit(selectionEvent.items);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PeriodSelectorComponent, deps: [{ token: i0.ElementRef }, { token: i1.NgxDhis2HttpClientService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PeriodSelectorComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: PeriodSelectorComponent, isStandalone: false, selector: "ng-dhis2-ui-period-selector", inputs: { selectedPeriods: "selectedPeriods" }, outputs: { selectPeriods: "selectPeriods" }, usesInheritance: true, ngImport: i0, template: `<ng-container></ng-container>`, isInline: true, styles: ["::ng-deep .content-container{z-index:0!important}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PeriodSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-dhis2-ui-period-selector', template: `<ng-container></ng-container>`, standalone: false, styles: ["::ng-deep .content-container{z-index:0!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NgxDhis2HttpClientService }, { type: i0.NgZone }], propDecorators: { selectedPeriods: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { selectedPeriods: [{
                 type: Input
             }], selectPeriods: [{
                 type: Output
@@ -3471,6 +3470,9 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                             }, style: { display: 'inline-flex', alignItems: 'center' } },
                             React__default.createElement(ClearIcon, { className: "my-icon-class" })))));
                 }
+                {
+                    /* TODO: I HAVE DUPLICATED DROPDOWN AND CLEAR ICON IN MULTIPLE PLACES REQUIRED TO CREATE A REUSABLE DROPDOWN COMPONENT WITH THE CLEAR ICON TO AVOID DUPLICATION */
+                }
                 if (options && options.options.length > 0) {
                     return (React__default.createElement(DropdownButton, { name: "customDropdown", open: openDropdownKey === key, onClick: () => {
                             setOpenDropdownKey(openDropdownKey === key ? null : key);
@@ -3622,6 +3624,49 @@ function formatDateForDisplay(dateString) {
         return 'dd-mm-yyyy';
     }
 }
+// case 'date':
+//           case 'date-time':
+//             return (
+//               // <InputField
+//               //   error={hasError}
+//               //   validationText={validationError}
+//               //   type={this.field().type as any}
+//               //   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: any) => {
+//               //     onValueChange(event.value);
+//               //   }}
+//               //   onBlur={() => {
+//               //     checkValueUniqueness();
+//               //   }}
+//               // />
+//               <CalendarInput
+//                 label={this.label()}
+//                 error={hasError}
+//                 validationText={validationError}
+//                 date={value}
+//                 readOnly={disabled}
+//                 min={this.field().min?.toString()}
+//                 max={this.field().max?.toString()}
+//                 placeholder={this.placeholder()}
+//                 onDateSelect={(selectedDate: any) => {
+//                   onValueChange(selectedDate.calendarDateString);
+//                 }}
+//                 disabled={disabled}
+//                 inputWidth={inputWidth}
+//                 required={this.field().required}
+//                 calendar="gregory"
+//                 locale="en-GB"
+//                 timeZone="Africa/Dar_es_Salaam"
+//               />
+//             );
 
 const TableHeader = ({ columns, allSelected, onSelectAll, selectable, showActionButtons, }) => {
     const handleCheckboxChange = () => {
@@ -3977,7 +4022,7 @@ const getTrackedEntityTableData = (response, programId, pager, metaData, searche
     const attributeColumns = metaData.displayInListTrackedEntityAttributes
         .sort((a, b) => a.sortOrder - b.sortOrder)
         .map((trackedEntityAttribute) => ({
-        label: trackedEntityAttribute.formName ?? trackedEntityAttribute.name,
+        label: trackedEntityAttribute.name ?? trackedEntityAttribute.formName,
         key: trackedEntityAttribute.id,
     }));
     const tableSearcheableDataElements = metaData
@@ -3986,7 +4031,7 @@ const getTrackedEntityTableData = (response, programId, pager, metaData, searche
         .programStageDataElements.filter((psde) => psde.displayInReports)
         .sort((a, b) => a.sortOrder - b.sortOrder)
         .map((psde) => ({
-        label: psde.dataElement.formName || psde.dataElement.name,
+        label: psde.dataElement.name || psde.dataElement.formName || 'default',
         key: psde.dataElement.id,
         valueType: psde.dataElement.valueType,
         options: psde.dataElement.optionSet,
@@ -3999,7 +4044,7 @@ const getTrackedEntityTableData = (response, programId, pager, metaData, searche
         .programStageDataElements.filter((psde) => psde.displayInReports)
         .sort((a, b) => a.sortOrder - b.sortOrder) // Sorts data elements within stage
         .map((psde) => ({
-        label: psde.dataElement.formName || psde.dataElement.name,
+        label: psde.dataElement.name || psde.dataElement.formName || 'default',
         key: psde.dataElement.id,
     })));
     const dataElementOptions = metaData.displayInListDataElements.map((element) => ({
@@ -6409,7 +6454,6 @@ class BaseFormFieldComponent extends ReactWrapperModule {
     constructor() {
         super(...arguments);
         this.ngZone = inject(NgZone);
-        this.httpClient = inject(NgxDhis2HttpClientService);
         this.fieldType = 'textbox';
         this.field = input.required();
         this.fieldError = input();
@@ -7351,18 +7395,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 class SelectionFiltersComponent extends ReactWrapperModule {
     constructor() {
         super(...arguments);
+        this.d2 = window.d2Web;
         this.actionOptions = [];
         this.programAttributesFilters = [];
         this.programStageDataElementFilters = [];
         this.actionSelected = new EventEmitter();
-        this.httpClient = inject(NgxDhis2HttpClientService);
         this.ngZone = inject(NgZone);
         this.FieldOrgUnitSelector = (props) => {
             const { onSelectOrgUnit, onCancelOrgUnit } = props;
             const [selected, setSelected] = useState([]);
             const [rootOrgUnits, setRootOrgUnits] = useState();
             const [config, setConfig] = useState();
-            // TODO: START::: Improve approach on handling observables 
+            // TODO: START::: Improve approach on handling observables
             // useEffect(() => {
             //   zip(this.getAppConfig(), this.getRootOrgUnits()).subscribe({
             //     next: ([appConfig, rootOrgUnits]) => {
@@ -7372,7 +7416,7 @@ class SelectionFiltersComponent extends ReactWrapperModule {
             //     error: (error) => console.error(error),
             //   });
             // }, []);
-            // TODO: END::: Improve approach on handling observables 
+            // TODO: END::: Improve approach on handling observables
             useEffect(() => {
                 const subscription = zip(this.getAppConfig(), this.getRootOrgUnits())
                     .pipe(take(1)) // Ensures only one emission
@@ -7600,27 +7644,34 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                         React__default.createElement(Button$1, { onClick: handleSearch }, "Search"))))));
         };
     }
-    getAppConfig() {
-        return this.httpClient.systemInfo().pipe(map((response) => {
-            const systemInfo = response;
-            return {
-                baseUrl: (document?.location?.host?.includes('localhost')
-                    ? `${document.location.protocol}//${document.location.host}`
-                    : systemInfo['contextPath']),
-                apiVersion: Number(((systemInfo['version'] || '')?.split('.') || [])[1]),
-            };
-        }));
+    async getAppConfig() {
+        const systemInfo = this.d2.systemInfo;
+        if (!systemInfo) {
+            return systemInfo;
+        }
+        return {
+            baseUrl: document?.location?.host?.includes('localhost')
+                ? `${document.location.protocol}//${document.location.host}`
+                : systemInfo.contextPath,
+            apiVersion: systemInfo.apiVersion,
+        };
     }
-    getRootOrgUnits() {
+    async getRootOrgUnits() {
         const orgUnitAttribute = this.getOrgUnitAttributeByUsage(this.orgUnitSelectionConfig.usageType);
-        return this.httpClient
-            .me()
-            .pipe(map((user) => (user ? user[orgUnitAttribute] : []).map((orgUnit) => orgUnit.id)));
+        const currentUser = this.d2?.currentUser;
+        return (currentUser ? currentUser[orgUnitAttribute] : []).map((orgUnit) => orgUnit.id);
     }
-    getOrgUnitLevels() {
-        return firstValueFrom(this.httpClient
-            .get('organisationUnitLevels.json?fields=id,level,displayName,name&paging=false')
-            .pipe(map((res) => res?.['organisationUnitLevels'])));
+    async getOrgUnitGroups() {
+        const orgUnitGroupResponse = await this.d2?.httpInstance?.get('organisationUnitGroups.json?fields=id,displayName,name&paging=false', {
+            useIndexDb: this.orgUnitSelectionConfig?.allowCaching,
+        });
+        return orgUnitGroupResponse?.data?.['organisationUnitGroups'] ?? [];
+    }
+    async getOrgUnitLevels() {
+        const orgUnitLevelResponse = await this.d2?.httpInstance?.get('organisationUnitLevels.json?fields=id,level,displayName,name&paging=false', {
+            useIndexDb: this.orgUnitSelectionConfig?.allowCaching,
+        });
+        return orgUnitLevelResponse?.data?.['organisationUnitLevels'] ?? [];
     }
     onSelectOrgUnit(selectedOrgUnits) {
         this.showOrgUnitTree.set(false);
@@ -7628,11 +7679,6 @@ class SelectionFiltersComponent extends ReactWrapperModule {
             this.selectedOrgUnit.set(selectedOrgUnits[0]);
         }
     }
-    getOrgUnitGroups() {
-        return firstValueFrom(this.httpClient
-            .get('organisationUnitGroups.json?fields=id,displayName,name&paging=false')
-            .pipe(map((res) => res?.['organisationUnitGroups'])));
-    }
     getOrgUnitAttributeByUsage(usageType) {
         switch (usageType) {
             case 'DATA_ENTRY':
@@ -8195,8 +8241,17 @@ class ProgramEntryFormModule {
         this.FormLoader = () => {
             return React__default.createElement(CircularLoader$1, { small: true });
         };
+        // dataId = computed(() => {
+        //   return this.instance()?.trackedEntity || this.instance()?.event;
+        // });
         this.dataId = computed(() => {
-            return this.instance()?.trackedEntity || this.instance()?.event;
+            if (this.config().formType === 'EVENT') {
+                return this.instance()?.event;
+            }
+            if (this.config().formType === 'TRACKER') {
+                return this.instance()?.trackedEntity;
+            }
+            return undefined;
         });
         this.FormActionButtons = computed(() => {
             if (this.config().hideActionButtons) {