Pagination on UV guide

core/static/core/style.scss

@@ -24,11 +24,6 @@ $black-color: hsl(0, 0%, 17%);
 
 $faceblue: hsl(221, 44%, 41%);
 $twitblue: hsl(206, 82%, 63%);
-$pinktober: #ff5674;
-$pinktober-secondary: #8a2536;
-$pinktober-primary-text: white;
-$pinktober-bar-closed: $pinktober-secondary;
-$pinktober-bar-opened: #388e3c;
 
 $shadow-color: rgb(223, 223, 223);
 
@@ -48,6 +43,18 @@ body {
   font-family: sans-serif;
 }
 
+button:disabled,
+button:disabled:hover {
+  color: #fff;
+  background-color: #6c757d;
+}
+
+button.active,
+button.active:hover {
+  color: #fff;
+  background-color: $secondary-color;
+}
+
 a.button,
 button,
 input[type="button"],
@@ -1510,6 +1517,10 @@ $pedagogy-light-blue: #caf0ff;
 $pedagogy-white-text: #f0f0f0;
 
 .pedagogy {
+  #pagination {
+    text-align: center;
+  }
+
   &.star-not-checked {
     color: #f7f7f7;
     margin-bottom: 0;

pedagogy/api.py

@@ -3,8 +3,9 @@ from typing import Annotated
 from annotated_types import Ge
 from django.conf import settings
 from ninja import Query
-from ninja_extra import ControllerBase, api_controller, route
+from ninja_extra import ControllerBase, api_controller, paginate, route
 from ninja_extra.exceptions import NotFound
+from ninja_extra.pagination import PageNumberPaginationExtra, PaginatedResponseSchema
 
 from core.api_permissions import IsInGroup, IsRoot, IsSubscriber
 from pedagogy.models import UV
@@ -29,8 +30,9 @@ class UvController(ControllerBase):
             raise NotFound
         return res
 
-    @route.get("", response=list[SimpleUvSchema], url_name="fetch_uvs")
+    @route.get(
+        "", response=PaginatedResponseSchema[SimpleUvSchema], url_name="fetch_uvs"
+    )
+    @paginate(PageNumberPaginationExtra, page_size=100)
     def fetch_uv_list(self, search: Query[UvFilterSchema]):
-        # le `[:50]`, c'est de la pagination eco+
+        return search.filter(UV.objects.all())
-        # si quelqu'un est motivé, il peut faire une vraie pagination
-        return search.filter(UV.objects.all())[:50]

pedagogy/templates/pedagogy/guide.jinja

@@ -73,9 +73,9 @@
 			<div class="radio-semester">
 				<div class="radio-guide">
 					<input type="checkbox" name="semester" id="radioAUTUMN" value="AUTUMN" x-model="semester"/>
-                    <label for="radioAUTUMN"><i class="fa fa-sun-o"></i></label>
+                    <label for="radioAUTUMN"><i class="fa fa-leaf"></i></label>
 					<input type="checkbox" name="semester" id="radioSPRING" value="SPRING" x-model="semester"/>
-                    <label for="radioSPRING"><i class="fa fa-leaf"></i></label>
+                    <label for="radioSPRING"><i class="fa fa-sun-o"></i></label>
 				</div>
 			</div>
 		</div>
@@ -96,22 +96,29 @@
 			</tr>
 		</thead>
 		<tbody id="dynamic_view_content">
-            <template x-for="uv in uvs" :key="uv.id">
+            <template x-for="uv in uvs.results" :key="uv.id">
                 <tr @click="window.location.href = `/pedagogy/uv/${uv.id}`">
                     <td><a :href="`/pedagogy/uv/${uv.id}`" x-text="uv.code"></a></td>
                     <td x-text="uv.title"></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>
+                    <td><i :class="uv.semester.includes('AUTUMN') && 'fa fa-leaf'"></i></td>
-                    <td><i :class="[uv.semester].includes('SPRING') && 'fa fa-sun-o'"></i></td>
+                    <td><i :class="uv.semester.includes('SPRING') && 'fa fa-sun-o'"></i></td>
                     {% if can_create_uv -%}
-                        <td><a :href="`/pedagogy/uv/${uv.id}/update`">{% trans %}Edit{% endtrans %}</a></td>
+                        <td><a :href="`/pedagogy/uv/${uv.id}/edit`">{% trans %}Edit{% endtrans %}</a></td>
                         <td><a :href="`/pedagogy/uv/${uv.id}/delete`">{% trans %}Delete{% endtrans %}</a></td>
                     {%- endif -%}
                 </tr>
             </template>
 		</tbody>
 	</table>
+    <nav id="pagination" class="hidden" :style="max_page() == 0 && 'display: none;'">
+        <button @click="page--" :disabled="page == 1">{% trans %}Previous{% endtrans %}</button>
+        <template x-for="i in max_page()">
+            <button x-text="i" @click="page = i" :class="i == page && 'active'"></button>
+        </template>
+        <button @click="page++" :disabled="page == max_page()">{% trans %}Next{% endtrans %}</button>
+    </nav>
 </div>
 <script>
     const initialUrlParams = new URLSearchParams(window.location.search);
@@ -140,9 +147,13 @@
     then fetch the corresponding data from the API.
     This data will then be displayed on the result part of the page.
     #}
+    const page_default = 1;
+    const page_size_default = 100;
     document.addEventListener("alpine:init", () => {
         Alpine.data("uv_search", () => ({
             uvs: [],
+            page: initialUrlParams.get("page") || page_default,
+            page_size: initialUrlParams.get("page_size") || page_size_default,
             search: initialUrlParams.get("search") || "",
             department: initialUrlParams.getAll("department"),
             credit_type: initialUrlParams.getAll("credit_type"),
@@ -153,18 +164,31 @@
                 initialUrlParams.get("semester").split("_AND_") : [],
 
             async init() {
-                ["search", "department", "credit_type", "semester"].forEach((param) => {
+                let search_params = ["search", "department", "credit_type", "semester"];
+                let pagination_params = ["semester", "page"];
+                search_params.forEach((param) => {
+                    this.$watch(param, async () => {
+                        {# Reset pagination on search #}
+                        this.page = page_default;
+                        this.page_size = page_size_default;
+                    });
+                });
+                search_params.concat(pagination_params).forEach((param) => {
                     this.$watch(param, async (value) => {
                         update_query_string(param, value);
                         await this.fetch_data();  {# reload data on form change #}
                     });
-                })
+                });
                 await this.fetch_data();  {# load initial data #}
             },
 
             async fetch_data() {
                 const url = "{{ url("api:fetch_uvs") }}" + window.location.search;
                 this.uvs = await (await fetch(url)).json();
+            },
+
+            max_page() {
+                return Math.round(this.uvs.count / this.page_size);
             }
         }))
     })

pedagogy/tests.py

@@ -617,39 +617,47 @@ class UVSearchTest(TestCase):
         res = self.client.get(self.url + "?search=PA00")
         uv = UV.objects.get(code="PA00")
         assert res.status_code == 200
-        assert json.loads(res.content) == [
+        assert json.loads(res.content) == {
-            {
+            "count": 1,
-                "id": uv.id,
+            "next": None,
-                "title": uv.title,
+            "previous": None,
-                "code": uv.code,
+            "results": [
-                "credit_type": uv.credit_type,
+                {
-                "semester": uv.semester,
+                    "id": uv.id,
-                "department": uv.department,
+                    "title": uv.title,
-            }
+                    "code": uv.code,
-        ]
+                    "credit_type": uv.credit_type,
+                    "semester": uv.semester,
+                    "department": uv.department,
+                }
+            ],
+        }
 
     def test_search_by_code(self):
         self.client.force_login(self.bibou)
         res = self.client.get(self.url + "?search=MT")
         assert res.status_code == 200
-        assert {uv["code"] for uv in json.loads(res.content)} == {"MT01", "MT10"}
+        assert {uv["code"] for uv in json.loads(res.content)["results"]} == {
+            "MT01",
+            "MT10",
+        }
 
     def test_search_by_credit_type(self):
         self.client.force_login(self.bibou)
         res = self.client.get(self.url + "?credit_type=CS")
         assert res.status_code == 200
-        codes = [uv["code"] for uv in json.loads(res.content)]
+        codes = [uv["code"] for uv in json.loads(res.content)["results"]]
         assert codes == ["AP4A", "MT01", "PHYS11"]
         res = self.client.get(self.url + "?credit_type=CS&credit_type=OM")
         assert res.status_code == 200
-        codes = {uv["code"] for uv in json.loads(res.content)}
+        codes = {uv["code"] for uv in json.loads(res.content)["results"]}
         assert codes == {"AP4A", "MT01", "PHYS11", "PA00"}
 
     def test_search_by_semester(self):
         self.client.force_login(self.bibou)
         res = self.client.get(self.url + "?semester=SPRING")
         assert res.status_code == 200
-        codes = {uv["code"] for uv in json.loads(res.content)}
+        codes = {uv["code"] for uv in json.loads(res.content)["results"]}
         assert codes == {"DA50", "TNEV", "PA00"}
 
     def test_search_multiple_filters(self):
@@ -658,14 +666,14 @@ class UVSearchTest(TestCase):
             self.url + "?semester=AUTUMN&credit_type=CS&department=TC"
         )
         assert res.status_code == 200
-        codes = {uv["code"] for uv in json.loads(res.content)}
+        codes = {uv["code"] for uv in json.loads(res.content)["results"]}
         assert codes == {"MT01", "PHYS11"}
 
     def test_search_fails(self):
         self.client.force_login(self.bibou)
         res = self.client.get(self.url + "?credit_type=CS&search=DA")
         assert res.status_code == 200
-        assert json.loads(res.content) == []
+        assert json.loads(res.content)["results"] == []
 
     def test_search_pa00_fail(self):
         self.client.force_login(self.bibou)