mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: redesign the mark as done button + add info tooltips
This commit is contained in:
swve
parent
1fc791473e
commit
231b08921a
2 changed files with 165 additions and 46 deletions
|
|
@ -35,6 +35,8 @@ import FixedActivitySecondaryBar from '@components/Pages/Activity/FixedActivityS
|
|||
import CourseEndView from '@components/Pages/Activity/CourseEndView'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import ActivityBreadcrumbs from '@components/Pages/Activity/ActivityBreadcrumbs'
|
||||
import MiniInfoTooltip from '@components/Objects/MiniInfoTooltip'
|
||||
|
||||
|
||||
interface ActivityClientProps {
|
||||
activityid: string
|
||||
|
|
@ -601,7 +603,12 @@ function ActivityClient(props: ActivityClientProps) {
|
|||
|
||||
{/* Activity Actions below the content box */}
|
||||
{activity && activity.published == true && activity.content.paid_access != false && (
|
||||
<div className="flex justify-end mt-4">
|
||||
<div className="flex justify-between items-center mt-4">
|
||||
<PreviousActivityButton
|
||||
course={course}
|
||||
currentActivityId={activity.id}
|
||||
orgslug={orgslug}
|
||||
/>
|
||||
<ActivityActions
|
||||
activity={activity}
|
||||
activityid={activityid}
|
||||
|
|
@ -644,6 +651,51 @@ export function MarkStatus(props: {
|
|||
const session = useLHSession() as any;
|
||||
const isMobile = useMediaQuery('(max-width: 768px)')
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
const [showMarkedTooltip, setShowMarkedTooltip] = React.useState(false);
|
||||
const [showUnmarkedTooltip, setShowUnmarkedTooltip] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const markedTooltipCount = localStorage.getItem('activity_marked_tooltip_count');
|
||||
const unmarkedTooltipCount = localStorage.getItem('activity_unmarked_tooltip_count');
|
||||
|
||||
if (!markedTooltipCount || parseInt(markedTooltipCount) < 3) {
|
||||
setShowMarkedTooltip(true);
|
||||
}
|
||||
if (!unmarkedTooltipCount || parseInt(unmarkedTooltipCount) < 3) {
|
||||
setShowUnmarkedTooltip(true);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleMarkedTooltipClose = () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('activity_marked_tooltip_count', '3');
|
||||
setShowMarkedTooltip(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUnmarkedTooltipClose = () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('activity_unmarked_tooltip_count', '3');
|
||||
setShowUnmarkedTooltip(false);
|
||||
}
|
||||
};
|
||||
|
||||
const infoIcon = (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 16v-4" />
|
||||
<path d="M12 8h.01" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const areAllActivitiesCompleted = () => {
|
||||
const run = props.course.trail.runs.find(
|
||||
|
|
@ -654,7 +706,6 @@ export function MarkStatus(props: {
|
|||
let totalActivities = 0;
|
||||
let completedActivities = 0;
|
||||
|
||||
// Count all activities and completed activities
|
||||
props.course.chapters.forEach((chapter: any) => {
|
||||
chapter.activities.forEach((activity: any) => {
|
||||
totalActivities++;
|
||||
|
|
@ -667,21 +718,12 @@ export function MarkStatus(props: {
|
|||
});
|
||||
});
|
||||
|
||||
console.log('Total activities:', totalActivities);
|
||||
console.log('Completed activities:', completedActivities);
|
||||
console.log('All completed?', completedActivities >= totalActivities - 1);
|
||||
|
||||
// We check for totalActivities - 1 because the current activity completion
|
||||
// hasn't been counted yet (it's in progress)
|
||||
return completedActivities >= totalActivities - 1;
|
||||
};
|
||||
|
||||
async function markActivityAsCompleteFront() {
|
||||
try {
|
||||
// Check if this will be the last activity to complete
|
||||
const willCompleteAll = areAllActivitiesCompleted();
|
||||
console.log('Will complete all?', willCompleteAll);
|
||||
|
||||
setIsLoading(true);
|
||||
await markActivityAsComplete(
|
||||
props.orgslug,
|
||||
|
|
@ -690,11 +732,9 @@ export function MarkStatus(props: {
|
|||
session.data?.tokens?.access_token
|
||||
);
|
||||
|
||||
// Mutate the course data
|
||||
await mutate(`${getAPIUrl()}courses/${props.course.course_uuid}/meta`);
|
||||
|
||||
if (willCompleteAll) {
|
||||
console.log('Redirecting to end page...');
|
||||
const cleanCourseUuid = props.course.course_uuid.replace('course_', '');
|
||||
router.push(getUriWithOrg(props.orgslug, '') + `/course/${cleanCourseUuid}/activity/end`);
|
||||
} else {
|
||||
|
|
@ -711,14 +751,13 @@ export function MarkStatus(props: {
|
|||
async function unmarkActivityAsCompleteFront() {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const trail = await unmarkActivityAsComplete(
|
||||
await unmarkActivityAsComplete(
|
||||
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) {
|
||||
|
|
@ -743,24 +782,13 @@ export function MarkStatus(props: {
|
|||
<>
|
||||
{isActivityCompleted() ? (
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="bg-teal-600 rounded-full px-5 drop-shadow-md flex items-center space-x-2 p-2.5 text-white">
|
||||
<i>
|
||||
<Check size={17}></Check>
|
||||
</i>{' '}
|
||||
<i className="not-italic text-xs font-bold">Complete</i>
|
||||
</div>
|
||||
<ToolTip
|
||||
content="Unmark as complete"
|
||||
side="top"
|
||||
>
|
||||
<div className="relative">
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Unmark Activity"
|
||||
confirmationMessage="Are you sure you want to unmark this activity as complete? This will affect your course progress."
|
||||
dialogTitle="Unmark activity as complete"
|
||||
dialogTrigger={
|
||||
<div
|
||||
className={`${isLoading ? 'opacity-75 cursor-not-allowed' : ''} bg-red-400 rounded-full p-2 drop-shadow-md flex items-center 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-1 p-2.5 text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out">
|
||||
{isLoading ? (
|
||||
<div className="animate-spin">
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24">
|
||||
|
|
@ -769,19 +797,43 @@ export function MarkStatus(props: {
|
|||
</svg>
|
||||
</div>
|
||||
) : (
|
||||
<X size={17} />
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" />
|
||||
<path d="M7 12l3 3 7-7" />
|
||||
</svg>
|
||||
)}
|
||||
<span className="text-xs font-bold">Complete</span>
|
||||
</div>
|
||||
}
|
||||
functionToExecute={unmarkActivityAsCompleteFront}
|
||||
status="warning"
|
||||
/>
|
||||
</ToolTip>
|
||||
{showMarkedTooltip && (
|
||||
<MiniInfoTooltip
|
||||
icon={infoIcon}
|
||||
message="Click the checkbox to unmark as complete if needed"
|
||||
onClose={handleMarkedTooltipClose}
|
||||
iconColor="text-teal-600"
|
||||
iconSize={24}
|
||||
width="w-64"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="relative">
|
||||
<div
|
||||
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`}
|
||||
className={`${isLoading ? 'opacity-75 cursor-not-allowed' : ''} bg-gray-800 rounded-full px-5 drop-shadow-md flex items-center space-x-1 p-2.5 text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out`}
|
||||
onClick={!isLoading ? markActivityAsCompleteFront : undefined}
|
||||
>
|
||||
{isLoading ? (
|
||||
|
|
@ -792,11 +844,31 @@ export function MarkStatus(props: {
|
|||
</svg>
|
||||
</div>
|
||||
) : (
|
||||
<i>
|
||||
<Check size={17}></Check>
|
||||
</i>
|
||||
)}{' '}
|
||||
{!isMobile && <i className="not-italic text-xs font-bold">{isLoading ? 'Marking...' : 'Mark as complete'}</i>}
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" />
|
||||
</svg>
|
||||
)}
|
||||
<span className="text-xs font-bold">{isLoading ? 'Marking...' : 'Mark as complete'}</span>
|
||||
</div>
|
||||
{showUnmarkedTooltip && (
|
||||
<MiniInfoTooltip
|
||||
icon={infoIcon}
|
||||
message="Click the checkbox to mark this activity as complete"
|
||||
onClose={handleUnmarkedTooltipClose}
|
||||
iconColor="text-gray-600"
|
||||
iconSize={24}
|
||||
width="w-64"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
47
apps/web/components/Objects/MiniInfoTooltip.tsx
Normal file
47
apps/web/components/Objects/MiniInfoTooltip.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
interface MiniInfoTooltipProps {
|
||||
icon?: React.ReactNode;
|
||||
message: string;
|
||||
onClose: () => void;
|
||||
iconColor?: string;
|
||||
iconSize?: number;
|
||||
width?: string;
|
||||
}
|
||||
|
||||
export default function MiniInfoTooltip({
|
||||
icon,
|
||||
message,
|
||||
onClose,
|
||||
iconColor = 'text-teal-600',
|
||||
iconSize = 20,
|
||||
width = 'w-48'
|
||||
}: MiniInfoTooltipProps) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 10 }}
|
||||
className={`absolute -top-20 left-1/2 transform -translate-x-1/2 bg-white rounded-lg nice-shadow p-3 ${width}`}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
{icon && (
|
||||
<div className={`${iconColor} flex-shrink-0`} style={{ width: iconSize, height: iconSize }}>
|
||||
{icon}
|
||||
</div>
|
||||
)}
|
||||
<p className="text-sm text-gray-700">{message}</p>
|
||||
</div>
|
||||
<div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-white rotate-45"></div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-1 right-1 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M18 6L6 18M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue