style: improve course feedback table

chore: add comment for inverted index

fix: only show feedback on feedback table column

fix: round average rating

fix: improve column table size

.coveragerc

@@ -2,4 +2,6 @@
 [run]
 data_file = .coverage
 source = feedback
-omit = */urls.py
+omit =
+    */urls.py
+    */settings/*

feedback/extensions/filters.py

@@ -129,10 +129,14 @@ def load_blocks(request, course):
                 }
             )
             total_answers += vote
+            # We have an inverted scale, so we need to invert the index
+            # to get the correct average rating.
+            # Excellent = 1, Very Good = 2, Good = 3, Fair = 4, Poor = 5
+            # So Excellent = 5, Very Good = 4, Good = 3, Fair = 2, Poor = 1
             total_votes += vote * (5 - index)
 
         try:
-            average_rating = total_votes / total_answers
+            average_rating = round(total_votes / total_answers, 2)
         except ZeroDivisionError:
             average_rating = 0
 
@@ -176,19 +180,17 @@ def load_xblock_answers(request, students, course_id, block_id, course):
         )
         if student_xblock_instance:
             prompt = student_xblock_instance.get_prompt()
-            if (
-                student_xblock_instance.user_vote == -1
-                and not student_xblock_instance.user_freeform
-            ):
-                continue
-            answers.append(
-                {
-                    "username": username,
-                    "user_vote": prompt["scale_text"][
-                        student_xblock_instance.user_vote
-                    ],
-                    "user_freeform": student_xblock_instance.user_freeform,
-                }
-            )
+            if student_xblock_instance.user_freeform:
+                if student_xblock_instance.user_vote != -1:
+                    vote = prompt["scale_text"][student_xblock_instance.user_vote]
+                else:
+                    vote = "No vote"
+                answers.append(
+                    {
+                        "username": username,
+                        "user_vote": vote,
+                        "user_freeform": student_xblock_instance.user_freeform,
+                    }
+                )
 
     return answers

feedback/static/css/feedback_instructor.css

@@ -0,0 +1,9 @@
+.feedback-instructor-wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.go-back {
+    margin: 16px 0px 16px 0px;
+}

feedback/static/html/feedback_instructor.html

@@ -1,30 +1,52 @@
 {% load i18n %}
 
-<div class="feedback-instructor-wrapper">
-  <table>
-    <tr>
-      <th>Location</th>
-      <th>Numbers of ratings</th>
-      <th>Average rating</th>
-      <th>Feedback received</th>
-    </tr>
-    {% for block in blocks %}
-    <tr>
-      <td><a href="{{ block.url }}">{{ block.parent }}</a></td>
-      <td>
-        <ul>
-          {% for vote_aggregate in block.vote_aggregate %}
-          <li>{{ vote_aggregate.scale_text }}: {{ vote_aggregate.count }}</li>
+<div class="feedback-instructor-wrapper"></div>
+<div class="paragon-styles">
+    <div class="pgn__data-table-container">
+      <table role="table" class="pgn__data-table is-striped">
+        <thead>
+          <tr role="row">
+            <th colspan="6" role="columnheader">
+              <span class="d-flex align-items-center"><span>{% trans "Unit" %}</span></span>
+            </th>
+            <th colspan="3" role="columnheader">
+              <span class="d-flex align-items-center"><span>{% trans "Number of ratings" %}</span></span>
+            </th>
+            <th colspan="3" role="columnheader">
+              <span class="d-flex align-items-center"><span>{% trans "Average rating" %}</span></span>
+            </th>
+            <th colspan="8" role="columnheader">
+              <span class="d-flex align-items-center"><span>{% trans "Feedback " %}</span></span>
+            </th>
+          </tr>
+        </thead>
+        <tbody role="rowgroup">
+          {% for block in blocks %}
+          <tr role="row" class="pgn__data-table-row">
+            <td colspan="6" role="cell" class="pgn__data-table-cell-wrap">
+              <a class="admin-panel" href="{{ block.url }}"><button class="btn btn-primary" ="button">{% trans "See Unit" %}: {{ block.parent }}</button></a>
+            </td>
+            <td colspan="3" role="cell" class="pgn__data-table-cell-wrap">
+              <ul>
+                {% for vote_aggregate in block.vote_aggregate %}
+                <li>{{ vote_aggregate.scale_text }}: {{ vote_aggregate.count }}</li>
+                {% endfor %}
+              </ul>
+            </td>
+            <td colspan="3" role="cell" class="pgn__data-table-cell-wrap">{{ block.average_rating }}</td>
+            <td colspan="8" role="cell" class="pgn__data-table-cell-wrap">
+              <ul>
+                {% for feedback in block.answers %}
+                <li>{% trans "Comment" %}: {{ feedback.user_freeform }}. {% trans "Vote" %}: {% if feedback.user_vote != -1 %} {{ feedback.user_vote }} {% else %} {% trans "No vote" %} {% endif %}</li>
+                {% endfor %}
+              </ul>
+            </td>
+          </tr>
           {% endfor %}
-        </ul>
-      </td>
-      <td>{{ block.average_rating }}</td>
-      <td>
-        {% for feedback in block.answers %}
-        <div class="feedback-block-answer"> * {{ feedback.user_freeform }}. Vote: {{ feedback.user_vote }}</div>
-        {% endfor %}
-      </td>
-    </tr>
-    {% endfor %}
-  </table>
-</div>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+<!-- This script is because it's currently not possible to add sections dinamically from the frontend.  -->
+<script type="text/javascript" src="/static/js/src/feedback_instructor.js"></script>

feedback/static/js/src/feedback_instructor.js

@@ -0,0 +1,10 @@
+$(function () {
+
+    const cssUrl = "https://cdn.jsdelivr.net/npm/@edx/[email protected]/dist/paragon.min.css";
+
+    $('<link>').attr({
+        href: cssUrl,
+        rel: "stylesheet"
+    }).appendTo('head');
+
+});

feedbacktests/test_filters.py

@@ -25,7 +25,7 @@ def setUp(self) -> None:
     @patch("feedback.extensions.filters.modulestore")
     def test_run_filter_without_blocks(self, modulestore_mock, get_block_by_usage_id_mock, get_user_enrollments_mock):
         """
-        Check the filter is not executed when there are no LimeSurvey blocks in the course.
+        Check the filter is not executed when there are no Feedback blocks in the course.
 
         Expected result:
             - The context is returned without modifications.
@@ -48,10 +48,10 @@ def test_run_filter_without_blocks(self, modulestore_mock, get_block_by_usage_id
     def test_run_filter(self, modulestore_mock, load_single_xblock_mock, get_block_by_usage_id_mock, get_user_enrollments_mock,
                         get_lms_link_for_item_mock):
         """
-        Check the filter is executed when there are LimeSurvey blocks in the course.
+        Check the filter is executed when there are Feedback blocks in the course.
 
         Expected result:
-            - The context is returned with the LimeSurvey blocks information.
+            - The context is returned with the Feedback blocks information.
         """
         modulestore_mock().get_items.return_value = [Mock(location="test-location")]
         context = {"course": Mock(id="test-course-id"), "sections": []}

setup.py

@@ -51,5 +51,5 @@ def package_data(pkg, roots):
             "feedback = feedback.apps:FeedbackConfig",
         ],
     },
-    package_data=package_data("feedback", ["static", "public", "templates"]),
+    package_data=package_data("feedback", ["static", "public", "templates", "translations"]),
 )