Angel Fernando Quiroz Campos
3 years ago
parent
08cbbe7605
commit
8252bf6c8f
@ -1,329 +1,287 @@ |
||||
<template> |
||||
<div v-if="course" class="grid gap-4"> |
||||
<div class="flex flex-row justify-between border-b-2 border-gray-200 "> |
||||
<div class="line-clamp-1 text-h3 font-bold"> |
||||
<div |
||||
v-if="course" |
||||
class="flex flex-col gap-4" |
||||
> |
||||
<div class="flex gap-4 items-center"> |
||||
<h2 class="mr-auto"> |
||||
{{ course.title }} |
||||
<span v-if="session"> |
||||
<small v-if="session"> |
||||
({{ session.name }}) |
||||
</span> |
||||
</div> |
||||
</small> |
||||
</h2> |
||||
|
||||
<Button |
||||
v-if="isCurrentTeacher" |
||||
:label="t('See as student')" |
||||
icon="pi pi-eye" |
||||
class="p-button-outlined p-button-plain" |
||||
type="button" |
||||
/> |
||||
|
||||
<div> |
||||
<div class="flex flex-row" v-if="isCurrentTeacher && course"> |
||||
<a class="btn btn--info mr-2"> |
||||
<v-icon icon="mdi-eye" class="pr-2" /> |
||||
{{ $t('See as student') }} |
||||
</a> |
||||
|
||||
<div class="relative"> |
||||
<!-- shadow rounded-full--> |
||||
<button |
||||
@click="dropdownOpen = !dropdownOpen" |
||||
class="relative z-10 block h-8 w-8 overflow-hidden focus:outline-none" |
||||
> |
||||
<v-icon>mdi-cog</v-icon> |
||||
</button> |
||||
|
||||
<div |
||||
v-show="dropdownOpen" |
||||
@click="dropdownOpen = false" |
||||
class="fixed inset-0 h-full w-full z-10" |
||||
></div> |
||||
|
||||
<div |
||||
v-show="dropdownOpen" |
||||
class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-md shadow-xl z-20" |
||||
> |
||||
<q-list dense> |
||||
<!-- <q-item replace :to="'/main/messages/index.php'" clickable class="">--> |
||||
<!-- <q-item-section>Inbox</q-item-section>--> |
||||
<!-- </q-item>--> |
||||
<q-item |
||||
:href="goToCourseTool(course, tool)" |
||||
tag="a" |
||||
class="" |
||||
v-for="tool in tools.admin" |
||||
> |
||||
<q-item-section> |
||||
{{ $t(tool.tool.nameToShow) }} |
||||
</q-item-section> |
||||
</q-item> |
||||
</q-list> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<Button |
||||
icon="mdi mdi-cog" |
||||
class="p-button-text p-button-plain" |
||||
type="button" |
||||
aria-haspopup="true" |
||||
aria-controls="course-tmenu" |
||||
@click="toggleCourseTMenu" |
||||
/> |
||||
|
||||
<TieredMenu |
||||
id="course-tmenu" |
||||
ref="courseTMenu" |
||||
:model="courseItems" |
||||
:popup="true" |
||||
/> |
||||
</div> |
||||
|
||||
<div v-if="isCurrentTeacher" |
||||
class="bg-gradient-to-r from-gray-100 to-gray-50 flex flex-col rounded-md text-center p-2" |
||||
<div |
||||
v-if="isCurrentTeacher" |
||||
> |
||||
<div v-if="intro" class="p-10 text-center"> |
||||
<span v-html="intro.introText" /> |
||||
|
||||
<div v-if="createInSession"> |
||||
<button |
||||
v-if="introTool" |
||||
class="mt-2 btn btn--info" |
||||
@click="addIntro(course, introTool)" |
||||
> |
||||
<v-icon>mdi-plus</v-icon> |
||||
{{ $t('Course introduction') }} |
||||
</button> |
||||
</div> |
||||
<div v-else> |
||||
<button |
||||
class="mt-2 btn btn--info" |
||||
@click="updateIntro(intro)" |
||||
> |
||||
<v-icon>mdi-pencil</v-icon> |
||||
{{ $t('Update') }} |
||||
</button> |
||||
</div> |
||||
|
||||
</div> |
||||
<div v-else> |
||||
<div> |
||||
<v-icon |
||||
icon="mdi-book-open-page-variant" |
||||
size="72px" |
||||
class="font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-primary to-primary-gradient" |
||||
/> |
||||
</div> |
||||
|
||||
<div class="mt-2 font-bold"> |
||||
{{ $t("You don't have any course content yet.") }} |
||||
</div> |
||||
|
||||
<div v-if="introTool"> |
||||
{{ $t('Add a course introduction to display to your students.') }} |
||||
</div> |
||||
|
||||
<button |
||||
v-if="introTool" |
||||
class="mt-2 btn btn--info" |
||||
@click="addIntro(course, introTool)" |
||||
> |
||||
<v-icon>mdi-plus</v-icon> |
||||
{{ $t('Course introduction') }} |
||||
</button> |
||||
</div> |
||||
</div> |
||||
<div v-else> |
||||
<div v-if="intro" class="p-10 text-center"> |
||||
<span v-html="intro.introText" /> |
||||
<div |
||||
v-if="intro" |
||||
class="flex flex-col gap-4" |
||||
> |
||||
<div v-html="intro.introText" /> |
||||
|
||||
<Button |
||||
v-if="createInSession && introTool" |
||||
class="p-button-outlined ml-auto" |
||||
icon="mdi mdi-plus" |
||||
:label="t('Course introduction')" |
||||
@click="addIntro(course, introTool)" |
||||
/> |
||||
<Button |
||||
v-else |
||||
class="p-button-outlined ml-auto" |
||||
icon="mdi mdi-pencil" |
||||
:label="t('Update')" |
||||
@click="updateIntro(intro)" |
||||
/> |
||||
</div> |
||||
<EmptyState |
||||
v-else |
||||
:summary="t('You don\'t have any course content yet.')" |
||||
:detail="t('Add a course introduction to display to your students.')" |
||||
icon="mdi mdi-book-open-page-variant" |
||||
> |
||||
<Button |
||||
v-if="introTool" |
||||
class="mt-4 p-button-outlined" |
||||
icon="mdi mdi-plus" |
||||
:label="t('Course introduction')" |
||||
@click="addIntro(course, introTool)" |
||||
/> |
||||
</EmptyState> |
||||
</div> |
||||
<div |
||||
v-else-if="intro" |
||||
v-html="intro.introText" |
||||
/> |
||||
|
||||
<div v-if="isCurrentTeacher && course" class="flex justify-between border-b-2 border-gray-200"> |
||||
<div |
||||
v-if="isCurrentTeacher && course" |
||||
class="flex justify-between border-b-2 border-gray-200" |
||||
> |
||||
<div class="text-h6 font-bold"> |
||||
{{ $t('Tools') }} |
||||
</div> |
||||
<!-- <div>--> |
||||
<!-- <v-icon>--> |
||||
<!-- mdi-format-paint--> |
||||
<!-- </v-icon>--> |
||||
<!-- Customize--> |
||||
<!-- </div>--> |
||||
</div> |
||||
|
||||
<div |
||||
class="grid gap-y-12 sm:gap-x-5 md:gap-x-16 md:gap-y-12 justify-between grid-cols-course-tools" |
||||
> |
||||
<CourseToolList |
||||
v-for="tool in tools.authoring" |
||||
:course="course" |
||||
:tool="tool" |
||||
:go-to-course-tool="goToCourseTool" |
||||
:change-visibility="changeVisibility" |
||||
:go-to-setting-course-tool="goToSettingCourseTool" |
||||
v-for="tool in tools.authoring" |
||||
:change-visibility="changeVisibility" |
||||
:course="course" |
||||
:go-to-course-tool="goToCourseTool" |
||||
:go-to-setting-course-tool="goToSettingCourseTool" |
||||
:tool="tool" |
||||
/> |
||||
|
||||
<CourseToolList |
||||
v-for="tool in tools.interaction" |
||||
:course="course" |
||||
:tool="tool" |
||||
:go-to-course-tool="goToCourseTool" |
||||
:change-visibility="changeVisibility" |
||||
:go-to-setting-course-tool="goToSettingCourseTool" |
||||
v-for="tool in tools.interaction" |
||||
:change-visibility="changeVisibility" |
||||
:course="course" |
||||
:go-to-course-tool="goToCourseTool" |
||||
:go-to-setting-course-tool="goToSettingCourseTool" |
||||
:tool="tool" |
||||
/> |
||||
|
||||
<CourseToolList |
||||
v-for="tool in tools.plugin" |
||||
:course="course" |
||||
:tool="tool" |
||||
:go-to-course-tool="goToCourseTool" |
||||
:change-visibility="changeVisibility" |
||||
:go-to-setting-course-tool="goToSettingCourseTool" |
||||
v-for="tool in tools.plugin" |
||||
:change-visibility="changeVisibility" |
||||
:course="course" |
||||
:go-to-course-tool="goToCourseTool" |
||||
:go-to-setting-course-tool="goToSettingCourseTool" |
||||
:tool="tool" |
||||
/> |
||||
|
||||
<ShortCutList |
||||
v-for="shortcut in shortcuts" |
||||
:shortcut="shortcut" |
||||
:go-to-short-cut="goToShortCut" |
||||
:change-visibility="changeVisibility" |
||||
v-for="shortcut in shortcuts" |
||||
:change-visibility="changeVisibility" |
||||
:go-to-short-cut="goToShortCut" |
||||
:shortcut="shortcut" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Loading from '../../components/Loading.vue'; |
||||
import Toolbar from '../../components/Toolbar.vue'; |
||||
<script setup> |
||||
import { computed, ref } from 'vue'; |
||||
import { useStore } from 'vuex'; |
||||
import { useRoute, useRouter } from 'vue-router'; |
||||
import isEmpty from 'lodash/isEmpty'; |
||||
import axios from 'axios'; |
||||
import { ENTRYPOINT } from '../../config/entrypoint'; |
||||
import Button from 'primevue/button'; |
||||
import TieredMenu from 'primevue/tieredmenu'; |
||||
import CourseToolList from '../../components/course/CourseToolList.vue'; |
||||
import ShortCutList from '../../components/course/ShortCutList.vue'; |
||||
|
||||
import isEmpty from "lodash/isEmpty"; |
||||
import {useRoute, useRouter} from 'vue-router' |
||||
import axios from "axios"; |
||||
import {ENTRYPOINT} from '../../config/entrypoint'; |
||||
import {computed, onMounted, reactive, toRefs} from 'vue' |
||||
import {mapGetters, useStore} from "vuex"; |
||||
import translateHtml from '../../../js/translatehtml.js'; |
||||
|
||||
export default { |
||||
name: 'Home', |
||||
servicePrefix: 'Courses', |
||||
components: { |
||||
Loading, |
||||
Toolbar, |
||||
CourseToolList, |
||||
ShortCutList |
||||
}, |
||||
setup() { |
||||
const state = reactive({ |
||||
course: [], |
||||
session: [], |
||||
tools: [], |
||||
shortcuts: [], |
||||
dropdownOpen: false, |
||||
intro: null, |
||||
introTool: null, |
||||
createInSession: false, |
||||
goToCourseTool, |
||||
changeVisibility, |
||||
goToSettingCourseTool, |
||||
goToShortCut, |
||||
addIntro, |
||||
updateIntro |
||||
}); |
||||
const route = useRoute() |
||||
const store = useStore(); |
||||
const router = useRouter(); |
||||
|
||||
let courseId = route.params.id; |
||||
let sessionId = route.query.sid ?? 0; |
||||
|
||||
// Remove the course session state. |
||||
store.dispatch('session/cleanSession'); |
||||
|
||||
axios.get(ENTRYPOINT + '../course/' + courseId + '/home.json?sid=' + sessionId).then(response => { |
||||
state.course = response.data.course; |
||||
state.session = response.data.session; |
||||
state.tools = response.data.tools; |
||||
state.shortcuts = response.data.shortcuts; |
||||
getIntro(); |
||||
}).catch(function (error) { |
||||
console.log(error); |
||||
}); |
||||
|
||||
async function getIntro() { |
||||
// Searching for the CTool called 'course_homepage'. |
||||
let introTool = state.course.tools.find(element => element.name === 'course_homepage'); |
||||
|
||||
if (!isEmpty(introTool)) { |
||||
state.introTool = introTool; |
||||
|
||||
// Search CToolIntro for this |
||||
const filter = { |
||||
courseTool: introTool.iid, |
||||
cid: courseId, |
||||
}; |
||||
|
||||
store.dispatch('ctoolintro/findAll', filter).then(response => { |
||||
if (!isEmpty(response)) { |
||||
// first item |
||||
state.intro = response[0]; |
||||
translateHtml(); |
||||
} |
||||
}); |
||||
|
||||
if (!isEmpty(sessionId)) { |
||||
state.createInSession = true; |
||||
const filter = { |
||||
courseTool: introTool.iid, |
||||
cid: courseId, |
||||
sid: sessionId, |
||||
}; |
||||
|
||||
store.dispatch('ctoolintro/findAll', filter).then(response => { |
||||
if (!isEmpty(response)) { |
||||
state.createInSession = false; |
||||
state.intro = response[0]; |
||||
translateHtml(); |
||||
} |
||||
}); |
||||
} |
||||
import { useI18n } from 'vue-i18n'; |
||||
import EmptyState from '../../components/EmptyState'; |
||||
|
||||
const servicePrefix = 'Courses'; |
||||
|
||||
const course = ref([]); |
||||
const session = ref([]); |
||||
const tools = ref([]); |
||||
const shortcuts = ref([]); |
||||
const intro = ref(null); |
||||
const introTool = ref(null); |
||||
const createInSession = ref(false); |
||||
|
||||
const route = useRoute(); |
||||
const store = useStore(); |
||||
const router = useRouter(); |
||||
const { t } = useI18n(); |
||||
|
||||
let courseId = route.params.id; |
||||
let sessionId = route.query.sid ?? 0; |
||||
|
||||
const isCurrentTeacher = computed(() => store.getters['security/isCurrentTeacher']); |
||||
|
||||
// Remove the course session state. |
||||
store.dispatch('session/cleanSession'); |
||||
|
||||
axios.get(ENTRYPOINT + '../course/' + courseId + '/home.json?sid=' + sessionId).then(response => { |
||||
course.value = response.data.course; |
||||
session.value = response.data.session; |
||||
tools.value = response.data.tools; |
||||
shortcuts.value = response.data.shortcuts; |
||||
getIntro(); |
||||
}).catch(function (error) { |
||||
console.log(error); |
||||
}); |
||||
|
||||
const courseTMenu = ref(null); |
||||
|
||||
const courseItems = computed(() => { |
||||
if (tools.value.admin) { |
||||
return tools.value.admin.map(tool => ({ |
||||
label: tool.tool.nameToShow, |
||||
url: goToCourseTool(course, tool) |
||||
})); |
||||
} |
||||
|
||||
return []; |
||||
}); |
||||
|
||||
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'); |
||||
|
||||
if (!isEmpty(introTool)) { |
||||
introTool.value = currentIntroTool; |
||||
|
||||
// Search CToolIntro for this |
||||
const filter = { |
||||
courseTool: currentIntroTool.iid, |
||||
cid: courseId, |
||||
}; |
||||
|
||||
store.dispatch('ctoolintro/findAll', filter).then(response => { |
||||
if (!isEmpty(response)) { |
||||
// first item |
||||
intro.value = response[0]; |
||||
translateHtml(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
function addIntro(course, introTool) { |
||||
return router.push({ |
||||
name: 'ToolIntroCreate', |
||||
params: {'courseTool': introTool.iid }, |
||||
query: { |
||||
'cid': courseId, |
||||
'sid': sessionId, |
||||
'parentResourceNodeId': course.resourceNode.id |
||||
if (!isEmpty(sessionId)) { |
||||
createInSession.value = true; |
||||
const filter = { |
||||
courseTool: currentIntroTool.iid, |
||||
cid: courseId, |
||||
sid: sessionId, |
||||
}; |
||||
|
||||
store.dispatch('ctoolintro/findAll', filter).then(response => { |
||||
if (!isEmpty(response)) { |
||||
createInSession.value = false; |
||||
intro.value = response[0]; |
||||
translateHtml(); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
function updateIntro(intro) { |
||||
return router.push({ |
||||
name: 'ToolIntroUpdate', |
||||
params: {'id': intro['@id'] }, |
||||
query: { |
||||
'cid': courseId, |
||||
'sid': sessionId, |
||||
'id': intro['@id'] |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
|
||||
function addIntro (course, introTool) { |
||||
return router.push({ |
||||
name: 'ToolIntroCreate', |
||||
params: { 'courseTool': introTool.iid }, |
||||
query: { |
||||
'cid': courseId, |
||||
'sid': sessionId, |
||||
'parentResourceNodeId': course.resourceNode.id |
||||
} |
||||
|
||||
function goToSettingCourseTool(course, tool) { |
||||
return '/course/' + courseId + '/settings/' + tool.tool.name + '?sid=' + sessionId; |
||||
}); |
||||
} |
||||
|
||||
function updateIntro (intro) { |
||||
return router.push({ |
||||
name: 'ToolIntroUpdate', |
||||
params: { 'id': intro['@id'] }, |
||||
query: { |
||||
'cid': courseId, |
||||
'sid': sessionId, |
||||
'id': intro['@id'] |
||||
} |
||||
}); |
||||
} |
||||
|
||||
function goToCourseTool(course, tool) { |
||||
return '/course/' + courseId + '/tool/' + tool.tool.name + '?sid=' + sessionId; |
||||
} |
||||
function goToSettingCourseTool (course, tool) { |
||||
return '/course/' + courseId + '/settings/' + tool.tool.name + '?sid=' + sessionId; |
||||
} |
||||
|
||||
function goToShortCut(shortcut) { |
||||
const url = new URLSearchParams('?') |
||||
function goToCourseTool (course, tool) { |
||||
return '/course/' + courseId + '/tool/' + tool.tool.name + '?sid=' + sessionId; |
||||
} |
||||
|
||||
url.append('cid', courseId); |
||||
url.append('sid', sessionId); |
||||
function goToShortCut (shortcut) { |
||||
const url = new URLSearchParams('?'); |
||||
|
||||
return shortcut.url + '?' + url; |
||||
} |
||||
url.append('cid', courseId); |
||||
url.append('sid', sessionId); |
||||
|
||||
function changeVisibility(course, tool) { |
||||
axios.post(ENTRYPOINT + '../r/course_tool/links/' + tool.ctool.resourceNode.id + '/change_visibility').then(response => { |
||||
if (response.data.ok) { |
||||
tool.ctool.resourceNode.resourceLinks[0].visibility = response.data.visibility; |
||||
} |
||||
}).catch(function (error) { |
||||
console.log(error); |
||||
}); |
||||
} |
||||
return shortcut.url + '?' + url; |
||||
} |
||||
|
||||
return toRefs(state); |
||||
}, |
||||
computed: { |
||||
...mapGetters({ |
||||
'isCurrentTeacher': 'security/isCurrentTeacher', |
||||
}), |
||||
}, |
||||
}; |
||||
function changeVisibility (course, tool) { |
||||
axios.post(ENTRYPOINT + '../r/course_tool/links/' + tool.ctool.resourceNode.id + '/change_visibility').then(response => { |
||||
if (response.data.ok) { |
||||
tool.ctool.resourceNode.resourceLinks[0].visibility = response.data.visibility; |
||||
} |
||||
}).catch(function (error) { |
||||
console.log(error); |
||||
}); |
||||
} |
||||
</script> |
||||
|
||||
Loading…
Reference in new issue