mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: enhance activity completion handling and tooltip functionality
This commit is contained in:
swve
parent
bbe6f9e2c5
commit
ca12e799df
4 changed files with 121 additions and 20 deletions
|
|
@ -260,14 +260,26 @@ export function MarkStatus(props: {
|
|||
const router = useRouter()
|
||||
const session = useLHSession() as any;
|
||||
const isMobile = useMediaQuery('(max-width: 768px)')
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
|
||||
async function markActivityAsCompleteFront() {
|
||||
const trail = await markActivityAsComplete(
|
||||
props.orgslug,
|
||||
props.course.course_uuid,
|
||||
props.activity.activity_uuid,
|
||||
session.data?.tokens?.access_token
|
||||
)
|
||||
router.refresh()
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const trail = await markActivityAsComplete(
|
||||
props.orgslug,
|
||||
props.course.course_uuid,
|
||||
props.activity.activity_uuid,
|
||||
session.data?.tokens?.access_token
|
||||
);
|
||||
|
||||
// Mutate the course data to trigger re-render
|
||||
await mutate(`${getAPIUrl()}courses/${props.course.course_uuid}/meta`);
|
||||
router.refresh();
|
||||
} catch (error) {
|
||||
toast.error('Failed to mark activity as complete');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
const isActivityCompleted = () => {
|
||||
|
|
@ -284,7 +296,7 @@ export function MarkStatus(props: {
|
|||
return (
|
||||
<>
|
||||
{isActivityCompleted() ? (
|
||||
<div className="bg-teal-600 rounded-full px-5 drop-shadow-md flex items-center space-x-2 p-2.5 text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out">
|
||||
<div className="bg-teal-600 rounded-full px-5 drop-shadow-md flex items-center space-x-2 p-2.5 text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out">
|
||||
<i>
|
||||
<Check size={17}></Check>
|
||||
</i>{' '}
|
||||
|
|
@ -292,14 +304,22 @@ export function MarkStatus(props: {
|
|||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="bg-gray-800 rounded-full px-5 drop-shadow-md flex items-center space-x-2 p-2.5 text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out"
|
||||
onClick={markActivityAsCompleteFront}
|
||||
className={`${isLoading ? 'opacity-75 cursor-not-allowed' : ''} bg-gray-800 rounded-full px-5 drop-shadow-md flex items-center space-x-2 p-2.5 text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out`}
|
||||
onClick={!isLoading ? markActivityAsCompleteFront : undefined}
|
||||
>
|
||||
{' '}
|
||||
<i>
|
||||
<Check size={17}></Check>
|
||||
</i>{' '}
|
||||
{!isMobile && <i className="not-italic text-xs font-bold">Mark as complete</i>}
|
||||
{isLoading ? (
|
||||
<div className="animate-spin">
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
) : (
|
||||
<i>
|
||||
<Check size={17}></Check>
|
||||
</i>
|
||||
)}{' '}
|
||||
{!isMobile && <i className="not-italic text-xs font-bold">{isLoading ? 'Marking...' : 'Mark as complete'}</i>}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ type Session = {
|
|||
async function fetchCourseMetadata(courseuuid: string, access_token: string | null | undefined) {
|
||||
return await getCourseMetadata(
|
||||
courseuuid,
|
||||
{ revalidate: 1800, tags: ['courses'] },
|
||||
{ revalidate: 0, tags: ['courses'] },
|
||||
access_token || null
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ type TooltipProps = {
|
|||
children: React.ReactNode
|
||||
side?: 'top' | 'right' | 'bottom' | 'left' // default is bottom
|
||||
slateBlack?: boolean
|
||||
unstyled?: boolean // new prop to remove default styling
|
||||
}
|
||||
|
||||
const ToolTip = (props: TooltipProps) => {
|
||||
|
|
@ -19,6 +20,7 @@ const ToolTip = (props: TooltipProps) => {
|
|||
<Tooltip.Portal>
|
||||
<TooltipContent
|
||||
slateBlack={props.slateBlack}
|
||||
unstyled={props.unstyled}
|
||||
side={props.side ? props.side : 'bottom'}
|
||||
sideOffset={props.sideOffset}
|
||||
>
|
||||
|
|
@ -63,6 +65,17 @@ const TooltipContent = styled(Tooltip.Content, {
|
|||
color: 'white',
|
||||
},
|
||||
},
|
||||
unstyled: {
|
||||
true: {
|
||||
padding: 0,
|
||||
backgroundColor: 'transparent',
|
||||
boxShadow: 'none',
|
||||
borderRadius: 0,
|
||||
fontSize: 'inherit',
|
||||
lineHeight: 'inherit',
|
||||
color: 'inherit',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
borderRadius: 4,
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
|
|||
import { getUriWithOrg } from '@services/config/config'
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
import { Video, FileText, Layers, BookOpenCheck, Check } from 'lucide-react'
|
||||
|
||||
interface Props {
|
||||
course: any
|
||||
|
|
@ -16,7 +17,7 @@ function ActivityIndicators(props: Props) {
|
|||
const courseid = props.course_uuid.replace('course_', '')
|
||||
|
||||
const done_activity_style = 'bg-teal-600 hover:bg-teal-700'
|
||||
const black_activity_style = 'bg-black hover:bg-gray-700'
|
||||
const black_activity_style = 'bg-zinc-300 hover:bg-zinc-400'
|
||||
const current_activity_style = 'bg-gray-600 animate-pulse hover:bg-gray-700'
|
||||
|
||||
const trail = props.course.trail
|
||||
|
|
@ -50,6 +51,51 @@ function ActivityIndicators(props: Props) {
|
|||
return black_activity_style
|
||||
}
|
||||
|
||||
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 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-blue-50 text-blue-600 font-bold'
|
||||
case 'TYPE_DOCUMENT':
|
||||
return 'bg-orange-50 text-orange-600 font-bold'
|
||||
case 'TYPE_DYNAMIC':
|
||||
return 'bg-purple-50 text-purple-600 font-bold'
|
||||
case 'TYPE_ASSIGNMENT':
|
||||
return 'bg-green-50 text-green-600 font-bold'
|
||||
default:
|
||||
return 'bg-gray-50 text-gray-600 font-bold'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-flow-col justify-stretch space-x-6">
|
||||
{course.chapters.map((chapter: any) => {
|
||||
|
|
@ -57,11 +103,33 @@ function ActivityIndicators(props: Props) {
|
|||
<React.Fragment key={chapter.id || `chapter-${chapter.name}`}>
|
||||
<div className="grid grid-flow-col justify-stretch space-x-2">
|
||||
{chapter.activities.map((activity: any) => {
|
||||
const isDone = isActivityDone(activity)
|
||||
const isCurrent = isActivityCurrent(activity)
|
||||
return (
|
||||
<ToolTip
|
||||
sideOffset={8}
|
||||
slateBlack
|
||||
content={activity.name}
|
||||
unstyled
|
||||
content={
|
||||
<div className="bg-white rounded-lg nice-shadow py-3 px-4 min-w-[200px] animate-in fade-in duration-200">
|
||||
<div className="flex items-center gap-2">
|
||||
{getActivityTypeIcon(activity.activity_type)}
|
||||
<span className="text-sm text-gray-700">{activity.name}</span>
|
||||
{isDone && (
|
||||
<span className="ml-auto text-gray-400">
|
||||
<Check size={14} />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full ${getActivityTypeBadgeColor(activity.activity_type)}`}>
|
||||
{getActivityTypeLabel(activity.activity_type)}
|
||||
</span>
|
||||
<span className="text-xs text-gray-400">
|
||||
{isCurrent ? 'Current Activity' : isDone ? 'Completed' : 'Not Started'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
key={activity.activity_uuid}
|
||||
>
|
||||
<Link
|
||||
|
|
@ -77,7 +145,7 @@ function ActivityIndicators(props: Props) {
|
|||
<div
|
||||
className={`h-[7px] w-auto ${getActivityClass(
|
||||
activity
|
||||
)} rounded-lg shadow-md`}
|
||||
)} rounded-lg`}
|
||||
></div>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue