Refactoring course catalogue - refs BT#22255

Author: AngelFQC

assets/css/scss/_catalog_course.scss

@@ -1,37 +0,0 @@
-::v-deep(.p-paginator) {
-  .p-paginator-current {
-    margin-left: auto;
-  }
-}
-.course-image {
-  width: 130px;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
-}
-.p-input-icon-left > i:first-of-type {
-  left: 0.75rem;
-  color: #6c757d;
-}
-.p-input-icon-left > i, .p-input-icon-right > i {
-  margin-top: -.5rem;
-  position: absolute;
-  top: 50%;
-}
-::v-deep(.p-datatable.p-datatable-courses) {
-  .p-datatable-header {
-    padding: 1rem;
-    text-align: left;
-    font-size: 1.5rem;
-  }
-
-  .p-paginator {
-    padding: 1rem;
-  }
-
-  .p-datatable-thead > tr > th {
-    text-align: left;
-  }
-
-  .p-datatable-tbody > tr > td {
-    cursor: auto;
-  }
-}

assets/vue/components/basecomponents/BaseRating.vue

@@ -21,6 +21,6 @@ const emit = defineEmits(["change"])
     v-model="model"
     :cancel="false"
     :stars="stars"
-    @change="emit('change', $event, model)"
+    @change="emit('change', $event)"
   />
 </template>

assets/vue/components/basecomponents/ChamiloIcons.js

@@ -58,6 +58,7 @@ export const chamiloIconToClass = {
   "file-text": "mdi mdi-file-document",
   "file-upload": "mdi mdi-file-upload",
   "file-video": "mdi mdi-file-video",
+  "filter": "mdi mdi-filter",
   "fit-to-screen": "",
   "folder-generic": "mdi mdi-folder",
   "folder-multiple-plus": "mdi mdi-folder-multiple-plus",

assets/vue/composables/catalogue/catalogueCourseList.js

@@ -0,0 +1,114 @@
+import { ref } from "vue"
+import courseService from "../../services/courseService"
+
+import { useLanguage } from "../language"
+import { useNotification } from "../notification"
+
+import { FilterMatchMode } from "primevue/api"
+
+import * as trackCourseRanking from "../../services/trackCourseRankingService"
+
+export function useCatalogueCourseList() {
+  const isLoading = ref(true)
+  const courses = ref([])
+  const filters = ref({})
+
+  const { findByIsoCode: findLanguageByIsoCode } = useLanguage()
+  const { showErrorNotification } = useNotification()
+
+  function initFilters() {
+    filters.value = {
+      global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    }
+  }
+
+  /**
+   * @returns {Promise<void>}
+   */
+  async function load() {
+    isLoading.value = true
+
+    try {
+      const { items } = await courseService.listAll()
+
+      courses.value = items.map((course) => ({
+        ...course,
+        courseLanguage: findLanguageByIsoCode(course.courseLanguage)?.originalName,
+      }))
+    } catch (error) {
+      showErrorNotification(error)
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  /**
+   * @param {number} courseId
+   * @param {number} totalScore
+   * @returns {Promise<void>}
+   */
+  async function createRating(courseId, totalScore) {
+    try {
+      const response = await trackCourseRanking.saveRanking({
+        totalScore,
+        courseIri: `/api/courses/${courseId}`,
+        urlId: window.access_url_id,
+        sessionId: 0,
+      })
+
+      courses.value.forEach((course) => {
+        if (course.id === courseId) {
+          course.trackCourseRanking = response
+        }
+      })
+    } catch (e) {
+      showErrorNotification(e)
+    }
+  }
+
+  /**
+   * @param {number} trackCourseRankingId
+   * @param {number} totalScore
+   * @returns {Promise<void>}
+   */
+  async function updateRating(trackCourseRankingId, totalScore) {
+    try {
+      const response = await trackCourseRanking.updateRanking({
+        trackCourseRankingId,
+        totalScore,
+      })
+
+      courses.value.forEach((course) => {
+        if (course.trackCourseRanking && course.trackCourseRanking.id === trackCourseRankingId) {
+          course.trackCourseRanking.realTotalScore = response.realTotalScore
+        }
+      })
+    } catch (e) {
+      showErrorNotification(e)
+    }
+  }
+
+  /**
+   * @param {number} value
+   * @param {Object} course
+   * @returns {Promise<void>}
+   */
+  async function onRatingChange({ value }, course) {
+    if (value > 0) {
+      if (course.trackCourseRanking) {
+        await updateRating(course.trackCourseRanking.id, value)
+      } else {
+        await createRating(course.id, value)
+      }
+    }
+  }
+
+  return {
+    isLoading,
+    courses,
+    filters,
+    load,
+    initFilters,
+    onRatingChange,
+  }
+}

assets/vue/services/trackCourseRankingService.js

@@ -17,10 +17,10 @@ export async function saveRanking({ courseIri, urlId, sessionId, totalScore }) {
 }
 
 /**
- * @param {string} iri
+ * @param {number} trackCourseRankingId
  * @param {number} totalScore
  * @returns {Promise<Object>}
  */
-export async function updateRanking({ iri, totalScore }) {
-  return await baseService.put(iri, { totalScore })
+export async function updateRanking({ trackCourseRankingId, totalScore }) {
+  return await baseService.put(`/api/track_course_rankings/${trackCourseRankingId}`, { totalScore })
 }