Untitled

// We are importing necessary packages and components
import React, { useState } from 'react'; // We import React and useState hook from 'react'
import './pageLayout.css'; // Importing the CSS for page layout
import './employee.css'; // Importing the CSS for the employee
import * as FaIcons from 'react-icons/fa'; // Importing Icons from 'react-icons/fa'
import { IconContext } from 'react-icons'; // Importing IconContext from 'react-icons' to style the icons
import axios from 'axios'; // Importing axios for HTTP requests

// This is a functional component called Employee
export default function Employee() {
    // Using useState hooks to create state variables
    const [employees, setEmployees] = useState([]); // State for storing the list of employees
    const [searchInput, setSearchInput] = useState(''); // State for storing the search input
    const [getAllEmployees, setGetAllEmployees] = useState(true); // State for storing the flag that indicates whether to fetch all employees or not

    // This is an async function to fetch the details of an employee by their ID
    const fetchEmployeeById = async (id) => {
        // Making an HTTP GET request using axios to fetch the employee with the given ID
        const result = await axios.get(`http://localhost:8080/api/staff/${id}`);
        // Setting the received employee in the employees state
        setEmployees([result.data]);
    }

    // This is an async function to fetch the details of all employees
    const fetchAllEmployees = async () => {
        // Making an HTTP GET request using axios to fetch all employees
        const result = await axios.get('http://localhost:8080/api/staff');
        // Setting the received employees in the employees state
        setEmployees(result.data);
    }

    // This function is executed when the user clicks on the "Apply Filters" button
    const handleApplyFilters = (event) => {
        // This line prevents the page from being refreshed when the form is submitted
        event.preventDefault();

        // Check the value of getAllEmployees flag to determine which API to call
        if (getAllEmployees) {
            fetchAllEmployees();
        } else {
            fetchEmployeeById(searchInput);
        }
    }

    // The component returns JSX to be rendered
    return (
        <>
            {/* These two <br/> elements are creating some vertical spacing */}
            <br/><br/>
            <div className='header'>
                {/* The title of the filter section */}
                <h1>Table Filter</h1>
            </div>
            <div className="content">
                <div>
                    {/* The start of the form that contains the filter inputs */}
                    <form action="">
                        {/* A table layout is being used to arrange the filters */}
                        <table className="filterTable">
                            <tr>
                                <td className="filterCols">
                                    {/* An input field for the user to type a search query */}
                                    <input
                                        className="searchInput"
                                        type="text"
                                        placeholder="Search"
                                        value={searchInput} // This binds the input value to the searchInput state
                                        onChange={e => { // When the input value changes...
                                            setSearchInput(e.target.value); // ...update the searchInput state...
                                            setGetAllEmployees(!e.target.value); // ...and update the getAllEmployees state depending on whether there's a search query or not
                                        }}
                                    />
                                </td>
                                <td className="filterCols">
                                    {/* A group of checkbox inputs for filtering by position */}
                                    <label htmlFor="Position"><h3>Position</h3></label>
                                    <input type="checkbox" value="Associate"/>Associate<br/>
                                    <input type="checkbox" value="Manager"/>Manager<br/>
                                    <input type="checkbox" value="Office"/>Office<br/>
                                </td>
                                <td className="filterCols">
                                    {/* A group of checkbox inputs for filtering by permissions level */}
                                    <label htmlFor="permissions"><h3>Permissions</h3></label>
                                    Level 1<input type="checkbox" value="level-1"/><br/>
                                    Level 2<input type="checkbox" value="level-2"/><br/>
                                    Level 3<input type="checkbox" value="level-3"/><br/>
                                    Level 4<input type="checkbox" value="level-4"/><br/>
                                </td>
                                <td className='filterButton'>
                                    {/* A button that triggers the filter when clicked */}
                                    <button className='applyButton' onClick={handleApplyFilters}>APPLY FILTERS</button>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            {/* Another two <br/> elements for more vertical spacing */}
            <br/><br/>
            <IconContext.Provider value={{color: 'black'}}>
                {/* A conditional render: the following JSX will only be rendered if there are any employees in the employees array */}
                {employees.length > 0 && (
                    <>
                        <div className='header'>
                            {/* The title of the employees table */}
                            <h1>Employees Table</h1>
                        </div>
                        <div className="content">
                            <div>
                                {/* The start of the employees table */}
                                <table className="employeeTable">
                                    <tr>
                                        {/* The headers of the employees table */}
                                        <th>Employee ID</th>
                                        <th>Full Name</th>
                                        <th>Position</th>
                                        <th>Permissions</th>
                                        <th>Action</th>
                                    </tr>
                                    {/* Mapping through the employees array to generate a row for each employee */}
                                    {employees.map((employee) => (
                                        <tr key={employee.id}>
                                            {/* The employee's ID */}
                                            <td>{employee.id}</td>
                                            {/* The employee's full name, which is a concatenation of their first and last names */}
                                            <td>{employee.first_name + ' ' + employee.last_name}</td>
                                            {/* A placeholder for the employee's position */}
                                            <td>Position Placeholder</td>
                                            {/* The employee's permissions, which are extracted from their authorities and joined into a string */}
                                            <td>{employee.authorities.map((auth) => auth.authority).join(', ')}</td>
                                            <td>
                                                {/* Two buttons for editing and sharing the employee's data */}
                                                <button className="actionButtons">
                                                    <FaIcons.FaEdit /> {/* The edit icon */}
                                                </button>
                                                |
                                                <button className="actionButtons">
                                                    <FaIcons.FaShare /> {/* The share icon */}
                                                </button>
                                            </td>
                                        </tr>
                                    ))}
                                </table>
                            </div>
                        </div>
                    </>
                )}
            </IconContext.Provider>
        </>
    );
}