@iapps/ng-dhis2-ui 1.2.70 → 1.2.72

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

@@ -3305,7 +3305,7 @@ const OrgUnitSelector = ({ hide, setHide, selectedOrgUnit, setSelectedOrgUnit, s
 const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setOrgUnitState, defaultOrgUnit, setHide, startDateState, setStartDateState, endDateState, setEndDateState, visibleFilters, dateStates, inputValues, setInputValues, handleInputChange, handleInputChangeForSelectField, handleDateSelect, prevValue, setPrevValue, showAllFilters, setShowAllFilters, handleSearch, setTempStartDateState, setTempEndDateState, setTempOrgUnitState, tempStartDateState, tempEndDateState, tempOrgUnitState, dataQueryFiltersState, setDataQueryFiltersState, SetOrgUnitModalVisible, showEnrollmentDates, }) => (React__default.createElement(DataTableToolbar, { className: "table-top-toolbar" },
     React__default.createElement("div", { style: {
             display: 'flex',
-            flexDirection: 'column',
+            // flexDirection: 'column',
             gap: '10px',
             flexWrap: 'wrap',
         } },
@@ -3339,15 +3339,8 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                         if (selectedDate.calendarDateString === null) {
                             setEndDateState(selectedDate.calendarDateString);
                         }
-                    } }))),
-            React__default.createElement(Button$1, { onClick: handleSearch }, "Search"),
-            React__default.createElement(Button$1, { onClick: () => setShowAllFilters(!showAllFilters) }, showAllFilters ? 'Less Filters' : 'More Filters')),
-        visibleFilters?.length > 0 && (React__default.createElement("div", { style: {
-                display: 'flex',
-                alignItems: 'center',
-                gap: '10px',
-                flexWrap: 'wrap',
-            } }, (visibleFilters ?? []).map(({ label, key, valueType, options }) => {
+                    } })))),
+        (visibleFilters ?? []).map(({ label, key, valueType, options }) => {
             if (valueType === 'DATE') {
                 return (React__default.createElement(CalendarInput, { key: key, label: `${label}:`, calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", clearable: !!dateStates[key], date: dateStates[key], onDateSelect: (selectedDate) => {
                         handleDateSelect(key, selectedDate);
@@ -3388,164 +3381,15 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                         setPrevValue(currentValue);
                     }
                 } }));
-        })))))
-// <DataTableToolbar className="table-top-toolbar">
-//   <div
-//     style={{
-//       display: 'flex',
-//       alignItems: 'center',
-//       gap: '10px',
-//       flexWrap: 'wrap',
-//     }}
-//   >
-//     <InputField
-//       key="location"
-//       label={orgUnitLabel ? orgUnitLabel : 'registering unit:'}
-//       value={selectedOrgUnit}
-//       onFocus={() => setHide(false)}
-//       className="custom-input"
-//       clearable
-//       onChange={(event: { value: string }) => {
-//         setSelectedOrgUnit(event.value);
-//         setOrgUnitState(defaultOrgUnit);
-//       }}
-//     />
-//     <CalendarInput
-//       label="Start date:"
-//       calendar="gregory"
-//       locale="en-GB"
-//       timeZone="Africa/Dar_es_Salaam"
-//       className="custom-input"
-//       clearable={!!tempStartDateState}
-//       date={tempStartDateState}
-//       onDateSelect={(selectedDate: any) => {
-//         // if (!(selectedDate.calendarDateString === null)) {
-//         setTempStartDateState(selectedDate.calendarDateString);
-//         //}
-//         if (selectedDate.calendarDateString === null) {
-//           setStartDateState(selectedDate.calendarDateString);
-//         }
-//       }}
-//     />
-//     <CalendarInput
-//       label="End date:"
-//       calendar="gregory"
-//       locale="en-GB"
-//       timeZone="Africa/Dar_es_Salaam"
-//       className="custom-input"
-//       clearable={!!tempEndDateState}
-//       date={tempEndDateState}
-//       onDateSelect={(selectedDate: any) => {
-//         // if (!(selectedDate.calendarDateString === null)) {
-//         setTempEndDateState(selectedDate.calendarDateString);
-//         //}
-//         if (selectedDate.calendarDateString === null) {
-//           setEndDateState(selectedDate.calendarDateString);
-//         }
-//       }}
-//     />
-//     <Button onClick={() => handleSearch()}>Search</Button>
-//     <Button onClick={() => setShowAllFilters(!showAllFilters)}>
-//       {showAllFilters ? 'Less Filters' : 'More Filters'}
-//     </Button>
-//     {(visibleFilters ?? []).map(({ label, key, valueType, options }: any) => {
-//       if (valueType === 'DATE') {
-//         return (
-//           <CalendarInput
-//             key={key}
-//             label={`${label}:`}
-//             calendar="gregory"
-//             locale="en-GB"
-//             timeZone="Africa/Dar_es_Salaam"
-//             className="custom-input"
-//             clearable={!!dateStates[key]}
-//             date={dateStates[key]}
-//             onDateSelect={(selectedDate: any) => {
-//               handleDateSelect(key, selectedDate);
-//               const filteredFilters = dataQueryFiltersState.filter(
-//                 (f: { attribute: any }) => f.attribute !== key
-//               );
-//               if (selectedDate === null) {
-//                 setDataQueryFiltersState(filteredFilters);
-//               }
-//             }}
-//           />
-//         );
-//       }
-//       // const filteredFilters = prevFilters.filter((f) => f.attribute !== key);
-//       if (options && options.options.length > 0) {
-//         return (
-//           <SingleSelectField
-//             key={key}
-//             label={`${label}:`}
-//             selected={inputValues[key] || ''}
-//             className="custom-select-input"
-//             clearable
-//             onChange={({ selected }: { selected: string }) => {
-//               setInputValues((prevValues: any) => ({
-//                 ...prevValues,
-//                 [key]: selected ?? '',
-//               }));
-//               handleInputChangeForSelectField(key, selected ?? '');
-//               const filteredFilters = dataQueryFiltersState.filter(
-//                 (f: { attribute: any }) => f.attribute !== key
-//               );
-//               if (selected === '') {
-//                 setDataQueryFiltersState(filteredFilters);
-//               }
-//             }}
-//           >
-//             {(options.options ?? []).map((opt: any) => (
-//               <SingleSelectOption
-//                 key={opt.id}
-//                 label={opt.name}
-//                 value={opt.code}
-//               />
-//             ))}
-//           </SingleSelectField>
-//         );
-//       }
-//       return (
-//         <InputField
-//           key={key}
-//           label={`${label}:`}
-//           className="custom-input"
-//           value={inputValues[key] || ''}
-//           clearable
-//           onChange={(e: any) => {
-//             const currentValue =
-//               'target' in e ? e.target.value : e.value ?? '';
-//             setInputValues((prevValues: any) => ({
-//               ...prevValues,
-//               [key]: currentValue,
-//             }));
-//             // if (currentValue === '') {
-//             //   handleInputChange(key, '');
-//             // }
-//             const filteredFilters = dataQueryFiltersState.filter(
-//               (f: { attribute: any }) => f.attribute !== key
-//             );
-//             if (currentValue === '') {
-//               setDataQueryFiltersState(filteredFilters);
-//             }
-//           }}
-//           onBlur={(e: any) => {
-//             const currentValue =
-//               'target' in e ? e.target.value : e.value ?? '';
-//             if (currentValue !== '' && currentValue !== prevValue) {
-//               handleInputChange(key, currentValue);
-//               setPrevValue(currentValue);
-//             }
-//           }}
-//         />
-//       );
-//     })}
-//     <div>
-//       {/* <p>hello</p> */}
-//     </div>
-//   </div>
-// </DataTableToolbar>
-);
+        }),
+        React__default.createElement("div", { style: {
+                display: 'flex',
+                // alignItems: 'center',
+                gap: '10px',
+                // flexWrap: 'wrap',
+            } },
+            React__default.createElement(Button$1, { onClick: handleSearch }, "Search"),
+            React__default.createElement(Button$1, { onClick: () => setShowAllFilters(!showAllFilters) }, showAllFilters ? 'Less Filters' : 'More Filters')))));
 
 // export const TableHeader = ({
 //   columns,
