mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: refactor the entire learnhouse project
This commit is contained in:
swve
parent
f556e41dda
commit
4c215e91d5
247 changed files with 7716 additions and 1013 deletions
112
apps/web/components/Pages/CourseEdit/Draggables/Activity.tsx
Normal file
112
apps/web/components/Pages/CourseEdit/Draggables/Activity.tsx
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { Draggable } from "react-beautiful-dnd";
|
||||
import { getAPIUrl, getUriWithOrg } from "@services/config/config";
|
||||
import { FileText, Video, Sparkles, X, Pencil, MoreVertical, Eye, Save, File } from "lucide-react";
|
||||
import { mutate } from "swr";
|
||||
import { revalidateTags } from "@services/utils/ts/requests";
|
||||
import { useRouter } from "next/navigation";
|
||||
import ConfirmationModal from "@components/StyledElements/ConfirmationModal/ConfirmationModal";
|
||||
import { deleteActivity, updateActivity } from "@services/courses/activities";
|
||||
|
||||
interface ModifiedActivityInterface {
|
||||
activityId: string;
|
||||
activityName: string;
|
||||
}
|
||||
|
||||
function Activity(props: any) {
|
||||
const router = useRouter();
|
||||
const [modifiedActivity, setModifiedActivity] = React.useState<ModifiedActivityInterface | undefined>(undefined);
|
||||
const [selectedActivity, setSelectedActivity] = React.useState<string | undefined>(undefined);
|
||||
|
||||
async function removeActivity() {
|
||||
await deleteActivity(props.activity.id);
|
||||
mutate(`${getAPIUrl()}chapters/meta/course_${props.courseid}`);
|
||||
await revalidateTags(['courses'], props.orgslug);
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
async function updateActivityName(activityId: string) {
|
||||
if ((modifiedActivity?.activityId === activityId) && selectedActivity !== undefined) {
|
||||
setSelectedActivity(undefined);
|
||||
let modifiedActivityCopy = {
|
||||
name: modifiedActivity.activityName,
|
||||
description: '',
|
||||
type: props.activity.type,
|
||||
content: props.activity.content,
|
||||
}
|
||||
|
||||
await updateActivity(modifiedActivityCopy, activityId)
|
||||
await mutate(`${getAPIUrl()}chapters/meta/course_${props.courseid}`)
|
||||
await revalidateTags(['courses'], props.orgslug)
|
||||
router.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Draggable key={props.activity.id} draggableId={props.activity.id} index={props.index}>
|
||||
{(provided) => (
|
||||
<div
|
||||
className="flex flex-row py-2 my-2 rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 hover:shadow space-x-1 w-auto items-center ring-1 ring-inset ring-gray-400/10 shadow-sm transition-all delay-100 duration-75 ease-linear" key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
|
||||
<div className="px-3 text-gray-300 space-x-1 w-28" >
|
||||
{props.activity.type === "video" && <>
|
||||
<div className="flex space-x-2 items-center"><Video size={16} /> <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full mx-auto justify-center align-middle">Video</div> </div></>}
|
||||
{props.activity.type === "documentpdf" && <><div className="flex space-x-2 items-center"><div className="w-[30px]"><File size={16} /> </div><div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full">Document</div> </div></>}
|
||||
{props.activity.type === "dynamic" && <><div className="flex space-x-2 items-center"><Sparkles size={16} /> <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full">Dynamic</div> </div></>}
|
||||
</div>
|
||||
|
||||
<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={11} onClick={() => updateActivityName(props.activity.id)} />
|
||||
</button>
|
||||
</div>) : (<p className="first-letter:uppercase"> {props.activity.name} </p>)}
|
||||
<Pencil onClick={() => setSelectedActivity(props.activity.id)}
|
||||
size={12} className="text-neutral-400 hover:cursor-pointer" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row space-x-2">
|
||||
{props.activity.type === "dynamic" && <>
|
||||
<Link
|
||||
href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}/edit`}
|
||||
className=" hover:cursor-pointer p-1 px-3 bg-sky-700 rounded-md items-center"
|
||||
rel="noopener noreferrer">
|
||||
<div className="text-sky-100 font-bold text-xs" >Edit </div>
|
||||
</Link>
|
||||
</>}
|
||||
<Link
|
||||
href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}`}
|
||||
className=" hover:cursor-pointer p-1 px-3 bg-gray-200 rounded-md"
|
||||
rel="noopener noreferrer">
|
||||
<Eye strokeWidth={2} size={15} className="text-gray-600" />
|
||||
</Link>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div className="flex flex-row pr-3 space-x-1 items-center">
|
||||
<MoreVertical size={15} className="text-gray-300" />
|
||||
<ConfirmationModal
|
||||
confirmationMessage="Are you sure you want to delete this activity ?"
|
||||
confirmationButtonText="Delete Activity"
|
||||
dialogTitle={"Delete " + props.activity.name + " ?"}
|
||||
dialogTrigger={
|
||||
<div
|
||||
className=" hover:cursor-pointer p-1 px-5 bg-red-600 rounded-md"
|
||||
rel="noopener noreferrer">
|
||||
<X size={15} className="text-rose-200 font-bold" />
|
||||
</div>}
|
||||
functionToExecute={() => removeActivity()}
|
||||
status='warning'
|
||||
></ConfirmationModal></div>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default Activity;
|
||||
130
apps/web/components/Pages/CourseEdit/Draggables/Chapter.tsx
Normal file
130
apps/web/components/Pages/CourseEdit/Draggables/Chapter.tsx
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
|
||||
import Activity from "./Activity";
|
||||
import { Folders, Hexagon, MoreVertical, Pencil, PlusSquare, Save, Sparkle, Sparkles, Trash, Trash2, X } from "lucide-react";
|
||||
import ConfirmationModal from "@components/StyledElements/ConfirmationModal/ConfirmationModal";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { updateChapter } from "@services/courses/chapters";
|
||||
import { mutate } from "swr";
|
||||
import { getAPIUrl } from "@services/config/config";
|
||||
import { revalidateTags } from "@services/utils/ts/requests";
|
||||
|
||||
interface ModifiedChapterInterface {
|
||||
chapterId: string;
|
||||
chapterName: string;
|
||||
}
|
||||
|
||||
function Chapter(props: any) {
|
||||
const router = useRouter();
|
||||
const [modifiedChapter, setModifiedChapter] = React.useState<ModifiedChapterInterface | undefined>(undefined);
|
||||
const [selectedChapter, setSelectedChapter] = React.useState<string | undefined>(undefined);
|
||||
|
||||
async function updateChapterName(chapterId: string) {
|
||||
if (modifiedChapter?.chapterId === chapterId) {
|
||||
setSelectedChapter(undefined);
|
||||
let modifiedChapterCopy = {
|
||||
name: modifiedChapter.chapterName,
|
||||
description: '',
|
||||
activities: props.info.list.chapter.activityIds,
|
||||
}
|
||||
await updateChapter(chapterId, modifiedChapterCopy)
|
||||
await mutate(`${getAPIUrl()}chapters/meta/course_${props.courseid}`)
|
||||
await revalidateTags(['courses'], props.orgslug)
|
||||
router.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Draggable key={props.info.list.chapter.id} draggableId={props.info.list.chapter.id} index={props.index}>
|
||||
{(provided, snapshot) => (
|
||||
<ChapterWrapper
|
||||
{...provided.dragHandleProps}
|
||||
{...provided.draggableProps}
|
||||
ref={provided.innerRef}
|
||||
// isDragging={snapshot.isDragging}
|
||||
className="max-w-screen-2xl mx-auto bg-white px-5"
|
||||
key={props.info.list.chapter.id}
|
||||
>
|
||||
<div className="flex pt-3 pr-3 font-bold text-md items-center space-x-2">
|
||||
<div className="flex grow text-lg space-x-3 items-center rounded-md px-3 py-1">
|
||||
<div className="bg-neutral-100 rounded-md p-2">
|
||||
<Hexagon strokeWidth={3} size={16} className="text-neutral-600 " />
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-2 items-center">
|
||||
|
||||
{selectedChapter === props.info.list.chapter.id ?
|
||||
(<div className="chapter-modification-zone bg-neutral-100 py-1 px-4 rounded-lg space-x-3">
|
||||
<input type="text" className="bg-transparent outline-none text-sm text-neutral-700" placeholder="Chapter name" value={modifiedChapter ? modifiedChapter?.chapterName : props.info.list.chapter.name} onChange={(e) => setModifiedChapter({ chapterId: props.info.list.chapter.id, chapterName: e.target.value })} />
|
||||
<button onClick={() => updateChapterName(props.info.list.chapter.id)} className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900">
|
||||
<Save size={15} onClick={() => updateChapterName(props.info.list.chapter.id)} />
|
||||
</button>
|
||||
</div>) : (<p className="text-neutral-700 first-letter:uppercase">{props.info.list.chapter.name}</p>)}
|
||||
<Pencil size={15} className="text-neutral-600 hover:cursor-pointer" onClick={() => setSelectedChapter(props.info.list.chapter.id)} />
|
||||
</div>
|
||||
</div>
|
||||
<MoreVertical size={15} className="text-gray-300" />
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Delete Chapter"
|
||||
confirmationMessage="Are you sure you want to delete this chapter?"
|
||||
dialogTitle={"Delete " + props.info.list.chapter.name + " ?"}
|
||||
dialogTrigger={
|
||||
<div
|
||||
className=" hover:cursor-pointer p-1 px-4 bg-red-600 rounded-md shadow flex space-x-1 items-center text-rose-100 text-sm"
|
||||
rel="noopener noreferrer">
|
||||
<X size={15} className="text-rose-200 font-bold" />
|
||||
<p>Delete Chapter</p>
|
||||
</div>}
|
||||
functionToExecute={() => props.deleteChapter(props.info.list.chapter.id)}
|
||||
status='warning'
|
||||
></ConfirmationModal>
|
||||
|
||||
</div>
|
||||
<Droppable key={props.info.list.chapter.id} droppableId={props.info.list.chapter.id} type="activity">
|
||||
{(provided) => (
|
||||
<ActivitiesList {...provided.droppableProps} ref={provided.innerRef}>
|
||||
<div className="flex flex-col">
|
||||
{props.info.list.activities.map((activity: any, index: any) => (
|
||||
<Activity orgslug={props.orgslug} courseid={props.courseid} key={activity.id} activity={activity} index={index}></Activity>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
|
||||
<div onClick={() => {
|
||||
props.openNewActivityModal(props.info.list.chapter.id);
|
||||
}} className="flex space-x-2 items-center py-2 my-3 rounded-md justify-center text-white bg-black hover:cursor-pointer">
|
||||
<Sparkles className="" size={17} />
|
||||
<div className="text-sm mx-auto my-auto items-center font-bold">Add Activity + </div>
|
||||
</div>
|
||||
</div>
|
||||
</ActivitiesList>
|
||||
|
||||
)}
|
||||
</Droppable>
|
||||
|
||||
</ChapterWrapper>
|
||||
)}
|
||||
</Draggable>
|
||||
);
|
||||
}
|
||||
|
||||
const ChapterWrapper = styled.div`
|
||||
margin-bottom: 20px;
|
||||
padding: 12px;
|
||||
font-size: 15px;
|
||||
display: block;
|
||||
border-radius: 9px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.19);
|
||||
box-shadow: 0px 13px 33px -13px rgb(0 0 0 / 12%);
|
||||
transition: all 0.2s ease;
|
||||
h3{
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
const ActivitiesList = styled.div`
|
||||
padding: 10px;
|
||||
`;
|
||||
|
||||
export default Chapter;
|
||||
20
apps/web/components/Pages/CourseEdit/Draggables/data.ts
Normal file
20
apps/web/components/Pages/CourseEdit/Draggables/data.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
export const initialData = {
|
||||
activities: {
|
||||
"activity-1": { id: "activity-1", content: "First activity" },
|
||||
"activity-2": { id: "activity-2", content: "Second activity" },
|
||||
"activity-3": { id: "activity-3", content: "Third activity" },
|
||||
"activity-4": { id: "activity-4", content: "Fourth activity" },
|
||||
"activity-5": { id: "activity-5", content: "Fifth activity" },
|
||||
},
|
||||
chapters: {
|
||||
"chapter-1": { id: "chapter-1", name: "Chapter 1", activityIds: ["activity-1", "activity-2", "activity-3"] },
|
||||
"chapter-2": { id: "chapter-2", name: "Chapter 2", activityIds: ["activity-4"] },
|
||||
"chapter-3": { id: "chapter-3", name: "Chapter 3", activityIds: ["activity-5"] },
|
||||
},
|
||||
|
||||
chapterOrder: ["chapter-1", "chapter-2", "chapter-3"],
|
||||
};
|
||||
|
||||
export const initialData2 = {
|
||||
};
|
||||
|
||||
74
apps/web/components/Pages/Courses/ActivityIndicators.tsx
Normal file
74
apps/web/components/Pages/Courses/ActivityIndicators.tsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
|
||||
import { getUriWithOrg } from '@services/config/config'
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
|
||||
|
||||
interface Props {
|
||||
course: any
|
||||
orgslug: string
|
||||
course_id: string
|
||||
current_activity?: any
|
||||
}
|
||||
|
||||
function ActivityIndicators(props: Props) {
|
||||
const course = props.course
|
||||
const orgslug = props.orgslug
|
||||
const courseid = props.course_id.replace("course_", "")
|
||||
|
||||
const done_activity_style = 'bg-teal-600 hover:bg-teal-700'
|
||||
const black_activity_style = 'bg-black hover:bg-gray-700'
|
||||
const current_activity_style = 'bg-gray-600 animate-pulse hover:bg-gray-700'
|
||||
|
||||
|
||||
function isActivityDone(activity: any) {
|
||||
if (course.trail.activities_marked_complete && course.trail.activities_marked_complete.includes(activity.id) && course.trail.status == "ongoing") {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
function isActivityCurrent(activity: any) {
|
||||
let activityid = activity.id.replace("activity_", "")
|
||||
if (props.current_activity && props.current_activity == activityid) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
function getActivityClass(activity: any) {
|
||||
if (isActivityDone(activity)) {
|
||||
return done_activity_style
|
||||
}
|
||||
if (isActivityCurrent(activity)) {
|
||||
return current_activity_style
|
||||
}
|
||||
return black_activity_style
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className='grid grid-flow-col justify-stretch space-x-6'>
|
||||
{course.chapters.map((chapter: any) => {
|
||||
return (
|
||||
<>
|
||||
<div className='grid grid-flow-col justify-stretch space-x-2'>
|
||||
{chapter.activities.map((activity: any) => {
|
||||
return (
|
||||
<ToolTip sideOffset={8} slateBlack content={activity.name} key={activity.id}>
|
||||
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
|
||||
<div className={`h-[7px] w-auto ${getActivityClass(activity)} rounded-lg shadow-md`}></div>
|
||||
|
||||
</Link>
|
||||
</ToolTip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ActivityIndicators
|
||||
64
apps/web/components/Pages/Trail/TrailCourseElement.tsx
Normal file
64
apps/web/components/Pages/Trail/TrailCourseElement.tsx
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
'use client';
|
||||
import { getAPIUrl, getBackendUrl, getUriWithOrg } from '@services/config/config';
|
||||
import { removeCourse } from '@services/courses/activity';
|
||||
import { getCourseThumbnailMediaDirectory } from '@services/media/media';
|
||||
import { revalidateTags } from '@services/utils/ts/requests';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { mutate } from 'swr';
|
||||
|
||||
interface TrailCourseElementProps {
|
||||
course: any
|
||||
orgslug: string
|
||||
}
|
||||
|
||||
function TrailCourseElement(props: TrailCourseElementProps) {
|
||||
const courseid = props.course.course_id.replace("course_", "")
|
||||
const course = props.course
|
||||
const router = useRouter();
|
||||
|
||||
async function quitCourse(course_id: string) {
|
||||
// Close activity
|
||||
let activity = await removeCourse(course_id, props.orgslug);
|
||||
// Mutate course
|
||||
await revalidateTags(['courses'], props.orgslug);
|
||||
router.refresh();
|
||||
|
||||
// Mutate
|
||||
mutate(`${getAPIUrl()}trail/org_slug/${props.orgslug}/trail`);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='trailcoursebox flex p-3 bg-white rounded-xl' style={{ boxShadow: '0px 4px 7px 0px rgba(0, 0, 0, 0.03)' }}>
|
||||
|
||||
<Link href={getUriWithOrg(props.orgslug, "/course/" + courseid)}>
|
||||
<div className="course_tumbnail inset-0 ring-1 ring-inset ring-black/10 rounded-lg relative h-[50px] w-[72px] bg-cover bg-center" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(props.course.course_object.org_id, props.course.course_object.course_id, props.course.course_object.thumbnail)})`, boxShadow: '0px 4px 7px 0px rgba(0, 0, 0, 0.03)' }}></div>
|
||||
</Link>
|
||||
<div className="course_meta pl-5 flex-grow space-y-1">
|
||||
<div className="course_top">
|
||||
<div className="course_info flex">
|
||||
<div className="course_basic flex flex-col flex-end -space-y-2">
|
||||
<p className='p-0 font-bold text-sm text-gray-700'>Course</p>
|
||||
<div className="course_progress flex items-center space-x-2">
|
||||
<h2 className='font-bold text-xl'>{course.course_object.name}</h2>
|
||||
<div className='bg-slate-300 rounded-full w-[10px] h-[5px]'></div>
|
||||
<h2>{course.progress}%</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="course_actions flex-grow flex flex-row-reverse">
|
||||
<button onClick={() => quitCourse(course.course_id)} className="bg-red-200 text-red-700 hover:bg-red-300 rounded-full text-xs h-5 px-2 font-bold">Quit Course</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="course_progress indicator w-full">
|
||||
<div className="w-full bg-gray-200 rounded-full h-1.5 ">
|
||||
<div className={`bg-teal-600 h-1.5 rounded-full`} style={{ width: `${course.progress}%` }} ></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TrailCourseElement
|
||||
Loading…
Add table
Add a link
Reference in a new issue