new implementation for bulk decision Import

i18n/en.pot

@@ -5,8 +5,32 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-07-13T07:19:04.656Z\n"
-"PO-Revision-Date: 2023-07-13T07:19:04.656Z\n"
+"POT-Creation-Date: 2024-09-18T13:18:42.463Z\n"
+"PO-Revision-Date: 2024-09-18T13:18:42.463Z\n"
+
+msgid "Error Code"
+msgstr "Error Code"
+
+msgid "Tracker Type"
+msgstr "Tracker Type"
+
+msgid "UID"
+msgstr "UID"
+
+msgid "Message"
+msgstr "Message"
+
+msgid "Errors"
+msgstr "Errors"
+
+msgid "Field"
+msgstr "Field"
+
+msgid "Value"
+msgstr "Value"
+
+msgid "Error Message"
+msgstr "Error Message"
 
 msgid "Column"
 msgstr "Column"

src/components/bulkImport/BulkFinalDecision.tsx

@@ -0,0 +1,160 @@
+import React, { useState } from 'react';
+
+import { createStyles, createTheme, makeStyles, MuiThemeProvider } from "@material-ui/core/styles";
+import { DropzoneDialog } from "material-ui-dropzone";
+import { CloudUpload } from "@material-ui/icons";
+import { read, utils } from "xlsx";
+import { CenteredContent, CircularLoader, Modal, ModalContent, ModalTitle } from "@dhis2/ui";
+import styles from "./modal.module.css";
+import { type ProgramConfig } from "../../types/programConfig/ProgramConfig";
+import { useRecoilState, useRecoilValue, useResetRecoilState } from "recoil";
+import { ProgramConfigState } from "../../schema/programSchema";
+import ModalSummaryContent from './ModalSummaryContent';
+import { BulkImportStats, BulkImportStatsState, ProcessingRecords, ProcessingRecordsState, ProcessingStage } from '../../schema/bulkImportSchema';
+import SummaryDetails from './SummaryDetails';
+import { generateData, getFinalResultDataFromTemplate, createUpdatePayload } from '../../utils/bulkImport/processImportData';
+import useGetUsedPProgramStages from "../../hooks/programStages/useGetUsedPProgramStages";
+
+
+interface BulkFinalDecisionProps {
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>
+    isOpen: boolean
+    forUpdate: boolean
+}
+
+export const BulkFinalDecision = ({ setOpen, isOpen, forUpdate }: BulkFinalDecisionProps) => {
+    const programConfig: ProgramConfig = useRecoilValue<ProgramConfig>(ProgramConfigState)
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [summaryOpen, setSummaryOpen] = useState(false);
+    const resetProcessingStage = useResetRecoilState(ProcessingStage);
+    const performanceStages = useGetUsedPProgramStages()
+    const [uploadStats, setUploadStats] = useRecoilState<BulkImportStats>(BulkImportStatsState);
+    const [_processedRecords, setProcessedRecords] = useRecoilState<ProcessingRecords>(ProcessingRecordsState);
+    const finalResultStage = performanceStages.map((p: string) => {
+        return p;
+    })
+
+    const useStyles = makeStyles(() => createStyles({
+        previewChip: {
+            minWidth: 160,
+            maxWidth: 210
+        }
+    }));
+    const theme = createTheme({
+        overrides: {}
+    });
+    const classes = useStyles();
+    const handleFileChange = (file: File) => {
+        resetProcessingStage()
+        setIsProcessing(true)
+        setSummaryOpen(true)
+        const reader: FileReader = new FileReader();
+        reader.onload = async (e: ProgressEvent<FileReader>) => {
+            const data: Uint8Array = new Uint8Array(e.target?.result as any);
+            const workbook = read(data, {
+                type: 'array',
+                cellDates: true,
+                cellNF: false,
+                dateNF: "YYYY-MM-DD",
+                cellText: true
+            });
+
+            const sheetName = workbook.SheetNames[0];
+            const worksheet = workbook.Sheets[sheetName];
+            const rawData = utils.sheet_to_json(worksheet, { header: 1, raw: false, dateNF: 'yyyy-mm-dd', defval: "" });
+
+            if (!rawData[2]) {
+                console.error("Headers row is missing in the uploaded file.");
+                return;
+            }
+            const headers: string[] = rawData[2] as string[];
+            const dataWithHeaders: Array<Record<string, any>> = generateData(headers, rawData.slice(3));
+            const finalResultData = getFinalResultDataFromTemplate(dataWithHeaders, finalResultStage, programConfig);
+            const events = createUpdatePayload(finalResultData);
+            console.log("events", events);
+
+            setUploadStats(stats => ({
+                ...stats,
+                events: {
+                    ...stats.events,
+                    updated: events.length,
+                    conflicts: 0
+                }
+            }))
+            setProcessedRecords((r) => ({
+                ...r,
+                recordsToUpdate: finalResultData,
+                updateEvents: events,
+                validRecords: dataWithHeaders,
+            }))
+
+            setIsProcessing(false)
+        };
+        reader.readAsArrayBuffer(file);
+    }
+
+    const onSave = (files: File[]) => {
+        handleFileChange(files[0])
+    }
+    return (
+        <>
+            {(!isProcessing && !summaryOpen) &&
+                <MuiThemeProvider theme={theme}>
+                    <DropzoneDialog
+                        dialogTitle={"Bulk Final Decision Upload"}
+                        submitButtonText={"Start Import"}
+                        dropzoneText={"Drag and drop a file here or Browse"}
+                        Icon={CloudUpload as any}
+                        filesLimit={1}
+                        showPreviews={false}
+                        showPreviewsInDropzone={true}
+                        previewGridProps={{
+                            container: {
+                                spacing: 1,
+                                direction: 'row'
+                            }
+                        }}
+                        previewChipProps={{ classes: { root: classes.previewChip } }}
+                        previewText="Selected file:"
+                        showFileNames={true}
+                        showFileNamesInPreview={true}
+                        acceptedFiles={[".xlsx"]}
+                        open={isOpen}
+                        onClose={() => {
+                            setOpen(false)
+                        }}
+                        onSave={onSave}
+                        clearOnUnmount={true}
+                    />
+                </MuiThemeProvider>
+            }
+            {(summaryOpen) && (
+                <Modal large position={"middle"} className={styles.modalContainer}>
+                    <ModalTitle>{isProcessing ? "Processing Bulk Decision Upload" : "Bulk Decision Upload Summary"}</ModalTitle>
+                    <ModalContent>
+                        {isProcessing
+                            ? <CenteredContent className="p-5"><CircularLoader /></CenteredContent>
+                            : <ModalSummaryContent
+                                setOpen={setSummaryOpen}
+                                summaryData={
+                                    {
+                                        updated: uploadStats.events.updated,
+                                        created: uploadStats.events.created,
+                                        conflicts: uploadStats.events.conflicts,
+                                        duplicates: uploadStats.events.updated,
+                                        invalid: uploadStats.events.invalid
+                                    }
+                                }
+                                summaryDetails={
+                                    <>
+                                        <SummaryDetails />
+                                    </>
+                                }
+                            />
+                        }
+                    </ModalContent>
+                </Modal>
+            )}
+        </>
+    );
+}

