686 lines
29 KiB
TypeScript
686 lines
29 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import Button from "../Low/Button";
|
|
import Modal from "../Modal";
|
|
import { useFilePicker } from "use-file-picker";
|
|
import readXlsxFile from "read-excel-file";
|
|
import countryCodes from "country-codes-list";
|
|
import { ExcelUserDuplicatesMap } from "../ImportSummaries/User";
|
|
import { UserImport } from "@/interfaces/IUserImport";
|
|
import axios from "axios";
|
|
import { toast } from "react-toastify";
|
|
import { HiOutlineDocumentText } from "react-icons/hi";
|
|
import { IoInformationCircleOutline } from "react-icons/io5";
|
|
import { FaFileDownload } from "react-icons/fa";
|
|
import clsx from "clsx";
|
|
import { checkAccess } from "@/utils/permissions";
|
|
import { Group, User } from "@/interfaces/user";
|
|
import UserTable from "../Tables/UserTable";
|
|
import ClassroomImportSummary from "../ImportSummaries/Classroom";
|
|
import Select from "../Low/Select";
|
|
import { EntityWithRoles } from "@/interfaces/entity";
|
|
import { useRouter } from "next/router";
|
|
|
|
|
|
const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
|
|
|
|
export interface DuplicateClassroom {
|
|
rowNumber: number;
|
|
email: string;
|
|
classroom: string;
|
|
}
|
|
|
|
export interface Mismatches {
|
|
email: string;
|
|
rows: number[];
|
|
mismatches: {
|
|
field: string;
|
|
values: any[];
|
|
}[];
|
|
}
|
|
|
|
export interface ClassroomTransferState {
|
|
stage: number;
|
|
parsedExcel: { rows?: any[]; errors?: any[] } | undefined;
|
|
duplicatedRows: DuplicateClassroom[];
|
|
userMismatches: Mismatches[];
|
|
imports: UserImport[];
|
|
notFoundUsers: UserImport[];
|
|
otherEntityUsers: UserImport[];
|
|
alreadyInClass: UserImport[];
|
|
notOwnedClassrooms: string[];
|
|
validClassrooms: string[];
|
|
}
|
|
|
|
|
|
const StudentClassroomTransfer: React.FC<{ user: User; entities?: EntityWithRoles[], onFinish: () => void; }> = ({ user, entities = [], onFinish }) => {
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [entity, setEntity] = useState((entities || [])[0]?.id || undefined);
|
|
const [showHelp, setShowHelp] = useState(false);
|
|
|
|
const [classroomTransferState, setClassroomTransferState] = useState<ClassroomTransferState>({
|
|
stage: 0,
|
|
parsedExcel: undefined,
|
|
duplicatedRows: [],
|
|
userMismatches: [],
|
|
imports: [],
|
|
notFoundUsers: [],
|
|
otherEntityUsers: [],
|
|
alreadyInClass: [],
|
|
notOwnedClassrooms: [],
|
|
validClassrooms: []
|
|
})
|
|
|
|
const router = useRouter();
|
|
|
|
const { openFilePicker, filesContent, clear } = useFilePicker({
|
|
accept: ".xlsx",
|
|
multiple: false,
|
|
readAs: "ArrayBuffer",
|
|
});
|
|
|
|
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(() => {
|
|
if (filesContent.length > 0) {
|
|
const file = filesContent[0];
|
|
readXlsxFile(
|
|
file.content, { schema, ignoreEmptyRows: false })
|
|
.then((data) => {
|
|
setClassroomTransferState((prev) => ({ ...prev, parsedExcel: data }))
|
|
});
|
|
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [filesContent, entity]);
|
|
|
|
// Stage 1 - Excel Parsing
|
|
// - Group rows by emails
|
|
// - Find duplicate rows (email + classroom)
|
|
// - Find email and other fields mismatch except classroom
|
|
// - Parsing errors
|
|
// - Set the data
|
|
useEffect(() => {
|
|
if (classroomTransferState.parsedExcel && classroomTransferState.parsedExcel.rows) {
|
|
const errorRowIndices = new Set(
|
|
classroomTransferState.parsedExcel.errors?.map(error => error.row) || []
|
|
);
|
|
|
|
const emailClassroomMap = new Map<string, Map<string, number[]>>(); // email -> (group -> row numbers)
|
|
const emailRowMap = new Map<string, Map<number, any>>(); // email -> (row number -> row data)
|
|
|
|
// Group rows by email and assign row data
|
|
classroomTransferState.parsedExcel.rows.forEach((row, index) => {
|
|
const rowNum = index + 2;
|
|
if (!errorRowIndices.has(rowNum) && row !== null) {
|
|
const email = row.email.toString().trim().toLowerCase();
|
|
const classroom = row.group;
|
|
|
|
if (!emailRowMap.has(email)) {
|
|
emailRowMap.set(email, new Map());
|
|
}
|
|
emailRowMap.get(email)!.set(rowNum, row);
|
|
|
|
if (!emailClassroomMap.has(email)) {
|
|
emailClassroomMap.set(email, new Map());
|
|
}
|
|
const classroomMap = emailClassroomMap.get(email)!;
|
|
if (!classroomMap.has(classroom)) {
|
|
classroomMap.set(classroom, []);
|
|
}
|
|
classroomMap.get(classroom)!.push(rowNum);
|
|
}
|
|
});
|
|
|
|
const duplicatedRows: DuplicateClassroom[] = [];
|
|
const userMismatches: Mismatches[] = [];
|
|
const validRows = [];
|
|
|
|
for (const [email, classroomMap] of emailClassroomMap) {
|
|
const rowDataMap = emailRowMap.get(email)!;
|
|
const allRowsForEmail = Array.from(rowDataMap.keys());
|
|
|
|
// Check for duplicates (same email + classroom)
|
|
for (const [classroom, rowNumbers] of classroomMap) {
|
|
if (rowNumbers.length > 1) {
|
|
rowNumbers.forEach(row => duplicatedRows.push({
|
|
rowNumber: row,
|
|
email,
|
|
classroom
|
|
}));
|
|
} else {
|
|
validRows.push(rowNumbers[0]);
|
|
}
|
|
}
|
|
|
|
// Check for mismatches in other fields
|
|
if (allRowsForEmail.length > 1) {
|
|
const fields = ['firstName', 'lastName', 'studentID', 'passport_id', 'phone'];
|
|
const mismatches: {field: string; values: any[]}[] = [];
|
|
|
|
fields.forEach(field => {
|
|
const uniqueValues = new Set(
|
|
allRowsForEmail.map(rowNum => rowDataMap.get(rowNum)![field])
|
|
);
|
|
if (uniqueValues.size > 1) {
|
|
mismatches.push({
|
|
field,
|
|
values: Array.from(uniqueValues)
|
|
});
|
|
}
|
|
});
|
|
|
|
if (mismatches.length > 0) {
|
|
userMismatches.push({
|
|
email,
|
|
rows: allRowsForEmail,
|
|
mismatches
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
const imports = validRows
|
|
.map(rowNum => classroomTransferState.parsedExcel!.rows![rowNum - 2])
|
|
.filter((row): row is any => row !== null)
|
|
.map(row => ({
|
|
email: row.email.toString().trim().toLowerCase(),
|
|
name: `${row.firstName ?? ""} ${row.lastName ?? ""}`.trim(),
|
|
passport_id: row.passport_id?.toString().trim() || undefined,
|
|
groupName: row.group,
|
|
studentID: row.studentID,
|
|
demographicInformation: {
|
|
country: row.country?.countryCode,
|
|
passport_id: row.passport_id?.toString().trim() || undefined,
|
|
phone: row.phone.toString(),
|
|
},
|
|
entity: undefined,
|
|
type: undefined
|
|
} as UserImport));
|
|
|
|
// On import reset state except excel parsing
|
|
setClassroomTransferState((prev) => ({
|
|
...prev,
|
|
stage: 1,
|
|
duplicatedRows,
|
|
userMismatches,
|
|
imports,
|
|
notFoundUsers: [],
|
|
otherEntityUsers: [],
|
|
notOwnedClassrooms: [],
|
|
validClassrooms: [],
|
|
}));
|
|
}
|
|
}, [classroomTransferState.parsedExcel, entity]);
|
|
|
|
// Stage 2 - Student Filter
|
|
// - Filter non existant students
|
|
// - Filter non entity students
|
|
// - Filter already in classroom students
|
|
useEffect(() => {
|
|
const emails = classroomTransferState.imports.map((i) => i.email);
|
|
const crossRefUsers = async () => {
|
|
try {
|
|
const { data: nonExistantUsers } = await axios.post("/api/users/controller?op=dontExist", { emails });
|
|
const { data: nonEntityUsers } = await axios.post("/api/users/controller?op=entityCheck", { entities: user.entities, emails });
|
|
const { data: alreadyPlaced } = await axios.post("/api/users/controller?op=crossRefClassrooms", {
|
|
sets: classroomTransferState.imports.map((info) => ({
|
|
email: info.email,
|
|
classroom: info.groupName
|
|
})),
|
|
entity
|
|
});
|
|
|
|
const excludeEmails = new Set([
|
|
...nonExistantUsers,
|
|
...nonEntityUsers.map((o: any) => o.email),
|
|
...alreadyPlaced
|
|
]);
|
|
|
|
const filteredImports = classroomTransferState.imports.filter(i => !excludeEmails.has(i.email));
|
|
|
|
const nonExistantEmails = new Set(nonExistantUsers);
|
|
const nonEntityEmails = new Set(nonEntityUsers.map((o: any) => o.email));
|
|
const alreadyPlacedEmails = new Set(alreadyPlaced);
|
|
|
|
setClassroomTransferState((prev) => ({
|
|
...prev,
|
|
stage: 2,
|
|
imports: filteredImports,
|
|
notFoundUsers: classroomTransferState.imports.filter(i => nonExistantEmails.has(i.email)),
|
|
otherEntityUsers: classroomTransferState.imports.filter(i => nonEntityEmails.has(i.email))
|
|
.map(user => {
|
|
const nonEntityUser = nonEntityUsers.find((o: any) => o.email === user.email);
|
|
return {
|
|
...user,
|
|
entityLabels: nonEntityUser?.names || []
|
|
};
|
|
}),
|
|
alreadyInClass: classroomTransferState.imports.filter(i => alreadyPlacedEmails.has(i.email)),
|
|
}));
|
|
} catch (error) {
|
|
toast.error("Something went wrong, please try again later!");
|
|
}
|
|
}
|
|
|
|
if (classroomTransferState.imports.length > 0 && classroomTransferState.stage === 1) {
|
|
crossRefUsers();
|
|
}
|
|
|
|
}, [classroomTransferState.imports, user.entities, classroomTransferState.stage, entity])
|
|
|
|
// Stage 3 - Classroom Filter
|
|
// - See if there are classrooms with same name but different admin
|
|
// - Find which new classrooms need to be created
|
|
useEffect(() => {
|
|
const crossRefClassrooms = async () => {
|
|
const classrooms = Array.from(new Set(classroomTransferState.imports.map((i) => i.groupName)));
|
|
|
|
try {
|
|
const { data: notOwnedClassroomsSameName } = await axios.post("/api/groups/controller?op=crossRefOwnership", {
|
|
userId: user.id,
|
|
classrooms
|
|
});
|
|
|
|
setClassroomTransferState((prev) => ({
|
|
...prev,
|
|
stage: 3,
|
|
notOwnedClassrooms: notOwnedClassroomsSameName,
|
|
validClassrooms: Array.from(classrooms).filter(
|
|
(name) => !new Set(notOwnedClassroomsSameName).has(name)
|
|
)
|
|
}))
|
|
} catch (error) {
|
|
toast.error("Something went wrong, please try again later!");
|
|
}
|
|
};
|
|
if (classroomTransferState.imports.length > 0 && classroomTransferState.stage === 2) {
|
|
crossRefClassrooms();
|
|
}
|
|
}, [classroomTransferState.imports, classroomTransferState.stage, user.id, entity])
|
|
|
|
|
|
const clearAndReset = () => {
|
|
setIsLoading(false);
|
|
setClassroomTransferState({
|
|
stage: 0,
|
|
parsedExcel: undefined,
|
|
duplicatedRows: [],
|
|
userMismatches: [],
|
|
imports: [],
|
|
notFoundUsers: [],
|
|
otherEntityUsers: [],
|
|
alreadyInClass: [],
|
|
notOwnedClassrooms: [],
|
|
validClassrooms: []
|
|
});
|
|
clear();
|
|
};
|
|
|
|
|
|
const createNewGroupsAndAssignStudents = async () => {
|
|
if (!confirm(`You are about to assign ${classroomTransferState.imports.length} to new classrooms, are you sure you want to continue?`)) {
|
|
return;
|
|
}
|
|
|
|
if (classroomTransferState.imports.length === 0) {
|
|
clearAndReset();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setIsLoading(true);
|
|
|
|
const getIds = async () => {
|
|
try {
|
|
const { data: emailIdMap } = await axios.post("/api/users/controller?op=getIds", {
|
|
emails: classroomTransferState.imports.map((u) => u.email)
|
|
});
|
|
|
|
return classroomTransferState.imports.map(importUser => {
|
|
const matchingUser = emailIdMap.find((mapping: any) => mapping.email === importUser.email);
|
|
return {
|
|
...importUser,
|
|
id: matchingUser?.id || undefined
|
|
};
|
|
});
|
|
} catch (error) {
|
|
toast.error("Something went wrong, please try again later!");
|
|
}
|
|
};
|
|
|
|
const imports = await getIds();
|
|
|
|
if (!imports) return;
|
|
|
|
await axios.post("/api/groups/controller?op=deletePriorEntitiesGroups", {
|
|
ids: imports.map((u) => u.id),
|
|
entity
|
|
});
|
|
|
|
await axios.post("/api/users/controller?op=assignToEntity", {
|
|
ids: imports.map((u) => u.id),
|
|
entity
|
|
});
|
|
|
|
const { data: existingGroupsMap } = await axios.post("/api/groups/controller?op=existantGroupIds", {
|
|
names: classroomTransferState.validClassrooms
|
|
});
|
|
|
|
const groupedUsers = imports.reduce((acc, user) => {
|
|
if (!acc[user.groupName]) {
|
|
acc[user.groupName] = [];
|
|
}
|
|
acc[user.groupName].push(user);
|
|
return acc;
|
|
}, {} as Record<string, UserImport[]>);
|
|
|
|
// ##############
|
|
// # New Groups #
|
|
// ##############
|
|
const newGroupUsers = Object.fromEntries(
|
|
Object.entries(groupedUsers)
|
|
.filter(([groupName]) =>
|
|
classroomTransferState.validClassrooms.includes(groupName) &&
|
|
!existingGroupsMap[groupName]
|
|
)
|
|
);
|
|
|
|
const createGroupPromises = Object.entries(newGroupUsers).map(([groupName, users]) => {
|
|
const groupData: Partial<Group> = {
|
|
admin: user.id,
|
|
name: groupName,
|
|
participants: users.map(user => user.id),
|
|
entity: entity
|
|
};
|
|
return axios.post('/api/groups', groupData);
|
|
});
|
|
|
|
// ###################
|
|
// # Existant Groups #
|
|
// ###################
|
|
const allExistingUsers = Object.fromEntries(
|
|
Object.entries(groupedUsers)
|
|
.filter(([groupName]) =>
|
|
!classroomTransferState.validClassrooms.includes(groupName) ||
|
|
existingGroupsMap[groupName]
|
|
)
|
|
);
|
|
|
|
let updatePromises: Promise<any>[] = [];
|
|
|
|
if (Object.keys(allExistingUsers).length > 0) {
|
|
const { data: { groups: groupNameToId, users: userEmailToId } } = await axios.post('/api/groups/controller?op=getIds', {
|
|
names: Object.keys(allExistingUsers),
|
|
userEmails: Object.values(allExistingUsers).flat().map(user => user.email)
|
|
});
|
|
|
|
const existingGroupsWithIds = Object.entries(allExistingUsers).reduce((acc, [groupName, users]) => {
|
|
const groupId = groupNameToId[groupName];
|
|
if (groupId) {
|
|
acc[groupId] = users;
|
|
}
|
|
return acc;
|
|
}, {} as Record<string, UserImport[]>);
|
|
|
|
updatePromises = Object.entries(existingGroupsWithIds).map(([groupId, users]) => {
|
|
const userIds = users.map(user => userEmailToId[user.email]);
|
|
return axios.patch(`/api/groups/${groupId}`, {
|
|
participants: userIds
|
|
});
|
|
});
|
|
}
|
|
|
|
await Promise.all([
|
|
...createGroupPromises,
|
|
...updatePromises
|
|
]);
|
|
|
|
toast.success(`Successfully assigned all ${classroomTransferState.imports.length} user(s)!`);
|
|
router.replace("/classrooms");
|
|
onFinish();
|
|
} catch (error) {
|
|
console.error(error);
|
|
toast.error("Something went wrong, please try again later!");
|
|
} finally {
|
|
clearAndReset();
|
|
}
|
|
};
|
|
|
|
const handleTemplateDownload = () => {
|
|
const fileName = "UsersTemplate.xlsx";
|
|
const url = `https://firebasestorage.googleapis.com/v0/b/encoach-staging.appspot.com/o/import_templates%2F${fileName}?alt=media&token=b771a535-bf95-4060-889c-a086df65d480`;
|
|
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
|
|
link.download = fileName;
|
|
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Modal isOpen={showHelp} onClose={() => setShowHelp(false)}>
|
|
<>
|
|
<div className="flex font-bold text-xl justify-center text-gray-700"><span>Excel File Format</span></div>
|
|
<div className="mt-4 flex flex-col gap-4">
|
|
<div className="flex flex-col gap-3 bg-gray-100 rounded-lg p-4">
|
|
<div className="flex items-center gap-2">
|
|
<HiOutlineDocumentText className={`w-5 h-5 text-mti-purple-light`} />
|
|
<h2 className="text-lg font-semibold">
|
|
The uploaded document must:
|
|
</h2>
|
|
</div>
|
|
<ul className="flex flex-col pl-10 gap-2">
|
|
<li className="text-gray-700 list-disc">
|
|
be an Excel .xlsx document.
|
|
</li>
|
|
<li className="text-gray-700 list-disc">
|
|
only have a single spreadsheet with the following <b>exact same name</b> columns:
|
|
<div className="py-4 pr-4">
|
|
<table className="w-full bg-white">
|
|
<thead>
|
|
<tr>
|
|
<th className="border border-neutral-200 px-2 py-1">First Name</th>
|
|
<th className="border border-neutral-200 px-2 py-1">Last Name</th>
|
|
<th className="border border-neutral-200 px-2 py-1">Student ID</th>
|
|
<th className="border border-neutral-200 px-2 py-1">Passport/National ID</th>
|
|
<th className="border border-neutral-200 px-2 py-1">E-mail</th>
|
|
<th className="border border-neutral-200 px-2 py-1">Phone Number</th>
|
|
<th className="border border-neutral-200 px-2 py-1">Classroom Name</th>
|
|
<th className="border border-neutral-200 px-2 py-1">Country</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className="flex flex-col gap-3 bg-gray-100 rounded-lg p-4">
|
|
<div className="flex items-center gap-2">
|
|
<IoInformationCircleOutline className={`w-5 h-5 text-mti-purple-light`} />
|
|
<h2 className="text-lg font-semibold">
|
|
Note that:
|
|
</h2>
|
|
</div>
|
|
<ul className="flex flex-col pl-10 gap-2">
|
|
<li className="text-gray-700 list-disc">
|
|
all incorrect e-mails will be ignored.
|
|
</li>
|
|
<li className="text-gray-700 list-disc">
|
|
all non registered users will be ignored.
|
|
</li>
|
|
<li className="text-gray-700 list-disc">
|
|
all students that already are present in the destination classroom will be ignored.
|
|
</li>
|
|
<li className="text-gray-700 list-disc">
|
|
all registered students that are not associated to your institution will be ignored.
|
|
</li>
|
|
<li className="text-gray-700 list-disc">
|
|
all rows which contain duplicate values in the columns: "Student ID", "Passport/National ID", "E-mail", will be ignored.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className="bg-gray-100 rounded-lg p-4">
|
|
<p className="text-gray-600">
|
|
{`The downloadable template is an example of a file that can be imported. Your document doesn't need to be a carbon copy of the template - it can have different styling but it must adhere to the previous requirements.`}
|
|
</p>
|
|
</div>
|
|
<div className="w-full flex justify-between mt-6 gap-8">
|
|
<Button color="purple" onClick={() => setShowHelp(false)} variant="outline" className="self-end w-full bg-white">
|
|
Close
|
|
</Button>
|
|
|
|
<Button color="purple" onClick={handleTemplateDownload} variant="solid" className="self-end w-full">
|
|
<div className="flex items-center gap-2">
|
|
<FaFileDownload size={24} />
|
|
Download Template
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
</Modal>
|
|
<div className="border-mti-gray-platinum flex flex-col gap-4 rounded-xl border p-4">
|
|
<div className="grid grid-cols-2 -md:grid-cols-1 gap-4">
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-end justify-between">
|
|
<label className="text-mti-gray-dim text-base font-normal">Choose an Excel file</label>
|
|
<button
|
|
onClick={() => setShowHelp(true)}
|
|
className="tooltip cursor-pointer p-1.5 hover:bg-gray-200 rounded-full transition-colors duration-200"
|
|
data-tip="Excel File Format"
|
|
>
|
|
<IoInformationCircleOutline size={24} />
|
|
</button>
|
|
</div>
|
|
<Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}>
|
|
{filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
|
|
</Button>
|
|
</div>
|
|
<div className={clsx("flex flex-col gap-4")}>
|
|
<label className="font-normal text-base text-mti-gray-dim">Entity</label>
|
|
<Select
|
|
defaultValue={{ value: (entities || [])[0]?.id, label: (entities || [])[0]?.label }}
|
|
options={entities.map((e) => ({ value: e.id, label: e.label }))}
|
|
onChange={(e) => setEntity(e?.value || undefined)}
|
|
isClearable={checkAccess(user, ["admin", "developer"])}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{classroomTransferState.parsedExcel?.rows !== undefined && (
|
|
<ClassroomImportSummary state={classroomTransferState} />
|
|
)}
|
|
{classroomTransferState.imports.length !== 0 && (
|
|
<div className="flex w-full flex-col gap-4">
|
|
<span className="text-mti-gray-dim text-base font-normal">New Classroom Assignments:</span>
|
|
<UserTable users={classroomTransferState.imports} />
|
|
</div>
|
|
)}
|
|
<Button className="my-auto mt-4" onClick={createNewGroupsAndAssignStudents} disabled={classroomTransferState.imports.length === 0}>
|
|
Assign {classroomTransferState.imports.length !== 0 ? `${classroomTransferState.imports.length} user${classroomTransferState.imports.length > 1 ? 's' : ''}` : ''} to {`${new Set(classroomTransferState.imports.map((i) => i.groupName)).size} classrooms`}
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default StudentClassroomTransfer;
|