From 06734c95fffd58ba9e1dba6be6a3ffb4c1884a06 Mon Sep 17 00:00:00 2001
From: Toni <mbenjamin@suhay.com.ph>
Date: Fri, 24 May 2024 10:25:50 +0800
Subject: [PATCH] Confirmation for the Delete button

---
 src/components/Lists.js | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/Lists.js b/src/components/Lists.js
index d27143c..b3cf4d5 100644
--- a/src/components/Lists.js
+++ b/src/components/Lists.js
@@ -1,13 +1,16 @@
 import React, { useState,useEffect } from 'react';
-import { Button, Table } from '@mantine/core';
+import { Dialog, Button, Table, Text, Group } from '@mantine/core';
 import { Link } from 'react-router-dom';
 import {http} from "../middleware/axiosConfig";
+import { useDisclosure } from '@mantine/hooks';
 
 const List = () => {
 
   // Initialize state for user data
   const [ userData, setUserData] = useState([]);
   
+  const [opened, { toggle, close }] = useDisclosure(false);
+
   //useEffect hook - 
   useEffect(() => {
     fetchData();
@@ -60,14 +63,30 @@ const List = () => {
                       <Table.Td>
                         {/* Action.View Button - triggers the View module */}
                         <Link to={`/view/${users.id}`}>
-                        <Button style={{ marginRight: '10px' }} variant="filled" color="rgba(81, 194, 52, 1)">View</Button>
+                        <Button style={{ marginRight: '10px' }} variant="outline" color="rgba(81, 194, 52, 1)">View</Button>
                         </Link>
                         {/* Action.Edit Button - triggers the Edit module */}
                         <Link to={`/edit/${users.id}`}>
-                        <Button style={{ marginRight: '10px' }} variant="filled">Edit</Button>
+                        <Button style={{ marginRight: '10px' }} variant="outline">Edit</Button>
                         </Link>
                         {/* Delete Button - triggers the handleDelete function */}
-                        <Button onClick={()=>handleDelete(users.id)} style={{ marginRight: '10px' }} variant="filled" color="rgba(227, 9, 9, 1)">Delete</Button>
+                        {/* <Button onClick={()=>handleDelete(users.id)} style={{ marginRight: '10px' }} variant="filled" color="rgba(227, 9, 9, 1)">Delete</Button> */}
+                        <Button onClick={toggle} style={{ marginRight: '10px' }} variant="outline" color="rgba(227, 9, 9, 1)">Delete</Button>
+                        <Dialog 
+                        position={{ top: 200, left: 500 }} opened={opened} 
+                        shadow="xl"  
+                        onclose={close} 
+                        size="lg" 
+                        radius="md"
+                        withBorder
+                        style={{ backgroundColor: 'lightblue' }} >
+                          <Text size="sm" mb="xs" fw={500} align="center"> 
+                          Are you sure you want to Delete this account? </Text>
+                          <Group algin="flex-end">
+                            <Button onClick={close} style={{ marginLeft: '90px', marginTop: '10px' }} variant="filled" color="rgba(5, 66, 1, 1)">Cancel</Button>
+                            <Button onClick={()=>handleDelete(users.id)} style={{ marginRight: '45px', marginTop: '10px' }} variant="filled" color="rgba(227, 9, 9, 1)">Delete</Button>
+                          </Group>
+                        </Dialog>
                         </Table.Td>
                       </Table.Tr>
                   )})