implements #181 (#185)

* implements #181 * implements #181
cs481-ekh · Dec 1, 2024 · cf43ac8 · cf43ac8
1 parent d1c89e7
commit cf43ac8
Showing 1 changed file with 77 additions and 32 deletions.
diff --git 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() {
           />
         </div>
       </div>
+
+      {/* Bulk Delete Selected Vendors Button */}
+      {selectedVendors.length > 0 && (
+        <div className="mb-4 flex justify-between items-center">
+          <button
+            onClick={handleBulkDelete}
+            className="bg-bsu-blue text-white text-sm font-bold hover:bg-orange-500 hover:scale-110 duration-300 px-4 py-2 rounded"
+          >
+            Delete Selected Vendors
+          </button>
+        </div>
+      )}
       {/* Table layout on large screens, Card layout on small screens */}
       <div>
-        {/* Table layout */}
         <div className="hidden lg:block">
           <table className="min-w-full divide-y divide-gray-200">
             <thead className="text-sm text-gray-700 bg-gray-50 border">
               <tr>
+                <th className="px-6 py-3 border bg-bsu-blue text-white">
+                  <input
+                    type="checkbox"
+                    onChange={() => {
+                      if (selectedVendors.length === data.length) {
+                        setSelectedVendors([]);
+                      } else {
+                        setSelectedVendors(data.map((vendor) => vendor.id));
+                      }
+                    }}
+                    checked={selectedVendors.length === data.length}
+                  />
+                </th>
                 <th className="px-6 py-3 border bg-bsu-blue text-white">Building</th>
                 <th className="px-6 py-3 border bg-bsu-blue text-white">Floor</th>
                 <th className="px-6 py-3 border bg-bsu-blue text-white">Room</th>
@@ -425,7 +463,14 @@ export default function VendorsAdmin() {
               {filteredData.length > 0 ? (
                 filteredData.map((vendor) => (
                   <tr key={vendor.id} className="border-l border-r text-center">
-                    <td className="px-6 py-3 border">{vendor.building}</td>
+                    <td className="px-6 py-3 border">
+                    <input
+                      type="checkbox"
+                      checked={selectedVendors.includes(vendor.id)}
+                      onChange={() => handleCheckboxChange(vendor.id)}
+                    />
+                  </td>
+                  <td className="px-6 py-3 border">{vendor.building}</td>
                     <td className="px-6 py-3 border">{vendor.floor}</td>
                     <td className="px-6 py-3 border">{vendor.room}</td>
                     <td className="px-6 py-3 border">{vendor.vendor_name}</td>