@iapps/ng-dhis2-ui 1.1.70 → 1.1.72

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

@@ -30,10 +30,10 @@ import { isObject, isString, debounce, sortBy, isArray, find, camelCase, flatten
 import cx from 'classnames';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
 import { switchMap, map as map$1 } from 'rxjs/operators';
+import { parse as parse$1, format } from 'date-fns';
 import * as i2 from '@angular/forms';
 import { Validators, UntypedFormControl, UntypedFormGroup, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { toObservable } from '@angular/core/rxjs-interop';
-import { format } from 'date-fns';
 import { DataQueryFilter, DataFilterCondition, ProgramRuleEngine } from '@iapps/d2-web-sdk';
 import moment from 'moment';
 
@@ -3441,6 +3441,11 @@ function buildFilters(filters) {
         .filter(Boolean) // Remove any empty strings
         .join('&');
 }
+function buildFiltersFromEvents(filters) {
+    return filters
+        .map((filter) => `filter=${filter.programStage}.${filter.dataElement}:${filter.operator}:${filter.value}`)
+        .join('&');
+}
 const matchesCondition = (eventValue, operator, filterValue) => {
     if (typeof eventValue === 'number' && typeof filterValue === 'number') {
         switch (operator) {
@@ -3526,7 +3531,7 @@ class LineListService {
     getProgramMetadata(programId) {
         return this.httpClient.get(`programs/${programId}.json?fields=programType,programStages[id,name,programStageDataElements[dataElement[id,name,shortName,formName,code,optionSetValue,valueType,
     optionSet[id,name,options[id,name,code]]]]],programTrackedEntityAttributes[*,trackedEntityAttribute[id,name,unique,generated,formName,code,optionSetValue
-    ,valueType,optionSet[id,name,options[id,name,code]]]]`);
+    ,valueType,optionSet[id,name,options[id,name,code]]]],orgUnitLabel`);
     }
     // private getTrackedEntityInstances(
     //   programId: string,
@@ -3559,8 +3564,9 @@ class LineListService {
     //     })
     //   );
     // }
-    getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters = [], startDate, endDate, ouMode, filterRootOrgUnit, useOuModeWithOlderDHIS2Instance) {
+    getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters = [], startDate, endDate, ouMode, filterRootOrgUnit, useOuModeWithOlderDHIS2Instance, filtersFromEvents = []) {
         const filterParams = buildFilters(filters);
+        const filterParamsFromEvents = buildFiltersFromEvents(filtersFromEvents);
         const dateFilter = [
             startDate ? `enrollmentEnrolledAfter=${startDate}` : '',
             endDate ? `enrollmentEnrolledBefore=${endDate}` : '',
@@ -3571,7 +3577,7 @@ class LineListService {
             ? `&ouMode=${ouMode}`
             : `&orgUnitMode=${ouMode}`;
         return this.httpClient
-            .get(`tracker/trackedEntities.json?program=${programId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=trackedEntity,orgUnit,attributes[*],enrollments[*]&totalPages=true&${filterParams}${dateFilter}&order=createdAt:desc`)
+            .get(`tracker/trackedEntities.json?program=${programId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=trackedEntity,orgUnit,attributes[*],enrollments[*]&totalPages=true&${filterParams}${filterParamsFromEvents}${dateFilter}&order=createdAt:desc`)
             .pipe(switchMap((response) => {
             if (filterRootOrgUnit) {
                 response.trackedEntities = response.trackedEntities.filter((tei) => tei.orgUnit !== orgUnit);
@@ -3640,7 +3646,7 @@ class LineListService {
         const ouModeIdentifier = ouMode ? `&ouMode=${ouMode}` : ``;
         return this.httpClient.get(`events.json?programStage=${programStageId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=*&totalPages=true&${filterParams}${dateFilter}`);
     }
-    getLineListData(programId, orgUnit = '', programStageId, page = 1, pageSize = 10, filters = [], startDate, endDate, ouMode, filterRootOrgUnit, useOuModeWithOlderDHIS2Instance) {
+    getLineListData(programId, orgUnit = '', programStageId, page = 1, pageSize = 10, filters = [], startDate, endDate, ouMode, filterRootOrgUnit, useOuModeWithOlderDHIS2Instance, filtersFromEvents = []) {
         return this.getProgramMetadata(programId).pipe(switchMap((programMetadata) => {
             if (programStageId) {
                 return this.getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode).pipe(map$1((events) => ({
@@ -3649,7 +3655,7 @@ class LineListService {
                 })));
             }
             if (programMetadata.programType === 'WITH_REGISTRATION') {
-                return this.getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode, filterRootOrgUnit, useOuModeWithOlderDHIS2Instance).pipe(map$1((teis) => ({
+                return this.getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters, startDate, endDate, ouMode, filterRootOrgUnit, useOuModeWithOlderDHIS2Instance, filtersFromEvents).pipe(map$1((teis) => ({
                     metadata: programMetadata,
                     data: teis,
                     orgUnits: teis.orgUnitsMap,
@@ -3888,21 +3894,18 @@ const getTrackedEntityData = (response, programId, pager, isOptionSetNameVisible
         response.data?.instances ??
         [];
     const programMetaData = response.metadata.programTrackedEntityAttributes;
+    const orgUnitLabel = response.metadata.orgUnitLabel;
     const orgUnitMap = response.data.orgUnitsMap;
     const mappedProgramMetadataAttributes = programMetaData.map((attr) => ({
         displayInList: attr.displayInList,
         searchable: attr.searchable,
         id: attr.trackedEntityAttribute.id,
+        name: attr.trackedEntityAttribute.name,
         optionSet: attr.trackedEntityAttribute.optionSetValue
             ? attr.trackedEntityAttribute.optionSet
             : null,
+        sortOrder: attr.sortOrder,
     }));
-    const programAttributesMap = programMetaData.reduce((acc, attribute) => {
-        if (attribute.displayInList) {
-            acc[attribute.id] = attribute.displayName;
-        }
-        return acc;
-    }, {});
     if (filters) {
         teis = getFilteredTrackedEntites(teis, filters);
     }
@@ -3928,12 +3931,22 @@ const getTrackedEntityData = (response, programId, pager, isOptionSetNameVisible
             key: attrId,
         };
     });
-    entityColumns = entityColumns.filter((column) => {
-        return Object.values(programAttributesMap).some((value) => value.includes(column.label));
+    entityColumns = entityColumns
+        .filter((column) => {
+        return mappedProgramMetadataAttributes
+            .filter((attr) => attr.displayInList)
+            .some((attr) => attr.id === column.key); // Ensure the column's key matches an id in the filtered list
+    })
+        .sort((a, b) => {
+        // Ensures sortOrder values are treated as numbers
+        const sortOrderA = Number(mappedProgramMetadataAttributes.find((attr) => attr.id === a.key)
+            ?.sortOrder ?? 0); // Default to 0 if undefined, explicitly cast to number
+        const sortOrderB = Number(mappedProgramMetadataAttributes.find((attr) => attr.id === b.key)
+            ?.sortOrder ?? 0); // Default to 0 if undefined, explicitly cast to number
+        return sortOrderA - sortOrderB; // Ascending order based on sortOrder
     });
-    // Add orgUnit as the first column
     entityColumns.unshift({
-        label: 'Location',
+        label: orgUnitLabel || 'registering unit',
         key: 'orgUnit',
     });
     const searchableAttributes = mappedProgramMetadataAttributes
@@ -3943,16 +3956,44 @@ const getTrackedEntityData = (response, programId, pager, isOptionSetNameVisible
     }));
     const searchableKeys = new Set(searchableAttributes.map((attr) => attr.key));
     const filteredEntityColumns = entityColumns.filter((column) => searchableKeys.has(column.key));
+    console.log('teis', teis);
     const attributesData = teis.map((tei, idx) => {
         const row = {
             trackedEntityInstance: tei.trackedEntity,
             index: (pager.page - 1) * pager.pageSize + idx + 1,
         };
         allAttributes.forEach((attrId) => (row[attrId] = ''));
+        console.log('all attributes', allAttributes);
         const matchingEnrollment = tei.enrollments.find((enrollment) => enrollment.program === programId);
-        const attributesToUse = matchingEnrollment
+        let attributesToUse = matchingEnrollment
             ? matchingEnrollment.attributes
             : tei.attributes;
+        //TODO: find a better way to do optimize this date parsing
+        //map any date that occur in the attributes to dd-mm-yyyy
+        attributesToUse = attributesToUse.map((attr) => {
+            // Check if the attribute is of type DATE
+            if (attr?.valueType === 'DATE' || attr?.valueType === 'date') {
+                try {
+                    // Parse the date and format it as dd-MM-yyyy
+                    const parsedDate = parse$1(attr.value, 'yyyy-MM-dd', new Date());
+                    const formattedDate = format(parsedDate, 'dd-MM-yyyy');
+                    // Update the value to the formatted date
+                    return {
+                        ...attr,
+                        value: formattedDate,
+                    };
+                }
+                catch {
+                    // If parsing fails, keep the original value
+                    return {
+                        ...attr,
+                        value: attr.value,
+                    };
+                }
+            }
+            // If not a date, just return the attribute as is
+            return attr;
+        });
         // If option set names are visible, transform the attribute values
         if (isOptionSetNameVisible) {
             attributesToUse.forEach((attr) => {
@@ -3976,10 +4017,27 @@ const getTrackedEntityData = (response, programId, pager, isOptionSetNameVisible
         row['orgUnit'] = orgUnitMap?.get(matchingEnrollment.orgUnit) || 'N/A';
         return row;
     });
+    console.log('entity columns', entityColumns);
+    if (teis.length === 0) {
+        entityColumns = [
+            { label: orgUnitLabel || 'registering unit', key: 'orgUnit' },
+            ...mappedProgramMetadataAttributes
+                .filter((attr) => attr.displayInList === true)
+                .sort((a, b) => {
+                return Number(a.sortOrder) - Number(b.sortOrder);
+            })
+                .map((attr) => ({
+                key: attr.id,
+                label: attr.name,
+            })),
+        ];
+    }
+    console.log('filtered entity columns', filteredEntityColumns);
     return {
         columns: entityColumns,
         data: attributesData,
         filteredEntityColumns: filteredEntityColumns,
+        orgUnitLabel: orgUnitLabel,
     };
 };
 // export const getEventData = (
@@ -4042,7 +4100,8 @@ const getEventData = (response, pager, isOptionSetNameVisible) => {
             if (isOptionSetNameVisible && dv.optionSetValue) {
                 const dataElementMetadata = response.metadata.programStages
                     .flatMap((programStage) => programStage.programStageDataElements)
-                    .find((psde) => psde.dataElement.id === dv.dataElement)?.dataElement.optionSet;
+                    .find((psde) => psde.dataElement.id === dv.dataElement)
+                    ?.dataElement.optionSet;
                 if (dataElementMetadata && dataElementMetadata.options) {
                     const matchingOption = dataElementMetadata.options.find((option) => option.code === dv.value);
                     if (matchingOption) {
@@ -4114,15 +4173,18 @@ class LineListTableComponent extends ReactWrapperModule {
             const [filteredColumns, setFilteredColumns] = useState();
             const [inputValues, setInputValues] = useState({});
             const [filters, setFilters] = useState(false);
+            const [orgUnitLabel, setOrgUnitLabel] = useState('');
             //TODO: this will be migrated on the parent component
             const [checkValue, setCheckValue] = useState([]);
             const [valueMatch, setValuesMatch] = useState(false);
-            const [selectedOrgUnit, setSelectedOrgUnit] = useState(''); // for testing purposes to be removed
+            const [selectedOrgUnit, setSelectedOrgUnit] = useState('');
             const [hide, setHide] = useState(true);
             const [showAllFilters, setShowAllFilters] = useState(false);
             const visibleFilters = showAllFilters
                 ? filteredColumns ?? []
                 : (filteredColumns ?? []).slice(0, 2);
+            const defaultOrgUnit = this.orgUnit;
+            const [prevValue, setPrevValue] = useState();
             // Store updaters in refs for Angular to access
             const updateRefs = useRef({
                 setProgramIdState,
@@ -4140,7 +4202,7 @@ class LineListTableComponent extends ReactWrapperModule {
             useEffect(() => {
                 setLoading(true);
                 const subscription = this.lineListService
-                    .getLineListData(this.programId, orgUnitState, this.programStageId, pager.page, pager.pageSize, attributeFiltersState, startDateState, endDateState, this.ouMode, this.filterRootOrgUnit, this.useOuModeWithOlderDHIS2Instance)
+                    .getLineListData(this.programId, orgUnitState, this.programStageId, pager.page, pager.pageSize, attributeFiltersState, startDateState, endDateState, this.ouMode, this.filterRootOrgUnit, this.useOuModeWithOlderDHIS2Instance, this.filters)
                     .pipe(take(1)) // Automatically unsubscribe after the first emission
                     .subscribe((response) => {
                     let entityColumns = [];
@@ -4162,9 +4224,10 @@ class LineListTableComponent extends ReactWrapperModule {
                             total: responseData.total,
                             pageCount: responseData.pageCount,
                         };
-                        const { columns, data, filteredEntityColumns } = getTrackedEntityData(response, this.programId, pager, this.isOptionSetNameVisible, this.filters);
+                        const { columns, data, filteredEntityColumns, orgUnitLabel } = getTrackedEntityData(response, this.programId, pager, this.isOptionSetNameVisible, this.filters);
                         entityColumns = columns;
                         entityData = data;
+                        setOrgUnitLabel(orgUnitLabel);
                         const checkValues = [
                             ...new Set(responseData?.trackedEntities?.[0]?.enrollments?.[0]?.events?.flatMap((event) => event.dataValues
                                 .filter((dataValue) => /^[A-Za-z]{3}$/.test(dataValue.value))
@@ -4296,7 +4359,11 @@ class LineListTableComponent extends ReactWrapperModule {
                                 gap: '10px',
                                 flexWrap: 'wrap',
                             } },
-                            React__default.createElement(InputField$1, { key: "location", label: "Registraring unit:", value: selectedOrgUnit, clearable: true, onFocus: () => setHide(false), className: "custom-input" }),
+                            React__default.createElement(InputField$1, { key: "location", label: orgUnitLabel, value: selectedOrgUnit, clearable: true, onFocus: () => setHide(false), className: "custom-input", onChange: (event) => {
+                                    console.log('onChange triggered with value:', event.value);
+                                    setSelectedOrgUnit(event.value);
+                                    setOrgUnitState(defaultOrgUnit);
+                                } }),
                             React__default.createElement(CalendarInput, { label: "Start date:", calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", date: startDateState, onDateSelect: (selectedDate) => {
                                     setStartDateState(selectedDate.calendarDateString);
                                 } }),
@@ -4304,20 +4371,41 @@ class LineListTableComponent extends ReactWrapperModule {
                                     setEndDateState(selectedDate.calendarDateString);
                                 } }),
                             (visibleFilters ?? []).map(({ label, key }) => (React__default.createElement(InputField$1, { key: key, label: `${label}:`, className: "custom-input", value: inputValues[key] || '', clearable: true, onChange: (e) => {
+                                    let currentValue = '';
                                     if ('target' in e && e.target) {
-                                        setInputValues((prevValues) => ({
-                                            ...prevValues,
-                                            [key]: e
-                                                .target.value,
-                                        }));
+                                        currentValue = e.target.value;
                                     }
                                     else if ('value' in e) {
-                                        setInputValues((prevValues) => ({
-                                            ...prevValues,
-                                            [key]: e.value ?? '',
-                                        }));
+                                        currentValue = e.value ?? '';
                                     }
-                                }, onBlur: (e) => {
+                                    setInputValues((prevValues) => ({
+                                        ...prevValues,
+                                        [key]: currentValue,
+                                    }));
+                                    // Trigger change immediately if the input is cleared
+                                    if (currentValue === '') {
+                                        handleInputChange(key, '');
+                                    }
+                                }, 
+                                // onChange={(
+                                //   e:
+                                //     | React.ChangeEvent<HTMLInputElement>
+                                //     | { value?: string }
+                                // ) => {
+                                //   if ('target' in e && e.target) {
+                                //     setInputValues((prevValues) => ({
+                                //       ...prevValues,
+                                //       [key]: (e as React.ChangeEvent<HTMLInputElement>)
+                                //         .target.value,
+                                //     }));
+                                //   } else if ('value' in e) {
+                                //     setInputValues((prevValues) => ({
+                                //       ...prevValues,
+                                //       [key]: e.value ?? '',
+                                //     }));
+                                //   }
+                                // }}
+                                onBlur: (e) => {
                                     let currentValue = '';
                                     if ('target' in e && e.target) {
                                         currentValue = e.target.value;
@@ -4325,7 +4413,10 @@ class LineListTableComponent extends ReactWrapperModule {
                                     else if ('value' in e) {
                                         currentValue = e.value ?? '';
                                     }
-                                    handleInputChange(key, currentValue);
+                                    if (currentValue !== '' && currentValue !== prevValue) {
+                                        handleInputChange(key, currentValue);
+                                        setPrevValue(currentValue);
+                                    }
                                 } }))),
                             React__default.createElement(Button$1, { onClick: () => setShowAllFilters(!showAllFilters) }, showAllFilters ? 'Less Filters' : 'More Filters')))),
                     React__default.createElement(DataTable, null,