You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
3.2 KiB
128 lines
3.2 KiB
<template>
|
|
<Card class="course-card">
|
|
<template #header>
|
|
<img
|
|
v-if="disabled"
|
|
:src="course.illustrationUrl"
|
|
:alt="course.title"
|
|
/>
|
|
<BaseAppLink
|
|
v-else
|
|
:to="{ name: 'CourseHome', params: { id: course._id }, query: { sid: sessionId } }"
|
|
class="course-card__home-link"
|
|
>
|
|
<img
|
|
:src="course.illustrationUrl"
|
|
:alt="course.title"
|
|
/>
|
|
</BaseAppLink>
|
|
</template>
|
|
<template #title>
|
|
<div class="course-card__title">
|
|
<div v-if="disabled">
|
|
<div
|
|
v-if="session"
|
|
class="session__title"
|
|
v-text="session.title"
|
|
/>
|
|
{{ course.title }}
|
|
<span v-if="showCourseDuration && course.duration">
|
|
({{ (course.duration / 60 / 60).toFixed(2) }} hours)
|
|
</span>
|
|
</div>
|
|
<BaseAppLink
|
|
v-else
|
|
:to="{ name: 'CourseHome', params: { id: course._id }, query: { sid: sessionId } }"
|
|
class="course-card__home-link"
|
|
>
|
|
<div
|
|
v-if="session"
|
|
class="session__title"
|
|
v-text="session.title"
|
|
/>
|
|
{{ course.title }}
|
|
</BaseAppLink>
|
|
|
|
<div
|
|
v-if="sessionDisplayDate"
|
|
class="session__display-date"
|
|
v-text="sessionDisplayDate"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<template #footer>
|
|
<TeacherBar :teachers="teachers" />
|
|
</template>
|
|
</Card>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Card from "primevue/card"
|
|
import TeacherBar from "../TeacherBar"
|
|
import { computed } from "vue"
|
|
import { isEmpty } from "lodash"
|
|
import { useFormatDate } from "../../composables/formatDate"
|
|
import BaseAppLink from "../basecomponents/BaseAppLink.vue"
|
|
import { usePlatformConfig } from "../../store/platformConfig"
|
|
|
|
const { abbreviatedDatetime } = useFormatDate()
|
|
|
|
// eslint-disable-next-line no-undef
|
|
const props = defineProps({
|
|
course: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
session: {
|
|
type: Object,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
sessionId: {
|
|
type: Number,
|
|
required: false,
|
|
default: 0,
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
})
|
|
|
|
const platformConfigStore = usePlatformConfig()
|
|
const showCourseDuration = computed(() => 'true' === platformConfigStore.getSetting("course.show_course_duration"))
|
|
|
|
const teachers = computed(() => {
|
|
if (props.session?.courseCoachesSubscriptions) {
|
|
return props.session.courseCoachesSubscriptions
|
|
.filter((srcru) => srcru.course["@id"] === props.course["@id"])
|
|
.map((srcru) => srcru.user)
|
|
}
|
|
|
|
if (props.course.users && props.course.users.edges) {
|
|
return props.course.users.edges.map((edge) => ({
|
|
id: edge.node.id,
|
|
...edge.node.user,
|
|
}))
|
|
}
|
|
|
|
return []
|
|
})
|
|
|
|
const sessionDisplayDate = computed(() => {
|
|
const dateString = []
|
|
|
|
if (props.session) {
|
|
if (!isEmpty(props.session.displayStartDate)) {
|
|
dateString.push(abbreviatedDatetime(props.session.displayStartDate))
|
|
}
|
|
|
|
if (!isEmpty(props.session.displayEndDate)) {
|
|
dateString.push(abbreviatedDatetime(props.session.displayEndDate))
|
|
}
|
|
}
|
|
|
|
return dateString.join(" — ")
|
|
})
|
|
</script>
|
|
|