@iapps/ng-dhis2-ui 1.1.28 → 1.1.37

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

@@ -2043,7 +2043,7 @@ const FixedPeriodFilter = ({ allowedPeriodTypes, excludedPeriodTypes, currentPer
         React__default.createElement("div", { className: "leftSection" },
             React__default.createElement(SingleSelectField, { label: i18n.t('Period type'), onChange: ({ selected }) => onSelectPeriodType(selected), dense: true, selected: currentPeriodType, disabled: onlyAllowedTypeIsSelected, className: "filterElement", dataTest: `${dataTest}-period-type` }, (allowedPeriodTypes
                 ? getFixedPeriodsOptions().filter((option) => allowedPeriodTypes.some((type) => type === option.id))
-                : filterPeriodTypesById(getFixedPeriodsOptions(), excludedPeriodTypes)).map((option) => (React__default.createElement(SingleSelectOption, { key: option.id, value: option.id, label: option.name, dataTest: `${dataTest}-period-type-option-${option.id}` }))))),
+                : filterPeriodTypesById(getFixedPeriodsOptions(), excludedPeriodTypes)).map((option) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || option.id, value: option.id, label: option.name, dataTest: `${dataTest}-period-type-option-${option.id}` }))))),
         React__default.createElement("div", { className: "rightSection" },
             React__default.createElement(InputField$1, { label: i18n.t('Year'), className: "filterElement", type: "number", placeholder: i18n.t('Select year'), value: currentYear, onChange: ({ value }) => onSelectYear(value), dense: true, dataTest: `${dataTest}-year` })),
         React__default.createElement("style", { jsx: true }, `
@@ -2074,7 +2074,7 @@ FixedPeriodFilter.propTypes = {
 };
 
 const RelativePeriodFilter = ({ currentFilter, onSelectFilter, dataTest, excludedPeriodTypes, }) => (React__default.createElement("div", { className: "leftSection" },
-    React__default.createElement(SingleSelectField, { label: i18n.t('Period type'), onChange: ({ selected }) => onSelectFilter(selected), dense: true, selected: currentFilter, className: "filterElement", dataTest: dataTest }, filterPeriodTypesById(getRelativePeriodsOptions(), excludedPeriodTypes).map((option) => (React__default.createElement(SingleSelectOption, { key: option.id, value: option.id, label: option.name, dataTest: `${dataTest}-option-${option.id}` })))),
+    React__default.createElement(SingleSelectField, { label: i18n.t('Period type'), onChange: ({ selected }) => onSelectFilter(selected), dense: true, selected: currentFilter, className: "filterElement", dataTest: dataTest }, filterPeriodTypesById(getRelativePeriodsOptions(), excludedPeriodTypes).map((option) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || option.id, value: option.id, label: option.name, dataTest: `${dataTest}-option-${option.id}` })))),
     React__default.createElement("style", { jsx: true }, `
       .leftSection {
         flex-grow: 1;
@@ -3217,13 +3217,20 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
     let teis = response.data
         .trackedEntityInstances;
     let programMetaData = response.metadata.programTrackedEntityAttributes;
+    //let progrmaMetaDataAttributesMap = programMetaData.reduce
+    const mappedProgramMetadataAttributes = programMetaData.map((attr) => ({
+        displayInList: attr.displayInList,
+        searchable: attr.searchable,
+        id: attr.trackedEntityAttribute.id,
+    }));
+    console.log('the mapped attributes', mappedProgramMetadataAttributes);
     const programAttributesMap = programMetaData.reduce((acc, attribute) => {
         if (attribute.displayInList) {
             acc[attribute.id] = attribute.displayName;
         }
         return acc;
     }, {});
-    console.log('metadata', programAttributesMap);
+    console.log('metadat attributes', programMetaData);
     if (filters) {
         teis = getFilteredTrackedEntityInstances(teis, filters);
     }
@@ -3258,6 +3265,18 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
         // Check if the column label is part of any value in programAttributesMap
         return Object.values(programAttributesMap).some((value) => value.includes(column.label));
     });
