@iapps/ng-dhis2-ui 1.2.73 → 1.2.74

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

@@ -25,13 +25,14 @@ import { Layer } from '@dhis2-ui/layer';
 import { CircularLoader } from '@dhis2-ui/loader';
 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, IconChevronRight16, 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, CircularLoader as CircularLoader$1, Chip, DataTableToolbar, CalendarInput, TableHead, DataTableRow, DataTableColumnHeader, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, DataTableCell, TableBody as TableBody$1, Pagination as Pagination$1, TableFoot, DataTable, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
+import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, IconChevronRight16, 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, CircularLoader as CircularLoader$1, Chip, DataTableToolbar, CalendarInput, TableHead, DataTableRow, DataTableColumnHeader, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, DataTableCell, TableBody as TableBody$1, Pagination as Pagination$1, TableFoot, DataTable, DropdownButton, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
 import { isObject, isString, debounce, sortBy, isArray, find, camelCase, flatten, isUndefined, head, isEmpty } from 'lodash';
 import cx from 'classnames';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
 import { Pager, DataOrderCriteria, DataQueryFilter, DataFilterCondition, ProgramRuleEngine } from '@iapps/d2-web-sdk';
 import { map as map$1 } from 'rxjs/operators';
 import { format, parse as parse$1 } from 'date-fns';
