rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: init assignments UI and fix bugs

Browse source
This commit is contained in:
swve 2024-07-12 21:28:50 +02:00
parent 10e9be1d33
commit 6a4e16ec29
16 changed files with 436 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

32
apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/TaskEditor.tsx Normal file
View file

@ -0,0 +1,32 @@
'use client';
import { Info, Link } from 'lucide-react'
import React from 'react'
function AssignmentTaskEditor({ task_uuid, page }: any) {
const [selectedSubPage, setSelectedSubPage] = React.useState(page)
return (
<div className="flex flex-col font-black text-sm w-full z-20">
<div className='flex flex-col bg-white pl-10 pr-10 text-sm tracking-tight z-10 shadow-[0px_4px_16px_rgba(0,0,0,0.06)] pt-5'>
<div className='font-semibold text-lg py-1'>
Assignment Test #1
</div>
<div className='flex space-x-2 '>
<div
className={`flex space-x-4 py-2 w-fit text-center border-black transition-all ease-linear ${selectedSubPage === 'overview'
? 'border-b-4'
: 'opacity-50'
} cursor-pointer`}
>
<div className="flex items-center space-x-2.5 mx-2">
<Info size={16} />
<div>Overview</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default AssignmentTaskEditor

35
apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/_components/Tasks.tsx Normal file
View file

@ -0,0 +1,35 @@
import { useAssignments } from '@components/Contexts/Assignments/AssignmentContext'
import { Plus } from 'lucide-react';
import React, { useEffect } from 'react'
function AssignmentTasks() {
const assignments = useAssignments() as any;
useEffect(() => {
console.log(assignments)
}, [assignments])
return (
<div className='flex w-full'>
<div className='flex flex-col space-y-3 mx-auto'>
{assignments && assignments?.assignment_tasks?.map((task: any) => {
return (
<div key={task.id} className='flex flex-col w-[250px] nice-shadow bg-white shadow-[0px_4px_16px_rgba(0,0,0,0.06)] p-3 rounded-md'>
<div className='flex justify-between px-2'>
<div className='font-semibold text-sm'>{task.title}</div>
</div>
</div>
)
})}
<div className='flex space-x-1.5 px-2 py-2 bg-black text-white text-xs rounded-md antialiased items-center font-semibold cursor-pointer'>
<Plus size={17} />
<p>Add Task</p>
</div>
</div>
</div>
)
}
export default AssignmentTasks

59
apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx Normal file
View file

@ -0,0 +1,59 @@
'use client';
import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs'
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
import { BookOpen, BookOpenCheck, BookX, Check, Ellipsis, EllipsisVertical, GalleryVerticalEnd, Info, LayoutList, UserRoundCog } from 'lucide-react'
import React from 'react'
import AssignmentTaskEditor from './_components/TaskEditor';
import { AssignmentProvider } from '@components/Contexts/Assignments/AssignmentContext';
import AssignmentTasks from './_components/Tasks';
import { useParams } from 'next/navigation';
function AssignmentEdit() {
const params = useParams<{ assignmentuuid: string; }>()
return (
<div className='flex w-full flex-col'>
<div className='pb-5 bg-white z-50 shadow-[0px_4px_16px_rgba(0,0,0,0.06)] nice-shadow'>
<div className='flex justify-between mr-10 h-full'>
<div className="pl-10 mr-10 tracking-tighter">
<BreadCrumbs type="assignments" last_breadcrumb='UUID' />
<div className="w-100 flex justify-between">
<div className="flex font-bold text-2xl">Assignment Editor</div>
</div>
</div>
<div className='flex flex-col justify-center antialiased'>
<div className='flex mx-auto mt-5 items-center space-x-4'>
<div className='flex bg-green-200/60 text-xs rounded-full px-3.5 py-2 mx-auto font-bold outline outline-1 outline-green-300'>Published</div>
<div><EllipsisVertical className='text-gray-500' size={13} /></div>
<div className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-gradient-to-bl text-green-800 font-medium from-green-400/50 to-lime-200/80 border border-green-600/10 shadow-green-900/10 shadow-lg'>
<BookOpen size={18} />
<p className=' text-sm font-bold'>Publish</p>
</div>
<div className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-gradient-to-bl text-gray-800 font-medium from-gray-400/50 to-gray-200/80 border border-gray-600/10 shadow-gray-900/10 shadow-lg'>
<BookX size={18} />
<p className='text-sm font-bold'>Unpublish</p>
</div>
</div>
</div>
</div>
</div>
<div className="flex w-full">
<div className='flex w-[400px] flex-col h-screen custom-dots-bg'>
<div className='flex mx-auto px-3.5 py-1 bg-neutral-600/80 space-x-2 my-5 items-center text-sm font-bold text-white rounded-full'>
<LayoutList size={18} />
<p>Tasks</p>
</div>
<AssignmentProvider assignment_uuid='assignment_a35fdbb9-11bd-40cf-a781-f6bdd5d87165'>
<AssignmentTasks />
</AssignmentProvider>
</div>
<div className='flex flex-grow bg-[#fefcfe] nice-shadow h-screen w-full'>
<AssignmentProvider assignment_uuid={'assignment_' + params.assignmentuuid}>
<AssignmentTaskEditor task_uuid='UUID' page='overview' />
</AssignmentProvider>
</div>
</div>
</div>
)
}
export default AssignmentEdit

9
apps/web/app/orgs/[orgslug]/dash/assignments/page.tsx Normal file
View file

@ -0,0 +1,9 @@
import React from 'react'
function AssignmentsHome() {
return (
<div>AssignmentsHome</div>
)
}
export default AssignmentsHome

1
apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx
View file

@ -82,7 +82,6 @@ function CourseOverviewPage({ params }: { params: CourseOverviewParams }) {
</div>
</div>
</Link>
</div>
</div>