devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ENCOA-281

Browse Source
This commit is contained in:
Carlos-Mesquita
2024-12-13 21:29:54 +00:00
parent fa0c257040
commit bcf3cf0667
4 changed files with 587 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/UserImportSummary/ExcelError.tsx Normal file
View File

@@ -0,0 +1,77 @@
import React from 'react';
import { FiAlertCircle } from "react-icons/fi";
import Dropdown from '../Dropdown';
import { errorsByRows, ExcelError } from '@/utils/excel.errors';
const ParseExcelErrors: React.FC<{ errors: ExcelError[] }> = (props) => {
const errorsByRow = errorsByRows(props.errors);
const ErrorTitle = (row: string) => (
<div className="flex gap-2 items-center w-full">
<FiAlertCircle className="text-red-500 h-5 w-5" />
<h3 className="text-sm font-medium text-red-800">
Errors found in row {row}
</h3>
</div>
);
return (
<div className="space-y-4">
{Object.entries(errorsByRow).map(([row, rowErrors]) => (
<div key={`row-${row}`} className="bg-red-50 rounded-lg">
<Dropdown
customTitle={ErrorTitle(row)}
className="w-full text-left font-semibold flex justify-between items-center p-4"
contentWrapperClassName="px-4 pb-4"
>
<div className="space-y-3">
{rowErrors.required.length > 0 && (
<div className="bg-white/50 rounded border border-red-200 p-2 text-sm text-red-700 hover:bg-white transition-colors">
<div className="font-medium">
Missing values:
</div>
<div className="text-red-600 mt-1 ml-2">
<span>
On columns:&nbsp;
</span>
<span className="font-mono bg-red-100/50 px-1 rounded">
{rowErrors.required.join(', ')}
</span>
</div>
</div>
)}
{rowErrors.other.length > 0 && (
<div className="space-y-2">
{rowErrors.other.map((error, index) => (
<div
key={`validation-${index}`}
className="bg-white/50 rounded border border-red-200 p-2 text-sm text-red-700 hover:bg-white transition-colors"
>
<div className="font-medium">
{error.error}:
</div>
<div className="text-red-600 mt-1 ml-2">
Value
<span className="font-mono bg-red-100/50 px-1 mx-2 rounded">
{error.value}
</span>
in column
<span className="font-mono bg-red-100/50 px-1 mx-2 rounded">
{error.column}
</span>
is invalid!
</div>
</div>
))}
</div>
)}
</div>
</Dropdown>
</div>
))}
</div>
);
};
export default ParseExcelErrors;

298
src/components/UserImportSummary/index.tsx Normal file
View File

