diff --git a/src/app/admin/adminVendors.js b/src/app/admin/adminVendors.js index a4dda00..c75624c 100644 --- a/src/app/admin/adminVendors.js +++ b/src/app/admin/adminVendors.js @@ -1,3 +1,4 @@ + "use client"; import { useState, useEffect, useRef } from 'react'; @@ -29,7 +30,7 @@ async function updateVendor(vendor) { return data; } -//function to add a row +// Function to add a new vendor async function addVendor(vendor) { try { const vendorData = { vendors: [vendor] }; @@ -54,8 +55,7 @@ async function addVendor(vendor) { } } - -//function to delete a row +// Function to delete a single vendor async function deleteVendor(id) { const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_PATH}/api/vendors`, { method: 'DELETE', @@ -66,12 +66,23 @@ async function deleteVendor(id) { return await response.json(); } +// Function to bulk delete vendors +async function bulkDeleteVendors(ids) { + const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_PATH}/api/vendors`, { + method: 'DELETE', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ ids }), + }); + if (!response.ok) throw new Error('Failed to delete vendors'); + return await response.json(); +} + export default function VendorsAdmin() { const [data, setData] = useState([]); + const [selectedVendors, setSelectedVendors] = useState([]); // Initialize selectedVendors state const [searchQuery, setSearchQuery] = useState(""); const [filteredData, setFilteredData] = useState([]); const [editingVendor, setEditingVendor] = useState(null); - const editFormRef = useRef(null); const [csvFile, setCsvFile] = useState(null); // For storing the selected CSV file const [newVendor, setNewVendor] = useState({ vendor_name: '', @@ -84,11 +95,11 @@ export default function VendorsAdmin() { }); const [showForm, setShowForm] = useState(false); - // Fetch vendor data on component mount useEffect(() => { async function getData() { const fetchedData = await fetchVendors(); setData(fetchedData); + setFilteredData(fetchedData); } getData(); }, []); @@ -103,7 +114,6 @@ export default function VendorsAdmin() { setFilteredData(updatedData); }; - const handleSearch = (e) => { const query = e.target.value.toLowerCase(); setSearchQuery(query); @@ -113,16 +123,6 @@ export default function VendorsAdmin() { setFilteredData(filtered); }; - - useEffect(() => { - async function getData() { - const fetchedData = await fetchVendors(); - setData(fetchedData); - setFilteredData(fetchedData); - } - getData(); - }, []); - const handleCsvUpload = async () => { if (!csvFile) { alert("Please select a CSV file to upload."); @@ -185,7 +185,6 @@ export default function VendorsAdmin() { }); }; - // Handle input change for the add vendor form const handleAddChange = (e) => { setNewVendor({ ...newVendor, [e.target.name]: e.target.value }); }; @@ -228,20 +227,35 @@ export default function VendorsAdmin() { } }; - // Delete a vendor - const handleDelete = async (id) => { - const isConfirmed = window.confirm( - "Are you sure you want to delete this vendor? This action cannot be undone." - ); - if (!isConfirmed) return; + // Handle checkbox changes + const handleCheckboxChange = (id) => { + setSelectedVendors((prevSelected) => { + if (prevSelected.includes(id)) { + return prevSelected.filter((vendorId) => vendorId !== id); + } else { + return [...prevSelected, id]; + } + }); + }; - try { - await deleteVendor(id); - await refreshData(); - alert("Vendor deleted successfully!"); - } catch (error) { - console.error("Failed to delete vendor:", error); - alert("An error occurred while deleting the vendor. Please try again."); + // Delete selected vendors with confirmation + const handleBulkDelete = async () => { + if (selectedVendors.length === 0) { + alert("You have not selected any vendors to delete."); + return; + } + + if (window.confirm("Are you sure you want to delete the selected vendors? This action cannot be undone.")) { + try { + await bulkDeleteVendors(selectedVendors); + setSelectedVendors([]); // Clear selection after delete + const updatedData = await fetchVendors(); + setData(updatedData); + alert("Vendors deleted successfully!"); + } catch (error) { + console.error("Error deleting vendors:", error); + alert("Failed to delete vendors."); + } } }; @@ -404,13 +418,37 @@ export default function VendorsAdmin() { /> + + {/* Bulk Delete Selected Vendors Button */} + {selectedVendors.length > 0 && ( +
+ +
+ )} {/* Table layout on large screens, Card layout on small screens */}
- {/* Table layout */}
+ @@ -425,7 +463,14 @@ export default function VendorsAdmin() { {filteredData.length > 0 ? ( filteredData.map((vendor) => ( - + +
+ { + if (selectedVendors.length === data.length) { + setSelectedVendors([]); + } else { + setSelectedVendors(data.map((vendor) => vendor.id)); + } + }} + checked={selectedVendors.length === data.length} + /> + Building Floor Room
{vendor.building} + handleCheckboxChange(vendor.id)} + /> + {vendor.building} {vendor.floor} {vendor.room} {vendor.vendor_name}