mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
Merge pull request #82 from learnhouse/swve/eng-14-edition-creation-buttons-for
Edition & Creation buttons for administrative roles only
This commit is contained in:
Badr B
GitHub
commit
c6fea27d0d
3 changed files with 171 additions and 107 deletions
155
front/app/_orgs/[orgslug]/(withmenu)/courses/courses.tsx
Normal file
155
front/app/_orgs/[orgslug]/(withmenu)/courses/courses.tsx
Normal file
|
|
@ -0,0 +1,155 @@
|
||||||
|
'use client';
|
||||||
|
import CreateCourseModal from '@components/Modals/Course/Create/CreateCourse';
|
||||||
|
import Modal from '@components/UI/Modal/Modal';
|
||||||
|
import { Edit2, Trash } from "lucide-react";
|
||||||
|
import { getAPIUrl, 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';
|
||||||
|
|
||||||
|
interface CourseProps {
|
||||||
|
orgslug: string;
|
||||||
|
courses: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Courses(props: CourseProps) {
|
||||||
|
const orgslug = props.orgslug;
|
||||||
|
const courses = props.courses;
|
||||||
|
const [newCourseModal, setNewCourseModal] = React.useState(false);
|
||||||
|
|
||||||
|
async function deleteCourses(course_id: any) {
|
||||||
|
await deleteCourseFromBackend(course_id);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function closeNewCourseModal() {
|
||||||
|
setNewCourseModal(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
// function to remove "course_" from the course_id
|
||||||
|
function removeCoursePrefix(course_id: string) {
|
||||||
|
return course_id.replace("course_", "");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className='max-w-7xl mx-auto px-4'>
|
||||||
|
<div className='flex flex-wrap justify-between'>
|
||||||
|
<Title title="Courses" type="cou" />
|
||||||
|
<Modal
|
||||||
|
isDialogOpen={newCourseModal}
|
||||||
|
onOpenChange={setNewCourseModal}
|
||||||
|
minHeight="md"
|
||||||
|
dialogContent={<CreateCourseModal
|
||||||
|
closeModal={closeNewCourseModal}
|
||||||
|
orgslug={orgslug}
|
||||||
|
></CreateCourseModal>}
|
||||||
|
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>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div className="flex space-x-5">
|
||||||
|
|
||||||
|
{courses.map((course: any) => (
|
||||||
|
<div key={course.course_id}>
|
||||||
|
<AdminEditsArea course={course} course_id={course.course_id} deleteCourses={deleteCourses} />
|
||||||
|
<Link href={getUriWithOrg(orgslug, "/course/" + removeCoursePrefix(course.course_id))}>
|
||||||
|
<div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[131px] bg-cover" style={{ backgroundImage: `url(${getBackendUrl()}content/uploads/img/${course.thumbnail})` }}>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
<h2 className="font-bold text-lg w-[250px] py-2">{course.name}</h2>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Title = (props: any) => {
|
||||||
|
return (
|
||||||
|
<div className="home_category_title flex my-5">
|
||||||
|
<div className="rounded-full ring-1 ring-slate-900/5 shadow-sm p-2 my-auto mr-4">
|
||||||
|
<Image className="" src={props.type == "col" ? CollectionsLogo : CoursesLogo} alt="Courses logo" />
|
||||||
|
</div>
|
||||||
|
<h1 className="font-bold text-lg">{props.title}</h1>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const AdminEditsArea = (props: any) => {
|
||||||
|
const org_roles_values = ["admin", "owner"];
|
||||||
|
const user_roles_values = ["role_admin"];
|
||||||
|
|
||||||
|
const auth: any = React.useContext(AuthContext);
|
||||||
|
console.log("auth: ", auth);
|
||||||
|
|
||||||
|
|
||||||
|
// this is amazingly terrible code, but gotta release that MVP
|
||||||
|
// TODO: fix this
|
||||||
|
|
||||||
|
function isAuthorized() {
|
||||||
|
const org_id = props.course.org_id;
|
||||||
|
const org_roles = auth.userInfo.user_object.orgs;
|
||||||
|
const user_roles = auth.userInfo.user_object.roles;
|
||||||
|
const org_role = org_roles.find((org: any) => org.org_id == org_id);
|
||||||
|
const user_role = user_roles.find((role: any) => role.org_id == org_id);
|
||||||
|
|
||||||
|
if (org_role && user_role) {
|
||||||
|
if (org_roles_values.includes(org_role.org_role) && user_roles_values.includes(user_role.role_id)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// this is amazingly terrible code, but gotta release that MVP
|
||||||
|
// TODO: fix this
|
||||||
|
|
||||||
|
if (auth.isAuthenticated) {
|
||||||
|
if (isAuthorized()) {
|
||||||
|
return (
|
||||||
|
<div className="flex space-x-2 py-2">
|
||||||
|
<button className="rounded-md text-sm px-3 font-bold text-red-800 bg-red-200 w-16 flex justify-center items-center" onClick={() => props.deleteCourses(props.course_id)}>
|
||||||
|
Delete <Trash size={10}></Trash>
|
||||||
|
</button>
|
||||||
|
<Link href={getUriWithOrg(props.orgslug, "/course/" + props.course_id + "/edit")}>
|
||||||
|
<button className="rounded-md text-sm px-3 font-bold text-orange-800 bg-orange-200 w-16 flex justify-center items-center">
|
||||||
|
Edit <Edit2 size={10}></Edit2>
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<div></div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return (
|
||||||
|
<div></div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default Courses
|
||||||
|
|
@ -1,113 +1,24 @@
|
||||||
"use client";
|
|
||||||
import Link from "next/link";
|
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import styled from "styled-components";
|
import Courses from "./courses";
|
||||||
import { Title } from "@components/UI/Elements/Styles/Title";
|
import { getOrgCourses } from "@services/courses/courses";
|
||||||
import { getAPIUrl, getBackendUrl, getSelfHostedOption, getUriWithOrg } from "@services/config/config";
|
import { Metadata } from "next";
|
||||||
import { deleteCourseFromBackend } from "@services/courses/courses";
|
|
||||||
import useSWR, { mutate } from "swr";
|
|
||||||
import { swrFetcher } from "@services/utils/ts/requests";
|
|
||||||
import { Edit2, Trash } from "lucide-react";
|
|
||||||
import Modal from "@components/UI/Modal/Modal";
|
|
||||||
import CreateCourseModal from "@components/Modals/Course/Create/CreateCourse";
|
|
||||||
|
|
||||||
const CoursesIndexPage = (params: any) => {
|
export const metadata: Metadata = {
|
||||||
const router = useRouter();
|
title: 'LearnHouse - Courses',
|
||||||
|
description: 'courses',
|
||||||
|
};
|
||||||
|
|
||||||
|
const CoursesPage = async (params: any) => {
|
||||||
const orgslug = params.params.orgslug;
|
const orgslug = params.params.orgslug;
|
||||||
const [newCourseModal, setNewCourseModal] = React.useState(false);
|
const courses = await getOrgCourses(orgslug);
|
||||||
|
|
||||||
const { data: courses, error: error } = useSWR(`${getAPIUrl()}courses/org_slug/${orgslug}/page/1/limit/10`, swrFetcher);
|
|
||||||
|
|
||||||
async function deleteCourses(course_id: any) {
|
|
||||||
await deleteCourseFromBackend(course_id);
|
|
||||||
mutate(`${getAPIUrl()}courses/org_slug/${orgslug}/page/1/limit/10`);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function closeNewCourseModal() {
|
|
||||||
setNewCourseModal(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
// function to remove "course_" from the course_id
|
|
||||||
function removeCoursePrefix(course_id: string) {
|
|
||||||
return course_id.replace("course_", "");
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div>
|
||||||
<Title>
|
<Courses orgslug={orgslug} courses={courses}/>
|
||||||
Courses {" "}
|
|
||||||
<Modal
|
|
||||||
isDialogOpen={newCourseModal}
|
|
||||||
onOpenChange={setNewCourseModal}
|
|
||||||
minHeight="md"
|
|
||||||
dialogContent={<CreateCourseModal
|
|
||||||
closeModal={closeNewCourseModal}
|
|
||||||
orgslug={orgslug}
|
|
||||||
></CreateCourseModal>}
|
|
||||||
dialogTitle="Create Course"
|
|
||||||
dialogDescription="Create a new course"
|
|
||||||
dialogTrigger={
|
|
||||||
<button className="rounded-md bg-black antialiased ring-offset-purple-800 p-2 px-5 font text-sm font-bold text-white drop-shadow-lg">Add Course + </button>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Title>
|
|
||||||
{error && <p>Failed to load</p>}
|
|
||||||
{!courses ? (
|
|
||||||
<div>Loading...</div>
|
|
||||||
) : (
|
|
||||||
<CourseWrapper className="flex space-x-5">
|
|
||||||
{courses.map((course: any) => (
|
|
||||||
<div key={course.course_id}>
|
|
||||||
<div className="flex space-x-2 py-2">
|
|
||||||
<button className="rounded-md text-sm px-3 font-bold text-red-800 bg-red-200 w-16 flex justify-center items-center" onClick={() => deleteCourses(course.course_id)}>
|
|
||||||
Delete <Trash size={10}></Trash>
|
|
||||||
</button>
|
|
||||||
<Link href={getUriWithOrg(orgslug, "/course/" + removeCoursePrefix(course.course_id) + "/edit")}>
|
|
||||||
<button className="rounded-md text-sm px-3 font-bold text-orange-800 bg-orange-200 w-16 flex justify-center items-center">
|
|
||||||
Edit <Edit2 size={10}></Edit2>
|
|
||||||
</button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
<Link href={getUriWithOrg(orgslug, "/course/" + removeCoursePrefix(course.course_id))}>
|
|
||||||
<CourseThumbnail className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[131px] bg-cover" style={{backgroundImage : `url(${getBackendUrl()}content/uploads/img/${course.thumbnail})`}}>
|
|
||||||
|
|
||||||
</CourseThumbnail>
|
|
||||||
</Link>
|
|
||||||
<h2>{course.name}</h2>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</CourseWrapper>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default CoursesIndexPage;
|
export default CoursesPage;
|
||||||
|
|
||||||
const CourseThumbnail = styled.div`
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 249px;
|
|
||||||
height: 131px;
|
|
||||||
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const CourseWrapper = styled.div`
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: 1500px;
|
|
||||||
div {
|
|
||||||
h2 {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin-top: 10px;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
width: 250px;
|
|
||||||
height: 50px;
|
|
||||||
color: #424242;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
|
||||||
|
|
@ -23,9 +23,7 @@ const OrgHomePage = async (params: any) => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
<AuthProvider>
|
|
||||||
<Menu orgslug={orgslug}></Menu>
|
|
||||||
</AuthProvider>
|
|
||||||
<div className="max-w-7xl mx-auto px-4 py-10">
|
<div className="max-w-7xl mx-auto px-4 py-10">
|
||||||
{/* Collections */}
|
{/* Collections */}
|
||||||
<Title title="Collections" type="col" />
|
<Title title="Collections" type="col" />
|
||||||
Loading…
Add table
Add a link
Reference in a new issue