@@ -4890,6 +4734,7 @@ class FormField {
         this.selectedOptionsLabel =
             options.availableOptionsLabel ?? 'Selected options';
         this.allowFutureDate = options.allowFutureDate;
+        this.extension = options.extension;
     }
     setMax(field) {
         if (field.controlType !== 'date') {
@@ -5345,6 +5190,7 @@ class FormFieldGroup {
             const hasOptions = (options?.length > 0 ||
                 dependentField !== undefined ||
                 fieldMetaData['hasOptions']);
+            const extension = this.params.formFieldExtensions?.find((fieldExtension) => fieldExtension?.id === field.id);
             return new FormField({
                 ...(fieldMetaData || {}),
                 ...field,
@@ -5372,6 +5218,7 @@ class FormFieldGroup {
                 controlType: FieldUtil.getFieldControlType(fieldMetaData['valueType'], hasOptions),
                 metaType: fieldMetaData['metaType'],
                 stepId: fieldMetaData['stepId'],
+                extension,
             });
         })
             .filter((field) => field);
@@ -5512,6 +5359,7 @@ class FormMetadataSection {
                 formFieldGroup,
                 fieldMetaData: [...this.attributes, ...this.dataElements],
                 locale: this.params.locale,
+                formFieldExtensions: this.params.formFieldExtensions,
             }).toJson();
         });
     }
