chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

UI: Refactor for Course home

Browse Source
pull/4351/head
Angel Fernando Quiroz Campos 3 years ago
parent 08cbbe7605
commit 8252bf6c8f
2 changed files with 240 additions and 280 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      assets/vue/router/index.js
  2. 354
      assets/vue/views/course/Home.vue

4
assets/vue/router/index.js
Unescape View File

@ -60,7 +60,9 @@ const router = createRouter({
}
},
{
path: '/course/:id/home', name: 'CourseHome', component: CourseHome
path: '/course/:id/home',
name: 'CourseHome',
component: CourseHome
},
{
path: '/courses',

354
assets/vue/views/course/Home.vue
Unescape View File

@ -1,130 +1,92 @@
<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>
<Button
icon="mdi mdi-cog"
class="p-button-text p-button-plain"
type="button"
aria-haspopup="true"
aria-controls="course-tmenu"
@click="toggleCourseTMenu"
/>
<div
v-show="dropdownOpen"
@click="dropdownOpen = false"
class="fixed inset-0 h-full w-full z-10"
></div>
<TieredMenu
id="course-tmenu"
ref="courseTMenu"
:model="courseItems"
:popup="true"
/>
</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"
v-if="isCurrentTeacher"
>
<q-item-section>
{{ $t(tool.tool.nameToShow) }}
</q-item-section>
</q-item>
</q-list>
</div>
</div>
</div>
</div>
</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="intro"
class="flex flex-col gap-4"
>
<div v-if="intro" class="p-10 text-center">
<span v-html="intro.introText" />
<div v-html="intro.introText" />
<div v-if="createInSession">
<button
v-if="introTool"
class="mt-2 btn btn--info"
<Button
v-if="createInSession && introTool"
class="p-button-outlined ml-auto"
icon="mdi mdi-plus"
:label="t('Course introduction')"
@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"
/>
<Button
v-else
class="p-button-outlined ml-auto"
icon="mdi mdi-pencil"
:label="t('Update')"
@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
<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-2 btn btn--info"
class="mt-4 p-button-outlined"
icon="mdi mdi-plus"
:label="t('Course introduction')"
@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>
/>
</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
@ -132,183 +94,188 @@
>
<CourseToolList
v-for="tool in tools.authoring"
:change-visibility="changeVisibility"
:course="course"
:tool="tool"
:go-to-course-tool="goToCourseTool"
:change-visibility="changeVisibility"
:go-to-setting-course-tool="goToSettingCourseTool"
:tool="tool"
/>
<CourseToolList
v-for="tool in tools.interaction"
:change-visibility="changeVisibility"
:course="course"
:tool="tool"
:go-to-course-tool="goToCourseTool"
:change-visibility="changeVisibility"
:go-to-setting-course-tool="goToSettingCourseTool"
:tool="tool"
/>
<CourseToolList
v-for="tool in tools.plugin"
:change-visibility="changeVisibility"
:course="course"
:tool="tool"
:go-to-course-tool="goToCourseTool"
:change-visibility="changeVisibility"
:go-to-setting-course-tool="goToSettingCourseTool"
:tool="tool"
/>
<ShortCutList
v-for="shortcut in shortcuts"
:shortcut="shortcut"
:go-to-short-cut="goToShortCut"
: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';
import { useI18n } from 'vue-i18n';
import EmptyState from '../../components/EmptyState';
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();
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;
let courseId = route.params.id;
let sessionId = route.query.sid ?? 0;
// Remove the course session state.
store.dispatch('session/cleanSession');
const isCurrentTeacher = computed(() => store.getters['security/isCurrentTeacher']);
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;
// 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) {
}).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 [];
});
async function getIntro() {
const toggleCourseTMenu = event => {
courseTMenu.value.toggle(event);
}
async function getIntro () {
// Searching for the CTool called 'course_homepage'.
let introTool = state.course.tools.find(element => element.name === 'course_homepage');
let currentIntroTool = course.value.tools.find(element => element.name === 'course_homepage');
if (!isEmpty(introTool)) {
state.introTool = introTool;
introTool.value = currentIntroTool;
// Search CToolIntro for this
const filter = {
courseTool: introTool.iid,
courseTool: currentIntroTool.iid,
cid: courseId,
};
store.dispatch('ctoolintro/findAll', filter).then(response => {
if (!isEmpty(response)) {
// first item
state.intro = response[0];
intro.value = response[0];
translateHtml();
}
});
if (!isEmpty(sessionId)) {
state.createInSession = true;
createInSession.value = true;
const filter = {
courseTool: introTool.iid,
courseTool: currentIntroTool.iid,
cid: courseId,
sid: sessionId,
};
store.dispatch('ctoolintro/findAll', filter).then(response => {
if (!isEmpty(response)) {
state.createInSession = false;
state.intro = response[0];
createInSession.value = false;
intro.value = response[0];
translateHtml();
}
});
}
}
}
}
function addIntro(course, introTool) {
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
}
});
}
}
function updateIntro(intro) {
function updateIntro (intro) {
return router.push({
name: 'ToolIntroUpdate',
params: {'id': intro['@id'] },
params: { 'id': intro['@id'] },
query: {
'cid': courseId,
'sid': sessionId,
'id': intro['@id']
}
});
}
}
function goToSettingCourseTool(course, tool) {
function goToSettingCourseTool (course, tool) {
return '/course/' + courseId + '/settings/' + tool.tool.name + '?sid=' + sessionId;
}
}
function goToCourseTool(course, tool) {
function goToCourseTool (course, tool) {
return '/course/' + courseId + '/tool/' + tool.tool.name + '?sid=' + sessionId;
}
}
function goToShortCut(shortcut) {
const url = new URLSearchParams('?')
function goToShortCut (shortcut) {
const url = new URLSearchParams('?');
url.append('cid', courseId);
url.append('sid', sessionId);
return shortcut.url + '?' + url;
}
}
function changeVisibility(course, tool) {
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;
@ -316,14 +283,5 @@ export default {
}).catch(function (error) {
console.log(error);
});
}
return toRefs(state);
},
computed: {
...mapGetters({
'isCurrentTeacher': 'security/isCurrentTeacher',
}),
},
};
}
</script>

Write Preview
Loading…
Cancel
Save