Migrate remaining fetch calls to baseService for consistency and improved error handling. Add new service methods across the codebase.

Author: AngelFQC

assets/vue/composables/locale.js

@@ -2,6 +2,7 @@ import { usePlatformConfig } from "../store/platformConfig"
 import { useSecurityStore } from "../store/securityStore"
 import { useCidReqStore } from "../store/cidReq"
 import { useCourseSettings } from "../store/courseSettingStore"
+import languageService from "../services/languageService"
 import { computed, ref, watch } from "vue"
 import { useRoute, useRouter } from "vue-router"
 
@@ -133,11 +134,12 @@ export function useLocale() {
     const { db, bcp47, parent } = normalizeIso(iso)
 
     async function hit(q) {
-      const r = await fetch(`/api/languages?isocode=${encodeURIComponent(q)}`)
-      if (!r.ok) return null
-      const j = await r.json()
-      const arr = j["hydra:member"] || j
-      return Array.isArray(arr) && arr.length ? arr[0] : null
+      try {
+        const { items } = await languageService.searchByIsocode(q)
+        return Array.isArray(items) && items.length ? items[0] : null
+      } catch {
+        return null
+      }
     }
 
     let row = await hit(db)

assets/vue/composables/useFileManager.js

@@ -8,6 +8,7 @@ import { getCourseContext } from "../utils/courseContext"
 import { RESOURCE_LINK_PUBLISHED } from "../constants/entity/resourcelink"
 import { useCidReqStore } from "../store/cidReq"
 import documentsService from "../services/documents"
+import baseService from "../services/baseService"
 
 export function useFileManager(entity, apiEndpoint, uploadRoute, isCourseDocument = false) {
   const route = useRoute()
@@ -135,19 +136,12 @@ export function useFileManager(entity, apiEndpoint, uploadRoute, isCourseDocumen
     isLoading.value = true
 
     try {
-      const response = await fetch(`${apiEndpoint}?${new URLSearchParams(params).toString()}`, {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      })
-
-      const data = await response.json()
-      if (data["hydra:member"]) {
-        files.value = data["hydra:member"]
-        totalFiles.value = data["hydra:totalItems"]
+      const { items, totalItems } = await baseService.getCollection(apiEndpoint, params)
+      if (items) {
+        files.value = items
+        totalFiles.value = totalItems
       } else {
-        console.error("[FILEMANAGER] Unexpected API response format", data)
+        console.error("[FILEMANAGER] Unexpected API response format", items)
       }
     } catch (error) {
       console.error("[FILEMANAGER] Error fetching files:", error)

assets/vue/services/calendarService.js

@@ -0,0 +1,21 @@
+import baseService from "./baseService"
+
+export default {
+  /**
+   * Fetches the sessions/events schedule for the current teacher's students.
+   * @param {Object} [params={}] - Optional filters (sid, start, end).
+   * @returns {Promise<Object[]>}
+   */
+  getMyStudentsSchedule(params = {}) {
+    return baseService.get("/api/calendar/my-students-schedule", params)
+  },
+
+  /**
+   * Fetches the sessions plan for a given year.
+   * @param {number|string} year
+   * @returns {Promise<Object>}
+   */
+  getSessionsPlan(year) {
+    return baseService.get("/api/calendar/sessions-plan", { year })
+  },
+}

assets/vue/services/courseService.js

@@ -32,6 +32,20 @@ export default {
     return await baseService.get("/plugin/CourseHomeNotify/ajax.php", { cid, sid, gid: 0 })
   },
 
+  /**
+   * Lists the current user's courses (paginated). Returns the raw response body
+   * so the caller can normalize it; accepts extra axios options (e.g. a signal).
+   * @param {number} page
+   * @param {number} itemsPerPage
+   * @param {Object} [options={}] - Extra axios options (e.g. AbortController signal).
+   * @returns {Promise<Object>}
+   */
+  listMyCourses: async (page, itemsPerPage, options = {}) => {
+    const response = await baseService.getRaw("/api/me/courses", { params: { page, itemsPerPage }, ...options })
+
+    return response.data
+  },
+
   /**
    * @param {Object} searchParams
    * @param {boolean} disablePagination

assets/vue/services/documents.js

@@ -86,15 +86,7 @@ async function getQuotaUsage(courseId, { sid = 0, gid = 0, force = false, staleM
   }
 
   try {
-    const url = `/api/documents/${cid}/usage?sid=${s}&gid=${g}`
-    const response = await window.fetch(url, {
-      credentials: "same-origin",
-      headers: { Accept: "application/json" },
-    })
-
-    if (!response.ok) return null
-
-    const json = await response.json()
+    const json = await baseService.get(`/api/documents/${cid}/usage`, { sid: s, gid: g })
     const quota = json?.quota || {}
     const availableBytes = Number(quota.availableBytes)
     const availablePercent = Number(quota.availablePercent)
@@ -249,33 +241,19 @@ export default {
   },
 
   async createCloudLink(payload) {
-    const response = await window.fetch("/api/documents", {
-      method: "POST",
-      credentials: "same-origin",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        ...payload,
-        filetype: "link",
-      }),
-    })
-
-    const data = await response.json().catch(() => ({}))
-
-    if (!response.ok) {
+    try {
+      return await baseService.post("/api/documents", { ...payload, filetype: "link" }, true)
+    } catch (error) {
+      const data = error?.response?.data || {}
       const message =
         data?.message ||
         data?.detail ||
         data?.["hydra:description"] ||
         (Array.isArray(data?.violations) && data.violations.length ? data.violations[0].message : null) ||
         "Unable to create cloud link."
 
-      throw new Error(message)
+      throw new Error(message, { cause: error })
     }
-
-    return data
   },
 
   /**

assets/vue/services/languageService.js

@@ -1,17 +1,23 @@
 import makeService from "./api"
+import baseService from "./baseService"
 
-const legalExtensions = {
+const languageExtensions = {
   async findAllAvailable() {
     try {
-      const response = await fetch("/api/languages?available=true")
-      if (!response.ok) {
-        throw new Error("Network response was not ok")
-      }
-      return await response.json()
+      return await baseService.get("/api/languages", { available: true })
     } catch (error) {
       console.error("Error fetching available languages:", error)
       throw error
     }
   },
+
+  /**
+   * Searches languages by isocode (includes unavailable ones).
+   * @param {string} isocode
+   * @returns {Promise<{totalItems, items}>}
+   */
+  async searchByIsocode(isocode) {
+    return baseService.getCollection("/api/languages", { isocode })
+  },
 }
-export default makeService("languages", legalExtensions)
+export default makeService("languages", languageExtensions)

assets/vue/services/legalService.js

@@ -1,42 +1,41 @@
 import makeService from "./api"
+import baseService from "./baseService"
 
 const legalExtensions = {
   async findAllByLanguage(languageId) {
-    const params = new URLSearchParams({
-      languageId: languageId,
+    return baseService.getCollection("/api/legals", {
+      languageId,
       "order[version]": "desc",
     })
-    return fetch(`/api/legals?${params.toString()}`)
   },
 
   async findLatestByLanguage(languageId) {
-    const params = new URLSearchParams({
-      languageId: languageId,
+    return baseService.getCollection("/api/legals", {
+      languageId,
       "order[version]": "desc",
-      itemsPerPage: "1",
+      itemsPerPage: 1,
     })
-    return fetch(`/api/legals?${params.toString()}`)
   },
 
   async findByLanguageAndVersion(languageId, version) {
-    const params = new URLSearchParams({
-      languageId: languageId,
-      version: version,
+    return baseService.getCollection("/api/legals", {
+      languageId,
+      version,
       "order[type]": "asc",
-      itemsPerPage: "50",
+      itemsPerPage: 50,
     })
-    return fetch(`/api/legals?${params.toString()}`)
   },
 
   async findAllType0() {
-    const params = new URLSearchParams({
-      type: "0",
+    return baseService.getCollection("/api/legals", {
+      type: 0,
       "order[version]": "desc",
-      itemsPerPage: "50",
+      itemsPerPage: 50,
     })
-    return fetch(`/api/legals?${params.toString()}`)
   },
 
+  // TODO: /legal/save is a controller endpoint (not API Platform); pending the
+  // non-API fetch migration decision, it still uses native fetch.
   async saveOrUpdateLegal(payload) {
     return fetch(`/legal/save`, {
       method: "POST",

assets/vue/services/resourcenode.js

@@ -1,3 +1,13 @@
 import makeService from "./api"
+import baseService from "./baseService"
 
-export default makeService("resource_nodes")
+export default makeService("resource_nodes", {
+  /**
+   * Fetches a single resource node by id.
+   * @param {number|string} id
+   * @returns {Promise<Object>}
+   */
+  async findById(id) {
+    return baseService.get(`/api/resource_nodes/${id}`)
+  },
+})

assets/vue/views/ccalendarevent/CalendarMyStudentsSchedule.vue

@@ -117,6 +117,7 @@ import timeGridPlugin from "@fullcalendar/timegrid"
 import interactionPlugin from "@fullcalendar/interaction"
 import Dialog from "primevue/dialog"
 import { DateTime } from "luxon"
+import calendarService from "../../services/calendarService"
 
 import CalendarSectionHeader from "../../components/ccalendarevent/CalendarSectionHeader.vue"
 
@@ -258,20 +259,7 @@ async function fetchSessions() {
     isLoadingSessions.value = true
     errorMessage.value = ""
 
-    const resp = await fetch("/api/calendar/my-students-schedule", {
-      method: "GET",
-      headers: { Accept: "application/json" },
-    })
-
-    if (!resp.ok) {
-      const text = await resp.text().catch(() => "")
-      console.error("[MyStudentsSchedule] Sessions request failed", resp.status, text)
-      errorMessage.value = t("Failed to load sessions")
-      sessions.value = []
-      return
-    }
-
-    const data = await resp.json()
+    const data = await calendarService.getMyStudentsSchedule()
     sessions.value = Array.isArray(data) ? data : []
   } catch (e) {
     console.error("[MyStudentsSchedule] Unexpected error", e)
@@ -378,26 +366,18 @@ async function fetchEvents(info, successCallback, failureCallback) {
     const start = DateTime.fromJSDate(info.start).toISO()
     const end = DateTime.fromJSDate(info.end).toISO()
 
-    const url = `/api/calendar/my-students-schedule?sid=${encodeURIComponent(sid)}&start=${encodeURIComponent(
-      start,
-    )}&end=${encodeURIComponent(end)}`
-
-    const resp = await fetch(url, { method: "GET", headers: { Accept: "application/json" } })
-
-    if (!resp.ok) {
-      const text = await resp.text().catch(() => "")
-      console.error("[MyStudentsSchedule] Events request failed", resp.status, text)
-      errorMessage.value = resp.status === 403 ? t("Not allowed") : t("Failed to load events")
-      successCallback([])
-      return
-    }
-
-    const data = await resp.json()
+    const data = await calendarService.getMyStudentsSchedule({ sid, start, end })
     successCallback(Array.isArray(data) ? data : [])
   } catch (e) {
-    console.error("[MyStudentsSchedule] Unexpected error", e)
-    errorMessage.value = t("Failed to load events")
-    failureCallback?.(e)
+    if (e?.response) {
+      console.error("[MyStudentsSchedule] Events request failed", e.response.status)
+      errorMessage.value = e.response.status === 403 ? t("Not allowed") : t("Failed to load events")
+      successCallback([])
+    } else {
+      console.error("[MyStudentsSchedule] Unexpected error", e)
+      errorMessage.value = t("Failed to load events")
+      failureCallback?.(e)
+    }
   }
 }
 

assets/vue/views/ccalendarevent/CalendarSessionsPlan.vue

@@ -122,6 +122,7 @@
 import { ref, watch } from "vue"
 import { useI18n } from "vue-i18n"
 import { DateTime } from "luxon"
+import calendarService from "../../services/calendarService"
 import CalendarSectionHeader from "../../components/ccalendarevent/CalendarSectionHeader.vue"
 import BaseButton from "../../components/basecomponents/BaseButton.vue"
 import { useRoute, useRouter } from "vue-router"
@@ -206,22 +207,7 @@ async function fetchPlan() {
     isLoading.value = true
     errorMessage.value = ""
 
-    const url = `/api/calendar/sessions-plan?year=${encodeURIComponent(String(year.value))}`
-    const resp = await fetch(url, { method: "GET", headers: { Accept: "application/ld+json, application/json" } })
-
-    if (!resp.ok) {
-      const text = await resp.text().catch(() => "")
-      console.error("[SessionsPlan] Request failed", resp.status, text)
-      if (resp.status === 403) {
-        errorMessage.value = tOrFallback("TooMuchSessionsInPlanification", "Too many sessions in your plan")
-      } else {
-        errorMessage.value = tOrFallback("Failed to load sessions plan", "Failed to load sessions plan")
-      }
-      sessions.value = []
-      return
-    }
-
-    const data = await resp.json()
+    const data = await calendarService.getSessionsPlan(year.value)
     const items = Array.isArray(data) ? data : Array.isArray(data?.["hydra:member"]) ? data["hydra:member"] : []
 
     sessions.value = items.map((x) => ({
@@ -235,8 +221,12 @@ async function fetchPlan() {
       color: x.color || "rgba(70,130,180,0.9)",
     }))
   } catch (e) {
-    console.error("[SessionsPlan] Unexpected error", e)
-    errorMessage.value = tOrFallback("Failed to load sessions plan", "Failed to load sessions plan")
+    console.error("[SessionsPlan] Request failed", e?.response?.status ?? e)
+    if (e?.response?.status === 403) {
+      errorMessage.value = tOrFallback("TooMuchSessionsInPlanification", "Too many sessions in your plan")
+    } else {
+      errorMessage.value = tOrFallback("Failed to load sessions plan", "Failed to load sessions plan")
+    }
     sessions.value = []
   } finally {
     isLoading.value = false