banquise/intra-front
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: bulk create user

Browse Source
This commit is contained in:
Malopieds 2024-10-14 21:50:03 +02:00
parent f61d0a111a
commit 8a48d3b6c6
3 changed files with 263 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/App.tsx
View File

@ -9,35 +9,38 @@ import Practical from "./pages/Practical";
import LoginPage from "./pages/Login"; import LoginPage from "./pages/Login";
import PageTest from "./pages/PageTest"; import PageTest from "./pages/PageTest";
import CreateTp from "./pages/admin/CreateTp"; import CreateTp from "./pages/admin/CreateTp";
import BulkUsers from "./pages/admin/BulkCreateUser";
function App() { function App() {
const [showNotif, setShowNotif] = useState(false); const [showNotif, setShowNotif] = useState(false);
return ( return (
<BrowserRouter> <BrowserRouter>
<Navigation> <Navigation>
<Routes> <Routes>
<Route path="/" element={<Dashboard />} /> <Route path="/" element={<Dashboard />} />
<Route path="/tps" element={<Practicals />} /> <Route path="/tps" element={<Practicals />} />
<Route path="/tps/:id" element={<Practical />} /> <Route path="/tps/:id" element={<Practical />} />
<Route path="/instances" element={<Instances />} /> <Route path="/instances" element={<Instances />} />
<Route path="/profile" element={<PageTest />} /> <Route path="/profile" element={<PageTest />} />
<Route path="/login" element={<LoginPage />} /> <Route path="/login" element={<LoginPage />} />
<Route path="/admin/tps" element={<CreateTp />} /> <Route path="/admin" element={<BulkUsers />} />
</Routes> <Route path="/admin/tps" element={<CreateTp />} />
</Navigation> <Route path="/settings" element={<CreateTp />} />
</Routes>
</Navigation>
{showNotif && ( {showNotif && (
<div className="toast toast-top toast-end"> <div className="toast toast-top toast-end">
<div className="alert alert-success"> <div className="alert alert-success">
<span>Message sent successfully.</span> <span>Message sent successfully.</span>
<button className="btn btn-sm" onClick={() => setShowNotif(false)}> <button className="btn btn-sm" onClick={() => setShowNotif(false)}>
close close
</button> </button>
</div> </div>
</div> </div>
)} )}
</BrowserRouter> </BrowserRouter>
); );
} }
export default App; export default App;

260
src/component/Navigation/Navigation.tsx
View File

