BACKEND DONE FOR ALL APPS

CEO/render/js/users_management.js

@@ -0,0 +1,142 @@
+document.addEventListener('DOMContentLoaded', async () => {
+    const backButton = document.getElementById('backButton');
+    backButton.addEventListener('click', async () => {
+        await window.electronAPI.closeUcSocket();
+        fadeOut('main_menu');
+    });
+
+    const operationCodes = await window.electronAPI.getOperationsCodes();
+    if (!operationCodes) {
+        alert('Internal error of the application.');
+        return;
+    }
+
+    // Open the TCP socket right after fetching the operation codes
+    if (!await window.electronAPI.openUcSocket()) {
+        alert('Failed to open socket. Internal error of the application.');
+        return;
+    }
+
+    let codeGetDepartments = operationCodes.GET_DEPARTMENTS;
+    let codeGetUsers = operationCodes.GET_USERS;
+    let codeDeleteUser = operationCodes.DELETE_USER;
+    let codeOk = operationCodes.OK;
+
+    // Fetch both users and departments, then display the users with their departments
+    async function fetchData() {
+        try {
+            // Fetch departments
+            const departmentsResponse = await fetchDepartments();
+            if (!departmentsResponse || departmentsResponse.operationCode !== codeOk) {
+                alert('Failed to fetch departments. Redirecting to main menu...');
+                await redirectToMainMenu();
+                return;
+            }
+
+            const departments = departmentsResponse.metaInfo.departments;
+
+            // Fetch users
+            const usersResponse = await fetchUsers();
+            if (!usersResponse || usersResponse.operationCode !== codeOk) {
+                alert('Failed to fetch users. Redirecting to main menu...');
+                await redirectToMainMenu();
+                return;
+            }
+
+            const users = usersResponse.metaInfo.users;
+
+            const usersContainer = document.getElementById('users-container');
+            usersContainer.innerHTML = ''; // Clear the container
+
+            // Filter out users in the CEO department
+            const ceoDepartment = departments.find(dept => dept.name.toLowerCase() === 'ceo');
+            const filteredUsers = users.filter(user => user.departmentId !== ceoDepartment.id);
+
+            // Check if there are no users after filtering
+            if (!filteredUsers.length) {
+                const noUsersMessage = document.createElement('p');
+                noUsersMessage.textContent = 'No users exist.';
+                noUsersMessage.classList.add('no-users-message'); // Add a class for styling
+                usersContainer.appendChild(noUsersMessage);
+                fadeIn(); // Fade in the container when the message is loaded
+                return;
+            }
+
+            // Render users if there are any
+            filteredUsers.forEach(user => {
+                const userDiv = document.createElement('div');
+                userDiv.classList.add('user-card');
+
+                // Create user name div
+                const nameDiv = document.createElement('div');
+                nameDiv.classList.add('user-name');
+                nameDiv.textContent = user.name;
+
+                // Find the user's department name using departmentId
+                const department = departments.find(dept => dept.id === user.departmentId);
+                const departmentName = department ? department.name : 'Unknown';
+
+                // Create department div
+                const departmentDiv = document.createElement('div');
+                departmentDiv.classList.add('user-department');
+                departmentDiv.textContent = `Department: ${departmentName}`;
+
+                // Create delete button
+                const deleteButton = document.createElement('button');
+                deleteButton.textContent = 'Delete';
+                deleteButton.classList.add('delete-button');
+                deleteButton.onclick = () => deleteUser(user.id);
+
+                // Append user info and delete button to the user div
+                userDiv.appendChild(nameDiv);
+                userDiv.appendChild(departmentDiv);
+                userDiv.appendChild(deleteButton);
+
+                // Append user div to the container
+                usersContainer.appendChild(userDiv);
+            });
+
+            fadeIn(); // Fade in the container when the users are loaded
+        } catch (error) {
+            console.error('Error fetching data:', error);
+            alert('An unexpected error occurred. Redirecting to main menu...');
+            await redirectToMainMenu();
+        }
+    }
+
+    async function fetchDepartments() {
+        // Send the request to get departments
+        if (!await window.electronAPI.sendUcMessage(codeGetDepartments)) {
+            return null;
+        }
+        return await waitForResponse();
+    }
+
+    async function fetchUsers() {
+        // Send the request to get users
+        if (!await window.electronAPI.sendUcMessage(codeGetUsers)) {
+            return null;
+        }
+        return await waitForResponse();
+    }
+
+    async function deleteUser(userId) {
+        // Find the index of the user in the dummy data
+        const userIndex = dummyUsers.findIndex(user => user.id === userId);
+
+        // If user found, remove it from the array
+        if (userIndex !== -1) {
+            dummyUsers.splice(userIndex, 1);
+            alert(`User with ID ${userId} deleted.`);
+            await fetchData(); // Refresh the users after deleting
+        }
+    }
+
+    async function redirectToMainMenu() {
+        await window.electronAPI.closeUcSocket();
+        fadeOut('main_menu');
+    }
+
+    // Fetch data on page load
+    await fetchData();
+});