diff --git a/src/components/Test/TestTopicConfiguration.js b/src/components/Test/TestTopicConfiguration.js index 95eeed0365073f3d1c090268d4e0d20a786cbfb7..72553c4d7602406243be8a63b04bfa8733db8c39 100644 --- a/src/components/Test/TestTopicConfiguration.js +++ b/src/components/Test/TestTopicConfiguration.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import FeatherIcon from 'feather-icons-react'; import React, {useEffect, useState} from 'react'; import { + delete_test_topic, get_test_topic, get_test_topic_question_count, update_test_topic @@ -9,6 +10,7 @@ import { import SuccessModal from '../SuccessModal'; import InputField from '../InputField'; import Button from '../Button'; +import ConfirmationModal from '../ConfirmationModal'; function TestTopicConfiguration(props) { const [multipleChoiceCountEasy, setMultipleChoiceCountEasy] = useState(0); @@ -34,6 +36,8 @@ function TestTopicConfiguration(props) { const [isOpenFailedModal, setIsOpenFailedModal] = useState(false); const [isOpenSuccessUpdateTestTopicModal, setIsOpenSuccessUpdateTestTopicModal] = useState(false); + const [isOpenConfirmDeleteTestTopicModal, setIsOpenConfirmDeleteTestTopicModal] = useState(false); + const [isOpenSuccessDeleteTestTopicModal, setIsOpenSuccessDeleteTestTopicModal] = useState(false); useEffect(() => { get_test_topic_question_count(setErrorMessage,setIsOpenFailedModal, props.navigate, props.testTopicData['test_topic_id']) @@ -227,6 +231,32 @@ function TestTopicConfiguration(props) { props.callback(testTopicResponseData.id); } + const handleClickDeleteTestTopicButton = function() { + setIsOpenConfirmDeleteTestTopicModal(true); + } + + const handleCloseConfirmDeleteTestTopicModal = function() { + setIsOpenConfirmDeleteTestTopicModal(false); + } + + const handleConfirmDeleteTestTopic = async function() { + setIsOpenConfirmDeleteTestTopicModal(false); + const response = await delete_test_topic( + setErrorMessage, + setIsOpenFailedModal, + props.navigate, + testTopicResponseData.id + ); + if (response) { + setIsOpenSuccessDeleteTestTopicModal(true); + } + } + + const handleCloseSuccessDeleteTestTopicModal = function() { + setIsOpenSuccessDeleteTestTopicModal(false); + props.callback(); + } + return ( <div> { @@ -468,17 +498,45 @@ function TestTopicConfiguration(props) { </div> </div> + <p className='text-primary mb-4'><b>Total:</b> { + multipleChoiceCountEasy + + multipleChoiceCountMedium + + multipleChoiceCountHard + + multipleAnswerCountEasy + + multipleAnswerCountMedium + + multipleAnswerCountHard + + trueOrFalseCountEasy + + trueOrFalseCountMedium + + trueOrFalseCountHard + + essayCountEasy + + essayCountMedium + + essayCountHard + } questions</p> + { testTopicResponseData.can_modify ? - <div onClick={handleSave} className='mr-4 mb-8'> - <Button - buttonLabel='Save' - color='bg-blue' - textColor='text-white' - borderColor='border-blue' - disabled={!checkCanBeSaved() || !testTopicResponseData.can_modify} - featherIconName='save' - /> + <div class='flex flex-row'> + <div onClick={handleSave} className='mr-4 mb-8'> + <Button + buttonLabel='Save' + color='bg-blue' + textColor='text-white' + borderColor='border-blue' + disabled={!checkCanBeSaved() || !testTopicResponseData.can_modify} + featherIconName='save' + /> + </div> + + <div onClick={handleClickDeleteTestTopicButton}> + <Button + buttonLabel='Delete Test' + color='bg-white' + textColor='text-red' + borderColor='border-red' + featherIconName='trash-2' + disabled={!testTopicResponseData.can_modify} + /> + </div> </div> : <div className='my-auto'> @@ -496,6 +554,24 @@ function TestTopicConfiguration(props) { message={<>Question configuration for topic <b>{testTopicResponseData.topic_name}</b> successfully saved.</>} isSuccess={true} /> + + <ConfirmationModal + isOpen={isOpenConfirmDeleteTestTopicModal} + handleClose={handleCloseConfirmDeleteTestTopicModal} + title='Delete Test Topic' + message={<>Are you sure to delete topic <b>"{testTopicResponseData.topic_name}"</b> from this test?</>} + actionButtonName='Yes, delete' + actionColor='red' + iconName='trash-2' + callback={handleConfirmDeleteTestTopic} + /> + + <SuccessModal + isOpen={isOpenSuccessDeleteTestTopicModal} + handleClose={handleCloseSuccessDeleteTestTopicModal} + message={<>Topic <b>"{testTopicResponseData.topic_name}"</b> has been <b>deleted</b> from test.</>} + isSuccess={true} + /> </div> } diff --git a/src/modules/api/TestApi.js b/src/modules/api/TestApi.js index 90e17fb56a4ecb5b6e425d1a603f46c9ce0477d9..0ee6f4d4ebdf5a1166f552820e9b221a30ecad9a 100644 --- a/src/modules/api/TestApi.js +++ b/src/modules/api/TestApi.js @@ -48,9 +48,12 @@ export const testApi = { return get(navigate, `${BASE_URL}/test-topic/get_topic_questions_count?test_topic_id=${testTopicId}`, token); }, update_test_topic: (navigate, token, form, testTopicId) => { - return put(navigate, `${BASE_URL}/test-topic/update_test_topic?test_topic_id=${testTopicId}`, token, form) + return put(navigate, `${BASE_URL}/test-topic/update_test_topic?test_topic_id=${testTopicId}`, token, form); + }, + delete_test_topic: (navigate, token, testTopicId) => { + return delete_(navigate, `${BASE_URL}/test-topic/delete_test_topic?test_topic_id=${testTopicId}`, token); }, publish_test: (navigate, token, testId) => { - return put(navigate, `${BASE_URL}/crud-test/publish_test?test_id=${testId}`, token) + return put(navigate, `${BASE_URL}/crud-test/publish_test?test_id=${testId}`, token); } } \ No newline at end of file diff --git a/src/pages/Test/TestModule.js b/src/pages/Test/TestModule.js index 7e2d04d64d6f533829a7f2f4b7aac4567432dba3..5f7f76e7ae061550673df28d95ee474f0f6a1d98 100644 --- a/src/pages/Test/TestModule.js +++ b/src/pages/Test/TestModule.js @@ -160,6 +160,16 @@ export async function update_test_topic(setErrorMessage, setIsOpenFailedModal, n } } +export async function delete_test_topic(setErrorMessage, setIsOpenFailedModal, navigate, testTopicId) { + try { + const token = localStorage.getItem('accessToken'); + return await testApi.delete_test_topic(navigate, token, testTopicId); + } catch (error) { + setErrorMessage('Failed to delete test topic. ' + error.response); + setIsOpenFailedModal(true); + } +} + export async function publish_test(setErrorMessage, setIsOpenFailedModal, navigate, testId) { try { const token = localStorage.getItem('accessToken');