From 10dc66b7fbe5c10d5904a98032ee0008c988a1fd Mon Sep 17 00:00:00 2001 From: gibbyb Date: Sun, 21 Jul 2024 19:14:36 -0500 Subject: [PATCH] Added ability to update your own status if you have not selected anyone --- package.json | 1 + pnpm-lock.yaml | 85 +++++++++++++++++++++++++++++++++- src/components/ui/Loading.tsx | 30 ++++++++++++ src/components/ui/Table.tsx | 52 ++++++++++----------- src/components/ui/progress.tsx | 28 +++++++++++ 5 files changed, 168 insertions(+), 28 deletions(-) create mode 100644 src/components/ui/Loading.tsx create mode 100644 src/components/ui/progress.tsx diff --git a/package.json b/package.json index 83645be..aa05abf 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "go": "git pull && next build && next start" }, "dependencies": { + "@radix-ui/react-progress": "^1.1.0", "@t3-oss/env-nextjs": "^0.10.1", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8f92580..3f7d60b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false 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': specifier: ^0.10.1 version: 0.10.1(typescript@5.5.3)(zod@3.23.8) @@ -1023,6 +1026,87 @@ packages: - supports-color 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: resolution: {integrity: sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==} dev: true @@ -1105,7 +1189,6 @@ packages: resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==} dependencies: '@types/react': 18.3.3 - dev: true /@types/react@18.3.3: resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==} diff --git a/src/components/ui/Loading.tsx b/src/components/ui/Loading.tsx new file mode 100644 index 0000000..c45b6b5 --- /dev/null +++ b/src/components/ui/Loading.tsx @@ -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 = ({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 ( +
+ +
+ ); +} +export default Loading; diff --git a/src/components/ui/Table.tsx b/src/components/ui/Table.tsx index 95d88f9..4155b40 100644 --- a/src/components/ui/Table.tsx +++ b/src/components/ui/Table.tsx @@ -1,6 +1,7 @@ 'use client'; import { useState, useEffect, useCallback } from 'react'; import { useSession } from "next-auth/react"; +import Loading from "~/components/ui/Loading"; // Define the Employee interface to match data fetched on the server interface Employee { @@ -94,7 +95,29 @@ export default function Table({ employees }: { employees: Employee[] }) { }; const handleSubmit = async () => { - if (selectedIds.length > 0 && employeeStatus.trim() !== '') { + if (selectedIds.length === 0) { + if (!session) { + alert("You must be signed in to update status."); + return; + } else { + const cur_user = employees.find(employee => employee.name === session?.user?.name); + if (cur_user) { + await fetch('/api/v2/update_status', { + method: 'POST', + 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', { method: 'POST', headers: { @@ -108,31 +131,6 @@ export default function Table({ employees }: { employees: Employee[] }) { setEmployeeData(updatedEmployees); setSelectedIds([]); setStatus(''); - } else { - if (!session) { - alert("You must be signed in to update status."); - } else { - const usersName = session?.user?.name; - const employee = employees.find(employee => employee.name === usersName); - if (employee) { - setSelectedIds([employee.id]); - if (selectedIds.length > 0 && employeeStatus.trim() !== '') { - 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(''); - } - } - } } }; @@ -152,7 +150,7 @@ export default function Table({ employees }: { employees: Employee[] }) { const month = date.toLocaleString('default', { month: 'long' }); return `${time} - ${month} ${day}`; }; - if (loading) return
Loading...
; + if (loading) return ; return (
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx new file mode 100644 index 0000000..1d2a151 --- /dev/null +++ b/src/components/ui/progress.tsx @@ -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, + React.ComponentPropsWithoutRef +>(({ className, value, ...props }, ref) => ( + + + +)) +Progress.displayName = ProgressPrimitive.Root.displayName + +export { Progress }