Exercise: Migrate legacy exercise tool to Vue

assets/vue/App.vue

@@ -225,6 +225,43 @@ const isEmbeddedContext = computed(() => {
   return isPickerContext.value || isIframeContext.value || isDialogContext.value
 })
 
+const isTruthyQueryValue = (value) => {
+  return ["1", "true", "yes", "on"].includes(String(value || "").toLowerCase())
+}
+
+const isLearnpathEmbeddedRoute = computed(() => {
+  const qp = queryParams.value
+  const origin = String(qp.get("origin") || "").toLowerCase()
+  const lpAction = String(qp.get("action") || "").toLowerCase()
+  const hasLpId = qp.has("lp_id")
+
+  // LP player/runtime screens are rendered inside the learning path player.
+  // They must use EmptyLayout to avoid duplicated Chamilo header/sidebar.
+  if (
+    hasLpId &&
+    ("view" === lpAction || isTruthyQueryValue(qp.get("embedded")) || isTruthyQueryValue(qp.get("isStudentView")))
+  ) {
+    return true
+  }
+
+  if ("learnpath" !== origin) {
+    return false
+  }
+
+  // Authoring screens launched from the LP add-item screen must keep the full
+  // course layout. This is used by Exercise, Forum and Survey creation flows.
+  if (isTruthyQueryValue(qp.get("returnToLp"))) {
+    return false
+  }
+
+  return (
+    qp.has("lp_init") ||
+    qp.has("learnpath_id") ||
+    qp.has("learnpath_item_id") ||
+    qp.has("learnpath_item_view_id")
+  )
+})
+
 const layout = computed(() => {
   if (showAccessUrlChosserLayout.value) {
     return AccessUrlChooserLayout
@@ -242,12 +279,7 @@ const layout = computed(() => {
     return EmptyLayout
   }
 
-  const lpAction = String(qp.get("action") || "").toLowerCase()
-  const isLearningPathPlayerContext =
-    qp.has("lp_id") &&
-    ("view" === lpAction || "1" === qp.get("embedded") || "true" === String(qp.get("isStudentView") || ""))
-
-  if (isLearningPathPlayerContext) {
+  if (isLearnpathEmbeddedRoute.value) {
     return EmptyLayout
   }
 

assets/vue/components/basecomponents/BaseCheckbox.vue

@@ -3,13 +3,14 @@
     <Checkbox
       v-model="modelValue"
       :binary="value === undefined"
+      :disabled="disabled"
       :inputId="id"
       :name="name"
       :value="value"
     />
     <label
       :for="id"
-      class="ml-2 cursor-pointer"
+      :class="['ml-2', disabled ? 'cursor-not-allowed text-gray-50' : 'cursor-pointer']"
       >{{ label }}</label
     >
   </div>
@@ -40,5 +41,9 @@ defineProps({
     type: [String, Number, Object],
     default: undefined,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 })
 </script>

assets/vue/components/basecomponents/ChamiloIcons.js

@@ -16,6 +16,7 @@ export const chamiloIconToClass = {
   "back": "mdi mdi-arrow-left-bold-box",
   "bug-check": "",
   "bug-outline": "",
+  "broom": "mdi mdi-broom",
   "catalogue-add": "mdi mdi-book-plus",
   "catalogue-remove": "mdi mdi-book-minus-outline",
   "calendar-plus": "mdi mdi-calendar-plus",
@@ -102,8 +103,10 @@ export const chamiloIconToClass = {
   "reply": "mdi mdi-reply",
   "reply-all": "mdi mdi-reply-all",
   "restart": "mdi mdi-restart",
-  "autolunch": "mdi mdi-rocket-launch",
-  "autolunch-off": "mdi mdi-rocket-launch-outline",
+  "rocket-launch": "mdi mdi-rocket-launch",
+  "rocket-launch-outline": "mdi mdi-rocket-launch-outline",
+  "autolaunch": "mdi mdi-rocket-launch",
+  "autolaunch-off": "mdi mdi-rocket-launch-outline",
   "select-all": "mdi mdi-select-group",
   "send": "mdi mdi-send",
   "sent": "mdi mdi-send-check",
@@ -150,6 +153,7 @@ export const chamiloIconToClass = {
   "account-cancel": "mdi mdi-account-cancel",
   "zip-pack": "mdi mdi-archive-arrow-down",
   "zip-unpack": "mdi mdi-archive-arrow-up",
+  "clean-all": "mdi mdi-broom",
   "clear-all": "mdi mdi-broom",
   "qrcode": "mdi mdi-qrcode",
   "minus": "mdi mdi-minus",

assets/vue/components/course/CourseTool.vue

@@ -3,8 +3,8 @@
     <BaseAppLink
       :aria-labelledby="`course-tool-${tool.iid}`"
       :class="cardCustomClass"
-      :to="tool.to"
-      :url="tool.url"
+      :to="resolvedToolTo"
+      :url="resolvedToolUrl"
       class="course-tool__link hover:primary-gradient"
     >
       <svg
@@ -29,8 +29,8 @@
     <BaseAppLink
       :id="`course-tool-${tool.iid}`"
       :class="titleCustomClass"
-      :to="tool.to"
-      :url="tool.url"
+      :to="resolvedToolTo"
+      :url="resolvedToolUrl"
       class="course-tool__title"
     >
       {{ $t(tool.tool.titleToShow) }}
@@ -80,7 +80,7 @@ import { useCidReqStore } from "../../store/cidReq"
 const platformConfigStore = usePlatformConfig()
 const cidReqStore = useCidReqStore()
 
-const { session } = storeToRefs(cidReqStore)
+const { course, session } = storeToRefs(cidReqStore)
 const { getSetting } = storeToRefs(platformConfigStore)
 
 const isSorting = inject("isSorting")
@@ -126,5 +126,64 @@ const titleCustomClass = computed(() => {
   }
   return ""
 })
-const isVisible = computed(() => props.tool.resourceNode.resourceLinks[0].visibility === 2)
+
+function getCourseResourceNodeId() {
+  return Number(cidReqStore.course?.resourceNode?.id) || Number(course.value?.resourceNode?.id) || 0
+}
+
+const isExerciseTool = computed(() => {
+  const values = [
+    props.tool?.title,
+    props.tool?.titleToShow,
+    props.tool?.name,
+    props.tool?.tool?.title,
+    props.tool?.tool?.titleToShow,
+    props.tool?.tool?.name,
+    props.tool?.url,
+  ]
+    .filter(Boolean)
+    .join(" ")
+    .toLowerCase()
+
+  return (
+    values.includes("quiz") ||
+    values.includes("exercise/exercise.php") ||
+    values.includes("/main/exercise/exercise.php") ||
+    values.includes("tests") ||
+    values.includes("exercises")
+  )
+})
+
+const exerciseToolRoute = computed(() => {
+  if (!isExerciseTool.value) {
+    return null
+  }
+
+  const nodeId = getCourseResourceNodeId()
+  const courseId = Number(course.value?.id) || Number(cidReqStore.course?.id) || 0
+
+  if (nodeId <= 0 || courseId <= 0) {
+    return null
+  }
+
+  return {
+    name: "ExerciseList",
+    params: { node: nodeId },
+    query: {
+      cid: courseId,
+      sid: Number(session.value?.id) || 0,
+      gid: 0,
+    },
+  }
+})
+
+const resolvedToolTo = computed(() => {
+  return exerciseToolRoute.value || props.tool.to || null
+})
+
+const resolvedToolUrl = computed(() => {
+  return exerciseToolRoute.value ? null : props.tool.url || null
+})
+
+const isVisible = computed(() => props.tool?.resourceNode?.resourceLinks?.[0]?.visibility === 2)
 </script>

assets/vue/router/exercise.js

@@ -0,0 +1,163 @@
+export default {
+  path: "/resources/exercise/:node/",
+  meta: {
+    requiresAuth: true,
+    showBreadcrumb: true,
+    tool: "exercise",
+    breadcrumb: "Exercises",
+  },
+  name: "exercise",
+  component: () => import("../components/layout/SimpleRouterViewLayout.vue"),
+  redirect: { name: "ExerciseList" },
+  children: [
+    {
+      name: "ExerciseList",
+      path: "",
+      meta: { breadcrumb: "Exercises" },
+      component: () => import("../views/exercise/ExerciseListView.vue"),
+    },
+    {
+      name: "ExerciseCreate",
+      path: "create",
+      meta: { breadcrumb: "Create exercise" },
+      component: () => import("../views/exercise/ExerciseConfigurationView.vue"),
+    },
+    {
+      name: "ExerciseCategories",
+      path: "categories",
+      meta: { breadcrumb: "Exercise categories" },
+      component: () => import("../views/exercise/ExerciseCategoryManagerView.vue"),
+      props: { categoryType: "exercise" },
+    },
+    {
+      name: "ExerciseQuestionCategories",
+      path: "question-categories",
+      meta: { breadcrumb: "Question categories" },
+      component: () => import("../views/exercise/ExerciseCategoryManagerView.vue"),
+      props: { categoryType: "question" },
+    },
+    {
+      name: "ExerciseImportAiken",
+      path: "import/aiken",
+      meta: { breadcrumb: "Import Aiken quiz" },
+      component: () => import("../views/exercise/ExerciseQuestionImportView.vue"),
+      props: { importType: "aiken" },
+    },
+    {
+      name: "ExerciseImportExcel",
+      path: "import/excel",
+      meta: { breadcrumb: "Import quiz from Excel" },
+      component: () => import("../views/exercise/ExerciseQuestionImportView.vue"),
+      props: { importType: "excel" },
+    },
+    {
+      name: "ExerciseImportQti2",
+      path: "import/qti2",
+      meta: { breadcrumb: "Import exercises QTI2" },
+      component: () => import("../views/exercise/ExerciseQuestionImportView.vue"),
+      props: { importType: "qti2" },
+    },
+    {
+      name: "ExerciseAiAikenGenerator",
+      path: "aiken-generator",
+      meta: { breadcrumb: "AI Aiken generator" },
+      component: () => import("../views/exercise/ExerciseAiAikenGeneratorView.vue"),
+    },
+    {
+      name: "ExerciseOverview",
+      path: ":exerciseId/overview",
+      meta: { breadcrumb: "Exercise overview" },
+      component: () => import("../views/exercise/ExerciseOverviewView.vue"),
+    },
+    {
+      name: "ExerciseEdit",
+      path: ":exerciseId/edit",
+      meta: { breadcrumb: "Edit exercise" },
+      component: () => import("../views/exercise/ExerciseConfigurationView.vue"),
+    },
+    {
+      name: "ExercisePlayer",
+      path: ":exerciseId/player",
+      meta: { breadcrumb: "Exercise player" },
+      component: () => import("../views/exercise/ExercisePlayerView.vue"),
+    },
+    {
+      name: "ExerciseResult",
+      path: ":exerciseId/result/:attemptId",
+      meta: { breadcrumb: "Exercise result" },
+      component: () => import("../views/exercise/ExerciseResultView.vue"),
+    },
+    {
+      name: "ExerciseReport",
+      path: ":exerciseId/report",
+      meta: { breadcrumb: "Learner score" },
+      component: () => import("../views/exercise/ExerciseReportView.vue"),
+    },
+    {
+      name: "ExerciseQuestionStats",
+      path: ":exerciseId/question-stats",
+      meta: { breadcrumb: "Question stats" },
+      component: () => import("../views/exercise/ExerciseQuestionStatsView.vue"),
+    },
+    {
+      name: "ExerciseReportByQuestion",
+      path: ":exerciseId/report-by-question",
+      meta: { breadcrumb: "Report by question" },
+      component: () => import("../views/exercise/ExerciseReportByQuestionView.vue"),
+    },
+    {
+      name: "ExerciseLiveResults",
+      path: ":exerciseId/live-results",
+      meta: { breadcrumb: "Live results" },
+      component: () => import("../views/exercise/ExerciseLiveResultsView.vue"),
+    },
+    {
+      name: "ExerciseGlobalQuestionSelector",
+      path: "questions/create",
+      meta: { breadcrumb: "Add a question" },
+      component: () => import("../views/exercise/ExerciseGlobalQuestionSelectorView.vue"),
+    },
+    {
+      name: "ExerciseGlobalQuestionCreate",
+      path: "questions/create/:questionType",
+      meta: { breadcrumb: "Create question" },
+      component: () => import("../views/exercise/ExerciseQuestionEditorView.vue"),
+    },
+    {
+      name: "ExerciseQuestionPool",
+      path: "questions/recycle",
+      meta: { breadcrumb: "Recycle existing questions" },
+      component: () => import("../views/exercise/ExerciseQuestionBankView.vue"),
+    },
+    {
+      name: "ExerciseGlobalQuestionEdit",
+      path: "questions/:questionId/edit",
+      meta: { breadcrumb: "Edit question" },
+      component: () => import("../views/exercise/ExerciseQuestionEditorView.vue"),
+    },
+    {
+      name: "ExerciseQuestions",
+      path: ":exerciseId/questions",
+      meta: { breadcrumb: "Questions" },
+      component: () => import("../views/exercise/ExerciseQuestionSelectorView.vue"),
+    },
+    {
+      name: "ExerciseQuestionBank",
+      path: ":exerciseId/question-bank",
+      meta: { breadcrumb: "Recycle existing questions" },
+      component: () => import("../views/exercise/ExerciseQuestionBankView.vue"),
+    },
+    {
+      name: "ExerciseQuestionCreate",
+      path: ":exerciseId/questions/create/:questionType",
+      meta: { breadcrumb: "Create question" },
+      component: () => import("../views/exercise/ExerciseQuestionEditorView.vue"),
+    },
+    {
+      name: "ExerciseQuestionEdit",
+      path: ":exerciseId/questions/:questionId/edit",
+      meta: { breadcrumb: "Edit question" },
+      component: () => import("../views/exercise/ExerciseQuestionEditorView.vue"),
+    },
+  ],
+}