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

Added an explanation for the Excel file format requested

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-01-14 23:29:22 +00:00
parent 404e5a8a0c
commit 31e09c94c7
1 changed files with 82 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/pages/(admin)/BatchCodeGenerator.tsx
View File

@@ -14,6 +14,8 @@ import {toast} from "react-toastify";
import ShortUniqueId from "short-unique-id"; import ShortUniqueId from "short-unique-id";
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 {BsQuestionCircleFill} from "react-icons/bs";
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]+)*$/);
@@ -32,6 +34,7 @@ export default function BatchCodeGenerator({user}: {user: User}) {
const [expiryDate, setExpiryDate] = useState<Date | null>(null); const [expiryDate, setExpiryDate] = useState<Date | null>(null);
const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true); const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
const [type, setType] = useState<Type>("student"); const [type, setType] = useState<Type>("student");
const [showHelp, setShowHelp] = useState(false);
const {users} = useUsers(); const {users} = useUsers();
@@ -111,52 +114,85 @@ export default function BatchCodeGenerator({user}: {user: User}) {
}; };
return ( return (
<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl"> <>
<label className="font-normal text-base text-mti-gray-dim">Choose an Excel file containing e-mails</label> <Modal isOpen={showHelp} onClose={() => setShowHelp(false)} title="Excel File Format">
<Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}> <div className="mt-4 flex flex-col gap-2">
{filesContent.length > 0 ? filesContent[0].name : "Choose a file"} <span>Please upload an Excel file with the following format:</span>
</Button> <table className="w-full">
{user && (user.type === "developer" || user.type === "admin") && ( <thead>
<> <tr>
<div className="flex -md:flex-row md:flex-col -md:items-center 2xl:flex-row 2xl:items-center justify-between gap-2"> <th className="border border-neutral-200 px-2 py-1">First Name</th>
<label className="font-normal text-base text-mti-gray-dim">Expiry Date</label> <th className="border border-neutral-200 px-2 py-1">Last Name</th>
<Checkbox isChecked={isExpiryDateEnabled} onChange={setIsExpiryDateEnabled}> <th className="border border-neutral-200 px-2 py-1">Country</th>
Enabled <th className="border border-neutral-200 px-2 py-1">Passport/National ID</th>
</Checkbox> <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>
</tr>
</thead>
</table>
<span className="mt-4">
<b>Notes:</b>
<ul>
<li>- All incorrect e-mails will be ignored;</li>
<li>- All already registered e-mails will be ignored;</li>
<li>- You may have a header row with the format above, however, it is not necessary;</li>
<li>- All of the e-mails in the file will receive an e-mail to join EnCoach with the role selected below.</li>
</ul>
</span>
</div>
</Modal>
<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
<div className="flex justify-between items-end">
<label className="font-normal text-base text-mti-gray-dim">Choose an Excel file</label>
<div className="cursor-pointer tooltip" data-tip="Excel File Format" onClick={() => setShowHelp(true)}>
<BsQuestionCircleFill />
</div> </div>
{isExpiryDateEnabled && ( </div>
<ReactDatePicker <Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}>
className={clsx( {filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer", </Button>
"hover:border-mti-purple tooltip", {user && (user.type === "developer" || user.type === "admin") && (
"transition duration-300 ease-in-out", <>
)} <div className="flex -md:flex-row md:flex-col -md:items-center 2xl:flex-row 2xl:items-center justify-between gap-2">
filterDate={(date) => moment(date).isAfter(new Date())} <label className="font-normal text-base text-mti-gray-dim">Expiry Date</label>
dateFormat="dd/MM/yyyy" <Checkbox isChecked={isExpiryDateEnabled} onChange={setIsExpiryDateEnabled}>
selected={expiryDate} Enabled
onChange={(date) => setExpiryDate(date)} </Checkbox>
/> </div>
)} {isExpiryDateEnabled && (
</> <ReactDatePicker
)} className={clsx(
<label className="font-normal text-base text-mti-gray-dim">Select the type of user they should be</label> "p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
{user && ( "hover:border-mti-purple tooltip",
<select "transition duration-300 ease-in-out",
defaultValue="student" )}
onChange={(e) => setType(e.target.value as typeof user.type)} filterDate={(date) => moment(date).isAfter(new Date())}
className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white"> dateFormat="dd/MM/yyyy"
{Object.keys(USER_TYPE_LABELS) selected={expiryDate}
.filter((x) => USER_TYPE_PERMISSIONS[user.type].includes(x as Type)) onChange={(date) => setExpiryDate(date)}
.map((type) => ( />
<option key={type} value={type}> )}
{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]} </>
</option> )}
))} <label className="font-normal text-base text-mti-gray-dim">Select the type of user they should be</label>
</select> {user && (
)} <select
<Button onClick={() => generateCode(type)} disabled={infos.length === 0 || (isExpiryDateEnabled ? !expiryDate : false)}> defaultValue="student"
Generate & Send onChange={(e) => setType(e.target.value as typeof user.type)}
</Button> className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
</div> {Object.keys(USER_TYPE_LABELS)
.filter((x) => USER_TYPE_PERMISSIONS[user.type].includes(x as Type))
.map((type) => (
<option key={type} value={type}>
{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
</option>
))}
</select>
)}
<Button onClick={() => generateCode(type)} disabled={infos.length === 0 || (isExpiryDateEnabled ? !expiryDate : false)}>
Generate & Send
</Button>
</div>
</>
); );
} }