Merge pull request #242 from AvaCodeSolutions/ui-improvement

UI enhancement

Author: payamnj

django_email_learning/platform/api/serializers.py

@@ -152,7 +152,8 @@ def to_django_model(self, course_id: int) -> Course:
         if self.reset_imap_connection:
             course.imap_connection = None
         if self.image is not None:
-            course.replace_image(self.image)
+            if self.image != "SKIP":
+                course.replace_image(self.image)
         if not self.image:
             course.image = None
 

django_email_learning/platform/api/views.py

@@ -14,6 +14,7 @@
 from django.contrib.auth.models import User
 from django.contrib.auth.forms import PasswordResetForm
 from datetime import timedelta, datetime
+from urllib.parse import urlparse
 from pydantic import ValidationError
 from enum import StrEnum
 from django_email_learning.platform.api import serializers
@@ -41,6 +42,7 @@
 import uuid
 import json
 import logging
+import posixpath
 
 
 logger = logging.getLogger(__name__)
@@ -610,6 +612,7 @@ def post(self, request, *args, **kwargs) -> JsonResponse:  # type: ignore[no-unt
 
 
 @method_decorator(accessible_for(roles={"admin", "editor"}), name="post")
+@method_decorator(accessible_for(roles={"admin", "editor"}), name="delete")
 class FileView(View):
     def post(self, request, *args, **kwargs) -> JsonResponse:  # type: ignore[no-untyped-def]
         uploaded_file = request.FILES.get("file")
@@ -631,6 +634,45 @@ def post(self, request, *args, **kwargs) -> JsonResponse:  # type: ignore[no-unt
         file_url = default_storage.url(file_path)
         return JsonResponse({"file_url": file_url, "file_path": file_path}, status=201)
 
+    def delete(self, request, *args, **kwargs) -> JsonResponse:  # type: ignore[no-untyped-def]
+        try:
+            payload = json.loads(request.body or "{}")
+        except json.JSONDecodeError:
+            return JsonResponse({"error": "Invalid request body"}, status=400)
+
+        file_path = payload.get("file_path")
+        file_url = payload.get("file_url")
+
+        if not file_path and file_url:
+            parsed_url_path = urlparse(file_url).path
+            media_url = settings.MEDIA_URL or "/media/"
+            normalized_media_url = (
+                media_url if media_url.endswith("/") else f"{media_url}/"
+            )
+            if parsed_url_path.startswith(normalized_media_url):
+                file_path = parsed_url_path[len(normalized_media_url) :]
+
+        if not file_path:
+            return JsonResponse({"error": "file_path is required"}, status=400)
+
+        normalized_file_path = posixpath.normpath(str(file_path)).lstrip("/")
+        path_parts = normalized_file_path.split("/")
+        organization_id = str(kwargs["organization_id"])
+
+        if (
+            len(path_parts) < 4
+            or path_parts[0] != "uploads"
+            or path_parts[2] != organization_id
+            or ".." in path_parts
+        ):
+            return JsonResponse({"error": "Invalid file path"}, status=400)
+
+        if not default_storage.exists(normalized_file_path):
+            return JsonResponse({"error": "File not found"}, status=404)
+
+        default_storage.delete(normalized_file_path)
+        return JsonResponse({"message": "File deleted successfully"}, status=200)
+
 
 @method_decorator(is_an_organization_member(), name="post")
 class UpdateSessionView(View):

django_email_learning/platform/views.py

@@ -162,6 +162,10 @@ def get_locale_messages(self) -> Dict[str, str]:
             "course_title": _("Course Title"),
             "course_description": _("Course Description"),
             "course_slug": _("Course Slug"),