@ -1,146 +1,154 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { import {
ChartPieIcon, ChartPieIcon,
DocumentTextIcon, DocumentTextIcon,
EnvelopeIcon, EnvelopeIcon,
CommandLineIcon, CommandLineIcon,
Bars3Icon, Bars3Icon,
SunIcon, SunIcon,
MoonIcon, MoonIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
interface NavigationProps { interface NavigationProps {
children: React.ReactElement; children: React.ReactElement;
} }
const Navigation: React.FC<NavigationProps> = ({ const Navigation: React.FC<NavigationProps> = ({
children, children,
}: NavigationProps) => { }: NavigationProps) => {
const [isDrawerOpen, setIsDrawerOpen] = useState(false); const [isDrawerOpen, setIsDrawerOpen] = useState(false);
const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen); const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen);
const [theme, setTheme] = useState( const [theme, setTheme] = useState(
localStorage.getItem("theme") ? localStorage.getItem("theme") : "dark", localStorage.getItem("theme") ? localStorage.getItem("theme") : "dark",
); );
// update state on toggle // update state on toggle
const handleToggle = (e) => { const handleToggle = (e) => {
if (theme === "light") { if (theme === "light") {
setTheme("dark"); setTheme("dark");
} else { } else {
setTheme("light"); setTheme("light");
} }
}; };
// set theme state in localstorage on mount & also update localstorage on state change // set theme state in localstorage on mount & also update localstorage on state change
useEffect(() => { useEffect(() => {
localStorage.setItem("theme", theme); localStorage.setItem("theme", theme);
const localTheme = localStorage.getItem("theme"); const localTheme = localStorage.getItem("theme");
// add custom data-theme attribute to html tag required to update theme using DaisyUI // add custom data-theme attribute to html tag required to update theme using DaisyUI
document.querySelector("html").setAttribute("data-theme", localTheme); document.querySelector("html").setAttribute("data-theme", localTheme);
}, [theme]); }, [theme]);
return ( return (
<div className="app h-screen"> <div className="app h-screen">
<div className="drawer"> <div className="drawer">
<input <input
id="my-drawer" id="my-drawer"
type="checkbox" type="checkbox"
className="drawer-toggle" className="drawer-toggle"
checked={isDrawerOpen} checked={isDrawerOpen}
/> />
<div className="drawer-content h-full"> <div className="drawer-content h-full">
<div className="p-6 flex justify-between"> <div className="p-6 flex justify-between">
<div className="btn btn-ghost" onClick={toggleDrawer}> <div className="btn btn-ghost" onClick={toggleDrawer}>
<Bars3Icon className="size-6" /> <Bars3Icon className="size-6" />
</div> </div>
<label className="swap swap-rotate"> <label className="swap swap-rotate">
<input type="checkbox" onChange={handleToggle} /> <input type="checkbox" onChange={handleToggle} />
<SunIcon className="size-6 swap-off" /> <SunIcon className="size-6 swap-off" />
<MoonIcon className="size-6 swap-on" /> <MoonIcon className="size-6 swap-on" />
</label> </label>
</div> </div>
{children} {children}
</div>
<div className="drawer-side">
<div className="drawer-overlay" onClick={toggleDrawer}></div>
<div className="h-full menu bg-base-200 text-base-content w-80">
<li>
<div className="dropdown dropdown-bottom h-full">
<div
tabIndex={0}
role="button"
className="flex avatar items-center space-x-4 w-64"
>
<div className="w-10 rounded-full">
<img
alt="Tailwind CSS Navbar component"
src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
/>
</div>
<a>Malopieds</a>
</div> </div>
<ul
tabIndex={0} <div className="drawer-side">
className="dropdown-content menu bg-base-100 rounded-box z-[1] w-72 shadow" <div className="drawer-overlay" onClick={toggleDrawer}></div>
> <div className="h-full menu bg-base-200 text-base-content w-80">
<li> <li>
<Link to="/profile" onClick={toggleDrawer}> <div className="dropdown dropdown-bottom h-full">
Profile <div
</Link> tabIndex={0}
</li> role="button"
<li> className="flex avatar items-center space-x-4 w-64"
<Link to="/settings" onClick={toggleDrawer}> >
Settings <div className="w-10 rounded-full">
</Link> <img
</li> alt="Tailwind CSS Navbar component"
<div className="divider" onClick={toggleDrawer}></div> src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
<li> />
<Link to="login" onClick={toggleDrawer}> </div>
Log Out <a>Malopieds</a>
</Link> </div>
</li> <ul
</ul> tabIndex={0}
</div> className="dropdown-content menu bg-base-100 rounded-box z-[1] w-72 shadow"
</li> >
<li> <li>
<div> <Link to="/profile" onClick={toggleDrawer}>
<ChartPieIcon className="size-6" /> Profile
<Link to="/" onClick={toggleDrawer}> </Link>
Dashboard </li>
</Link> <li>
</div> <Link to="/settings" onClick={toggleDrawer}>
</li> Settings
<li> </Link>
<div> </li>
<DocumentTextIcon className="size-6" /> <div className="divider" onClick={toggleDrawer}></div>
<Link to="/tps" onClick={toggleDrawer}> <li>
TPs <Link to="login" onClick={toggleDrawer}>
</Link> Log Out
</div> </Link>
</li> </li>
<li> </ul>
<div> </div>
<CommandLineIcon className="size-6" /> </li>
<Link to="/instances" onClick={toggleDrawer}> <li>
Instances <div>
</Link> <ChartPieIcon className="size-6" />
</div> <Link to="/admin" onClick={toggleDrawer}>
</li> Admin
<li> </Link>
<div onClick={toggleDrawer}> </div>
<EnvelopeIcon className="size-6" /> </li>
<Link to="/messages">Messages</Link> <li>
</div> <div>
</li> <ChartPieIcon className="size-6" />
</div> <Link to="/" onClick={toggleDrawer}>
Dashboard
</Link>
</div>
</li>
<li>
<div>
<DocumentTextIcon className="size-6" />
<Link to="/tps" onClick={toggleDrawer}>
TPs
</Link>
</div>
</li>
<li>
<div>
<CommandLineIcon className="size-6" />
<Link to="/instances" onClick={toggleDrawer}>
Instances
</Link>
</div>
</li>
<li>
<div onClick={toggleDrawer}>
<EnvelopeIcon className="size-6" />
<Link to="/messages">Messages</Link>
</div>
</li>
</div>
</div>
</div>
</div> </div>
</div> );
</div>
);
}; };
export default Navigation; export default Navigation;

100
src/pages/admin/BulkCreateUser.tsx Normal file
View File

@ -0,0 +1,100 @@
import axios from "axios";
import { useState } from "react";
function BulkUsers() {
const [file, setFile] = useState(null);
const [userData, setUserData] = useState([]);
const [practical, setPractical] = useState("0");
const handlePracticalChange = (e) => {
setPractical(e.target.value);
}
const handleFileChange = (event) => {
const selectedFile = event.target.files[0];
if (selectedFile && selectedFile.type === 'text/csv') {
setFile(selectedFile);
parseCSV(selectedFile);
} else {
alert('Please upload a valid CSV file.');
}
};
const parseCSV = (file) => {
const reader = new FileReader();
reader.onload = (event) => {
const text = event.target.result;
const rows = text.split('\n').map((row) => row.split(','));
const formattedData = rows.map((row) => ({
name: row[0],
email: row[1],
// Add other fields as necessary
}));
setUserData(formattedData);
};
reader.readAsText(file);
};
const handleSubmit = () => {
// Handle submission logic (e.g., sending data to the backend)
console.log('Submitting data:', userData.filter(user => user.name !== ""));
axios.post("/api/users/jdmi", userData.filter(user => user.name !== "")).then(res => console.log(res));
};
return (
<div className="max-w-md 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 w-full mb-4"
/>
{userData.length > 0 && (
<div className="overflow-x-auto">
<table className="table w-full">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
{/* Add other headers as necessary */}
</tr>
</thead>
<tbody>
{userData.map((user, index) => (
<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">
Tp:
</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"
>
<option value="0">Empty</option>
<option value="1">Bot Discord</option>
</select>
</div>
<button
onClick={handleSubmit}
className="btn btn-primary mt-4"
disabled={userData.length === 0}
>
Create Users
</button>
</div>
);
}
export default BulkUsers;