129 lines
3.7 KiB
TypeScript
129 lines
3.7 KiB
TypeScript
import axios from "axios";
|
|
import { useEffect, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { BulkUserCreattionType } from "../../type/BulkUserCreattionType";
|
|
import { Ji } from "../../type/TpType";
|
|
import { CSVParseType } from "../../type/CSVParseType";
|
|
|
|
function BulkUsers() {
|
|
const [userData, setUserData] = useState<CSVParseType[]>([]);
|
|
const [practical, setPractical] = useState("0");
|
|
const navigate = useNavigate();
|
|
const [jis, setJis] = useState([]);
|
|
|
|
const handlePracticalChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
setPractical(e.target.value);
|
|
};
|
|
|
|
useEffect(() => {
|
|
axios.get("/api/ji/listall").then((res) => {
|
|
setJis(res.data);
|
|
});
|
|
}, []);
|
|
|
|
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (event.target.files) {
|
|
const selectedFile = event.target.files[0];
|
|
parseCSV(selectedFile);
|
|
}
|
|
};
|
|
|
|
const parseCSV = (file: File) => {
|
|
const reader = new FileReader();
|
|
reader.onload = (event: ProgressEvent<FileReader>) => {
|
|
if (event.target) {
|
|
const text = event.target.result!.toString();
|
|
const rows = text.split("\n").map((row) => row.split(","));
|
|
const formattedData = rows.map((row) => ({
|
|
name: row[0],
|
|
email: row[1],
|
|
password: row[2],
|
|
instance_name: row[3],
|
|
instance_ssh: row[4],
|
|
instance_port: row[5],
|
|
instance_pwd: row[6],
|
|
}));
|
|
setUserData(formattedData);
|
|
}
|
|
};
|
|
reader.readAsText(file);
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
axios
|
|
.post("/api/users", {
|
|
users: userData.filter((user: CSVParseType) => user.name !== ""),
|
|
jiId: 1,
|
|
}).then((res) => {
|
|
if (res.status === 200) {
|
|
alert(`Users succesfully created !\n${res}`);
|
|
}
|
|
if (res.status === 202)
|
|
alert(`Couldn't create some users`);
|
|
if (res.status === 500)
|
|
alert(`Couldn't create ANY users`);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto p-5">
|
|
<h2 className="text-2xl font-bold mb-4">Bulk User Creation</h2>
|
|
<input
|
|
type="file"
|
|
accept=".csv"
|
|
onChange={handleFileChange}
|
|
className="file-input file-input-bordered mb-4"
|
|
/>
|
|
{userData.length > 0 && (
|
|
<div className="overflow-x-auto w-full">
|
|
<table className="table w-full">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Email</th>
|
|
<th>Password</th>
|
|
<th>Instance name</th>
|
|
<th>Instance ssh</th>
|
|
<th>Instance port</th>
|
|
<th>Instance pwd</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{userData.map((user: BulkUserCreattionType, index: number) => (
|
|
<tr key={index}>
|
|
<td>{user.name}</td>
|
|
<td>{user.email}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label className="block text-gray-700 font-semibold mb-2">Ji:</label>
|
|
<select
|
|
name="practical"
|
|
value={practical}
|
|
onChange={handlePracticalChange}
|
|
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
return <option value="0">Empty</option>;
|
|
{jis.map((ji: Ji) => {
|
|
return <option value={ji.id}>{ji.name}</option>;
|
|
})}
|
|
</select>
|
|
</div>
|
|
<button
|
|
onClick={handleSubmit}
|
|
className="btn btn-primary mt-4"
|
|
disabled={userData.length === 0 || practical == "0"}
|
|
>
|
|
Create Users
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default BulkUsers;
|