Merge pull request #35 from DataManagementLab/origin/#8_Frontend_Allow_to_edit_course_description_and_image

tobi-werner · web-flow · commit 0ef68c47d4e5 · 2020-07-04T13:21:46.000+02:00
Origin/#8 frontend allow to edit course description and image
diff --git a/.github/workflows/django.yml b/.github/workflows/django.yml
@@ -2,9 +2,9 @@ name: Django CI
 
 on:
   push:
-    branches: [ master ]
+    branches: [ main ]
   pull_request:
-    branches: [ master ]
+    branches: [ main ]
 
 jobs:
   build:
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # Collab Coursebook
 
+![Django CI](https://github.com/DataManagementLab/collab-coursebook/workflows/Django%20CI/badge.svg)
+
 ## Description
 
 Collab Coursebook is a plattform for collaborative learning und knowledge organization. It provides a place to share and re-use notes and other learning materials.
diff --git a/content/forms.py b/content/forms.py
@@ -0,0 +1,20 @@
+from django import forms
+from content.models import YTVideoContent, ImageContent
+
+
+class AddContentFormYoutubeVideo(forms.ModelForm):
+    class Meta:
+        model = YTVideoContent
+        exclude = ['content']
+
+
+class AddContentFormImage(forms.ModelForm):
+    class Meta:
+        model = ImageContent
+        exclude = ['content']
+
+
+CONTENT_TYPE_FORMS = {
+    YTVideoContent.TYPE: AddContentFormYoutubeVideo,
+    ImageContent.TYPE: AddContentFormImage,
+}
diff --git a/content/templates/content/cards/Image.html b/content/templates/content/cards/Image.html
@@ -1,2 +1 @@
-{# TODO Replace with real preview #}
-<div class="card-img-top fit bg-success" style="height: 180px;"></div>
+<img class="card-img-top fit" style="height: 180px;" src="{{ content.imagecontent.image.url }}" alt="{{ content.description }}" width="500" height="600">
diff --git a/content/templates/content/cards/YouTubeVideo.html b/content/templates/content/cards/YouTubeVideo.html
@@ -1,2 +1 @@
-{# TODO Replace with real preview #}
-<div class="card-img-top fit bg-success" style="height: 180px;"></div>
+<img class="card-img-top fit" style="height: 180px;" src="https://img.youtube.com/vi/{{ content.ytvideocontent.id }}/0.jpg" alt="{{ content.description }}" width="500" height="600">
diff --git a/frontend/forms/addcontent.py b/frontend/forms/addcontent.py
@@ -0,0 +1,12 @@
+from django import forms
+from base.models.content import Content
+from content.models import YTVideoContent, ImageContent
+
+
+class AddContentForm(forms.ModelForm):
+    """
+    The Form for adding new content to a topic
+    """
+    class Meta:  # pylint: disable=too-few-public-methods
+        model = Content
+        exclude = ['topic', 'author', 'creation_date', 'ratings', 'preview', 'type']
diff --git a/frontend/locale/de_DE/LC_MESSAGES/django.po b/frontend/locale/de_DE/LC_MESSAGES/django.po
@@ -33,7 +33,20 @@ msgstr "Diese Software ist Open Source"
 msgid "Are you sure you want to delete the following comment?"
 msgstr "Soll der folgende Kommentar wirklich gelöscht werden?"
 
+#: frontend/templates/frontend/content/addcontent.html:23
+#: frontend/templates/frontend/course/create.html:29
+msgid "Create"
+msgstr "Erzeugen"
+
+#: frontend/templates/frontend/content/addcontent.html:24
+#: frontend/templates/frontend/content/detail.html:80
+#: frontend/templates/frontend/course/create.html:30
+#: frontend/templates/frontend/profile/profile_edit.html:19
+msgid "Cancel"
+msgstr "Abbrechen"
+
 #: frontend/templates/frontend/content/detail.html:18
+#: frontend/templates/frontend/course/view.html:25
 msgid "Actions"
 msgstr "Aktionen"
 
@@ -99,6 +112,10 @@ msgstr "Neuen Kurs anlegen"
 msgid "Create"
 msgstr "Erzeugen"
 
+#: frontend/templates/frontend/course/dropdown_topic.html:10
+msgid "Add Content"
+msgstr "Inhalte hinzufügen"
+
 #: frontend/templates/frontend/course/edit.html:11
 msgid "Edit course"
 msgstr "Kurs bearbeiten"
@@ -112,6 +129,7 @@ msgid "Delete Course"
 msgstr "Kurs löschen"
 
 #: frontend/templates/frontend/course/view.html:63
+#: frontend/templates/frontend/course/view.html:78
 msgid "No topics yet"
 msgstr "Bisher keine Themen"
 
@@ -231,6 +249,14 @@ msgstr "Kommentar erfolgreich gelöscht."
 msgid "Successfully edited Comment."
 msgstr "Kommentar erfolgreich bearbeitet."
 
+#: frontend/views/content.py:28
+msgid "Content '{cleaned_data['type']}' successfully added"
+msgstr "Inhalt '{cleaned_data['type']}' erfolgreich hinzugefügt"
+
+#: frontend/views/content.py:35
+msgid "An error occurred while processing the request"
+msgstr "Es trat ein Fehler beim Verarbeiten der Anfrage auf"
+
 #: frontend/views/course.py:26
 msgid "Course '{cleaned_data['title']}' successfully created"
 msgstr "Kurs '{cleaned_data['title']}' erfolgreich angelegt"
@@ -242,3 +268,6 @@ msgstr "Kurs '{cleaned_data['title']}' erfolgreich bearbeitet"
 #: frontend/views/profile.py:25
 msgid "Profile updated"
 msgstr "Profil aktualisiert"
+
+#~ msgid "Delete Course"
+#~ msgstr "Kurs löschen"
diff --git a/frontend/templates/frontend/content/addcontent.html b/frontend/templates/frontend/content/addcontent.html
@@ -0,0 +1,28 @@
+{% extends 'frontend/base_logged_in.html' %}
+
+{# Load the tag library #}
+{% load bootstrap4 %}
+{% load cc_frontend_tags %}
+{% load fontawesome_5 %}
+{% load static %}
+{% load i18n %}
+
+{% block imports %}
+    <link href="{% static 'css/content_detail.css' %}" type="text/css" rel="stylesheet"/>
+{% endblock %}
+
+{% block content %}
+    <form method="post" enctype=multipart/form-data>
+        {% csrf_token %}
+        {% bootstrap_form form %}
+        {% bootstrap_form content_type_form %}
+
+        {{ form.media }}
+        <div>
+
+            <button type="submit" class="btn btn-primary float-right">{% fa5_icon 'plus-circle' 'fas' %} {% trans "Create" %}</button>
+            <a href="{% url 'frontend:dashboard' %}" class="btn btn-danger">{% fa5_icon 'times' 'fas' %} {% trans "Cancel" %}</a>
+        </div>
+
+    </form>
+{% endblock %}
diff --git a/frontend/templates/frontend/content/detail.html b/frontend/templates/frontend/content/detail.html
@@ -23,12 +23,9 @@
                         {# url 'readingmode' course.id topic.id content.id #}{% if ending %}{{ ending }}{% endif %}">{% fa5_icon 'eye' 'far' %}
                     Reading Mode</a>
                 {% if user.is_authenticated %}
-                    <a class="dropdown-item" href="{# url 'favourite_content' course.id topic.id content.id #}?onDetailPage=True">
-                        {% if favourite %}{% fa5_icon 'bookmark' 'fas' %} Unsave {% else %}{% fa5_icon 'bookmark' 'far' %} Save{% endif %}</a>
-                    <div class="dropdown-divider"></div>
-                    {% if markdown %}
+                    {% if content.type|is_content_editable %}
                         <a class="dropdown-item"
-                           href="{% url 'edit_md_file' course.id topic.id content.id %}">{% fa5_icon 'pencil-alt' 'fas' %}
+                           href="{#{% url 'edit_md_file' course.id topic.id content.id %}#}">{% fa5_icon 'pencil-alt' 'fas' %}
                             Edit</a>
 
                     {% endif %}
diff --git a/frontend/templates/frontend/course/dropdown_topic.html b/frontend/templates/frontend/course/dropdown_topic.html
@@ -0,0 +1,21 @@
+{% load i18n %}
+{# Load the tag library #}
+{% load bootstrap4 %}
+{% load fontawesome_5 %}
+{% load cc_frontend_tags %}
+
+<div class="float-right text-right">
+    <div class="dropdown show">
+        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            {% trans "Add Content" %}
+        </button>
+        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
+            {% if user.is_authenticated %}
+                {% for content in content_data %}
+                    <a class="dropdown-item"
+                       href="{% url 'frontend:content-add' course_id=course_id topic_id=topic_id type=content.0 %}">{% trans content.1 %}</a>
+                {% endfor %}
+            {% endif %}
+        </div>
+    </div>
+</div>
diff --git a/frontend/templates/frontend/course/view.html b/frontend/templates/frontend/course/view.html
@@ -18,14 +18,27 @@
 
 {% block content %}
     <!-- Course markings and actions -->
-    <div class="float-right">
-        {% if course in user.profile.stared_courses.all %}
-            {% fa5_icon 'bookmark' 'fas' %}
-        {% endif %}
-        {% if user|check_edit_course_permission:course %}
-            <a href="{% url 'frontend:course-edit' pk=course.pk %}" class="btn btn-warning">{% fa5_icon "pencil-alt" "fas" %} {% trans "Edit Course" %}</a>
-            <a href="{% url 'frontend:course-delete' pk=course.pk %}" class="btn btn-warning">{% fa5_icon "trash" "fas" %} {% trans "Delete Course" %}</a>
-        {% endif %}
+    <div class="float-right text-right">
+        <div class="dropdown show">
+            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                {% trans "Actions" %}
+            </button>
+
+            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
+                {% if user.is_authenticated %}
+                    <a class="dropdown-item" href="{# url 'favourite_content' course.id topic.id content.id ?onDetailPage=True#}">
+                        {% if course in user.profile.stared_courses.all %}{% fa5_icon 'bookmark' 'fas' %} Unsave {% else %}{% fa5_icon 'bookmark' 'far' %} Save{% endif %}</a>
+
+                    <div class="dropdown-divider"></div>
+
+                    {% if user|check_edit_course_permission:course %}
+                        <a href="{% url 'frontend:course-edit' pk=course.pk %}" class="dropdown-item">{% fa5_icon "pencil-alt" "fas" %} {% trans "Edit Course" %}</a>
+                        <a href="{% url 'frontend:course-delete' pk=course.pk %}" class="dropdown-item">{% fa5_icon "trash" "fas" %} {% trans "Delete Course" %}</a>
+                    {% endif %}
+                {% endif %}
+
+            </div>
+        </div>
     </div>
 
     <!-- Course header: Title, owners, description -->
@@ -74,6 +87,9 @@ <h5 style="margin-top: 20px;">
     {% for entry in structure %}
         <div style="margin-top: 30px;">
             {% with forloop.counter as outer_index %}
+                {% with entry.topic as topic_replace %}
+                    {% add_content_button user course.id topic_replace.id %}
+                {% endwith %}
                 <h3 class="text-info">{{ outer_index }}. {{ entry.topic.title }}</h3>
 
                 {% with entry.topic.contents.all as topic_contents %}
@@ -82,6 +98,9 @@ <h3 class="text-info">{{ outer_index }}. {{ entry.topic.title }}</h3>
                 {% if entry.subtopics %}
                         {% for subtopic in entry.subtopics %}
                             <div style="margin-top: 15px;">
+                                {% with subtopic as topic_replace %}
+                                   {% add_content_button user course.id topic_replace.id %}
+                                {%  endwith %}
                                 <h4 class="text-info">{{ outer_index }}.{{ forloop.counter }}. {{ subtopic.title }}</h4>
                                 {% with subtopic.contents.all as topic_contents %}
                                     {% include "frontend/course/topic_contents.html" %}
diff --git a/frontend/templatetags/cc_frontend_tags.py b/frontend/templatetags/cc_frontend_tags.py
@@ -94,3 +94,24 @@ def check_edit_course_permission(user, course):
     # either an user is an owner or the course is public and it is allowed to edit public courses
     return (user.profile in course.owners.all()) or (not course.restrict_changes
                                                      and ALLOW_PUBLIC_COURSE_EDITING_BY_EVERYONE)
+
+
+@register.filter
+def is_content_editable(type):
+    # TODO: implement check
+    return False
+
+
+@register.inclusion_tag("frontend/course/dropdown_topic.html")
+def add_content_button(user, course_id, topic_id):
+    """
+    generate dropdown-button containing list of available content types
+    :param User user: the user
+    :param int course_id: id of the course
+    :param int topic_id: id of the topic
+    :return: dropdown button as html div
+    :rtype: dict
+    """
+    # generate list of tuple (content type, content verbose name) for add content dropdown
+    content_data = [(content_type, content_model.DESC) for content_type, content_model in CONTENT_TYPES.items()]
+    return {'user': user, 'course_id': course_id, 'topic_id': topic_id, 'content_data': content_data}
diff --git a/frontend/urls.py b/frontend/urls.py
@@ -1,5 +1,6 @@
 from django.urls import path, re_path, include
 
+from content.models import CONTENT_TYPES
 from frontend import views
 
 app_name = "frontend"
@@ -21,6 +22,7 @@
             path('delete/', views.CourseDeleteView.as_view(), name='course-delete'),
         ])),
         path('<int:course_id>/topic/<int:topic_id>/content/', include([
+            re_path(r'add/(?P<type>' + '|'.join([key for key in CONTENT_TYPES.keys()]) + ')/$', views.content.AddContentView.as_view(), name='content-add'),
             path('<int:content_id>/comment/<int:pk>/delete/', views.DeleteComment.as_view(), name='comment-delete'),
             path('<int:content_id>/comment/<int:pk>/edit/', views.EditComment.as_view(), name='comment-edit'),
             path('<pk>/', views.ContentView.as_view(), name='content'),
diff --git a/frontend/views/content.py b/frontend/views/content.py
@@ -1,12 +1,86 @@
-from django.http import HttpResponseRedirect, Http404
+from django.contrib import messages
+from django.contrib.auth.mixins import LoginRequiredMixin
+from django.contrib.messages.views import SuccessMessageMixin
+from django.http import HttpResponseRedirect, Http404, HttpResponseBadRequest
 from django.shortcuts import get_object_or_404
-from django.urls import reverse_lazy
+from django.urls import reverse_lazy, reverse
 from django.utils import timezone
 from django.utils.translation import gettext_lazy as _
-from django.views.generic import DetailView
+from django.views.generic import DetailView, CreateView
 
 from base.models import Content, Comment, Course, Topic, Favorite
+from base.utils import get_user
 from frontend.forms import CommentForm, TranslateForm
+from frontend.forms.addcontent import AddContentForm
+from content.forms import CONTENT_TYPE_FORMS
+
+
+class AddContentView(SuccessMessageMixin, LoginRequiredMixin, CreateView):  # pylint: disable=too-many-ancestors
+    """
+    Adds a new content to the database
+    """
+    model = Content
+    template_name = 'frontend/content/addcontent.html'
+    form_class = AddContentForm
+    success_url = reverse_lazy('frontend:dashboard')
+
+    def get_success_message(self, cleaned_data):
+        return _(f"Content '{cleaned_data['type']}' successfully added")
+
+    def handle_error(self):
+        """
+        create error message and return to course page
+        """
+        course_id = self.kwargs['course_id']
+        messages.error(self.request, _('An error occurred while processing the request'))
+        return HttpResponseRedirect(reverse('frontend:course', args=(course_id,)))
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+
+        if "type" in self.kwargs:
+            content_type = self.kwargs['type']
+            if content_type in CONTENT_TYPE_FORMS:
+                context['content_type_form'] = CONTENT_TYPE_FORMS.get(content_type)
+            else:
+                return self.handle_error()
+        else:
+            return self.handle_error()
+        return context
+
+    def post(self, request, *args, **kwargs):
+        add_content_form = AddContentForm(request.POST)
+        if "type" in self.kwargs:
+            content_type = self.kwargs['type']
+            if content_type in CONTENT_TYPE_FORMS:
+                content_type_form = CONTENT_TYPE_FORMS.get(content_type)(request.POST, request.FILES)
+            else:
+                return self.handle_error()
+        else:
+            return self.handle_error()
+
+        if add_content_form.is_valid() and content_type_form.is_valid():
+            # save author etc.
+            content = add_content_form.save(commit=False)
+            content.author = get_user(self.request)
+            topic_id = self.kwargs['topic_id']
+            content.topic = Topic.objects.get(pk=topic_id)
+            content.type = content_type
+            content.save()
+            # save generic form. Image, YT video etc.
+            content_type_data = content_type_form.save(commit=False)
+            content_type_data.content = content
+            content_type_data.save()
+
+            course_id = self.kwargs['course_id']
+            topic_id = self.kwargs['topic_id']
+            return HttpResponseRedirect(reverse_lazy('frontend:content', args=(course_id, topic_id, content.id,)))
+
+        # add_content_form invalid
+        if not add_content_form.is_valid():
+            return self.form_invalid(add_content_form)
+        # content_type_form invalid
+        return self.form_invalid(content_type_form)
 
 
 class ContentView(DetailView):  # pylint: disable=too-many-ancestors
@@ -15,6 +89,7 @@ class ContentView(DetailView):  # pylint: disable=too-many-ancestors
     """
     model = Content
     template_name = "frontend/content/detail.html"
+    context_object_name = 'content'
     #form_class = Comment
 
     def post(self, request, *args, **kwargs):  # pylint: disable=unused-argument

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1 @@`
`1`		`-{# TODO Replace with real preview #}`
`2`		`-<div class="card-img-top fit bg-success" style="height: 180px;"></div>`
	`1`	`+<img class="card-img-top fit" style="height: 180px;" src="{{ content.imagecontent.image.url }}" alt="{{ content.description }}" width="500" height="600">`