391 lines
12 KiB
JavaScript
391 lines
12 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { Modal, Button, Form, Card } from "react-bootstrap";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faEdit, faTrash } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
function DashboardView({onDashboardCharts}) {
|
|
|
|
const [showTable, setShowTable] = useState(false);
|
|
const [dashboards, setDashboards] = useState([]);
|
|
const [showAddItemPopup, setShowAddItemPopup] = useState(false);
|
|
const [newItem, setNewItem] = useState({
|
|
dashboardName: "",
|
|
description: "",
|
|
securityProfile: "",
|
|
addToHome: "",
|
|
});
|
|
const [selectedItemIndex, setSelectedItemIndex] = useState(null);
|
|
const [columns, setColumns] = useState([
|
|
{ label: "Dashboard Name", key: "dashboardName", visible: true },
|
|
{ label: "Description", key: "description", visible: true },
|
|
{ label: "Security Profile", key: "securityProfile", visible: true },
|
|
{ label: "Add to Home", key: "addToHome", visible: true },
|
|
]);
|
|
const [showManageColumnsModal, setShowManageColumnsModal] = useState(false);
|
|
const [recordsPerPage, setRecordsPerPage] = useState(10); // Initial number of records per page
|
|
const [error, setError] = useState(null); // To handle error state
|
|
|
|
useEffect(() => {
|
|
if (showTable) {
|
|
fetchData();
|
|
} else {
|
|
fetchDashboardCardData();
|
|
}
|
|
}, [showTable]);
|
|
|
|
const fetchData = async () => {
|
|
<<<<<<< HEAD
|
|
const apiUrl = `${process.env.REACT_APP_API_URL}/getNotificationByUser`;
|
|
=======
|
|
const apiUrl = `${process.env.REACT_APP_API_URL}getNotificationByUser`;
|
|
>>>>>>> 1c0592d (commit new code)
|
|
const token = localStorage.getItem("authToken");
|
|
|
|
if (!token) {
|
|
console.error("Authorization token is missing.");
|
|
setError("Authorization token is missing.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(apiUrl, {
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Error: ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
setDashboards(data);
|
|
} catch (error) {
|
|
console.error("Fetching error:", error);
|
|
setError(error.toString());
|
|
}
|
|
};
|
|
|
|
const fetchDashboardCardData = async () => {
|
|
<<<<<<< HEAD
|
|
const apiUrl = `${process.env.REACT_APP_API_URL}/get_Dashboard_header`;
|
|
=======
|
|
const apiUrl = `${process.env.REACT_APP_API_URL}get_Dashboard_header`;
|
|
>>>>>>> 1c0592d (commit new code)
|
|
const token = localStorage.getItem("authToken");
|
|
|
|
if (!token) {
|
|
console.error("Authorization token is missing.");
|
|
setError("Authorization token is missing.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(apiUrl, {
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Error: ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
const testingDashboard = data.find(
|
|
(dashboard) => dashboard.dashboard_name === "Testing Dashboard"
|
|
);
|
|
setDashboards(testingDashboard ? [testingDashboard] : []);
|
|
} catch (error) {
|
|
console.error("Fetching error:", error);
|
|
setError(error.toString());
|
|
}
|
|
};
|
|
|
|
const handleAddItemClick = () => {
|
|
setShowAddItemPopup(true);
|
|
};
|
|
|
|
const handleInputChange = (event) => {
|
|
const { name, value } = event.target;
|
|
setNewItem({ ...newItem, [name]: value });
|
|
};
|
|
|
|
const handleAddItem = () => {
|
|
if (selectedItemIndex !== null) {
|
|
const updatedDashboards = [...dashboards];
|
|
updatedDashboards[selectedItemIndex] = newItem;
|
|
setDashboards(updatedDashboards);
|
|
} else {
|
|
setDashboards([...dashboards, newItem]);
|
|
}
|
|
setNewItem({
|
|
dashboardName: "",
|
|
description: "",
|
|
securityProfile: "",
|
|
addToHome: "",
|
|
});
|
|
setSelectedItemIndex(null);
|
|
setShowAddItemPopup(false);
|
|
};
|
|
|
|
const handleDeleteItem = (index) => {
|
|
const updatedDashboards = [...dashboards];
|
|
updatedDashboards.splice(index, 1);
|
|
setDashboards(updatedDashboards);
|
|
};
|
|
|
|
const handleColumnVisibilityChange = (key) => {
|
|
const updatedColumns = columns.map((col) => {
|
|
if (col.key === key) {
|
|
return { ...col, visible: !col.visible };
|
|
}
|
|
return col;
|
|
});
|
|
setColumns(updatedColumns);
|
|
};
|
|
|
|
const handleRecordsPerPageChange = (value) => {
|
|
setRecordsPerPage(value);
|
|
};
|
|
|
|
return (
|
|
<div className="container mt-5">
|
|
<h4>Dashboard</h4>
|
|
|
|
{/* Header Buttons */}
|
|
<div className="text-end mb-3">
|
|
{!showTable && (
|
|
<Button
|
|
variant="secondary"
|
|
className="me-2"
|
|
onClick={() => setShowTable(true)}
|
|
>
|
|
Dashboard Builder
|
|
</Button>
|
|
)}
|
|
{showTable && (
|
|
<div className="text-end mb-3">
|
|
<Button
|
|
variant="secondary"
|
|
className="me-2"
|
|
onClick={() => setShowTable(false)}
|
|
>
|
|
Back
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
className="me-2"
|
|
onClick={handleAddItemClick}
|
|
>
|
|
Add Item
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Render the card component only if showTable is false */}
|
|
{!showTable && dashboards.length > 0 && (
|
|
<div className="card-container">
|
|
<Card className="dashboard-card col-lg-4 col-md-6 col-sm-12 mb-4" onClick={onDashboardCharts} >
|
|
<Card.Body>
|
|
<Card.Title>{dashboards[0].dashboard_name}</Card.Title>
|
|
<Card.Text>{dashboards[0].description}</Card.Text>
|
|
</Card.Body>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* Table */}
|
|
{showTable && (
|
|
<div>
|
|
<table className="table table-striped">
|
|
{/* Table Header */}
|
|
<thead>
|
|
<tr>
|
|
{columns
|
|
.filter((column) => column.visible)
|
|
.map((column, index) => (
|
|
<th key={index}>{column.label}</th>
|
|
))}
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
{/* Table Body */}
|
|
<tbody>
|
|
{dashboards.map((dashboard, index) => (
|
|
<tr key={index}>
|
|
{columns
|
|
.filter((column) => column.visible)
|
|
.map((column, columnIndex) => (
|
|
<td key={columnIndex}>{dashboard[column.key]}</td>
|
|
))}
|
|
<td>
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
className="me-2"
|
|
onClick={() => {
|
|
setShowAddItemPopup(true);
|
|
setNewItem(dashboard);
|
|
setSelectedItemIndex(index);
|
|
}}
|
|
>
|
|
<FontAwesomeIcon icon={faEdit} />
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => handleDeleteItem(index)}
|
|
>
|
|
<FontAwesomeIcon icon={faTrash} />
|
|
</Button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
|
|
<div className="d-flex justify-content-between">
|
|
{/* Manage Columns Button */}
|
|
<div className="text-start mb-3">
|
|
<Button
|
|
variant="secondary"
|
|
className="me-2"
|
|
onClick={() => setShowManageColumnsModal(true)}
|
|
>
|
|
Manage Columns
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Records per Page Dropdown */}
|
|
<div className="text-end mb-3">
|
|
<label htmlFor="recordsPerPage" className="">
|
|
Records per Page
|
|
</label>
|
|
<select
|
|
className="form-select"
|
|
value={recordsPerPage}
|
|
onChange={(e) => handleRecordsPerPageChange(e.target.value)}
|
|
>
|
|
<option value={10}>10</option>
|
|
<option value={20}>20</option>
|
|
<option value={50}>50</option>
|
|
<option value={100}>100</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Add Item Modal */}
|
|
<Modal show={showAddItemPopup} onHide={() => setShowAddItemPopup(false)}>
|
|
<Modal.Header closeButton>
|
|
<Modal.Title>
|
|
{selectedItemIndex !== null ? "Edit Item" : "Add Item"}
|
|
</Modal.Title>
|
|
</Modal.Header>
|
|
<Modal.Body>
|
|
<form>
|
|
<div className="mb-3">
|
|
<label htmlFor="dashboardName" className="form-label">
|
|
Dashboard Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
id="dashboardName"
|
|
name="dashboardName"
|
|
value={newItem.dashboardName}
|
|
onChange={handleInputChange}
|
|
/>
|
|
</div>
|
|
<div className="mb-3">
|
|
<label htmlFor="description" className="form-label">
|
|
Description
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
id="description"
|
|
name="description"
|
|
value={newItem.description}
|
|
onChange={handleInputChange}
|
|
/>
|
|
</div>
|
|
<div className="mb-3">
|
|
<label htmlFor="securityProfile" className="form-label">
|
|
Security Profile
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
id="securityProfile"
|
|
name="securityProfile"
|
|
value={newItem.securityProfile}
|
|
onChange={handleInputChange}
|
|
/>
|
|
</div>
|
|
<div className="mb-3">
|
|
<label htmlFor="addToHome" className="form-label">
|
|
Add to Home
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
id="addToHome"
|
|
name="addToHome"
|
|
value={newItem.addToHome}
|
|
onChange={handleInputChange}
|
|
/>
|
|
</div>
|
|
</form>
|
|
</Modal.Body>
|
|
<Modal.Footer>
|
|
<Button variant="secondary" onClick={() => setShowAddItemPopup(false)}>
|
|
Close
|
|
</Button>
|
|
<Button variant="primary" onClick={handleAddItem}>
|
|
{selectedItemIndex !== null ? "Save Changes" : "Add Item"}
|
|
</Button>
|
|
</Modal.Footer>
|
|
</Modal>
|
|
|
|
{/* Manage Columns Modal */}
|
|
<Modal
|
|
show={showManageColumnsModal}
|
|
onHide={() => setShowManageColumnsModal(false)}
|
|
>
|
|
<Modal.Header closeButton>
|
|
<Modal.Title>Manage Columns</Modal.Title>
|
|
</Modal.Header>
|
|
<Modal.Body>
|
|
<form>
|
|
{columns.map((column, index) => (
|
|
<div key={index} className="form-check">
|
|
<input
|
|
className="form-check-input"
|
|
type="checkbox"
|
|
checked={column.visible}
|
|
onChange={() => handleColumnVisibilityChange(column.key)}
|
|
/>
|
|
<label className="form-check-label">{column.label}</label>
|
|
</div>
|
|
))}
|
|
</form>
|
|
</Modal.Body>
|
|
<Modal.Footer>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => setShowManageColumnsModal(false)}
|
|
>
|
|
Close
|
|
</Button>
|
|
</Modal.Footer>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DashboardView;
|