mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
chore: refactor frontend components folder
This commit is contained in:
swve
parent
46f016f661
commit
5a746a946d
106 changed files with 159 additions and 164 deletions
|
|
@ -0,0 +1,329 @@
|
|||
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
|
||||
import { getAPIUrl, getUriWithOrg } from '@services/config/config'
|
||||
import { deleteActivity, updateActivity } from '@services/courses/activities'
|
||||
import { revalidateTags } from '@services/utils/ts/requests'
|
||||
import {
|
||||
Backpack,
|
||||
Eye,
|
||||
File,
|
||||
FilePenLine,
|
||||
FileSymlink,
|
||||
Globe,
|
||||
Lock,
|
||||
MoreVertical,
|
||||
Pencil,
|
||||
Save,
|
||||
Sparkles,
|
||||
Video,
|
||||
X,
|
||||
} from 'lucide-react'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { Draggable } from 'react-beautiful-dnd'
|
||||
import { mutate } from 'swr'
|
||||
import { deleteAssignmentUsingActivityUUID, getAssignmentFromActivityUUID } from '@services/courses/assignments'
|
||||
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/Objects/StyledElements/Tooltip/Tooltip'
|
||||
|
||||
type ActivitiyElementProps = {
|
||||
orgslug: string
|
||||
activity: any
|
||||
activityIndex: any
|
||||
course_uuid: string
|
||||
}
|
||||
|
||||
interface ModifiedActivityInterface {
|
||||
activityId: string
|
||||
activityName: string
|
||||
}
|
||||
|
||||
function ActivityElement(props: ActivitiyElementProps) {
|
||||
const router = useRouter()
|
||||
const session = useLHSession() as any;
|
||||
const access_token = session?.data?.tokens?.access_token;
|
||||
const [modifiedActivity, setModifiedActivity] = React.useState<
|
||||
ModifiedActivityInterface | undefined
|
||||
>(undefined)
|
||||
const [selectedActivity, setSelectedActivity] = React.useState<
|
||||
string | undefined
|
||||
>(undefined)
|
||||
const activityUUID = props.activity.activity_uuid
|
||||
const isMobile = useMediaQuery('(max-width: 767px)')
|
||||
|
||||
async function deleteActivityUI() {
|
||||
const toast_loading = toast.loading('Deleting activity...')
|
||||
// Assignments
|
||||
if (props.activity.activity_type === 'TYPE_ASSIGNMENT') {
|
||||
await deleteAssignmentUsingActivityUUID(props.activity.activity_uuid, access_token)
|
||||
}
|
||||
|
||||
await deleteActivity(props.activity.activity_uuid, access_token)
|
||||
mutate(`${getAPIUrl()}courses/${props.course_uuid}/meta`)
|
||||
await revalidateTags(['courses'], props.orgslug)
|
||||
toast.dismiss(toast_loading)
|
||||
toast.success('Activity deleted successfully')
|
||||
router.refresh()
|
||||
}
|
||||
|
||||
async function changePublicStatus() {
|
||||
const toast_loading = toast.loading('Updating assignment...')
|
||||
await updateActivity(
|
||||
{
|
||||
...props.activity,
|
||||
published: !props.activity.published,
|
||||
},
|
||||
props.activity.activity_uuid,
|
||||
access_token
|
||||
)
|
||||
mutate(`${getAPIUrl()}courses/${props.course_uuid}/meta`)
|
||||
toast.dismiss(toast_loading)
|
||||
toast.success('The activity has been updated successfully')
|
||||
await revalidateTags(['courses'], props.orgslug)
|
||||
router.refresh()
|
||||
}
|
||||
|
||||
async function updateActivityName(activityId: string) {
|
||||
if (
|
||||
modifiedActivity?.activityId === activityId &&
|
||||
selectedActivity !== undefined
|
||||
) {
|
||||
|
||||
let modifiedActivityCopy = {
|
||||
...props.activity,
|
||||
name: modifiedActivity.activityName,
|
||||
}
|
||||
|
||||
await updateActivity(modifiedActivityCopy, activityUUID, access_token)
|
||||
mutate(`${getAPIUrl()}courses/${props.course_uuid}/meta`)
|
||||
await revalidateTags(['courses'], props.orgslug)
|
||||
router.refresh()
|
||||
}
|
||||
setSelectedActivity(undefined)
|
||||
}
|
||||
|
||||
return (
|
||||
<Draggable
|
||||
key={props.activity.activity_uuid}
|
||||
draggableId={props.activity.activity_uuid}
|
||||
index={props.activityIndex}
|
||||
>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className="flex flex-col sm:flex-row py-2 px-3 my-2 w-full rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 space-y-2 sm:space-y-0 sm:space-x-2 items-center ring-1 ring-inset ring-gray-400/10 nice-shadow"
|
||||
key={props.activity.id}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
{/* Activity Type Icon */}
|
||||
<ActivityTypeIndicator activityType={props.activity.activity_type} isMobile={isMobile} />
|
||||
|
||||
{/* Centered Activity Name */}
|
||||
<div className="grow items-center space-x-2 flex mx-auto justify-center">
|
||||
{selectedActivity === props.activity.id ? (
|
||||
<div className="chapter-modification-zone text-[7px] text-gray-600 shadow-inner bg-gray-200/60 py-1 px-4 rounded-lg space-x-3">
|
||||
<input
|
||||
type="text"
|
||||
className="bg-transparent outline-none text-xs text-gray-500"
|
||||
placeholder="Activity name"
|
||||
value={
|
||||
modifiedActivity
|
||||
? modifiedActivity?.activityName
|
||||
: props.activity.name
|
||||
}
|
||||
onChange={(e) =>
|
||||
setModifiedActivity({
|
||||
activityId: props.activity.id,
|
||||
activityName: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<button
|
||||
onClick={() => updateActivityName(props.activity.id)}
|
||||
className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900"
|
||||
>
|
||||
<Save size={12} />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<p className="first-letter:uppercase text-center sm:text-left"> {props.activity.name} </p>
|
||||
)}
|
||||
<Pencil
|
||||
onClick={() => setSelectedActivity(props.activity.id)}
|
||||
className="text-neutral-400 hover:cursor-pointer size-3 min-w-3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Edit, View, Publish, and Delete Buttons */}
|
||||
<div className="flex flex-wrap justify-center sm:justify-end gap-2 w-full sm:w-auto">
|
||||
<ActivityElementOptions activity={props.activity} isMobile={isMobile} />
|
||||
{/* Publishing */}
|
||||
<button
|
||||
className={`p-1 px-2 sm:px-3 border shadow-md rounded-md font-bold text-xs flex items-center space-x-1 transition-colors duration-200 ${
|
||||
!props.activity.published
|
||||
? 'bg-gradient-to-bl text-green-800 from-green-400/50 to-lime-200/80 border-green-600/10 hover:from-green-500/50 hover:to-lime-300/80'
|
||||
: 'bg-gradient-to-bl text-gray-800 from-gray-400/50 to-gray-200/80 border-gray-600/10 hover:from-gray-500/50 hover:to-gray-300/80'
|
||||
}`}
|
||||
onClick={() => changePublicStatus()}
|
||||
>
|
||||
{!props.activity.published ? (
|
||||
<Globe strokeWidth={2} size={12} className="text-green-600" />
|
||||
) : (
|
||||
<Lock strokeWidth={2} size={12} className="text-gray-600" />
|
||||
)}
|
||||
<span>{!props.activity.published ? 'Publish' : 'Unpublish'}</span>
|
||||
</button>
|
||||
<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 ?"
|
||||
confirmationButtonText="Delete Activity"
|
||||
dialogTitle={'Delete ' + props.activity.name + ' ?'}
|
||||
dialogTrigger={
|
||||
<button
|
||||
className="p-1 px-2 sm:px-3 bg-red-600 rounded-md flex items-center space-x-1 shadow-md transition-colors duration-200 hover:bg-red-700"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<X size={15} className="text-rose-200 font-bold" />
|
||||
</button>
|
||||
}
|
||||
functionToExecute={() => deleteActivityUI()}
|
||||
status="warning"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
)
|
||||
}
|
||||
|
||||
const ACTIVITIES = {
|
||||
'TYPE_VIDEO': {
|
||||
displayName: 'Video',
|
||||
Icon: Video
|
||||
},
|
||||
'TYPE_DOCUMENT': {
|
||||
displayName: 'Document',
|
||||
Icon: File
|
||||
},
|
||||
'TYPE_ASSIGNMENT': {
|
||||
displayName: 'Assignment',
|
||||
Icon: Backpack
|
||||
},
|
||||
'TYPE_DYNAMIC': {
|
||||
displayName: 'Dynamic',
|
||||
Icon: Sparkles
|
||||
}
|
||||
}
|
||||
|
||||
const ActivityTypeIndicator = ({activityType, isMobile} : { activityType: keyof typeof ACTIVITIES, isMobile: boolean}) => {
|
||||
const {displayName, Icon} = ACTIVITIES[activityType]
|
||||
|
||||
return (
|
||||
<div className={`px-3 text-gray-300 space-x-1 w-28 flex ${isMobile ? 'flex-col' : ''}`}>
|
||||
<div className="flex space-x-2 items-center">
|
||||
<Icon className="size-4" />{' '}
|
||||
<div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full mx-auto justify-center align-middle">
|
||||
{displayName}
|
||||
</div>{' '}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const ActivityElementOptions = ({ activity, isMobile }: { activity: any; isMobile: boolean }) => {
|
||||
const [assignmentUUID, setAssignmentUUID] = useState('');
|
||||
const org = useOrg() as any;
|
||||
const course = useCourse() as any;
|
||||
const session = useLHSession() as any;
|
||||
const access_token = session?.data?.tokens?.access_token;
|
||||
|
||||
async function getAssignmentUUIDFromActivityUUID(activityUUID: string): Promise<string | undefined> {
|
||||
const activity = await getAssignmentFromActivityUUID(activityUUID, access_token);
|
||||
if (activity) {
|
||||
return activity.data.assignment_uuid;
|
||||
}
|
||||
}
|
||||
|
||||
const fetchAssignmentUUID = async () => {
|
||||
if (activity.activity_type === 'TYPE_ASSIGNMENT') {
|
||||
const assignment_uuid = await getAssignmentUUIDFromActivityUUID(activity.activity_uuid);
|
||||
if(assignment_uuid)
|
||||
setAssignmentUUID(assignment_uuid.replace('assignment_', ''));
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchAssignmentUUID();
|
||||
}, [activity, course]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{activity.activity_type === 'TYPE_DYNAMIC' && (
|
||||
<>
|
||||
<Link
|
||||
href={
|
||||
getUriWithOrg(org.slug, '') +
|
||||
`/course/${course?.courseStructure.course_uuid.replace(
|
||||
'course_',
|
||||
''
|
||||
)}/activity/${activity.activity_uuid.replace(
|
||||
'activity_',
|
||||
''
|
||||
)}/edit`
|
||||
}
|
||||
prefetch
|
||||
className={`hover:cursor-pointer p-1 ${isMobile ? 'px-2' : 'px-3'} bg-sky-700 rounded-md items-center`}
|
||||
target='_blank'
|
||||
>
|
||||
<div className="text-sky-100 font-bold text-xs flex items-center space-x-1">
|
||||
<FilePenLine size={12} /> <span>Edit Page</span>
|
||||
</div>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
{activity.activity_type === 'TYPE_ASSIGNMENT' && (
|
||||
<>
|
||||
<Link
|
||||
href={
|
||||
getUriWithOrg(org.slug, '') +
|
||||
`/dash/assignments/${assignmentUUID}`
|
||||
}
|
||||
prefetch
|
||||
className={`hover:cursor-pointer p-1 ${isMobile ? 'px-2' : 'px-3'} bg-teal-700 rounded-md items-center`}
|
||||
>
|
||||
<div className="text-sky-100 font-bold text-xs flex items-center space-x-1">
|
||||
<FilePenLine size={12} /> {!isMobile && <span>Edit Assignment</span>}
|
||||
</div>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActivityElement
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
|
||||
import {
|
||||
Hexagon,
|
||||
MoreHorizontal,
|
||||
MoreVertical,
|
||||
Pencil,
|
||||
Save,
|
||||
X,
|
||||
Trash2,
|
||||
} from 'lucide-react'
|
||||
import React from 'react'
|
||||
import { Draggable, Droppable } from 'react-beautiful-dnd'
|
||||
import ActivityElement from './ActivityElement'
|
||||
import NewActivityButton from '../Buttons/NewActivityButton'
|
||||
import { deleteChapter, updateChapter } from '@services/courses/chapters'
|
||||
import { revalidateTags } from '@services/utils/ts/requests'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { getAPIUrl } from '@services/config/config'
|
||||
import { mutate } from 'swr'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
|
||||
type ChapterElementProps = {
|
||||
chapter: any
|
||||
chapterIndex: number
|
||||
orgslug: string
|
||||
course_uuid: string
|
||||
}
|
||||
|
||||
interface ModifiedChapterInterface {
|
||||
chapterId: string
|
||||
chapterName: string
|
||||
}
|
||||
|
||||
function ChapterElement(props: ChapterElementProps) {
|
||||
const activities = props.chapter.activities || []
|
||||
const session = useLHSession() as any;
|
||||
const access_token = session?.data?.tokens?.access_token;
|
||||
const [modifiedChapter, setModifiedChapter] = React.useState<
|
||||
ModifiedChapterInterface | undefined
|
||||
>(undefined)
|
||||
const [selectedChapter, setSelectedChapter] = React.useState<
|
||||
string | undefined
|
||||
>(undefined)
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const deleteChapterUI = async () => {
|
||||
await deleteChapter(props.chapter.id, access_token)
|
||||
mutate(`${getAPIUrl()}courses/${props.course_uuid}/meta`)
|
||||
await revalidateTags(['courses'], props.orgslug)
|
||||
router.refresh()
|
||||
}
|
||||
|
||||
async function updateChapterName(chapterId: string) {
|
||||
if (modifiedChapter?.chapterId === chapterId) {
|
||||
let modifiedChapterCopy = {
|
||||
name: modifiedChapter.chapterName,
|
||||
}
|
||||
await updateChapter(chapterId, modifiedChapterCopy, access_token)
|
||||
mutate(`${getAPIUrl()}courses/${props.course_uuid}/meta`)
|
||||
await revalidateTags(['courses'], props.orgslug)
|
||||
router.refresh()
|
||||
}
|
||||
setSelectedChapter(undefined)
|
||||
}
|
||||
|
||||
return (
|
||||
<Draggable
|
||||
key={props.chapter.chapter_uuid}
|
||||
draggableId={props.chapter.chapter_uuid}
|
||||
index={props.chapterIndex}
|
||||
>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className="mx-2 sm:mx-4 md:mx-6 lg:mx-10 bg-white rounded-xl nice-shadow px-3 sm:px-4 md:px-6 pt-4 sm:pt-6"
|
||||
key={props.chapter.chapter_uuid}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
<div className="flex flex-wrap items-center justify-between pb-3">
|
||||
<div className="flex grow items-center space-x-2 mb-2 sm:mb-0">
|
||||
<div className="bg-neutral-100 rounded-md p-2">
|
||||
<Hexagon
|
||||
strokeWidth={3}
|
||||
size={16}
|
||||
className="text-neutral-600"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
{selectedChapter === props.chapter.id ? (
|
||||
<div className="chapter-modification-zone bg-neutral-100 py-1 px-2 sm:px-4 rounded-lg flex items-center space-x-2">
|
||||
<input
|
||||
type="text"
|
||||
className="bg-transparent outline-none text-sm text-neutral-700 w-full max-w-[150px] sm:max-w-none"
|
||||
placeholder="Chapter name"
|
||||
value={
|
||||
modifiedChapter
|
||||
? modifiedChapter?.chapterName
|
||||
: props.chapter.name
|
||||
}
|
||||
onChange={(e) =>
|
||||
setModifiedChapter({
|
||||
chapterId: props.chapter.id,
|
||||
chapterName: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<button
|
||||
onClick={() => updateChapterName(props.chapter.id)}
|
||||
className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900"
|
||||
>
|
||||
<Save size={15} />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-neutral-700 first-letter:uppercase text-sm sm:text-base">
|
||||
{props.chapter.name}
|
||||
</p>
|
||||
)}
|
||||
<Pencil
|
||||
size={15}
|
||||
onClick={() => setSelectedChapter(props.chapter.id)}
|
||||
className="text-neutral-600 hover:cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<MoreVertical size={15} className="text-gray-300" />
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Delete Chapter"
|
||||
confirmationMessage="Are you sure you want to delete this chapter?"
|
||||
dialogTitle={'Delete ' + props.chapter.name + ' ?'}
|
||||
dialogTrigger={
|
||||
<button
|
||||
className="hover:cursor-pointer p-1 px-2 sm:px-3 bg-red-600 rounded-md shadow flex items-center text-rose-100 text-sm"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Trash2 size={15} className="text-rose-200" />
|
||||
</button>
|
||||
}
|
||||
functionToExecute={() => deleteChapterUI()}
|
||||
status="warning"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Droppable
|
||||
key={props.chapter.chapter_uuid}
|
||||
droppableId={props.chapter.chapter_uuid}
|
||||
type="activity"
|
||||
>
|
||||
{(provided) => (
|
||||
<div {...provided.droppableProps} ref={provided.innerRef}>
|
||||
<div className="flex flex-col">
|
||||
{activities.map((activity: any, index: any) => {
|
||||
return (
|
||||
<div key={activity.activity_uuid} className="flex items-center ">
|
||||
<ActivityElement
|
||||
orgslug={props.orgslug}
|
||||
course_uuid={props.course_uuid}
|
||||
activityIndex={index}
|
||||
activity={activity}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{provided.placeholder}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
<NewActivityButton
|
||||
orgslug={props.orgslug}
|
||||
chapterId={props.chapter.id}
|
||||
/>
|
||||
<div className="h-6">
|
||||
<div className="flex items-center">
|
||||
<MoreHorizontal size={19} className="text-gray-300 mx-auto" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChapterElement
|
||||
Loading…
Add table
Add a link
Reference in a new issue