diff --git a/sunbird-framework-management-tool/src/Components/CategoryList.js b/sunbird-framework-management-tool/src/Components/CategoryList.js index 2542f21..a95ce8a 100644 --- a/sunbird-framework-management-tool/src/Components/CategoryList.js +++ b/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" /> )} diff --git a/sunbird-framework-management-tool/src/Components/CustomTable.js b/sunbird-framework-management-tool/src/Components/CustomTable.js index fa91ee7..da5fc5f 100644 --- a/sunbird-framework-management-tool/src/Components/CustomTable.js +++ b/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: Name, width: 150, flex: 1, align: 'left', editable: true }, { field: 'channel', headerName: Channel, width: 150, flex: 1, align: 'left' }, @@ -21,7 +21,7 @@ function CustomTable({ data, dataType, onEdit, onDelete }) { renderCell: (params) => {console.log(params); return ( onEdit(params.id)} style={{ color: 'black', fontSize: '14px' }}> @@ -54,7 +54,7 @@ function CustomTable({ data, dataType, onEdit, onDelete }) { renderCell: (params) => { console.log(params); return ( @@ -136,10 +136,10 @@ function CustomTable({ data, dataType, onEdit, onDelete }) { Are you sure you want to delete this selected row? - - diff --git a/sunbird-framework-management-tool/src/Components/DetailsPage.js b/sunbird-framework-management-tool/src/Components/DetailsPage.js index 9e0e9dd..79cbbb7 100644 --- a/sunbird-framework-management-tool/src/Components/DetailsPage.js +++ b/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 (

Details

-
-

- Identifier: - {rowData.identifier} -

-

- Name: - {rowData.name} -

-

- Description: - {rowData.description} -

-

- Channel: - {rowData.channel} -

-

- Owner: - {rowData.owner} -

-

- Type: - {rowData.type} -

-

- Created On: - {formatDateString(rowData.createdOn)} -

-

- Last Updated On: - {formatDateString(rowData.lastUpdatedOn)} -

-

- Status: - {rowData.status} -

-
+
+

+ Identifier: + {rowData.identifier} +

+

+ Name: + {rowData.name} +

+

+ Description: + {rowData.description} +

+

+ Channel: + {rowData.channel} +

+

+ Owner: + {rowData.owner} +

+

+ Type: + {rowData.type} +

+

+ Created On: + {formatDateString(rowData.createdOn)} +

+

+ Last Updated On: + {formatDateString(rowData.lastUpdatedOn)} +

+

+ Status: + {rowData.status} +

