From 1f7f598ba8e272fa61969ddd8cd7294f37340aaf Mon Sep 17 00:00:00 2001
From: AnthonyDeSantiago <94334680+AnthonyDeSantiago@users.noreply.github.com>
Date: Sun, 3 Dec 2023 23:34:49 -0500
Subject: [PATCH] Added dropdown menu to pending users

---
 public/admin_table_all_users.html | 44 ++++++++++++++++++++++++++++++-
 public/js/users-page.js           | 29 +++++++++++++++++---
 2 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/public/admin_table_all_users.html b/public/admin_table_all_users.html
index d883f9e..bda98d4 100644
--- a/public/admin_table_all_users.html
+++ b/public/admin_table_all_users.html
@@ -12,6 +12,32 @@
         #approved_table tbody tr {
             cursor: pointer;
         }
+
+
+        .dropdown {
+            position: relative;
+            display: inline-block;
+        }
+
+        .dropdown-content {
+            display: none;
+            position: absolute;
+            background-color: #f9f9f9;
+            min-width: 160px;
+            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+            z-index: 1;
+        }
+
+        .dropdown-content a {
+            padding: 12px 16px;
+            display: block;
+            text-decoration: none;
+            color: #333;
+        }
+
+        .dropdown-content a:hover {
+            background-color: #f1f1f1;
+        }
     </style>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -29,6 +55,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
     <script defer src="js/Main_Calendar.js"></script>
     <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
+
     <script defer src="js/sprout.js" type="module"></script>
     <script defer src="js/users-page.js" type="module"></script>
     <!-- <script defer src="js/entry_approval_page.js" type="module"></script> -->
@@ -279,6 +306,8 @@ <h5 class="modal-title" id="addAccountModalLabel">Approve or Reject User</h5>
                                             </tbody>
             
                                         </table>
+
+                                        
                                         <div class="modal-body">
                                             <form id="approvalForm">
                                                 <!-- <div class="form-group">
@@ -289,6 +318,16 @@ <h5 class="modal-title" id="addAccountModalLabel">Approve or Reject User</h5>
                                                     <div class="error-message" id="commentError" style="color: red;"></div>
                                                 </div>
                                                 <div class="mt-3">
+                                                    <div class="dropdown">
+                                                        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                                            Select a Role
+                                                        </button>
+                                                        <div class="dropdown-menu" id="role-dropdown" aria-labelledby="dropdownMenuButton">
+                                                            <a class="dropdown-item" href="#">Admin</a>
+                                                            <a class="dropdown-item" href="#">Manager</a>
+                                                            <a class="dropdown-item" href="#">Regular</a>
+                                                        </div>
+                                                    </div>
                                                     <button type="button" class="btn btn-success" id="approveButton">Approve</button>
                                                     <button type="button" class="btn btn-danger" id="rejectButton">Reject</button>
                                                 </div>
@@ -331,7 +370,7 @@ <h5 class="modal-title" id="addAccountModalLabel">Approve or Reject User</h5>
                                 </tbody>
 
                             </table>
-
+                            <!-- Modal for approved user -->
                             <div class="modal fade" id="approved-modal" tabindex="-1" role="dialog"
                                 aria-labelledby="editAccountModalLabel" aria-hidden="true">
                                 <div class="modal-dialog modal-lg" role="document">
@@ -358,6 +397,9 @@ <h5 class="modal-title" id="addAccountModalLabel">Approve or Reject Entry</h5>
                                             </tbody>
             
                                         </table>
+
+
+
                                         <div class="modal-body">
                                             <form id="approvalForm">
                                                 <div class="form-group">
diff --git a/public/js/users-page.js b/public/js/users-page.js
index e882ac3..97bb562 100644
--- a/public/js/users-page.js
+++ b/public/js/users-page.js
@@ -8,9 +8,12 @@ const approvedUsers = await getDocReferencesWithValue('users', 'approved', true)
 
 const rejectButton = document.getElementById('rejectButton');
 const approveButton = document.getElementById('approveButton');
+const dropDownButton = document.getElementById('dropdownMenuButton');
+const dropDownMenu = document.getElementById('role-dropdown');
 
 
-let currentEntry = null;
+let currentUser = null;
+let selectedRole = null;
 
 console.log("Num of Pending Users: ", pendingUsers.size);
 // console.log("Num of Rejected Entries: ", rejectedJournalEntries.size);
@@ -42,8 +45,8 @@ async function initializeTable(users, tableId, callback) {
             <td>${user.data().suspended}</td>
         `;
         row.addEventListener('click', async () => {
-            console.log("Row clicked, the entry is: ", user.id);
-            currentEntry = user.id;
+            console.log("Row clicked, the user is: ", user.id);
+            currentUser = user.id;
             callback(user);
         });
     }
@@ -125,6 +128,8 @@ rejectButton.addEventListener('click', async () => {
 
 approveButton.addEventListener('click', async () => {
     console.log("Approve Button Pressed");
+    const userData = await getDocumentReference('users', currentUser);
+    console.log("userData", userData);
     // const journalRef = await getDocumentReference("journals", currentEntry);
     // const transactions = journalRef.transactions;
     // console.log("transactions: ", transactions);
@@ -157,6 +162,24 @@ approveButton.addEventListener('click', async () => {
     // location.reload();
 });
 
+dropDownButton.addEventListener('click', async () => {
+    console.log('Dropdown pressed');
+    dropDownMenu.classList.toggle('show');
+});
+
+dropDownMenu.addEventListener('click', function (event) {
+    if (event.target.classList.contains('dropdown-item')) {
+        selectedRole = event.target.textContent;
+        console.log('Selected Role: ', selectedRole);
+    }
+})
 
+window.addEventListener('click', function (event) {
+    if (!event.target.matches('.btn-primary')) {
+        if (dropDownMenu.classList.contains('show')) {
+            dropDownMenu.classList.remove('show');
+        }
+    }
+});
   
   
\ No newline at end of file