@iapps/ng-dhis2-ui 1.1.48 → 1.1.50

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

@@ -27,7 +27,7 @@ import { MenuItem, MenuDivider } from '@dhis2-ui/menu';
 import parse from 'html-react-parser';
 import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, IconFilter16, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination, Chip, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
-import { isObject, isString, sortBy, isArray, find, camelCase, flatten, debounce, head, isEmpty } from 'lodash';
+import { isObject, isString, sortBy, isArray, find, camelCase, flatten, debounce, isUndefined, head, isEmpty } from 'lodash';
 import cx from 'classnames';
 import { map as map$1, switchMap } from 'rxjs/operators';
 import * as i2 from '@angular/forms';
@@ -3584,26 +3584,34 @@ class LineListTableComponent extends ReactWrapperModule {
                                 borderRadius: '4px',
                                 cursor: 'pointer',
                             }, onClick: handleApprovalClick, primary: true }, this.buttonLabel))),
-                    this.showFilterButton && (React__default.createElement(Button$1, { style: {
-                            backgroundColor: '#6b7280', // Gray color
-                            color: 'white',
-                            padding: '8px 16px',
-                            borderRadius: '4px',
-                            cursor: 'pointer',
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 8,
-                        }, onClick: () => {
+                    this.showFilterButton && (React__default.createElement(Button$1
+                    // style={{
+                    //   backgroundColor: '#6b7280', 
+                    //   color: 'white',
+                    //   padding: '8px 16px',
+                    //   borderRadius: '4px',
+                    //   cursor: 'pointer',
+                    //   display: 'flex',
+                    //   alignItems: 'center',
+                    //   gap: 8,
+                    // }}
+                    , { 
+                        // style={{
+                        //   backgroundColor: '#6b7280', 
+                        //   color: 'white',
+                        //   padding: '8px 16px',
+                        //   borderRadius: '4px',
+                        //   cursor: 'pointer',
+                        //   display: 'flex',
+                        //   alignItems: 'center',
+                        //   gap: 8,
+                        // }}
+                        onClick: () => {
                             setFilters(!filters);
                         }, secondary: true },
                         React__default.createElement(IconFilter16, null),
                         filters ? 'Hide Filters' : 'Show Filters'))),
-                filters && (React__default.createElement("div", { style: {
-                        display: 'flex',
-                        gap: '10px',
-                        flexWrap: 'wrap',
-                        paddingBottom: '16px',
-                    } }, (filteredColumns ?? []).map(({ label, key }) => (React__default.createElement(InputField$1, { key: key, label: label, value: inputValues[key] || '', onChange: (e) => {
+                filters && (React__default.createElement("div", null, (filteredColumns ?? []).map(({ label, key }) => (React__default.createElement(InputField$1, { key: key, label: label, value: inputValues[key] || '', onChange: (e) => {
                         // Check if it's a standard event with target.value
                         if ('target' in e && e.target) {
                             handleInputChange(key, e.target.value);
@@ -5095,6 +5103,65 @@ const OrgUnitFormField = (props) => {
                     React__default.createElement(CircularLoader$1, { small: true }))) : (React__default.createElement("div", { className: classes.orgUnitTreeContainer, style: { maxHeight: '200px', overflowY: 'auto' } }, renderOrgUnitTree()))))))));
 };
 
+// Copyright 2025 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.
+const FileUploadField = (props) => {
+    const { label, id, uploadUrl, performUpload, validationText, required, hasError, onChange, onUploadSuccess, } = props;
+    const d2 = window?.d2Web;
+    const [file, setFile] = useState(null);
+    const [uploading, setUploading] = useState();
+    const valid = useMemo(() => {
+        if (isUndefined(hasError)) {
+            return undefined;
+        }
+        return !hasError;
+    }, [hasError]);
+    const uploadFile = async (fileItem) => {
+        if (fileItem) {
+            setUploading(true);
+            const formData = new FormData();
+            formData.append('file', fileItem);
+            try {
+                const fileUploadResponse = await d2.httpInstance.post(uploadUrl, formData);
+                setUploading(false);
+                const fileId = fileUploadResponse?.data?.response?.fileResource
+                    ?.id;
+                if (fileId) {
+                    onUploadSuccess(fileId);
+                }
+            }
+            catch (error) {
+                setUploading(false);
+            }
+        }
+    };
+    return (React__default.createElement(FileInputField, { accept: "*", buttonLabel: "Upload a file", label: label, name: id, valid: valid, required: required, validationText: validationText, onChange: (event) => {
+            const fileItem = (event?.files || [])[0];
+            setFile(fileItem);
+            if (performUpload) {
+                uploadFile(fileItem);
+            }
+            else {
+                onChange(file);
+            }
+            // this.ngZone.run(() => {
+            //   this.form().get(this.field().id) ||
+            //     this.form()
+            //       .get(this.field().key)
+            //       ?.setValue((event?.files || [])[0]);
+            //   this.update.emit({
+            //     form: this.form(),
+            //     value: (event?.files || [])[0],
+            //   });
+            // });
+            // setValue((event?.files || [])[0]);
+            // setTouched(true);
+        } }, file && (React__default.createElement(FileListItem, { cancelText: "Cancel", label: file.name, loading: uploading, onRemove: () => {
+            setFile(null);
+        }, removeText: "Remove" }))));
+};
+
 // 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.
@@ -5214,7 +5281,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             this.ngZone.run(() => {
                                 this.update.emit({ form: this.form(), value });
                             });
-                        }, selected: value, onBlur: (event) => { } }));
+                        }, selected: value }));
                 case 'transfer':
                     return (React__default.createElement(Transfer, { filterable: true, filterPlaceholder: "Search", selected: selected, leftHeader: React__default.createElement("div", { style: {
                                 fontSize: 14,
@@ -5282,27 +5349,19 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             setTouched(true);
                         }, 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, onChange: (event) => {
-                            this.uploadedFiles.push((event?.files || [])[0]);
-                            this.ngZone.run(() => {
-                                this.form().get(this.field().id) ||
-                                    this.form()
-                                        .get(this.field().key)
-                                        ?.setValue((event?.files || [])[0]);
-                                this.update.emit({
-                                    form: this.form(),
-                                    value: (event?.files || [])[0],
+                    return (React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement(FileUploadField, { label: this.label(), id: this.field().id, hasError: hasError, required: this.field().required, validationText: validationError, performUpload: true, uploadUrl: 'fileResources', onUploadSuccess: (fileId) => {
+                                this.ngZone.run(() => {
+                                    this.form().get(this.field().id) ||
+                                        this.form().get(this.field().key)?.setValue(fileId);
+                                    this.update.emit({
+                                        form: this.form(),
+                                        value: fileId,
+                                    });
                                 });
-                            });
-                            setValue((event?.files || [])[0]);
-                            setTouched(true);
-                        } }, this.uploadedFiles.map((file, index) => (React__default.createElement(FileListItem, { key: index, cancelText: "Cancel", label: file.name, onCancel: () => { }, onRemove: () => {
-                            this.ngZone.run(() => {
-                                this.uploadedFiles.splice(index, 1);
-                                setValue(this.uploadedFiles);
+                                setValue(fileId);
                                 setTouched(true);
-                            });
-                        }, removeText: "Remove" })))));
+                            } })));
                 default:
                     return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: this.field().type, inputWidth: this.fieldConfig()?.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, disabled: this.field()?.disabled ||
                             this.field()?.generated ||