pull/5081/head
Yannick Warnier
2 years ago
parent
5e2cbbcdf6
commit
faeca06262
@ -0,0 +1,419 @@ |
||||
<template> |
||||
<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" |
||||
/> |
||||
</div> |
||||
|
||||
<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" |
||||
/> |
||||
</div> |
||||
|
||||
<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" |
||||
/> |
||||
</div> |
||||
</div> |
||||
<div |
||||
v-else |
||||
class="flex flex-col gap-4" |
||||
> |
||||
<div class="flex gap-4 items-center"> |
||||
<h2 |
||||
class="mr-auto" |
||||
> |
||||
{{ course.title }} |
||||
<small v-if="session"> |
||||
({{ session.title }}) |
||||
</small> |
||||
</h2> |
||||
|
||||
<Button |
||||
v-if="course && isCurrentTeacher" |
||||
:label="t('See as student')" |
||||
class="p-button-outlined p-button-plain" |
||||
icon="pi pi-eye" |
||||
type="button" |
||||
/> |
||||
|
||||
<Button |
||||
v-if="course && isCurrentTeacher" |
||||
aria-controls="course-tmenu" |
||||
aria-haspopup="true" |
||||
class="p-button-text p-button-plain" |
||||
icon="mdi mdi-cog" |
||||
type="button" |
||||
@click="toggleCourseTMenu" |
||||
/> |
||||
|
||||
<TieredMenu |
||||
id="course-tmenu" |
||||
ref="courseTMenu" |
||||
:model="courseItems" |
||||
:popup="true" |
||||
/> |
||||
</div> |
||||
|
||||
<div |
||||
v-if="isCurrentTeacher" |
||||
> |
||||
<div |
||||
v-if="intro" |
||||
class="flex flex-col gap-4" |
||||
> |
||||
<div v-html="intro.introText" /> |
||||
|
||||
<Button |
||||
v-if="createInSession && introTool" |
||||
:label="t('Course introduction')" |
||||
class="p-button-outlined ml-auto" |
||||
icon="mdi mdi-plus" |
||||
@click="addIntro(course, introTool)" |
||||
/> |
||||
<Button |
||||
v-else |
||||
:label="t('Update')" |
||||
class="p-button-outlined ml-auto" |
||||
icon="mdi mdi-pencil" |
||||
@click="updateIntro(intro)" |
||||
/> |
||||
</div> |
||||
<EmptyState |
||||
v-else-if="introTool" |
||||
:detail="t('Add a course introduction to display to your students.')" |
||||
:summary="t('You don\'t have any course content yet.')" |
||||
icon="mdi mdi-book-open-page-variant" |
||||
> |
||||
<Button |
||||
:label="t('Course introduction')" |
||||
class="mt-4 p-button-outlined" |
||||
icon="mdi mdi-plus" |
||||
@click="addIntro(course, introTool)" |
||||
/> |
||||
</EmptyState> |
||||
</div> |
||||
<div |
||||
v-else-if="intro" |
||||
v-html="intro.introText" |
||||
/> |
||||
|
||||
<div class="flex items-center gap-6"> |
||||
<h6 v-t="'Tools'" /> |
||||
<Button |
||||
v-if="isCurrentTeacher" |
||||
:disabled="isSorting || isCustomizing" |
||||
:label="t('Show all')" |
||||
class="p-button-text p-button-plain p-button-sm ml-auto" |
||||
icon="mdi mdi-eye" |
||||
@click="onClickShowAll" |
||||
/> |
||||
<Button |
||||
v-if="isCurrentTeacher" |
||||
:disabled="isSorting || isCustomizing" |
||||
:label="t('Hide all')" |
||||
class="p-button-text p-button-plain p-button-sm" |
||||
icon="mdi mdi-eye-off" |
||||
@click="onClickHideAll" |
||||
/> |
||||
<ToggleButton |
||||
v-if="isCurrentTeacher" |
||||
v-model="isSorting" |
||||
:disabled="isCustomizing" |
||||
:off-label="t('Sort')" |
||||
:on-label="t('Sort')" |
||||
class="p-button-text p-button-plain p-button-sm" |
||||
off-icon="mdi mdi-swap-vertical" |
||||
on-icon="mdi mdi-swap-vertical" |
||||
/> |
||||
<ToggleButton |
||||
v-if="isCurrentTeacher" |
||||
v-model="isCustomizing" |
||||
:disabled="isSorting" |
||||
:off-label="t('Customize')" |
||||
:on-label="t('Customize')" |
||||
class="p-button-text p-button-plain p-button-sm" |
||||
off-icon="mdi mdi-format-paint" |
||||
on-icon="mdi mdi-format-paint" |
||||
/> |
||||
</div> |
||||
<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 |
||||
v-for="(tool, index) in tools.authoring" |
||||
:key="index" |
||||
:change-visibility="changeVisibility" |
||||
:course="course" |
||||
:go-to-course-tool="goToCourseTool" |
||||
:go-to-setting-course-tool="goToSettingCourseTool" |
||||
:tool="tool" |
||||
/> |
||||
|
||||
<CourseToolList |
||||
v-for="(tool, index) in tools.interaction" |
||||
:key="index" |
||||
:change-visibility="changeVisibility" |
||||
:course="course" |
||||
:go-to-course-tool="goToCourseTool" |
||||
:go-to-setting-course-tool="goToSettingCourseTool" |
||||
:tool="tool" |
||||
/> |
||||
|
||||
<CourseToolList |
||||
v-for="(tool, index) in tools.plugin" |
||||
:key="index" |
||||
:change-visibility="changeVisibility" |
||||
:course="course" |
||||
:go-to-course-tool="goToCourseTool" |
||||
:go-to-setting-course-tool="goToSettingCourseTool" |
||||
:tool="tool" |
||||
/> |
||||
|
||||
<ShortCutList |
||||
v-for="(shortcut, index) in shortcuts" |
||||
:key="index" |
||||
:change-visibility="changeVisibility" |
||||
:go-to-short-cut="goToShortCut" |
||||
:shortcut="shortcut" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { computed, provide, ref } from "vue"; |
||||
import { useStore } from "vuex"; |
||||
import { useRoute, useRouter } from "vue-router"; |
||||
import { useI18n } from "vue-i18n"; |
||||
import axios from "axios"; |
||||
import { ENTRYPOINT } from "../../config/entrypoint"; |
||||
import Button from "primevue/button"; |
||||
import ToggleButton from "primevue/togglebutton"; |
||||
import TieredMenu from "primevue/tieredmenu"; |
||||
import CourseToolList from "../../components/course/CourseToolList.vue"; |
||||
import ShortCutList from "../../components/course/ShortCutList.vue"; |
||||
import translateHtml from "../../../js/translatehtml.js"; |
||||
import EmptyState from "../../components/EmptyState"; |
||||
import Skeleton from "primevue/skeleton"; |
||||
|
||||
const route = useRoute(); |
||||
const store = useStore(); |
||||
const router = useRouter(); |
||||
const { t } = useI18n(); |
||||
|
||||
const course = ref(null); |
||||
const session = ref(null); |
||||
const tools = ref({}); |
||||
const shortcuts = ref([]); |
||||
const intro = ref(null); |
||||
const introTool = ref(null); |
||||
const createInSession = ref(false); |
||||
|
||||
let courseId = route.params.id; |
||||
let sessionId = route.query.sid ?? 0; |
||||
|
||||
const isCourseLoading = ref(true); |
||||
|
||||
const isCurrentTeacher = computed(() => store.getters["security/isCurrentTeacher"]); |
||||
|
||||
const isSorting = ref(false); |
||||
const isCustomizing = ref(false); |
||||
|
||||
provide("isSorting", isSorting); |
||||
provide("isCustomizing", isCustomizing); |
||||
|
||||
// Remove the course session state. |
||||
store.dispatch("session/cleanSession"); |
||||
|
||||
const courseItems = ref([]); |
||||
|
||||
axios |
||||
.get(ENTRYPOINT + `../course/${courseId}/home.json?sid=${sessionId}`) |
||||
.then(({ data }) => { |
||||
course.value = data.course; |
||||
session.value = data.session; |
||||
tools.value = data.tools; |
||||
shortcuts.value = data.shortcuts; |
||||
|
||||
if (tools.value.admin) { |
||||
courseItems.value = tools.value.admin.map(tool => ({ |
||||
label: tool.tool.nameToShow, |
||||
url: goToCourseTool(course, tool) |
||||
})); |
||||
} |
||||
|
||||
getIntro(); |
||||
|
||||
isCourseLoading.value = false; |
||||
}) |
||||
.catch(error => console.log(error)); |
||||
|
||||
const courseTMenu = ref(null); |
||||
|
||||
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.title === "course_homepage"); |
||||
|
||||
if (!introTool.value) { |
||||
introTool.value = currentIntroTool; |
||||
|
||||
if (sessionId) { |
||||
createInSession.value = true; |
||||
} |
||||
|
||||
// Search CToolIntro for this |
||||
const filter = { |
||||
courseTool: currentIntroTool.iid, |
||||
cid: courseId, |
||||
sid: sessionId |
||||
}; |
||||
|
||||
try { |
||||
const response = await store.dispatch("ctoolintro/findAll", filter); |
||||
if (response) { |
||||
if (sessionId) { |
||||
createInSession.value = false; |
||||
} |
||||
// first item |
||||
intro.value = response[0]; |
||||
translateHtml(); |
||||
} |
||||
} catch (e) { |
||||
console.error(e); |
||||
} |
||||
} |
||||
} |
||||
|
||||
function addIntro(course, introTool) { |
||||
return router.push({ |
||||
name: "ToolIntroCreate", |
||||
params: { "courseTool": introTool.iid }, |
||||
query: { |
||||
"cid": courseId, |
||||
"sid": sessionId, |
||||
"parentResourceNodeId": course.resourceNode.id |
||||
} |
||||
}); |
||||
} |
||||
|
||||
function updateIntro(intro) { |
||||
return router.push({ |
||||
name: "ToolIntroUpdate", |
||||
params: { "id": intro["@id"] }, |
||||
query: { |
||||
"cid": courseId, |
||||
"sid": sessionId, |
||||
"id": intro["@id"] |
||||
} |
||||
}); |
||||
} |
||||
|
||||
function goToSettingCourseTool(course, tool) { |
||||
return "/course/" + courseId + "/settings/" + tool.tool.title + "?sid=" + sessionId; |
||||
} |
||||
|
||||
function goToCourseTool(course, tool) { |
||||
return "/course/" + courseId + "/tool/" + tool.tool.title + "?sid=" + sessionId; |
||||
} |
||||
|
||||
function goToShortCut(shortcut) { |
||||
const url = new URLSearchParams("?"); |
||||
|
||||
url.append("cid", courseId); |
||||
url.append("sid", sessionId); |
||||
|
||||
return shortcut.url + "?" + url; |
||||
} |
||||
|
||||
const setToolVisibility = (tool, visibility) => { |
||||
tool.ctool.resourceNode.resourceLinks[0].visibility = 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)); |
||||
} |
||||
|
||||
function onClickShowAll() { |
||||
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.interaction.forEach(tool => setToolVisibility(tool, 2)); |
||||
|
||||
tools.value.plugin.forEach(tool => setToolVisibility(tool, 2)); |
||||
}) |
||||
.catch(error => console.log(error)); |
||||
} |
||||
|
||||
function onClickHideAll() { |
||||
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.interaction.forEach(tool => setToolVisibility(tool, 0)); |
||||
|
||||
tools.value.plugin.forEach(tool => setToolVisibility(tool, 0)); |
||||
}) |
||||
.catch(error => console.log(error)); |
||||
} |
||||
</script> |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue