1004 lines
32 KiB
JavaScript
1004 lines
32 KiB
JavaScript
// import React, { useState, useEffect } from "react";
|
|
// import { Button, Dropdown, Table, Modal, Form ,Row,Col} from "react-bootstrap";
|
|
// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
// import { faEdit, faTrashAlt, faPlus ,faBars} from "@fortawesome/free-solid-svg-icons";
|
|
// import "bootstrap/dist/css/bootstrap.min.css";
|
|
// import "../Dashboard/UserMaintainanceView.css";
|
|
|
|
// function UserMaintenanceView() {
|
|
// const [appUsers, setAppUsers] = useState([]);
|
|
// const [isSubMenu, setIsSubMenu] = useState(false);
|
|
// const [showAddItemPopup, setShowAddItemPopup] = useState(false);
|
|
// const [newItemData, setNewItemData] = useState({
|
|
// userId: "",
|
|
// username: "",
|
|
// fullName: "",
|
|
// email: "",
|
|
// mobileNumber: "",
|
|
// isActive: true,
|
|
// userGroupId: "",
|
|
// });
|
|
// const [recordsPerPage, setRecordsPerPage] = useState(10);
|
|
// const [visibleColumns, setVisibleColumns] = useState({
|
|
// userId: true,
|
|
// username: true,
|
|
// fullName: true,
|
|
// email: true,
|
|
// mobileNumber: true,
|
|
// isActive: true,
|
|
// userGroupId: true,
|
|
// actions: true,
|
|
|
|
// });
|
|
// const [isEditing, setIsEditing] = useState(false);
|
|
|
|
// useEffect(() => {
|
|
// const apiUrl = `${process.env.REACT_APP_API_URL}/api/getAllAppUser`;
|
|
// const token = localStorage.getItem("authToken");
|
|
|
|
// const fetchAppUsers = async () => {
|
|
// try {
|
|
// const response = await fetch(apiUrl, {
|
|
// method: "GET",
|
|
// headers: {
|
|
// "Content-Type": "application/json",
|
|
// Authorization: `Bearer ${token}`,
|
|
// },
|
|
// });
|
|
|
|
// if (!response.ok) {
|
|
// throw new Error(`HTTP error! status: ${response.status}`);
|
|
// }
|
|
|
|
// const data = await response.json();
|
|
// setAppUsers(data);
|
|
// } catch (error) {
|
|
// console.error("Fetching error:", error );
|
|
// }
|
|
// };
|
|
|
|
// fetchAppUsers();
|
|
// }, []);
|
|
|
|
// const toggleColumn = (column) => {
|
|
// setVisibleColumns(prevColumns => ({
|
|
// ...prevColumns,
|
|
// [column]: !prevColumns[column]
|
|
// }));
|
|
// };
|
|
// const handleAddItem = () => {
|
|
// setIsEditing(false);
|
|
// setNewItemData({
|
|
// userId: "",
|
|
// username: "",
|
|
// fullName: "",
|
|
// email: "",
|
|
// mobileNumber: "",
|
|
// isActive: true,
|
|
// userGroupId: "",
|
|
// });
|
|
// setShowAddItemPopup(true);
|
|
// };
|
|
|
|
// const handleInputChange = (event) => {
|
|
// const { name, value, type, checked } = event.target;
|
|
// setNewItemData((prev) => ({
|
|
// ...prev,
|
|
// [name]: type === "checkbox" ? checked : value,
|
|
// }));
|
|
// };
|
|
|
|
// const handleSubmit = (event) => {
|
|
// event.preventDefault();
|
|
// if (isEditing) {
|
|
// setAppUsers(
|
|
// appUsers.map((user) =>
|
|
// user.userId === newItemData.userId ? newItemData : user
|
|
// )
|
|
// );
|
|
// } else {
|
|
// const newUserId = `ID${appUsers.length + 1}`;
|
|
// setAppUsers([...appUsers, { ...newItemData, userId: newUserId }]);
|
|
// }
|
|
// setShowAddItemPopup(false);
|
|
// };
|
|
|
|
// const handleEdit = (userId) => {
|
|
// const userToEdit = appUsers.find((user) => user.userId === userId);
|
|
// setNewItemData(userToEdit);
|
|
// setIsEditing(true);
|
|
// setShowAddItemPopup(true);
|
|
// };
|
|
|
|
// const handleDelete = (userId) => {
|
|
// setAppUsers(appUsers.filter((user) => user.userId !== userId));
|
|
// };
|
|
|
|
// return(
|
|
// <div className="container mt-5">
|
|
|
|
// <div className="d-flex justify-content-between align-items-center mb-4">
|
|
// <h2 className="text-primary">User Maintenance</h2>
|
|
// <div>
|
|
// <Button onClick={handleAddItem} className="btn btn-primary">
|
|
// <FontAwesomeIcon icon={faPlus} /> ADD
|
|
// </Button>
|
|
// {isSubMenu && (
|
|
// <Button onClick={handleBackToMainMenu} className="btn btn-secondary">
|
|
// Back to Main Menu
|
|
// </Button>
|
|
// )}
|
|
// </div>
|
|
|
|
// </div>
|
|
|
|
// <div className="table-responsive">
|
|
// <Table striped bordered hover responsive className="shadow-sm">
|
|
// <thead className="thead-light">
|
|
// <tr>
|
|
// {Object.keys(visibleColumns).filter((key) => visibleColumns[key]).map((key) => (
|
|
// <th key={key}>
|
|
// {key.charAt(0).toUpperCase() + key.slice(1).toLowerCase()}
|
|
// </th>
|
|
|
|
// ))}
|
|
// </tr>
|
|
// </thead>
|
|
// <tbody className="tbody">
|
|
// {appUsers.length > 0 ? (
|
|
// appUsers.slice(0, recordsPerPage).map((user, index) => (
|
|
// <tr key={index}>
|
|
// {Object.keys(visibleColumns).filter((key) => visibleColumns[key]).map((key) => (
|
|
// <td key={key}>
|
|
// {key === "actions" ? (
|
|
// <div className="btn-group">
|
|
// <Button variant="light" size="sm" onClick={() => handleEdit(user.userId)}>
|
|
// <FontAwesomeIcon icon={faEdit} />
|
|
// </Button>
|
|
// <Button variant="light" size="sm" onClick={() => handleDelete(user.userId)}>
|
|
// <FontAwesomeIcon icon={faTrashAlt} />
|
|
// </Button>
|
|
// </div>
|
|
// ) : (
|
|
// user[key]
|
|
// )}
|
|
// </td>
|
|
// ))}
|
|
|
|
// {!isSubMenu && (
|
|
// <td className="text-center">
|
|
// <Button
|
|
// onClick={() => handleSubMenuClick(menuItem.menuItemId)}
|
|
// className="btn btn-sm btn-primary"
|
|
// >
|
|
// <FontAwesomeIcon icon={faBars} />
|
|
// </Button>
|
|
// </td>
|
|
// )}
|
|
// </tr>
|
|
// ))
|
|
// ) : (
|
|
|
|
// <tr>
|
|
// <td colSpan={Object.keys(visibleColumns).length} className="text-center">
|
|
// No users found. Please add new users.
|
|
// </td>
|
|
// </tr>
|
|
// )
|
|
// }
|
|
// </tbody>
|
|
// </Table>
|
|
// </div>
|
|
|
|
// {/* Manage Columns & Records Per Page */}
|
|
// <Row className="mt-4">
|
|
// <Col md={6}>
|
|
// <Dropdown>
|
|
// <Dropdown.Toggle variant="outline-primary">
|
|
// Manage Columns
|
|
// </Dropdown.Toggle>
|
|
// <Dropdown.Menu>
|
|
// {Object.keys(visibleColumns).map((column) => (
|
|
// <Dropdown.Item key={column} onClick={() => toggleColumn(column)}>
|
|
// <Form.Check
|
|
// type="checkbox"
|
|
// label={column.charAt(0).toUpperCase() + column.slice(1).toLowerCase()}
|
|
// checked={visibleColumns[column]}
|
|
// readOnly
|
|
// />
|
|
// </Dropdown.Item>
|
|
// ))}
|
|
// </Dropdown.Menu>
|
|
// </Dropdown>
|
|
// </Col>
|
|
// <Col md={6} className="d-flex justify-content-end">
|
|
// <Dropdown>
|
|
// <Dropdown.Toggle variant="outline-primary">
|
|
// Records Per Page
|
|
// </Dropdown.Toggle>
|
|
// <Dropdown.Menu>
|
|
// {[5, 10, 20, 50].map((number) => (
|
|
// <Dropdown.Item key={number} onClick={() => handleRecordsPerPageChange(number)}>
|
|
// {number}
|
|
// </Dropdown.Item>
|
|
// ))}
|
|
// </Dropdown.Menu>
|
|
// </Dropdown>
|
|
// </Col>
|
|
// </Row>
|
|
// <Modal show={showAddItemPopup} onHide={() => setShowAddItemPopup(false)}>
|
|
// <Modal.Header closeButton>
|
|
// <Modal.Title>{isEditing ? "Edit User" : "Add New User"}</Modal.Title>
|
|
// </Modal.Header>
|
|
// <Modal.Body>
|
|
// <Form onSubmit={handleSubmit}>
|
|
// <Form.Group controlId="formUsername">
|
|
// <Form.Label>Username</Form.Label>
|
|
// <Form.Control
|
|
// type="text"
|
|
// name="username"
|
|
// value={newItemData.username}
|
|
// onChange={handleInputChange}
|
|
// required
|
|
// />
|
|
// </Form.Group>
|
|
// <Form.Group controlId="formFullName">
|
|
// <Form.Label>Full Name</Form.Label>
|
|
// <Form.Control
|
|
// type="text"
|
|
// name="fullName"
|
|
// value={newItemData.fullName}
|
|
// onChange={handleInputChange}
|
|
// required
|
|
// />
|
|
// </Form.Group>
|
|
// <Form.Group controlId="formEmail">
|
|
// <Form.Label>Email</Form.Label>
|
|
// <Form.Control
|
|
// type="email"
|
|
// name="email"
|
|
// value={newItemData.email}
|
|
// onChange={handleInputChange}
|
|
// required
|
|
// />
|
|
// </Form.Group>
|
|
// <Form.Group controlId="formMobileNumber">
|
|
// <Form.Label>Mobile Number</Form.Label>
|
|
// <Form.Control
|
|
// type="text"
|
|
// name="mobileNumber"
|
|
// value={newItemData.mobileNumber}
|
|
// onChange={handleInputChange}
|
|
// required
|
|
// />
|
|
// </Form.Group>
|
|
// <Form.Group controlId="formActive">
|
|
// <Form.Check
|
|
// type="checkbox"
|
|
// label="Active?"
|
|
// name="isActive"
|
|
// checked={newItemData.isActive}
|
|
// onChange={handleInputChange}
|
|
// />
|
|
// </Form.Group>
|
|
// <Form.Group controlId="formUserGroupId">
|
|
// <Form.Label>User Group ID</Form.Label>
|
|
// <Form.Control
|
|
// type="text"
|
|
// name="userGroupId"
|
|
// value={newItemData.userGroupId}
|
|
// onChange={handleInputChange}
|
|
// />
|
|
// </Form.Group>
|
|
// <Modal.Footer>
|
|
// <Button variant="primary" onClick={() => setShowAddItemPopup(false)}>
|
|
// Close
|
|
// </Button>
|
|
// <Button variant="primary" type="submit">
|
|
// {isEditing ? "Update User" : "Add User"}
|
|
// </Button>
|
|
// </Modal.Footer>
|
|
// </Form>
|
|
// </Modal.Body>
|
|
// </Modal>
|
|
// </div>
|
|
// );
|
|
// }
|
|
|
|
// export default UserMaintenanceView;
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import {
|
|
Button,
|
|
Dropdown,
|
|
|
|
Modal,
|
|
Form,
|
|
Row,
|
|
Col,
|
|
InputGroup,
|
|
FormControl,
|
|
ModalFooter,
|
|
} from "react-bootstrap";
|
|
import { Table ,Pagination,
|
|
PaginationItem,
|
|
PaginationLink,} from 'reactstrap';
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import {
|
|
faEdit,
|
|
faTrashAlt,
|
|
faPlus,
|
|
faBars,
|
|
faTimes,
|
|
faDownload, faUpload,
|
|
faFileExcel
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import { FaSearch, FaTimes } from "react-icons/fa";
|
|
import "bootstrap/dist/css/bootstrap.min.css";
|
|
import "../Dashboard/CSS/CSS/UserMaintainanceView.css";
|
|
import { BsJournals } from "react-icons/bs";
|
|
import { toast } from "react-toastify";
|
|
import Spinner from '../../UIComponants/Spinner';
|
|
import { Tooltip, OverlayTrigger } from "react-bootstrap";
|
|
import * as XLSX from "xlsx";
|
|
import { getAllUsers ,createUser,updateUser,deleteUser} from "../../APIServices/UserMaintenanceAPI.js";
|
|
|
|
function UserMaintenanceView() {
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [appUsers, setAppUsers] = useState([]);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [showAddItemPopup, setShowAddItemPopup] = useState(false);
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [newItemData, setNewItemData] = useState({
|
|
userId: "",
|
|
username: "",
|
|
fullName: "",
|
|
email: "",
|
|
mob_no: "",
|
|
active: true,
|
|
usrGrpId: "",
|
|
});
|
|
|
|
const [recordsPerPage, setRecordsPerPage] = useState(10);
|
|
const [visibleColumns, setVisibleColumns] = useState({
|
|
userId: true,
|
|
username: true,
|
|
fullName: true,
|
|
email: true,
|
|
mob_no: true,
|
|
acitve : true,
|
|
usrGroupId: true,
|
|
actions: true,
|
|
});
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [loading, setLoading] = useState(true);
|
|
useEffect(() => {
|
|
const apiUrl = `${process.env.REACT_APP_API_URL}/api/getAllAppUser`;
|
|
const token = localStorage.getItem("authToken");
|
|
|
|
const fetchAppUsers = async () => {
|
|
try {
|
|
const response = await fetch(apiUrl, {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
setAppUsers(data);
|
|
} catch (error) {
|
|
console.error("Fetching error:", error);
|
|
}
|
|
};
|
|
|
|
fetchAppUsers();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
// Simulate loading data
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
}, 3000); // Simulated 3 seconds loading
|
|
}, []);
|
|
const toggleColumn = (column) => {
|
|
setVisibleColumns((prevColumns) => ({
|
|
...prevColumns,
|
|
[column]: !prevColumns[column],
|
|
}));
|
|
};
|
|
|
|
const handleSearch = (query) => {
|
|
setSearchQuery(query);
|
|
};
|
|
|
|
// const handleBack = () => {
|
|
// setViewMode("cards");
|
|
// };
|
|
|
|
const handleClose = () => {
|
|
setShowAddItemPopup(false); // Close the modal by setting the state to false
|
|
};
|
|
|
|
const handleAddItem = () => {
|
|
setIsEditing(false);
|
|
setNewItemData({
|
|
userId: "",
|
|
username: "",
|
|
fullName: "",
|
|
email: "",
|
|
mob_no : "",
|
|
active : true,
|
|
usrGrpId: "",
|
|
});
|
|
setShowAddItemPopup(true);
|
|
};
|
|
|
|
// const handleInputChange = (event) => {
|
|
// const { name, value, type, checked } = event.target;
|
|
// setNewItemData((prev) => ({
|
|
// ...prev,
|
|
// [name]: type === "checkbox" ? checked : value,
|
|
// }));
|
|
// };
|
|
const handleOpenModal = () => setShowModal(true);
|
|
const handleCloseModal = () => setShowModal(false);
|
|
const handleInputChange = (event) => {
|
|
const { name, type, checked, value } = event.target;
|
|
setNewItemData({
|
|
...newItemData,
|
|
[name]: type === "checkbox" ? checked : value,
|
|
});
|
|
};
|
|
// const handleSubmit = async (event) => {
|
|
// try {
|
|
// event.preventDefault();
|
|
|
|
// if (isEditing) {
|
|
// setAppUsers(
|
|
// appUsers.map((user) =>
|
|
// user.userId === newItemData.userId ? newItemData : user
|
|
// )
|
|
// );
|
|
// toast.success("User Updated Successfully...");
|
|
// } else {
|
|
|
|
// const newUserId = `ID${appUsers.length + 1}`;
|
|
// setAppUsers([...appUsers, { ...newItemData, userId: newUserId }]);
|
|
// toast.success("User added successfully!");
|
|
// }
|
|
// setShowAddItemPopup(false);
|
|
// } catch (error) {
|
|
// toast.error("There was an error while submitting the USER.");
|
|
// console.error("Error in handleSubmit:", error); // Log the error for debugging
|
|
// }
|
|
// };
|
|
|
|
|
|
const handleSubmit = async (event) => {
|
|
event.preventDefault();
|
|
|
|
try {
|
|
if (isEditing) {
|
|
// If editing, update the user locally
|
|
console.log("update api is applying...");
|
|
const data = await updateUser(newItemData);
|
|
console.log("update user data",data);
|
|
setAppUsers(
|
|
appUsers.map((user) =>
|
|
user.userId === newItemData.userId ? newItemData : user
|
|
)
|
|
);
|
|
toast.success("User Updated Successfully...");
|
|
} else {
|
|
console.log("post api is applying...")
|
|
// If not editing, call the createUser API to add the new user
|
|
const response = await createUser(newItemData);
|
|
if (response && response.data) {
|
|
// On success, add the new user to the local state
|
|
const newUserId = `ID${appUsers.length + 1}`;
|
|
setAppUsers([...appUsers, { ...newItemData, userId: newUserId }]);
|
|
toast.success("User added successfully!");
|
|
console.log("User added successfully:", response.data);
|
|
}
|
|
}
|
|
|
|
// Close the popup after submit
|
|
setShowAddItemPopup(false);
|
|
|
|
} catch (error) {
|
|
// Handle any errors that occur during submission
|
|
toast.error("There was an error while submitting the USER.");
|
|
console.error("Error in handleSubmit:", error); // Log the error for debugging
|
|
}
|
|
};
|
|
|
|
|
|
const handleEdit = (userId) => {
|
|
try {
|
|
const userToEdit = appUsers.find((user) => user.userId === userId);
|
|
setNewItemData(userToEdit);
|
|
setIsEditing(true);
|
|
setShowAddItemPopup(true);
|
|
|
|
} catch (error) {
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const handleDelete = async (userId) => {
|
|
const data = await deleteUser(userId);
|
|
console.log("deleted data",data);
|
|
setAppUsers(appUsers.filter((user) => user.userId !== userId));
|
|
toast.success("User deleted ....")
|
|
};
|
|
|
|
const handleRecordsPerPageChange = (number) => {
|
|
setRecordsPerPage(number);
|
|
setCurrentPage(1);
|
|
};
|
|
|
|
const totalPages = Math.ceil(appUsers.length / recordsPerPage);
|
|
|
|
const handlePageChange = (pageNumber) => {
|
|
setCurrentPage(pageNumber);
|
|
};
|
|
|
|
const handleFileChange = (event) =>{
|
|
const file = event.target.files[0];
|
|
if (file) {
|
|
console.log("Selected file:", file.name); // For debugging or processing
|
|
}
|
|
}
|
|
|
|
const handleUpload = () => {
|
|
// Simulate file upload success
|
|
setTimeout(() => {
|
|
toast.success("File uploaded successfully!"); // Show toaster notification
|
|
setShowModal(false); // Close modal
|
|
}, 1000);
|
|
};
|
|
|
|
const exportToExcel = () => {
|
|
const worksheet = XLSX.utils.json_to_sheet([]);
|
|
const workbook = XLSX.utils.book_new();
|
|
XLSX.utils.book_append_sheet(workbook, worksheet, "UserDetails");
|
|
XLSX.writeFile(workbook, "UserMaintenance.xlsx");
|
|
};
|
|
|
|
const slicedUsers = appUsers
|
|
.filter((user) =>
|
|
user.username.toLowerCase().includes(searchQuery.toLowerCase())
|
|
)
|
|
.slice((currentPage - 1) * recordsPerPage, currentPage * recordsPerPage);
|
|
|
|
return (
|
|
<div style={{marginTop:"11rem"}}>
|
|
{loading ? (
|
|
<Spinner/>
|
|
):(
|
|
<div className="container-fluid mt-5">
|
|
{/* Header */}
|
|
<div className="d-flex justify-content-between align-items-center mb-4">
|
|
<h1 className="title_main">User Maintenance</h1>
|
|
</div>
|
|
|
|
<Row className="align-items-center my-3">
|
|
{/* Left: Search Bar */}
|
|
<Col
|
|
xs={12}
|
|
md={8}
|
|
lg={6}
|
|
className="d-flex justify-content-center my-3"
|
|
>
|
|
<InputGroup
|
|
className="search-bar"
|
|
style={{
|
|
borderRadius: "10px",
|
|
overflow: "hidden",
|
|
boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
|
|
width: "100%",
|
|
maxWidth: "528px", // Set max-width to limit overall width
|
|
paddingRight: "-15px", // Increase padding on the right side
|
|
}}
|
|
>
|
|
<InputGroup.Text
|
|
style={{
|
|
backgroundColor: "#0E6591",
|
|
color: "#fff",
|
|
padding: "10px 15px",
|
|
}}
|
|
>
|
|
<FaSearch />
|
|
</InputGroup.Text>
|
|
<FormControl
|
|
placeholder="Search"
|
|
value={searchQuery}
|
|
onChange={(e) => handleSearch(e.target.value)}
|
|
style={{
|
|
padding: "10px",
|
|
border: "none",
|
|
paddingRight: "5px", // More space on the right side of input field
|
|
}}
|
|
/>
|
|
</InputGroup>
|
|
</Col>
|
|
|
|
{/*Add Icons */}
|
|
<Col xs={12} md={4} lg={6} className="d-flex justify-content-end">
|
|
<>
|
|
{/* Add Icon */}
|
|
<OverlayTrigger placement="bottom" overlay={<Tooltip>Add Items</Tooltip>}>
|
|
<FontAwesomeIcon
|
|
icon={faPlus}
|
|
onClick={() => handleAddItem(true)}
|
|
style={{
|
|
cursor: "pointer",
|
|
fontSize: "1.5rem",
|
|
color: "#747264",
|
|
marginRight: "20px",
|
|
}}
|
|
data-bs-toggle="tooltip"
|
|
data-bs-placement="bottom"
|
|
title="Add Item"
|
|
/>
|
|
</OverlayTrigger>
|
|
|
|
<OverlayTrigger placement="bottom" overlay={<Tooltip>Download template</Tooltip>}>
|
|
<FontAwesomeIcon
|
|
icon={faDownload}
|
|
onClick={() => handleAddItem(true)}
|
|
style={{
|
|
cursor: "pointer",
|
|
fontSize: "1.5rem",
|
|
color: "#747264",
|
|
marginRight: "20px",
|
|
}}
|
|
/>
|
|
</OverlayTrigger>
|
|
<OverlayTrigger placement="bottom" overlay={<Tooltip>Import</Tooltip>}>
|
|
<FontAwesomeIcon
|
|
icon={faUpload}
|
|
onClick={() => handleOpenModal(true)}
|
|
style={{
|
|
cursor: "pointer",
|
|
fontSize: "1.5rem",
|
|
color: "#747264",
|
|
marginRight: "20px",
|
|
}}
|
|
/>
|
|
</OverlayTrigger>
|
|
<OverlayTrigger placement="bottom" overlay={<Tooltip>XLSX</Tooltip>}>
|
|
<FontAwesomeIcon
|
|
icon={faFileExcel}
|
|
onClick={() => exportToExcel(true)}
|
|
style={{
|
|
cursor: "pointer",
|
|
fontSize: "1.5rem",
|
|
color: "#747264",
|
|
marginRight: "20px",
|
|
}}
|
|
/>
|
|
</OverlayTrigger>
|
|
|
|
<OverlayTrigger placement="bottom" overlay={<Tooltip>Menu Items</Tooltip>}>
|
|
<FontAwesomeIcon
|
|
icon={faBars}
|
|
style={{
|
|
cursor: "pointer",
|
|
fontSize: "1.5rem",
|
|
color: "#747264",
|
|
}}
|
|
/>
|
|
</OverlayTrigger>
|
|
|
|
</>
|
|
</Col>
|
|
</Row>
|
|
|
|
<Modal show={showModal} onHide={handleCloseModal} centered>
|
|
<Modal.Header closeButton>
|
|
<Modal.Title>Import File</Modal.Title>
|
|
</Modal.Header>
|
|
<Modal.Body>
|
|
<Form>
|
|
<Form.Group controlId="formFile" className="mb-3">
|
|
<Form.Label>Select a file to import:</Form.Label>
|
|
<Form.Control
|
|
type="file"
|
|
accept=".xlsx, .xls, .csv" // Restrict file types
|
|
onChange={handleFileChange} // Handle file selection
|
|
/>
|
|
</Form.Group>
|
|
</Form>
|
|
</Modal.Body>
|
|
<Modal.Footer>
|
|
<Button variant="secondary" onClick={handleCloseModal}>
|
|
Cancel
|
|
</Button>
|
|
<Button variant="primary" onClick={handleUpload}>
|
|
Upload
|
|
</Button>
|
|
</Modal.Footer>
|
|
</Modal>
|
|
|
|
{/* Table */}
|
|
<div className="table-responsive">
|
|
<Table striped hover responsive align="middle" className=" table-flush shadow-sm">
|
|
<thead className="custom_header">
|
|
<tr>
|
|
{Object.keys(visibleColumns).map(
|
|
(key) =>
|
|
visibleColumns[key] && (
|
|
<th key={key}>
|
|
{key.charAt(0).toUpperCase() + key.slice(1).toLowerCase()}
|
|
</th>
|
|
)
|
|
)}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="tbody">
|
|
{slicedUsers.length === 0 ? (
|
|
<tr>
|
|
<td
|
|
colSpan={
|
|
Object.keys(visibleColumns).filter((key) => visibleColumns[key])
|
|
.length
|
|
}
|
|
className="text-center"
|
|
>
|
|
|
|
</td>
|
|
</tr>
|
|
) : ( slicedUsers.map((user, index) => (
|
|
<tr key={index}>
|
|
{Object.keys(visibleColumns).map((key) =>
|
|
visibleColumns[key] ? (
|
|
<td className="text-center" key={key}>
|
|
{key === "actions" ? (
|
|
<div className="btn-group">
|
|
<FontAwesomeIcon
|
|
icon={faEdit}
|
|
onClick={() => handleEdit(user.userId)}
|
|
style={{
|
|
cursor: "pointer",
|
|
fontSize: "1rem",
|
|
color: "green", // edit icon color
|
|
marginRight: "15px", // space between icons
|
|
}}
|
|
/>
|
|
<FontAwesomeIcon
|
|
icon={faTrashAlt}
|
|
onClick={() => handleDelete(user.userId)}
|
|
style={{
|
|
cursor: "pointer",
|
|
fontSize: "1rem",
|
|
color: "#dc3545", // delete icon color
|
|
}}
|
|
/>
|
|
</div>
|
|
) : key === "isActive" ? (
|
|
<span
|
|
className="status"
|
|
style={{
|
|
color: user.isActive ? "green" : "red", // Dynamic text color
|
|
backgroundColor: user.isActive
|
|
? "#d4f7d4"
|
|
: "#f7d4d4", // Faint green or red background
|
|
padding: "4px 8px", // Add some padding for the background effect
|
|
borderRadius: "4px", // Rounded corners
|
|
display: "inline-block", // Ensure the background only affects the text
|
|
}}
|
|
>
|
|
{user.isActive ? "Active" : "Inactive"}
|
|
</span>
|
|
) : (
|
|
user[key]
|
|
)}
|
|
</td>
|
|
) : null
|
|
)}
|
|
</tr>
|
|
)))}
|
|
{appUsers.length === 0 && (
|
|
<tr>
|
|
<td
|
|
colSpan={
|
|
Object.keys(visibleColumns).filter(
|
|
(key) => visibleColumns[key]
|
|
).length
|
|
}
|
|
className="text-center"
|
|
>
|
|
No users found. Please add new users.
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</Table>
|
|
</div>
|
|
|
|
<Row className="mt-4">
|
|
<Col md={6} className="d-flex justify-content-start">
|
|
<Dropdown>
|
|
<Dropdown.Toggle
|
|
variant="outline-primary"
|
|
className="custom_manage_column_button"
|
|
>
|
|
Manage Columns
|
|
</Dropdown.Toggle>
|
|
<Dropdown.Menu>
|
|
{Object.keys(visibleColumns).map((column) => (
|
|
<Dropdown.Item
|
|
key={column}
|
|
onClick={() => toggleColumn(column)}
|
|
>
|
|
<Form.Check
|
|
type="checkbox"
|
|
label={
|
|
column.charAt(0).toUpperCase() +
|
|
column.slice(1).toLowerCase()
|
|
}
|
|
checked={visibleColumns[column]}
|
|
readOnly
|
|
className="custom-checkbox"
|
|
/>
|
|
</Dropdown.Item>
|
|
))}
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
</Col>
|
|
|
|
<Col md={6} className="d-flex justify-content-end">
|
|
<Dropdown>
|
|
<Dropdown.Toggle
|
|
variant="outline-primary"
|
|
className="custom_manage_column_button px-4 py-2 border-2 rounded-3 shadow-sm"
|
|
id="dropdown-custom-components"
|
|
>
|
|
<BsJournals />
|
|
</Dropdown.Toggle>
|
|
<Dropdown.Menu className="border-0 rounded-3 shadow-lg" align="end">
|
|
{[1, 5, 10, 20, 50].map((number) => (
|
|
<Dropdown.Item
|
|
key={number}
|
|
onClick={() => handleRecordsPerPageChange(number)}
|
|
className="text-dark d-flex justify-content-between align-items-center"
|
|
>
|
|
<span>{number}</span>
|
|
<i
|
|
className="fa fa-check-circle"
|
|
style={{
|
|
display: recordsPerPage === number ? "inline" : "none",
|
|
}}
|
|
/>
|
|
</Dropdown.Item>
|
|
))}
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
</Col>
|
|
</Row>
|
|
|
|
<Pagination className="pagination">
|
|
<PaginationItem disabled={currentPage === 1}>
|
|
<PaginationLink previous onClick={() => handlePageChange(currentPage - 1)} />
|
|
</PaginationItem>
|
|
{[...Array(totalPages)].map((_, index) => (
|
|
<PaginationItem key={index} active={index + 1 === currentPage}>
|
|
<PaginationLink onClick={() => handlePageChange(index + 1)} style={{ color: '#0b6592' }}>
|
|
{index + 1}
|
|
</PaginationLink>
|
|
</PaginationItem>
|
|
))}
|
|
<PaginationItem disabled={currentPage === totalPages}>
|
|
<PaginationLink next onClick={() => handlePageChange(currentPage + 1)} />
|
|
</PaginationItem>
|
|
</Pagination>
|
|
|
|
<Modal show={showAddItemPopup} onHide={handleClose}>
|
|
<Modal.Header>
|
|
<Modal.Title>{isEditing ? "Edit User" : "Add New User"}</Modal.Title>
|
|
<FontAwesomeIcon
|
|
icon={faTimes}
|
|
size="lg"
|
|
onClick={handleClose}
|
|
style={{
|
|
position: "absolute",
|
|
top: "25px",
|
|
right: "25px",
|
|
cursor: "pointer",
|
|
}}
|
|
/>
|
|
</Modal.Header>
|
|
<Form onSubmit={handleSubmit}>
|
|
<Modal.Body>
|
|
{/* Form Content */}
|
|
<Form.Group className="mb-3" controlId="username">
|
|
<Form.Label>Username</Form.Label>
|
|
<Form.Control
|
|
type="text"
|
|
name="username"
|
|
value={newItemData.username}
|
|
onChange={handleInputChange}
|
|
required
|
|
className="custom-hover-border"
|
|
/>
|
|
</Form.Group>
|
|
<Form.Group className="mb-3" controlId="fullName">
|
|
<Form.Label>Full Name</Form.Label>
|
|
<Form.Control
|
|
type="text"
|
|
name="fullName"
|
|
value={newItemData.fullName}
|
|
onChange={handleInputChange}
|
|
required
|
|
className="custom-hover-border"
|
|
/>
|
|
</Form.Group>
|
|
<Form.Group className="mb-3" controlId="email">
|
|
<Form.Label>Email</Form.Label>
|
|
<Form.Control
|
|
type="email"
|
|
name="email"
|
|
value={newItemData.email}
|
|
onChange={handleInputChange}
|
|
required
|
|
className="custom-hover-border"
|
|
/>
|
|
</Form.Group>
|
|
<Form.Group className="mb-3" controlId="mobileNumber">
|
|
<Form.Label>Mobile Number</Form.Label>
|
|
<Form.Control
|
|
type="text"
|
|
name="mobileNumber"
|
|
value={newItemData.mobaileNumber}
|
|
onChange={handleInputChange}
|
|
|
|
className="custom-hover-border"
|
|
/>
|
|
</Form.Group>
|
|
<Form.Group className="mb-3" controlId="formBasicUserGroup">
|
|
<Form.Label>User Group</Form.Label>
|
|
<Form.Control
|
|
type="text"
|
|
name="userGroupId"
|
|
value={newItemData.usrGrpId}
|
|
onChange={handleInputChange}
|
|
className="custom-hover-border"
|
|
/>
|
|
</Form.Group>
|
|
<Form.Group className="mb-3" controlId="isActive">
|
|
<Form.Check
|
|
type="checkbox"
|
|
label="Active"
|
|
name="isActive"
|
|
checked={newItemData.active}
|
|
onChange={handleInputChange}
|
|
/>
|
|
</Form.Group>
|
|
</Modal.Body>
|
|
<Modal.Footer>
|
|
<Button variant="primary" type="submit" className="custom_button px-4">
|
|
{isEditing ? "Save Changes" : "Add User"}
|
|
</Button>
|
|
<Button variant="secondary" onClick={handleClose} className="custom_button px-4">
|
|
Cancel
|
|
</Button>
|
|
</Modal.Footer>
|
|
</Form>
|
|
</Modal>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
);
|
|
}
|
|
|
|
export default UserMaintenanceView;
|