fixed setting page
This commit is contained in:
@@ -1,7 +1,10 @@
|
||||
// components/CredentialTable.tsx
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import React, { useState } from "react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { apiRequest } from "@/lib/queryClient";
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
import { Button } from "../ui/button";
|
||||
import { Edit, Delete, Plus } from "lucide-react";
|
||||
import { CredentialForm } from "./InsuranceCredForm";
|
||||
import { DeleteConfirmationDialog } from "../ui/deleteDialog";
|
||||
|
||||
type Credential = {
|
||||
id: number;
|
||||
@@ -11,47 +14,221 @@ type Credential = {
|
||||
};
|
||||
|
||||
export function CredentialTable() {
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: ["/api/credentials/"],
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// Fetch current user
|
||||
const {
|
||||
data: currentUser,
|
||||
isLoading: isUserLoading,
|
||||
isError: isUserError,
|
||||
} = useQuery({
|
||||
queryKey: ["/api/users/"],
|
||||
queryFn: async () => {
|
||||
const res = await apiRequest("GET", "/api/users/");
|
||||
if (!res.ok) throw new Error("Failed to fetch user");
|
||||
return res.json();
|
||||
},
|
||||
});
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [editingCred, setEditingCred] = useState<Credential | null>(null);
|
||||
|
||||
const credentialsPerPage = 5;
|
||||
|
||||
const { data: credentials = [], isLoading, error } = useQuery({
|
||||
queryKey: ["/api/insuranceCreds/"],
|
||||
queryFn: async () => {
|
||||
const res = await apiRequest("GET", "/api/insuranceCreds/");
|
||||
if (!res.ok) {
|
||||
throw new Error("Failed to fetch credentials");
|
||||
}
|
||||
if (!res.ok) throw new Error("Failed to fetch credentials");
|
||||
return res.json() as Promise<Credential[]>;
|
||||
},
|
||||
});
|
||||
|
||||
if (isLoading) return <p className="text-gray-600">Loading credentials...</p>;
|
||||
if (error) return <p className="text-red-600">Failed to load credentials.</p>;
|
||||
if (!data || data.length === 0)
|
||||
return <p className="text-gray-600">No credentials found.</p>;
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: async (cred: Credential) => {
|
||||
const res = await apiRequest("DELETE", `/api/insuranceCreds/${cred.id}`);
|
||||
if (!res.ok) throw new Error("Failed to delete credential");
|
||||
return true;
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/insuranceCreds/"] });
|
||||
},
|
||||
});
|
||||
|
||||
// New state for delete dialog
|
||||
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
||||
const [credentialToDelete, setCredentialToDelete] = useState<Credential | null>(null);
|
||||
|
||||
const handleDeleteClick = (cred: Credential) => {
|
||||
setCredentialToDelete(cred);
|
||||
setIsDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleConfirmDelete = () => {
|
||||
if (credentialToDelete) {
|
||||
deleteMutation.mutate(credentialToDelete, {
|
||||
onSuccess: () => {
|
||||
setIsDeleteDialogOpen(false);
|
||||
setCredentialToDelete(null);
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelDelete = () => {
|
||||
setIsDeleteDialogOpen(false);
|
||||
setCredentialToDelete(null);
|
||||
};
|
||||
|
||||
const indexOfLast = currentPage * credentialsPerPage;
|
||||
const indexOfFirst = indexOfLast - credentialsPerPage;
|
||||
const currentCredentials = credentials.slice(indexOfFirst, indexOfLast);
|
||||
const totalPages = Math.ceil(credentials.length / credentialsPerPage);
|
||||
|
||||
if (isUserLoading) return <p>Loading user...</p>;
|
||||
if (isUserError) return <p>Error loading user</p>;
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full border rounded shadow">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left">Site</th>
|
||||
<th className="px-4 py-2 text-left">Username</th>
|
||||
<th className="px-4 py-2 text-left">Password</th>
|
||||
<th className="px-4 py-2 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((cred) => (
|
||||
<tr key={cred.id} className="border-t">
|
||||
<td className="px-4 py-2">{cred.siteKey}</td>
|
||||
<td className="px-4 py-2">{cred.username}</td>
|
||||
<td className="px-4 py-2 font-mono">{cred.password}</td>
|
||||
<td className="px-4 py-2 text-right space-x-2">
|
||||
<button className="text-blue-600 hover:underline">Edit</button>
|
||||
<button className="text-red-600 hover:underline">Delete</button>
|
||||
</td>
|
||||
<div className="bg-white shadow rounded-lg overflow-hidden">
|
||||
<div className="flex justify-between items-center p-4 border-b border-gray-200">
|
||||
<h2 className="text-lg font-semibold text-gray-900">Insurance Credentials</h2>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setEditingCred(null);
|
||||
setModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" /> Add Credential
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Site Key
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Username
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Password
|
||||
</th>
|
||||
<th className="px-4 py-2" />
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{isLoading ? (
|
||||
<tr>
|
||||
<td colSpan={4} className="text-center py-4">
|
||||
Loading credentials...
|
||||
</td>
|
||||
</tr>
|
||||
) : error ? (
|
||||
<tr>
|
||||
<td colSpan={4} className="text-center py-4 text-red-600">
|
||||
Error loading credentials
|
||||
</td>
|
||||
</tr>
|
||||
) : currentCredentials.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={4} className="text-center py-4">
|
||||
No credentials found.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
currentCredentials.map((cred) => (
|
||||
<tr key={cred.id}>
|
||||
<td className="px-4 py-2">{cred.siteKey}</td>
|
||||
<td className="px-4 py-2">{cred.username}</td>
|
||||
<td className="px-4 py-2">••••••••</td>
|
||||
<td className="px-4 py-2 text-right">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setEditingCred(cred);
|
||||
setModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleDeleteClick(cred)}
|
||||
>
|
||||
<Delete className="h-4 w-4 text-red-600" />
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{credentials.length > credentialsPerPage && (
|
||||
<div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200">
|
||||
<div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
|
||||
<p className="text-sm text-gray-700">
|
||||
Showing <span className="font-medium">{indexOfFirst + 1}</span> to{" "}
|
||||
<span className="font-medium">{Math.min(indexOfLast, credentials.length)}</span> of{" "}
|
||||
<span className="font-medium">{credentials.length}</span> results
|
||||
</p>
|
||||
|
||||
<nav className="inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => { e.preventDefault(); if (currentPage > 1) setCurrentPage(currentPage - 1); }}
|
||||
className={`relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 ${currentPage === 1 ? "pointer-events-none opacity-50" : ""}`}
|
||||
>
|
||||
Previous
|
||||
</a>
|
||||
|
||||
{Array.from({ length: totalPages }).map((_, i) => (
|
||||
<a
|
||||
key={i}
|
||||
href="#"
|
||||
onClick={(e) => { e.preventDefault(); setCurrentPage(i + 1); }}
|
||||
className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${currentPage === i + 1
|
||||
? "z-10 bg-blue-50 border-blue-500 text-blue-600"
|
||||
: "border-gray-300 text-gray-500 hover:bg-gray-50"}`}
|
||||
>
|
||||
{i + 1}
|
||||
</a>
|
||||
))}
|
||||
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => { e.preventDefault(); if (currentPage < totalPages) setCurrentPage(currentPage + 1); }}
|
||||
className={`relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 ${currentPage === totalPages ? "pointer-events-none opacity-50" : ""}`}
|
||||
>
|
||||
Next
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modal for Add/Edit */}
|
||||
{modalOpen && currentUser && (
|
||||
<CredentialForm
|
||||
userId={currentUser.id}
|
||||
defaultValues={editingCred || undefined}
|
||||
onClose={() => setModalOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<DeleteConfirmationDialog
|
||||
isOpen={isDeleteDialogOpen}
|
||||
onConfirm={handleConfirmDelete}
|
||||
onCancel={handleCancelDelete}
|
||||
entityName={credentialToDelete?.siteKey}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user