Add a select all button

This commit is contained in:
Gabriel Brown 2024-07-20 10:39:35 -05:00
parent 2bb53cb731
commit 1b6d447c36
6 changed files with 62 additions and 23 deletions

View File

@ -1,4 +1,4 @@
<img src="https://git.gibbyb.com/gib/Tech_Tracker_Web/raw/branch/master/public/images/tech_tracker_logo.png" alt="Tech Tracker Logo" width="100"/> <img src="https://git.gibbyb.com/gib/Tech_Tracker_Web/raw/branch/master/public/images/tech_tracker_logo.png" alt="Tech Tracker Logo" width="50"/>
# Tech Tracker Website # Tech Tracker Website

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

View File

@ -10,7 +10,7 @@ export default async function HomePage() {
} else { } else {
return ( return (
<main className="min-h-screen bg-gradient-to-b <main className="min-h-screen bg-gradient-to-b
from-[#111111] to-[#111325]"> from-[#111111] to-[#212325]">
<TT_Header /> <TT_Header />
<Techs /> <Techs />
</main> </main>

View File

@ -1,13 +1,25 @@
import Image from "next/image";
import { auth } from "~/auth"
import { signOut } from "~/auth" import { signOut } from "~/auth"
export default function Sign_Out() { export default async function Sign_Out() {
const session = await auth();
if (!session) {
return (<div/>);
} else {
// Add User profile picture next to Sign Out button
const pfp = session?.user?.image ? session.user.image : "/images/default_user_pfp.png";
return ( return (
<form className="w-full" <form className="w-full flex flex-row"
action={async () => { action={async () => {
"use server" "use server"
await signOut() await signOut()
}}> }}>
<Image src={pfp} alt="" width={35} height={35}
className="rounded-full border-2 border-white m-auto mr-4"
/>
<button type="submit" className="w-full">Sign Out</button> <button type="submit" className="w-full">Sign Out</button>
</form> </form>
) );
} }
};

View File

@ -5,9 +5,9 @@ export default function TT_Header() {
<header className="w-full py-5"> <header className="w-full py-5">
<div className="flex flex-row items-center text-center justify-center p-8"> <div className="flex flex-row items-center text-center justify-center p-8">
<Image src="/images/tech_tracker_logo.png" <Image src="/images/tech_tracker_logo.png"
alt="Tech Tracker Logo" width={80} height={80} alt="Tech Tracker Logo" width={100} height={100}
/> />
<h1 className="title-text text-6xl font-semibold pl-4"> <h1 className="title-text text-8xl font-semibold pl-12">
Tech Tracker Tech Tracker
</h1> </h1>
</div> </div>

View File

@ -12,6 +12,7 @@ interface Employee {
export default function Table({ employees }: { employees: Employee[] }) { export default function Table({ employees }: { employees: Employee[] }) {
const [selectedIds, setSelectedIds] = useState<number[]>([]); const [selectedIds, setSelectedIds] = useState<number[]>([]);
const [selectAll, setSelectAll] = useState(false);
const [status, setStatus] = useState(''); const [status, setStatus] = useState('');
const [employeeData, setEmployeeData] = useState(employees); const [employeeData, setEmployeeData] = useState(employees);
@ -61,6 +62,24 @@ export default function Table({ employees }: { employees: Employee[] }) {
); );
}; };
const handleSelectAllChange = () => {
setSelectAll(!selectAll);
if (!selectAll) {
const allIds = employees.map((employee) => employee.id);
setSelectedIds(allIds);
} else {
setSelectedIds([]);
}
};
useEffect(() => {
if (selectedIds.length === employeeData.length && employeeData.length > 0) {
setSelectAll(true);
} else {
setSelectAll(false);
}
}, [selectedIds, employeeData]);
const handleStatusChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleStatusChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setStatus(e.target.value); setStatus(e.target.value);
}; };
@ -102,10 +121,17 @@ export default function Table({ employees }: { employees: Employee[] }) {
return ( return (
<div> <div>
<table className="techtable w-2/3 min-h-[600px] m-auto text-center border-collapse text-[42px]"> <table className="techtable w-5/6 m-auto text-center border-collapse text-[42px]">
<thead className="bg-gradient-to-br from-[#212121] to-[#333333]"> <thead className="bg-gradient-to-br from-[#232323] to-[#444444]">
<tr> <tr>
<th className="tabletitles p-5 border border-[#3e4446] text-[48px]" /> <th className="tabletitles p-4 border border-[#3e4446] text-[48px]">
<input
type="checkbox"
className="m-0 cursor-pointer transform scale-150"
checked={selectAll}
onChange={handleSelectAllChange}
/>
</th>
<th className="tabletitles p-2 border border-[#3e4446] text-[48px]">Name</th> <th className="tabletitles p-2 border border-[#3e4446] text-[48px]">Name</th>
<th className="tabletitles p-2 border border-[#3e4446] text-[48px]">Status</th> <th className="tabletitles p-2 border border-[#3e4446] text-[48px]">Status</th>
<th className="tabletitles p-2 border border-[#3e4446] text-[48px]">Updated At</th> <th className="tabletitles p-2 border border-[#3e4446] text-[48px]">Updated At</th>
@ -113,7 +139,8 @@ export default function Table({ employees }: { employees: Employee[] }) {
</thead> </thead>
<tbody> <tbody>
{employeeData.map((employee) => ( {employeeData.map((employee) => (
<tr className="even:bg-gradient-to-bl from-[#222222] to-[#232323]" key={employee.id}> <tr className="even:bg-gradient-to-br from-[#252525] to-[#333333]
odd:bg-gradient-to-bl odd:from-[#212127] odd:to-[#232325]" key={employee.id}>
<td className="p-1 border border-[#3e4446]"> <td className="p-1 border border-[#3e4446]">
<input <input
type="checkbox" type="checkbox"
@ -122,9 +149,9 @@ export default function Table({ employees }: { employees: Employee[] }) {
onChange={() => handleCheckboxChange(employee.id)} onChange={() => handleCheckboxChange(employee.id)}
/> />
</td> </td>
<td className="p-1 border border-[#3e4446]">{employee.name}</td> <td className="n-column px-1 py-5 border border-[#3e4446]">{employee.name}</td>
<td className="s-column p-1 border border-[#3e4446]">{employee.status}</td> <td className="s-column px-1 py-5 border border-[#3e4446]">{employee.status}</td>
<td className="ua-column p-1 border border-[#3e4446]">{formatTime(employee.updatedAt)}</td> <td className="ua-column px-1 py-5 border border-[#3e4446]">{formatTime(employee.updatedAt)}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
@ -133,7 +160,7 @@ export default function Table({ employees }: { employees: Employee[] }) {
<input <input
type="text" type="text"
placeholder="New Status" placeholder="New Status"
className="min-w-[100px] p-3 border-none rounded-xl text-[#111111] md:text-xl" className="min-w-[100px] p-2.5 border-none rounded-xl text-[#111111] md:text-xl"
value={status} value={status}
onChange={handleStatusChange} onChange={handleStatusChange}
onKeyDown={handleKeyPress} onKeyDown={handleKeyPress}