feat: #279 support custom component for course page

Author: payamnj

django_email_learning/platform/serializers.py

@@ -0,0 +1,16 @@
+from enum import StrEnum
+from pydantic import BaseModel
+
+
+class Display(StrEnum):
+    INLINE = "inline"
+    BLOCK = "block"
+    INLINE_BLOCK = "inline-block"
+    NONE = "none"
+
+
+class WebComponent(BaseModel):
+    script_url: str | None = None
+    style_url: str | None = None
+    html: str
+    container_display: Display = Display.INLINE_BLOCK

django_email_learning/platform/views.py

@@ -223,6 +223,7 @@ def get_context_data(self, **kwargs) -> dict:  # type: ignore[no-untyped-def]
         context["appContext"]["courseId"] = course.id
         context["appContext"]["courseTitle"] = course.title
         context["appContext"]["courseLanguage"] = course.language
+        context["appContext"]["customComponent"] = None
         context["appContext"]["direction"] = (
             "rtl" if get_language_info(course.language)["bidi"] else "ltr"
         )

django_email_learning/templates/platform/course.html

@@ -1,5 +1,13 @@
 {% extends "platform/base.html" %}
 {% load django_vite %}
 {% block extra_head %}
+    {% if appContext.customComponent %}
+        {% if appContext.customComponent.script_url %}
+            <script src="{{ appContext.customComponent.script_url }}"></script>
+        {% endif %}
+        {% if appContext.customComponent.style_url %}
+            <link rel="stylesheet" href="{{ appContext.customComponent.style_url }}">
+        {% endif %}
+    {% endif %}
     {% vite_asset 'platform/course/Course.jsx' %}
 {% endblock %}

django_service/static/scripts/custom-component.js

@@ -0,0 +1,11 @@
+let clickCount = 0;
+
+document.addEventListener("click", (event) => {
+    const button = event.target.closest("#custom-btn");
+    if (!button) {
+        return;
+    }
+
+    clickCount += 1;
+    button.textContent = `Clicked: ${clickCount} times`;
+});

django_service/static/styles/custom-component.css

@@ -0,0 +1,12 @@
+.custom-component-wrapper {
+    float: right;
+}
+
+#custom-btn {
+    background-color: #eeeeee;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    border-radius: 5px;
+    z-index: 1000;
+}

django_service/urls.py

@@ -21,6 +21,8 @@
 from django.conf import settings
 from django.conf.urls.static import static
 
+from django_service.views import CustomComponentCourseView
+
 
 urlpatterns = [
     path(
@@ -58,6 +60,11 @@
         ),
         name="password_reset_complete",
     ),
+    path(
+        "email_learning/platform/courses/<int:course_id>/",
+        CustomComponentCourseView.as_view(),
+        name="course",
+    ),
     path(
         "email_learning/",
         include("django_email_learning.urls", namespace="django_email_learning"),

django_service/views.py

@@ -0,0 +1,15 @@
+from django_email_learning.platform.views import CourseView
+from django_email_learning.platform.serializers import WebComponent
+
+
+class CustomComponentCourseView(CourseView):
+    def get_context_data(self, **kwargs) -> dict:  # type: ignore[no-untyped-def]
+        context = super().get_context_data(**kwargs)
+
+        custom_component = WebComponent(
+            html="<button id='custom-btn'>Clicked 0 times!</button>",
+            style_url="/static/styles/custom-component.css",
+            script_url="/static/scripts/custom-component.js",
+        )
+        context["appContext"]["customComponent"] = custom_component.model_dump()
+        return context

frontend/platform/course/Course.jsx

@@ -21,7 +21,7 @@ const DeleteContentForm = lazy(() => import("./components/DeleteContentForm.jsx"
 
 
 function Course() {
-    const { courseTitle, courseId, localeMessages, direction, userRole, apiBaseUrl, platformBaseUrl } = useAppContext();
+    const { courseTitle, courseId, localeMessages, direction, userRole, apiBaseUrl, platformBaseUrl, customComponent } = useAppContext();
     const [dialogOpen, setDialogOpen] = useState(false)
     const [dialogContent, setDialogContent] = useState(null)
     const [contentLoaded, setContentLoaded] = useState(false)
@@ -313,6 +313,7 @@ function Course() {
                         setDialogOpen(true);}}>{localeMessages["add_quiz"]}</Button>
                     {userRole === 'admin' && <EnrollMenu successCallback={handleEnrollMenuSuccess} />}
                     </> }
+                    {customComponent && <Box className="custom-component-wrapper" sx={{ display: customComponent.container_display }} dangerouslySetInnerHTML={{ __html: customComponent.html }}></Box>}
                     <ContentTable courseId={courseId} loaded={contentLoaded} eventHandler={(event) => tableEventHandler(event)} />
                 </Box>
                 <Box sx={{ mt: 3, mb: 3 }}>