gib/Tech_Tracker_Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a select all button

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
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

BIN
public/images/default_user_pfp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

2
src/app/page.tsx
View File

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

20
src/components/auth/Sign_Out.tsx
View File

@ -1,13 +1,25 @@
import Image from "next/image";
import { auth } 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 (
<form className="w-full"
<form className="w-full flex flex-row"
action={async () => {
"use server"
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>
</form>
)
}
);
}
};

4
src/components/ui/TT_Header.tsx
View File

@ -5,9 +5,9 @@ export default function TT_Header() {
<header className="w-full py-5">
<div className="flex flex-row items-center text-center justify-center p-8">
<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
</h1>
</div>

43
src/components/ui/Table.tsx
View File

@ -12,6 +12,7 @@ interface Employee {
export default function Table({ employees }: { employees: Employee[] }) {
const [selectedIds, setSelectedIds] = useState<number[]>([]);
const [selectAll, setSelectAll] = useState(false);
const [status, setStatus] = useState('');
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>) => {
setStatus(e.target.value);
};
@ -102,10 +121,17 @@ export default function Table({ employees }: { employees: Employee[] }) {
return (
<div>
<table className="techtable w-2/3 min-h-[600px] m-auto text-center border-collapse text-[42px]">
<thead className="bg-gradient-to-br from-[#212121] to-[#333333]">
<table className="techtable w-5/6 m-auto text-center border-collapse text-[42px]">
<thead className="bg-gradient-to-br from-[#232323] to-[#444444]">
<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]">Status</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>
<tbody>
{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]">
<input
type="checkbox"
@ -122,9 +149,9 @@ export default function Table({ employees }: { employees: Employee[] }) {
onChange={() => handleCheckboxChange(employee.id)}
/>
</td>
<td className="p-1 border border-[#3e4446]">{employee.name}</td>
<td className="s-column p-1 border border-[#3e4446]">{employee.status}</td>
<td className="ua-column p-1 border border-[#3e4446]">{formatTime(employee.updatedAt)}</td>
<td className="n-column px-1 py-5 border border-[#3e4446]">{employee.name}</td>
<td className="s-column px-1 py-5 border border-[#3e4446]">{employee.status}</td>
<td className="ua-column px-1 py-5 border border-[#3e4446]">{formatTime(employee.updatedAt)}</td>
</tr>
))}
</tbody>
@ -133,7 +160,7 @@ export default function Table({ employees }: { employees: Employee[] }) {
<input
type="text"
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}
onChange={handleStatusChange}
onKeyDown={handleKeyPress}