src/components/bulkImport/ConflictsTable.tsx

@@ -0,0 +1,66 @@
+import React, {useState} from "react";
+import {
+    DataTable,
+    DataTableHead,
+    DataTableRow,
+    DataTableBody,
+    DataTableColumnHeader,
+    DataTableCell
+} from "@dhis2/ui"
+import i18n from "@dhis2/d2-i18n";
+import Pagination from "../table/components/pagination/Pagination";
+import { ValidationReport } from "../../types/bulkImport/Interfaces";
+
+interface ConflictsTableProps {
+    validationReport: ValidationReport
+}
+export const ConflictsTable = (props: ConflictsTableProps): React.ReactElement => {
+    const {validationReport} = props
+    const [page, setpage] = useState(1)
+    const [pageSize, setpageSize] = useState(10)
+    const displayData = validationReport.errorReports.slice((page - 1) * pageSize, page * pageSize);
+
+    const onPageChange = (newPage: number) => {
+        setpage(newPage)
+    }
+    const onRowsPerPageChange = (event: any) => {
+        setpageSize(parseInt(event.value, 10))
+        setpage(1)
+    }
+    return (
+        <>
+            <DataTable>
+                <DataTableHead>
+                    <DataTableRow>
+                        <DataTableColumnHeader tag={"th"}>{i18n.t('Error Code')}</DataTableColumnHeader>
+                        <DataTableColumnHeader tag={"th"}>{i18n.t('Tracker Type')}</DataTableColumnHeader>
+                        <DataTableColumnHeader tag={"th"}>{i18n.t('UID')}</DataTableColumnHeader>
+                        <DataTableColumnHeader tag={"th"}>{i18n.t('Message')}</DataTableColumnHeader>
+                    </DataTableRow>
+                </DataTableHead>
+                <DataTableBody>
+                    {
+                        displayData.map((report, index) => {
+                            return (
+                                <DataTableRow
+                                    key={`import-conflict-${index}`}
+                                >
+                                    <DataTableCell>{report.errorCode}</DataTableCell>
+                                    <DataTableCell>{report.trackerType}</DataTableCell>
+                                    <DataTableCell>{report.uid}</DataTableCell>
+                                    <DataTableCell>{report.message}</DataTableCell>
+                                </DataTableRow>
+                            )
+                        })
+                    }
+                </DataTableBody>
+            </DataTable>
+            <Pagination
+                page={page}
+                rowsPerPage={pageSize}
+                onPageChange={onPageChange}
+                onRowsPerPageChange={onRowsPerPageChange}
+                loading={false} totalPerPage={displayData?.length}/>
+        </>
+    )
+}