@@ -0,0 +1,298 @@
import React, { useState, useMemo } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import {
FaCheckCircle,
FaTimesCircle,
FaExclamationCircle,
FaInfoCircle,
FaUsers,
FaExclamationTriangle
} from 'react-icons/fa';
import { UserImport } from '@/interfaces/IUserImport';
import Modal from '../Modal';
import ParseExcelErrors from './ExcelError';
import { errorsByRows, ExcelError } from '@/utils/excel.errors';
import UserTable from '../UserTable';
interface Props {
parsedExcel: { rows?: any[]; errors?: any[] },
newUsers: UserImport[],
enlistedUsers: UserImport[],
duplicateRows?: { duplicates: DuplicatesMap, count: number }
}
export interface DuplicatesMap {
studentID: Map<string, number[]>;
email: Map<string, number[]>;
passport_id: Map<string, number[]>;
phone: Map<string, number[]>;
}
interface ClassroomCounts {
[key: string]: number;
}
const UserImportSummary: React.FC<Props> = ({ parsedExcel, newUsers, enlistedUsers, duplicateRows }) => {
const [showErrorsModal, setShowErrorsModal] = useState(false);
const [showDuplicatesModal, setShowDuplicatesModal] = useState(false);
const [showEnlistedModal, setShowEnlistedModal] = useState(false);
const [showClassroomModal, setShowClassromModal] = useState(false);
const classroomCounts = useMemo(() => {
return newUsers.reduce((acc: ClassroomCounts, user) => {
const group = user.groupName;
acc[group] = (acc[group] || 0) + 1;
return acc;
}, {});
}, [newUsers]);
const errorCount = Object.entries(errorsByRows(parsedExcel.errors as ExcelError[])).length || 0;
const fieldMapper = {
"studentID": "Student ID",
"passport_id": "Passport/National ID",
"phone": "Phone Number",
"email": "E-mail"
}
return (
<>
<Card>
<CardHeader>
<CardTitle className='flex justify-center font-semibold text-xl'>Import Summary</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex items-center gap-2">
<FaInfoCircle className="h-5 w-5 text-blue-500" />
<span>
{`${parsedExcel.rows?.length} total spreadsheet rows`}
{parsedExcel.rows && parsedExcel.rows.filter(row => row === null).length > 0 && (
<span className="text-gray-500">
{` (${parsedExcel.rows.filter(row => row === null).length} empty)`}
</span>
)}
</span>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
{newUsers.length > 0 ? (
<FaCheckCircle className="h-5 w-5 text-green-500" />
) : (
<FaTimesCircle className="h-5 w-5 text-red-500" />
)}
<span>{`${newUsers.length} new user${newUsers.length > 1 ? "s" : ''} to import`}</span>
</div>
{newUsers.length > 0 && (
<button
onClick={() => setShowClassromModal(true)}
className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
>
View by classroom
</button>
)}
</div>
{enlistedUsers.length > 0 && (
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<FaUsers className="h-5 w-5 text-blue-500" />
<span>{`${enlistedUsers.length} already registered user${enlistedUsers.length > 1 ? "s" : ''}`}</span>
</div>
<button
onClick={() => setShowEnlistedModal(true)}
className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
>
View details
</button>
</div>
)}
{(duplicateRows && duplicateRows.count > 0) && (
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<FaExclamationCircle className="h-5 w-5 text-yellow-500" />
<span>{duplicateRows.count} duplicate entries in file</span>
</div>
<button
onClick={() => setShowDuplicatesModal(true)}
className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
>
View duplicates
</button>
</div>
)}
{errorCount > 0 && (
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<FaTimesCircle className="h-5 w-5 text-red-500" />
<span>{errorCount} invalid rows</span>
</div>
<button
onClick={() => setShowErrorsModal(true)}
className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
>
View errors
</button>
</div>
)}
</div>
{(enlistedUsers.length > 0 || (duplicateRows && duplicateRows.count > 0) || errorCount > 0) && (
<div className="mt-6 rounded-lg border border-red-100 bg-white p-6">
<div className="flex items-start gap-4">
<div className="mt-1">
<FaExclamationTriangle className="h-5 w-5 text-red-400" />
</div>
<div className="flex-1 space-y-3">
<p className="font-medium text-gray-900">
The following will be excluded from import:
</p>
<ul className="space-y-4">
{duplicateRows && duplicateRows.count > 0 && (
<li>
<div className="text-gray-700">
<span className="font-medium">{duplicateRows.count}</span> rows with duplicate values
</div>
<div className="mt-2 space-y-1.5">
{(Object.keys(duplicateRows.duplicates) as Array<keyof DuplicatesMap>).map(field => {
const duplicates = Array.from(duplicateRows.duplicates[field].entries())
.filter((entry) => entry[1].length > 1);
if (duplicates.length === 0) return null;
return (
<div key={field} className="ml-4 text-sm text-gray-600">
<span className="text-gray-500">{field}:</span> rows {
duplicates.map(([_, rows]) => rows.join(', ')).join('; ')
}
</div>
);
})}
</div>
</li>
)}
{errorCount > 0 && (
<li>
<div className="text-gray-700">
<span className="font-medium">{errorCount}</span> rows with invalid or missing information
</div>
<div className="mt-1 ml-4 text-sm text-gray-600">
Rows: {Object.keys(errorsByRows(parsedExcel.errors || [])).join(', ')}
</div>
</li>
)}
</ul>
</div>
</div>
</div>
)}
</CardContent>
</Card>
<Modal isOpen={showErrorsModal} onClose={() => setShowErrorsModal(false)}>
<>
<div className="flex items-center gap-2 mb-6">
<FaTimesCircle className="w-5 h-5 text-red-500" />
<h2 className="text-lg font-semibold text-gray-900">Validation Errors</h2>
</div>
<ParseExcelErrors errors={parsedExcel.errors!} />
</>
</Modal>
<Modal isOpen={showEnlistedModal} onClose={() => setShowEnlistedModal(false)}>
<>
<div className="flex items-center gap-2 mb-6">
<FaUsers className="w-5 h-5 text-blue-500" />
<h2 className="text-lg font-semibold text-gray-900">Already Registered Users</h2>
</div>
<div className="flex w-full flex-col gap-4">
<UserTable users={enlistedUsers} />
</div>
</>
</Modal>
<Modal isOpen={showDuplicatesModal} onClose={() => setShowDuplicatesModal(false)}>
<>
<div className="flex items-center gap-2 mb-6">
<FaExclamationCircle className="w-5 h-5 text-amber-500" />
<h2 className="text-lg font-semibold text-gray-900">Duplicate Entries</h2>
</div>
{duplicateRows &&
< div className="space-y-6">
{(Object.keys(duplicateRows.duplicates) as Array<keyof DuplicatesMap>).map(field => {
const duplicates = Array.from(duplicateRows!.duplicates[field].entries())
.filter((entry): entry is [string, number[]] => entry[1].length > 1);
if (duplicates.length === 0) return null;
return (
<div key={field} className="relative">
<div className="flex items-center gap-2 mb-3">
<h2 className="text-md font-medium text-gray-700">
{fieldMapper[field]} duplicates
</h2>
<span className="text-xs text-gray-500 ml-auto">
{duplicates.length} {duplicates.length === 1 ? 'duplicate' : 'duplicates'}
</span>
</div>
<div className="space-y-2">
{duplicates.map(([value, rows]) => (
<div
key={value}
className="group relative rounded-lg border border-gray-200 bg-gray-50 p-3 hover:bg-gray-100 transition-colors"
>
<div className="flex items-start justify-between">
<div>
<span className="font-medium text-gray-900">{value}</span>
<div className="mt-1 text-sm text-gray-600">
Appears in rows:
<span className="ml-1 text-blue-600 font-medium">
{rows.join(', ')}
</span>
</div>
</div>
<span className="text-xs text-gray-500">
{rows.length} occurrences
</span>
</div>
</div>
))}
</div>
</div>
);
})}
</div>
}
</>
</Modal >
<Modal isOpen={showClassroomModal} onClose={() => setShowClassromModal(false)}>
<>
<div className="flex items-center gap-2 mb-6">
<FaCheckCircle className="w-5 h-5 text-green-500" />
<h2 className="text-lg font-semibold text-gray-900">Students by Classroom</h2>
</div>
<div className="space-y-3">
{Object.entries(classroomCounts).map(([classroom, count]) => (
<div
key={classroom}
className="flex justify-between items-center rounded-lg border border-gray-200 bg-gray-50 p-3 hover:bg-gray-100 transition-colors"
>
<div className="flex items-center gap-2">
<span className="text-gray-700">{classroom}</span>
</div>
<div className="flex items-center gap-1">
<span className="text-sm font-medium text-gray-900">{count}</span>
<span className="text-sm text-gray-500">students</span>
</div>
</div>
))}
</div>
</>
</Modal>
</>
);
};
export default UserImportSummary;

