mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: UI improvements & migration script
This commit is contained in:
swve
parent
e464b30147
commit
6cd1cf7e9c
5 changed files with 154 additions and 63 deletions
|
|
@ -26,7 +26,7 @@ import toast from 'react-hot-toast'
|
|||
import { mutate } from 'swr'
|
||||
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
|
||||
import { useMediaQuery } from 'usehooks-ts'
|
||||
import PaidCourseActivity from '@components/Objects/Courses/CourseActions/PaidCourseActivity'
|
||||
import PaidCourseActivityDisclaimer from '@components/Objects/Courses/CourseActions/PaidCourseActivityDisclaimer'
|
||||
|
||||
interface ActivityClientProps {
|
||||
activityid: string
|
||||
|
|
@ -81,7 +81,6 @@ function ActivityClient(props: ActivityClientProps) {
|
|||
else {
|
||||
setBgColor('bg-zinc-950');
|
||||
}
|
||||
console.log(activity.content)
|
||||
}
|
||||
, [activity, pathname])
|
||||
|
||||
|
|
@ -175,45 +174,44 @@ function ActivityClient(props: ActivityClientProps) {
|
|||
)}
|
||||
|
||||
{activity && activity.published == true && (
|
||||
<div
|
||||
className={`p-7 drop-shadow-sm rounded-lg ${bgColor}`}
|
||||
>
|
||||
{/* Paid Courses */}
|
||||
{activity.content.paid_access == false && (
|
||||
<PaidCourseActivity course={course} />
|
||||
)}
|
||||
{/* Activity Types */}
|
||||
<div>
|
||||
{activity.activity_type == 'TYPE_DYNAMIC' && (
|
||||
<Canva content={activity.content} activity={activity} />
|
||||
)}
|
||||
{/* todo : use apis & streams instead of this */}
|
||||
{activity.activity_type == 'TYPE_VIDEO' && (
|
||||
<VideoActivity course={course} activity={activity} />
|
||||
)}
|
||||
{activity.activity_type == 'TYPE_DOCUMENT' && (
|
||||
<DocumentPdfActivity
|
||||
course={course}
|
||||
activity={activity}
|
||||
/>
|
||||
)}
|
||||
{activity.activity_type == 'TYPE_ASSIGNMENT' && (
|
||||
<>
|
||||
{activity.content.paid_access == false ? (
|
||||
<PaidCourseActivityDisclaimer course={course} />
|
||||
) : (
|
||||
<div className={`p-7 drop-shadow-sm rounded-lg ${bgColor}`}>
|
||||
{/* Activity Types */}
|
||||
<div>
|
||||
{assignment ? (
|
||||
<AssignmentProvider assignment_uuid={assignment?.assignment_uuid}>
|
||||
<AssignmentsTaskProvider>
|
||||
<AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
|
||||
<AssignmentStudentActivity />
|
||||
</AssignmentSubmissionProvider>
|
||||
</AssignmentsTaskProvider>
|
||||
</AssignmentProvider>
|
||||
) : (
|
||||
<div></div>
|
||||
{activity.activity_type == 'TYPE_DYNAMIC' && (
|
||||
<Canva content={activity.content} activity={activity} />
|
||||
)}
|
||||
{activity.activity_type == 'TYPE_VIDEO' && (
|
||||
<VideoActivity course={course} activity={activity} />
|
||||
)}
|
||||
{activity.activity_type == 'TYPE_DOCUMENT' && (
|
||||
<DocumentPdfActivity
|
||||
course={course}
|
||||
activity={activity}
|
||||
/>
|
||||
)}
|
||||
{activity.activity_type == 'TYPE_ASSIGNMENT' && (
|
||||
<div>
|
||||
{assignment ? (
|
||||
<AssignmentProvider assignment_uuid={assignment?.assignment_uuid}>
|
||||
<AssignmentsTaskProvider>
|
||||
<AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
|
||||
<AssignmentStudentActivity />
|
||||
</AssignmentSubmissionProvider>
|
||||
</AssignmentsTaskProvider>
|
||||
</AssignmentProvider>
|
||||
) : (
|
||||
<div></div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{<div style={{ height: '100px' }}></div>}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import {
|
|||
Eye,
|
||||
File,
|
||||
FilePenLine,
|
||||
FileSymlink,
|
||||
Globe,
|
||||
Lock,
|
||||
MoreVertical,
|
||||
|
|
@ -27,6 +28,7 @@ import { useOrg } from '@components/Contexts/OrgContext'
|
|||
import { useCourse } from '@components/Contexts/CourseContext'
|
||||
import toast from 'react-hot-toast'
|
||||
import { useMediaQuery } from 'usehooks-ts'
|
||||
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
|
||||
|
||||
type ActivitiyElementProps = {
|
||||
orgslug: string
|
||||
|
|
@ -176,24 +178,26 @@ function ActivityElement(props: ActivitiyElementProps) {
|
|||
)}
|
||||
<span>{!props.activity.published ? 'Publish' : 'Unpublish'}</span>
|
||||
</button>
|
||||
<Link
|
||||
href={
|
||||
getUriWithOrg(props.orgslug, '') +
|
||||
`/course/${props.course_uuid.replace(
|
||||
'course_',
|
||||
''
|
||||
)}/activity/${props.activity.activity_uuid.replace(
|
||||
'activity_',
|
||||
''
|
||||
)}`
|
||||
}
|
||||
prefetch
|
||||
className="p-1 px-2 sm:px-3 bg-gradient-to-bl text-cyan-800 from-sky-400/50 to-cyan-200/80 border border-cyan-600/10 shadow-md rounded-md font-bold text-xs flex items-center space-x-1 transition-colors duration-200 hover:from-sky-500/50 hover:to-cyan-300/80"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Eye strokeWidth={2} size={12} className="text-sky-600" />
|
||||
<span>Preview</span>
|
||||
</Link>
|
||||
<div className="w-px h-3 bg-gray-300 mx-1 self-center rounded-full hidden sm:block" />
|
||||
<ToolTip content="Preview Activity" sideOffset={8}>
|
||||
<Link
|
||||
href={
|
||||
getUriWithOrg(props.orgslug, '') +
|
||||
`/course/${props.course_uuid.replace(
|
||||
'course_',
|
||||
''
|
||||
)}/activity/${props.activity.activity_uuid.replace(
|
||||
'activity_',
|
||||
''
|
||||
)}`
|
||||
}
|
||||
prefetch
|
||||
className="p-1 px-2 sm:px-3 bg-gradient-to-bl text-cyan-800 from-sky-400/50 to-cyan-200/80 border border-cyan-600/10 shadow-md rounded-md font-bold text-xs flex items-center space-x-1 transition-colors duration-200 hover:from-sky-500/50 hover:to-cyan-300/80"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Eye strokeWidth={2} size={14} className="text-sky-600" />
|
||||
</Link>
|
||||
</ToolTip>
|
||||
{/* Delete Button */}
|
||||
<ConfirmationModal
|
||||
confirmationMessage="Are you sure you want to delete this activity ?"
|
||||
|
|
@ -205,7 +209,6 @@ function ActivityElement(props: ActivitiyElementProps) {
|
|||
rel="noopener noreferrer"
|
||||
>
|
||||
<X size={15} className="text-rose-200 font-bold" />
|
||||
{!isMobile && <span className="text-rose-200 font-bold text-xs">Delete</span>}
|
||||
</button>
|
||||
}
|
||||
functionToExecute={() => deleteActivityUI()}
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ function CoursePaidOptions({ course }: CoursePaidOptionsProps) {
|
|||
<div key={product.id} className="bg-slate-50/30 p-4 rounded-lg nice-shadow flex flex-col">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<div className="flex flex-col space-y-1 items-start">
|
||||
<Badge className='w-fit flex items-center space-x-2' variant="outline">
|
||||
<Badge className='w-fit flex items-center space-x-2 bg-gray-100/50' variant="outline">
|
||||
{product.product_type === 'subscription' ? <RefreshCcw size={12} /> : <SquareCheck size={12} />}
|
||||
<span className='text-sm'>
|
||||
{product.product_type === 'subscription' ? 'Subscription' : 'One-time payment'}
|
||||
|
|
|
|||
|
|
@ -6,16 +6,16 @@ interface PaidCourseActivityProps {
|
|||
course: any;
|
||||
}
|
||||
|
||||
function PaidCourseActivity({ course }: PaidCourseActivityProps) {
|
||||
function PaidCourseActivityDisclaimer({ course }: PaidCourseActivityProps) {
|
||||
return (
|
||||
<div className="space-y-4 ">
|
||||
<div className="p-4 bg-amber-50 border border-amber-200 rounded-lg nice-shadow">
|
||||
<div className="space-y-4 max-w-lg mx-auto">
|
||||
<div className="p-4 bg-amber-50 border border-amber-200 rounded-lg ">
|
||||
<div className="flex items-center gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-amber-800" />
|
||||
<h3 className="text-amber-800 font-semibold">Paid Content</h3>
|
||||
</div>
|
||||
<p className="text-amber-700 text-sm mt-1">
|
||||
This content requires a course purchase to access. Please purchase the course to continue.
|
||||
This content requires a course purchase to access.
|
||||
</p>
|
||||
</div>
|
||||
<CoursePaidOptions course={course} />
|
||||
|
|
@ -23,4 +23,4 @@ function PaidCourseActivity({ course }: PaidCourseActivityProps) {
|
|||
)
|
||||
}
|
||||
|
||||
export default PaidCourseActivity
|
||||
export default PaidCourseActivityDisclaimer
|
||||
Loading…
Add table
Add a link
Reference in a new issue