frappe-lms/frontend/src/components/CourseCard.vue

<template>
	<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.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 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="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, createResource } from 'frappe-ui'
import { ref, watchEffect } from 'vue'

const { user } = sessionStore()
let course = ref({})

const props = defineProps({
	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;
}

.course-card-pills {
	background: #ffffff;
	margin-left: 0;
	margin-right: 0.5rem;
	padding: 3.5px 8px;
	font-size: 11px;
	text-align: center;
	letter-spacing: 0.011em;
	text-transform: uppercase;
	font-weight: 600;
	width: fit-content;
}

.default-image {
	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;
}

.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;
}
.avatar-group.overlap .avatar + .avatar {
	margin-left: calc(-8px);
}

.short-introduction {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	width: 100%;
	overflow: hidden;
	margin: 0.25rem 0 1.25rem;
	line-height: 1.5;
}
</style>