244
src/pages/(admin)/Lists/BatchCreateUser.tsx
View File

@@ -6,14 +6,13 @@ import { toast } from "react-toastify";
import { useFilePicker } from "use-file-picker"; import { useFilePicker } from "use-file-picker";
import readXlsxFile from "read-excel-file"; import readXlsxFile from "read-excel-file";
import Modal from "@/components/Modal"; import Modal from "@/components/Modal";
import { BsQuestionCircleFill } from "react-icons/bs";
import { PermissionType } from "@/interfaces/permissions"; import { PermissionType } from "@/interfaces/permissions";
import moment from "moment"; import moment from "moment";
import { checkAccess, getTypesOfUser } from "@/utils/permissions"; import { checkAccess, getTypesOfUser } from "@/utils/permissions";
import Checkbox from "@/components/Low/Checkbox"; import Checkbox from "@/components/Low/Checkbox";
import ReactDatePicker from "react-datepicker"; import ReactDatePicker from "react-datepicker";
import clsx from "clsx"; import clsx from "clsx";
import countryCodes from "country-codes-list"; import countryCodes, { CountryData } from "country-codes-list";
import { User, Type as UserType } from "@/interfaces/user"; import { User, Type as UserType } from "@/interfaces/user";
import { Type, UserImport } from "../../../interfaces/IUserImport"; import { Type, UserImport } from "../../../interfaces/IUserImport";
import UserTable from "../../../components/UserTable"; import UserTable from "../../../components/UserTable";
@@ -22,6 +21,7 @@ import Select from "@/components/Low/Select";
import { IoInformationCircleOutline } from "react-icons/io5"; import { IoInformationCircleOutline } from "react-icons/io5";
import { FaFileDownload } from "react-icons/fa"; import { FaFileDownload } from "react-icons/fa";
import { HiOutlineDocumentText } from "react-icons/hi"; import { HiOutlineDocumentText } from "react-icons/hi";
import UserImportSummary, { DuplicatesMap } from "@/components/UserImportSummary";
const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/); const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
@@ -71,11 +71,14 @@ interface Props {
onFinish: () => void; onFinish: () => void;
} }
export default function BatchCreateUser({ user, entities = [], permissions, onFinish }: Props) { export default function BatchCreateUser({ user, entities = [], permissions, onFinish }: Props) {
const [infos, setInfos] = useState<UserImport[]>([]); const [infos, setInfos] = useState<UserImport[]>([]);
const [parsedExcel, setParsedExcel] = useState<{ rows?: any[]; errors?: any[] }>({ rows: undefined, errors: undefined });
const [duplicatedUsers, setDuplicatedUsers] = useState<UserImport[]>([]); const [duplicatedUsers, setDuplicatedUsers] = useState<UserImport[]>([]);
const [newUsers, setNewUsers] = useState<UserImport[]>([]); const [newUsers, setNewUsers] = useState<UserImport[]>([]);
const [duplicatedRows, setDuplicatedRows] = useState<{ duplicates: DuplicatesMap, count: number }>();
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [expiryDate, setExpiryDate] = useState<Date | null>( const [expiryDate, setExpiryDate] = useState<Date | null>(
@@ -96,61 +99,187 @@ export default function BatchCreateUser({ user, entities = [], permissions, onFi
if (!isExpiryDateEnabled) setExpiryDate(null); if (!isExpiryDateEnabled) setExpiryDate(null);
}, [isExpiryDateEnabled]); }, [isExpiryDateEnabled]);
const schema = {
'First Name': {
prop: 'firstName',
type: String,
required: true,
validate: (value: string) => {
if (!value || value.trim() === '') {
throw new Error('First Name cannot be empty')
}
return true
}
},
'Last Name': {
prop: 'lastName',
type: String,
required: true,
validate: (value: string) => {
if (!value || value.trim() === '') {
throw new Error('Last Name cannot be empty')
}
return true
}
},
'Student ID': {
prop: 'studentID',
type: String,
required: true,
validate: (value: string) => {
if (!value || value.trim() === '') {
throw new Error('Student ID cannot be empty')
}
return true
}
},
'Passport/National ID': {
prop: 'passport_id',
type: String,
required: true,
validate: (value: string) => {
if (!value || value.trim() === '') {
throw new Error('Passport/National ID cannot be empty')
}
return true
}
},
'E-mail': {
prop: 'email',
required: true,
type: (value: any) => {
if (!value || value.trim() === '') {
throw new Error('Email cannot be empty')
}
if (!EMAIL_REGEX.test(value.trim())) {
throw new Error('Invalid Email')
}
return value
}
},
'Phone Number': {
prop: 'phone',
type: Number,
required: true,
validate: (value: number) => {
if (value === null || value === undefined || String(value).trim() === '') {
throw new Error('Phone Number cannot be empty')
}
return true
}
},
'Classroom Name': {
prop: 'group',
type: String,
required: true,
validate: (value: string) => {
if (!value || value.trim() === '') {
throw new Error('Classroom Name cannot be empty')
}
return true
}
},
'Country': {
prop: 'country',
type: (value: any) => {
if (!value || value.trim() === '') {
throw new Error('Country cannot be empty')
}
const validCountry = countryCodes.findOne("countryCode" as any, value.toUpperCase()) ||
countryCodes.all().find((x) => x.countryNameEn.toLowerCase() === value.toLowerCase());
if (!validCountry) {
throw new Error('Invalid Country/Country Code')
}
return validCountry;
},
required: true
}
}
useEffect(() => { useEffect(() => {
if (filesContent.length > 0) { if (filesContent.length > 0) {
const file = filesContent[0]; const file = filesContent[0];
readXlsxFile(file.content).then((rows) => { readXlsxFile(
try { file.content, { schema, ignoreEmptyRows: false })
const information = uniqBy( .then((data) => {
rows setParsedExcel(data)
.map((row) => { });
const [firstName, lastName, studentID, passport_id, email, phone, group, country] = row as string[];
const countryItem =
countryCodes.findOne("countryCode" as any, country.toUpperCase()) ||
countryCodes.all().find((x) => x.countryNameEn.toLowerCase() === country.toLowerCase());
return EMAIL_REGEX.test(email.toString().trim())
? {
email: email.toString().trim().toLowerCase(),
name: `${firstName ?? ""} ${lastName ?? ""}`.trim(),
type: type,
passport_id: passport_id?.toString().trim() || undefined,
groupName: group,
studentID,
entity,
demographicInformation: {
country: countryItem?.countryCode,
passport_id: passport_id?.toString().trim() || undefined,
phone: phone.toString(),
},
}
: undefined;
})
.filter((x) => !!x) as typeof infos,
(x) => x.email,
);
if (information.length === 0) {
toast.error(
"Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
);
return clear();
}
setInfos(information);
} catch (e) {
console.log(e)
toast.error(
"Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
);
return clear();
}
});
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [filesContent]); }, [filesContent]);
useEffect(() => {
if (parsedExcel.rows) {
const duplicates: DuplicatesMap = {
studentID: new Map(),
email: new Map(),
passport_id: new Map(),
phone: new Map()
};
const duplicateValues = new Set<string>();
const duplicateRowIndices = new Set<number>();
const errorRowIndices = new Set(
parsedExcel.errors?.map(error => error.row) || []
);
parsedExcel.rows.forEach((row, index) => {
if (!errorRowIndices.has(index + 2)) {
(Object.keys(duplicates) as Array<keyof DuplicatesMap>).forEach(field => {
if (row !== null) {
const value = row[field];
if (value) {
if (!duplicates[field].has(value)) {
duplicates[field].set(value, [index + 2]);
} else {
const existingRows = duplicates[field].get(value);
if (existingRows) {
existingRows.push(index + 2);
duplicateValues.add(value);
existingRows.forEach(rowNum => duplicateRowIndices.add(rowNum));
}
}
}
}
});
}
});
const infos = parsedExcel.rows
.map((row, index) => {
if (errorRowIndices.has(index + 2) || duplicateRowIndices.has(index + 2) || row === null) {
return undefined;
}
const { firstName, lastName, studentID, passport_id, email, phone, group, country } = row;
if (!email || !EMAIL_REGEX.test(email.toString().trim())) {
return undefined;
}
return {
email: email.toString().trim().toLowerCase(),
name: `${firstName ?? ""} ${lastName ?? ""}`.trim(),
type: type,
passport_id: passport_id?.toString().trim() || undefined,
groupName: group,
studentID,
entity,
demographicInformation: {
country: country?.countryCode,
passport_id: passport_id?.toString().trim() || undefined,
phone: phone.toString(),
},
} as UserImport;
})
.filter((item): item is UserImport => item !== undefined);
setDuplicatedRows({ duplicates, count: duplicateRowIndices.size });
setInfos(infos);
setNewUsers([]);
setDuplicatedUsers([]);
}
}, [entity, parsedExcel, type]);
useEffect(() => { useEffect(() => {
const crossReferenceEmails = async () => { const crossReferenceEmails = async () => {
try { try {
@@ -185,7 +314,7 @@ export default function BatchCreateUser({ user, entities = [], permissions, onFi
if (!confirm(`You are about to ${[newUsersSentence, existingUsersSentence].filter((x) => !!x).join(" and ")}, are you sure you want to continue?`)) if (!confirm(`You are about to ${[newUsersSentence, existingUsersSentence].filter((x) => !!x).join(" and ")}, are you sure you want to continue?`))
return; return;
Promise.all(newUsers.map(async (u) => await axios.post(`/api/invites`, {to: u.id, entity, from: user.id}))) Promise.all(newUsers.map(async (u) => await axios.post(`/api/invites`, { to: u.id, entity, from: user.id })))
.then(() => toast.success(`Successfully invited ${newUsers.length} registered student(s)!`)) .then(() => toast.success(`Successfully invited ${newUsers.length} registered student(s)!`))
.finally(() => { .finally(() => {
if (newUsers.length === 0) setIsLoading(false); if (newUsers.length === 0) setIsLoading(false);
@@ -246,7 +375,7 @@ export default function BatchCreateUser({ user, entities = [], permissions, onFi
be an Excel .xlsx document. be an Excel .xlsx document.
</li> </li>
<li className="text-gray-700 list-disc"> <li className="text-gray-700 list-disc">
only have a single spreadsheet with only the following 8 columns in the <b>same order</b>: only have a single spreadsheet with the following <b>exact same name</b> columns:
<div className="py-4 pr-4"> <div className="py-4 pr-4">
<table className="w-full bg-white"> <table className="w-full bg-white">
<thead> <thead>
@@ -281,7 +410,7 @@ export default function BatchCreateUser({ user, entities = [], permissions, onFi
all already registered e-mails will be ignored. all already registered e-mails will be ignored.
</li> </li>
<li className="text-gray-700 list-disc"> <li className="text-gray-700 list-disc">
the spreadsheet may have a header row with the format above, however, it is not necessary as long the columns are in the <b>right order</b>. all rows which contain duplicate values in the columns: &quot;Student ID&quot;, &quot;Passport/National ID&quot;, &quot;E-mail&quot;, will be ignored.
</li> </li>
<li className="text-gray-700 list-disc"> <li className="text-gray-700 list-disc">
all of the e-mails in the file will receive an e-mail to join EnCoach with the role selected below. all of the e-mails in the file will receive an e-mail to join EnCoach with the role selected below.
@@ -380,21 +509,16 @@ export default function BatchCreateUser({ user, entities = [], permissions, onFi
))} ))}
</select> </select>
)} )}
{parsedExcel.rows !== undefined && <UserImportSummary parsedExcel={parsedExcel} newUsers={newUsers} enlistedUsers={duplicatedUsers} duplicateRows={duplicatedRows} />}
{newUsers.length !== 0 && ( {newUsers.length !== 0 && (
<div className="flex w-full flex-col gap-4"> <div className="flex w-full flex-col gap-4">
<span className="text-mti-gray-dim text-base font-normal">New Users:</span> <span className="text-mti-gray-dim text-base font-normal">New Users:</span>
<UserTable users={newUsers} /> <UserTable users={newUsers} />
</div> </div>
)} )}
{duplicatedUsers.length !== 0 && (
<div className="flex w-full flex-col gap-4">
<span className="text-mti-gray-dim text-base font-normal">Duplicated Users:</span>
<UserTable users={duplicatedUsers} />
</div>
)}
{(duplicatedUsers.length !== 0 && newUsers.length === 0) && <span className="text-red-500 font-bold">The imported .csv only contains duplicated users!</span>} {(duplicatedUsers.length !== 0 && newUsers.length === 0) && <span className="text-red-500 font-bold">The imported .csv only contains duplicated users!</span>}
<Button className="my-auto mt-4" onClick={makeUsers} disabled={newUsers.length === 0}> <Button className="my-auto mt-4" onClick={makeUsers} disabled={newUsers.length === 0}>
Create {newUsers.length !== 0 ? `${newUsers.length} New Users` : ''} Create {newUsers.length !== 0 ? `${newUsers.length} new user${newUsers.length > 1 ? 's' : ''}` : ''}
</Button> </Button>
</div> </div>
</> </>

27
src/utils/excel.errors.ts Normal file
View File

@@ -0,0 +1,27 @@
export interface ExcelError {
type: string;
value: any;
error: string;
reason: string;
row: number;
column: string;
}
export const errorsByRows = (errors: ExcelError[] ) => {
return errors.reduce((acc, error) => {
if (!acc[error.row]) {
acc[error.row] = {
required: [],
other: []
};
}
if (error.error === 'required') {
acc[error.row].required.push(error.column);
} else {
acc[error.row].other.push(error);
}
return acc;
}, {} as Record<number, { required: string[], other: ExcelError[] }>);
}