Final Changes

sunbird-framework-management-tool/src/Components/CategoryList.js

@@ -47,7 +47,7 @@ const CategoryList = () => {
 
   const handleDelete = id => {
     setCategories(prevCategories =>
-      prevCategories.filter(category => category.id !== id)
+      [...prevCategories.filter(category => category.code !== id)]
     );
   };
 
@@ -65,6 +65,7 @@ const CategoryList = () => {
             editId={editId}
             onEdit={handleEdit}
             onDelete={handleDelete}
+            type="category"
           />
         )}
       </ErrorBoundary>

sunbird-framework-management-tool/src/Components/CustomTable.js

@@ -6,7 +6,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import { Link } from 'react-router-dom'; // Import Link from react-router-dom
 
-function CustomTable({ data, dataType, onEdit, onDelete }) {
+function CustomTable({ data, dataType, onEdit, onDelete,type }) {
   const columns = [
     { field: 'name', headerName: <strong style={{ color: 'black' }}>Name</strong>, width: 150, flex: 1, align: 'left', editable: true },
     { field: 'channel', headerName: <strong style={{ color: 'black' }}>Channel</strong>, width: 150, flex: 1, align: 'left' },
@@ -21,7 +21,7 @@ function CustomTable({ data, dataType, onEdit, onDelete }) {
 
       renderCell: (params) => {console.log(params);
         return (<Link to={{
-          pathname: `/editdetails/${params.row.id}`,
+          pathname: `/${type}/editdetails/${params.row.id}`,
           state: { rowData: params.row } // Pass the row data as state to the DetailsPage
         }} style={{ textDecoration: 'none' }}>
         <IconButton onClick={() => onEdit(params.id)} style={{ color: 'black', fontSize: '14px' }}>
@@ -54,7 +54,7 @@ function CustomTable({ data, dataType, onEdit, onDelete }) {
       renderCell: (params) => {
         console.log(params);
         return (<Link to={{
-          pathname: `/details/${params.row.id}`,
+          pathname: `/${type}/details/${params.row.id}`,
           state: { rowData: params.row } // Pass the row data as state to the DetailsPage
         }} style={{ textDecoration: 'none' }}>
           <IconButton style={{ color: 'black', padding: '6px', fontSize: '14px' }}>
@@ -136,10 +136,10 @@ function CustomTable({ data, dataType, onEdit, onDelete }) {
           Are you sure you want to delete this selected row?
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleDeleteCancel} color="primary">
+          <Button onClick={handleDeleteConfirm} color="primary">
             Yes
           </Button>
-          <Button onClick={handleDeleteConfirm} color="primary">
+          <Button onClick={handleDeleteCancel} color="primary">
             No
           </Button>
         </DialogActions>

sunbird-framework-management-tool/src/Components/DetailsPage.js

@@ -1,13 +1,13 @@
 
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { fetchFrameworkDetailsById } from '../service/restservice';
+import { fetchFrameworkDetailsById, fetchCategoryDetailsById, fetchTermDetailsById } from '../service/restservice';
 
 const labelStyle = {
   fontWeight: 'bold',
   marginRight: '10px',
-  color: '#3b5998', // Set label color to #3b5998
-  fontSize: '18px', // Set font size to 18px
+  color: '#3b5998',
+  fontSize: '18px',
 };
 
 const centeredDivStyle = {
@@ -18,74 +18,84 @@ const centeredDivStyle = {
 
 const DetailsPage = () => {
   const [rowData, setRowData] = useState({});
-  let { id } = useParams();
+  const { id, type } = useParams(); // Add 'type' parameter to determine item type
 
   useEffect(() => {
-    fetchFrameworkDetailsById(id)
-      .then((data) => {
-        setRowData(data);
-      })
-      .catch((error) => {
-        console.error('Error fetching data:', error);
-      });
-  }, [id]);
+    // Determine the fetch function based on the 'type' parameter
+    let fetchFunction;
+    if (type === 'framework') {
+      fetchFunction = fetchFrameworkDetailsById;
+    } else if (type === 'category') {
+      fetchFunction = fetchCategoryDetailsById;
+    } else if (type === 'term') {
+      fetchFunction = fetchTermDetailsById;
+    }
+
+    if (fetchFunction) {
+      fetchFunction(id)
+        .then((data) => {
+          console.log('Data fetched successfully:', data); 
+          setRowData(data);
+        })
+        .catch((error) => {
+          console.error('Error fetching data:', error);
+        });
+    }
+
+  }, [id,type]);
 
   const formatDateString = (dateString) => {
-    const date = new Date(dateString);
-    return date.toLocaleString(); // Adjust formatting options as needed
+    if (dateString) {
+      const date = new Date(dateString);
+      return date.toLocaleString(); // Adjust formatting options as needed
+    }
+    return '';
   };
 
   return (
     <div style={centeredDivStyle}>
       <h1 style={{ color: '#3b5998' }}>Details</h1>
-      <div style={{ textAlign: 'left' }}>
-        <p>
-          <span style={labelStyle}>Identifier:</span>
-          {rowData.identifier}
-        </p>
-        <p>
-          <span style={labelStyle}>Name:</span>
-          {rowData.name}
-        </p>
-        <p>
-          <span style={labelStyle}>Description:</span>
-          {rowData.description}
-        </p>
-        <p>
-          <span style={labelStyle}>Channel:</span>
-          {rowData.channel}
-        </p>
-        <p>
-          <span style={labelStyle}>Owner:</span>
-          {rowData.owner}
-        </p>
-        <p>
-          <span style={labelStyle}>Type:</span>
-          {rowData.type}
-        </p>
-        <p>
-          <span style={labelStyle}>Created On:</span>
-          {formatDateString(rowData.createdOn)}
-        </p>
-        <p>
-          <span style={labelStyle}>Last Updated On:</span>
-          {formatDateString(rowData.lastUpdatedOn)}
-        </p>
-        <p>
-          <span style={labelStyle}>Status:</span>
-          {rowData.status}
-        </p>
-      </div>
+       <div style={{ textAlign: 'left' }}>
+         <p>
+           <span style={labelStyle}>Identifier:</span>
+           {rowData.identifier}
+         </p>
+         <p>
+           <span style={labelStyle}>Name:</span>
+           {rowData.name}
+         </p>
+         <p>
+           <span style={labelStyle}>Description:</span>
+           {rowData.description}
+         </p>
+         <p>
+           <span style={labelStyle}>Channel:</span>
+           {rowData.channel}
+         </p>
+         <p>
+           <span style={labelStyle}>Owner:</span>
+           {rowData.owner}
+         </p>
+         <p>
+           <span style={labelStyle}>Type:</span>
+           {rowData.type}
+         </p>
+         <p>
+           <span style={labelStyle}>Created On:</span>
+           {formatDateString(rowData.createdOn)}
+         </p>
+         <p>
+           <span style={labelStyle}>Last Updated On:</span>
+           {formatDateString(rowData.lastUpdatedOn)}
+         </p>
+         <p>
+           <span style={labelStyle}>Status:</span>
+           {rowData.status}
+       </p>
+       </div>      
     </div>
   );
 };
 
 export default DetailsPage;
 
-
-
-
-
-
-
-