feat: batch details
This commit is contained in:
Jannat Patel
@@ -32,7 +32,7 @@ repos:
|
||||
rev: v2.7.1
|
||||
hooks:
|
||||
- id: prettier
|
||||
types_or: [javascript]
|
||||
types_or: [javascript, vue]
|
||||
# Ignore any files that might contain jinja / bundles
|
||||
exclude: |
|
||||
(?x)^(
|
||||
|
||||
@@ -1,23 +1,37 @@
|
||||
<template>
|
||||
<div class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out bg-gray-50"
|
||||
:class="isSidebarCollapsed ? 'w-12' : 'w-56'">
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
<UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
|
||||
<div class="flex flex-col overflow-y-auto">
|
||||
<SidebarLink v-for="link in links" :icon="link.icon" :label="link.label" :to="link.to"
|
||||
:isCollapsed="isSidebarCollapsed" class="mx-2 my-0.5" />
|
||||
</div>
|
||||
</div>
|
||||
<SidebarLink :label="isSidebarCollapsed ? 'Expand' : 'Collapse'" :isCollapsed="isSidebarCollapsed"
|
||||
@click="isSidebarCollapsed = !isSidebarCollapsed" class="m-2">
|
||||
<template #icon>
|
||||
<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
|
||||
<CollapseSidebar class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
|
||||
:class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }" />
|
||||
</span>
|
||||
</template>
|
||||
</SidebarLink>
|
||||
</div>
|
||||
<div
|
||||
class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out bg-gray-50"
|
||||
:class="isSidebarCollapsed ? 'w-12' : 'w-56'"
|
||||
>
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
<UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
|
||||
<div class="flex flex-col overflow-y-auto">
|
||||
<SidebarLink
|
||||
v-for="link in links"
|
||||
:icon="link.icon"
|
||||
:label="link.label"
|
||||
:to="link.to"
|
||||
:isCollapsed="isSidebarCollapsed"
|
||||
class="mx-2 my-0.5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SidebarLink
|
||||
:label="isSidebarCollapsed ? 'Expand' : 'Collapse'"
|
||||
:isCollapsed="isSidebarCollapsed"
|
||||
@click="isSidebarCollapsed = !isSidebarCollapsed"
|
||||
class="m-2"
|
||||
>
|
||||
<template #icon>
|
||||
<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
|
||||
<CollapseSidebar
|
||||
class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
|
||||
:class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</SidebarLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -26,30 +40,33 @@ import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
|
||||
import SidebarLink from '@/components/SidebarLink.vue'
|
||||
import { useStorage } from '@vueuse/core'
|
||||
import { BookOpen, Users, TrendingUp, Briefcase } from 'lucide-vue-next'
|
||||
import { ref } from 'vue'
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const links = [
|
||||
{
|
||||
label: 'Courses',
|
||||
icon: BookOpen,
|
||||
to: 'Courses',
|
||||
},
|
||||
{
|
||||
label: "Batches",
|
||||
icon: Users,
|
||||
to: 'Batches',
|
||||
},
|
||||
{
|
||||
label: "Statistics",
|
||||
icon: TrendingUp,
|
||||
to: 'Statistics',
|
||||
},
|
||||
{
|
||||
label: "Jobs",
|
||||
icon: Briefcase,
|
||||
to: 'Jobs',
|
||||
},
|
||||
{
|
||||
label: 'Courses',
|
||||
icon: BookOpen,
|
||||
to: 'Courses',
|
||||
},
|
||||
{
|
||||
label: 'Batches',
|
||||
icon: Users,
|
||||
to: 'Batches',
|
||||
},
|
||||
{
|
||||
label: 'Statistics',
|
||||
icon: TrendingUp,
|
||||
to: 'Statistics',
|
||||
},
|
||||
{
|
||||
label: 'Jobs',
|
||||
icon: Briefcase,
|
||||
to: 'Jobs',
|
||||
},
|
||||
]
|
||||
const getSidebarFromStorage = () => {
|
||||
return useStorage('sidebar_is_collapsed', false)
|
||||
}
|
||||
|
||||
let isSidebarCollapsed = ref(useStorage("sidebar_is_collapsed", false))
|
||||
let isSidebarCollapsed = ref(getSidebarFromStorage())
|
||||
</script>
|
||||
|
||||
@@ -1,71 +1,65 @@
|
||||
<template>
|
||||
<div class="flex flex-col border border-gray-200 rounded-md p-4 h-full" style="min-height: 150px;">
|
||||
<Badge v-if="batch.seat_count && batch.seats_left > 0" theme="green" class="self-start mb-2">
|
||||
{{ batch.seats_left }} {{ __("Seat Left") }}
|
||||
</Badge>
|
||||
<Badge v-else-if="batch.seat_count && batch.seats_left <= 0" theme="red" class="self-start mb-2">
|
||||
{{ __("Sold Out") }}
|
||||
</Badge>
|
||||
<div class="text-xl font-semibold mb-1">
|
||||
{{ batch.title }}
|
||||
</div>
|
||||
<div class="short-introduction">
|
||||
{{ batch.description }}
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<div v-if="batch.amount" class="font-semibold text-lg mb-4">
|
||||
{{ batch.price }}
|
||||
</div>
|
||||
<div class="flex items-center mb-3">
|
||||
<BookOpen class="h-4 w-4 stroke-1.5 mr-2 text-gray-700"/>
|
||||
<span>
|
||||
{{ batch.courses }} {{ __("Courses") }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center mb-3">
|
||||
<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
|
||||
<span>
|
||||
{{ dayjs(batch.start_date).format("DD MMM YYYY") }} - {{ dayjs(batch.end_date).format("DD MMM YYYY") }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
|
||||
<span>
|
||||
{{ formatTime(batch.start_time) }} - {{ formatTime(batch.end_time) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col border border-gray-200 rounded-md p-4 h-full"
|
||||
style="min-height: 150px"
|
||||
>
|
||||
<Badge
|
||||
v-if="batch.seat_count && batch.seats_left > 0"
|
||||
theme="green"
|
||||
class="self-start mb-2"
|
||||
>
|
||||
{{ batch.seats_left }} {{ __('Seat Left') }}
|
||||
</Badge>
|
||||
<Badge
|
||||
v-else-if="batch.seat_count && batch.seats_left <= 0"
|
||||
theme="red"
|
||||
class="self-start mb-2"
|
||||
>
|
||||
{{ __('Sold Out') }}
|
||||
</Badge>
|
||||
<div class="text-xl font-semibold mb-1">
|
||||
{{ batch.title }}
|
||||
</div>
|
||||
<div class="short-introduction">
|
||||
{{ batch.description }}
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<div v-if="batch.amount" class="font-semibold text-lg mb-4">
|
||||
{{ batch.price }}
|
||||
</div>
|
||||
<div class="flex items-center mb-3">
|
||||
<BookOpen class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
|
||||
<span> {{ batch.courses }} {{ __('Courses') }} </span>
|
||||
</div>
|
||||
<div class="flex items-center mb-3">
|
||||
<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
|
||||
<span>
|
||||
{{ dayjs(batch.start_date).format('DD MMM YYYY') }} -
|
||||
{{ dayjs(batch.end_date).format('DD MMM YYYY') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
|
||||
<span>
|
||||
{{ formatTime(batch.start_time) }} - {{ formatTime(batch.end_time) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Calendar, Clock, BookOpen } from "lucide-vue-next"
|
||||
import { inject } from "vue"
|
||||
import { Badge } from "frappe-ui"
|
||||
import { Calendar, Clock, BookOpen } from 'lucide-vue-next'
|
||||
import { inject } from 'vue'
|
||||
import { Badge } from 'frappe-ui'
|
||||
import { formatTime } from '../utils'
|
||||
|
||||
const dayjs = inject("$dayjs")
|
||||
const dayjs = inject('$dayjs')
|
||||
const props = defineProps({
|
||||
batch: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
function formatTime(timeString) {
|
||||
if (!timeString) return "";
|
||||
const [hour, minute] = timeString.split(":").map(Number);
|
||||
|
||||
// Create a Date object with dummy values for day, month, and year
|
||||
const dummyDate = new Date(0, 0, 0, hour, minute);
|
||||
|
||||
// Use Intl.DateTimeFormat to format the time in 12-hour format
|
||||
const formattedTime = new Intl.DateTimeFormat("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
}).format(dummyDate);
|
||||
|
||||
return formattedTime;
|
||||
}
|
||||
batch: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
.short-introduction {
|
||||
@@ -76,6 +70,6 @@ function formatTime(timeString) {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0.25rem 0 1.25rem;
|
||||
line-height: 1.5;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
81
frontend/src/components/BatchOverlay.vue
Normal file
81
frontend/src/components/BatchOverlay.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="shadow rounded-md p-5" style="width: 300px">
|
||||
<Badge
|
||||
v-if="batch.doc.seat_count && seats_left > 0"
|
||||
theme="green"
|
||||
class="self-start mb-2 float-right"
|
||||
>
|
||||
{{ seats_left }} {{ __('Seat Left') }}
|
||||
</Badge>
|
||||
<Badge
|
||||
v-else-if="batch.doc.seat_count && seats_left <= 0"
|
||||
theme="red"
|
||||
class="self-start mb-2 float-right"
|
||||
>
|
||||
{{ __('Sold Out') }}
|
||||
</Badge>
|
||||
<div v-if="batch.doc.amount" class="text-lg font-semibold mb-3">
|
||||
{{ formatNumberIntoCurrency(batch.doc.amount, batch.doc.currency) }}
|
||||
</div>
|
||||
<div class="flex items-center mb-3">
|
||||
<BookOpen class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
|
||||
<span> {{ batch.doc.courses.length }} {{ __('Courses') }} </span>
|
||||
</div>
|
||||
<div class="flex items-center mb-3">
|
||||
<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
|
||||
<span>
|
||||
{{ dayjs(batch.doc.start_date).format('DD MMM YYYY') }} -
|
||||
{{ dayjs(batch.doc.end_date).format('DD MMM YYYY') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
|
||||
<span>
|
||||
{{ formatTime(batch.doc.start_time) }} -
|
||||
{{ formatTime(batch.doc.end_time) }}
|
||||
</span>
|
||||
</div>
|
||||
<Button v-if="user?.data?.is_moderator" class="w-full mt-4">
|
||||
<span>
|
||||
{{ __('Manage Batch') }}
|
||||
</span>
|
||||
</Button>
|
||||
<Button
|
||||
v-else-if="batch.doc.paid_batch"
|
||||
class="w-full mt-4"
|
||||
variant="solid"
|
||||
>
|
||||
<span>
|
||||
{{ __('Register Now') }}
|
||||
</span>
|
||||
</Button>
|
||||
<Button v-if="user?.data?.is_moderator" class="w-full mt-2">
|
||||
<span>
|
||||
{{ __('Edit') }}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { formatNumberIntoCurrency, formatTime } from '@/utils'
|
||||
import { BookOpen, Calendar, Clock } from 'lucide-vue-next'
|
||||
import { inject, computed } from 'vue'
|
||||
import { Badge, Button } from 'frappe-ui'
|
||||
|
||||
const dayjs = inject('$dayjs')
|
||||
const user = inject('$user')
|
||||
|
||||
const props = defineProps({
|
||||
batch: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
|
||||
const seats_left = computed(() => {
|
||||
if (props.batch.doc.seat_count) {
|
||||
return props.batch.doc.seat_count - props.batch.doc.students.length
|
||||
}
|
||||
return null
|
||||
})
|
||||
</script>
|
||||
@@ -1,97 +1,156 @@
|
||||
<template>
|
||||
<div class="flex flex-col border border-gray-200 h-full rounded-md shadow-sm text-base overflow-auto" style="min-height: 320px;">
|
||||
<div class="course-image" :class="{ 'default-image': !course.image }" :style="{ backgroundImage: 'url(' + encodeURI(course.image) + ')' }">
|
||||
<div class="flex relative top-4 left-4 w-fit">
|
||||
<div class="course-card-pills rounded-md border border-gray-200" v-for="tag in course.tags">
|
||||
{{ tag }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!course.image" class="image-placeholder">{{ course.title[0] }}</div>
|
||||
</div>
|
||||
<div class="flex flex-col flex-auto p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div v-if="course.lesson_count" class="flex items-center space-x-1 py-1">
|
||||
<BookOpen class="h-4 w-4 stroke-1.5 text-gray-700" />
|
||||
<span> {{ course.lesson_count }} </span>
|
||||
</div>
|
||||
<div
|
||||
v-if="course.title"
|
||||
class="flex flex-col border border-gray-200 h-full rounded-md shadow-sm text-base overflow-auto"
|
||||
style="min-height: 320px"
|
||||
>
|
||||
<div
|
||||
class="course-image"
|
||||
:class="{ 'default-image': !course.image }"
|
||||
:style="{ backgroundImage: 'url(' + encodeURI(course.image) + ')' }"
|
||||
>
|
||||
<div class="flex relative top-4 left-4 w-fit">
|
||||
<div
|
||||
class="course-card-pills rounded-md border border-gray-200"
|
||||
v-for="tag in course.tags"
|
||||
>
|
||||
{{ tag }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!course.image" class="image-placeholder">
|
||||
{{ course.title[0] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col flex-auto p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div
|
||||
v-if="course.lesson_count"
|
||||
class="flex items-center space-x-1 py-1"
|
||||
>
|
||||
<BookOpen class="h-4 w-4 stroke-1.5 text-gray-700" />
|
||||
<span> {{ course.lesson_count }} </span>
|
||||
</div>
|
||||
|
||||
<div v-if="course.enrollment_count" class="flex items-center space-x-1 py-1">
|
||||
<Users class="h-4 w-4 stroke-1.5 text-gray-700" />
|
||||
<span> {{ course.enrollment_count }} </span>
|
||||
</div>
|
||||
<div
|
||||
v-if="course.enrollment_count"
|
||||
class="flex items-center space-x-1 py-1"
|
||||
>
|
||||
<Users class="h-4 w-4 stroke-1.5 text-gray-700" />
|
||||
<span> {{ course.enrollment_count }} </span>
|
||||
</div>
|
||||
|
||||
<div v-if="course.avg_rating" class="flex items-center space-x-1 py-1">
|
||||
<Star class="h-4 w-4 stroke-1.5 text-gray-700" />
|
||||
<span> {{ course.avg_rating }} </span>
|
||||
</div>
|
||||
<div v-if="course.avg_rating" class="flex items-center space-x-1 py-1">
|
||||
<Star class="h-4 w-4 stroke-1.5 text-gray-700" />
|
||||
<span> {{ course.avg_rating }} </span>
|
||||
</div>
|
||||
|
||||
<div v-if="course.status != 'Approved'">
|
||||
<Badge variant="solid" :theme="course.status === 'Under Review' ? 'orange' : 'blue'" size="sm">
|
||||
{{ course.status }}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="course.status != 'Approved'">
|
||||
<Badge
|
||||
variant="solid"
|
||||
:theme="course.status === 'Under Review' ? 'orange' : 'blue'"
|
||||
size="sm"
|
||||
>
|
||||
{{ course.status }}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-xl font-semibold">
|
||||
{{ course.title }}
|
||||
</div>
|
||||
<div class="text-xl font-semibold">
|
||||
{{ course.title }}
|
||||
</div>
|
||||
|
||||
<div class="short-introduction">
|
||||
{{ course.short_introduction }}
|
||||
</div>
|
||||
<div v-if="user && course.membership" class="w-full bg-gray-200 rounded-full h-1 mb-2">
|
||||
<div class="bg-gray-900 h-1 rounded-full" :style="{ width: Math.ceil(course.membership.progress) + '%' }"></div>
|
||||
</div>
|
||||
<div v-if="user && course.membership" class="text-sm mb-4">
|
||||
{{ Math.ceil(course.membership.progress) }}% completed
|
||||
</div>
|
||||
<div class="short-introduction">
|
||||
{{ course.short_introduction }}
|
||||
</div>
|
||||
<div
|
||||
v-if="user && course.membership"
|
||||
class="w-full bg-gray-200 rounded-full h-1 mb-2"
|
||||
>
|
||||
<div
|
||||
class="bg-gray-900 h-1 rounded-full"
|
||||
:style="{ width: Math.ceil(course.membership.progress) + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
<div v-if="user && course.membership" class="text-sm mb-4">
|
||||
{{ Math.ceil(course.membership.progress) }}% completed
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mt-auto">
|
||||
<div class="flex avatar-group overlap">
|
||||
<div class="mr-1" :class="{ 'avatar-group overlap': course.instructors.length > 1 }">
|
||||
<UserAvatar v-for="instructor in course.instructors" :user="instructor"/>
|
||||
</div>
|
||||
<span v-if="course.instructors.length == 1">
|
||||
{{ course.instructors[0].full_name }}
|
||||
</span>
|
||||
<span v-if="course.instructors.length == 2">
|
||||
{{ course.instructors[0].first_name }} and {{ course.instructors[1].first_name }}
|
||||
</span>
|
||||
<span v-if="course.instructors.length > 2">
|
||||
{{ course.instructors[0].first_name }} and {{ course.instructors.length - 1 }} others
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-auto">
|
||||
<div class="flex avatar-group overlap">
|
||||
<div
|
||||
class="mr-1"
|
||||
:class="{ 'avatar-group overlap': course.instructors.length > 1 }"
|
||||
>
|
||||
<UserAvatar
|
||||
v-for="instructor in course.instructors"
|
||||
:user="instructor"
|
||||
/>
|
||||
</div>
|
||||
<span v-if="course.instructors.length == 1">
|
||||
{{ course.instructors[0].full_name }}
|
||||
</span>
|
||||
<span v-if="course.instructors.length == 2">
|
||||
{{ course.instructors[0].first_name }} and
|
||||
{{ course.instructors[1].first_name }}
|
||||
</span>
|
||||
<span v-if="course.instructors.length > 2">
|
||||
{{ course.instructors[0].first_name }} and
|
||||
{{ course.instructors.length - 1 }} others
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="font-semibold">
|
||||
{{ course.price }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-semibold">
|
||||
{{ course.price }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { BookOpen, Users, Star } from 'lucide-vue-next'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import { sessionStore } from '@/stores/session'
|
||||
import { Badge } from "frappe-ui"
|
||||
import { Badge, createResource } from 'frappe-ui'
|
||||
import { ref, watchEffect } from 'vue'
|
||||
|
||||
const { isLoggedIn, user } = sessionStore()
|
||||
const { user } = sessionStore()
|
||||
let course = ref({})
|
||||
|
||||
const props = defineProps({
|
||||
course: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
course: {
|
||||
type: [Object, String],
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
|
||||
const courseDetails = createResource({
|
||||
url: 'lms.lms.utils.get_course_details',
|
||||
cache: ['course', props.courseName],
|
||||
makeParams() {
|
||||
return {
|
||||
course: props.course,
|
||||
}
|
||||
},
|
||||
transform(data) {
|
||||
course.value = data
|
||||
},
|
||||
})
|
||||
|
||||
/* watchEffect(() => {
|
||||
if (props.course && typeof props.course === "object") {
|
||||
course.value = props.course;
|
||||
} else {
|
||||
courseDetails.reload();
|
||||
}
|
||||
}); */
|
||||
</script>
|
||||
<style>
|
||||
.course-image {
|
||||
height: 168px;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
height: 168px;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.course-card-pills {
|
||||
@@ -108,31 +167,31 @@ const props = defineProps({
|
||||
}
|
||||
|
||||
.default-image {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: theme('colors.gray.200');
|
||||
color: theme('colors.gray.700');
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: theme('colors.gray.200');
|
||||
color: theme('colors.gray.700');
|
||||
}
|
||||
|
||||
.avatar-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar-group .avatar {
|
||||
transition: margin 0.1s ease-in-out;
|
||||
}
|
||||
.image-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
font-size: 5rem;
|
||||
color: theme('colors.gray.700');
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
font-size: 5rem;
|
||||
color: theme('colors.gray.700');
|
||||
font-weight: 600;
|
||||
}
|
||||
.avatar-group.overlap .avatar + .avatar {
|
||||
margin-left: calc(-8px);
|
||||
margin-left: calc(-8px);
|
||||
}
|
||||
|
||||
.short-introduction {
|
||||
@@ -143,6 +202,6 @@ const props = defineProps({
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0.25rem 0 1.25rem;
|
||||
line-height: 1.5;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
@@ -1,101 +1,132 @@
|
||||
<template>
|
||||
<div class="shadow rounded-md" style="width: 300px;">
|
||||
<iframe v-if="course.data.video_link" :src="video_link" class="rounded-t-md" />
|
||||
<div class="p-5">
|
||||
<router-link v-if="course.data.membership && course.data.current_lesson"
|
||||
:to="{name: 'Lesson', params: {
|
||||
courseName: course.name,
|
||||
chapterNumber: course.data.current_lesson.split('.')[0],
|
||||
lessonNumber: course.data.current_lesson.split('.')[1]
|
||||
}}">
|
||||
<Button variant="solid" class="w-full mb-3">
|
||||
<span>
|
||||
{{ __("Continue Learning") }}
|
||||
</span>
|
||||
</Button>
|
||||
</router-link>
|
||||
<Button v-else @click="enrollStudent()" variant="solid" class="w-full mb-3">
|
||||
<span>
|
||||
{{ __("Start Learning") }}
|
||||
</span>
|
||||
</Button>
|
||||
<Button v-if="user?.data?.is_moderator" variant="subtle" class="w-full mb-3">
|
||||
<span>
|
||||
{{ __("Edit") }}
|
||||
</span>
|
||||
</Button>
|
||||
<div class="flex items-center mb-3">
|
||||
<Users class="h-4 w-4 text-gray-700"/>
|
||||
<span class="ml-1">
|
||||
{{ course.data.enrollment_count_formatted }} {{ __("Enrolled") }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center mb-3">
|
||||
<BookOpen class="h-4 w-4 text-gray-700"/>
|
||||
<span class="ml-1">
|
||||
{{ course.data.lesson_count }} {{ __("Lessons") }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<Star class="h-4 w-4 fill-orange-500 text-gray-100"/>
|
||||
<span class="ml-1">
|
||||
{{ course.data.avg_rating }} {{ __("Rating") }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shadow rounded-md" style="width: 300px">
|
||||
<iframe
|
||||
v-if="course.data.video_link"
|
||||
:src="video_link"
|
||||
class="rounded-t-md"
|
||||
/>
|
||||
<div class="p-5">
|
||||
<router-link
|
||||
v-if="course.data.membership"
|
||||
:to="{
|
||||
name: 'Lesson',
|
||||
params: {
|
||||
courseName: course.name,
|
||||
chapterNumber: course.data.current_lesson
|
||||
? course.data.current_lesson.split('.')[0]
|
||||
: 1,
|
||||
lessonNumber: course.data.current_lesson
|
||||
? course.data.current_lesson.split('.')[1]
|
||||
: 1,
|
||||
},
|
||||
}"
|
||||
>
|
||||
<Button variant="solid" class="w-full mb-3">
|
||||
<span>
|
||||
{{ __('Continue Learning') }}
|
||||
</span>
|
||||
</Button>
|
||||
</router-link>
|
||||
<Button
|
||||
v-else
|
||||
@click="enrollStudent()"
|
||||
variant="solid"
|
||||
class="w-full mb-3"
|
||||
>
|
||||
<span>
|
||||
{{ __('Start Learning') }}
|
||||
</span>
|
||||
</Button>
|
||||
<Button
|
||||
v-if="user?.data?.is_moderator"
|
||||
variant="subtle"
|
||||
class="w-full mb-3"
|
||||
>
|
||||
<span>
|
||||
{{ __('Edit') }}
|
||||
</span>
|
||||
</Button>
|
||||
<div class="flex items-center mb-3">
|
||||
<Users class="h-4 w-4 text-gray-700" />
|
||||
<span class="ml-1">
|
||||
{{ course.data.enrollment_count_formatted }} {{ __('Enrolled') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center mb-3">
|
||||
<BookOpen class="h-4 w-4 text-gray-700" />
|
||||
<span class="ml-1">
|
||||
{{ course.data.lesson_count }} {{ __('Lessons') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<Star class="h-4 w-4 fill-orange-500 text-gray-100" />
|
||||
<span class="ml-1">
|
||||
{{ course.data.avg_rating }} {{ __('Rating') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { BookOpen, Users, Star } from 'lucide-vue-next'
|
||||
import { computed, inject } from 'vue'
|
||||
import { Button, createResource } from "frappe-ui"
|
||||
import { createToast } from "@/utils/"
|
||||
import { Button, createResource } from 'frappe-ui'
|
||||
import { createToast } from '@/utils/'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
|
||||
const user = inject("$user");
|
||||
const user = inject('$user')
|
||||
|
||||
const props = defineProps({
|
||||
course: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
course: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
|
||||
const video_link = computed(() => {
|
||||
if (props.course.data.video_link) {
|
||||
return "https://www.youtube.com/embed/" + props.course.data.video_link;
|
||||
}
|
||||
return null;
|
||||
});
|
||||
if (props.course.data.video_link) {
|
||||
return 'https://www.youtube.com/embed/' + props.course.data.video_link
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
function enrollStudent() {
|
||||
if (!user.data) {
|
||||
createToast({
|
||||
title: "Please Login",
|
||||
icon: 'alert-circle',
|
||||
iconClasses: 'text-yellow-600 bg-yellow-100',
|
||||
})
|
||||
setTimeout(() => {
|
||||
window.location.href = `/login?redirect-to=${window.location.pathname}`
|
||||
}, 3000)
|
||||
} else {
|
||||
const enrollStudentResource = createResource({
|
||||
url: "lms.lms.doctype.lms_enrollment.lms_enrollment.create_membership"
|
||||
})
|
||||
console.log(props.course)
|
||||
enrollStudentResource.submit({
|
||||
course: props.course.data.name
|
||||
}).then(() => {
|
||||
createToast({
|
||||
title: "Enrolled Successfully",
|
||||
icon: 'check',
|
||||
iconClasses: 'text-green-600 bg-green-100',
|
||||
})
|
||||
setTimeout(() => {
|
||||
router.push({ name: 'Lesson', params: { courseName: props.course.data.name, chapterNumber: 1, lessonNumber: 1 } })
|
||||
}, 3000)
|
||||
})
|
||||
}
|
||||
if (!user.data) {
|
||||
createToast({
|
||||
title: 'Please Login',
|
||||
icon: 'alert-circle',
|
||||
iconClasses: 'text-yellow-600 bg-yellow-100',
|
||||
})
|
||||
setTimeout(() => {
|
||||
window.location.href = `/login?redirect-to=${window.location.pathname}`
|
||||
}, 3000)
|
||||
} else {
|
||||
const enrollStudentResource = createResource({
|
||||
url: 'lms.lms.doctype.lms_enrollment.lms_enrollment.create_membership',
|
||||
})
|
||||
console.log(props.course)
|
||||
enrollStudentResource
|
||||
.submit({
|
||||
course: props.course.data.name,
|
||||
})
|
||||
.then(() => {
|
||||
createToast({
|
||||
title: 'Enrolled Successfully',
|
||||
icon: 'check',
|
||||
iconClasses: 'text-green-600 bg-green-100',
|
||||
})
|
||||
setTimeout(() => {
|
||||
router.push({
|
||||
name: 'Lesson',
|
||||
params: {
|
||||
courseName: props.course.data.name,
|
||||
chapterNumber: 1,
|
||||
lessonNumber: 1,
|
||||
},
|
||||
})
|
||||
}, 3000)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,67 +1,96 @@
|
||||
<template>
|
||||
<div class="course-outline text-base">
|
||||
<div class="mt-4">
|
||||
<Disclosure v-slot="{ open }" v-for="(chapter, index) in outline.data" :key="chapter.name" :defaultOpen="chapter.idx == route.params.chapterNumber">
|
||||
<DisclosureButton class="flex w-full px-2 pt-2 pb-3">
|
||||
<ChevronRight
|
||||
:class="{'rotate-90 transform duration-200' : open, 'duration-200' : !open, 'open': index == 1}"
|
||||
class="h-5 w-5 text-gray-900 stroke-1 mr-2"
|
||||
/>
|
||||
<div class="text-base font-medium">
|
||||
{{ chapter.title }}
|
||||
</div>
|
||||
</DisclosureButton>
|
||||
<DisclosurePanel class="pb-2">
|
||||
<div v-for="lesson in chapter.lessons" :key="lesson.name">
|
||||
<div class="outline-lesson mb-2 pl-9">
|
||||
<router-link :to='{
|
||||
name: "Lesson",
|
||||
params: {
|
||||
courseName: courseName,
|
||||
chapterNumber: lesson.number.split(".")[0],
|
||||
lessonNumber: lesson.number.split(".")[1],
|
||||
}
|
||||
}'>
|
||||
<div class="flex items-center text-sm">
|
||||
<MonitorPlay v-if="lesson.icon === 'icon-youtube'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
|
||||
<HelpCircle v-else-if="lesson.icon === 'icon-quiz'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
|
||||
<FileText v-else-if="lesson.icon === 'icon-list'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
|
||||
{{ lesson.title }}
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</DisclosurePanel>
|
||||
</Disclosure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-outline text-base">
|
||||
<div class="mt-4">
|
||||
<Disclosure
|
||||
v-slot="{ open }"
|
||||
v-for="(chapter, index) in outline.data"
|
||||
:key="chapter.name"
|
||||
:defaultOpen="openChapter(chapter.idx)"
|
||||
>
|
||||
<DisclosureButton class="flex w-full px-2 pt-2 pb-3">
|
||||
<ChevronRight
|
||||
:class="{
|
||||
'rotate-90 transform duration-200': open,
|
||||
'duration-200': !open,
|
||||
open: index == 1,
|
||||
}"
|
||||
class="h-5 w-5 text-gray-900 stroke-1 mr-2"
|
||||
/>
|
||||
<div class="text-base">
|
||||
{{ chapter.title }}
|
||||
</div>
|
||||
</DisclosureButton>
|
||||
<DisclosurePanel class="pb-2">
|
||||
<div v-for="lesson in chapter.lessons" :key="lesson.name">
|
||||
<div class="outline-lesson mb-2 pl-9">
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'Lesson',
|
||||
params: {
|
||||
courseName: courseName,
|
||||
chapterNumber: lesson.number.split('.')[0],
|
||||
lessonNumber: lesson.number.split('.')[1],
|
||||
},
|
||||
}"
|
||||
>
|
||||
<div class="flex items-center text-sm">
|
||||
<MonitorPlay
|
||||
v-if="lesson.icon === 'icon-youtube'"
|
||||
class="h-4 w-4 text-gray-900 stroke-1 mr-2"
|
||||
/>
|
||||
<HelpCircle
|
||||
v-else-if="lesson.icon === 'icon-quiz'"
|
||||
class="h-4 w-4 text-gray-900 stroke-1 mr-2"
|
||||
/>
|
||||
<FileText
|
||||
v-else-if="lesson.icon === 'icon-list'"
|
||||
class="h-4 w-4 text-gray-900 stroke-1 mr-2"
|
||||
/>
|
||||
{{ lesson.title }}
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</DisclosurePanel>
|
||||
</Disclosure>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { createResource } from "frappe-ui";
|
||||
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue';
|
||||
import { ChevronRight, MonitorPlay, HelpCircle, FileText } from 'lucide-vue-next';
|
||||
import { useRoute } from "vue-router";
|
||||
import { createResource } from 'frappe-ui'
|
||||
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
|
||||
import {
|
||||
ChevronRight,
|
||||
MonitorPlay,
|
||||
HelpCircle,
|
||||
FileText,
|
||||
} from 'lucide-vue-next'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const route = useRoute();
|
||||
const route = useRoute()
|
||||
const props = defineProps({
|
||||
courseName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
courseName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const outline = createResource({
|
||||
url: "lms.lms.utils.get_course_outline",
|
||||
cache: ["course_outline", props.courseName],
|
||||
params: {
|
||||
course: props.courseName
|
||||
},
|
||||
auto: true,
|
||||
});
|
||||
url: 'lms.lms.utils.get_course_outline',
|
||||
cache: ['course_outline', props.courseName],
|
||||
params: {
|
||||
course: props.courseName,
|
||||
},
|
||||
auto: true,
|
||||
})
|
||||
|
||||
const openChapter = (index) => {
|
||||
return index == route.params.chapterNumber || index == 1
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.outline-lesson:has(.router-link-active) {
|
||||
background-color: theme('colors.gray.100');
|
||||
padding: 0.5rem 0 0.5rem 2rem;
|
||||
background-color: theme('colors.gray.100');
|
||||
padding: 0.5rem 0 0.5rem 2rem;
|
||||
}
|
||||
</style>
|
||||
70
frontend/src/pages/Batch.vue
Normal file
70
frontend/src/pages/Batch.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="h-screen text-base">
|
||||
<header
|
||||
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
|
||||
>
|
||||
<Breadcrumbs class="h-7" :items="breadcrumbs" />
|
||||
</header>
|
||||
<div v-if="batch.doc">
|
||||
<div class="grid grid-cols-[70%,30%] h-full">
|
||||
<div class="border-r-2"></div>
|
||||
<div class="p-5">
|
||||
<div class="text-2xl font-semibold mb-3">
|
||||
{{ batch.doc.title }}
|
||||
</div>
|
||||
<div class="flex items-center mb-2">
|
||||
<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
|
||||
<span>
|
||||
{{ dayjs(batch.doc.start_date).format('DD MMM YYYY') }} -
|
||||
{{ dayjs(batch.doc.end_date).format('DD MMM YYYY') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center mb-6">
|
||||
<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
|
||||
<span>
|
||||
{{ formatTime(batch.doc.start_time) }} -
|
||||
{{ formatTime(batch.doc.end_time) }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-html="batch.doc.description"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Breadcrumbs, createDocumentResource } from 'frappe-ui'
|
||||
import { computed, inject } from 'vue'
|
||||
import { Calendar, Clock } from 'lucide-vue-next'
|
||||
import { formatTime } from '@/utils'
|
||||
|
||||
const dayjs = inject('$dayjs')
|
||||
|
||||
const props = defineProps({
|
||||
batchName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const batch = createDocumentResource({
|
||||
doctype: 'LMS Batch',
|
||||
name: props.batchName,
|
||||
cache: ['batch', props.batchName],
|
||||
auto: true,
|
||||
})
|
||||
|
||||
const breadcrumbs = computed(() => {
|
||||
return [
|
||||
{ label: 'All Batches', route: { name: 'Batches' } },
|
||||
{
|
||||
label: 'Batch Details',
|
||||
route: { name: 'BatchDetail', params: { batchName: props.batchName } },
|
||||
},
|
||||
{
|
||||
label: batch?.doc?.title,
|
||||
route: { name: 'Batch', params: { batchName: props.batchName } },
|
||||
},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
@@ -1,13 +1,123 @@
|
||||
<template>
|
||||
<div class="h-screen">
|
||||
this is a batch
|
||||
</div>
|
||||
<div v-if="batch.doc" class="h-screen text-base">
|
||||
<header class="sticky top-0 z-10 border-b bg-white px-3 py-2.5 sm:px-5">
|
||||
<Breadcrumbs :items="breadcrumbs" />
|
||||
</header>
|
||||
<div class="m-5 pb-10">
|
||||
<div>
|
||||
<div class="text-3xl font-semibold">
|
||||
{{ batch.doc.title }}
|
||||
</div>
|
||||
<div class="my-3">
|
||||
{{ batch.doc.description }}
|
||||
</div>
|
||||
<div class="flex items-center justify-between w-1/2">
|
||||
<div class="flex items-center">
|
||||
<BookOpen class="h-4 w-4 text-gray-700 mr-2" />
|
||||
<span> {{ batch.doc.courses.length }} {{ __('Courses') }} </span>
|
||||
</div>
|
||||
<span v-if="batch.doc.courses">·</span>
|
||||
<div class="flex items-center">
|
||||
<Calendar class="h-4 w-4 text-gray-700 mr-2" />
|
||||
<span>
|
||||
{{ dayjs(batch.doc.start_date).format('DD MMM YYYY') }} -
|
||||
{{ dayjs(batch.doc.end_date).format('DD MMM YYYY') }}
|
||||
</span>
|
||||
</div>
|
||||
<span v-if="batch.doc.start_date">·</span>
|
||||
<div class="flex items-center">
|
||||
<Clock class="h-4 w-4 text-gray-700 mr-2" />
|
||||
<span>
|
||||
{{ formatTime(batch.doc.start_time) }} -
|
||||
{{ formatTime(batch.doc.end_time) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-[60%,20%] gap-20 mt-10">
|
||||
<div class="">
|
||||
<div v-html="batch.doc.batch_details" class="batch-description"></div>
|
||||
</div>
|
||||
<div>
|
||||
<BatchOverlay :batch="batch" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-semibold">
|
||||
{{ __('Courses') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="batch.doc.courses"
|
||||
v-for="course in batch.doc.courses"
|
||||
:key="course.course"
|
||||
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mt-5"
|
||||
>
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'CourseDetail',
|
||||
params: {
|
||||
courseName: course.course,
|
||||
},
|
||||
}"
|
||||
>
|
||||
<CourseCard :course="course.course" :key="course.course" />
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Breadcrumbs, createDocumentResource } from 'frappe-ui'
|
||||
import { BookOpen, Calendar, Clock } from 'lucide-vue-next'
|
||||
import { formatTime } from '../utils'
|
||||
import { computed, inject } from 'vue'
|
||||
import BatchOverlay from '@/components/BatchOverlay.vue'
|
||||
import CourseCard from '@/components/CourseCard.vue'
|
||||
|
||||
const dayjs = inject('$dayjs')
|
||||
|
||||
const props = defineProps({
|
||||
batchName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
batchName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const batch = createDocumentResource({
|
||||
doctype: 'LMS Batch',
|
||||
name: props.batchName,
|
||||
cache: ['batch', props.batchName],
|
||||
auto: true,
|
||||
})
|
||||
|
||||
const breadcrumbs = computed(() => {
|
||||
let items = [{ label: 'All Batches', route: { name: 'Batches' } }]
|
||||
items.push({
|
||||
label: batch?.doc?.title,
|
||||
route: { name: 'BatchDetail', params: { batchName: batch?.doc?.name } },
|
||||
})
|
||||
return items
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
.batch-description p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.batch-description li {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.batch-description ol {
|
||||
list-style: auto;
|
||||
margin: revert;
|
||||
padding: revert;
|
||||
}
|
||||
|
||||
.batch-description strong {
|
||||
font-weight: 600;
|
||||
color: theme('colors.gray.900') !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,120 +1,137 @@
|
||||
<template>
|
||||
<div v-if="course.data" class="h-screen text-base">
|
||||
<header class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5">
|
||||
<Breadcrumbs
|
||||
class="h-7"
|
||||
:items="breadcrumbs"
|
||||
/>
|
||||
</header>
|
||||
<div class="m-5">
|
||||
<div>
|
||||
<div class="text-3xl font-semibold">
|
||||
{{ course.data.title }}
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
{{ course.data.short_introduction }}
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-3 w-1/3">
|
||||
<div v-if="course.data.avg_rating" class="flex items-center">
|
||||
<Star class="h-5 w-5 text-gray-100 fill-orange-500"/>
|
||||
<span class="ml-1">
|
||||
{{ course.data.avg_rating }}
|
||||
</span>
|
||||
</div>
|
||||
<span v-if="course.data.avg_rating">·</span>
|
||||
<div v-if="course.data.enrollment_count" class="flex items-center">
|
||||
<Users class="h-4 w-4 text-gray-700"/>
|
||||
<span class="ml-1">
|
||||
{{ course.data.enrollment_count_formatted }}
|
||||
</span>
|
||||
</div>
|
||||
<span v-if="course.data.enrollment_count">·</span>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-1" :class="{ 'avatar-group overlap': course.data.instructors.length > 1 }">
|
||||
<UserAvatar v-for="instructor in course.data.instructors" :user="instructor"/>
|
||||
</span>
|
||||
<span v-if="course.data.instructors.length == 1">
|
||||
{{ course.data.instructors[0].full_name }}
|
||||
</span>
|
||||
<span v-if="course.data.instructors.length == 2">
|
||||
{{ course.data.instructors[0].first_name }} and {{ course.data.instructors[1].first_name }}
|
||||
</span>
|
||||
<span v-if="course.data.instructors.length > 2">
|
||||
{{ course.data.instructors[0].first_name }} and {{ course.data.instructors.length - 1 }} others
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-[60%,20%] gap-20 mt-10">
|
||||
<div class="">
|
||||
<div v-html="course.data.description" class="course-description"></div>
|
||||
<div class="mt-10">
|
||||
<div class="text-2xl font-semibold">
|
||||
{{ __("Course Content") }}
|
||||
</div>
|
||||
<CourseOutline :courseName="course.data.name"/>
|
||||
</div>
|
||||
<CourseReviews v-if="course.data.avg_rating" :courseName="course.data.name" :avg_rating="course.data.avg_rating" :membership="course.data.membership"/>
|
||||
</div>
|
||||
<div>
|
||||
<CourseCardOverlay :course="course"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="course.data" class="h-screen text-base">
|
||||
<header
|
||||
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
|
||||
>
|
||||
<Breadcrumbs class="h-7" :items="breadcrumbs" />
|
||||
</header>
|
||||
<div class="m-5">
|
||||
<div>
|
||||
<div class="text-3xl font-semibold">
|
||||
{{ course.data.title }}
|
||||
</div>
|
||||
<div class="my-3">
|
||||
{{ course.data.short_introduction }}
|
||||
</div>
|
||||
<div class="flex items-center justify-between w-1/3">
|
||||
<div v-if="course.data.avg_rating" class="flex items-center">
|
||||
<Star class="h-5 w-5 text-gray-100 fill-orange-500" />
|
||||
<span class="ml-1">
|
||||
{{ course.data.avg_rating }}
|
||||
</span>
|
||||
</div>
|
||||
<span v-if="course.data.avg_rating">·</span>
|
||||
<div v-if="course.data.enrollment_count" class="flex items-center">
|
||||
<Users class="h-4 w-4 text-gray-700" />
|
||||
<span class="ml-1">
|
||||
{{ course.data.enrollment_count_formatted }}
|
||||
</span>
|
||||
</div>
|
||||
<span v-if="course.data.enrollment_count">·</span>
|
||||
<div class="flex items-center">
|
||||
<span
|
||||
class="mr-1"
|
||||
:class="{
|
||||
'avatar-group overlap': course.data.instructors.length > 1,
|
||||
}"
|
||||
>
|
||||
<UserAvatar
|
||||
v-for="instructor in course.data.instructors"
|
||||
:user="instructor"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="course.data.instructors.length == 1">
|
||||
{{ course.data.instructors[0].full_name }}
|
||||
</span>
|
||||
<span v-if="course.data.instructors.length == 2">
|
||||
{{ course.data.instructors[0].first_name }} and
|
||||
{{ course.data.instructors[1].first_name }}
|
||||
</span>
|
||||
<span v-if="course.data.instructors.length > 2">
|
||||
{{ course.data.instructors[0].first_name }} and
|
||||
{{ course.data.instructors.length - 1 }} others
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-[60%,20%] gap-20 mt-10">
|
||||
<div class="">
|
||||
<div
|
||||
v-html="course.data.description"
|
||||
class="course-description"
|
||||
></div>
|
||||
<div class="mt-10">
|
||||
<div class="text-2xl font-semibold">
|
||||
{{ __('Course Content') }}
|
||||
</div>
|
||||
<CourseOutline :courseName="course.data.name" />
|
||||
</div>
|
||||
<CourseReviews
|
||||
v-if="course.data.avg_rating"
|
||||
:courseName="course.data.name"
|
||||
:avg_rating="course.data.avg_rating"
|
||||
:membership="course.data.membership"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<CourseCardOverlay :course="course" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { createResource, Breadcrumbs } from "frappe-ui";
|
||||
import { computed } from "vue";
|
||||
import { createResource, Breadcrumbs } from 'frappe-ui'
|
||||
import { computed } from 'vue'
|
||||
import { Users, Star } from 'lucide-vue-next'
|
||||
import CourseCardOverlay from '@/components/CourseCardOverlay.vue';
|
||||
import CourseOutline from '@/components/CourseOutline.vue';
|
||||
import CourseReviews from '@/components/CourseReviews.vue';
|
||||
import CourseCardOverlay from '@/components/CourseCardOverlay.vue'
|
||||
import CourseOutline from '@/components/CourseOutline.vue'
|
||||
import CourseReviews from '@/components/CourseReviews.vue'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
|
||||
const props = defineProps({
|
||||
courseName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
courseName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const course = createResource({
|
||||
url: "lms.lms.utils.get_course_details",
|
||||
cache: ["course", props.courseName],
|
||||
params: {
|
||||
course: props.courseName
|
||||
},
|
||||
auto: true,
|
||||
});
|
||||
url: 'lms.lms.utils.get_course_details',
|
||||
cache: ['course', props.courseName],
|
||||
params: {
|
||||
course: props.courseName,
|
||||
},
|
||||
auto: true,
|
||||
})
|
||||
|
||||
const breadcrumbs = computed(() => {
|
||||
let items = [{ label: "All Courses", route: { name: "Courses" } }]
|
||||
items.push({
|
||||
label: course?.data?.title,
|
||||
route: { name: "CourseDetail", params: { course: course?.data?.name } },
|
||||
})
|
||||
return items
|
||||
let items = [{ label: 'All Courses', route: { name: 'Courses' } }]
|
||||
items.push({
|
||||
label: course?.data?.title,
|
||||
route: { name: 'CourseDetail', params: { course: course?.data?.name } },
|
||||
})
|
||||
return items
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
.course-description p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.course-description li {
|
||||
line-height: 1.7;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.course-description ol {
|
||||
list-style: auto;
|
||||
margin: revert;
|
||||
padding: revert;
|
||||
list-style: auto;
|
||||
margin: revert;
|
||||
padding: revert;
|
||||
}
|
||||
|
||||
.avatar-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar-group .avatar {
|
||||
|
||||
@@ -1,276 +1,388 @@
|
||||
<template>
|
||||
<div v-if="lesson.data && course.data" class="h-screen text-base">
|
||||
<header class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5">
|
||||
<Breadcrumbs class="h-7" :items="breadcrumbs" />
|
||||
</header>
|
||||
<div class="grid grid-cols-[70%,30%] h-full">
|
||||
<div v-if="lesson.data.no_preview" class="border-r-2 text-center pt-10">
|
||||
<p class="mb-4">
|
||||
{{ __("This lesson is not available for preview. Please enroll in the course to access it.") }}
|
||||
</p>
|
||||
<router-link :to='{ name: "CourseDetail", params: { courseName: courseName } }'>
|
||||
<Button variant="solid">
|
||||
{{ __("Start Learning") }}
|
||||
</Button>
|
||||
</router-link>
|
||||
</div>
|
||||
<div v-else class="border-r-2 container pt-5 pb-10">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-3xl font-semibold">
|
||||
{{ lesson.data.title }}
|
||||
</div>
|
||||
<div>
|
||||
<router-link v-if="lesson.data.prev" :to='{name: "Lesson", params: {
|
||||
courseName: courseName,
|
||||
chapterNumber: lesson.data.prev.split(".")[0],
|
||||
lessonNumber: lesson.data.prev.split(".")[1]
|
||||
}}'>
|
||||
<Button class="mr-2">
|
||||
<ChevronLeft class="w-4 h-4 stroke-1"/>
|
||||
</Button>
|
||||
</router-link>
|
||||
<router-link v-if="lesson.data.next" :to='{name: "Lesson", params: {
|
||||
courseName: courseName,
|
||||
chapterNumber: lesson.data.next.split(".")[0],
|
||||
lessonNumber: lesson.data.next.split(".")[1]
|
||||
}}'>
|
||||
<Button>
|
||||
<ChevronRight class="w-4 h-4 stroke-1"/>
|
||||
</Button>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="lesson.data && course.data" class="h-screen text-base">
|
||||
<header
|
||||
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
|
||||
>
|
||||
<Breadcrumbs class="h-7" :items="breadcrumbs" />
|
||||
</header>
|
||||
<div class="grid grid-cols-[70%,30%] h-full">
|
||||
<div v-if="lesson.data.no_preview" class="border-r-2 text-center pt-10">
|
||||
<p class="mb-4">
|
||||
{{
|
||||
__(
|
||||
'This lesson is not available for preview. Please enroll in the course to access it.'
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<router-link
|
||||
:to="{ name: 'CourseDetail', params: { courseName: courseName } }"
|
||||
>
|
||||
<Button variant="solid">
|
||||
{{ __('Start Learning') }}
|
||||
</Button>
|
||||
</router-link>
|
||||
</div>
|
||||
<div v-else class="border-r-2 container pt-5 pb-10">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-3xl font-semibold">
|
||||
{{ lesson.data.title }}
|
||||
</div>
|
||||
<div>
|
||||
<router-link
|
||||
v-if="lesson.data.prev"
|
||||
:to="{
|
||||
name: 'Lesson',
|
||||
params: {
|
||||
courseName: courseName,
|
||||
chapterNumber: lesson.data.prev.split('.')[0],
|
||||
lessonNumber: lesson.data.prev.split('.')[1],
|
||||
},
|
||||
}"
|
||||
>
|
||||
<Button class="mr-2">
|
||||
<ChevronLeft class="w-4 h-4 stroke-1" />
|
||||
</Button>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="lesson.data.next"
|
||||
:to="{
|
||||
name: 'Lesson',
|
||||
params: {
|
||||
courseName: courseName,
|
||||
chapterNumber: lesson.data.next.split('.')[0],
|
||||
lessonNumber: lesson.data.next.split('.')[1],
|
||||
},
|
||||
}"
|
||||
>
|
||||
<Button>
|
||||
<ChevronRight class="w-4 h-4 stroke-1" />
|
||||
</Button>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-2">
|
||||
<span class="mr-1" :class="{ 'avatar-group overlap': course.data.instructors.length > 1 }">
|
||||
<UserAvatar v-for="instructor in course.data.instructors" :user="instructor" />
|
||||
</span>
|
||||
<span v-if="course.data.instructors.length == 1">
|
||||
{{ course.data.instructors[0].full_name }}
|
||||
</span>
|
||||
<span v-if="course.data.instructors.length == 2">
|
||||
{{ course.data.instructors[0].first_name }} and {{ course.data.instructors[1].first_name }}
|
||||
</span>
|
||||
<span v-if="course.data.instructors.length > 2">
|
||||
{{ course.data.instructors[0].first_name }} and {{ course.data.instructors.length - 1 }} others
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div v-html="lesson.data.rendered_content" class="lesson-content mt-6"></div> -->
|
||||
<div class="lesson-content mt-6">
|
||||
<div v-for="block in lesson.data.body.split('\n\n')">
|
||||
<div v-if='block.includes("{{ YouTubeVideo")'>
|
||||
<iframe class="youtube-video" :src="getYouTubeVideoSource(block)" width="100%" height="400" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div v-else-if='block.includes("{{ Quiz")'>
|
||||
<Quiz v-if="user.data" :quizName="getId(block)"></Quiz>
|
||||
<div v-else class="border rounded-md text-center py-20">
|
||||
<div>
|
||||
{{ __("Please login to access the quiz.") }}
|
||||
</div>
|
||||
<Button @click="redirectToLogin()" class="mt-2">
|
||||
<span>
|
||||
{{ __("Login") }}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if='block.includes("{{ Video")'>
|
||||
<video controls width='100%' controlsList='nodownload'>
|
||||
<source :src="getId(block)" type='video/mp4'>
|
||||
</video>
|
||||
</div>
|
||||
<div v-else-if='block.includes("{{ PDF")'>
|
||||
<iframe :src="getPDFSource(block)" width="100%" height="400" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div v-else-if='block.includes("{{ Audio")'>
|
||||
<audio width='100%' controls controlsList='nodownload'>
|
||||
<source :src="getId(block)" type='audio/mp3'>
|
||||
</audio>
|
||||
</div>
|
||||
<div v-else-if='block.includes("{{ Embed")'>
|
||||
<iframe width="100%" height="400" :src="getId(block)" frameborder="0" allowfullscreen>
|
||||
</iframe>
|
||||
</div>
|
||||
<div v-else v-html="markdown.render(block)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sticky top-10">
|
||||
<div class="bg-gray-50 p-5 border-b-2">
|
||||
<div class="text-lg font-semibold">
|
||||
{{ course.data.title }}
|
||||
</div>
|
||||
<div v-if="user && course.data.membership" class="text-sm mt-3">
|
||||
{{ Math.ceil(course.data.membership.progress) }}% completed
|
||||
</div>
|
||||
<div v-if="user && course.data.membership" class="w-full bg-gray-200 rounded-full h-1 my-2">
|
||||
<div class="bg-gray-900 h-1 rounded-full"
|
||||
:style="{ width: Math.ceil(course.data.membership.progress) + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<CourseOutline :courseName="courseName" :key="chapterNumber" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mt-2">
|
||||
<span
|
||||
class="mr-1"
|
||||
:class="{
|
||||
'avatar-group overlap': course.data.instructors.length > 1,
|
||||
}"
|
||||
>
|
||||
<UserAvatar
|
||||
v-for="instructor in course.data.instructors"
|
||||
:user="instructor"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="course.data.instructors.length == 1">
|
||||
{{ course.data.instructors[0].full_name }}
|
||||
</span>
|
||||
<span v-if="course.data.instructors.length == 2">
|
||||
{{ course.data.instructors[0].first_name }} and
|
||||
{{ course.data.instructors[1].first_name }}
|
||||
</span>
|
||||
<span v-if="course.data.instructors.length > 2">
|
||||
{{ course.data.instructors[0].first_name }} and
|
||||
{{ course.data.instructors.length - 1 }} others
|
||||
</span>
|
||||
</div>
|
||||
<div class="lesson-content mt-6">
|
||||
<div v-if="lesson.data.youtube">
|
||||
<iframe
|
||||
class="youtube-video"
|
||||
:src="getYouTubeVideoSource(lesson.data.youtube)"
|
||||
width="100%"
|
||||
height="400"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
<div v-for="block in lesson.data.body.split('\n\n')">
|
||||
<div v-if="block.includes('{{ YouTubeVideo')">
|
||||
<iframe
|
||||
class="youtube-video"
|
||||
:src="getYouTubeVideoSource(block)"
|
||||
width="100%"
|
||||
height="400"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
<div v-else-if="block.includes('{{ Quiz')">
|
||||
<Quiz v-if="user.data" :quizName="getId(block)"></Quiz>
|
||||
<div v-else class="border rounded-md text-center py-20">
|
||||
<div>
|
||||
{{ __('Please login to access the quiz.') }}
|
||||
</div>
|
||||
<Button @click="redirectToLogin()" class="mt-2">
|
||||
<span>
|
||||
{{ __('Login') }}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="block.includes('{{ Video')">
|
||||
<video controls width="100%" controlsList="nodownload">
|
||||
<source :src="getId(block)" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
<div v-else-if="block.includes('{{ PDF')">
|
||||
<iframe
|
||||
:src="getPDFSource(block)"
|
||||
width="100%"
|
||||
height="400"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
<div v-else-if="block.includes('{{ Audio')">
|
||||
<audio width="100%" controls controlsList="nodownload">
|
||||
<source :src="getId(block)" type="audio/mp3" />
|
||||
</audio>
|
||||
</div>
|
||||
<div v-else-if="block.includes('{{ Embed')">
|
||||
<iframe
|
||||
width="100%"
|
||||
height="400"
|
||||
:src="getId(block)"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
<div v-else v-html="markdown.render(block)"></div>
|
||||
</div>
|
||||
<div v-if="lesson.data.quiz_id">
|
||||
<Quiz v-if="user.data" :quizName="getId(block)"></Quiz>
|
||||
<div v-else class="border rounded-md text-center py-20">
|
||||
<div>
|
||||
{{ __('Please login to access the quiz.') }}
|
||||
</div>
|
||||
<Button @click="redirectToLogin()" class="mt-2">
|
||||
<span>
|
||||
{{ __('Login') }}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sticky top-10">
|
||||
<div class="bg-gray-50 p-5 border-b-2">
|
||||
<div class="text-lg font-semibold">
|
||||
{{ course.data.title }}
|
||||
</div>
|
||||
<div v-if="user && course.data.membership" class="text-sm mt-3">
|
||||
{{ Math.ceil(course.data.membership.progress) }}% completed
|
||||
</div>
|
||||
<div
|
||||
v-if="user && course.data.membership"
|
||||
class="w-full bg-gray-200 rounded-full h-1 my-2"
|
||||
>
|
||||
<div
|
||||
class="bg-gray-900 h-1 rounded-full"
|
||||
:style="{
|
||||
width: Math.ceil(course.data.membership.progress) + '%',
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<CourseOutline :courseName="courseName" :key="chapterNumber" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { createResource, Breadcrumbs, Button } from "frappe-ui";
|
||||
import { computed, watch, onBeforeMount, onUnmounted, inject } from "vue";
|
||||
import { createResource, Breadcrumbs, Button } from 'frappe-ui'
|
||||
import { computed, watch, onBeforeMount, onUnmounted, inject } from 'vue'
|
||||
import { useStorage } from '@vueuse/core'
|
||||
import CourseOutline from '@/components/CourseOutline.vue';
|
||||
import UserAvatar from '@/components/UserAvatar.vue';
|
||||
import { useRoute } from "vue-router";
|
||||
import MarkdownIt from "markdown-it";
|
||||
import { ChevronLeft, ChevronRight } from "lucide-vue-next";
|
||||
import Quiz from '@/components/Quiz.vue';
|
||||
import CourseOutline from '@/components/CourseOutline.vue'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
|
||||
import Quiz from '@/components/Quiz.vue'
|
||||
|
||||
const user = inject("$user");
|
||||
const route = useRoute();
|
||||
const user = inject('$user')
|
||||
const route = useRoute()
|
||||
const markdown = new MarkdownIt({
|
||||
html: true,
|
||||
linkify: true,
|
||||
});
|
||||
|
||||
onBeforeMount(() => {
|
||||
localStorage.setItem("sidebar_is_collapsed", true);
|
||||
html: true,
|
||||
linkify: true,
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
courseName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
chapterNumber: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
lessonNumber: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
courseName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
chapterNumber: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
lessonNumber: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const lesson = createResource({
|
||||
url: "lms.lms.utils.get_lesson",
|
||||
cache: ["lesson", props.courseName, props.chapterNumber, props.lessonNumber],
|
||||
makeParams(values) {
|
||||
return {
|
||||
course: props.courseName,
|
||||
chapter: values ? values.chapter : props.chapterNumber,
|
||||
lesson: values ? values.lesson : props.lessonNumber,
|
||||
}
|
||||
},
|
||||
auto: true,
|
||||
});
|
||||
url: 'lms.lms.utils.get_lesson',
|
||||
cache: ['lesson', props.courseName, props.chapterNumber, props.lessonNumber],
|
||||
makeParams(values) {
|
||||
return {
|
||||
course: props.courseName,
|
||||
chapter: values ? values.chapter : props.chapterNumber,
|
||||
lesson: values ? values.lesson : props.lessonNumber,
|
||||
}
|
||||
},
|
||||
auto: true,
|
||||
onSuccess(data) {
|
||||
if (data.membership) {
|
||||
current_lesson.submit({
|
||||
name: data.membership.name,
|
||||
lesson_name: data.name,
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const current_lesson = createResource({
|
||||
url: 'frappe.client.set_value',
|
||||
makeParams(values) {
|
||||
return {
|
||||
doctype: 'LMS Enrollment',
|
||||
name: values.name,
|
||||
fieldname: 'current_lesson',
|
||||
value: values.lesson_name,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const course = createResource({
|
||||
url: "lms.lms.utils.get_course_details",
|
||||
cache: ["course", props.courseName],
|
||||
params: {
|
||||
course: props.courseName
|
||||
},
|
||||
auto: true,
|
||||
});
|
||||
url: 'lms.lms.utils.get_course_details',
|
||||
cache: ['course', props.courseName],
|
||||
params: {
|
||||
course: props.courseName,
|
||||
},
|
||||
auto: true,
|
||||
})
|
||||
|
||||
const breadcrumbs = computed(() => {
|
||||
let items = [{ label: "All Courses", route: { name: "Courses" } }]
|
||||
items.push({
|
||||
label: course?.data?.title,
|
||||
route: { name: "CourseDetail", params: { course: props.courseName } },
|
||||
})
|
||||
items.push({
|
||||
label: lesson?.data?.title,
|
||||
route: { name: "Lesson", params: { course: props.courseName, chapterNumber: props.chapterNumber, lessonNumber: props.lessonNumber } },
|
||||
})
|
||||
return items
|
||||
});
|
||||
let items = [{ label: 'All Courses', route: { name: 'Courses' } }]
|
||||
items.push({
|
||||
label: course?.data?.title,
|
||||
route: { name: 'CourseDetail', params: { course: props.courseName } },
|
||||
})
|
||||
items.push({
|
||||
label: lesson?.data?.title,
|
||||
route: {
|
||||
name: 'Lesson',
|
||||
params: {
|
||||
course: props.courseName,
|
||||
chapterNumber: props.chapterNumber,
|
||||
lessonNumber: props.lessonNumber,
|
||||
},
|
||||
},
|
||||
})
|
||||
return items
|
||||
})
|
||||
|
||||
onBeforeMount(() => {
|
||||
localStorage.setItem('sidebar_is_collapsed', true)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
useStorage("sidebar_is_collapsed", false);
|
||||
});
|
||||
localStorage.setItem('sidebar_is_collapsed', false)
|
||||
})
|
||||
|
||||
watch(
|
||||
[() => route.params.chapterNumber, () => route.params.lessonNumber],
|
||||
([newChapterNumber, newLessonNumber], [oldChapterNumber, oldLessonNumber]) => {
|
||||
lesson.submit({
|
||||
chapter: newChapterNumber,
|
||||
lesson: newLessonNumber,
|
||||
})
|
||||
}
|
||||
);
|
||||
[() => route.params.chapterNumber, () => route.params.lessonNumber],
|
||||
(
|
||||
[newChapterNumber, newLessonNumber],
|
||||
[oldChapterNumber, oldLessonNumber]
|
||||
) => {
|
||||
if (newChapterNumber && newLessonNumber) {
|
||||
lesson.submit({
|
||||
chapter: newChapterNumber,
|
||||
lesson: newLessonNumber,
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const getYouTubeVideoSource = (block) => {
|
||||
return `https://www.youtube.com/embed/${getId(block)}`;
|
||||
if (block.includes('{{')) {
|
||||
block = getId(block)
|
||||
}
|
||||
return `https://www.youtube.com/embed/${block}`
|
||||
}
|
||||
|
||||
const getPDFSource = (block) => {
|
||||
return `${getId(block)}#toolbar=0`;
|
||||
return `${getId(block)}#toolbar=0`
|
||||
}
|
||||
|
||||
const getId = (block) => {
|
||||
return block.match(/\(["']([^"']+?)["']\)/)[1];
|
||||
return block.match(/\(["']([^"']+?)["']\)/)[1]
|
||||
}
|
||||
|
||||
const redirectToLogin = () => {
|
||||
window.location.href = `/login?redirect_to=/courses/${props.courseName}/learn/${route.params.chapterNumber}-${route.params.lessonNumber}`;
|
||||
window.location.href = `/login?redirect_to=/courses/${props.courseName}/learn/${route.params.chapterNumber}-${route.params.lessonNumber}`
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
.avatar-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar-group .avatar {
|
||||
transition: margin 0.1s ease-in-out;
|
||||
transition: margin 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.lesson-content p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.lesson-content li {
|
||||
line-height: 1.7;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.lesson-content ol {
|
||||
list-style: auto;
|
||||
margin: revert;
|
||||
padding: 1rem;
|
||||
list-style: auto;
|
||||
margin: revert;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.lesson-content ul {
|
||||
list-style: auto;
|
||||
padding: 1rem;
|
||||
margin: revert;
|
||||
list-style: auto;
|
||||
padding: 1rem;
|
||||
margin: revert;
|
||||
}
|
||||
|
||||
.lesson-content img {
|
||||
border: 1px solid theme("colors.gray.200");
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid theme('colors.gray.200');
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.lesson-content code {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 1rem 1.25rem;
|
||||
background: #011627;
|
||||
color: #d6deeb;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 1rem 1.25rem;
|
||||
background: #011627;
|
||||
color: #d6deeb;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.lesson-content a {
|
||||
color: theme("colors.gray.900");
|
||||
text-decoration: underline;
|
||||
font-weight: 500;
|
||||
color: theme('colors.gray.900');
|
||||
text-decoration: underline;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -32,9 +32,16 @@ const routes = [
|
||||
component: () => import('@/pages/Batches.vue'),
|
||||
},
|
||||
{
|
||||
path: '/batches/:batchName',
|
||||
path: '/batches/details/:batchName',
|
||||
name: 'BatchDetail',
|
||||
component: () => import('@/pages/BatchDetail.vue'),
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: '/batches/:batchName',
|
||||
name: 'Batch',
|
||||
component: () => import('@/pages/Batch.vue'),
|
||||
props: true,
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
@@ -11,3 +11,31 @@ export function createToast(options) {
|
||||
export function timeAgo(date) {
|
||||
return useTimeAgo(date).value
|
||||
}
|
||||
|
||||
export function formatTime(timeString) {
|
||||
if (!timeString) return ''
|
||||
const [hour, minute] = timeString.split(':').map(Number)
|
||||
|
||||
// Create a Date object with dummy values for day, month, and year
|
||||
const dummyDate = new Date(0, 0, 0, hour, minute)
|
||||
|
||||
// Use Intl.DateTimeFormat to format the time in 12-hour format
|
||||
const formattedTime = new Intl.DateTimeFormat('en-US', {
|
||||
hour: 'numeric',
|
||||
minute: 'numeric',
|
||||
hour12: true,
|
||||
}).format(dummyDate)
|
||||
|
||||
return formattedTime
|
||||
}
|
||||
|
||||
export function formatNumberIntoCurrency(number, currency) {
|
||||
if (number) {
|
||||
return number.toLocaleString('en-IN', {
|
||||
maximumFractionDigits: 0,
|
||||
style: 'currency',
|
||||
currency: currency,
|
||||
})
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
@@ -39,10 +39,7 @@ def save_current_lesson(course_name, lesson_name):
|
||||
)
|
||||
if not name:
|
||||
return
|
||||
doc = frappe.get_doc("LMS Enrollment", name)
|
||||
doc.current_lesson = lesson_name
|
||||
doc.save()
|
||||
return {"current_lesson": doc.current_lesson}
|
||||
frappe.db.set_value("LMS Enrollment", name, "current_lesson", lesson_name)
|
||||
|
||||
|
||||
@frappe.whitelist()
|
||||
|
||||
@@ -1322,6 +1322,7 @@ def get_lesson(course, chapter, lesson):
|
||||
neighbours = get_neighbour_lesson(course, chapter, lesson)
|
||||
lesson_details.next = neighbours["next"]
|
||||
lesson_details.prev = neighbours["prev"]
|
||||
lesson_details.membership = membership
|
||||
return lesson_details
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user