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

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,19 +194,14 @@
 <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"
-
-const platformConfigStore = usePlatformConfig()
-const showDescriptionDialog = ref(false)
-
-const allowDescription = computed(
-  () => platformConfigStore.getSetting("course.show_courses_descriptions_in_catalog") !== "false",
-)
+import CatalogueRequirementModal from "./CatalogueRequirementModal.vue"
+import courseRelUserService from "../../services/courseRelUserService"
+import { useCourseRequirementStatus } from "../../composables/course/useCourseRequirementStatus"
 
 const props = defineProps({
   course: Object,
@@ -211,6 +221,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
@@ -286,9 +304,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(() => {
@@ -303,10 +319,6 @@ const imageLink = computed(() => {
     return { name: routeName, params: { id: props.course.id } }
   }
 
-  if (routeName) {
-    console.warn(`[CatalogueCourseCard] Route '${routeName}' does not exist.`)
-  }
-
   return null
 })
 
@@ -317,20 +329,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,69 @@
+<template>
+  <Dialog
+    v-model:visible="visible"
+    modal
+    :header="t('Required courses')"
+    class="w-[30rem] z-[99999] !block !opacity-100"
+  >
+    <div v-if="sequenceList.length">
+      <div
+        v-for="item in sequenceList"
+        :key="item.name"
+        class="mb-4"
+      >
+        <h4 class="font-semibold text-gray-700 mb-2">{{ item.name }}</h4>
+        <ul>
+          <li
+            v-for="(req, id) in item.requirements"
+            :key="id"
+            class="flex items-center gap-2"
+          >
+            <i :class="req.status ? 'mdi mdi-check-circle text-green-500' : 'mdi mdi-alert-circle text-red-500'" />
+            <span>{{ req.name }}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      v-else
+      class="text-sm text-gray-500"
+    >
+      {{ t("No dependencies") }}
+    </div>
+    <div
+      v-if="graphImage"
+      class="mb-4 text-center"
+    >
+      <img
+        :src="graphImage"
+        alt="Graph"
+        class="max-w-full max-h-96 mx-auto border rounded"
+      />
+    </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,
+  graphImage: String,
+})
+
+const emit = defineEmits(["update:modelValue"])
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+})
+
+const sequenceList = computed(() => props.requirements || [])
+</script>

assets/vue/components/course/CourseCard.vue

@@ -2,9 +2,9 @@
   <Card class="course-card">
     <template #header>
       <img
-        v-if="disabled"
+        v-if="isLocked"
         :alt="course.title"
-        :src="course.illustrationUrl"
+        :src="course.illustrationUrl || '/img/session_default.svg'"
       />
       <BaseAppLink
         v-else
@@ -13,13 +13,13 @@
       >
         <img
           :alt="course.title"
-          :src="course.illustrationUrl"
+          :src="course.illustrationUrl || '/img/session_default.svg'"
         />
       </BaseAppLink>
     </template>
     <template #title>
-      <div class="course-card__title">
-        <div v-if="disabled">
+      <div class="course-card__title flex items-center gap-2">
+        <div v-if="isLocked">
           <div
             v-if="session"
             class="session__title"
@@ -43,27 +43,47 @@
           {{ course.title }}
         </BaseAppLink>
 
-        <div
-          v-if="sessionDisplayDate"
-          class="session__display-date"
-          v-text="sessionDisplayDate"
+        <BaseButton
+          v-if="isLocked && hasRequirements"
+          icon="shield-check"
+          type="black"
+          onlyIcon
+          size="large"
+          class="!bg-support-1 !text-support-3 !rounded-md !shadow-sm hover:!bg-support-2"
+          @click="openRequirementsModal"
         />
       </div>
+
+      <div
+        v-if="sessionDisplayDate"
+        class="session__display-date"
+        v-text="sessionDisplayDate"
+      />
     </template>
     <template #footer>
       <BaseAvatarList :users="teachers" />
     </template>
   </Card>
+
+  <CatalogueRequirementModal
+    v-model="showDependenciesModal"
+    :course-id="course.id"
+    :session-id="sessionId"
+    :requirements="requirementList"
+    :graph-image="graphImage"
+  />
 </template>
 
 <script setup>
 import Card from "primevue/card"
 import BaseAvatarList from "../basecomponents/BaseAvatarList.vue"
-import { computed } from "vue"
-import { isEmpty } from "lodash"
+import { computed, onMounted, ref } from "vue"
 import { useFormatDate } from "../../composables/formatDate"
 import { usePlatformConfig } from "../../store/platformConfig"
 import { useI18n } from "vue-i18n"
+import { useCourseRequirementStatus } from "../../composables/course/useCourseRequirementStatus"
+import BaseButton from "../basecomponents/BaseButton.vue"
+import CatalogueRequirementModal from "./CatalogueRequirementModal.vue"
 
 const { abbreviatedDatetime } = useFormatDate()
 
@@ -89,14 +109,11 @@ const props = defineProps({
   },
 })
 
-const platformConfigStore = usePlatformConfig()
-const showCourseDuration = computed(() => "true" === platformConfigStore.getSetting("course.show_course_duration"))
-
 const { t } = useI18n()
-
-const showRemainingDays = computed(() => {
-  return platformConfigStore.getSetting("session.session_list_view_remaining_days") === "true"
-})
+const platformConfigStore = usePlatformConfig()
+const showRemainingDays = computed(
+  () => platformConfigStore.getSetting("session.session_list_view_remaining_days") === "true",
+)
 
 const daysRemainingText = computed(() => {
   if (!showRemainingDays.value || !props.session?.displayEndDate) return null
@@ -113,14 +130,16 @@ const daysRemainingText = computed(() => {
   return t("Expired")
 })
 
+const showCourseDuration = computed(() => platformConfigStore.getSetting("course.show_course_duration") === "true")
+
 const teachers = computed(() => {
   if (props.session?.courseCoachesSubscriptions) {
     return props.session.courseCoachesSubscriptions
       .filter((srcru) => srcru.course["@id"] === props.course["@id"])
       .map((srcru) => srcru.user)
   }
 
-  if (props.course.users && props.course.users.edges) {
+  if (props.course.users?.edges) {
     return props.course.users.edges.map((edge) => ({
       id: edge.node.id,
       ...edge.node.user,
@@ -131,22 +150,34 @@ const teachers = computed(() => {
 })
 
 const sessionDisplayDate = computed(() => {
-  if (daysRemainingText.value) {
-    return daysRemainingText.value
-  }
+  if (daysRemainingText.value) return daysRemainingText.value
 
-  const dateString = []
+  const parts = []
+  if (props.session?.displayStartDate) parts.push(abbreviatedDatetime(props.session.displayStartDate))
+  if (props.session?.displayEndDate) parts.push(abbreviatedDatetime(props.session.displayEndDate))
 
-  if (props.session) {
-    if (!isEmpty(props.session.displayStartDate)) {
-      dateString.push(abbreviatedDatetime(props.session.displayStartDate))
-    }
+  return parts.join(" — ")
+})
 
-    if (!isEmpty(props.session.displayEndDate)) {
-      dateString.push(abbreviatedDatetime(props.session.displayEndDate))
-    }
-  }
+const internalLocked = ref(false)
+const showDependenciesModal = ref(false)
 
-  return dateString.join(" — ")
+const { hasRequirements, requirementList, graphImage, fetchStatus } = useCourseRequirementStatus(
+  props.course.id,
+  props.sessionId,
+  (locked) => {
+    internalLocked.value = locked
+  },
+)
+
+const isLocked = computed(() => props.disabled || internalLocked.value)
+
+onMounted(() => {
+  if (props.course?.id) {
+    fetchStatus()
+  }
 })
+function openRequirementsModal() {
+  showDependenciesModal.value = true
+}
 </script>