Admin: Add sequence dependency check for sessions and courses with UI integration - refs BT#22586

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

@@ -132,7 +132,7 @@
         </router-link>
 
         <Button
-          v-else-if="hasDependencies && props.currentUserId"
+          v-else-if="isLocked && hasRequirements"
           :label="$t('Check requirements')"
           icon="mdi mdi-shield-check"
           class="w-full p-button-warning"
@@ -177,6 +177,8 @@
     v-model="showDependenciesModal"
     :course-id="course.id"
     :session-id="course.sessionId || 0"
+    :requirements="requirementList"
+    :graph-image="graphImage"
   />
   <Dialog
     v-model:visible="showDescriptionDialog"
@@ -192,23 +194,14 @@
 <script setup>
 import Rating from "primevue/rating"
 import Button from "primevue/button"
-import { computed, onMounted, 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 courseService from "../../services/courseService"
-
-const platformConfigStore = usePlatformConfig()
-const showDescriptionDialog = ref(false)
-const showDependenciesModal = ref(false)
-const hasDependencies = ref(false)
-
-const allowDescription = computed(
-  () => platformConfigStore.getSetting("course.show_courses_descriptions_in_catalog") !== "false",
-)
+import courseRelUserService from "../../services/courseRelUserService"
+import { useCourseRequirementStatus } from "../../composables/course/useCourseRequirementStatus"
 
 const props = defineProps({
   course: Object,
@@ -228,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
@@ -303,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(() => {
@@ -320,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
 })
 
@@ -334,32 +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)
 })
 
-onMounted(async () => {
-  try {
-    const { sequenceList: list } = await courseService.getNextCourse(
-      props.course.id,
-      props.course.sessionId || 0
-    )
-    hasDependencies.value = list.length > 0
-  } catch (e) {
-    console.warn(`[CatalogueCourseCard] Failed to load dependencies for course ${props.course.id}`, e)
-  }
+const { isLocked, hasRequirements, requirementList, graphImage, fetchStatus } = useCourseRequirementStatus(
+  props.course.id,
+  props.course.sessionId || 0,
+)
+
+onMounted(() => {
+  fetchStatus()
 })
 </script>

assets/vue/components/course/CatalogueRequirementModal.vue

@@ -3,7 +3,7 @@
     v-model:visible="visible"
     modal
     :header="t('Required courses')"
-    class="w-[30rem]"
+    class="w-[30rem] z-[99999] !block !opacity-100"
   >
     <div v-if="sequenceList.length">
       <div
@@ -14,12 +14,12 @@
         <h4 class="font-semibold text-gray-700 mb-2">{{ item.name }}</h4>
         <ul>
           <li
-            v-for="(dep, id) in item.dependents"
+            v-for="(req, id) in item.requirements"
             :key="id"
             class="flex items-center gap-2"
           >
-            <i :class="dep.status ? 'mdi mdi-check-circle text-green-500' : 'mdi mdi-alert-circle text-red-500'" />
-            <span>{{ dep.name }}</span>
+            <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>
@@ -30,40 +30,40 @@
     >
       {{ 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 { ref, watch, computed } from "vue"
+import Dialog from "primevue/dialog"
+import { computed } from "vue"
 import { useI18n } from "vue-i18n"
-import courseService from "../../services/courseService"
 
 const { t } = useI18n()
+
 const props = defineProps({
-  visible: Boolean,
   modelValue: Boolean,
   courseId: Number,
   sessionId: Number,
+  requirements: Array,
+  graphImage: String,
 })
-const emit = defineEmits(["update:modelValue"])
-const sequenceList = ref([])
 
-watch(
-  () => props.modelValue,
-  async (newVal) => {
-    if (newVal && props.courseId) {
-      try {
-        const { sequenceList: list } = await courseService.getNextCourse(props.courseId, props.sessionId || 0)
-        sequenceList.value = list || []
-      } catch (e) {
-        console.warn("Failed to load sequence info", e)
-      }
-    }
-  },
-)
+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>

assets/vue/components/course/NextCourseSequence.vue

@@ -87,7 +87,7 @@ const sequenceList = ref([])
 
 onMounted(async () => {
   try {
-    const { sequenceList: list, graph } = await courseService.getNextCourse(course.value.id, session.value?.id || 0)
+    const { sequenceList: list, graph } = await courseService.getNextCourse(course.value.id, session.value?.id || 0, true)
     sequenceList.value = list || []
     graphUrl.value = graph || null
   } catch (e) {