|
|
|
|
@ -1,133 +1,66 @@ |
|
|
|
|
<template> |
|
|
|
|
<div |
|
|
|
|
v-if="isCourseLoading" |
|
|
|
|
class="flex flex-col gap-4" |
|
|
|
|
> |
|
|
|
|
<div v-if="isCourseLoading" class="flex flex-col gap-4"> |
|
|
|
|
<div class="flex gap-4 items-center"> |
|
|
|
|
<Skeleton |
|
|
|
|
class="mr-auto" |
|
|
|
|
height="2.5rem" |
|
|
|
|
width="12rem" |
|
|
|
|
/> |
|
|
|
|
<Skeleton |
|
|
|
|
v-if="isCurrentTeacher" |
|
|
|
|
height="2.5rem" |
|
|
|
|
width="8rem" |
|
|
|
|
/> |
|
|
|
|
<Skeleton |
|
|
|
|
v-if="isCurrentTeacher" |
|
|
|
|
height="2.5rem" |
|
|
|
|
width="3rem" |
|
|
|
|
/> |
|
|
|
|
<Skeleton class="mr-auto" height="2.5rem" width="12rem" /> |
|
|
|
|
<Skeleton v-if="isCurrentTeacher" height="2.5rem" width="8rem" /> |
|
|
|
|
<Skeleton v-if="isCurrentTeacher" height="2.5rem" width="3rem" /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<Skeleton |
|
|
|
|
height="16rem" |
|
|
|
|
/> |
|
|
|
|
<Skeleton height="16rem" /> |
|
|
|
|
|
|
|
|
|
<div class="flex items-center gap-6"> |
|
|
|
|
<Skeleton |
|
|
|
|
height="1.5rem" |
|
|
|
|
width="6rem" |
|
|
|
|
/> |
|
|
|
|
<Skeleton |
|
|
|
|
v-if="isCurrentTeacher" |
|
|
|
|
class="ml-auto" |
|
|
|
|
height="1.5rem" |
|
|
|
|
width="6rem" |
|
|
|
|
/> |
|
|
|
|
<Skeleton |
|
|
|
|
v-if="isCurrentTeacher" |
|
|
|
|
class="aspect-square" |
|
|
|
|
height="1.5rem" |
|
|
|
|
width="6rem" |
|
|
|
|
/> |
|
|
|
|
<Skeleton |
|
|
|
|
v-if="isCurrentTeacher" |
|
|
|
|
class="aspect-square" |
|
|
|
|
height="1.5rem" |
|
|
|
|
width="6rem" |
|
|
|
|
/> |
|
|
|
|
<Skeleton |
|
|
|
|
v-if="isCurrentTeacher" |
|
|
|
|
class="aspect-square" |
|
|
|
|
height="1.5rem" |
|
|
|
|
width="6rem" |
|
|
|
|
/> |
|
|
|
|
<Skeleton height="1.5rem" width="6rem" /> |
|
|
|
|
<Skeleton v-if="isCurrentTeacher" class="ml-auto" height="1.5rem" width="6rem" /> |
|
|
|
|
<Skeleton v-if="isCurrentTeacher" class="aspect-square" height="1.5rem" width="6rem" /> |
|
|
|
|
<Skeleton v-if="isCurrentTeacher" class="aspect-square" height="1.5rem" width="6rem" /> |
|
|
|
|
<Skeleton v-if="isCurrentTeacher" class="aspect-square" height="1.5rem" width="6rem" /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<hr class="mt-0 mb-4"> |
|
|
|
|
<hr class="mt-0 mb-4" /> |
|
|
|
|
|
|
|
|
|
<div class="grid gap-y-12 sm:gap-x-5 md:gap-x-16 md:gap-y-12 justify-between grid-cols-course-tools"> |
|
|
|
|
<Skeleton |
|
|
|
|
v-for="v in 30" |
|
|
|
|
:key="v" |
|
|
|
|
class="aspect-square" |
|
|
|
|
height="auto" |
|
|
|
|
width="7.5rem" |
|
|
|
|
/> |
|
|
|
|
<Skeleton v-for="v in 30" :key="v" class="aspect-square" height="auto" width="7.5rem" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
v-else |
|
|
|
|
class="flex flex-col gap-4" |
|
|
|
|
> |
|
|
|
|
<div v-else class="flex flex-col gap-4"> |
|
|
|
|
<div class="flex gap-4 items-center"> |
|
|
|
|
<h2 |
|
|
|
|
class="mr-auto" |
|
|
|
|
> |
|
|
|
|
<h2 class="mr-auto"> |
|
|
|
|
{{ course.title }} |
|
|
|
|
<small v-if="session"> |
|
|
|
|
({{ session.name }}) |
|
|
|
|
</small> |
|
|
|
|
<small v-if="session"> ({{ session.name }}) </small> |
|
|
|
|
</h2> |
|
|
|
|
|
|
|
|
|
<BaseButton |
|
|
|
|
v-if="course && isCurrentTeacher" |
|
|
|
|
type="black" |
|
|
|
|
:label="t('See as student')" |
|
|
|
|
icon="eye" |
|
|
|
|
/> |
|
|
|
|
<BaseButton v-if="course && isCurrentTeacher" :label="t('See as student')" icon="eye" type="black" /> |
|
|
|
|
|
|
|
|
|
<BaseButton |
|
|
|
|
v-if="showUpdateIntroductionButton" |
|
|
|
|
type="black" |
|
|
|
|
:label="t('Edit introduction')" |
|
|
|
|
icon="pencil" |
|
|
|
|
type="black" |
|
|
|
|
@click="updateIntro(intro)" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<BaseButton |
|
|
|
|
v-if="course && isCurrentTeacher" |
|
|
|
|
type="black" |
|
|
|
|
popup-identifier="course-tmenu" |
|
|
|
|
icon="cog" |
|
|
|
|
only-icon |
|
|
|
|
popup-identifier="course-tmenu" |
|
|
|
|
type="black" |
|
|
|
|
@click="toggleCourseTMenu" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<BaseMenu |
|
|
|
|
id="course-tmenu" |
|
|
|
|
ref="courseTMenu" |
|
|
|
|
:model="courseItems" |
|
|
|
|
/> |
|
|
|
|
<BaseMenu id="course-tmenu" ref="courseTMenu" :model="courseItems" /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|
v-if="isCurrentTeacher" |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
v-if="intro" |
|
|
|
|
class="flex flex-col gap-4" |
|
|
|
|
> |
|
|
|
|
<div v-if="isCurrentTeacher"> |
|
|
|
|
<div v-if="intro" class="flex flex-col gap-4"> |
|
|
|
|
<div v-html="intro.introText" /> |
|
|
|
|
|
|
|
|
|
<BaseButton |
|
|
|
|
v-if="createInSession && introTool" |
|
|
|
|
:label="t('Course introduction')" |
|
|
|
|
class="ml-auto" |
|
|
|
|
type="primary" |
|
|
|
|
icon="plus" |
|
|
|
|
type="primary" |
|
|
|
|
@click="addIntro(course, introTool)" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
@ -140,16 +73,13 @@ |
|
|
|
|
<BaseButton |
|
|
|
|
:label="t('Course introduction')" |
|
|
|
|
class="mt-4" |
|
|
|
|
type="primary" |
|
|
|
|
icon="plus" |
|
|
|
|
type="primary" |
|
|
|
|
@click="addIntro(course, introTool)" |
|
|
|
|
/> |
|
|
|
|
</EmptyState> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
v-else-if="intro" |
|
|
|
|
v-html="intro.introText" |
|
|
|
|
/> |
|
|
|
|
<div v-else-if="intro" v-html="intro.introText" /> |
|
|
|
|
|
|
|
|
|
<div class="flex items-center gap-6"> |
|
|
|
|
<h6 v-t="'Tools'" /> |
|
|
|
|
@ -190,7 +120,7 @@ |
|
|
|
|
on-icon="mdi mdi-format-paint" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<hr class="mt-0 mb-4"> |
|
|
|
|
<hr class="mt-0 mb-4" /> |
|
|
|
|
|
|
|
|
|
<div class="grid gap-y-12 sm:gap-x-5 md:gap-x-16 md:gap-y-12 grid-cols-course-tools"> |
|
|
|
|
<CourseToolList |
|
|
|
|
@ -270,8 +200,8 @@ let sessionId = route.query.sid ?? 0; |
|
|
|
|
const isCourseLoading = ref(true); |
|
|
|
|
|
|
|
|
|
const showUpdateIntroductionButton = computed(() => { |
|
|
|
|
return course.value && isCurrentTeacher.value && intro.value && !(createInSession.value && introTool.value) |
|
|
|
|
}) |
|
|
|
|
return course.value && isCurrentTeacher.value && intro.value && !(createInSession.value && introTool.value); |
|
|
|
|
}); |
|
|
|
|
const isCurrentTeacher = computed(() => store.getters["security/isCurrentTeacher"]); |
|
|
|
|
|
|
|
|
|
const isSorting = ref(false); |
|
|
|
|
@ -294,9 +224,9 @@ axios |
|
|
|
|
shortcuts.value = data.shortcuts; |
|
|
|
|
|
|
|
|
|
if (tools.value.admin) { |
|
|
|
|
courseItems.value = tools.value.admin.map(tool => ({ |
|
|
|
|
courseItems.value = tools.value.admin.map((tool) => ({ |
|
|
|
|
label: tool.tool.nameToShow, |
|
|
|
|
url: goToCourseTool(course, tool) |
|
|
|
|
url: goToCourseTool(course, tool), |
|
|
|
|
})); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -304,17 +234,17 @@ axios |
|
|
|
|
|
|
|
|
|
isCourseLoading.value = false; |
|
|
|
|
}) |
|
|
|
|
.catch(error => console.log(error)); |
|
|
|
|
.catch((error) => console.log(error)); |
|
|
|
|
|
|
|
|
|
const courseTMenu = ref(null); |
|
|
|
|
|
|
|
|
|
const toggleCourseTMenu = event => { |
|
|
|
|
const toggleCourseTMenu = (event) => { |
|
|
|
|
courseTMenu.value.toggle(event); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
async function getIntro() { |
|
|
|
|
// Searching for the CTool called 'course_homepage'. |
|
|
|
|
let currentIntroTool = course.value.tools.find(element => element.name === "course_homepage"); |
|
|
|
|
let currentIntroTool = course.value.tools.find((element) => element.name === "course_homepage"); |
|
|
|
|
|
|
|
|
|
if (!introTool.value) { |
|
|
|
|
introTool.value = currentIntroTool; |
|
|
|
|
@ -327,7 +257,7 @@ async function getIntro() { |
|
|
|
|
const filter = { |
|
|
|
|
courseTool: currentIntroTool.iid, |
|
|
|
|
cid: courseId, |
|
|
|
|
sid: sessionId |
|
|
|
|
sid: sessionId, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
try { |
|
|
|
|
@ -349,24 +279,24 @@ async function getIntro() { |
|
|
|
|
function addIntro(course, introTool) { |
|
|
|
|
return router.push({ |
|
|
|
|
name: "ToolIntroCreate", |
|
|
|
|
params: { "courseTool": introTool.iid }, |
|
|
|
|
params: { courseTool: introTool.iid }, |
|
|
|
|
query: { |
|
|
|
|
"cid": courseId, |
|
|
|
|
"sid": sessionId, |
|
|
|
|
"parentResourceNodeId": course.resourceNode.id |
|
|
|
|
} |
|
|
|
|
cid: courseId, |
|
|
|
|
sid: sessionId, |
|
|
|
|
parentResourceNodeId: course.resourceNode.id, |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function updateIntro(intro) { |
|
|
|
|
return router.push({ |
|
|
|
|
name: "ToolIntroUpdate", |
|
|
|
|
params: { "id": intro["@id"] }, |
|
|
|
|
params: { id: intro["@id"] }, |
|
|
|
|
query: { |
|
|
|
|
"cid": courseId, |
|
|
|
|
"sid": sessionId, |
|
|
|
|
"id": intro["@id"] |
|
|
|
|
} |
|
|
|
|
cid: courseId, |
|
|
|
|
sid: sessionId, |
|
|
|
|
id: intro["@id"], |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -392,32 +322,35 @@ const setToolVisibility = (tool, visibility) => { |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
function changeVisibility(course, tool) { |
|
|
|
|
axios.post(ENTRYPOINT + "../r/course_tool/links/" + tool.ctool.resourceNode.id + "/change_visibility") |
|
|
|
|
.then(response => setToolVisibility(tool, response.data.visibility)) |
|
|
|
|
.catch(error => console.log(error)); |
|
|
|
|
axios |
|
|
|
|
.post(ENTRYPOINT + "../r/course_tool/links/" + tool.ctool.resourceNode.id + "/change_visibility") |
|
|
|
|
.then((response) => setToolVisibility(tool, response.data.visibility)) |
|
|
|
|
.catch((error) => console.log(error)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function onClickShowAll() { |
|
|
|
|
axios.post(ENTRYPOINT + `../r/course_tool/links/change_visibility/show?cid=${courseId}&sid=${sessionId}`) |
|
|
|
|
axios |
|
|
|
|
.post(ENTRYPOINT + `../r/course_tool/links/change_visibility/show?cid=${courseId}&sid=${sessionId}`) |
|
|
|
|
.then(() => { |
|
|
|
|
tools.value.authoring.forEach(tool => setToolVisibility(tool, 2)); |
|
|
|
|
tools.value.authoring.forEach((tool) => setToolVisibility(tool, 2)); |
|
|
|
|
|
|
|
|
|
tools.value.interaction.forEach(tool => setToolVisibility(tool, 2)); |
|
|
|
|
tools.value.interaction.forEach((tool) => setToolVisibility(tool, 2)); |
|
|
|
|
|
|
|
|
|
tools.value.plugin.forEach(tool => setToolVisibility(tool, 2)); |
|
|
|
|
tools.value.plugin.forEach((tool) => setToolVisibility(tool, 2)); |
|
|
|
|
}) |
|
|
|
|
.catch(error => console.log(error)); |
|
|
|
|
.catch((error) => console.log(error)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function onClickHideAll() { |
|
|
|
|
axios.post(ENTRYPOINT + `../r/course_tool/links/change_visibility/hide?cid=${courseId}&sid=${sessionId}`) |
|
|
|
|
axios |
|
|
|
|
.post(ENTRYPOINT + `../r/course_tool/links/change_visibility/hide?cid=${courseId}&sid=${sessionId}`) |
|
|
|
|
.then(() => { |
|
|
|
|
tools.value.authoring.forEach(tool => setToolVisibility(tool, 0)); |
|
|
|
|
tools.value.authoring.forEach((tool) => setToolVisibility(tool, 0)); |
|
|
|
|
|
|
|
|
|
tools.value.interaction.forEach(tool => setToolVisibility(tool, 0)); |
|
|
|
|
tools.value.interaction.forEach((tool) => setToolVisibility(tool, 0)); |
|
|
|
|
|
|
|
|
|
tools.value.plugin.forEach(tool => setToolVisibility(tool, 0)); |
|
|
|
|
tools.value.plugin.forEach((tool) => setToolVisibility(tool, 0)); |
|
|
|
|
}) |
|
|
|
|
.catch(error => console.log(error)); |
|
|
|
|
.catch((error) => console.log(error)); |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|