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: refactor + home improvements

Browse source
This commit is contained in:
swve 2023-09-21 17:55:28 +02:00
parent 832394777e
commit ebb8c64fd7
8 changed files with 187 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

100
front/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx
View file

@ -1,23 +1,13 @@
'use client';
import CreateCourseModal from '@components/Objects/Modals/Course/Create/CreateCourse';
import Modal from '@components/StyledElements/Modal/Modal';
import { getBackendUrl, getUriWithOrg } from '@services/config/config';
import CoursesLogo from "public/svg/courses.svg";
import CollectionsLogo from "public/svg/collections.svg";
import { deleteCourseFromBackend } from '@services/courses/courses';
import Link from 'next/link';
import React from 'react'
import Image from 'next/image';
import { AuthContext } from '@components/Security/AuthProvider';
import { revalidateTags } from '@services/utils/ts/requests';
import { useRouter } from 'next/navigation';
import { useSearchParams } from 'next/navigation';
import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper';
import TypeOfContentTitle from '@components/StyledElements/Titles/TypeOfContentTitle';
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement';
import { getCourseThumbnailMediaDirectory } from '@services/media/media';
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal';
import { Pencil, X } from 'lucide-react';
import CourseThumbnail from '@components/Objects/Other/CourseThumbnail';
import NewCourseButton from '@components/StyledElements/Buttons/NewCourseButton';
interface CourseProps {
orgslug: string;
@ -25,23 +15,12 @@ interface CourseProps {
org_id: string;
}
// function to remove "course_" from the course_id
function removeCoursePrefix(course_id: string) {
return course_id.replace("course_", "");
}
function Courses(props: CourseProps) {
const orgslug = props.orgslug;
const courses = props.courses;
const [newCourseModal, setNewCourseModal] = React.useState(false);
const router = useRouter();
async function deleteCourses(course_id: any) {
await deleteCourseFromBackend(course_id);
await revalidateTags(['courses'], orgslug);
router.refresh();
}
const searchParams = useSearchParams();
const isCreatingCourse = searchParams.get('new') ? true : false;
const [newCourseModal, setNewCourseModal] = React.useState(isCreatingCourse);
async function closeNewCourseModal() {
setNewCourseModal(false);
@ -65,8 +44,10 @@ function Courses(props: CourseProps) {
dialogTitle="Create Course"
dialogDescription="Create a new course"
dialogTrigger={
<button className="rounded-md bg-black antialiased ring-offset-purple-800 p-2 px-5 my-auto font text-sm font-bold text-white drop-shadow-lg">Add Course + </button>
}
<button>
<NewCourseButton />
</button>}
/>
</AuthenticatedClientElement>
</div>
@ -79,39 +60,48 @@ function Courses(props: CourseProps) {
<CourseThumbnail course={course} orgslug={orgslug} />
</div>
))}
{courses.length == 0 &&
<div className="flex mx-auto h-[400px]">
<div className="flex flex-col justify-center text-center items-center space-y-5">
<div className='mx-auto'>
<svg width="120" height="120" viewBox="0 0 295 295" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.51" x="10" y="10" width="275" height="275" rx="75" stroke="#4B5564" stroke-opacity="0.15" stroke-width="20" />
<path d="M135.8 200.8V130L122.2 114.6L135.8 110.4V102.8L122.2 87.4L159.8 76V200.8L174.6 218H121L135.8 200.8Z" fill="#4B5564" fill-opacity="0.08" />
</svg>
</div>
<div className="space-y-0">
<h1 className="text-3xl font-bold text-gray-600">No courses yet</h1>
<p className="text-lg text-gray-400">Create a course to add content</p>
</div>
<AuthenticatedClientElement checkMethod='roles' orgId={props.org_id}>
<Modal
isDialogOpen={newCourseModal}
onOpenChange={setNewCourseModal}
minHeight="md"
dialogContent={<CreateCourseModal
closeModal={closeNewCourseModal}
orgslug={orgslug}
></CreateCourseModal>}
dialogTitle="Create Course"
dialogDescription="Create a new course"
dialogTrigger={
<button>
<NewCourseButton />
</button>}
/>
</AuthenticatedClientElement>
</div>
</div>
}
</div>
</GeneralWrapperStyled>
</div>
)
}
const AdminEditsArea = (props: { orgSlug: string, courseId: string, course: any, deleteCourses: any }) => {
return (
<AuthenticatedClientElement checkMethod='roles' orgId={props.course.org_id}><div className="flex space-x-1 relative top-8 z-20 left-2">
<ConfirmationModal
confirmationButtonText='Delete Course'
confirmationMessage='Are you sure you want to delete this course?'
dialogTitle={'Delete ' + props.course.name + ' ?'}
dialogTrigger={
<div
className=" hover:cursor-pointer p-1 px-4 bg-red-600 rounded-md"
rel="noopener noreferrer">
<X size={15} className="text-rose-200 font-bold" />
</div>}
functionToExecute={() => props.deleteCourses(props.courseId)}
status='warning'
></ConfirmationModal>
<Link href={getUriWithOrg(props.orgSlug, "/course/" + removeCoursePrefix(props.courseId) + "/edit")}>
<div
className=" hover:cursor-pointer p-1 px-4 bg-orange-600 rounded-md"
rel="noopener noreferrer">
<Pencil size={15} className="text-orange-200 font-bold" />
</div>
</Link>
</div>
</AuthenticatedClientElement>
)
}
export default Courses