@iapps/ng-dhis2-ui 1.1.26 → 1.1.28

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: crypto.randomUUID() || option.id, value: crypto.randomUUID() || option.id, label: option.name, dataTest: `${dataTest}-period-type-option-${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}` }))))),
         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: crypto.randomUUID() || 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: option.id, value: option.id, label: option.name, dataTest: `${dataTest}-option-${option.id}` })))),
     React__default.createElement("style", { jsx: true }, `
       .leftSection {
         flex-grow: 1;
@@ -3141,11 +3141,9 @@ class LineListService {
         const filterParams = buildFilters(filters);
         const dateFilter = startDate && endDate ? `&programStartDate=${startDate}&programEndDate=${endDate}` : '';
         const ouModeIdentifier = ouMode ? `&ouMode=${ouMode}` : ``;
-        return this.httpClient.get(`trackedEntityInstances.json?program=${programId}&ou=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=trackedEntityInstance,attributes[*,displayInList],enrollments[*]&totalPages=true&${filterParams}${dateFilter}`).pipe(map$1((response) => {
-            response.trackedEntityInstances.forEach((tei) => {
-                // Filter attributes to only include those with displayInList=true
-                tei.attributes = tei.attributes.filter((attr) => attr.displayInList);
-            });
+        return this.httpClient.get(`trackedEntityInstances.json?program=${programId}&ou=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=trackedEntityInstance,attributes[*,displayInList],enrollments[*]&totalPages=true&${filterParams}${dateFilter}&order=created:desc`).pipe(map$1((response) => {
+            //TODO: use the api to to order by desc
+            // response.trackedEntityInstances.reverse();
             return response;
         }));
     }
@@ -3313,6 +3311,8 @@ class LineListTableComponent extends ReactWrapperModule {
         this.actionSelected = new EventEmitter();
         this.reactStateUpdaters = null;
         this.approvalSelected = new EventEmitter();
+        this.isButtonLoading = false;
+        this.buttonLabel = '';
         this.setReactStateUpdaters = (updaters) => {
             this.reactStateUpdaters = updaters;
         };
@@ -3334,6 +3334,7 @@ class LineListTableComponent extends ReactWrapperModule {
             const [startDateState, setStartDateState] = useState(this.startDate);
             const [endDateState, setEndDateState] = useState(this.endDate);
             const [loading, setLoading] = useState(false);
+            const [isButtonLoading, setIsButtonLoading] = useState(this.isButtonLoading);
             // Store updaters in refs for Angular to access
             const updateRefs = useRef({
                 setProgramIdState,
@@ -3342,6 +3343,7 @@ class LineListTableComponent extends ReactWrapperModule {
                 setAttributeFiltersState,
                 setStartDateState,
                 setEndDateState,
+                setIsButtonLoading,
             });
             useEffect(() => {
                 this.setReactStateUpdaters?.(updateRefs.current);
@@ -3416,7 +3418,7 @@ class LineListTableComponent extends ReactWrapperModule {
             };
             const handleApprovalClick = () => {
                 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, 1000, this.attributeFilters, this.startDate, this.endDate, this.ouMode)
                     .subscribe((response) => {
                     if ('trackedEntityInstances' in response.data) {
                         const trackedEntityInstances = response.data.trackedEntityInstances;
@@ -3452,8 +3454,7 @@ class LineListTableComponent extends ReactWrapperModule {
                         gap: 8,
                         padding: 8,
                         marginBottom: 16,
-                    } },
-                    React__default.createElement(Button$1, { className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", onClick: handleApprovalClick, primary: true }, "Approval"))),
+                    } }, isButtonLoading ? (React__default.createElement(CircularLoader$1, { small: true })) : (React__default.createElement(Button$1, { className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", onClick: handleApprovalClick, primary: true }, this.buttonLabel)))),
                 loading ? (React__default.createElement("div", { style: {
                         display: 'flex',
                         alignItems: 'center',
@@ -3501,6 +3502,9 @@ class LineListTableComponent extends ReactWrapperModule {
             if (changes['endDate']) {
                 this.reactStateUpdaters.setEndDateState(this.endDate);
             }
+            if (changes['isButtonLoading']) {
+                this.reactStateUpdaters.setIsButtonLoading(this.isButtonLoading);
+            }
         }
     }
     async ngAfterViewInit() {
@@ -3511,7 +3515,7 @@ class LineListTableComponent extends ReactWrapperModule {
         this.render();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LineListTableComponent, isStandalone: false, selector: "app-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", startDate: "startDate", endDate: "endDate", filters: "filters", ouMode: "ouMode", showApprovalButton: "showApprovalButton" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LineListTableComponent, isStandalone: false, selector: "app-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", startDate: "startDate", endDate: "endDate", filters: "filters", ouMode: "ouMode", showApprovalButton: "showApprovalButton", isButtonLoading: "isButtonLoading", buttonLabel: "buttonLabel" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, decorators: [{
             type: Component,
@@ -3540,6 +3544,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Output
             }], approvalSelected: [{
                 type: Output
+            }], isButtonLoading: [{
+                type: Input
+            }], buttonLabel: [{
+                type: Input
             }] } });
 
 class LineListModule {
@@ -4667,7 +4675,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
         if (!(changes['field'] || {})?.firstChange) {
             this.InputField = this.#getInputField();
             this.component = this.#getInputField();
-            // this.render();
+            this.render();
         }
     }
     #getInputField() {
@@ -4808,7 +4816,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             });
                             setValue(event.selected);
                             setTouched(true);
-                        } }, (this.field().options || []).map((option) => (React__default.createElement(SingleSelectOption, { key: crypto.randomUUID() || option.key, label: option.label, value: option.value })))));
+                        } }, (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(',');
@@ -4822,7 +4830,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             });
                             setValue(selectedValue);
                             setTouched(true);
-                        }, selected: arrayValue }, (this.field().options || []).map((option) => (React__default.createElement(MultiSelectOption, { key: crypto.randomUUID() || option.key, label: option.label, value: option.value })))));
+                        }, 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]);
@@ -5689,12 +5697,12 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                         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) })))))),
+                    } }, 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: 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) })))))),
+                    } }, 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"))));
         };