Visually differentiate closed UVs from the others

pedagogy/api.py

@@ -46,4 +46,4 @@ class UvController(ControllerBase):
     )
     @paginate(PageNumberPaginationExtra, page_size=100)
     def fetch_uv_list(self, search: Query[UvFilterSchema]):
-        return search.filter(UV.objects.values())
+        return search.filter(UV.objects.order_by("code").values())

pedagogy/static/pedagogy/css/pedagogy.scss

@@ -47,11 +47,14 @@ $large-devices: 992px;
     }
   }
 
-  #dynamic_view {
+  #uv-list {
     font-size: 1.1em;
 
     overflow-wrap: break-word;
-
+    .closed td.title {
+      color: lighten($black-color, 10%);
+      font-style: italic;
+    }
     td {
       text-align: center;
       border: none;

pedagogy/templates/pedagogy/guide.jinja

@@ -85,7 +85,7 @@
         </div>
       </div>
     </form>
-    <table id="dynamic_view">
+    <table id="uv-list">
       <thead>
         <tr>
           <td>{% trans %}UV{% endtrans %}</td>
@@ -102,11 +102,17 @@
           {% endif %}
         </tr>
       </thead>
-      <tbody id="dynamic_view_content" :aria-busy="loading">
+      <tbody :aria-busy="loading">
         <template x-for="uv in uvs.results" :key="uv.id">
-          <tr @click="window.location.href = `/pedagogy/uv/${uv.id}`" class="clickable">
+          <tr
+            @click="window.location.href = `/pedagogy/uv/${uv.id}`"
+            class="clickable"
+            :class="{closed: uv.semester === 'CLOSED'}"
+          >
             <td><a :href="`/pedagogy/uv/${uv.id}`" x-text="uv.code"></a></td>
-            <td x-text="uv.title"></td>
+            <td class="title"
+                x-text="uv.title + (uv.semester === 'CLOSED' ? ' ({% trans %}closed uv{% endtrans %})' : '')"
+            ></td>
             <td x-text="uv.department"></td>
             <td x-text="uv.credit_type"></td>
             <td><i :class="uv.semester.includes('AUTUMN') && 'fa fa-leaf'"></i></td>