Refactoring CatalogueCourses component to use ajax services - refs BT#22255

assets/vue/services/courseService.js

@@ -4,6 +4,12 @@ import baseService from "./baseService"
 export default {
   find: baseService.get,
 
+  /**
+   * @param {Object} searchParams
+   * @returns {Promise<{totalItems, items}>}
+   */
+  listAll: async (searchParams = {}) => await baseService.getCollection("/api/courses", searchParams),
+
   /**
    * @param {number} cid
    * @param {object} params

assets/vue/services/trackCourseRankingService.js

@@ -0,0 +1,26 @@
+import baseService from "./baseService"
+
+/**
+ * @param {string} courseIri
+ * @param {number} urlId
+ * @param {number} sessionId
+ * @param {number} totalScore
+ * @returns {Promise<Object>}
+ */
+export async function saveRanking({ courseIri, urlId, sessionId, totalScore }) {
+  return await baseService.post("/api/track_course_rankings", {
+    totalScore,
+    course: courseIri,
+    urlId,
+    sessionId,
+  })
+}
+
+/**
+ * @param {string} iri
+ * @param {number} totalScore
+ * @returns {Promise<Object>}
+ */
+export async function updateRanking({ iri, totalScore }) {
+  return await baseService.put(iri, { totalScore })
+}

assets/vue/views/course/CatalogueCourses.vue

@@ -195,8 +195,6 @@
 </template>
 <script setup>
 import { ref } from "vue"
-import { ENTRYPOINT } from "../../config/entrypoint"
-import axios from "axios"
 import { FilterMatchMode } from "primevue/api"
 import Button from "primevue/button"
 import DataTable from "primevue/datatable"
@@ -205,8 +203,15 @@ import Rating from "primevue/rating"
 import { usePlatformConfig } from "../../store/platformConfig"
 import { useSecurityStore } from "../../store/securityStore"
 
+import courseService from "../../services/courseService"
+import * as trackCourseRanking from "../../services/trackCourseRankingService"
+
+import { useNotification } from "../../composables/notification"
+
+const { showErrorNotification } = useNotification()
+
 const securityStore = useSecurityStore()
-const status = ref(null)
+const status = ref(false)
 const courses = ref([])
 const filters = ref(null)
 const currentUserId = securityStore.user.id
@@ -214,73 +219,65 @@ const currentUserId = securityStore.user.id
 const platformConfigStore = usePlatformConfig()
 const showCourseDuration = "true" === platformConfigStore.getSetting("course.show_course_duration")
 
-const load = function () {
+async function load() {
   status.value = true
-  axios
-    .get(ENTRYPOINT + "courses.json")
-    .then((response) => {
-      status.value = false
-      if (Array.isArray(response.data)) {
-        response.data.forEach((course) => {
-          course.courseLanguage = getOriginalLanguageName(course.courseLanguage)
 
-          if (course.duration) {
-            course.duration = course.duration
-          }
-        })
-        courses.value = response.data
-      }
-    })
-    .catch(function (error) {
-      console.log(error)
-    })
+  try {
+    const { items } = await courseService.listAll()
+
+    courses.value = items.map((course) => ({
+      ...course,
+      courseLanguage: getOriginalLanguageName(course.courseLanguage),
+    }))
+  } catch (error) {
+    showErrorNotification(error)
+  } finally {
+    status.value = false
+  }
 }
 
-const updateRating = function (id, value) {
+async function updateRating(id, value) {
   status.value = true
-  axios
-    .patch(
-      ENTRYPOINT + "track_course_rankings/" + id,
-      { totalScore: value },
-      { headers: { "Content-Type": "application/merge-patch+json" } },
-    )
-    .then((response) => {
-      courses.value.forEach((course) => {
-        if (course.trackCourseRanking && course.trackCourseRanking.id === id) {
-          course.trackCourseRanking.realTotalScore = response.data.realTotalScore
-        }
-      })
-      status.value = false
+
+  try {
+    const response = await trackCourseRanking.updateRanking({
+      iri: `/api/track_course_rankings/${id}`,
+      totalScore: value,
     })
-    .catch(function (error) {
-      console.log(error)
+
+    courses.value.forEach((course) => {
+      if (course.trackCourseRanking && course.trackCourseRanking.id === id) {
+        course.trackCourseRanking.realTotalScore = response.realTotalScore
+      }
     })
+  } catch (e) {
+    showErrorNotification(e)
+  } finally {
+    status.value = false
+  }
 }
 
-const newRating = function (courseId, value) {
+const newRating = async function (courseId, value) {
   status.value = true
-  axios
-    .post(
-      ENTRYPOINT + "track_course_rankings",
-      {
-        totalScore: value,
-        course: ENTRYPOINT + "courses/" + courseId,
-        url_id: window.access_url_id,
-        sessionId: 0,
-      },
-      { headers: { "Content-Type": "application/ld+json" } },
-    )
-    .then((response) => {
-      courses.value.forEach((course) => {
-        if (course.id === courseId) {
-          course.trackCourseRanking = response.data
-        }
-      })
-      status.value = false
+
+  try {
+    const response = await trackCourseRanking.saveRanking({
+      totalScore: value,
+      courseIri: `/api/courses/${courseId}`,
+      urlId: window.access_url_id,
+      sessionId: 0,
     })
-    .catch(function (error) {
-      console.log(error)
+
+    courses.value.forEach((course) => {
+      if (course.id === courseId) {
+        course.trackCourseRanking = response
+      }
     })
+  } catch (e) {
+    showErrorNotification(e)
+  } finally {
+    status.value = false
+  }
 }
 
 const isUserInCourse = (course) => {