diff --git a/frontend/src/components/Admin/AddUser/AddUser.module.css b/frontend/src/components/Admin/AddUser/AddUser.module.css index ea0a24e0e..63d6a7dbe 100644 --- a/frontend/src/components/Admin/AddUser/AddUser.module.css +++ b/frontend/src/components/Admin/AddUser/AddUser.module.css @@ -53,3 +53,12 @@ overflow: hidden; text-overflow: ellipsis; } + +.fileUpload { + margin-top: 1rem; +} + +.successMsg { + margin-top: 1rem; + color: green; +} diff --git a/frontend/src/components/Admin/AddUser/AddUser.tsx b/frontend/src/components/Admin/AddUser/AddUser.tsx index dc35ea9e4..84495faa7 100644 --- a/frontend/src/components/Admin/AddUser/AddUser.tsx +++ b/frontend/src/components/Admin/AddUser/AddUser.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Card, Button, Form, Input, Select, TextArea } from 'semantic-ui-react'; +import { Card, Button, Form, Input, Select, TextArea, CardContent } from 'semantic-ui-react'; import ALL_ROLES from 'common-types/constants'; import csvtojson from 'csvtojson'; import styles from './AddUser.module.css'; @@ -76,6 +76,7 @@ export default function AddUser(): JSX.Element { isCreatingUser: false }); const [csvFile, setCsvFile] = useState(undefined); + const [uploadStatus, setUploadStatus] = useState(''); function createNewUser(): void { setState({ @@ -131,19 +132,18 @@ export default function AddUser(): JSX.Element { if (csvFile) { const csv = await csvFile.text(); const json = await csvtojson().fromString(csv); - const members = json.map((m) => ({ - ...m, - netid: getNetIDFromEmail(m.email), - roleDescription: getRoleDescriptionFromRoleID(m.role) - })); + const members = json.map( + (m) => + ({ + ...m, + netid: getNetIDFromEmail(m.email), + roleDescription: getRoleDescriptionFromRoleID(m.role) + } as Member) + ); members.forEach((m) => { allMembers.includes(m) ? MembersAPI.updateMember(m) : MembersAPI.setMember(m); }); - } else { - Emitters.userEditError.emit({ - headerMsg: "Couldn't upload CSV!", - contentMsg: 'No CSV file selected.' - }); + setUploadStatus(`Uploaded ${members.length} members`); } } @@ -182,7 +182,7 @@ export default function AddUser(): JSX.Element { ))} - +
- +
-
- - setCsvFile(e.target.files?.[0])} /> + setCsvFile(e.target.files?.[0])} + /> + {uploadStatus ?

{uploadStatus}

: undefined}
{state.currentSelectedMember !== undefined ? (