+    const searchableAttributes = mappedProgramMetadataAttributes
+        .filter((attr) => attr.searchable && attr.displayInList)
+        .map((attr) => ({
+        //  label: attr.trackedEntityAttribute.displayName,
+        key: attr.id,
+    }));
+    // Extract keys from searchableAttributes for quick lookup
+    const searchableKeys = new Set(searchableAttributes.map((attr) => attr.key));
+    // Filter entityColumns to keep only those whose key exists in searchableAttributes
+    const filteredEntityColumns = entityColumns.filter((column) => searchableKeys.has(column.key));
+    console.log('show the filtered values', filteredEntityColumns);
+    console.log('the answer is ', searchableAttributes);
     const attributesData = teis.map((tei, idx) => {
         let row = {
             trackedEntityInstance: tei.trackedEntityInstance,
@@ -3271,7 +3290,8 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
         attributesToUse.forEach((attr) => (row[attr.attribute] = attr.value));
         return row;
     });
-    return { columns: entityColumns, data: attributesData };
+    console.log('attributes to use', entityColumns);
+    return { columns: entityColumns, data: attributesData, filteredEntityColumns: filteredEntityColumns };
 };
 const getEventData = (response, pager) => {
     const events = response.data.events;
@@ -3335,6 +3355,8 @@ class LineListTableComponent extends ReactWrapperModule {
             const [endDateState, setEndDateState] = useState(this.endDate);
             const [loading, setLoading] = useState(false);
             const [isButtonLoading, setIsButtonLoading] = useState(this.isButtonLoading);
+            const [filteredColumns, setFilteredColumns] = useState();
+            const [inputValues, setInputValues] = useState({});
             // Store updaters in refs for Angular to access
             const updateRefs = useRef({
                 setProgramIdState,
@@ -3364,11 +3386,14 @@ class LineListTableComponent extends ReactWrapperModule {
             useEffect(() => {
                 setLoading(true);
                 this.lineListService
-                    .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, pager.pageSize, this.attributeFilters, this.startDate, this.endDate, this.ouMode)
+                    .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, pager.pageSize, attributeFiltersState, 
+                // this.attributeFilters,
+                this.startDate, this.endDate, this.ouMode)
                     .subscribe((response) => {
                     let entityColumns = [];
                     let responsePager;
                     let entityData = [];
+                    let filteredDataColumns = [];
                     if (this.programStageId) {
                         responsePager = response.data.pager;
                         const { columns, data } = getProgramStageData(response, this.programStageId, pager);
@@ -3378,9 +3403,14 @@ class LineListTableComponent extends ReactWrapperModule {
                     else if ('trackedEntityInstances' in response.data) {
                         responsePager = response.data
                             .pager;
-                        const { columns, data } = getTrackedEntityData(response, this.programId, pager, this.filters);
+                        const { columns, data, filteredEntityColumns } = getTrackedEntityData(response, this.programId, pager, this.filters);
                         entityColumns = columns;
                         entityData = data;
+                        //  setFilteredColumns(filteredEntityColumns);
+                        // Ensure filter inputs do not disappear when no data is returned
+                        // If filteredEntityColumns is empty, keep the previous columns instead of clearing them
+                        setFilteredColumns((prev) => filteredEntityColumns.length > 0 ? filteredEntityColumns : prev);
+                        filteredDataColumns = filteredEntityColumns;
                     }
                     else {
                         responsePager = response.data.pager;
@@ -3390,12 +3420,12 @@ class LineListTableComponent extends ReactWrapperModule {
                     }
                     const finalColumns = addActionsColumn([{ label: '#', key: 'index' }, ...entityColumns], this.actionOptions);
                     setLoading(false);
-                    console.log('hey');
+                    // console.log('hey');
                     setColumns(...[finalColumns]);
                     setData(...[entityData]);
                     setPager(...[responsePager]);
-                    console.log('columns', columns);
-                    console.log('data', data);
+                    // console.log('columns', columns);
+                    // console.log('data', data);
                 });
             }, [
                 programIdState,
@@ -3417,6 +3447,7 @@ class LineListTableComponent extends ReactWrapperModule {
                 }));
             };
             const handleApprovalClick = () => {
+                setIsButtonLoading(true);
                 this.lineListService
                     .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, 1000, this.attributeFilters, this.startDate, this.endDate, this.ouMode)
                     .subscribe((response) => {
@@ -3436,16 +3467,74 @@ class LineListTableComponent extends ReactWrapperModule {
                                 : null;
                         })
                             .filter((item) => item !== null); // Remove null entries (no matching enrollment)
-                        console.log('TEI and Enrollment IDs emitted:', teiEnrollmentList);
+                        // console.log('TEI and Enrollment IDs emitted:', teiEnrollmentList);
                         this.approvalSelected.emit(teiEnrollmentList);
                     }
                     else {
-                        console.log('No tracked entity instances found in the response');
+                        // console.log('No tracked entity instances found in the response');
                         this.approvalSelected.emit([]); // Emit empty array if no TEIs
                     }
                 });
             };
+            // const handleInputChange = (key: string, value: string) => {
+            //   setInputValues((prevValues) => ({
+            //     ...prevValues,
+            //     [key]: value ?? '', // Ensure no undefined values
+            //   }));
+            // };
+            // if (!filteredColumns || filteredColumns.length === 0) {
+            //   return <div>No fields available</div>;
+            // }
+            const handleInputChange = (key, value) => {
+                setInputValues((prevValues) => ({
+                    ...prevValues,
+                    [key]: value ?? '',
+                }));
+                setAttributeFiltersState((prevFilters = []) => {
+                    // Remove old filter for this key
+                    const filteredFilters = prevFilters.filter((f) => f.attribute !== key);
+                    // Only add new filter if value is not empty
+                    const updatedFilters = value.trim()
+                        ? [...filteredFilters, { attribute: key, operator: 'like', value }]
+                        : filteredFilters;
+                    // console.log(`Updated Filters:`, updatedFilters); // Debugging
+                    return updatedFilters;
+                });
+                // setAttributeFiltersState((prevFilters = []) => {
+                //   // Check if attribute already exists
+                //   const existingFilterIndex = prevFilters.findIndex(
+                //     (f) => f.attribute === key
+                //   );
+                //   // Create a new filter object
+                //   const newFilter = { attribute: key, operator: 'like', value };
+                //   if (existingFilterIndex !== -1) {
+                //     // If attribute exists, update its value
+                //     const updatedFilters = [...prevFilters];
+                //     updatedFilters[existingFilterIndex] = newFilter;
+                //     console.log(`Updated Filters:`, updatedFilters); // Log updated filter list
+                //     return updatedFilters;
+                //   } else {
+                //     // If attribute doesn't exist, add a new object
+                //     return [...prevFilters, newFilter];
+                //   }
+                // });
+            };
+            // console.log(
+            //   'these are the filtered columns which have the attributes neede',
+            //   filteredColumns
+            // );
             return (React__default.createElement("div", null,
+                React__default.createElement("div", { style: { display: 'flex', gap: '10px', flexWrap: 'wrap' } }, (filteredColumns ?? []).map(({ label, key }) => (React__default.createElement(InputField$1, { key: key, label: label, value: inputValues[key] || '', onChange: (e) => {
+                        // console.log(`Event for key "${key}":`, e);
+                        // Check if it's a standard event with target.value
+                        if ('target' in e && e.target) {
+                            handleInputChange(key, e.target.value);
+                        }
+                        // Check if it's a DHIS2 UI event with direct value
+                        else if ('value' in e) {
+                            handleInputChange(key, e.value ?? '');
+                        }
+                    } })))),
                 this.showApprovalButton && (React__default.createElement("div", { style: {
                         width: '100%',
                         display: 'flex',
@@ -3467,7 +3556,14 @@ class LineListTableComponent extends ReactWrapperModule {
                         } }, "Loading"))) : (React__default.createElement(DataTable, null,
                     React__default.createElement(TableHead, null,
                         React__default.createElement(DataTableRow, null, columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.key }, col.label))))),
-                    React__default.createElement(TableBody, null, data.map((row) => (React__default.createElement(DataTableRow, { key: row.index }, columns.map((col) => (React__default.createElement(DataTableCell, { key: col.key }, col.key === 'actions' ? (React__default.createElement(DropdownMenu$1, { dropdownOptions: getDropdownOptions(row), onClick: (option) => option.onClick?.() })) : (row[col.key])))))))),
+                    React__default.createElement(TableBody, null, data.length > 0 ? (data.map((row) => (React__default.createElement(DataTableRow, { key: row.index }, columns.map((col) => (React__default.createElement(DataTableCell, { key: col.key }, col.key === 'actions' ? (React__default.createElement(DropdownMenu$1, { dropdownOptions: getDropdownOptions(row), onClick: (option) => option.onClick?.() })) : (row[col.key] || '--' // Display '--' if value is undefined or null
+                    )))))))) : (React__default.createElement(DataTableRow, null,
+                        React__default.createElement(DataTableCell, { colSpan: columns.length, style: {
+                                textAlign: 'center',
+                                fontWeight: 'bold',
+                                color: 'grey',
+                                padding: '20px',
+                            } }, "No data found")))),
                     React__default.createElement(TableFoot, null,
                         React__default.createElement(DataTableRow, null,
                             React__default.createElement(DataTableCell, { colSpan: columns.length.toString() },
@@ -4816,7 +4912,7 @@ 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 })))));
+                        } }, (this.field().options || []).map((option) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || 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(',');
@@ -5540,6 +5636,8 @@ class SelectionFiltersComponent extends ReactWrapperModule {
             const [touched, setTouched] = useState(false);
             const [showOrgUnit, setShowOrgUnit] = useState(false);
             const [value, setValue] = useState(null);
+            const [showMoreFilters, setShowMoreFilters] = useState(false);
+            const toggleMoreFilters = () => setShowMoreFilters((prev) => !prev);
             useEffect(() => {
                 setFilters({
                     programAttributesFilters: this.programAttributesFilters,
@@ -5581,7 +5679,9 @@ class SelectionFiltersComponent extends ReactWrapperModule {
             const handleSearch = () => {
                 this.actionSelected.emit({
                     ...filters,
-                    organisationUnit: selectedOrganisationUnit || this.organisationUnit || filters.organisationUnit,
+                    organisationUnit: selectedOrganisationUnit ||
+                        this.organisationUnit ||
+                        filters.organisationUnit,
                     startDate: filters.startDate,
                     endDate: filters.endDate,
                     program: this.program || filters.program,
@@ -5656,17 +5756,14 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                 } },
                 React__default.createElement("div", { style: {
                         display: 'grid',
-                        gridTemplateColumns: 'repeat(3, 1fr)',
+                        gridTemplateColumns: '1fr 1fr 1fr auto', // Ensure proper button sizing
                         gap: '16px',
+                        alignItems: 'center', // Align inputs and button on the same row
                         marginBottom: '16px',
                     } },
-                    React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(InputField$1, { value: displayValue, label: "Organization Unit", readOnly: false, onFocus: () => {
-                                setShowOrgUnit(true);
-                            }, onBlur: () => {
-                                this.ngZone.run(() => {
-                                    console.log('THIS IS IT::: ');
-                                });
+                    React__default.createElement("div", { style: { width: '100%' } },
+                        React__default.createElement(InputField$1, { value: displayValue, label: "Organization Unit", readOnly: false, onFocus: () => setShowOrgUnit(true), onBlur: () => {
+                                this.ngZone.run(() => console.log('THIS IS IT::: '));
                                 setTouched(true);
                             } }),
                         showOrgUnit && (React__default.createElement(this.FieldOrgUnitSelector, { onCancelOrgUnit: () => {
@@ -5681,30 +5778,36 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                                     setValue(selectedOrgUnit.id);
                                     setShowOrgUnit(false);
                                     setTouched(true);
-                                    // this.ngZone.run(() => {
-                                    //   setDisplayValue(selectedOrgUnit.name);
-                                    //   setSelected(selectedOrgUnit.id)
-                                    //   setSelectedOrganisationUnit(selectedOrgUnit.id)
-                                    //   setValue(selectedOrgUnit.id);
-                                    //   setShowOrgUnit(false);
-                                    // setTouched(true);
-                                    // });
                                 }
                             } }))),
-                    React__default.createElement(InputField$1, { className: "input-field", label: "Start Date", type: "DATE", value: filters.startDate, onChange: (event) => setFilters({ ...filters, startDate: event.value }) }),
-                    React__default.createElement(InputField$1, { className: "input-field", label: "End Date", type: "DATE", value: filters.endDate, onChange: (event) => setFilters({ ...filters, endDate: event.value }) })),
-                React__default.createElement("div", { style: {
-                        display: 'grid',
-                        gridTemplateColumns: 'repeat(4, 1fr)',
-                        gap: '16px',
-                    } }, filters.programAttributesFilters.map((filter, index) => (React__default.createElement("div", { key: index, style: { gridColumn: getAttributeColumnSpan(index) } }, filter.hasOptions && filter.options.length > 0 ? (React__default.createElement(SingleSelectField, { className: "single-select", label: filter.name || 'Select Option', type: filter.valueType, selected: filter.value, onChange: (event) => handleAttributeChange(index, event.selected) }, filter.options.map((option, i) => (React__default.createElement(SingleSelectOption, { key: i, label: option.name, value: option.code }))))) : (React__default.createElement(InputField$1, { className: "input-field", label: filter.name || 'Program name', type: filter.valueType, value: filter.value, onChange: (event) => handleAttributeChange(index, event.value) })))))),
-                React__default.createElement("div", { style: {
-                        display: 'grid',
-                        gridTemplateColumns: 'repeat(4, 1fr)',
-                        gap: '16px',
-                    } }, filters.programStageDataElementFilters.map((filter, index) => (React__default.createElement("div", { key: index, style: { gridColumn: getDataElementColumnSpan(index) } }, filter.hasOptions && filter.options.length > 0 ? (React__default.createElement(SingleSelectField, { className: "single-select", label: filter.name || 'Aggregation type', type: filter.valueType, selected: filter.value, onChange: (event) => handleDataElementChange(index, event.selected) }, filter.options.map((option, i) => (React__default.createElement(SingleSelectOption, { key: i, label: option.name, value: option.code }))))) : (React__default.createElement(InputField$1, { className: "input-field", type: filter.valueType, label: filter.name || 'Program name', value: filter.value, onChange: (event) => handleDataElementChange(index, event.value) })))))),
-                React__default.createElement("div", { style: { textAlign: 'right', marginTop: '16px' } },
-                    React__default.createElement(Button$1, { onClick: handleSearch }, "Search"))));
+                    React__default.createElement(InputField$1, { className: "input-field", label: "Start Date", type: "DATE", value: filters.startDate, onChange: (event) => setFilters({ ...filters, startDate: event.value }), style: { width: '100%', height: '100%' } }),
+                    React__default.createElement(InputField$1, { className: "input-field", label: "End Date", type: "DATE", value: filters.endDate, onChange: (event) => setFilters({ ...filters, endDate: event.value }), style: { width: '100%', height: '100%' } }),
+                    React__default.createElement("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            height: '100%',
+                        } },
+                        React__default.createElement("label", { style: {
+                                color: 'transparent', // Hides label text but keeps spacing
+                                fontSize: '14px',
+                                marginBottom: '4px',
+                            } }, "Toggle"),
+                        React__default.createElement(Button$1, { style: { height: '40px' }, onClick: () => setShowMoreFilters(!showMoreFilters) }, showMoreFilters ? 'Hide Filters' : 'More Filters'))),
+                showMoreFilters && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("div", { style: {
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(4, 1fr)',
+                            gap: '16px',
+                        } }, filters.programAttributesFilters.map((filter, index) => (React__default.createElement("div", { key: index, style: { gridColumn: getAttributeColumnSpan(index) } }, filter.hasOptions && filter.options.length > 0 ? (React__default.createElement(SingleSelectField, { className: "single-select", label: filter.name || 'Select Option', type: filter.valueType, selected: filter.value, onChange: (event) => handleAttributeChange(index, event.selected) }, filter.options.map((option, i) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || i, label: option.name, value: option.code }))))) : (React__default.createElement(InputField$1, { className: "input-field", label: filter.name || 'Program name', type: filter.valueType, value: filter.value, onChange: (event) => handleAttributeChange(index, event.value) })))))),
+                    React__default.createElement("div", { style: {
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(4, 1fr)',
+                            gap: '16px',
+                        } }, filters.programStageDataElementFilters.map((filter, index) => (React__default.createElement("div", { key: index, style: { gridColumn: getDataElementColumnSpan(index) } }, filter.hasOptions && filter.options.length > 0 ? (React__default.createElement(SingleSelectField, { className: "single-select", label: filter.name || 'Aggregation type', type: filter.valueType, selected: filter.value, onChange: (event) => handleDataElementChange(index, event.selected) }, filter.options.map((option, i) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || i, label: option.name, value: option.code }))))) : (React__default.createElement(InputField$1, { className: "input-field", type: filter.valueType, label: filter.name || 'Program name', value: filter.value, onChange: (event) => handleDataElementChange(index, event.value) })))))),
+                    React__default.createElement("div", { style: { textAlign: 'right', marginTop: '16px' } },
+                        React__default.createElement(Button$1, { onClick: handleSearch }, "Search"))))));
         };
     }
     getAppConfig() {