+
); }; export default DetailsPage; - - - - - - - diff --git a/sunbird-framework-management-tool/src/Components/EditDetailsPage.js b/sunbird-framework-management-tool/src/Components/EditDetailsPage.js index a633595..6815534 100644 --- a/sunbird-framework-management-tool/src/Components/EditDetailsPage.js +++ b/sunbird-framework-management-tool/src/Components/EditDetailsPage.js @@ -1,25 +1,38 @@ import React, { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; -import { fetchFrameworkDetailsById, updateFramework } from '../service/restservice'; // Update the import for updateFramework +import { fetchFrameworkDetailsById, fetchCategoryDetailsById, fetchTermDetailsById, updateFramework, updateCategory, updateTerm } from '../service/restservice'; import Button from '@mui/material/Button'; import TextField from '@mui/material/TextField'; +import styles from '../Styles/styles.module.css' -function EditDetailsPage() { - const { id } = useParams(); +const EditDetailsPage = () => { const [rowData, setRowData] = useState({}); const [editedData, setEditedData] = useState({}); + const { id, type } = useParams(); const [isEditing, setIsEditing] = useState(false); useEffect(() => { - fetchFrameworkDetailsById(id) - .then(data => { - setRowData(data); - setEditedData(data); - }) - .catch(error => { - console.error('Error fetching framework details:', error); - }); - }, [id]); + 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); + setEditedData(data); + }) + .catch((error) => { + console.error('Error fetching data:', error); + }); + } + }, [id, type]); const handleEdit = () => { setIsEditing(true); @@ -31,77 +44,111 @@ function EditDetailsPage() { }; const handleUpdate = () => { - updateFramework(id, editedData) // Update the API call with editedData - .then(updatedFramework => { + let updateFunction; + if (type === 'framework') { + updateFunction = updateFramework; + } else if (type === 'category') { + updateFunction = updateCategory; + } else if (type === 'term') { + updateFunction = updateTerm; + } + + updateFunction(id, editedData) + .then((updatedData) => { setIsEditing(false); + console.log('Data updated successfully:', updatedData); }) - .catch(error => { - console.error('Error updating framework details:', error); + .catch((error) => { + console.error('Error updating data:', error); }); }; const handleInputChange = (event) => { const { name, value } = event.target; - setEditedData(prevData => ({ + setEditedData((prevData) => ({ ...prevData, [name]: value, })); }; return ( -
-

Edit Framework

+
+

Edit {type.charAt(0).toUpperCase() + type.slice(1)}

{isEditing ? ( - <> - - - - - {/* Add more input fields for other properties */} - - - +
+
+

+ Identifier: + +

+

+ Name: + +

+

+ Description: + +

+

+ Channel: + +

+ {/* Add more input fields for other properties */} +
+
+ + +
+
) : ( - <> -

- Identifier: {rowData.identifier} -

-

- Name: {rowData.name} -

-

- Description: {rowData.description} -

-

- Channel: {rowData.channel} -

- {/* Display other properties */} +
+
+

+ Identifier: + {editedData.identifier} +

+

+ Name: + {editedData.name} +

+

+ Description: + {editedData.description} +

+

+ Channel: + {editedData.channel} +

+ {/* Add more text fields for other properties */} +
- - )} +
+ + ) + }
); -} +}; export default EditDetailsPage; diff --git a/sunbird-framework-management-tool/src/Components/FrameworkCreate.js b/sunbird-framework-management-tool/src/Components/FrameworkCreate.js index 15dc9c7..f639361 100644 --- a/sunbird-framework-management-tool/src/Components/FrameworkCreate.js +++ b/sunbird-framework-management-tool/src/Components/FrameworkCreate.js @@ -3,12 +3,12 @@ import { TextField, Button } from '@mui/material'; import { CreateFramework } from '../service/restservice'; // Import the CreateFramework function import styles from '../Styles/styles.module.css'; -function FrameworkCreate({existingCodes}) { +function FrameworkCreate({ existingCodes }) { const [name, setName] = useState(''); const [code, setCode] = useState(''); const [nameError, setNameError] = useState(''); const [codeError, setCodeError] = useState(''); - + const validateName = (newName) => { if (newName.trim() === '') { return 'Name is required'; @@ -29,7 +29,6 @@ function FrameworkCreate({existingCodes}) { return ''; }; - const handleNameChange = (e) => { const newName = e.target.value; setName(newName); @@ -47,10 +46,14 @@ function FrameworkCreate({existingCodes}) { const newCodeError = validateCode(code); if (!newNameError && !newCodeError) { - const response = await CreateFramework(name, code); - if (response) { + try { + const response = await CreateFramework(name, code); + // console.log('Create Framework Request:', response.config); // Log the request + // console.log('Create Framework Response:', response.data); // Log the response + // Handle success response - } else { + } catch (error) { + console.error('Create Framework Error:', error); // Log any errors // Handle error response } diff --git a/sunbird-framework-management-tool/src/Components/FrameworkList.js b/sunbird-framework-management-tool/src/Components/FrameworkList.js index c14d9d0..251977a 100644 --- a/sunbird-framework-management-tool/src/Components/FrameworkList.js +++ b/sunbird-framework-management-tool/src/Components/FrameworkList.js @@ -48,7 +48,7 @@ const FrameworkList = () => { const handleDelete = id => { setFrameworks(prevFrameworks => - prevFrameworks.filter(frameworks => frameworks.id !== id) + [...prevFrameworks.filter(frameworks => frameworks.code !== id)] ); }; @@ -66,6 +66,7 @@ const FrameworkList = () => { editId={editId} onEdit={handleEdit} onDelete={handleDelete} + type="framework" /> )} diff --git a/sunbird-framework-management-tool/src/Components/TermList.js b/sunbird-framework-management-tool/src/Components/TermList.js index 6c0568c..271c9a7 100644 --- a/sunbird-framework-management-tool/src/Components/TermList.js +++ b/sunbird-framework-management-tool/src/Components/TermList.js @@ -47,7 +47,7 @@ const TermList = () => { const handleDelete = id => { setTerms(prevTerms => - prevTerms.filter(term => term.id !== id) + [...prevTerms.filter(term => term.identifier !== id)] ); }; @@ -67,6 +67,7 @@ const TermList = () => { editId={editId} onEdit={handleEdit} onDelete={handleDelete} + type="term" /> )} diff --git a/sunbird-framework-management-tool/src/Routers/routers.js b/sunbird-framework-management-tool/src/Routers/routers.js index 8e37aa4..78f4fc7 100644 --- a/sunbird-framework-management-tool/src/Routers/routers.js +++ b/sunbird-framework-management-tool/src/Routers/routers.js @@ -8,6 +8,7 @@ import TermList from '../Components/TermList'; import TermCreate from '../Components/TermCreate'; import DetailsPage from '../Components/DetailsPage'; import EditDetailsPage from '../Components/EditDetailsPage'; + // import CustomTable from '../Components/CustomTable'; const Routers = () => { @@ -19,8 +20,8 @@ const Routers = () => { } /> } /> } /> - } /> - } /> + } /> + } /> {/* } /> */} diff --git a/sunbird-framework-management-tool/src/Styles/styles.module.css b/sunbird-framework-management-tool/src/Styles/styles.module.css index 202ba82..36dc443 100644 --- a/sunbird-framework-management-tool/src/Styles/styles.module.css +++ b/sunbird-framework-management-tool/src/Styles/styles.module.css @@ -86,6 +86,63 @@ font-family: gothvetica; } +/* EditDetailsPage.module.css */ +.editContainer { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; +} + +.editHeader { + color: #3b5998; + font-size: 24px; + margin-bottom: 20px; +} + +.editLabel { + color: #3b5998; + font-weight: bold; + font-size: 18px; +} + +.editTextField { + margin: 10px 0; + width: 100%; +} + +.editButtonsContainer { + color: #3b5998; + display: flex; + justify-content: space-between; + margin-top: 20px; +} + +.detailsContainer { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 20px; +} + +.detailsHeader { + color: #3b5998; + font-size: 24px; + margin-bottom: 20px; +} + +.detailsLabel { + color: #3b5998; + font-weight: bold; + font-size: 18px; +} + +.detailsText { + margin: 10px 0; +} + + + diff --git a/sunbird-framework-management-tool/src/service/restservice.js b/sunbird-framework-management-tool/src/service/restservice.js index a14fe44..6c4a14e 100644 --- a/sunbird-framework-management-tool/src/service/restservice.js +++ b/sunbird-framework-management-tool/src/service/restservice.js @@ -75,7 +75,8 @@ export const CreateFramework = (name, code) => { const headers = { Authorization: apiKey, 'Content-Type': 'application/json', - 'X-Channel-Id': 'c4gt-test', // Replace with your desired channel identifier + 'X-Channel-Id': 'sunbird', // Replace with your desired channel identifier + }; const requestData = { @@ -152,13 +153,13 @@ export const CreateTerm = (name, code) => { // restservice.js -export const fetchFrameworkDetailsById = (identifier) => { +export const fetchFrameworkDetailsById = (identifier) => { const headers = { Authorization: apiKey, 'Content-Type': 'application/json', }; - return axios.get(`${BASE_URL}/framework/v1/read/${identifier}`) + return axios.get(`${BASE_URL}/framework/v1/read/${identifier}`,{headers}) .then(response => response.data.result.framework) // Assuming the response contains the framework details as an array .catch(error => { console.log('Failed to fetch framework details:', error); @@ -166,54 +167,43 @@ export const fetchFrameworkDetailsById = (identifier) => { }); }; - // export const updateFrameworkDescription = (identifier, description) => { - // const headers = { - // Authorization: apiKey, - // 'Content-Type': 'application/json', - // }; - - // const requestData = { - // framework: { - // description: description, - // }, - // }; - - // return axios.put(`${BASE_URL}/framework/v1/update/{ID}`, requestData, { headers }) - // .then(response => response.data.result.framework) - // .catch(error => { - // console.log('Failed to update framework details:', error); - // return {}; - // }); - // }; - - - // export const updateFramework = (identifier, updatedData) => { - // const headers = { - // Authorization: apiKey, - // 'Content-Type': 'application/json', - // }; + + + + export const fetchCategoryDetailsById = (identifier) => { + const headers = { + Authorization: apiKey, + 'Content-Type': 'application/json', + }; - // const requestData = { - // framework: { - // // Include all the fields you want to update - // name: updatedData.name, - // description: updatedData.description, - // channel: updatedData.channel, - // owner: updatedData.owner, - // type: updatedData.type, - // // Add more fields here - // }, - // }; + return axios.get(`${BASE_URL}/framework/v1/category/read/${identifier}`,{headers}) + .then(response => response.data.result.category) // Assuming the response contains the framework details as an array + .catch(error => { + console.log('Failed to fetch framework details:', error); + return {}; + }); + }; + + + + + export const fetchTermDetailsById = (identifier) => { + const headers = { + Authorization: apiKey, + 'Content-Type': 'application/json', + }; - // return axios.PATCH(`${BASE_URL}/framework/v1/category/update${identifier}`, requestData, { headers }) - // .then(response => response.data.result.framework) - // .catch(error => { - // console.log('Failed to update framework details:', error); - // return {}; - // }); - // }; + return axios.get(`${BASE_URL}/framework/v1/term/read/${identifier}`,{headers}) + .then(response => response.data.result.term) // Assuming the response contains the framework details as an array + .catch(error => { + console.log('Failed to fetch framework details:', error); + return {}; + }); + }; + + export const updateFramework = (identifier, updatedData) => { const headers = { @@ -243,6 +233,74 @@ export const fetchFrameworkDetailsById = (identifier) => { return {}; }); }; + + + + + export const updateCategory = (identifier, updatedData) => { + const headers = { + Authorization: apiKey, + 'Content-Type': 'application/json', + }; + + const requestData = { + category: { + // Include all the fields you want to update + name: updatedData.name, + description: updatedData.description, + channel: updatedData.channel, + owner: updatedData.owner, + type: updatedData.type, + // Add more fields here + }, + }; + console.log(updatedData); + + return axios.patch(`${BASE_URL}/framework/v1/category/update/${identifier}`, {request: requestData}, { headers }) + .then(response => { + console.log('success',response); + return response.data.result}) + .catch(error => { + console.log('Failed to update category details:', error); + return {}; + }); + }; + + + + export const updateTerm = (identifier, updatedData) => { + const headers = { + Authorization: apiKey, + 'Content-Type': 'application/json', + }; + + const requestData = { + term: { + // Include all the fields you want to update + name: updatedData.name, + description: updatedData.description, + channel: updatedData.channel, + owner: updatedData.owner, + type: updatedData.type, + // Add more fields here + }, + }; + console.log(updatedData); + + return axios.patch(`${BASE_URL}/framework/v1/term/update/${identifier}`, {request: requestData}, { headers }) + .then(response => { + console.log('success',response); + return response.data.result}) + .catch(error => { + console.log('Failed to update term details:', error); + return {}; + }); + }; + + + + + // Other existing functions for fetching category, term, etc.