src/components/bulkImport/DryRunAndImportSummary.tsx

@@ -0,0 +1,92 @@
+import React, {useState} from 'react'
+import {
+    DataTable,
+    DataTableRow,
+    DataTableHead,
+    DataTableBody,
+    DataTableCell,
+    DataTableColumnHeader
+} from '@dhis2/ui'
+import {ConflictsTable} from "./ConflictsTable";
+import { ApiResponse } from '../../types/bulkImport/Interfaces';
+import { Stats, ValidationReport } from '../../types/generated';
+
+interface ImportSummaryRowProps {
+    status: string
+    reference: string
+    importSummary: Stats
+    conflicts: number
+    hasConflicts: boolean
+    expandedRows: any[]
+    expandedToggle: any
+    validationReport: ValidationReport
+}
+export const ImportSummaryRow = (props: ImportSummaryRowProps): React.ReactElement => {
+    const {status, reference, importSummary, conflicts, hasConflicts, expandedRows, expandedToggle, validationReport} = props
+    return hasConflicts
+        ? (
+        <DataTableRow
+            expanded = {expandedRows.includes(reference)}
+            onExpandToggle={() => expandedToggle(`${reference}`)}
+            expandableContent={<ConflictsTable validationReport={validationReport}/>}
+        >
+            <DataTableCell>{status}</DataTableCell>
+            <DataTableCell>{importSummary?.created}</DataTableCell>
+            <DataTableCell >{importSummary?.updated}</DataTableCell>
+            <DataTableCell>{importSummary?.ignored}</DataTableCell>
+            <DataTableCell>{conflicts}</DataTableCell>
+        </DataTableRow>
+        )
+        : (
+        <DataTableRow>
+            <DataTableCell>{status}</DataTableCell>
+            <DataTableCell>{importSummary?.created}</DataTableCell>
+            <DataTableCell >{importSummary?.updated}</DataTableCell>
+            <DataTableCell>{importSummary?.ignored}</DataTableCell>
+            <DataTableCell>{conflicts}</DataTableCell>
+        </DataTableRow>
+    )
+}
+
+export const ImportSummaryTable = (response: ApiResponse) => {
+    console.log("response: ", response)
+    const {status, stats, validationReport} = response
+    const hasConflicts = validationReport?.errorReports.length > 0
+    const [expandedRows, setExpandedRows] = useState<string[]>([])
+
+    const expandedToggle = (rowId: string) => {
+        if (expandedRows.includes(rowId)) {
+            setExpandedRows(expandedRows.filter((row) => row !== rowId))
+        } else {
+            setExpandedRows([...expandedRows, rowId])
+        }
+    }
+    return (
+        <>
+            <DataTable>
+                <DataTableHead>
+                    <DataTableRow>
+                        { hasConflicts && <DataTableColumnHeader/>}
+                        <DataTableColumnHeader>Status</DataTableColumnHeader>
+                        <DataTableColumnHeader>Imported</DataTableColumnHeader>
+                        <DataTableColumnHeader>Updated</DataTableColumnHeader>
+                        <DataTableColumnHeader>Ignored</DataTableColumnHeader>
+                        <DataTableColumnHeader>Conflicts</DataTableColumnHeader>
+                    </DataTableRow>
+                </DataTableHead>
+                <DataTableBody>
+                    <ImportSummaryRow
+                        status={status}
+                        reference={`import-summary`}
+                        importSummary={stats}
+                        conflicts={0}
+                        hasConflicts={hasConflicts}
+                        expandedRows={expandedRows}
+                        expandedToggle={expandedToggle}
+                        validationReport={validationReport}
+                    />
+                </DataTableBody>
+            </DataTable>
+        </>
+    )
+}