Course: Add support for resource sequencing in course and session views - refs BT#22586

Author: @christianbeeznest

Author: christianbeeznest

assets/vue/components/basecomponents/ChamiloIcons.js

@@ -144,4 +144,5 @@ export const chamiloIconToClass = {
   "clear-all": "mdi mdi-broom",
   "qrcode": "mdi mdi-qrcode",
   "minus": "mdi mdi-minus",
+  "shield-check": "mdi mdi-shield-check",
 }

assets/vue/components/course/CatalogueCourseCard.vue

@@ -121,7 +121,7 @@
 
       <div class="mt-auto pt-2">
         <router-link
-          v-if="course.visibility === 3 || (course.visibility === 2 && isUserInCourse)"
+          v-if="isUserInCourse && (course.visibility === 2 || course.visibility === 3)"
           :to="{ name: 'CourseHome', params: { id: course.id } }"
         >
           <Button
@@ -132,15 +132,23 @@
         </router-link>
 
         <Button
-          v-else-if="course.visibility === 2 && course.subscribe && !isUserInCourse"
+          v-else-if="isLocked && hasRequirements"
+          :label="$t('Check requirements')"
+          icon="mdi mdi-shield-check"
+          class="w-full p-button-warning"
+          @click="showDependenciesModal = true"
+        />
+
+        <Button
+          v-else-if="course.subscribe && props.currentUserId"
           :label="$t('Subscribe')"
           icon="pi pi-sign-in"
           class="w-full"
           @click="subscribeToCourse"
         />
 
         <Button
-          v-else-if="course.visibility === 2 && !course.subscribe && !isUserInCourse"
+          v-else-if="course.visibility === 2 && !course.subscribe && props.currentUserId"
           :label="$t('Subscription not allowed')"
           icon="pi pi-ban"
           disabled
@@ -165,6 +173,13 @@
       </div>
     </div>
   </div>
+  <CatalogueRequirementModal
+    v-model="showDependenciesModal"
+    :course-id="course.id"
+    :session-id="course.sessionId || 0"
+    :requirements="requirementList"
+    :graph-image="graphImage"
+  />
   <Dialog
     v-model:visible="showDescriptionDialog"
     :header="course.title"
@@ -179,21 +194,17 @@
 <script setup>
 import Rating from "primevue/rating"
 import Button from "primevue/button"
-import { computed, ref } from "vue"
-import courseRelUserService from "../../services/courseRelUserService"
+import Dialog from "primevue/dialog"
+import { computed, ref, onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useNotification } from "../../composables/notification"
-import Dialog from "primevue/dialog"
 import { usePlatformConfig } from "../../store/platformConfig"
+import CatalogueRequirementModal from "./CatalogueRequirementModal.vue"
+import courseRelUserService from "../../services/courseRelUserService"
+import { useCourseRequirementStatus } from "../../composables/course/useCourseRequirementStatus"
 import { useLocale } from "../../composables/locale"
-const platformConfigStore = usePlatformConfig()
-const showDescriptionDialog = ref(false)
 const { getOriginalLanguageName } = useLocale()
 
-const allowDescription = computed(
-  () => platformConfigStore.getSetting("course.show_courses_descriptions_in_catalog") !== "false",
-)
-
 const props = defineProps({
   course: Object,
   currentUserId: {
@@ -212,6 +223,14 @@ const emit = defineEmits(["rate", "subscribed"])
 const router = useRouter()
 const route = useRoute()
 const { showErrorNotification, showSuccessNotification } = useNotification()
+const platformConfigStore = usePlatformConfig()
+
+const showDescriptionDialog = ref(false)
+const showDependenciesModal = ref(false)
+
+const allowDescription = computed(
+  () => platformConfigStore.getSetting("course.show_courses_descriptions_in_catalog") !== "false",
+)
 
 const isUserInCourse = computed(() => {
   if (!props.currentUserId) return false
@@ -287,9 +306,7 @@ function routeExists(name) {
 
 const linkSettings = computed(() => {
   const settings = platformConfigStore.getSetting("course.course_catalog_settings")
-  const result = settings?.link_settings ?? {}
-  console.log("Link settings:", result)
-  return result
+  return settings?.link_settings ?? {}
 })
 
 const imageLink = computed(() => {
@@ -304,10 +321,6 @@ const imageLink = computed(() => {
     return { name: routeName, params: { id: props.course.id } }
   }
 
-  if (routeName) {
-    console.warn(`[CatalogueCourseCard] Route '${routeName}' does not exist.`)
-  }
-
   return null
 })
 
@@ -318,20 +331,21 @@ const titleLink = computed(() => {
     return { name: routeName, params: { id: props.course.id } }
   }
 
-  if (routeName) {
-    console.warn(`[CatalogueCourseCard] Route '${routeName}' does not exist.`)
-  }
-
   return null
 })
 
 const showInfoPopup = computed(() => {
   const allowed = ["course_description_popup"]
   const value = linkSettings.value.info_url
-  if (value && !allowed.includes(value)) {
-    console.warn(`[CatalogueCourseCard] info_url '${value}' is not a recognized option.`)
-    return false
-  }
-  return value === "course_description_popup"
+  return value && allowed.includes(value)
+})
+
+const { isLocked, hasRequirements, requirementList, graphImage, fetchStatus } = useCourseRequirementStatus(
+  props.course.id,
+  props.course.sessionId || 0,
+)
+
+onMounted(() => {
+  fetchStatus()
 })
 </script>

assets/vue/components/course/CatalogueRequirementModal.vue

@@ -0,0 +1,84 @@
+<template>
+  <Dialog
+    v-model:visible="visible"
+    modal
+    :header="t('Session requirements and dependencies')"
+    class="w-[30rem] z-[99999] !block !opacity-100"
+  >
+    <div v-if="hasData">
+      <div
+        v-for="section in requirements"
+        :key="section.name"
+        class="mb-4"
+      >
+        <h4 class="font-semibold text-gray-700 mb-2">
+          {{ section.name }}
+        </h4>
+        <ul class="list-disc pl-5 text-sm text-gray-700">
+          <li
+            v-for="req in section.requirements"
+            :key="req.name"
+            class="flex items-center gap-2"
+          >
+            <i
+              v-if="req.status !== null"
+              :class="req.status
+            ? 'mdi mdi-check-circle text-green-500'
+            : 'mdi mdi-alert-circle text-red-500'"
+            ></i>
+            <span v-html="req.adminLink || req.name"></span>
+          </li>
+        </ul>
+      </div>
+
+      <div
+        v-if="graphImage"
+        class="mt-4 text-center"
+      >
+        <img
+          :src="graphImage"
+          alt="Graph"
+          class="max-w-full max-h-96 mx-auto border rounded"
+        />
+      </div>
+    </div>
+
+    <div
+      v-else
+      class="text-sm text-gray-500"
+    >
+      {{ t("No dependencies") }}
+    </div>
+  </Dialog>
+</template>
+
+<script setup>
+import Dialog from "primevue/dialog"
+import { computed } from "vue"
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
+
+const props = defineProps({
+  modelValue: Boolean,
+  courseId: Number,
+  sessionId: Number,
+  requirements: Array,
+  dependencies: Array,
+  graphImage: String,
+})
+
+const emit = defineEmits(["update:modelValue"])
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+})
+
+const requirements = computed(() => props.requirements || [])
+const dependencies = computed(() => props.dependencies || [])
+
+const hasData = computed(() => {
+  return requirements.value.length > 0 || dependencies.value.length > 0
+})
+</script>