@@ -5543,6 +5391,7 @@ class FormMetaData {
                 section,
                 program,
                 locale: this.params.locale,
+                formFieldExtensions: this.params.formFieldExtensions,
             }).toJson();
         })
             .filter((section) => section !== null);
@@ -5856,10 +5705,11 @@ class FormValue {
 // 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 { label, id, uploadUrl, performUpload, validationText, required, hasError, onChange, onUploadSuccess, extension } = props;
     const d2 = window?.d2Web;
     const [file, setFile] = useState(null);
     const [uploading, setUploading] = useState();
+    const [validationError, setValidationError] = useState(null);
     const valid = useMemo(() => {
         if (isUndefined(hasError)) {
             return undefined;
@@ -5885,8 +5735,14 @@ const FileUploadField = (props) => {
             }
         }
     };
-    return (React__default.createElement(FileInputField, { accept: "*", buttonLabel: "Upload a file", label: label, name: id, required: required, validationText: validationText, onChange: (event) => {
+    return (React__default.createElement(FileInputField, { accept: extension?.accept?.join(','), buttonLabel: "Upload a file", label: label, name: id, required: required, error: !!validationError, validationText: validationError || validationText, onChange: (event) => {
             const fileItem = (event?.files || [])[0];
+            setValidationError(null);
+            if (extension?.sizeLimit && fileItem.size > extension?.sizeLimit) {
+                setValidationError(`File size must not exceed ${extension.sizeLimit / (1024 * 1024)}MB`);
+                setFile(null);
+                return;
+            }
             setFile(fileItem);
             if (performUpload) {
                 uploadFile(fileItem);
@@ -6313,7 +6169,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                                     });
                                     setValue(fileId);
                                     setTouched(true);
-                                } })));
+                                }, extension: this.field()?.extension })));
                     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, readOnly: disabled, onChange: (event) => {
                                 this.ngZone.run(() => {
@@ -7623,6 +7479,7 @@ class ProgramEntryFormFieldUtil {
             .map((field) => {
             const options = FieldDropdown.getDropdownOptions(field);
             const hasOptions = options?.length > 0;
+            const extension = this.config.formFieldExtensions?.find((fieldExtension) => fieldExtension?.id === field.id);
             return new FormField({
                 ...field,
                 id: field.id,
@@ -7638,6 +7495,7 @@ class ProgramEntryFormFieldUtil {
                 controlType: FieldUtil.getFieldControlType(field.valueType, hasOptions),
                 metaType: field.metaType,
                 stepId: field.stepId,
+                extension,
             });
         })
             .sort((a, b) => a.order ?? 0 - (b.order ?? 0));