+import * as XLSX from 'xlsx';
 import * as i2 from '@angular/forms';
 import { Validators, UntypedFormControl, UntypedFormGroup, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { toObservable } from '@angular/core/rxjs-interop';
@@ -4030,6 +4031,7 @@ class LineListTableComponent extends ReactWrapperModule {
         this.rowsSelected = new EventEmitter();
         this.showActionButtons = true;
         this.showEnrollmentDates = true;
+        this.showDownloadButton = true;
         this.reactStateUpdaters = null;
         this.setReactStateUpdaters = (updaters) => {
             this.reactStateUpdaters = updaters;
@@ -4216,6 +4218,50 @@ class LineListTableComponent extends ReactWrapperModule {
                 dataQueryFiltersState,
                 triggerRefetch,
             ]);
+            const handleExcelDownload = () => {
+                const filteredColumns = columns.filter((col) => col.label !== 'Actions');
+                const header = filteredColumns.map((col) => col.label);
+                const rows = data.map((row) => filteredColumns.map((col) => {
+                    const cell = row[col.key];
+                    if (cell === null || cell === undefined)
+                        return '';
+                    return typeof cell === 'object' && 'value' in cell
+                        ? cell.value
+                        : cell;
+                }));
+                const worksheetData = [header, ...rows];
+                // Creates worksheet and workbook, then writes to file
+                const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
+                const workbook = XLSX.utils.book_new();
+                XLSX.utils.book_append_sheet(workbook, worksheet, 'LineListData');
+                XLSX.writeFile(workbook, 'records.xlsx');
+            };
+            const handleCsvDownload = () => {
+                const safeValue = (value) => {
+                    if (value === null || value === undefined)
+                        return '';
+                    if (typeof value === 'object') {
+                        if ('value' in value) {
+                            return value.value;
+                        }
+                        return JSON.stringify(value);
+                    }
+                    return value;
+                };
+                const filteredColumns = columns.filter((col) => col.label !== 'Actions');
+                const header = filteredColumns.map((col) => `"${col.label}"`).join(',');
+                const csvData = data.map((row) => filteredColumns.map((col) => `"${safeValue(row[col.key])}"`).join(','));
+                const csvContent = [header, ...csvData].join('\n');
+                // Creates a Blob and triggers the download
+                const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+                const url = URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.href = url;
+                link.setAttribute('download', 'records.csv');
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            };
             const handleInputChange = (key, value) => {
                 setInputValues((prevValues) => ({
                     ...prevValues,
@@ -4307,6 +4353,11 @@ class LineListTableComponent extends ReactWrapperModule {
                 React__default.createElement("div", { style: {
                         fontSize: 14,
                     } }, "Loading"))) : (React__default.createElement("div", null,
+                this.showDownloadButton && (React__default.createElement("div", { style: { paddingBottom: '1rem', display: 'flex', justifyContent: 'flex-end' } },
+                    React__default.createElement(DropdownButton, { name: "Download", component: React__default.createElement("span", null,
+                            ' ',
+                            React__default.createElement(MenuItem$1, { label: "Download Csv", onClick: handleCsvDownload }),
+                            React__default.createElement(MenuItem$1, { label: "Download Excel", onClick: handleExcelDownload })), value: "Download" }, "Download"))),
                 orgUnitModalVisible && (React__default.createElement(OrgUnitSelector, { hide: hide, setHide: setHide, selectedOrgUnit: selectedOrgUnit, setSelectedOrgUnit: setSelectedOrgUnit, setOrgUnitState: setOrgUnitState, setTempOrgUnitState: setTempOrgUnitState, tempOrgUnitState: tempOrgUnitState })),
                 this.showFilters && (React__default.createElement(FilterToolbar, { orgUnitLabel: orgUnitLabel, selectedOrgUnit: selectedOrgUnit, setSelectedOrgUnit: setSelectedOrgUnit, setOrgUnitState: setOrgUnitState, defaultOrgUnit: defaultOrgUnit, setHide: setHide, startDateState: startDateState, setStartDateState: setStartDateState, endDateState: endDateState, setEndDateState: setEndDateState, visibleFilters: visibleFilters, dateStates: dateStates, inputValues: inputValues, setInputValues: setInputValues, handleInputChange: handleInputChange, handleInputChangeForSelectField: handleInputChangeForSelectField, handleDateSelect: handleDateSelect, prevValue: prevValue, setPrevValue: setPrevValue, showAllFilters: showAllFilters, setShowAllFilters: setShowAllFilters, handleSearch: handleSearch, setTempStartDateState: setTempStartDateState, setTempEndDateState: setTempEndDateState, setTempOrgUnitState: setTempOrgUnitState, tempStartDateState: tempStartDateState, tempEndDateState: tempEndDateState, tempOrgUnitState: tempOrgUnitState, dataQueryFiltersState: dataQueryFiltersState, setDataQueryFiltersState: setDataQueryFiltersState, SetOrgUnitModalVisible: setOrgUnitModalVisible, showEnrollmentDates: this.showEnrollmentDates })),
                 React__default.createElement(LineListTable, { columns: columns, data: data, pager: pager, setPager: setPager, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: this.actionOptions, actionOptionOrientation: this.actionOptionOrientation, actionSelected: this.actionSelected, selectable: selectable, rowsSelected: this.rowsSelected, showActionButtons: showActionButtons })))));
@@ -4354,7 +4405,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: "ng-dhis2-ui-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", actionOptionOrientation: "actionOptionOrientation", attributeFilters: "attributeFilters", useOuModeWithOlderDHIS2Instance: "useOuModeWithOlderDHIS2Instance", startDate: "startDate", endDate: "endDate", dataQueryFilters: "dataQueryFilters", ouMode: "ouMode", isButtonLoading: "isButtonLoading", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit", showFilters: "showFilters", isOptionSetNameVisible: "isOptionSetNameVisible", allowRowsSelection: "allowRowsSelection", enrollmentStatus: "enrollmentStatus", triggerRefetch: "triggerRefetch", eventStatus: "eventStatus", showActionButtons: "showActionButtons", showEnrollmentDates: "showEnrollmentDates" }, outputs: { actionSelected: "actionSelected", rowsSelected: "rowsSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-input div{margin:0!important}::ng-deep .custom-input label{font-size:12px;padding-right:0}::ng-deep .custom-input input{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input [data-test=calendar-clear-button]{background-color:#f2f2f2!important;color:#870808!important;border-radius:6px!important;padding:4px 10px!important;font-size:0!important}::ng-deep .custom-input [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:14px;color:#870808}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .calendar-input-wrapper{position:relative}::ng-deep .calendar-input-wrapper .custom-input{position:relative;width:100%;display:flex;align-items:center}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]{right:8px;bottom:14px;margin:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0!important;background-color:#a0adba!important;border-radius:50%;padding:2px;cursor:pointer}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:10px;color:#f0f0f0}::ng-deep .calendar-input-wrapper input{padding-right:40px!important;height:40px;line-height:40px;box-sizing:border-box}::ng-deep .custom-input label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}::ng-deep .custom-select-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-select-input div{margin:0!important}::ng-deep .custom-select-input [data-test=dhis2-uiwidgets-singleselectfield-label]{font-size:12px;color:gray!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]:focus-within{box-shadow:none!important}::ng-deep .custom-select-input input:focus{border:none!important;box-shadow:none!important}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LineListTableComponent, isStandalone: false, selector: "ng-dhis2-ui-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", actionOptionOrientation: "actionOptionOrientation", attributeFilters: "attributeFilters", useOuModeWithOlderDHIS2Instance: "useOuModeWithOlderDHIS2Instance", startDate: "startDate", endDate: "endDate", dataQueryFilters: "dataQueryFilters", ouMode: "ouMode", isButtonLoading: "isButtonLoading", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit", showFilters: "showFilters", isOptionSetNameVisible: "isOptionSetNameVisible", allowRowsSelection: "allowRowsSelection", enrollmentStatus: "enrollmentStatus", triggerRefetch: "triggerRefetch", eventStatus: "eventStatus", showActionButtons: "showActionButtons", showEnrollmentDates: "showEnrollmentDates", showDownloadButton: "showDownloadButton" }, outputs: { actionSelected: "actionSelected", rowsSelected: "rowsSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-input div{margin:0!important}::ng-deep .custom-input label{font-size:12px;padding-right:0}::ng-deep .custom-input input{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input [data-test=calendar-clear-button]{background-color:#f2f2f2!important;color:#870808!important;border-radius:6px!important;padding:4px 10px!important;font-size:0!important}::ng-deep .custom-input [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:14px;color:#870808}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .calendar-input-wrapper{position:relative}::ng-deep .calendar-input-wrapper .custom-input{position:relative;width:100%;display:flex;align-items:center}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]{right:8px;bottom:14px;margin:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0!important;background-color:#a0adba!important;border-radius:50%;padding:2px;cursor:pointer}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:10px;color:#f0f0f0}::ng-deep .calendar-input-wrapper input{padding-right:40px!important;height:40px;line-height:40px;box-sizing:border-box}::ng-deep .custom-input label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}::ng-deep .custom-select-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-select-input div{margin:0!important}::ng-deep .custom-select-input [data-test=dhis2-uiwidgets-singleselectfield-label]{font-size:12px;color:gray!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]:focus-within{box-shadow:none!important}::ng-deep .custom-select-input input:focus{border:none!important;box-shadow:none!important}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, decorators: [{
             type: Component,
@@ -4407,6 +4458,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], showEnrollmentDates: [{
                 type: Input
+            }], showDownloadButton: [{
+                type: Input
             }] } });
 
 class LineListModule {