Untitled

 avatar
unknown
plain_text
8 months ago
7.8 kB
4
Indexable
needed by validation is not working properly, can you use moment or something else to check the difference between the todays date and needed by date so that it throws error if needed by date is in the past .
ex: Moment(draftData.dueDT).format('MM/DD/yyyy');

import React, { useRef, useState } from 'react';
import {
    SimpleFileUpload,
    Label,
    Button,
    Group,
    Section,
    ListItem,
    List,
} from '@d-lift/uxcomponents';
import * as XLSX from 'xlsx';
import ConstantKeys from '@/Constants/ConstantKeys';
import webService from '@/Services/WebService';

const ExcelUpload = () => {
    const [status, setStatus] = useState('initial');
    const [uploadedFiles, setUploadedFiles] = useState([]);
    const fileInputRef = useRef(null);
    const [selectedFile, setSelectedFile] = useState(null);

    const handleFileChange = (e) => {
        if (Array.isArray(e) && e.length > 0) {
            const newFile = e[0];
            setSelectedFile(newFile);
            handleUpload(newFile);
        } else {
            console.log('No file selected');
        }
    };

    const handleUpload = async (file) => {
        try {
            if (!file) {
                console.error('No file selected');
                setStatus('fail');
                return;
            }

            console.log('Processing file:', file);
            const reader = new FileReader();
            reader.onload = (event) => {
                const data = new Uint8Array(event.target.result);
                const workbook = XLSX.read(data, { type: 'array' });
                const firstSheetName = workbook.SheetNames[0];
                const worksheet = workbook.Sheets[firstSheetName];
                const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

                const validationResult = validateData(jsonData);
                if (validationResult.isValid) {
                    convertToJSONAndUpload(jsonData);
                } else {
                    console.log('validationResult:', validationResult);
                    console.log('errors:', validationResult.errors);

                    Lift.Application.Notification.error(`${validationResult.errors}`);
                    setStatus('fail');
                }
            };
            reader.readAsArrayBuffer(file);

            setUploadedFiles((prevFiles) => [
                ...prevFiles,
                {
                    id: Math.random() * 100 + 1,
                    name: file.name,
                },
            ]);

            setStatus('success');
        } catch (error) {
            console.error(error);
            setStatus('fail');
        }
    };

    const validateData = (data) => {
        let isValid = true;
        let errors = [];

        const headers = data[0].map((header) => header.toLowerCase());
        const requiredFields = ['rfi title', 'question 1', 'requested by', 'needed by', 'offering'];

        // Check mandatory headers
        requiredFields.forEach((field) => {
            if (!headers.includes(field)) {
                isValid = false;
                errors.push(`Missing mandatory field: ${field}`);
            }
        });

        // Validate each row
        data.slice(1).forEach((row, rowIndex) => {
            // Check mandatory fields
            requiredFields.forEach((field) => {
                const fieldIndex = headers.indexOf(field);
                if (row[fieldIndex] === '' || row[fieldIndex] === undefined) {
                    isValid = false;
                    errors.push(`Error in row ${rowIndex + 2}: ${field} is a mandatory field`);
                }
                if (field === 'needed by') {
                    const date = new Date(row[fieldIndex]);
                    if (date < new Date()) {
                        isValid = false;
                        errors.push(
                            `Error in row ${rowIndex + 2}: ${field} can not be in the past`,
                        );
                    }
                }
            });
        });

        return { isValid, errors };
    };

    const convertToJSONAndUpload = (data) => {
        const jsonData = data.slice(1).map((row, index) => {
            const rowData = {};
            data[0].forEach((header, i) => {
                rowData[header] = row[i];
            });
            return rowData;
        });

        console.log('jsonData:', jsonData);
        //callAPIToInsertData(jsonData);
    };

    const callAPIToInsertData = async (data) => {
        try {
            Lift.spinner.show();
            const requestFromExcel = {
                //if you need to edit the format of data for request
            };

            const response = await webService.createRFIRequest({
                requestBody: data,
            });

            if (response.message.code === ConstantKeys.RESPONSE_CODES.success) {
                Lift.Application.Notification.success(
                    ConstantKeys.NOTIFICATION.MSG.SUCCESS.EXCEL_UPLOAD_SUCCESS,
                );
            }
        } catch (error) {
            Lift.Application.Notification.error(
                ConstantKeys.NOTIFICATION.MSG.ERR.EXCEL_UPLOAD_FAILURE,
            );
        } finally {
            Lift.spinner.hide();
        }
    };

    return (
        <>
            <div className="ux-rfi-attachment-container ux-rfi-green-border">
                <Label
                    className="mb-0"
                    model="AddAttachments.fileList"
                    labelKey="attachments"></Label>
                <Section className="pt-4">
                    <List>
                        {uploadedFiles.length > 0 ? (
                            uploadedFiles.map((file) => (
                                <ListItem key={file.id} iconKey={null}>
                                    {file.name}
                                </ListItem>
                            ))
                        ) : (
                            <ListItem iconKey={null} labelKey="empty_err"></ListItem>
                        )}
                    </List>
                    {/* {errors.length > 0 && (
                        <Section className="pt-4">
                            <Label
                                className="mb-0"
                                model="AddAttachments.errorList"
                                labelKey="errors"></Label>
                            <List>
                                {errors.map((error, index) => (
                                    <ListItem key={index} iconKey={null}>
                                        {error}
                                    </ListItem>
                                ))}
                            </List>
                        </Section>
                    )} */}
                    <SimpleFileUpload
                        model="AddAttachments.uploadedFiles"
                        allowDragAndDrop={false}
                        inputDisplayType="custom"
                        ref={fileInputRef}
                        style={{ display: 'none' }}
                        onDropAccepted={handleFileChange}
                        accept=".xls,.xlsx">
                        <Button
                            size="small"
                            click={() => fileInputRef.current && fileInputRef.current.click()}
                            className="ux-rfi-green-button">
                            <Group width="1,10">
                                <i className="fa fa-plus" aria-hidden="true"></i>Add Attachment
                            </Group>
                        </Button>
                    </SimpleFileUpload>
                </Section>
            </div>
        </>
    );
};

export default ExcelUpload;
Editor is loading...
Leave a Comment