Catalogue: Add natural courses order and proper filtering

assets/vue/services/courseService.js

@@ -6,9 +6,18 @@ export default {
 
   /**
    * @param {Object} searchParams
+   * @param {boolean} disablePagination
    * @returns {Promise<{totalItems, items}>}
    */
-  listAll: async (searchParams = {}) => await baseService.getCollection("/api/courses", searchParams),
+  listAll: async (searchParams = {}, disablePagination = false) => {
+    const params = { ...searchParams }
+
+    if (disablePagination) {
+      params.pagination = false
+    }
+
+    return await baseService.getCollection("/api/courses", params)
+  },
 
   /**
    * @param {number} cid

assets/vue/views/course/CatalogueCourses.vue

@@ -3,9 +3,9 @@
     <div class="flex flex-wrap justify-between items-center mb-6 gap-4">
       <div>
         <strong>{{ $t("Total number of courses") }}:</strong>
-        {{ filteredVisibleCourses.length }}<br />
+        {{ totalVisibleCourses }}<br />
         <strong>{{ $t("Matching courses") }}:</strong>
-        {{ filteredVisibleCourses.length }}
+        {{ totalVisibleCourses }}
       </div>
       <div class="flex gap-3">
         <Button
@@ -101,7 +101,7 @@ const onUserSubscribed = ({ courseId, newUser }) => {
 const load = async () => {
   status.value = true
   try {
-    const { items } = await courseService.listAll()
+    const { items } = await courseService.listAll({}, true)
     courses.value = items.map((course) => ({
       ...course,
       courseLanguage: findByIsoCode(course.courseLanguage)?.originalName || course.courseLanguage,
@@ -159,28 +159,25 @@ const filteredCourses = computed(() => {
   )
 })
 
-const filteredVisibleCourses = computed(() => {
+const visibleCoursesBase = computed(() => {
   const hidePrivate = platformConfigStore.getSetting("platform.course_catalog_hide_private") === "true"
 
-  return filteredCourses.value.filter((course) => {
-    const visibility = Number(course.visibility)
-
-    if (visibility === 0 || visibility === 4) {
-      return false
-    }
-
-    if (visibility === 1 && hidePrivate) {
-      return false
-    }
-
-    return true
-  })
+  return filteredCourses.value
+    .filter((course) => {
+      const visibility = Number(course.visibility)
+      if (visibility === 0 || visibility === 4) return false
+      if (visibility === 1 && hidePrivate) return false
+      return true
+    })
+    .sort((a, b) => a.title.localeCompare(b.title, undefined, { numeric: true, sensitivity: "base" }))
 })
 
 const visibleCourses = computed(() => {
-  return filteredVisibleCourses.value.slice(0, visibleCount.value)
+  return visibleCoursesBase.value.slice(0, visibleCount.value)
 })
 
+const totalVisibleCourses = computed(() => visibleCoursesBase.value.length)
+
 const handleScroll = () => {
   if (loadingMore.value) return
 
@@ -190,7 +187,7 @@ const handleScroll = () => {
   const fullHeight = document.documentElement.scrollHeight
 
   if (scrollTop + viewportHeight + threshold >= fullHeight) {
-    if (visibleCount.value < filteredCourses.value.length) {
+    if (visibleCount.value < visibleCoursesBase.value.length) {
       loadingMore.value = true
       setTimeout(() => {
         visibleCount.value += rowsPerScroll

src/CoreBundle/Entity/Course.php

@@ -47,7 +47,8 @@
     filters: [
         'course.sticky_boolean_filter',
     ],
-    security: "is_granted('ROLE_USER')"
+    paginationClientEnabled: true,
+    security: "is_granted('ROLE_USER')",
 )]
 #[ORM\Table(name: 'course')]
 #[ORM\Index(columns: ['sticky'], name: 'idx_course_sticky')]