feat: batch details
This commit is contained in:
Jannat Patel
@@ -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 class="text-xl font-semibold">
|
||||
{{ course.title }}
|
||||
</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="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="text-xl font-semibold">
|
||||
{{ course.title }}
|
||||
</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="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="font-semibold">
|
||||
{{ course.price }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user