+            "slug_tooltip": _(
+                "The slug is a unique identifier for the course used in URLs and API endpoints. It should be lowercase, contain no spaces (use hyphens instead), and be unique across all courses for your organization. Once set, the slug cannot be changed."
+            ),
+            "slug_no_space": _("Slug cannot contain spaces. Use hyphens instead."),
             "add_imap_connection": _("Add IMAP Connection"),
             "imap_connection_tooltip": _(
                 "You don't need an IMAP connection to build your course, but you will need one if you want your users to interact via email. For example, they can sign up or check their progress just by sending a message. This is a great solution if your audience has limited platform access."
@@ -233,6 +237,20 @@ def get_locale_messages(self) -> Dict[str, str]:
             "lesson_waiting_tooltip": _(
                 "Set the amount of time that we should wait after the previous lesson or quiz submission before sending this lesson"
             ),
+            "upload": _("Upload"),
+            "uploaded_image_preview": _("Uploaded image preview"),
+            "add_image_to_editor": _("Add image to editor"),
+            "remove_uploaded_image": _("Remove uploaded image"),
+            "confirm_delete_uploaded_image": _("Confirm image deletion"),
+            "delete_uploaded_image_warning": _(
+                "Please confirm this image is not used anywhere else. Deleting it will break existing links."
+            ),
+            "uploaded_image_used_in_editor_error": _(
+                "This image is already used in the editor content. Remove it from the content before deleting the file."
+            ),
+            "uploaded_image_delete_failed": _(
+                "Failed to delete image file. Please try again."
+            ),
             "days": _("Days"),
             "hours": _("Hours"),
             "back": _("Back"),

frontend/platform/course/components/ContentTable.jsx

@@ -11,7 +11,8 @@ const ContentTable = ({ courseId, eventHandler, loaded = false }) => {
     const [isDragging, setIsDragging] = useState(false);
     const [draggedContentId, setDraggedContentId] = useState(null);
 
-    const startDrag = (contentId) => {
+    const startDrag = (event, contentId) => {
+        event.preventDefault();
         setIsDragging(true);
         setDraggedContentId(contentId);
     }
@@ -48,6 +49,18 @@ const ContentTable = ({ courseId, eventHandler, loaded = false }) => {
         return () => window.removeEventListener('pointerup', onPointerUp);
     }, []);
 
+    useEffect(() => {
+        if (isDragging) {
+            document.body.style.userSelect = 'none';
+        } else {
+            document.body.style.userSelect = '';
+        }
+
+        return () => {
+            document.body.style.userSelect = '';
+        };
+    }, [isDragging]);
+
     const deleteContent = (contentId) => {
         eventHandler({ type: 'delete_content', content: contentList.find(content => content.id === contentId)});
     }
@@ -115,7 +128,26 @@ const ContentTable = ({ courseId, eventHandler, loaded = false }) => {
             <TableBody>
                 {contentList.map((content) => (
                     <TableRow
-                        key={content.id} {...(isDragging && draggedContentId === content.id && { sx: { backgroundColor: 'background.main', boxShadow: 2 } })}
+                        key={content.id}
+                        sx={{
+                            transition: 'transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease',
+                            ...(isDragging && draggedContentId === content.id
+                                ? {
+                                    backgroundColor: 'background.box',
+                                    transform: 'translateY(-2px) scale(1.005)',
+                                    filter: (theme) => theme.palette.mode === 'dark'
+                                        ? 'drop-shadow(0 2px 4px rgba(0,0,0,0.22))'
+                                        : 'drop-shadow(0 2px 4px rgba(16,24,40,0.08))',
+                                    borderTop: '1px solid',
+                                    borderBottom: '1px solid',
+                                    borderColor: 'primary.main',
+                                    '& > td': {
+                                        backgroundColor: 'background.box',
+                                    },
+                                }
+                                : {}
+                            ),
+                        }}
                         onMouseOver={() => {
                             if (isDragging && draggedContentId !== content.id) {
                                 const draggedIndex = contentList.findIndex(c => c.id === draggedContentId);
@@ -130,7 +162,7 @@ const ContentTable = ({ courseId, eventHandler, loaded = false }) => {
                             }
                         }}>
                          { userRole !== 'viewer' && <TableCell align={direction == 'rtl' ? 'right' : 'left'} sx={{ cursor: 'grab', width: '40px', padding: '8px 0', textAlign: 'center' }}><DragIndicatorIcon fontSize="small"
-                        onMouseDown={() => startDrag(content.id)}
+                        onMouseDown={(event) => startDrag(event, content.id)}
                         /></TableCell>}
                         <TableCell align={direction == 'rtl' ? 'right' : 'left'}><Typography
                             onClick={() => {let event = {type: 'content_clicked', content_id: content.id}; eventHandler(event);}}