mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: enhance course page and indicators
This commit is contained in:
swve
parent
ca12e799df
commit
b40ddde2c2
6 changed files with 895 additions and 433 deletions
|
|
@ -9,16 +9,14 @@ import { useRouter } from 'next/navigation'
|
||||||
import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
|
import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
|
||||||
import {
|
import {
|
||||||
getCourseThumbnailMediaDirectory,
|
getCourseThumbnailMediaDirectory,
|
||||||
getUserAvatarMediaDirectory,
|
|
||||||
} from '@services/media/media'
|
} from '@services/media/media'
|
||||||
import { ArrowRight, Backpack, Check, File, Sparkles, Video } from 'lucide-react'
|
import { ArrowRight, Backpack, Check, File, Sparkles, StickyNote, Video, Square } from 'lucide-react'
|
||||||
import { useOrg } from '@components/Contexts/OrgContext'
|
import { useOrg } from '@components/Contexts/OrgContext'
|
||||||
import UserAvatar from '@components/Objects/UserAvatar'
|
|
||||||
import CourseUpdates from '@components/Objects/Courses/CourseUpdates/CourseUpdates'
|
|
||||||
import { CourseProvider } from '@components/Contexts/CourseContext'
|
import { CourseProvider } from '@components/Contexts/CourseContext'
|
||||||
import { useMediaQuery } from 'usehooks-ts'
|
import { useMediaQuery } from 'usehooks-ts'
|
||||||
import CoursesActions from '@components/Objects/Courses/CourseActions/CoursesActions'
|
import CoursesActions from '@components/Objects/Courses/CourseActions/CoursesActions'
|
||||||
import CourseActionsMobile from '@components/Objects/Courses/CourseActions/CourseActionsMobile'
|
import CourseActionsMobile from '@components/Objects/Courses/CourseActions/CourseActionsMobile'
|
||||||
|
import CourseAuthors from '@components/Objects/Courses/CourseAuthors/CourseAuthors'
|
||||||
|
|
||||||
const CourseClient = (props: any) => {
|
const CourseClient = (props: any) => {
|
||||||
const [learnings, setLearnings] = useState<any>([])
|
const [learnings, setLearnings] = useState<any>([])
|
||||||
|
|
@ -64,6 +62,54 @@ const CourseClient = (props: any) => {
|
||||||
getLearningTags()
|
getLearningTags()
|
||||||
}, [org, course])
|
}, [org, course])
|
||||||
|
|
||||||
|
const getActivityTypeLabel = (activityType: string) => {
|
||||||
|
switch (activityType) {
|
||||||
|
case 'TYPE_VIDEO':
|
||||||
|
return 'Video'
|
||||||
|
case 'TYPE_DOCUMENT':
|
||||||
|
return 'Document'
|
||||||
|
case 'TYPE_DYNAMIC':
|
||||||
|
return 'Page'
|
||||||
|
case 'TYPE_ASSIGNMENT':
|
||||||
|
return 'Assignment'
|
||||||
|
default:
|
||||||
|
return 'Learning Material'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getActivityTypeBadgeColor = (activityType: string) => {
|
||||||
|
switch (activityType) {
|
||||||
|
case 'TYPE_VIDEO':
|
||||||
|
return 'bg-neutral-100 text-neutral-500'
|
||||||
|
case 'TYPE_DOCUMENT':
|
||||||
|
return 'bg-neutral-100 text-neutral-500'
|
||||||
|
case 'TYPE_DYNAMIC':
|
||||||
|
return 'bg-neutral-100 text-neutral-500'
|
||||||
|
case 'TYPE_ASSIGNMENT':
|
||||||
|
return 'bg-neutral-100 text-neutral-500'
|
||||||
|
default:
|
||||||
|
return 'bg-neutral-100 text-neutral-500'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const isActivityDone = (activity: any) => {
|
||||||
|
const run = course?.trail?.runs?.find(
|
||||||
|
(run: any) => run.course_id == course.id
|
||||||
|
)
|
||||||
|
if (run) {
|
||||||
|
return run.steps.find((step: any) => step.activity_id == activity.id)
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
const isActivityCurrent = (activity: any) => {
|
||||||
|
const activity_uuid = activity.activity_uuid.replace('activity_', '')
|
||||||
|
if (props.current_activity && props.current_activity == activity_uuid) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{!course && !org ? (
|
{!course && !org ? (
|
||||||
|
|
@ -76,11 +122,6 @@ const CourseClient = (props: any) => {
|
||||||
<p className="text-md font-bold text-gray-400 pb-2">Course</p>
|
<p className="text-md font-bold text-gray-400 pb-2">Course</p>
|
||||||
<h1 className="text-3xl md:text-3xl -mt-3 font-bold">{course.name}</h1>
|
<h1 className="text-3xl md:text-3xl -mt-3 font-bold">{course.name}</h1>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-4 md:mt-0">
|
|
||||||
{!isMobile && <CourseProvider courseuuid={course.course_uuid}>
|
|
||||||
<CourseUpdates />
|
|
||||||
</CourseProvider>}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{props.course?.thumbnail_image && org ? (
|
{props.course?.thumbnail_image && org ? (
|
||||||
|
|
@ -195,147 +236,59 @@ const CourseClient = (props: any) => {
|
||||||
{chapter.activities.map((activity: any) => {
|
{chapter.activities.map((activity: any) => {
|
||||||
return (
|
return (
|
||||||
<div key={activity.activity_uuid} className="activity-container">
|
<div key={activity.activity_uuid} className="activity-container">
|
||||||
<p className="flex text-md"></p>
|
<div className="group hover:bg-neutral-50 transition-colors px-4 py-3">
|
||||||
<div className="flex space-x-1 py-2 px-4 items-center">
|
<div className="flex space-x-3 items-center">
|
||||||
<div className="courseicon items-center flex space-x-2 text-neutral-400">
|
<div className="flex items-center">
|
||||||
{activity.activity_type ===
|
{isActivityDone(activity) ? (
|
||||||
'TYPE_DYNAMIC' && (
|
<div className="relative cursor-pointer">
|
||||||
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
<Square size={18} className="stroke-[2] text-teal-600" />
|
||||||
<Sparkles
|
<Check size={18} className="stroke-[2.5] text-teal-600 absolute top-0 left-0" />
|
||||||
className="text-gray-400"
|
|
||||||
size={13}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-neutral-300 cursor-pointer">
|
||||||
|
<Square size={18} className="stroke-[2]" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
className="flex flex-col grow"
|
||||||
|
href={
|
||||||
|
getUriWithOrg(orgslug, '') +
|
||||||
|
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
||||||
|
'activity_',
|
||||||
|
''
|
||||||
|
)}`
|
||||||
|
}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
prefetch={false}
|
||||||
|
>
|
||||||
|
<div className="flex items-center space-x-2 w-full">
|
||||||
|
<p className="font-semibold text-neutral-600 group-hover:text-neutral-800 transition-colors">{activity.name}</p>
|
||||||
|
{isActivityCurrent(activity) && (
|
||||||
|
<div className="flex items-center space-x-1 text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full text-xs font-semibold animate-pulse">
|
||||||
|
<span>Current</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-1.5 mt-1 text-neutral-400">
|
||||||
|
{activity.activity_type === 'TYPE_DYNAMIC' && (
|
||||||
|
<StickyNote size={11} />
|
||||||
)}
|
)}
|
||||||
{activity.activity_type === 'TYPE_VIDEO' && (
|
{activity.activity_type === 'TYPE_VIDEO' && (
|
||||||
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
<Video size={11} />
|
||||||
<Video
|
|
||||||
className="text-gray-400"
|
|
||||||
size={13}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
{activity.activity_type ===
|
{activity.activity_type === 'TYPE_DOCUMENT' && (
|
||||||
'TYPE_DOCUMENT' && (
|
<File size={11} />
|
||||||
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
|
||||||
<File
|
|
||||||
className="text-gray-400"
|
|
||||||
size={13}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
{activity.activity_type ===
|
{activity.activity_type === 'TYPE_ASSIGNMENT' && (
|
||||||
'TYPE_ASSIGNMENT' && (
|
<Backpack size={11} />
|
||||||
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
|
||||||
<Backpack
|
|
||||||
className="text-gray-400"
|
|
||||||
size={13}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
<span className="text-xs font-medium">{getActivityTypeLabel(activity.activity_type)}</span>
|
||||||
<Link
|
|
||||||
className="flex font-semibold grow pl-2 text-neutral-500"
|
|
||||||
href={
|
|
||||||
getUriWithOrg(orgslug, '') +
|
|
||||||
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
|
||||||
'activity_',
|
|
||||||
''
|
|
||||||
)}`
|
|
||||||
}
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
prefetch={false}
|
|
||||||
>
|
|
||||||
<p>{activity.name}</p>
|
|
||||||
</Link>
|
|
||||||
<div className="flex ">
|
|
||||||
{activity.activity_type ===
|
|
||||||
'TYPE_DYNAMIC' && (
|
|
||||||
<div>
|
|
||||||
<Link
|
|
||||||
className="flex grow pl-2 text-gray-500"
|
|
||||||
href={
|
|
||||||
getUriWithOrg(orgslug, '') +
|
|
||||||
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
|
||||||
'activity_',
|
|
||||||
''
|
|
||||||
)}`
|
|
||||||
}
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
prefetch={false}
|
|
||||||
>
|
|
||||||
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
|
||||||
<p>Page</p>
|
|
||||||
<ArrowRight size={13} />
|
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
|
<div className="text-neutral-300 group-hover:text-neutral-400 transition-colors cursor-pointer">
|
||||||
|
<ArrowRight size={16} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
{activity.activity_type === 'TYPE_VIDEO' && (
|
|
||||||
<div>
|
|
||||||
<Link
|
|
||||||
className="flex grow pl-2 text-gray-500"
|
|
||||||
href={
|
|
||||||
getUriWithOrg(orgslug, '') +
|
|
||||||
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
|
||||||
'activity_',
|
|
||||||
''
|
|
||||||
)}`
|
|
||||||
}
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
prefetch={false}
|
|
||||||
>
|
|
||||||
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
|
||||||
<p>Video</p>
|
|
||||||
<ArrowRight size={13} />
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{activity.activity_type ===
|
|
||||||
'TYPE_DOCUMENT' && (
|
|
||||||
<div>
|
|
||||||
<Link
|
|
||||||
className="flex grow pl-2 text-gray-500"
|
|
||||||
href={
|
|
||||||
getUriWithOrg(orgslug, '') +
|
|
||||||
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
|
||||||
'activity_',
|
|
||||||
''
|
|
||||||
)}`
|
|
||||||
}
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
prefetch={false}
|
|
||||||
>
|
|
||||||
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
|
||||||
<p>Document</p>
|
|
||||||
<ArrowRight size={13} />
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{activity.activity_type ===
|
|
||||||
'TYPE_ASSIGNMENT' && (
|
|
||||||
<div>
|
|
||||||
<Link
|
|
||||||
className="flex grow pl-2 text-gray-500"
|
|
||||||
href={
|
|
||||||
getUriWithOrg(orgslug, '') +
|
|
||||||
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
|
||||||
'activity_',
|
|
||||||
''
|
|
||||||
)}`
|
|
||||||
}
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
prefetch={false}
|
|
||||||
>
|
|
||||||
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
|
||||||
<p>Assignment</p>
|
|
||||||
<ArrowRight size={13} />
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -348,8 +301,16 @@ const CourseClient = (props: any) => {
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='course_metadata_right basis-1/4'>
|
<div className='course_metadata_right basis-1/4 space-y-4'>
|
||||||
|
{/* Actions Box */}
|
||||||
<CoursesActions courseuuid={courseuuid} orgslug={orgslug} course={course} />
|
<CoursesActions courseuuid={courseuuid} orgslug={orgslug} course={course} />
|
||||||
|
|
||||||
|
{/* Authors & Updates Box */}
|
||||||
|
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden p-4">
|
||||||
|
<CourseProvider courseuuid={course.course_uuid}>
|
||||||
|
<CourseAuthors authors={course.authors} />
|
||||||
|
</CourseProvider>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</GeneralWrapperStyled>
|
</GeneralWrapperStyled>
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,31 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
import React, { useState, useEffect } from 'react'
|
||||||
import UserAvatar from '../../UserAvatar'
|
|
||||||
import { getUserAvatarMediaDirectory } from '@services/media/media'
|
|
||||||
import { removeCourse, startCourse } from '@services/courses/activity'
|
import { removeCourse, startCourse } from '@services/courses/activity'
|
||||||
import { revalidateTags } from '@services/utils/ts/requests'
|
import { revalidateTags } from '@services/utils/ts/requests'
|
||||||
import { useRouter } from 'next/navigation'
|
import { useRouter } from 'next/navigation'
|
||||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||||
import { useMediaQuery } from 'usehooks-ts'
|
|
||||||
import { getUriWithOrg, getUriWithoutOrg } from '@services/config/config'
|
import { getUriWithOrg, getUriWithoutOrg } from '@services/config/config'
|
||||||
import { getProductsByCourse } from '@services/payments/products'
|
import { getProductsByCourse } from '@services/payments/products'
|
||||||
import { LogIn, LogOut, ShoppingCart, AlertCircle, UserPen, ClockIcon } from 'lucide-react'
|
import { LogIn, LogOut, ShoppingCart, AlertCircle, UserPen, ClockIcon, ArrowRight, Sparkles, BookOpen } from 'lucide-react'
|
||||||
import Modal from '@components/Objects/StyledElements/Modal/Modal'
|
import Modal from '@components/Objects/StyledElements/Modal/Modal'
|
||||||
import CoursePaidOptions from './CoursePaidOptions'
|
import CoursePaidOptions from './CoursePaidOptions'
|
||||||
import { checkPaidAccess } from '@services/payments/payments'
|
import { checkPaidAccess } from '@services/payments/payments'
|
||||||
import { applyForContributor } from '@services/courses/courses'
|
import { applyForContributor } from '@services/courses/courses'
|
||||||
import toast from 'react-hot-toast'
|
import toast from 'react-hot-toast'
|
||||||
import { useContributorStatus } from '../../../../hooks/useContributorStatus'
|
import { useContributorStatus } from '../../../../hooks/useContributorStatus'
|
||||||
|
import CourseProgress from '../CourseProgress/CourseProgress'
|
||||||
interface Author {
|
import UserAvatar from '@components/Objects/UserAvatar'
|
||||||
user: {
|
|
||||||
id: string
|
|
||||||
user_uuid: string
|
|
||||||
avatar_image: string
|
|
||||||
first_name: string
|
|
||||||
last_name: string
|
|
||||||
username: string
|
|
||||||
}
|
|
||||||
authorship: 'CREATOR' | 'CONTRIBUTOR' | 'MAINTAINER' | 'REPORTER'
|
|
||||||
authorship_status: 'ACTIVE' | 'INACTIVE' | 'PENDING'
|
|
||||||
}
|
|
||||||
|
|
||||||
interface CourseRun {
|
interface CourseRun {
|
||||||
status: string
|
status: string
|
||||||
course_id: string
|
course_id: string
|
||||||
|
steps: Array<{
|
||||||
|
activity_id: string
|
||||||
|
complete: boolean
|
||||||
|
}>
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Course {
|
interface Course {
|
||||||
id: string
|
id: string
|
||||||
authors: Author[]
|
|
||||||
trail?: {
|
trail?: {
|
||||||
runs: CourseRun[]
|
runs: CourseRun[]
|
||||||
}
|
}
|
||||||
|
|
@ -59,137 +48,7 @@ interface CourseActionsProps {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Separate component for author display
|
function CoursesActions({ courseuuid, orgslug, course }: CourseActionsProps) {
|
||||||
const AuthorInfo = ({ author, isMobile }: { author: Author, isMobile: boolean }) => (
|
|
||||||
<div className="flex flex-row md:flex-col mx-auto space-y-0 md:space-y-3 space-x-4 md:space-x-0 px-2 py-2 items-center">
|
|
||||||
<UserAvatar
|
|
||||||
border="border-8"
|
|
||||||
avatar_url={author.user.avatar_image ? getUserAvatarMediaDirectory(author.user.user_uuid, author.user.avatar_image) : ''}
|
|
||||||
predefined_avatar={author.user.avatar_image ? undefined : 'empty'}
|
|
||||||
width={isMobile ? 60 : 100}
|
|
||||||
showProfilePopup={true}
|
|
||||||
userId={author.user.user_uuid}
|
|
||||||
/>
|
|
||||||
<div className="md:-space-y-2">
|
|
||||||
<div className="text-[12px] text-neutral-400 font-semibold">Author</div>
|
|
||||||
<div className="text-lg md:text-xl font-bold text-neutral-800">
|
|
||||||
{(author.user.first_name && author.user.last_name) ? (
|
|
||||||
<div className="flex space-x-2 items-center">
|
|
||||||
<p>{`${author.user.first_name} ${author.user.last_name}`}</p>
|
|
||||||
<span className="text-xs bg-neutral-100 p-1 px-3 rounded-full text-neutral-400 font-semibold">
|
|
||||||
@{author.user.username}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex space-x-2 items-center">
|
|
||||||
<p>@{author.user.username}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
const MultipleAuthors = ({ authors, isMobile }: { authors: Author[], isMobile: boolean }) => {
|
|
||||||
const displayedAvatars = authors.slice(0, 3)
|
|
||||||
const displayedNames = authors.slice(0, 2)
|
|
||||||
const remainingCount = Math.max(0, authors.length - 3)
|
|
||||||
|
|
||||||
// Consistent sizes for both avatars and badge
|
|
||||||
const avatarSize = isMobile ? 72 : 86
|
|
||||||
const borderSize = "border-4"
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center space-y-4 px-2 py-2">
|
|
||||||
<div className="text-[12px] text-neutral-400 font-semibold self-start">Authors</div>
|
|
||||||
|
|
||||||
{/* Avatars row */}
|
|
||||||
<div className="flex justify-center -space-x-6 relative">
|
|
||||||
{displayedAvatars.map((author, index) => (
|
|
||||||
<div
|
|
||||||
key={author.user.user_uuid}
|
|
||||||
className="relative"
|
|
||||||
style={{ zIndex: displayedAvatars.length - index }}
|
|
||||||
>
|
|
||||||
<div className="ring-white">
|
|
||||||
<UserAvatar
|
|
||||||
border={borderSize}
|
|
||||||
rounded='rounded-full'
|
|
||||||
avatar_url={author.user.avatar_image ? getUserAvatarMediaDirectory(author.user.user_uuid, author.user.avatar_image) : ''}
|
|
||||||
predefined_avatar={author.user.avatar_image ? undefined : 'empty'}
|
|
||||||
width={avatarSize}
|
|
||||||
showProfilePopup={true}
|
|
||||||
userId={author.user.id}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
{remainingCount > 0 && (
|
|
||||||
<div
|
|
||||||
className="relative"
|
|
||||||
style={{ zIndex: 0 }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="flex items-center justify-center bg-neutral-100 text-neutral-600 font-medium rounded-full border-4 border-white shadow-sm"
|
|
||||||
style={{
|
|
||||||
width: `${avatarSize}px`,
|
|
||||||
height: `${avatarSize}px`,
|
|
||||||
fontSize: isMobile ? '14px' : '16px'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
+{remainingCount}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Names row - improved display logic */}
|
|
||||||
<div className="text-center mt-2">
|
|
||||||
<div className="text-sm font-medium text-neutral-800">
|
|
||||||
{authors.length === 1 ? (
|
|
||||||
<span>
|
|
||||||
{authors[0].user.first_name && authors[0].user.last_name
|
|
||||||
? `${authors[0].user.first_name} ${authors[0].user.last_name}`
|
|
||||||
: `@${authors[0].user.username}`}
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{displayedNames.map((author, index) => (
|
|
||||||
<span key={author.user.user_uuid}>
|
|
||||||
{author.user.first_name && author.user.last_name
|
|
||||||
? `${author.user.first_name} ${author.user.last_name}`
|
|
||||||
: `@${author.user.username}`}
|
|
||||||
{index === 0 && authors.length > 1 && index < displayedNames.length - 1 && " & "}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
{authors.length > 2 && (
|
|
||||||
<span className="text-neutral-500 ml-1">
|
|
||||||
& {authors.length - 2} more
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-neutral-500 mt-0.5">
|
|
||||||
{authors.length === 1 ? (
|
|
||||||
<span>@{authors[0].user.username}</span>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{displayedNames.map((author, index) => (
|
|
||||||
<span key={author.user.user_uuid}>
|
|
||||||
@{author.user.username}
|
|
||||||
{index === 0 && authors.length > 1 && index < displayedNames.length - 1 && " & "}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const session = useLHSession() as any
|
const session = useLHSession() as any
|
||||||
const [linkedProducts, setLinkedProducts] = useState<any[]>([])
|
const [linkedProducts, setLinkedProducts] = useState<any[]>([])
|
||||||
|
|
@ -198,7 +57,8 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
|
||||||
const [isContributeLoading, setIsContributeLoading] = useState(false)
|
const [isContributeLoading, setIsContributeLoading] = useState(false)
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false)
|
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||||
const [hasAccess, setHasAccess] = useState<boolean | null>(null)
|
const [hasAccess, setHasAccess] = useState<boolean | null>(null)
|
||||||
const { contributorStatus, refetch } = useContributorStatus(courseuuid);
|
const { contributorStatus, refetch } = useContributorStatus(courseuuid)
|
||||||
|
const [isProgressOpen, setIsProgressOpen] = useState(false)
|
||||||
|
|
||||||
const isStarted = course.trail?.runs?.some(
|
const isStarted = course.trail?.runs?.some(
|
||||||
(run) => run.status === 'STATUS_IN_PROGRESS' && run.course_id === course.id
|
(run) => run.status === 'STATUS_IN_PROGRESS' && run.course_id === course.id
|
||||||
|
|
@ -321,12 +181,33 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isLoading) {
|
const renderActionButton = (action: 'start' | 'leave') => {
|
||||||
return <div className="animate-pulse h-20 bg-gray-100 rounded-lg nice-shadow" />
|
if (!session.data?.user) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<UserAvatar width={24} predefined_avatar="empty" rounded="rounded-full" border="border-2" borderColor="border-white" />
|
||||||
|
<span>{action === 'start' ? 'Start Course' : 'Leave Course'}</span>
|
||||||
|
<ArrowRight className="w-5 h-5" />
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<UserAvatar
|
||||||
|
width={24}
|
||||||
|
use_with_session={true}
|
||||||
|
rounded="rounded-full"
|
||||||
|
border="border-2"
|
||||||
|
borderColor="border-white"
|
||||||
|
/>
|
||||||
|
<span>{action === 'start' ? 'Start Course' : 'Leave Course'}</span>
|
||||||
|
<ArrowRight className="w-5 h-5" />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const renderContributorButton = () => {
|
const renderContributorButton = () => {
|
||||||
// Don't render anything if the course is not open to contributors or if the user status is INACTIVE
|
|
||||||
if (contributorStatus === 'INACTIVE' || course.open_to_contributors !== true) {
|
if (contributorStatus === 'INACTIVE' || course.open_to_contributors !== true) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
@ -379,8 +260,123 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const renderProgressSection = () => {
|
||||||
|
const totalActivities = course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 0;
|
||||||
|
const completedActivities = course.trail?.runs?.find(
|
||||||
|
(run: CourseRun) => run.course_id === course.id
|
||||||
|
)?.steps?.filter((step) => step.complete)?.length || 0;
|
||||||
|
|
||||||
|
const progressPercentage = Math.round((completedActivities / totalActivities) * 100);
|
||||||
|
|
||||||
|
if (!isStarted) {
|
||||||
|
return (
|
||||||
|
<div className="relative bg-white nice-shadow rounded-lg overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 opacity-[0.05]"
|
||||||
|
style={{
|
||||||
|
backgroundImage: 'radial-gradient(circle at center, #101010 1px, transparent 1px)',
|
||||||
|
backgroundSize: '12px 12px'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="relative p-4">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="relative w-16 h-16">
|
||||||
|
<svg className="w-full h-full transform -rotate-90">
|
||||||
|
<circle
|
||||||
|
cx="32"
|
||||||
|
cy="32"
|
||||||
|
r="28"
|
||||||
|
stroke="#e5e7eb"
|
||||||
|
strokeWidth="6"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<BookOpen className="w-6 h-6 text-neutral-400" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-sm font-medium text-gray-900">Ready to Begin?</div>
|
||||||
|
<div className="text-sm text-gray-500">
|
||||||
|
Start your learning journey with {totalActivities} exciting {totalActivities === 1 ? 'activity' : 'activities'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative bg-white nice-shadow rounded-lg overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 opacity-[0.05]"
|
||||||
|
style={{
|
||||||
|
backgroundImage: 'radial-gradient(circle at center, #000 1px, transparent 1px)',
|
||||||
|
backgroundSize: '24px 24px'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="relative p-4">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="relative w-16 h-16">
|
||||||
|
<svg className="w-full h-full transform -rotate-90">
|
||||||
|
<circle
|
||||||
|
cx="32"
|
||||||
|
cy="32"
|
||||||
|
r="28"
|
||||||
|
stroke="#e5e7eb"
|
||||||
|
strokeWidth="6"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
cx="32"
|
||||||
|
cy="32"
|
||||||
|
r="28"
|
||||||
|
stroke="#10b981"
|
||||||
|
strokeWidth="6"
|
||||||
|
fill="none"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeDasharray={2 * Math.PI * 28}
|
||||||
|
strokeDashoffset={2 * Math.PI * 28 * (1 - completedActivities / totalActivities)}
|
||||||
|
className="transition-all duration-500 ease-out"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<span className="text-lg font-bold text-gray-800">
|
||||||
|
{progressPercentage}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setIsProgressOpen(true)}
|
||||||
|
className="flex-1 text-left hover:bg-neutral-50/50 p-2 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<div className="text-sm font-medium text-gray-900">Course Progress</div>
|
||||||
|
<div className="text-sm text-gray-500">
|
||||||
|
{completedActivities} of {totalActivities} completed
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return <div className="animate-pulse h-20 bg-gray-100 rounded-lg nice-shadow" />
|
||||||
|
}
|
||||||
|
|
||||||
if (linkedProducts.length > 0) {
|
if (linkedProducts.length > 0) {
|
||||||
return (
|
return (
|
||||||
|
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden p-4">
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{hasAccess ? (
|
{hasAccess ? (
|
||||||
<>
|
<>
|
||||||
|
|
@ -404,21 +400,14 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
|
||||||
>
|
>
|
||||||
{isActionLoading ? (
|
{isActionLoading ? (
|
||||||
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||||
) : isStarted ? (
|
|
||||||
<>
|
|
||||||
<LogOut className="w-5 h-5" />
|
|
||||||
Leave Course
|
|
||||||
</>
|
|
||||||
) : (
|
) : (
|
||||||
<>
|
renderActionButton(isStarted ? 'leave' : 'start')
|
||||||
<LogIn className="w-5 h-5" />
|
|
||||||
Start Course
|
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
{renderContributorButton()}
|
{renderContributorButton()}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
|
<>
|
||||||
<div className="p-4 bg-amber-50 border border-amber-200 rounded-lg nice-shadow">
|
<div className="p-4 bg-amber-50 border border-amber-200 rounded-lg nice-shadow">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<AlertCircle className="w-5 h-5 text-amber-800" />
|
<AlertCircle className="w-5 h-5 text-amber-800" />
|
||||||
|
|
@ -428,10 +417,6 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
|
||||||
This course requires purchase to access its content.
|
This course requires purchase to access its content.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
{!hasAccess && (
|
|
||||||
<>
|
|
||||||
<Modal
|
<Modal
|
||||||
isDialogOpen={isModalOpen}
|
isDialogOpen={isModalOpen}
|
||||||
onOpenChange={setIsModalOpen}
|
onOpenChange={setIsModalOpen}
|
||||||
|
|
@ -451,11 +436,17 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden p-4">
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
|
{/* Progress Section */}
|
||||||
|
{renderProgressSection()}
|
||||||
|
|
||||||
|
{/* Start/Leave Course Button */}
|
||||||
<button
|
<button
|
||||||
onClick={handleCourseAction}
|
onClick={handleCourseAction}
|
||||||
disabled={isActionLoading}
|
disabled={isActionLoading}
|
||||||
|
|
@ -466,52 +457,22 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{isActionLoading ? (
|
{isActionLoading ? (
|
||||||
<div className="w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||||
) : !session.data?.user ? (
|
|
||||||
<>
|
|
||||||
<LogIn className="w-5 h-5" />
|
|
||||||
Authenticate to start course
|
|
||||||
</>
|
|
||||||
) : isStarted ? (
|
|
||||||
<>
|
|
||||||
<LogOut className="w-5 h-5" />
|
|
||||||
Leave Course
|
|
||||||
</>
|
|
||||||
) : (
|
) : (
|
||||||
<>
|
renderActionButton(isStarted ? 'leave' : 'start')
|
||||||
<LogIn className="w-5 h-5" />
|
|
||||||
Start Course
|
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
{/* Contributor Button */}
|
||||||
{renderContributorButton()}
|
{renderContributorButton()}
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function CoursesActions({ courseuuid, orgslug, course }: CourseActionsProps) {
|
{/* Course Progress Modal */}
|
||||||
const router = useRouter()
|
<CourseProgress
|
||||||
const session = useLHSession() as any
|
course={course}
|
||||||
const isMobile = useMediaQuery('(max-width: 768px)')
|
orgslug={orgslug}
|
||||||
|
isOpen={isProgressOpen}
|
||||||
// Filter active authors and sort by role priority
|
onClose={() => setIsProgressOpen(false)}
|
||||||
const sortedAuthors = [...course.authors]
|
/>
|
||||||
.filter(author => author.authorship_status === 'ACTIVE')
|
|
||||||
.sort((a, b) => {
|
|
||||||
const rolePriority: Record<string, number> = {
|
|
||||||
'CREATOR': 0,
|
|
||||||
'MAINTAINER': 1,
|
|
||||||
'CONTRIBUTOR': 2,
|
|
||||||
'REPORTER': 3
|
|
||||||
};
|
|
||||||
return rolePriority[a.authorship] - rolePriority[b.authorship];
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-3 antialiased flex flex-col p-3 py-5 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
|
|
||||||
<MultipleAuthors authors={sortedAuthors} isMobile={isMobile} />
|
|
||||||
<div className='px-3 py-2'>
|
|
||||||
<Actions courseuuid={courseuuid} orgslug={orgslug} course={course} />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,410 @@
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import UserAvatar from '../../UserAvatar'
|
||||||
|
import { getUserAvatarMediaDirectory } from '@services/media/media'
|
||||||
|
import { useMediaQuery } from 'usehooks-ts'
|
||||||
|
import { Rss, PencilLine, TentTree } from 'lucide-react'
|
||||||
|
import { useCourse } from '@components/Contexts/CourseContext'
|
||||||
|
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||||
|
import useSWR, { mutate } from 'swr'
|
||||||
|
import { getAPIUrl } from '@services/config/config'
|
||||||
|
import { swrFetcher } from '@services/utils/ts/requests'
|
||||||
|
import useAdminStatus from '@components/Hooks/useAdminStatus'
|
||||||
|
import { useOrg } from '@components/Contexts/OrgContext'
|
||||||
|
import { createCourseUpdate, deleteCourseUpdate } from '@services/courses/updates'
|
||||||
|
import toast from 'react-hot-toast'
|
||||||
|
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||||
|
import * as Form from '@radix-ui/react-form'
|
||||||
|
import FormLayout, {
|
||||||
|
FormField,
|
||||||
|
FormLabelAndMessage,
|
||||||
|
Input,
|
||||||
|
Textarea,
|
||||||
|
} from '@components/Objects/StyledElements/Form/Form'
|
||||||
|
import { useFormik } from 'formik'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
|
||||||
|
dayjs.extend(relativeTime)
|
||||||
|
|
||||||
|
interface Author {
|
||||||
|
user: {
|
||||||
|
id: string
|
||||||
|
user_uuid: string
|
||||||
|
avatar_image: string
|
||||||
|
first_name: string
|
||||||
|
last_name: string
|
||||||
|
username: string
|
||||||
|
}
|
||||||
|
authorship: 'CREATOR' | 'CONTRIBUTOR' | 'MAINTAINER' | 'REPORTER'
|
||||||
|
authorship_status: 'ACTIVE' | 'INACTIVE' | 'PENDING'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CourseAuthorsProps {
|
||||||
|
authors: Author[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const MultipleAuthors = ({ authors, isMobile }: { authors: Author[], isMobile: boolean }) => {
|
||||||
|
const displayedAvatars = authors.slice(0, 3)
|
||||||
|
const displayedNames = authors.slice(0, 2)
|
||||||
|
const remainingCount = Math.max(0, authors.length - 3)
|
||||||
|
|
||||||
|
// Consistent sizes for both avatars and badge
|
||||||
|
const avatarSize = isMobile ? 72 : 86
|
||||||
|
const borderSize = "border-4"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center space-y-4 px-2 py-2">
|
||||||
|
<div className="text-[12px] text-neutral-400 font-semibold self-start">Authors & Updates </div>
|
||||||
|
|
||||||
|
{/* Avatars row */}
|
||||||
|
<div className="flex justify-center -space-x-6 relative">
|
||||||
|
{displayedAvatars.map((author, index) => (
|
||||||
|
<div
|
||||||
|
key={author.user.user_uuid}
|
||||||
|
className="relative"
|
||||||
|
style={{ zIndex: displayedAvatars.length - index }}
|
||||||
|
>
|
||||||
|
<div className="ring-white">
|
||||||
|
<UserAvatar
|
||||||
|
border={borderSize}
|
||||||
|
rounded='rounded-full'
|
||||||
|
avatar_url={author.user.avatar_image ? getUserAvatarMediaDirectory(author.user.user_uuid, author.user.avatar_image) : ''}
|
||||||
|
predefined_avatar={author.user.avatar_image ? undefined : 'empty'}
|
||||||
|
width={avatarSize}
|
||||||
|
showProfilePopup={true}
|
||||||
|
userId={author.user.id}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{remainingCount > 0 && (
|
||||||
|
<div
|
||||||
|
className="relative"
|
||||||
|
style={{ zIndex: 0 }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="flex items-center justify-center bg-neutral-100 text-neutral-600 font-medium rounded-full border-4 border-white shadow-sm"
|
||||||
|
style={{
|
||||||
|
width: `${avatarSize}px`,
|
||||||
|
height: `${avatarSize}px`,
|
||||||
|
fontSize: isMobile ? '14px' : '16px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
+{remainingCount}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Names row - improved display logic */}
|
||||||
|
<div className="text-center mt-2">
|
||||||
|
<div className="text-sm font-medium text-neutral-800">
|
||||||
|
{authors.length === 1 ? (
|
||||||
|
<span>
|
||||||
|
{authors[0].user.first_name && authors[0].user.last_name
|
||||||
|
? `${authors[0].user.first_name} ${authors[0].user.last_name}`
|
||||||
|
: `@${authors[0].user.username}`}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{displayedNames.map((author, index) => (
|
||||||
|
<span key={author.user.user_uuid}>
|
||||||
|
{author.user.first_name && author.user.last_name
|
||||||
|
? `${author.user.first_name} ${author.user.last_name}`
|
||||||
|
: `@${author.user.username}`}
|
||||||
|
{index === 0 && authors.length > 1 && index < displayedNames.length - 1 && " & "}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{authors.length > 2 && (
|
||||||
|
<span className="text-neutral-500 ml-1">
|
||||||
|
& {authors.length - 2} more
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-neutral-500 mt-0.5">
|
||||||
|
{authors.length === 1 ? (
|
||||||
|
<span>@{authors[0].user.username}</span>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{displayedNames.map((author, index) => (
|
||||||
|
<span key={author.user.user_uuid}>
|
||||||
|
@{author.user.username}
|
||||||
|
{index === 0 && authors.length > 1 && index < displayedNames.length - 1 && " & "}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const UpdatesSection = () => {
|
||||||
|
const [selectedView, setSelectedView] = React.useState('list')
|
||||||
|
const adminStatus = useAdminStatus()
|
||||||
|
const course = useCourse() as any
|
||||||
|
const session = useLHSession() as any
|
||||||
|
const access_token = session?.data?.tokens?.access_token
|
||||||
|
const { data: updates } = useSWR(
|
||||||
|
`${getAPIUrl()}courses/${course?.courseStructure.course_uuid}/updates`,
|
||||||
|
(url) => swrFetcher(url, access_token)
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mt-2 pt-2">
|
||||||
|
<div className="flex justify-between items-center mb-4">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Rss size={14} className="text-neutral-400" />
|
||||||
|
<span className="text-sm font-semibold text-neutral-600">Course Updates</span>
|
||||||
|
</div>
|
||||||
|
{updates && updates.length > 0 && (
|
||||||
|
<span className="px-2 py-0.5 text-[11px] font-medium bg-neutral-100 text-neutral-500 rounded-full">
|
||||||
|
{updates.length} {updates.length === 1 ? 'update' : 'updates'}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{adminStatus.isAdmin && (
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedView(selectedView === 'new' ? 'list' : 'new')}
|
||||||
|
className={`
|
||||||
|
inline-flex items-center space-x-1.5 px-2.5 py-1 rounded-full text-xs font-medium
|
||||||
|
transition-colors duration-150
|
||||||
|
${selectedView === 'new'
|
||||||
|
? 'bg-neutral-200 text-neutral-700 hover:bg-neutral-300'
|
||||||
|
: 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<PencilLine size={12} />
|
||||||
|
<span>{selectedView === 'new' ? 'Cancel' : 'New Update'}</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
className="relative"
|
||||||
|
>
|
||||||
|
<div className="max-h-[300px] overflow-y-auto pr-1 -mr-1">
|
||||||
|
{selectedView === 'list' ? (
|
||||||
|
<UpdatesListView />
|
||||||
|
) : (
|
||||||
|
<NewUpdateForm setSelectedView={setSelectedView} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const NewUpdateForm = ({ setSelectedView }: { setSelectedView: (view: string) => void }) => {
|
||||||
|
const org = useOrg() as any
|
||||||
|
const course = useCourse() as any
|
||||||
|
const session = useLHSession() as any
|
||||||
|
|
||||||
|
const formik = useFormik({
|
||||||
|
initialValues: {
|
||||||
|
title: '',
|
||||||
|
content: ''
|
||||||
|
},
|
||||||
|
validate: (values) => {
|
||||||
|
const errors: any = {}
|
||||||
|
if (!values.title) errors.title = 'Title is required'
|
||||||
|
if (!values.content) errors.content = 'Content is required'
|
||||||
|
return errors
|
||||||
|
},
|
||||||
|
onSubmit: async (values) => {
|
||||||
|
const body = {
|
||||||
|
title: values.title,
|
||||||
|
content: values.content,
|
||||||
|
course_uuid: course.courseStructure.course_uuid,
|
||||||
|
org_id: org.id
|
||||||
|
}
|
||||||
|
const res = await createCourseUpdate(body, session.data?.tokens?.access_token)
|
||||||
|
if (res.status === 200) {
|
||||||
|
toast.success('Update added successfully')
|
||||||
|
setSelectedView('list')
|
||||||
|
mutate(`${getAPIUrl()}courses/${course?.courseStructure.course_uuid}/updates`)
|
||||||
|
} else {
|
||||||
|
toast.error('Failed to add update')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<FormLayout onSubmit={formik.handleSubmit} className="space-y-4">
|
||||||
|
<FormField name="title">
|
||||||
|
<FormLabelAndMessage
|
||||||
|
label="Update Title"
|
||||||
|
message={formik.errors.title}
|
||||||
|
/>
|
||||||
|
<Form.Control asChild>
|
||||||
|
<Input
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
value={formik.values.title}
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
placeholder="What's new in this update?"
|
||||||
|
className="bg-white border-neutral-200 focus:border-neutral-300 focus:ring-neutral-200"
|
||||||
|
/>
|
||||||
|
</Form.Control>
|
||||||
|
</FormField>
|
||||||
|
<FormField name="content">
|
||||||
|
<FormLabelAndMessage
|
||||||
|
label="Update Content"
|
||||||
|
message={formik.errors.content}
|
||||||
|
/>
|
||||||
|
<Form.Control asChild>
|
||||||
|
<Textarea
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
value={formik.values.content}
|
||||||
|
required
|
||||||
|
placeholder="Share the details of your update..."
|
||||||
|
className="bg-white h-[120px] border-neutral-200 focus:border-neutral-300 focus:ring-neutral-200 resize-none"
|
||||||
|
/>
|
||||||
|
</Form.Control>
|
||||||
|
</FormField>
|
||||||
|
<div className="flex justify-end space-x-2 pt-2">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="px-4 py-1.5 bg-neutral-900 hover:bg-black text-white text-xs font-medium rounded-full transition-colors duration-150"
|
||||||
|
>
|
||||||
|
Publish Update
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</FormLayout>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const UpdatesListView = () => {
|
||||||
|
const course = useCourse() as any
|
||||||
|
const adminStatus = useAdminStatus()
|
||||||
|
const session = useLHSession() as any
|
||||||
|
const access_token = session?.data?.tokens?.access_token
|
||||||
|
const { data: updates } = useSWR(
|
||||||
|
`${getAPIUrl()}courses/${course?.courseStructure?.course_uuid}/updates`,
|
||||||
|
(url) => swrFetcher(url, access_token)
|
||||||
|
)
|
||||||
|
|
||||||
|
if (!updates || updates.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-center py-8 px-4 text-center bg-neutral-50/50 rounded-lg border border-dashed border-neutral-200">
|
||||||
|
<TentTree size={28} className="text-neutral-400 mb-2" />
|
||||||
|
<p className="text-sm text-neutral-600 font-medium">No updates yet</p>
|
||||||
|
<p className="text-xs text-neutral-400 mt-1">Updates about this course will appear here</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{updates.map((update: any) => (
|
||||||
|
<motion.div
|
||||||
|
key={update.id}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
className="group p-3 rounded-lg bg-neutral-50/50 hover:bg-neutral-100/80 transition-colors duration-150"
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="space-y-1 min-w-0 flex-1">
|
||||||
|
<div className="flex items-baseline space-x-2">
|
||||||
|
<h4 className="text-sm font-medium text-neutral-800 truncate">{update.title}</h4>
|
||||||
|
<span
|
||||||
|
title={dayjs(update.creation_date).format('MMMM D, YYYY')}
|
||||||
|
className="text-[11px] font-medium text-neutral-400 whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{dayjs(update.creation_date).fromNow()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-neutral-600 line-clamp-3">{update.content}</p>
|
||||||
|
</div>
|
||||||
|
{adminStatus.isAdmin && !adminStatus.loading && (
|
||||||
|
<div className="ml-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||||
|
<DeleteUpdateButton update={update} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const DeleteUpdateButton = ({ update }: any) => {
|
||||||
|
const session = useLHSession() as any
|
||||||
|
const course = useCourse() as any
|
||||||
|
|
||||||
|
const handleDelete = async () => {
|
||||||
|
const toast_loading = toast.loading('Deleting update...')
|
||||||
|
const res = await deleteCourseUpdate(
|
||||||
|
course.courseStructure.course_uuid,
|
||||||
|
update.courseupdate_uuid,
|
||||||
|
session.data?.tokens?.access_token
|
||||||
|
)
|
||||||
|
|
||||||
|
if (res.status === 200) {
|
||||||
|
toast.dismiss(toast_loading)
|
||||||
|
toast.success('Update deleted successfully')
|
||||||
|
mutate(`${getAPIUrl()}courses/${course?.courseStructure.course_uuid}/updates`)
|
||||||
|
} else {
|
||||||
|
toast.error('Failed to delete update')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ConfirmationModal
|
||||||
|
confirmationButtonText="Delete Update"
|
||||||
|
confirmationMessage="Are you sure you want to delete this update?"
|
||||||
|
dialogTitle="Delete Update?"
|
||||||
|
buttonid="delete-update-button"
|
||||||
|
dialogTrigger={
|
||||||
|
<button
|
||||||
|
id="delete-update-button"
|
||||||
|
className="p-1.5 text-neutral-400 hover:text-rose-500 rounded-full hover:bg-rose-50 transition-all duration-150"
|
||||||
|
>
|
||||||
|
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
functionToExecute={handleDelete}
|
||||||
|
status="warning"
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const CourseAuthors = ({ authors }: CourseAuthorsProps) => {
|
||||||
|
const isMobile = useMediaQuery('(max-width: 768px)')
|
||||||
|
|
||||||
|
// Filter active authors and sort by role priority
|
||||||
|
const sortedAuthors = [...authors]
|
||||||
|
.filter(author => author.authorship_status === 'ACTIVE')
|
||||||
|
.sort((a, b) => {
|
||||||
|
const rolePriority: Record<string, number> = {
|
||||||
|
'CREATOR': 0,
|
||||||
|
'MAINTAINER': 1,
|
||||||
|
'CONTRIBUTOR': 2,
|
||||||
|
'REPORTER': 3
|
||||||
|
};
|
||||||
|
return rolePriority[a.authorship] - rolePriority[b.authorship];
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="antialiased">
|
||||||
|
<MultipleAuthors authors={sortedAuthors} isMobile={isMobile} />
|
||||||
|
<UpdatesSection />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CourseAuthors
|
||||||
|
|
@ -0,0 +1,122 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import { Check, Square, ArrowRight, Folder, FileText, Video, Layers, BookOpenCheck } from 'lucide-react'
|
||||||
|
import { getUriWithOrg } from '@services/config/config'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import Modal from '@components/Objects/StyledElements/Modal/Modal'
|
||||||
|
|
||||||
|
interface CourseProgressProps {
|
||||||
|
course: any
|
||||||
|
orgslug: string
|
||||||
|
isOpen: boolean
|
||||||
|
onClose: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const CourseProgress: React.FC<CourseProgressProps> = ({ course, orgslug, isOpen, onClose }) => {
|
||||||
|
const [completedActivities, setCompletedActivities] = useState(0)
|
||||||
|
const [totalActivities, setTotalActivities] = useState(0)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let total = 0
|
||||||
|
let completed = 0
|
||||||
|
|
||||||
|
course.chapters.forEach((chapter: any) => {
|
||||||
|
chapter.activities.forEach((activity: any) => {
|
||||||
|
total++
|
||||||
|
if (isActivityDone(activity)) {
|
||||||
|
completed++
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
setTotalActivities(total)
|
||||||
|
setCompletedActivities(completed)
|
||||||
|
}, [course])
|
||||||
|
|
||||||
|
const isActivityDone = (activity: any) => {
|
||||||
|
const run = course?.trail?.runs?.find(
|
||||||
|
(run: any) => run.course_id === course.id
|
||||||
|
)
|
||||||
|
if (run) {
|
||||||
|
return run.steps.find((step: any) => step.activity_id === activity.id)
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
const getActivityTypeIcon = (activityType: string) => {
|
||||||
|
switch (activityType) {
|
||||||
|
case 'TYPE_VIDEO':
|
||||||
|
return <Video size={16} className="text-gray-400" />
|
||||||
|
case 'TYPE_DOCUMENT':
|
||||||
|
return <FileText size={16} className="text-gray-400" />
|
||||||
|
case 'TYPE_DYNAMIC':
|
||||||
|
return <Layers size={16} className="text-gray-400" />
|
||||||
|
case 'TYPE_ASSIGNMENT':
|
||||||
|
return <BookOpenCheck size={16} className="text-gray-400" />
|
||||||
|
default:
|
||||||
|
return <FileText size={16} className="text-gray-400" />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const progressPercentage = totalActivities > 0 ? (completedActivities / totalActivities) * 100 : 0
|
||||||
|
const radius = 40
|
||||||
|
const circumference = 2 * Math.PI * radius
|
||||||
|
const strokeDashoffset = circumference - (progressPercentage / 100) * circumference
|
||||||
|
|
||||||
|
const dialogContent = (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{course.chapters.map((chapter: any) => (
|
||||||
|
<div key={chapter.chapter_uuid} className="bg-gray-50 rounded-lg overflow-hidden">
|
||||||
|
<div className="px-4 py-3 bg-gray-100 font-semibold text-gray-700 flex items-center space-x-2">
|
||||||
|
<Folder size={16} className="text-gray-400" />
|
||||||
|
<span>{chapter.name}</span>
|
||||||
|
</div>
|
||||||
|
<div className="divide-y divide-gray-100">
|
||||||
|
{chapter.activities.map((activity: any) => {
|
||||||
|
const activityId = activity.activity_uuid.replace('activity_', '')
|
||||||
|
const courseId = course.course_uuid.replace('course_', '')
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={activity.activity_uuid}
|
||||||
|
href={getUriWithOrg(orgslug, '') + `/course/${courseId}/activity/${activityId}`}
|
||||||
|
>
|
||||||
|
<div className="px-4 py-3 hover:bg-gray-100 transition-colors flex items-center group">
|
||||||
|
<div className="flex items-center space-x-3 flex-1">
|
||||||
|
{isActivityDone(activity) ? (
|
||||||
|
<div className="relative">
|
||||||
|
<Square size={18} className="stroke-[2] text-teal-600" />
|
||||||
|
<Check size={18} className="stroke-[2.5] text-teal-600 absolute top-0 left-0" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Square size={18} className="stroke-[2] text-gray-300" />
|
||||||
|
)}
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
{getActivityTypeIcon(activity.activity_type)}
|
||||||
|
<span className="text-gray-700 group-hover:text-gray-900">
|
||||||
|
{activity.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ArrowRight size={16} className="text-gray-400 group-hover:text-gray-600" />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
isDialogOpen={isOpen}
|
||||||
|
onOpenChange={onClose}
|
||||||
|
dialogContent={dialogContent}
|
||||||
|
dialogTitle="Course Progress"
|
||||||
|
dialogDescription={`${completedActivities} of ${totalActivities} activities completed`}
|
||||||
|
minWidth="md"
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CourseProgress
|
||||||
|
|
@ -4,11 +4,19 @@ import { styled } from '@stitches/react'
|
||||||
import { blackA } from '@radix-ui/colors'
|
import { blackA } from '@radix-ui/colors'
|
||||||
import { Info } from 'lucide-react'
|
import { Info } from 'lucide-react'
|
||||||
|
|
||||||
const FormLayout: React.FC<{ children: React.ReactNode; onSubmit: (e: any) => void }> = (props) => (
|
interface FormLayoutProps {
|
||||||
<FormRoot className="h-fit" onSubmit={props.onSubmit}>
|
children: React.ReactNode
|
||||||
{props.children}
|
onSubmit: (e: any) => void
|
||||||
</FormRoot>
|
className?: string
|
||||||
)
|
}
|
||||||
|
|
||||||
|
const FormLayout = ({ children, onSubmit, className }: FormLayoutProps) => {
|
||||||
|
return (
|
||||||
|
<Form.Root onSubmit={onSubmit} className={className}>
|
||||||
|
{children}
|
||||||
|
</Form.Root>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
export const FormLabelAndMessage = (props: {
|
export const FormLabelAndMessage = (props: {
|
||||||
label: string
|
label: string
|
||||||
|
|
|
||||||
|
|
@ -84,15 +84,15 @@ function ActivityIndicators(props: Props) {
|
||||||
const getActivityTypeBadgeColor = (activityType: string) => {
|
const getActivityTypeBadgeColor = (activityType: string) => {
|
||||||
switch (activityType) {
|
switch (activityType) {
|
||||||
case 'TYPE_VIDEO':
|
case 'TYPE_VIDEO':
|
||||||
return 'bg-blue-50 text-blue-600 font-bold'
|
return 'bg-gray-100 text-gray-700 font-bold'
|
||||||
case 'TYPE_DOCUMENT':
|
case 'TYPE_DOCUMENT':
|
||||||
return 'bg-orange-50 text-orange-600 font-bold'
|
return 'bg-gray-100 text-gray-700 font-bold'
|
||||||
case 'TYPE_DYNAMIC':
|
case 'TYPE_DYNAMIC':
|
||||||
return 'bg-purple-50 text-purple-600 font-bold'
|
return 'bg-gray-100 text-gray-700 font-bold'
|
||||||
case 'TYPE_ASSIGNMENT':
|
case 'TYPE_ASSIGNMENT':
|
||||||
return 'bg-green-50 text-green-600 font-bold'
|
return 'bg-gray-100 text-gray-700 font-bold'
|
||||||
default:
|
default:
|
||||||
return 'bg-gray-50 text-gray-600 font-bold'
|
return 'bg-gray-100 text-gray-700 font-bold'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue