feat: #163 confirmation dialog for delete course content

Author: payamnj

django_email_learning/templates/platform/course.html

@@ -58,7 +58,8 @@
             "at_least_one_correct": "{% translate 'Question QUESTION_NUMBER must have at least one correct answer' %}",
             "fix_errors": "{% translate 'Please fix the errors in the form before submitting.' %}",
             "lesson_title_required": "{% translate 'Lesson title is required.' %}",
-            "lesson_content_required": "{% translate 'Lesson content is required.' %}"
+            "lesson_content_required": "{% translate 'Lesson content is required.' %}",
+            "delete_content_confirmation": "{% translate 'Are you sure you want to delete the content: CONTENT_TITLE?' %}",
         }
     </script>
     {% vite_asset 'platform/course/Course.jsx' %}

frontend/platform/course/Course.jsx

@@ -11,6 +11,7 @@ import { Box, Grid, Button, Dialog } from '@mui/material'
 import LessonForm from './components/LessonForm.jsx';
 import QuizForm from './components/QuizForm.jsx';
 import ContentTable from './components/ContentTable.jsx';
+import DeleteContentForm from './components/DeleteContentForm.jsx';
 import { getCookie } from '../../src/utils.js';
 
 
@@ -20,11 +21,13 @@ function Course() {
     const [dialogContent, setDialogContent] = useState(null)
     const [lessonCache, setLessonCache] = useState("")
     const [contentLoaded, setContentLoaded] = useState(false)
+    const [dialogMaxWidth, setDialogMaxWidth] = useState('lg');
 
     const userRole = localStorage.getItem('userRole');
     const apiBaseUrl = localStorage.getItem('apiBaseUrl');
     const organizationId = localStorage.getItem('activeOrganizationId');
 
+
     const resetDialog = () => {
         setDialogOpen(false);
         setContentLoaded(false);
@@ -68,6 +71,25 @@ function Course() {
         }));
     }
 
+    const deletContent = (contentId) => {
+        fetch(`${apiBaseUrl}/organizations/${organizationId}/courses/${course_id}/contents/${contentId}/`, {
+            method: 'DELETE',
+            headers: {
+                'X-CSRFToken': getCookie('csrftoken')
+            },
+        })
+            .then(response => {
+                if (response.ok) {
+                    setContentLoaded(false);
+                } else {
+                    console.error('Error deleting content:', response.statusText);
+                }
+            })
+            .catch(error => console.error('Error deleting content:', error));
+        setDialogMaxWidth('lg');
+        setDialogOpen(false);
+    }
+
     const tableEventHandler = async (event) => {
         console.log("Event triggered from ContentTable", event);
         if (event.type === 'content_loaded') {
@@ -127,6 +149,11 @@ function Course() {
             })
             .catch(error => console.error('Error reordering contents:', error));
         }
+        if (event.type === 'delete_content') {
+            setDialogContent(<DeleteContentForm content={event.content} onDelete={deletContent} onCancel={() => {setDialogOpen(false); setDialogMaxWidth('lg');}} />);
+            setDialogMaxWidth('sm');
+            setDialogOpen(true);
+        }
     }
 
     return (
@@ -162,7 +189,7 @@ function Course() {
                 </Box>
             </Grid>
 
-            <Dialog open={dialogOpen} onClose={handleClose} fullWidth maxWidth="lg" sx={{ xs: { width: '100%' }, md: { width: '80%' }, lg: { maxWidth: '70%' } }}>
+            <Dialog open={dialogOpen} onClose={handleClose} fullWidth maxWidth={dialogMaxWidth}>
                 {dialogContent}
             </Dialog>
         </Base>

frontend/platform/course/components/ContentTable.jsx

@@ -32,7 +32,10 @@ const ContentTable = ({ courseId, eventHandler, loaded = false }) => {
     }
 
     useEffect(() => {
-        getContets();
+        if (!loaded) {
+            getContets();
+            loaded = true;
+        }
     }, [loaded]);
 
     useEffect(() => {
@@ -47,20 +50,7 @@ const ContentTable = ({ courseId, eventHandler, loaded = false }) => {
     }, []);
 
     const deleteContent = (contentId) => {
-        fetch(`${apiBaseUrl}/organizations/${organizationId}/courses/${courseId}/contents/${contentId}/`, {
-            method: 'DELETE',
-            headers: {
-                'X-CSRFToken': getCookie('csrftoken')
-            },
-        })
-            .then(response => {
-                if (response.ok) {
-                    setContentList(contentList.filter(content => content.id !== contentId));
-                } else {
-                    console.error('Error deleting content:', response.statusText);
-                }
-            })
-            .catch(error => console.error('Error deleting content:', error));
+        eventHandler({ type: 'delete_content', content: contentList.find(content => content.id === contentId)});
     }
 
     const TogglePublishContent = (contentId, is_published) => {

frontend/platform/course/components/DeleteContentForm.jsx

@@ -0,0 +1,21 @@
+import { Container, Typography, Button, Box } from '@mui/material';
+
+const DeleteContentForm = ({ content, onDelete, onCancel }) => {
+    return (
+        <Container sx={{ padding: 4, textAlign: 'center' }}>
+            <Typography variant="h6" gutterBottom>
+                {localeMessages["delete_content_confirmation"].replace("CONTENT_TITLE", content.title)}
+            </Typography>
+            <Box sx={{ marginTop: 2 }}>
+                <Button variant="contained" color="error" onClick={() => onDelete(content.id)} sx={{ marginRight: 2 }}>
+                    {localeMessages["delete"]}
+                </Button>
+                <Button variant="outlined" onClick={onCancel}>
+                    {localeMessages["cancel"]}
+                </Button>
+            </Box>
+        </Container>
+    );
+}
+
+export default DeleteContentForm;