BACKEND DONE FOR ALL APPS

CEO/render/js/departments_management.js

@@ -0,0 +1,216 @@
+document.addEventListener('DOMContentLoaded', async () => {
+    const backButton = document.getElementById('backButton');
+    const form = document.getElementById('new-department-form');
+    const modifyModal = document.getElementById('modify-department-modal');
+    const closeModal = document.getElementById('close-modal');
+    const confirmModifyButton = document.getElementById('confirm-modify');
+    let currentDepartmentId = null;
+
+    // Retrieve operation codes via IPC
+    const operationCodes = await window.electronAPI.getOperationsCodes();
+    if (!operationCodes) {
+        await window.electronAPI.showAlert('Internal error of the application.');
+        return;
+    }
+
+    // Open the TCP socket right after fetching the operation codes
+    if (!await window.electronAPI.openUcSocket()) {
+        await window.electronAPI.showAlert('Failed to open socket. Internal error of the application.');
+        return;
+    }
+
+    let codeGetDepartments = operationCodes.GET_DEPARTMENTS;
+    let codeCreateDepartment = operationCodes.CREATE_DEPARTMENT;
+    let codeModifyDepartment = operationCodes.MODIFY_DEPARTMENT;
+    let codeDeleteDepartment = operationCodes.DELETE_DEPARTMENT;
+    let codeOk = operationCodes.OK;
+
+    // Set up the back button - close the socket before going back
+    backButton.addEventListener('click', async () => {
+        await window.electronAPI.closeUcSocket();  // Close the socket when going back
+        fadeOut('main_menu'); // Navigate to the main menu
+    });
+
+    // Set up the form for creating new departments
+    form.addEventListener('submit', async function (event) {
+        event.preventDefault(); // Prevent the form from refreshing the page
+        const departmentName = document.getElementById('departmentName').value;
+
+        if (departmentName.trim()) {
+            await createDepartment(departmentName); // Call createDepartment function when the form is submitted
+        }
+    });
+
+    // Fetch the departments on page load
+    await fetchDepartments();
+
+    // Fetch departments and render them in the left block
+    async function fetchDepartments() {
+        const departmentsContainer = document.getElementById('departments-container');
+
+        // Send the request to get the departments
+        if (!await window.electronAPI.sendUcMessage(codeGetDepartments)) {
+            await window.electronAPI.showAlert("Failed to send request.");
+            await redirectToMainMenu();
+            return;
+        }
+
+        const response = await waitForResponse();
+        if (!response || response.operationCode !== codeOk) {
+            await window.electronAPI.showAlert("Unable to fetch departments.");
+            await redirectToMainMenu();
+            return;
+        }
+
+        departmentsContainer.innerHTML = ''; // Clear any existing data
+
+        const departments = response.metaInfo.departments;
+
+        // Filter out CEO department
+        const filteredDepartments = departments.filter(department => department.name.toLowerCase() !== 'ceo');
+
+        // Check if there are no departments after filtering
+        if (!filteredDepartments.length) {
+            const noDepartmentsMessage = document.createElement('p');
+            noDepartmentsMessage.textContent = 'No departments exist.';
+            noDepartmentsMessage.classList.add('no-departments-message'); // Add a class for styling
+            departmentsContainer.appendChild(noDepartmentsMessage);
+            return;
+        }
+
+        // Iterate over the remaining departments and render them
+        filteredDepartments.forEach(department => {
+            const departmentDiv = document.createElement('div');
+            departmentDiv.classList.add('department-card');
+
+            // Create department name div
+            const nameDiv = document.createElement('div');
+            nameDiv.classList.add('department-name');
+            nameDiv.textContent = department.name;
+
+            // Create modify button
+            const modifyButton = document.createElement('button');
+            modifyButton.textContent = 'Modify';
+            modifyButton.classList.add('modify-button');
+            modifyButton.dataset.departmentId = department.id;
+
+            // Create delete button
+            const deleteButton = document.createElement('button');
+            deleteButton.textContent = 'Delete';
+            deleteButton.classList.add('delete-button');
+            deleteButton.dataset.departmentId = department.id;
+
+            // Append department info and buttons to the department div
+            departmentDiv.appendChild(nameDiv);
+            departmentDiv.appendChild(modifyButton);
+            departmentDiv.appendChild(deleteButton);
+
+            // Append department div to the container
+            departmentsContainer.appendChild(departmentDiv);
+        });
+
+        // Add click event listeners for all dynamically created buttons
+        addEventListenersToButtons();
+    }
+
+    // Add event listeners to dynamically created buttons
+    function addEventListenersToButtons() {
+        const modifyButtons = document.querySelectorAll('.modify-button');
+        const deleteButtons = document.querySelectorAll('.delete-button');
+
+        modifyButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                currentDepartmentId = button.dataset.departmentId;
+                openModifyModal(); // Open the modal when modify button is clicked
+            });
+        });
+
+        deleteButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                const departmentId = button.dataset.departmentId;
+                deleteDepartment(departmentId);
+            });
+        });
+    }
+
+    // Open the modify modal
+    function openModifyModal() {
+        modifyModal.style.display = 'block';
+    }
+
+    // Close the modify modal
+    function closeModifyModal() {
+        modifyModal.style.display = 'none';
+        currentDepartmentId = null;
+    }
+
+    // Handle modify modal close event
+    closeModal.addEventListener('click', closeModifyModal);
+
+    // Handle department modification
+    confirmModifyButton.addEventListener('click', async () => {
+        const newDepartmentName = document.getElementById('new-department-name').value;
+        if (newDepartmentName.trim() && currentDepartmentId) {
+            await modifyDepartment(currentDepartmentId, newDepartmentName);
+            closeModifyModal(); // Close the modal after modification
+        }
+    });
+
+    async function modifyDepartment(departmentId, newName) {
+        if (!await window.electronAPI.sendUcMessage(codeModifyDepartment, {
+            departmentId: departmentId,
+            newDepartmentName: newName
+        })) {
+            await window.electronAPI.showAlert('Failed to send modification request.');
+            return;
+        }
+
+        const response = await waitForResponse();
+        if (response && response.operationCode === codeOk) {
+            await window.electronAPI.showAlert(`Department modified: ${newName}`);
+            await fetchDepartments(); // Refresh the department list after modification
+        } else {
+            await window.electronAPI.showAlert('Failed to modify the department.');
+        }
+    }
+
+    async function deleteDepartment(departmentId) {
+        const confirmDelete = confirm("Are you sure you want to delete this department?");
+        if (confirmDelete) {
+            if (!await window.electronAPI.sendUcMessage(codeDeleteDepartment, { departmentId })) {
+                await window.electronAPI.showAlert('Failed to send delete request.');
+                return;
+            }
+
+            const response = await waitForResponse();
+            if (response && response.operationCode === codeOk) {
+                await window.electronAPI.showAlert("Department deleted successfully.");
+                await fetchDepartments(); // Refresh the department list after deletion
+            } else {
+                await window.electronAPI.showAlert("Failed to delete the department.");
+            }
+        }
+    }
+
+    // Function to create a new department
+    async function createDepartment(departmentName) {
+        if (!await window.electronAPI.sendUcMessage(codeCreateDepartment, { departmentName })) {
+            await window.electronAPI.showAlert('Failed to send create request.');
+            return;
+        }
+
+        const response = await waitForResponse();
+        if (response && response.operationCode === codeOk) {
+            await window.electronAPI.showAlert(`New department created: ${departmentName}`);
+            await fetchDepartments(); // Refresh the department list
+        } else {
+            await window.electronAPI.showAlert("Failed to create department.");
+        }
+    }
+
+    // Redirect to main menu
+    async function redirectToMainMenu() {
+        await window.electronAPI.closeUcSocket();
+        fadeOut('main_menu');
+    }
+});