mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
refactor: use components for thumbnails
This commit is contained in:
swve
parent
16cd5e4cf5
commit
832394777e
6 changed files with 171 additions and 96 deletions
|
|
@ -1,48 +0,0 @@
|
|||
'use client';
|
||||
|
||||
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement';
|
||||
import { AuthContext } from '@components/Security/AuthProvider';
|
||||
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal';
|
||||
import { getUriWithOrg } from '@services/config/config';
|
||||
import { deleteCollection } from '@services/courses/collections';
|
||||
import { revalidateTags } from '@services/utils/ts/requests';
|
||||
import { Link, Trash, X } from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import React from 'react'
|
||||
|
||||
const CollectionAdminEditsArea = (props: any) => {
|
||||
const router = useRouter();
|
||||
|
||||
const deleteCollectionUI = async (collectionId: number) => {
|
||||
await deleteCollection(collectionId);
|
||||
await revalidateTags(["collections"], props.orgslug);
|
||||
// reload the page
|
||||
router.refresh();
|
||||
router.push(getUriWithOrg(props.orgslug, "/collections"));
|
||||
|
||||
// refresh page (FIX for Next.js BUG)
|
||||
//window.location.reload();
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthenticatedClientElement orgId={props.org_id} checkMethod='roles'>
|
||||
<div className="flex space-x-2 relative top-8 z-20 left-2">
|
||||
<ConfirmationModal
|
||||
confirmationMessage="Are you sure you want to delete this collection?"
|
||||
confirmationButtonText="Delete Collection"
|
||||
dialogTitle={"Delete " + props.collection.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={() => deleteCollectionUI(props.collection_id)}
|
||||
status='warning'
|
||||
></ConfirmationModal>
|
||||
</div>
|
||||
</AuthenticatedClientElement>
|
||||
)
|
||||
}
|
||||
|
||||
export default CollectionAdminEditsArea;
|
||||
|
|
@ -7,9 +7,9 @@ import { getOrganizationContextInfo } from "@services/organizations/orgs";
|
|||
import { Metadata } from "next";
|
||||
import { cookies } from "next/headers";
|
||||
import Link from "next/link";
|
||||
import CollectionAdminEditsArea from "./admin";
|
||||
import { getCourseThumbnailMediaDirectory } from "@services/media/media";
|
||||
import { getAccessTokenFromRefreshTokenCookie, getNewAccessTokenUsingRefreshTokenServer } from "@services/auth/auth";
|
||||
import CollectionThumbnail from "@components/Objects/Other/CollectionThumbnail";
|
||||
|
||||
type MetadataProps = {
|
||||
params: { orgslug: string, courseid: string };
|
||||
|
|
@ -45,10 +45,6 @@ export async function generateMetadata(
|
|||
};
|
||||
}
|
||||
|
||||
const removeCollectionPrefix = (collectionid: string) => {
|
||||
return collectionid.replace("collection_", "")
|
||||
}
|
||||
|
||||
|
||||
const CollectionsPage = async (params: any) => {
|
||||
const cookieStore = cookies();
|
||||
|
|
@ -71,19 +67,7 @@ const CollectionsPage = async (params: any) => {
|
|||
<div className="home_collections flex flex-wrap">
|
||||
{collections.map((collection: any) => (
|
||||
<div className="flex flex-col py-3 px-3" key={collection.collection_id}>
|
||||
<CollectionAdminEditsArea orgslug={orgslug} org_id={org_id} collection_id={collection.collection_id} collection={collection} />
|
||||
<Link href={getUriWithOrg(orgslug, "/collection/" + removeCollectionPrefix(collection.collection_id))}>
|
||||
<div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[180px] bg-cover flex flex-col items-center justify-center bg-indigo-600 font-bold text-zinc-50" >
|
||||
<h1 className="font-bold text-lg py-2 justify-center mb-2">{collection.name}</h1>
|
||||
<div className="flex -space-x-4">
|
||||
{collection.courses.slice(0, 3).map((course: any) => (
|
||||
<Link key={course.course_id} href={getUriWithOrg(orgslug, "/course/" + course.course_id.substring(7))}>
|
||||
<img className="w-12 h-12 rounded-full flex items-center justify-center shadow-lg ring-2 ring-white z-50" key={course.course_id} src={`${getCourseThumbnailMediaDirectory(course.org_id, course.course_id, course.thumbnail)}`} alt={course.name} />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<CollectionThumbnail collection={collection} orgslug={orgslug} org_id={org_id} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import AuthenticatedClientElement from '@components/Security/AuthenticatedClient
|
|||
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';
|
||||
|
||||
interface CourseProps {
|
||||
orgslug: string;
|
||||
|
|
@ -75,13 +76,7 @@ function Courses(props: CourseProps) {
|
|||
<div className="flex flex-wrap">
|
||||
{courses.map((course: any) => (
|
||||
<div className="px-3" key={course.course_id}>
|
||||
<AdminEditsArea course={course} orgSlug={orgslug} courseId={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(${getCourseThumbnailMediaDirectory(course.org_id, course.course_id, course.thumbnail)})` }}>
|
||||
|
||||
</div>
|
||||
</Link>
|
||||
<h2 className="font-bold text-lg w-[250px] py-2">{course.name}</h2>
|
||||
<CourseThumbnail course={course} orgslug={orgslug} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -107,11 +102,11 @@ const AdminEditsArea = (props: { orgSlug: string, courseId: string, course: any,
|
|||
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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@ import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWra
|
|||
import TypeOfContentTitle from '@components/StyledElements/Titles/TypeOfContentTitle';
|
||||
import { getCourseThumbnailMediaDirectory } from '@services/media/media';
|
||||
import { getAccessTokenFromRefreshTokenCookie, getNewAccessTokenUsingRefreshTokenServer } from '@services/auth/auth';
|
||||
import CourseThumbnail from '@components/Objects/Other/CourseThumbnail';
|
||||
import CollectionThumbnail from '@components/Objects/Other/CollectionThumbnail';
|
||||
|
||||
type MetadataProps = {
|
||||
params: { orgslug: string };
|
||||
|
|
@ -74,18 +76,7 @@ const OrgHomePage = async (params: any) => {
|
|||
<div className="home_collections flex flex-wrap">
|
||||
{collections.map((collection: any) => (
|
||||
<div className="flex flex-col py-3 px-3" key={collection.collection_id}>
|
||||
<Link href={getUriWithOrg(orgslug, "/collection/" + removeCollectionPrefix(collection.collection_id))}>
|
||||
<div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[180px] bg-cover flex flex-col items-center justify-center bg-indigo-600 font-bold text-zinc-50" >
|
||||
<h1 className="font-bold text-lg py-2 justify-center mb-2">{collection.name}</h1>
|
||||
<div className="flex -space-x-4">
|
||||
{collection.courses.slice(0, 3).map((course: any) => (
|
||||
<Link key={course.course_id} href={getUriWithOrg(orgslug, "/course/" + course.course_id.substring(7))}>
|
||||
<img className="w-12 h-12 rounded-full flex items-center justify-center shadow-lg ring-2 ring-white z-50" key={course.course_id} src={`${getCourseThumbnailMediaDirectory(course.org_id, course.course_id, course.thumbnail)}`} alt={course.name} />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<CollectionThumbnail collection={collection} orgslug={orgslug} org_id={org.org_id} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -96,11 +87,7 @@ const OrgHomePage = async (params: any) => {
|
|||
<div className="home_courses flex flex-wrap">
|
||||
{courses.map((course: any) => (
|
||||
<div className="py-3 px-3" key={course.course_id}>
|
||||
<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 transition-all hover:scale-102" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(course.org_id, course.course_id, course.thumbnail)})` }}>
|
||||
</div>
|
||||
</Link>
|
||||
<h2 className="font-bold text-lg w-[250px] py-2">{course.name}</h2>
|
||||
<CourseThumbnail course={course} orgslug={orgslug} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
81
front/components/Objects/Other/CollectionThumbnail.tsx
Normal file
81
front/components/Objects/Other/CollectionThumbnail.tsx
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
"use client";
|
||||
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
|
||||
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
|
||||
import { getUriWithOrg } from '@services/config/config'
|
||||
import { deleteCollection } from '@services/courses/collections'
|
||||
import { getCourseThumbnailMediaDirectory } from '@services/media/media'
|
||||
import { revalidateTags } from '@services/utils/ts/requests'
|
||||
import { X } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import React from 'react'
|
||||
|
||||
type PropsType = {
|
||||
collection: any,
|
||||
orgslug: string,
|
||||
org_id: string
|
||||
}
|
||||
|
||||
const removeCollectionPrefix = (collectionid: string) => {
|
||||
return collectionid.replace("collection_", "")
|
||||
}
|
||||
|
||||
function CollectionThumbnail(props: PropsType) {
|
||||
return (
|
||||
<div className='relative'>
|
||||
<CollectionAdminEditsArea orgslug={props.orgslug} org_id={props.org_id} collection_id={props.collection.collection_id} collection={props.collection} />
|
||||
<Link href={getUriWithOrg(props.orgslug, "/collection/" + removeCollectionPrefix(props.collection.collection_id))}>
|
||||
<div className="space-y-2 inset-0 ring-1 ring-inset my-auto ring-black/10 rounded-xl shadow-xl relative w-[249px] h-[180px] bg-cover flex flex-col items-center justify-center bg-indigo-600 font-bold text-zinc-50" >
|
||||
<div className="flex -space-x-5">
|
||||
{props.collection.courses.slice(0, 3).map((course: any) => (
|
||||
<Link key={course.course_id} href={getUriWithOrg(props.orgslug, "/course/" + course.course_id.substring(7))}>
|
||||
|
||||
<div className="inset-0 rounded-xl shadow-xl bg-cover w-24 h-12 justify-center ring-indigo-800 ring-4" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(props.collection.org_id, course.course_id, course.thumbnail)})` }}>
|
||||
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<h1 className="font-bold text-lg justify-center">{props.collection.name}</h1>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const CollectionAdminEditsArea = (props: any) => {
|
||||
const router = useRouter();
|
||||
|
||||
const deleteCollectionUI = async (collectionId: number) => {
|
||||
await deleteCollection(collectionId);
|
||||
await revalidateTags(["collections"], props.orgslug);
|
||||
// reload the page
|
||||
router.refresh();
|
||||
router.push(getUriWithOrg(props.orgslug, "/collections"));
|
||||
|
||||
// refresh page (FIX for Next.js BUG)
|
||||
//window.location.reload();
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthenticatedClientElement orgId={props.org_id} checkMethod='roles'>
|
||||
<div className="flex space-x-1 absolute justify-center mx-auto z-20 bottom-4 left-1/2 transform -translate-x-1/2">
|
||||
<ConfirmationModal
|
||||
confirmationMessage="Are you sure you want to delete this collection?"
|
||||
confirmationButtonText="Delete Collection"
|
||||
dialogTitle={"Delete " + props.collection.name + " ?"}
|
||||
dialogTrigger={
|
||||
<div
|
||||
className="hover:cursor-pointer p-1 px-4 bg-red-600 rounded-xl items-center justify-center flex shadow-lg"
|
||||
rel="noopener noreferrer">
|
||||
<X size={15} className="text-rose-200 font-bold" />
|
||||
</div>}
|
||||
functionToExecute={() => deleteCollectionUI(props.collection_id)}
|
||||
status='warning'
|
||||
></ConfirmationModal>
|
||||
</div>
|
||||
</AuthenticatedClientElement>
|
||||
)
|
||||
}
|
||||
|
||||
export default CollectionThumbnail
|
||||
76
front/components/Objects/Other/CourseThumbnail.tsx
Normal file
76
front/components/Objects/Other/CourseThumbnail.tsx
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
"use client";
|
||||
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement';
|
||||
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal';
|
||||
import { getUriWithOrg } from '@services/config/config';
|
||||
import { deleteCourseFromBackend } from '@services/courses/courses';
|
||||
import { getCourseThumbnailMediaDirectory } from '@services/media/media';
|
||||
import { revalidateTags } from '@services/utils/ts/requests';
|
||||
import { FileEdit, Pencil, X } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import React from 'react'
|
||||
|
||||
type PropsType = {
|
||||
course: any,
|
||||
orgslug: string
|
||||
}
|
||||
|
||||
// function to remove "course_" from the course_id
|
||||
function removeCoursePrefix(course_id: string) {
|
||||
return course_id.replace("course_", "");
|
||||
}
|
||||
|
||||
function CourseThumbnail(props: PropsType) {
|
||||
const router = useRouter();
|
||||
|
||||
async function deleteCourses(course_id: any) {
|
||||
await deleteCourseFromBackend(course_id);
|
||||
await revalidateTags(['courses'], props.orgslug);
|
||||
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='relative'>
|
||||
<AdminEditsArea course={props.course} orgSlug={props.orgslug} courseId={props.course.course_id} deleteCourses={deleteCourses} />
|
||||
<Link href={getUriWithOrg(props.orgslug, "/course/" + removeCoursePrefix(props.course.course_id))}>
|
||||
<div className="inset-0 ring-1 ring-inset ring-black/10 rounded-xl shadow-xl w-[249px] h-[131px] bg-cover" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(props.course.org_id, props.course.course_id, props.course.thumbnail)})` }}>
|
||||
|
||||
</div>
|
||||
</Link>
|
||||
<h2 className="font-bold text-lg w-[250px] py-2">{props.course.name}</h2>
|
||||
</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 absolute justify-center mx-auto z-20 bottom-14 left-1/2 transform -translate-x-1/2">
|
||||
<Link href={getUriWithOrg(props.orgSlug, "/course/" + removeCoursePrefix(props.courseId) + "/edit")}>
|
||||
<div
|
||||
className=" hover:cursor-pointer p-1 px-4 bg-orange-600 rounded-xl items-center justify-center flex shadow-lg"
|
||||
rel="noopener noreferrer">
|
||||
<FileEdit size={14} className="text-orange-200 font-bold" />
|
||||
</div>
|
||||
</Link>
|
||||
<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-xl items-center justify-center flex shadow-lg"
|
||||
rel="noopener noreferrer">
|
||||
<X size={14} className="text-rose-200 font-bold" />
|
||||
</div>}
|
||||
functionToExecute={() => props.deleteCourses(props.courseId)}
|
||||
status='warning'
|
||||
></ConfirmationModal>
|
||||
|
||||
</div>
|
||||
</AuthenticatedClientElement>
|
||||
)
|
||||
}
|
||||
|
||||
export default CourseThumbnail
|
||||
Loading…
Add table
Add a link
Reference in a new issue