mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: improve activity indicators UI + remove all course progress
This commit is contained in:
swve
parent
59bae82ee7
commit
1dd100352b
3 changed files with 157 additions and 41 deletions
|
|
@ -274,7 +274,7 @@ function ActivityClient(props: ActivityClientProps) {
|
|||
for (let j = 0; j < chapter.activities.length; j++) {
|
||||
let activity = chapter.activities[j]
|
||||
if (activity.id === activity_id) {
|
||||
return chapter.name
|
||||
return `Chapter ${i + 1} : ${chapter.name}`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -570,7 +570,7 @@ function ActivityClient(props: ActivityClientProps) {
|
|||
<div className="flex flex-1/3 items-center space-x-3">
|
||||
<div className="flex flex-col -space-y-1">
|
||||
<p className="font-bold text-gray-700 text-md">
|
||||
Chapter : {getChapterNameByActivityId(course, activity.id)}
|
||||
{getChapterNameByActivityId(course, activity.id)}
|
||||
</p>
|
||||
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase">
|
||||
{activity.name}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,11 @@ import TypeOfContentTitle from '@components/Objects/StyledElements/Titles/TypeOf
|
|||
import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
|
||||
import { getAPIUrl } from '@services/config/config'
|
||||
import { swrFetcher } from '@services/utils/ts/requests'
|
||||
import React, { useEffect } from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import { removeCourse } from '@services/courses/activity'
|
||||
import { revalidateTags } from '@services/utils/ts/requests'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
function Trail(params: any) {
|
||||
let orgslug = params.orgslug
|
||||
|
|
@ -16,28 +19,73 @@ function Trail(params: any) {
|
|||
const access_token = session?.data?.tokens?.access_token;
|
||||
const org = useOrg() as any
|
||||
const orgID = org?.id
|
||||
const { data: trail, error: error } = useSWR(
|
||||
const router = useRouter()
|
||||
const [isQuittingAll, setIsQuittingAll] = useState(false)
|
||||
const [quittingProgress, setQuittingProgress] = useState(0)
|
||||
|
||||
const { data: trail, error: error, mutate } = useSWR(
|
||||
`${getAPIUrl()}trail/org/${orgID}/trail`,
|
||||
(url) => swrFetcher(url, access_token)
|
||||
)
|
||||
|
||||
const handleQuitAllCourses = async () => {
|
||||
if (!trail?.runs?.length || isQuittingAll) return;
|
||||
|
||||
setIsQuittingAll(true)
|
||||
const totalCourses = trail.runs.length;
|
||||
|
||||
try {
|
||||
for (let i = 0; i < trail.runs.length; i++) {
|
||||
const run = trail.runs[i];
|
||||
await removeCourse(run.course.course_uuid, orgslug, access_token);
|
||||
setQuittingProgress(Math.round(((i + 1) / totalCourses) * 100));
|
||||
}
|
||||
|
||||
await revalidateTags(['courses'], orgslug);
|
||||
router.refresh();
|
||||
await mutate();
|
||||
} catch (error) {
|
||||
console.error('Error quitting courses:', error);
|
||||
} finally {
|
||||
setIsQuittingAll(false)
|
||||
setQuittingProgress(0)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { }, [trail, org])
|
||||
|
||||
return (
|
||||
<GeneralWrapperStyled>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<TypeOfContentTitle title="Trail" type="tra" />
|
||||
{trail?.runs?.length > 0 && (
|
||||
<button
|
||||
onClick={handleQuitAllCourses}
|
||||
disabled={isQuittingAll}
|
||||
className={`px-4 py-2 rounded-lg font-medium text-sm transition-all
|
||||
${isQuittingAll
|
||||
? 'bg-gray-100 text-gray-500 cursor-not-allowed'
|
||||
: 'bg-red-100 text-red-700 hover:bg-red-200'
|
||||
}`}
|
||||
>
|
||||
{isQuittingAll
|
||||
? `Quitting Courses (${quittingProgress}%)`
|
||||
: 'Quit All Courses'
|
||||
}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{!trail ? (
|
||||
<PageLoading></PageLoading>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{trail.runs.map((run: any) => (
|
||||
<>
|
||||
<TrailCourseElement
|
||||
key={run.course.course_uuid}
|
||||
run={run}
|
||||
course={run.course}
|
||||
orgslug={orgslug}
|
||||
/>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -97,6 +97,33 @@ const ActivityTooltipContent = memo(({
|
|||
|
||||
ActivityTooltipContent.displayName = 'ActivityTooltipContent';
|
||||
|
||||
// Add new memoized component for chapter tooltip
|
||||
const ChapterTooltipContent = memo(({
|
||||
chapter,
|
||||
chapterNumber,
|
||||
totalActivities,
|
||||
completedActivities
|
||||
}: {
|
||||
chapter: any,
|
||||
chapterNumber: number,
|
||||
totalActivities: number,
|
||||
completedActivities: number
|
||||
}) => (
|
||||
<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">
|
||||
<span className="text-sm font-medium text-gray-900">Chapter {chapterNumber}</span>
|
||||
<span className="text-xs bg-gray-100 px-2 py-0.5 rounded-full text-gray-600">
|
||||
{completedActivities}/{totalActivities} completed
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<span className="text-sm text-gray-700">{chapter.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
|
||||
ChapterTooltipContent.displayName = 'ChapterTooltipContent';
|
||||
|
||||
function ActivityIndicators(props: Props) {
|
||||
const course = props.course
|
||||
const orgslug = props.orgslug
|
||||
|
|
@ -167,6 +194,7 @@ function ActivityIndicators(props: Props) {
|
|||
return `${black_activity_style}`
|
||||
}, [isActivityDone, isActivityCurrent]);
|
||||
|
||||
// Keep the allActivities array for navigation purposes only
|
||||
const navigateToPrevious = () => {
|
||||
if (currentActivityIndex > 0) {
|
||||
const prevActivity = allActivities[currentActivityIndex - 1]
|
||||
|
|
@ -183,6 +211,13 @@ function ActivityIndicators(props: Props) {
|
|||
}
|
||||
}
|
||||
|
||||
// Add function to count completed activities in a chapter
|
||||
const getChapterProgress = useMemo(() => (chapterActivities: any[]) => {
|
||||
return chapterActivities.reduce((acc, activity) => {
|
||||
return acc + (isActivityDone(activity) ? 1 : 0)
|
||||
}, 0)
|
||||
}, [isActivityDone]);
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-4">
|
||||
{enableNavigation && (
|
||||
|
|
@ -197,7 +232,36 @@ function ActivityIndicators(props: Props) {
|
|||
)}
|
||||
|
||||
<div className="flex items-center w-full">
|
||||
{allActivities.map((activity: any) => {
|
||||
{course.chapters.map((chapter: any, chapterIndex: number) => {
|
||||
const completedActivities = getChapterProgress(chapter.activities);
|
||||
const isChapterComplete = completedActivities === chapter.activities.length;
|
||||
|
||||
return (
|
||||
<React.Fragment key={chapter.id}>
|
||||
<ToolTip
|
||||
sideOffset={8}
|
||||
unstyled
|
||||
content={
|
||||
<ChapterTooltipContent
|
||||
chapter={chapter}
|
||||
chapterNumber={chapterIndex + 1}
|
||||
totalActivities={chapter.activities.length}
|
||||
completedActivities={completedActivities}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div className="mx-2 h-[20px] flex items-center cursor-help">
|
||||
<div className={`w-[20px] h-[20px] rounded-full flex items-center justify-center text-xs font-medium transition-colors ${
|
||||
isChapterComplete
|
||||
? 'bg-teal-600 text-white'
|
||||
: 'bg-gray-100 text-gray-600'
|
||||
}`}>
|
||||
{chapterIndex + 1}
|
||||
</div>
|
||||
</div>
|
||||
</ToolTip>
|
||||
<div className="flex-1 flex items-center">
|
||||
{chapter.activities.map((activity: any) => {
|
||||
const isDone = isActivityDone(activity)
|
||||
const isCurrent = isActivityCurrent(activity)
|
||||
return (
|
||||
|
|
@ -232,6 +296,10 @@ function ActivityIndicators(props: Props) {
|
|||
)
|
||||
})}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{enableNavigation && (
|
||||
<button
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue