+ |
+
+ props.handleCheckboxChange(props.record._id)}
+ />
+ {props.record.name}
+
|
-
+ | {props.record.position} |
+ {props.record.level} |
+
Edit
@@ -35,8 +37,14 @@ const Record = (props) => (
|
);
+
+
export default function RecordList() {
const [records, setRecords] = useState([]);
+ const [searchQuery, setSearchQuery] = useState("");
+ const [selectedRecords, setSelectedRecords] = useState([]);
+ const [open, setOpen] = useState(false);
+ const [selectedLevel, setSelectedLevel] = useState("");
// This method fetches the records from the database.
useEffect(() => {
@@ -54,6 +62,8 @@ export default function RecordList() {
return;
}, [records.length]);
+ const closeModal = () => setOpen(false);
+
// This method will delete a record
async function deleteRecord(id) {
await fetch(`http://localhost:5050/record/${id}`, {
@@ -63,48 +73,193 @@ export default function RecordList() {
setRecords(newRecords);
}
+
+ // this method will delete selected records
+ async function deleteSelectedRecords() {
+ Promise.all(selectedRecords.map((id) => fetch(`http://localhost:5050/record/${id}`, { method: "DELETE" })))
+ .then(() => {
+ setRecords(records.filter((record) => !selectedRecords.includes(record._id)));
+ setSelectedRecords([]); // Clear selection after deletion
+ closeModal();
+ })
+ .catch(error => console.error('Error deleting records:', error));
+ }
+
+ function handleCheckboxChange(id) {
+ if (selectedRecords.includes(id)) {
+ setSelectedRecords(selectedRecords.filter((item) => item !== id));
+ } else {
+ setSelectedRecords([...selectedRecords, id]);
+ }
+ }
+
// This method will map out the records on the table
function recordList() {
- return records.map((record) => {
- return (
-