Added ability to update your own status if you have not selected anyone
This commit is contained in:
parent
1e8c204ed2
commit
10dc66b7fb
@ -15,6 +15,7 @@
|
|||||||
"go": "git pull && next build && next start"
|
"go": "git pull && next build && next start"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@radix-ui/react-progress": "^1.1.0",
|
||||||
"@t3-oss/env-nextjs": "^0.10.1",
|
"@t3-oss/env-nextjs": "^0.10.1",
|
||||||
"class-variance-authority": "^0.7.0",
|
"class-variance-authority": "^0.7.0",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
|
85
pnpm-lock.yaml
generated
85
pnpm-lock.yaml
generated
@ -5,6 +5,9 @@ settings:
|
|||||||
excludeLinksFromLockfile: false
|
excludeLinksFromLockfile: false
|
||||||
|
|
||||||
dependencies:
|
dependencies:
|
||||||
|
'@radix-ui/react-progress':
|
||||||
|
specifier: ^1.1.0
|
||||||
|
version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
|
||||||
'@t3-oss/env-nextjs':
|
'@t3-oss/env-nextjs':
|
||||||
specifier: ^0.10.1
|
specifier: ^0.10.1
|
||||||
version: 0.10.1(typescript@5.5.3)(zod@3.23.8)
|
version: 0.10.1(typescript@5.5.3)(zod@3.23.8)
|
||||||
@ -1023,6 +1026,87 @@ packages:
|
|||||||
- supports-color
|
- supports-color
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/@radix-ui/react-compose-refs@1.1.0(@types/react@18.3.3)(react@18.3.1):
|
||||||
|
resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
|
||||||
|
peerDependencies:
|
||||||
|
'@types/react': '*'
|
||||||
|
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||||
|
peerDependenciesMeta:
|
||||||
|
'@types/react':
|
||||||
|
optional: true
|
||||||
|
dependencies:
|
||||||
|
'@types/react': 18.3.3
|
||||||
|
react: 18.3.1
|
||||||
|
dev: false
|
||||||
|
|
||||||
|
/@radix-ui/react-context@1.1.0(@types/react@18.3.3)(react@18.3.1):
|
||||||
|
resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==}
|
||||||
|
peerDependencies:
|
||||||
|
'@types/react': '*'
|
||||||
|
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||||
|
peerDependenciesMeta:
|
||||||
|
'@types/react':
|
||||||
|
optional: true
|
||||||
|
dependencies:
|
||||||
|
'@types/react': 18.3.3
|
||||||
|
react: 18.3.1
|
||||||
|
dev: false
|
||||||
|
|
||||||
|
/@radix-ui/react-primitive@2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
|
||||||
|
resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
|
||||||
|
peerDependencies:
|
||||||
|
'@types/react': '*'
|
||||||
|
'@types/react-dom': '*'
|
||||||
|
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||||
|
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||||
|
peerDependenciesMeta:
|
||||||
|
'@types/react':
|
||||||
|
optional: true
|
||||||
|
'@types/react-dom':
|
||||||
|
optional: true
|
||||||
|
dependencies:
|
||||||
|
'@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1)
|
||||||
|
'@types/react': 18.3.3
|
||||||
|
'@types/react-dom': 18.3.0
|
||||||
|
react: 18.3.1
|
||||||
|
react-dom: 18.3.1(react@18.3.1)
|
||||||
|
dev: false
|
||||||
|
|
||||||
|
/@radix-ui/react-progress@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
|
||||||
|
resolution: {integrity: sha512-aSzvnYpP725CROcxAOEBVZZSIQVQdHgBr2QQFKySsaD14u8dNT0batuXI+AAGDdAHfXH8rbnHmjYFqVJ21KkRg==}
|
||||||
|
peerDependencies:
|
||||||
|
'@types/react': '*'
|
||||||
|
'@types/react-dom': '*'
|
||||||
|
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||||
|
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||||
|
peerDependenciesMeta:
|
||||||
|
'@types/react':
|
||||||
|
optional: true
|
||||||
|
'@types/react-dom':
|
||||||
|
optional: true
|
||||||
|
dependencies:
|
||||||
|
'@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
|
||||||
|
'@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
|
||||||
|
'@types/react': 18.3.3
|
||||||
|
'@types/react-dom': 18.3.0
|
||||||
|
react: 18.3.1
|
||||||
|
react-dom: 18.3.1(react@18.3.1)
|
||||||
|
dev: false
|
||||||
|
|
||||||
|
/@radix-ui/react-slot@1.1.0(@types/react@18.3.3)(react@18.3.1):
|
||||||
|
resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
|
||||||
|
peerDependencies:
|
||||||
|
'@types/react': '*'
|
||||||
|
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||||
|
peerDependenciesMeta:
|
||||||
|
'@types/react':
|
||||||
|
optional: true
|
||||||
|
dependencies:
|
||||||
|
'@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
|
||||||
|
'@types/react': 18.3.3
|
||||||
|
react: 18.3.1
|
||||||
|
dev: false
|
||||||
|
|
||||||
/@rushstack/eslint-patch@1.10.3:
|
/@rushstack/eslint-patch@1.10.3:
|
||||||
resolution: {integrity: sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==}
|
resolution: {integrity: sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==}
|
||||||
dev: true
|
dev: true
|
||||||
@ -1105,7 +1189,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==}
|
resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@types/react': 18.3.3
|
'@types/react': 18.3.3
|
||||||
dev: true
|
|
||||||
|
|
||||||
/@types/react@18.3.3:
|
/@types/react@18.3.3:
|
||||||
resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==}
|
resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==}
|
||||||
|
30
src/components/ui/Loading.tsx
Normal file
30
src/components/ui/Loading.tsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
"use client"
|
||||||
|
import * as React from "react"
|
||||||
|
import { Progress } from "~/components/ui/progress"
|
||||||
|
|
||||||
|
interface Loading_Props {
|
||||||
|
interval_amount: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const Loading: React.FC<Loading_Props> = ({interval_amount}) => {
|
||||||
|
const [progress, setProgress] = React.useState(13);
|
||||||
|
React.useEffect(() => {
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
setProgress((prev) => {
|
||||||
|
if (prev >= 100) {
|
||||||
|
clearInterval(interval);
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
return prev + interval_amount;
|
||||||
|
});
|
||||||
|
}, 50);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
|
||||||
|
})
|
||||||
|
return (
|
||||||
|
<div className="items-center justify-center w-1/3 m-auto pt-20">
|
||||||
|
<Progress value={progress} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default Loading;
|
@ -1,6 +1,7 @@
|
|||||||
'use client';
|
'use client';
|
||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import { useSession } from "next-auth/react";
|
import { useSession } from "next-auth/react";
|
||||||
|
import Loading from "~/components/ui/Loading";
|
||||||
|
|
||||||
// Define the Employee interface to match data fetched on the server
|
// Define the Employee interface to match data fetched on the server
|
||||||
interface Employee {
|
interface Employee {
|
||||||
@ -94,29 +95,29 @@ export default function Table({ employees }: { employees: Employee[] }) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
const handleSubmit = async () => {
|
||||||
if (selectedIds.length > 0 && employeeStatus.trim() !== '') {
|
if (selectedIds.length === 0) {
|
||||||
await fetch('/api/v2/update_status', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Authorization': `Bearer ${process.env.API_KEY}`
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ employeeIds: selectedIds, newStatus: employeeStatus }),
|
|
||||||
});
|
|
||||||
// Optionally refresh data on the client-side after update
|
|
||||||
const updatedEmployees = await fetchEmployees();
|
|
||||||
setEmployeeData(updatedEmployees);
|
|
||||||
setSelectedIds([]);
|
|
||||||
setStatus('');
|
|
||||||
} else {
|
|
||||||
if (!session) {
|
if (!session) {
|
||||||
alert("You must be signed in to update status.");
|
alert("You must be signed in to update status.");
|
||||||
|
return;
|
||||||
} else {
|
} else {
|
||||||
const usersName = session?.user?.name;
|
const cur_user = employees.find(employee => employee.name === session?.user?.name);
|
||||||
const employee = employees.find(employee => employee.name === usersName);
|
if (cur_user) {
|
||||||
if (employee) {
|
await fetch('/api/v2/update_status', {
|
||||||
setSelectedIds([employee.id]);
|
method: 'POST',
|
||||||
if (selectedIds.length > 0 && employeeStatus.trim() !== '') {
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${process.env.API_KEY}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ employeeIds: [cur_user.id], newStatus: employeeStatus }),
|
||||||
|
});
|
||||||
|
// Optionally refresh data on the client-side after update
|
||||||
|
const updatedEmployees = await fetchEmployees();
|
||||||
|
setEmployeeData(updatedEmployees);
|
||||||
|
setSelectedIds([]);
|
||||||
|
setStatus('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (employeeStatus.trim() === '') {
|
||||||
await fetch('/api/v2/update_status', {
|
await fetch('/api/v2/update_status', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
@ -131,9 +132,6 @@ export default function Table({ employees }: { employees: Employee[] }) {
|
|||||||
setSelectedIds([]);
|
setSelectedIds([]);
|
||||||
setStatus('');
|
setStatus('');
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleKeyPress = async (e: React.KeyboardEvent<HTMLInputElement>) => {
|
const handleKeyPress = async (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
@ -152,7 +150,7 @@ export default function Table({ employees }: { employees: Employee[] }) {
|
|||||||
const month = date.toLocaleString('default', { month: 'long' });
|
const month = date.toLocaleString('default', { month: 'long' });
|
||||||
return `${time} - ${month} ${day}`;
|
return `${time} - ${month} ${day}`;
|
||||||
};
|
};
|
||||||
if (loading) return <div>Loading...</div>;
|
if (loading) return <Loading interval_amount={3} />;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<table className="techtable rounded-2xl w-5/6 m-auto text-center text-[42px]">
|
<table className="techtable rounded-2xl w-5/6 m-auto text-center text-[42px]">
|
||||||
|
28
src/components/ui/progress.tsx
Normal file
28
src/components/ui/progress.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ProgressPrimitive from "@radix-ui/react-progress"
|
||||||
|
|
||||||
|
import { cn } from "~/lib/utils"
|
||||||
|
|
||||||
|
const Progress = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ProgressPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
|
||||||
|
>(({ className, value, ...props }, ref) => (
|
||||||
|
<ProgressPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative h-4 w-full overflow-hidden rounded-full bg-secondary",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ProgressPrimitive.Indicator
|
||||||
|
className="h-full w-full flex-1 bg-primary transition-all"
|
||||||
|
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||||
|
/>
|
||||||
|
</ProgressPrimitive.Root>
|
||||||
|
))
|
||||||
|
Progress.displayName = ProgressPrimitive.Root.displayName
|
||||||
|
|
||||||
|
export { Progress }
|
Loading…
Reference in New Issue
Block a user