769 lines
25 KiB
JavaScript
769 lines
25 KiB
JavaScript
|
import React, { useState, useEffect } from "react";
|
||
|
|
import {
|
||
|
|
Button,
|
||
|
|
Dropdown,
|
||
|
|
Modal,
|
||
|
|
Form,
|
||
|
|
Row,
|
||
|
|
Col,
|
||
|
|
InputGroup,
|
||
|
|
FormControl,
|
||
|
|
} from "react-bootstrap";
|
||
|
|
import { Table, Pagination, PaginationItem, PaginationLink } from "reactstrap";
|
||
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
|
|
import {
|
||
|
|
faEdit,
|
||
|
|
faTrashAlt,
|
||
|
|
faPlus,
|
||
|
|
faBars,
|
||
|
|
faTimes,
|
||
|
|
faFileExcel,
|
||
|
|
faUpload,
|
||
|
|
faDownload,
|
||
|
|
} from "@fortawesome/free-solid-svg-icons";
|
||
|
|
import "bootstrap/dist/css/bootstrap.min.css";
|
||
|
|
import "../Dashboard/CSS/CSS/CommonStyle.css";
|
||
|
|
import { FaSearch } from "react-icons/fa";
|
||
|
|
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 { fetchUserGroups } from "../../APIServices/UserGroupMaintenanceApi";
|
||
|
|
import ExcelControlAPI from "../../APIServices/ExcelControlApi";
|
||
|
|
import { createUserGroup, deleteUserGroup, updateUserGroup} from "../../APIServices/UserGroupMaintenanceApi";
|
||
|
|
|
||
|
|
|
||
|
|
export function UserGroupMaintenance() {
|
||
|
|
const [userGroups, setUserGroups] = useState([]);
|
||
|
|
const [showAddItemPopup, setShowAddItemPopup] = useState(false);
|
||
|
|
const [currentPage, setCurrentPage] = useState(1);
|
||
|
|
const [searchQuery, setSearchQuery] = useState("");
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
const [showModal, setShowModal] = useState(false);
|
||
|
|
const [excelData, setExcelData] = useState([]);
|
||
|
|
const [newGroupData, setNewGroupData] = useState({
|
||
|
|
usrGrp: "",
|
||
|
|
groupName: "",
|
||
|
|
groupDesc: "",
|
||
|
|
status: "",
|
||
|
|
groupLevel: "",
|
||
|
|
});
|
||
|
|
const [recordsPerPage, setRecordsPerPage] = useState(10);
|
||
|
|
const [visibleColumns, setVisibleColumns] = useState({
|
||
|
|
usrGrp: true,
|
||
|
|
groupName: true,
|
||
|
|
groupDesc: true,
|
||
|
|
status: true,
|
||
|
|
groupLevel: true,
|
||
|
|
});
|
||
|
|
const [isEditing, setIsEditing] = useState(false);
|
||
|
|
|
||
|
|
// useEffect(() => {
|
||
|
|
// const apiUrl = `${process.env.REACT_APP_API_URL}/api/getAllUsrGrp`;
|
||
|
|
// const token = localStorage.getItem("authToken");
|
||
|
|
|
||
|
|
// const fetchUserGroups = 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();
|
||
|
|
// setUserGroups(data);
|
||
|
|
// } catch (error) {
|
||
|
|
// console.error("Fetching error:", error);
|
||
|
|
// }
|
||
|
|
// };
|
||
|
|
|
||
|
|
// fetchUserGroups();
|
||
|
|
// }, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const loadUserGroups = async () => {
|
||
|
|
try {
|
||
|
|
const data = await fetchUserGroups();
|
||
|
|
setUserGroups(data);
|
||
|
|
console.log("all user group data ", data);
|
||
|
|
} catch (error) {
|
||
|
|
toast.error("Failed to load user groups.");
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
loadUserGroups();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
// Simulate loading data
|
||
|
|
setTimeout(() => {
|
||
|
|
setLoading(false);
|
||
|
|
}, 3000); // Simulated 3 seconds loading
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleOpenModal = () => setShowModal(true);
|
||
|
|
const handleCloseModal = () => setShowModal(false);
|
||
|
|
|
||
|
|
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 = async (fileType) => {
|
||
|
|
try {
|
||
|
|
// Fetch binary Excel data
|
||
|
|
const response = await ExcelControlAPI.demoDownload(fileType);
|
||
|
|
|
||
|
|
// Log the response size for debugging
|
||
|
|
const dataSize = response.data?.byteLength || response.data?.length;
|
||
|
|
console.log("Response Data Size:", dataSize);
|
||
|
|
|
||
|
|
// If file is too large, show error and exit
|
||
|
|
const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50MB
|
||
|
|
if (dataSize > MAX_FILE_SIZE) {
|
||
|
|
console.error("File is too large to process");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Convert binary data to a Blob
|
||
|
|
const blob = new Blob([response.data], {
|
||
|
|
type: "application/vnd.ms-excel",
|
||
|
|
});
|
||
|
|
|
||
|
|
// Use FileReader to convert Blob to ArrayBuffer
|
||
|
|
const arrayBuffer = await new Promise((resolve, reject) => {
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.onload = () => resolve(reader.result);
|
||
|
|
reader.onerror = reject;
|
||
|
|
reader.readAsArrayBuffer(blob);
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log("ArrayBuffer Size:", arrayBuffer.byteLength);
|
||
|
|
|
||
|
|
// Parse Excel data
|
||
|
|
const workbook = XLSX.read(arrayBuffer, { type: "array" });
|
||
|
|
console.log("workbook", workbook);
|
||
|
|
const firstSheetName = workbook.SheetNames[0];
|
||
|
|
const worksheet = workbook.Sheets[firstSheetName];
|
||
|
|
|
||
|
|
// Convert worksheet to JSON
|
||
|
|
const jsonData = XLSX.utils.sheet_to_json(worksheet);
|
||
|
|
console.log("Parsed JSON Data:", jsonData);
|
||
|
|
|
||
|
|
// Create a new workbook and trigger download
|
||
|
|
const newWorksheet = XLSX.utils.json_to_sheet(jsonData);
|
||
|
|
const newWorkbook = XLSX.utils.book_new();
|
||
|
|
XLSX.utils.book_append_sheet(newWorkbook, newWorksheet, fileType);
|
||
|
|
XLSX.writeFile(newWorkbook, `${fileType}_processed.xlsx`);
|
||
|
|
|
||
|
|
console.log("Excel file generated successfully!");
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error exporting to Excel:", error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const toggleColumn = (column) => {
|
||
|
|
setVisibleColumns((prev) => ({
|
||
|
|
...prev,
|
||
|
|
[column]: !prev[column],
|
||
|
|
}));
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleAddItem = () => {
|
||
|
|
setIsEditing(false);
|
||
|
|
setNewGroupData({
|
||
|
|
usrGrp: "",
|
||
|
|
groupName: "",
|
||
|
|
groupDesc: "",
|
||
|
|
status: "",
|
||
|
|
groupLevel: "",
|
||
|
|
});
|
||
|
|
setShowAddItemPopup(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleInputChange = (event) => {
|
||
|
|
const { name, value } = event.target;
|
||
|
|
setNewGroupData({ ...newGroupData, [name]: value });
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSubmit = async (event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
|
||
|
|
try {
|
||
|
|
// Validate input fields
|
||
|
|
if (
|
||
|
|
!newGroupData.usrGrp ||
|
||
|
|
!newGroupData.groupName ||
|
||
|
|
!newGroupData.groupDesc ||
|
||
|
|
!newGroupData.status ||
|
||
|
|
!newGroupData.groupLevel
|
||
|
|
) {
|
||
|
|
toast.error("Please make sure all fields are filled out.");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (isEditing) {
|
||
|
|
// Update existing group data
|
||
|
|
setUserGroups(
|
||
|
|
userGroups.map((group) =>
|
||
|
|
group.usrGrp === newGroupData.usrGrp ? newGroupData : group
|
||
|
|
)
|
||
|
|
);
|
||
|
|
toast.success("Menu access updated successfully!");
|
||
|
|
} else {
|
||
|
|
// Make an API call to create a new user group
|
||
|
|
const newGroup = { ...newGroupData }; // Prepare data for API
|
||
|
|
const response = await createUserGroup(newGroup); // Call API function
|
||
|
|
|
||
|
|
if (response && response.data) {
|
||
|
|
// Update userGroups state with the newly created group
|
||
|
|
setUserGroups([...userGroups, response.data]);
|
||
|
|
|
||
|
|
toast.success("Menu access added successfully!");
|
||
|
|
} else {
|
||
|
|
toast.error("Failed to add menu access.");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Close the modal and reset the form
|
||
|
|
setShowAddItemPopup(false);
|
||
|
|
setNewGroupData({
|
||
|
|
usrGrp: "",
|
||
|
|
groupName: "",
|
||
|
|
groupDesc: "",
|
||
|
|
status: "",
|
||
|
|
groupLevel: "",
|
||
|
|
});
|
||
|
|
} catch (error) {
|
||
|
|
toast.error("There was an error processing your request.");
|
||
|
|
console.error("Error in handleSubmit:", error); // Log the error for debugging
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSearch = (query) => {
|
||
|
|
setSearchQuery(query);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleClose = () => {
|
||
|
|
setShowAddItemPopup(false); // Close the modal by setting the state to false
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleEdit = (usrGrp) => {
|
||
|
|
const groupToEdit = userGroups.find((group) => group.usrGrp === usrGrp);
|
||
|
|
setIsEditing(true);
|
||
|
|
setNewGroupData(groupToEdit);
|
||
|
|
setShowAddItemPopup(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
// const handleDelete = (usrGrp) => {
|
||
|
|
// setUserGroups(userGroups.filter((group) => group.usrGrp !== usrGrp));
|
||
|
|
// toast.success("Menu Access delet successfully!");
|
||
|
|
// };
|
||
|
|
|
||
|
|
const handleDelete = async (usrGrp) => {
|
||
|
|
try {
|
||
|
|
// Call API to delete the user group
|
||
|
|
const response = await deleteUserGroup(usrGrp);
|
||
|
|
|
||
|
|
if (response && response.data) {
|
||
|
|
// Update state after successful API call
|
||
|
|
setUserGroups(userGroups.filter((group) => group.usrGrp !== usrGrp));
|
||
|
|
toast.success("User group deleted successfully!");
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
toast.error("Error deleting Menu Access!");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleRecordsPerPageChange = (number) => {
|
||
|
|
setRecordsPerPage(number);
|
||
|
|
setCurrentPage(1);
|
||
|
|
};
|
||
|
|
|
||
|
|
const totalPages = Math.ceil(userGroups.length / recordsPerPage);
|
||
|
|
|
||
|
|
const handlePageChange = (pageNumber) => {
|
||
|
|
setCurrentPage(pageNumber);
|
||
|
|
};
|
||
|
|
|
||
|
|
const slicedUserGroup = userGroups
|
||
|
|
.filter(
|
||
|
|
(item) =>
|
||
|
|
item.groupName &&
|
||
|
|
item.groupName.toLowerCase().includes(searchQuery.toLowerCase())
|
||
|
|
)
|
||
|
|
.slice((currentPage - 1) * recordsPerPage, currentPage * recordsPerPage);
|
||
|
|
return (
|
||
|
|
<div style={{ marginTop: "11rem" }}>
|
||
|
|
{loading ? (
|
||
|
|
<Spinner />
|
||
|
|
) : (
|
||
|
|
<div className="container-fluid mt-5">
|
||
|
|
<div className="d-flex justify-content-between align-items-center mb-4">
|
||
|
|
<h1 className="title_main">User Group 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">
|
||
|
|
<>
|
||
|
|
<OverlayTrigger
|
||
|
|
placement="bottom"
|
||
|
|
overlay={<Tooltip>Add Group</Tooltip>}
|
||
|
|
>
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={faPlus}
|
||
|
|
onClick={() => handleAddItem(true)}
|
||
|
|
style={{
|
||
|
|
cursor: "pointer",
|
||
|
|
fontSize: "1.5rem",
|
||
|
|
color: "#747264",
|
||
|
|
marginRight: "20px",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</OverlayTrigger>
|
||
|
|
<OverlayTrigger
|
||
|
|
placement="bottom"
|
||
|
|
overlay={<Tooltip>Download template</Tooltip>}
|
||
|
|
>
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={faDownload}
|
||
|
|
style={{
|
||
|
|
cursor: "pointer",
|
||
|
|
fontSize: "1.5rem",
|
||
|
|
color: "#747264",
|
||
|
|
marginRight: "20px",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</OverlayTrigger>
|
||
|
|
<OverlayTrigger
|
||
|
|
placement="bottom"
|
||
|
|
overlay={<Tooltip>Import</Tooltip>}
|
||
|
|
>
|
||
|
|
<span style={{ cursor: "pointer" }}>
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={faUpload}
|
||
|
|
style={{
|
||
|
|
fontSize: "1.5rem",
|
||
|
|
color: "#747264", // Color for the icon
|
||
|
|
marginRight: "20px",
|
||
|
|
}}
|
||
|
|
onClick={handleOpenModal} // Open modal on click
|
||
|
|
/>
|
||
|
|
</span>
|
||
|
|
</OverlayTrigger>
|
||
|
|
<OverlayTrigger
|
||
|
|
placement="bottom"
|
||
|
|
overlay={<Tooltip>XLSX</Tooltip>}
|
||
|
|
>
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={faFileExcel}
|
||
|
|
onClick={() => exportToExcel("customer")}
|
||
|
|
style={{
|
||
|
|
cursor: "pointer",
|
||
|
|
fontSize: "1.5rem",
|
||
|
|
color: "#747264",
|
||
|
|
marginRight: "20px",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</OverlayTrigger>
|
||
|
|
<OverlayTrigger
|
||
|
|
placement="bottom"
|
||
|
|
overlay={<Tooltip>Menu</Tooltip>}
|
||
|
|
>
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={faBars}
|
||
|
|
style={{
|
||
|
|
cursor: "pointer",
|
||
|
|
fontSize: "1.5rem",
|
||
|
|
color: "#747264",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</OverlayTrigger>
|
||
|
|
{/* Add Icon */}
|
||
|
|
</>
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<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) => (
|
||
|
|
<th
|
||
|
|
key={key}
|
||
|
|
style={{ display: visibleColumns[key] ? "" : "none" }}
|
||
|
|
>
|
||
|
|
{key.charAt(0).toUpperCase() + key.slice(1).toLowerCase()}
|
||
|
|
</th>
|
||
|
|
))}
|
||
|
|
<th>Actions</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody className="tbody">
|
||
|
|
{slicedUserGroup.length === 0 ? (
|
||
|
|
<tr>
|
||
|
|
<td
|
||
|
|
colSpan={
|
||
|
|
Object.keys(visibleColumns).filter(
|
||
|
|
(key) => visibleColumns[key]
|
||
|
|
).length + 1 // +1 for Actions column
|
||
|
|
}
|
||
|
|
className="text-center"
|
||
|
|
>
|
||
|
|
No data available
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
) : (
|
||
|
|
slicedUserGroup.map((group, index) => (
|
||
|
|
<tr key={index}>
|
||
|
|
{Object.keys(visibleColumns).map((key) =>
|
||
|
|
visibleColumns[key] ? (
|
||
|
|
<td key={key}>
|
||
|
|
{key === "status" ? (
|
||
|
|
// Render status dynamically based on isActive or status key
|
||
|
|
<span
|
||
|
|
className="status"
|
||
|
|
style={{
|
||
|
|
color:
|
||
|
|
group.status === "Enabled"
|
||
|
|
? "green"
|
||
|
|
: "red",
|
||
|
|
backgroundColor:
|
||
|
|
group.status === "Enabled"
|
||
|
|
? "#d4f7d4"
|
||
|
|
: "#f7d4d4",
|
||
|
|
padding: "4px 8px",
|
||
|
|
borderRadius: "4px",
|
||
|
|
display: "inline-block",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{group.status === "Enabled"
|
||
|
|
? "Active"
|
||
|
|
: "Inactive"}
|
||
|
|
</span>
|
||
|
|
) : (
|
||
|
|
group[key]
|
||
|
|
)}
|
||
|
|
</td>
|
||
|
|
) : null
|
||
|
|
)}
|
||
|
|
<td>
|
||
|
|
{/* Adding Action icons */}
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={faEdit}
|
||
|
|
onClick={() => handleEdit(group.usrGrp)}
|
||
|
|
style={{
|
||
|
|
cursor: "pointer",
|
||
|
|
fontSize: "1rem",
|
||
|
|
color: "green",
|
||
|
|
marginRight: "15px",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={faTrashAlt}
|
||
|
|
onClick={() => handleDelete(group.usrGrp)}
|
||
|
|
style={{
|
||
|
|
cursor: "pointer",
|
||
|
|
fontSize: "1rem",
|
||
|
|
color: "#dc3545",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</tbody>
|
||
|
|
</Table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Manage Columns & Records Per Page */}
|
||
|
|
<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>
|
||
|
|
|
||
|
|
{/* Add/Edit model */}
|
||
|
|
<Modal
|
||
|
|
show={showAddItemPopup}
|
||
|
|
onHide={() => setShowAddItemPopup(false)}
|
||
|
|
>
|
||
|
|
<Modal.Header>
|
||
|
|
<Modal.Title>
|
||
|
|
{isEditing ? "Edit Group" : "Add New Group"}
|
||
|
|
</Modal.Title>
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={faTimes}
|
||
|
|
size="lg"
|
||
|
|
onClick={handleClose}
|
||
|
|
style={{
|
||
|
|
position: "absolute",
|
||
|
|
top: "25px",
|
||
|
|
right: "25px",
|
||
|
|
cursor: "pointer",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</Modal.Header>
|
||
|
|
<Modal.Body>
|
||
|
|
<Form onSubmit={handleSubmit}>
|
||
|
|
<Form.Group controlId="usrGrp">
|
||
|
|
<Form.Label>User Group</Form.Label>
|
||
|
|
<Form.Control
|
||
|
|
type="text"
|
||
|
|
name="usrGrp"
|
||
|
|
value={newGroupData.usrGrp}
|
||
|
|
onChange={handleInputChange}
|
||
|
|
className="custom-hover-border"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group controlId="groupName">
|
||
|
|
<Form.Label>Group Name</Form.Label>
|
||
|
|
<Form.Control
|
||
|
|
type="text"
|
||
|
|
name="groupName"
|
||
|
|
value={newGroupData.groupName}
|
||
|
|
onChange={handleInputChange}
|
||
|
|
className="custom-hover-border"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group controlId="groupDesc">
|
||
|
|
<Form.Label>Description</Form.Label>
|
||
|
|
<Form.Control
|
||
|
|
type="text"
|
||
|
|
name="groupDesc"
|
||
|
|
value={newGroupData.groupDesc}
|
||
|
|
onChange={handleInputChange}
|
||
|
|
className="custom-hover-border"
|
||
|
|
/>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group controlId="status">
|
||
|
|
<Form.Label>Status</Form.Label>
|
||
|
|
<Form.Control
|
||
|
|
as="select"
|
||
|
|
name="status"
|
||
|
|
value={newGroupData.status}
|
||
|
|
onChange={handleInputChange}
|
||
|
|
className="custom-hover-border"
|
||
|
|
>
|
||
|
|
<option value="">Select Status</option>
|
||
|
|
<option value="Enabled">Enabled</option>
|
||
|
|
<option value="Disabled">Disabled</option>
|
||
|
|
</Form.Control>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group
|
||
|
|
controlId="groupLevel"
|
||
|
|
className="custom-hover-border"
|
||
|
|
>
|
||
|
|
<Form.Label>Group Level</Form.Label>
|
||
|
|
<Form.Control
|
||
|
|
type="number"
|
||
|
|
name="groupLevel"
|
||
|
|
value={newGroupData.groupLevel}
|
||
|
|
onChange={handleInputChange}
|
||
|
|
/>
|
||
|
|
</Form.Group>
|
||
|
|
<Modal.Footer>
|
||
|
|
<Button
|
||
|
|
variant="primary"
|
||
|
|
onClick={() => setShowAddItemPopup(false)}
|
||
|
|
className="custom_button px-4"
|
||
|
|
>
|
||
|
|
Close
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
type="submit"
|
||
|
|
variant="primary"
|
||
|
|
className="custom_button px-4"
|
||
|
|
>
|
||
|
|
{isEditing ? "Update Group" : "Add Group"}{" "}
|
||
|
|
</Button>
|
||
|
|
</Modal.Footer>
|
||
|
|
</Form>
|
||
|
|
</Modal.Body>
|
||
|
|
</Modal>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default UserGroupMaintenance;
|