Untitled
unknown
javascript
2 years ago
10 kB
7
Indexable
/*
* This is a React functional component named 'Employee' which manages and displays a list of employees.
*
* Three state variables are maintained:
* - 'employees' holds the list of employee data fetched from the server.
* - 'searchInput' keeps the user's input for searching within the employee data.
* - 'getAllEmployees' is a flag used to determine if all employee data should be fetched or a search should be performed.
*
* Two asynchronous functions 'fetchAllEmployees' and 'searchEmployees' are defined for fetching all employee data and
* searching for specific employees respectively. They make HTTP GET requests to server endpoints using the 'axios' library.
*
* The 'handleApplyFilters' function serves as an event handler for the "Apply Filters" button click event. Depending on the
* value of 'searchInput', it calls either 'fetchAllEmployees' or 'searchEmployees' to update the 'employees' state.
*
* In the render method, a 'Table Filter' section and an 'Employees Table' section are displayed.
* The 'Table Filter' section contains a form with an input field for entering a search term and a button for applying filters.
* The 'Employees Table' section consists of a table where each row represents an employee. For each employee, their ID,
* full name, position, permissions, and action buttons for 'Edit' and 'Share' are displayed. This section is conditionally
* rendered based on whether the 'employees' state is empty or not.
*/
// 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 search for employees
const searchEmployees = async (searchText) => {
// Making an HTTP GET request using axios to search for employees
const result = await axios.get(`http://localhost:8080/api/staff/search/${searchText}`);
// Setting the received employees 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 (searchInput) {
searchEmployees(searchInput);
} else {
fetchAllEmployees();
}
}
// 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>
</>
);
}Editor is loading...