mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
Merge pull request #457 from learnhouse/feat/landing-pages
Landing pages
This commit is contained in:
Badr B.
GitHub
commit
6d770698d0
18 changed files with 3008 additions and 396 deletions
|
|
@ -82,6 +82,7 @@ class OrgGeneralConfig(BaseModel):
|
||||||
color: str = "normal"
|
color: str = "normal"
|
||||||
watermark: bool = True
|
watermark: bool = True
|
||||||
|
|
||||||
|
|
||||||
# Cloud
|
# Cloud
|
||||||
class OrgCloudConfig(BaseModel):
|
class OrgCloudConfig(BaseModel):
|
||||||
plan: Literal["free", "standard", "pro"] = "free"
|
plan: Literal["free", "standard", "pro"] = "free"
|
||||||
|
|
@ -90,10 +91,11 @@ class OrgCloudConfig(BaseModel):
|
||||||
|
|
||||||
# Main Config
|
# Main Config
|
||||||
class OrganizationConfigBase(BaseModel):
|
class OrganizationConfigBase(BaseModel):
|
||||||
config_version: str = "1.2"
|
config_version: str = "1.3"
|
||||||
general: OrgGeneralConfig
|
general: OrgGeneralConfig
|
||||||
features: OrgFeatureConfig
|
features: OrgFeatureConfig
|
||||||
cloud: OrgCloudConfig
|
cloud: OrgCloudConfig
|
||||||
|
landing: dict = {}
|
||||||
|
|
||||||
|
|
||||||
class OrganizationConfig(SQLModel, table=True):
|
class OrganizationConfig(SQLModel, table=True):
|
||||||
|
|
|
||||||
|
|
@ -40,6 +40,8 @@ from src.services.orgs.orgs import (
|
||||||
update_org_preview,
|
update_org_preview,
|
||||||
update_org_signup_mechanism,
|
update_org_signup_mechanism,
|
||||||
update_org_thumbnail,
|
update_org_thumbnail,
|
||||||
|
update_org_landing,
|
||||||
|
upload_org_landing_content_service,
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -413,3 +415,37 @@ async def api_delete_org(
|
||||||
"""
|
"""
|
||||||
|
|
||||||
return await delete_org(request, org_id, current_user, db_session)
|
return await delete_org(request, org_id, current_user, db_session)
|
||||||
|
|
||||||
|
|
||||||
|
@router.put("/{org_id}/landing")
|
||||||
|
async def api_update_org_landing(
|
||||||
|
request: Request,
|
||||||
|
org_id: int,
|
||||||
|
landing_object: dict,
|
||||||
|
current_user: PublicUser = Depends(get_current_user),
|
||||||
|
db_session: Session = Depends(get_db_session),
|
||||||
|
):
|
||||||
|
"""
|
||||||
|
Update organization landing object
|
||||||
|
"""
|
||||||
|
return await update_org_landing(request, landing_object, org_id, current_user, db_session)
|
||||||
|
|
||||||
|
|
||||||
|
@router.post("/{org_id}/landing/content")
|
||||||
|
async def api_upload_org_landing_content(
|
||||||
|
request: Request,
|
||||||
|
org_id: int,
|
||||||
|
content_file: UploadFile,
|
||||||
|
current_user: PublicUser = Depends(get_current_user),
|
||||||
|
db_session: Session = Depends(get_db_session),
|
||||||
|
):
|
||||||
|
"""
|
||||||
|
Upload content for organization landing page
|
||||||
|
"""
|
||||||
|
return await upload_org_landing_content_service(
|
||||||
|
request=request,
|
||||||
|
content_file=content_file,
|
||||||
|
org_id=org_id,
|
||||||
|
current_user=current_user,
|
||||||
|
db_session=db_session,
|
||||||
|
)
|
||||||
|
|
|
||||||
|
|
@ -330,7 +330,7 @@ def install_create_organization(org_object: OrganizationCreate, db_session: Sess
|
||||||
|
|
||||||
# Org Config
|
# Org Config
|
||||||
org_config = OrganizationConfigBase(
|
org_config = OrganizationConfigBase(
|
||||||
config_version="1.2",
|
config_version="1.3",
|
||||||
general=OrgGeneralConfig(
|
general=OrgGeneralConfig(
|
||||||
enabled=True,
|
enabled=True,
|
||||||
color="normal",
|
color="normal",
|
||||||
|
|
@ -354,7 +354,8 @@ def install_create_organization(org_object: OrganizationCreate, db_session: Sess
|
||||||
cloud=OrgCloudConfig(
|
cloud=OrgCloudConfig(
|
||||||
plan='free',
|
plan='free',
|
||||||
custom_domain=False
|
custom_domain=False
|
||||||
)
|
),
|
||||||
|
landing={}
|
||||||
)
|
)
|
||||||
|
|
||||||
org_config = json.loads(org_config.json())
|
org_config = json.loads(org_config.json())
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@ from src.db.organizations import (
|
||||||
)
|
)
|
||||||
from fastapi import HTTPException, UploadFile, status, Request
|
from fastapi import HTTPException, UploadFile, status, Request
|
||||||
|
|
||||||
from src.services.orgs.uploads import upload_org_logo, upload_org_preview, upload_org_thumbnail
|
from src.services.orgs.uploads import upload_org_logo, upload_org_preview, upload_org_thumbnail, upload_org_landing_content
|
||||||
|
|
||||||
|
|
||||||
async def get_organization(
|
async def get_organization(
|
||||||
|
|
@ -714,6 +714,86 @@ async def upload_org_preview_service(
|
||||||
"filename": name_in_disk
|
"filename": name_in_disk
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async def update_org_landing(
|
||||||
|
request: Request,
|
||||||
|
landing_object: dict,
|
||||||
|
org_id: int,
|
||||||
|
current_user: PublicUser | AnonymousUser,
|
||||||
|
db_session: Session,
|
||||||
|
):
|
||||||
|
statement = select(Organization).where(Organization.id == org_id)
|
||||||
|
result = db_session.exec(statement)
|
||||||
|
|
||||||
|
org = result.first()
|
||||||
|
|
||||||
|
if not org:
|
||||||
|
raise HTTPException(
|
||||||
|
status_code=404,
|
||||||
|
detail="Organization not found",
|
||||||
|
)
|
||||||
|
|
||||||
|
# RBAC check
|
||||||
|
await rbac_check(request, org.org_uuid, current_user, "update", db_session)
|
||||||
|
|
||||||
|
# Get org config
|
||||||
|
statement = select(OrganizationConfig).where(OrganizationConfig.org_id == org.id)
|
||||||
|
result = db_session.exec(statement)
|
||||||
|
|
||||||
|
org_config = result.first()
|
||||||
|
|
||||||
|
if org_config is None:
|
||||||
|
logging.error(f"Organization {org_id} has no config")
|
||||||
|
raise HTTPException(
|
||||||
|
status_code=404,
|
||||||
|
detail="Organization config not found",
|
||||||
|
)
|
||||||
|
|
||||||
|
# Convert to OrganizationConfigBase model and back to ensure all fields exist
|
||||||
|
config_model = OrganizationConfigBase(**org_config.config)
|
||||||
|
|
||||||
|
# Update the landing object
|
||||||
|
config_model.landing = landing_object
|
||||||
|
|
||||||
|
# Convert back to dict and update
|
||||||
|
updated_config = json.loads(config_model.json())
|
||||||
|
org_config.config = updated_config
|
||||||
|
org_config.update_date = str(datetime.now())
|
||||||
|
|
||||||
|
db_session.add(org_config)
|
||||||
|
db_session.commit()
|
||||||
|
db_session.refresh(org_config)
|
||||||
|
|
||||||
|
return {"detail": "Landing object updated"}
|
||||||
|
|
||||||
|
async def upload_org_landing_content_service(
|
||||||
|
request: Request,
|
||||||
|
content_file: UploadFile,
|
||||||
|
org_id: int,
|
||||||
|
current_user: PublicUser | AnonymousUser,
|
||||||
|
db_session: Session,
|
||||||
|
) -> dict:
|
||||||
|
statement = select(Organization).where(Organization.id == org_id)
|
||||||
|
result = db_session.exec(statement)
|
||||||
|
|
||||||
|
org = result.first()
|
||||||
|
|
||||||
|
if not org:
|
||||||
|
raise HTTPException(
|
||||||
|
status_code=404,
|
||||||
|
detail="Organization not found",
|
||||||
|
)
|
||||||
|
|
||||||
|
# RBAC check
|
||||||
|
await rbac_check(request, org.org_uuid, current_user, "update", db_session)
|
||||||
|
|
||||||
|
# Upload content
|
||||||
|
name_in_disk = await upload_org_landing_content(content_file, org.org_uuid)
|
||||||
|
|
||||||
|
return {
|
||||||
|
"detail": "Landing content uploaded successfully",
|
||||||
|
"filename": name_in_disk
|
||||||
|
}
|
||||||
|
|
||||||
## 🔒 RBAC Utils ##
|
## 🔒 RBAC Utils ##
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
from uuid import uuid4
|
from uuid import uuid4
|
||||||
|
from fastapi import UploadFile
|
||||||
|
from fastapi import HTTPException
|
||||||
|
|
||||||
from src.services.utils.upload_content import upload_content
|
from src.services.utils.upload_content import upload_content
|
||||||
|
|
||||||
|
|
@ -45,4 +47,23 @@ async def upload_org_preview(file, org_uuid: str) -> str:
|
||||||
name_in_disk,
|
name_in_disk,
|
||||||
)
|
)
|
||||||
|
|
||||||
|
return name_in_disk
|
||||||
|
|
||||||
|
|
||||||
|
async def upload_org_landing_content(file: UploadFile, org_uuid: str) -> str:
|
||||||
|
if not file or not file.filename:
|
||||||
|
raise HTTPException(status_code=400, detail="No file provided or invalid filename")
|
||||||
|
|
||||||
|
contents = file.file.read()
|
||||||
|
name_in_disk = f"{uuid4()}.{file.filename.split('.')[-1]}"
|
||||||
|
|
||||||
|
await upload_content(
|
||||||
|
"landing",
|
||||||
|
"orgs",
|
||||||
|
org_uuid,
|
||||||
|
contents,
|
||||||
|
name_in_disk,
|
||||||
|
["jpg", "jpeg", "png", "gif", "webp", "mp4", "webm", "pdf"] # Common web content formats
|
||||||
|
)
|
||||||
|
|
||||||
return name_in_disk
|
return name_in_disk
|
||||||
|
|
@ -18,6 +18,7 @@ import CourseUpdates from '@components/Objects/Courses/CourseUpdates/CourseUpdat
|
||||||
import { CourseProvider } from '@components/Contexts/CourseContext'
|
import { CourseProvider } from '@components/Contexts/CourseContext'
|
||||||
import { useMediaQuery } from 'usehooks-ts'
|
import { useMediaQuery } from 'usehooks-ts'
|
||||||
import CoursesActions from '@components/Objects/Courses/CourseActions/CoursesActions'
|
import CoursesActions from '@components/Objects/Courses/CourseActions/CoursesActions'
|
||||||
|
import CourseActionsMobile from '@components/Objects/Courses/CourseActions/CourseActionsMobile'
|
||||||
|
|
||||||
const CourseClient = (props: any) => {
|
const CourseClient = (props: any) => {
|
||||||
const [learnings, setLearnings] = useState<any>([])
|
const [learnings, setLearnings] = useState<any>([])
|
||||||
|
|
@ -65,265 +66,273 @@ const CourseClient = (props: any) => {
|
||||||
{!course && !org ? (
|
{!course && !org ? (
|
||||||
<PageLoading></PageLoading>
|
<PageLoading></PageLoading>
|
||||||
) : (
|
) : (
|
||||||
<GeneralWrapperStyled>
|
<>
|
||||||
<div className="pb-3 flex flex-col md:flex-row justify-between items-start md:items-center">
|
<GeneralWrapperStyled>
|
||||||
<div>
|
<div className="pb-3 flex flex-col md:flex-row justify-between items-start md:items-center">
|
||||||
<p className="text-md font-bold text-gray-400 pb-2">Course</p>
|
<div>
|
||||||
<h1 className="text-3xl md:text-3xl -mt-3 font-bold">{course.name}</h1>
|
<p className="text-md font-bold text-gray-400 pb-2">Course</p>
|
||||||
</div>
|
<h1 className="text-3xl md:text-3xl -mt-3 font-bold">{course.name}</h1>
|
||||||
<div className="mt-4 md:mt-0">
|
|
||||||
{!isMobile && <CourseProvider courseuuid={course.course_uuid}>
|
|
||||||
<CourseUpdates />
|
|
||||||
</CourseProvider>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{props.course?.thumbnail_image && org ? (
|
|
||||||
<div
|
|
||||||
className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[200px] md:h-[400px] bg-cover bg-center mb-4"
|
|
||||||
style={{
|
|
||||||
backgroundImage: `url(${getCourseThumbnailMediaDirectory(
|
|
||||||
org?.org_uuid,
|
|
||||||
course?.course_uuid,
|
|
||||||
course?.thumbnail_image
|
|
||||||
)})`,
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[400px] bg-cover bg-center mb-4"
|
|
||||||
style={{
|
|
||||||
backgroundImage: `url('../empty_thumbnail.png')`,
|
|
||||||
backgroundSize: 'auto',
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<ActivityIndicators
|
|
||||||
course_uuid={props.course.course_uuid}
|
|
||||||
orgslug={orgslug}
|
|
||||||
course={course}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="flex flex-col md:flex-row md:space-x-10 space-y-6 md:space-y-0 pt-10">
|
|
||||||
<div className="course_metadata_left w-full md:basis-3/4 space-y-2">
|
|
||||||
<h2 className="py-3 text-2xl font-bold">About</h2>
|
|
||||||
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
|
|
||||||
<p className="py-5 px-5 whitespace-pre-wrap">{course.about}</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="mt-4 md:mt-0">
|
||||||
|
{!isMobile && <CourseProvider courseuuid={course.course_uuid}>
|
||||||
|
<CourseUpdates />
|
||||||
|
</CourseProvider>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{learnings.length > 0 && learnings[0]?.text !== 'null' && (
|
{props.course?.thumbnail_image && org ? (
|
||||||
<div>
|
<div
|
||||||
<h2 className="py-3 text-2xl font-bold">
|
className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[200px] md:h-[400px] bg-cover bg-center mb-4"
|
||||||
What you will learn
|
style={{
|
||||||
</h2>
|
backgroundImage: `url(${getCourseThumbnailMediaDirectory(
|
||||||
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden px-5 py-5 space-y-2">
|
org?.org_uuid,
|
||||||
{learnings.map((learning: any) => {
|
course?.course_uuid,
|
||||||
// Handle both new format (object with text and emoji) and legacy format (string)
|
course?.thumbnail_image
|
||||||
const learningText = typeof learning === 'string' ? learning : learning.text
|
)})`,
|
||||||
const learningEmoji = typeof learning === 'string' ? null : learning.emoji
|
}}
|
||||||
const learningId = typeof learning === 'string' ? learning : learning.id || learning.text
|
></div>
|
||||||
|
) : (
|
||||||
if (!learningText) return null
|
<div
|
||||||
|
className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[400px] bg-cover bg-center mb-4"
|
||||||
return (
|
style={{
|
||||||
<div
|
backgroundImage: `url('../empty_thumbnail.png')`,
|
||||||
key={learningId}
|
backgroundSize: 'auto',
|
||||||
className="flex space-x-2 items-center font-semibold text-gray-500"
|
}}
|
||||||
>
|
></div>
|
||||||
<div className="px-2 py-2 rounded-full">
|
)}
|
||||||
{learningEmoji ? (
|
|
||||||
<span>{learningEmoji}</span>
|
<ActivityIndicators
|
||||||
) : (
|
course_uuid={props.course.course_uuid}
|
||||||
<Check className="text-gray-400" size={15} />
|
orgslug={orgslug}
|
||||||
|
course={course}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex flex-col md:flex-row md:space-x-10 space-y-6 md:space-y-0 pt-10">
|
||||||
|
<div className="course_metadata_left w-full md:basis-3/4 space-y-2">
|
||||||
|
<h2 className="py-3 text-2xl font-bold">About</h2>
|
||||||
|
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
|
||||||
|
<p className="py-5 px-5 whitespace-pre-wrap">{course.about}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{learnings.length > 0 && learnings[0]?.text !== 'null' && (
|
||||||
|
<div>
|
||||||
|
<h2 className="py-3 text-2xl font-bold">
|
||||||
|
What you will learn
|
||||||
|
</h2>
|
||||||
|
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden px-5 py-5 space-y-2">
|
||||||
|
{learnings.map((learning: any) => {
|
||||||
|
// Handle both new format (object with text and emoji) and legacy format (string)
|
||||||
|
const learningText = typeof learning === 'string' ? learning : learning.text
|
||||||
|
const learningEmoji = typeof learning === 'string' ? null : learning.emoji
|
||||||
|
const learningId = typeof learning === 'string' ? learning : learning.id || learning.text
|
||||||
|
|
||||||
|
if (!learningText) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={learningId}
|
||||||
|
className="flex space-x-2 items-center font-semibold text-gray-500"
|
||||||
|
>
|
||||||
|
<div className="px-2 py-2 rounded-full">
|
||||||
|
{learningEmoji ? (
|
||||||
|
<span>{learningEmoji}</span>
|
||||||
|
) : (
|
||||||
|
<Check className="text-gray-400" size={15} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p>{learningText}</p>
|
||||||
|
{learning.link && (
|
||||||
|
<a
|
||||||
|
href={learning.link}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-blue-500 hover:underline text-sm"
|
||||||
|
>
|
||||||
|
<span className="sr-only">Link to {learningText}</span>
|
||||||
|
<ArrowRight size={14} />
|
||||||
|
</a>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<p>{learningText}</p>
|
)
|
||||||
{learning.link && (
|
})}
|
||||||
<a
|
|
||||||
href={learning.link}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-blue-500 hover:underline text-sm"
|
|
||||||
>
|
|
||||||
<span className="sr-only">Link to {learningText}</span>
|
|
||||||
<ArrowRight size={14} />
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<h2 className="py-3 text-xl md:text-2xl font-bold">Course Lessons</h2>
|
|
||||||
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
|
|
||||||
{course.chapters.map((chapter: any) => {
|
|
||||||
return (
|
|
||||||
<div key={chapter} className="">
|
|
||||||
<div className="flex text-lg py-4 px-4 outline outline-1 outline-neutral-200/40 font-bold bg-neutral-50 text-neutral-600 items-center">
|
|
||||||
<h3 className="grow mr-3 break-words">{chapter.name}</h3>
|
|
||||||
<p className="text-sm font-normal text-neutral-400 px-3 py-[2px] outline-1 outline outline-neutral-200 rounded-full whitespace-nowrap flex-shrink-0">
|
|
||||||
{chapter.activities.length} Activities
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="py-3">
|
|
||||||
{chapter.activities.map((activity: any) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<p className="flex text-md"></p>
|
|
||||||
<div className="flex space-x-1 py-2 px-4 items-center">
|
|
||||||
<div className="courseicon items-center flex space-x-2 text-neutral-400">
|
|
||||||
{activity.activity_type ===
|
|
||||||
'TYPE_DYNAMIC' && (
|
|
||||||
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
|
||||||
<Sparkles
|
|
||||||
className="text-gray-400"
|
|
||||||
size={13}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{activity.activity_type === 'TYPE_VIDEO' && (
|
|
||||||
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
|
||||||
<Video
|
|
||||||
className="text-gray-400"
|
|
||||||
size={13}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{activity.activity_type ===
|
|
||||||
'TYPE_DOCUMENT' && (
|
|
||||||
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
|
||||||
<File
|
|
||||||
className="text-gray-400"
|
|
||||||
size={13}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{activity.activity_type ===
|
|
||||||
'TYPE_ASSIGNMENT' && (
|
|
||||||
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
|
||||||
<Backpack
|
|
||||||
className="text-gray-400"
|
|
||||||
size={13}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<Link
|
|
||||||
className="flex font-semibold grow pl-2 text-neutral-500"
|
|
||||||
href={
|
|
||||||
getUriWithOrg(orgslug, '') +
|
|
||||||
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
|
||||||
'activity_',
|
|
||||||
''
|
|
||||||
)}`
|
|
||||||
}
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<p>{activity.name}</p>
|
|
||||||
</Link>
|
|
||||||
<div className="flex ">
|
|
||||||
{activity.activity_type ===
|
|
||||||
'TYPE_DYNAMIC' && (
|
|
||||||
<>
|
|
||||||
<Link
|
|
||||||
className="flex grow pl-2 text-gray-500"
|
|
||||||
href={
|
|
||||||
getUriWithOrg(orgslug, '') +
|
|
||||||
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
|
||||||
'activity_',
|
|
||||||
''
|
|
||||||
)}`
|
|
||||||
}
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
|
||||||
<p>Page</p>
|
|
||||||
<ArrowRight size={13} />
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{activity.activity_type === 'TYPE_VIDEO' && (
|
|
||||||
<>
|
|
||||||
<Link
|
|
||||||
className="flex grow pl-2 text-gray-500"
|
|
||||||
href={
|
|
||||||
getUriWithOrg(orgslug, '') +
|
|
||||||
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
|
||||||
'activity_',
|
|
||||||
''
|
|
||||||
)}`
|
|
||||||
}
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
|
||||||
<p>Video</p>
|
|
||||||
<ArrowRight size={13} />
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{activity.activity_type ===
|
|
||||||
'TYPE_DOCUMENT' && (
|
|
||||||
<>
|
|
||||||
<Link
|
|
||||||
className="flex grow pl-2 text-gray-500"
|
|
||||||
href={
|
|
||||||
getUriWithOrg(orgslug, '') +
|
|
||||||
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
|
||||||
'activity_',
|
|
||||||
''
|
|
||||||
)}`
|
|
||||||
}
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
|
||||||
<p>Document</p>
|
|
||||||
<ArrowRight size={13} />
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{activity.activity_type ===
|
|
||||||
'TYPE_ASSIGNMENT' && (
|
|
||||||
<>
|
|
||||||
<Link
|
|
||||||
className="flex grow pl-2 text-gray-500"
|
|
||||||
href={
|
|
||||||
getUriWithOrg(orgslug, '') +
|
|
||||||
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
|
||||||
'activity_',
|
|
||||||
''
|
|
||||||
)}`
|
|
||||||
}
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
|
||||||
<p>Assignment</p>
|
|
||||||
<ArrowRight size={13} />
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
</div>
|
||||||
})}
|
)}
|
||||||
|
|
||||||
|
<h2 className="py-3 text-xl md:text-2xl font-bold">Course Lessons</h2>
|
||||||
|
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
|
||||||
|
{course.chapters.map((chapter: any) => {
|
||||||
|
return (
|
||||||
|
<div key={chapter} className="">
|
||||||
|
<div className="flex text-lg py-4 px-4 outline outline-1 outline-neutral-200/40 font-bold bg-neutral-50 text-neutral-600 items-center">
|
||||||
|
<h3 className="grow mr-3 break-words">{chapter.name}</h3>
|
||||||
|
<p className="text-sm font-normal text-neutral-400 px-3 py-[2px] outline-1 outline outline-neutral-200 rounded-full whitespace-nowrap flex-shrink-0">
|
||||||
|
{chapter.activities.length} Activities
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="py-3">
|
||||||
|
{chapter.activities.map((activity: any) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<p className="flex text-md"></p>
|
||||||
|
<div className="flex space-x-1 py-2 px-4 items-center">
|
||||||
|
<div className="courseicon items-center flex space-x-2 text-neutral-400">
|
||||||
|
{activity.activity_type ===
|
||||||
|
'TYPE_DYNAMIC' && (
|
||||||
|
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
||||||
|
<Sparkles
|
||||||
|
className="text-gray-400"
|
||||||
|
size={13}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{activity.activity_type === 'TYPE_VIDEO' && (
|
||||||
|
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
||||||
|
<Video
|
||||||
|
className="text-gray-400"
|
||||||
|
size={13}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{activity.activity_type ===
|
||||||
|
'TYPE_DOCUMENT' && (
|
||||||
|
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
||||||
|
<File
|
||||||
|
className="text-gray-400"
|
||||||
|
size={13}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{activity.activity_type ===
|
||||||
|
'TYPE_ASSIGNMENT' && (
|
||||||
|
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
||||||
|
<Backpack
|
||||||
|
className="text-gray-400"
|
||||||
|
size={13}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
className="flex font-semibold grow pl-2 text-neutral-500"
|
||||||
|
href={
|
||||||
|
getUriWithOrg(orgslug, '') +
|
||||||
|
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
||||||
|
'activity_',
|
||||||
|
''
|
||||||
|
)}`
|
||||||
|
}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<p>{activity.name}</p>
|
||||||
|
</Link>
|
||||||
|
<div className="flex ">
|
||||||
|
{activity.activity_type ===
|
||||||
|
'TYPE_DYNAMIC' && (
|
||||||
|
<>
|
||||||
|
<Link
|
||||||
|
className="flex grow pl-2 text-gray-500"
|
||||||
|
href={
|
||||||
|
getUriWithOrg(orgslug, '') +
|
||||||
|
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
||||||
|
'activity_',
|
||||||
|
''
|
||||||
|
)}`
|
||||||
|
}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
||||||
|
<p>Page</p>
|
||||||
|
<ArrowRight size={13} />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{activity.activity_type === 'TYPE_VIDEO' && (
|
||||||
|
<>
|
||||||
|
<Link
|
||||||
|
className="flex grow pl-2 text-gray-500"
|
||||||
|
href={
|
||||||
|
getUriWithOrg(orgslug, '') +
|
||||||
|
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
||||||
|
'activity_',
|
||||||
|
''
|
||||||
|
)}`
|
||||||
|
}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
||||||
|
<p>Video</p>
|
||||||
|
<ArrowRight size={13} />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{activity.activity_type ===
|
||||||
|
'TYPE_DOCUMENT' && (
|
||||||
|
<>
|
||||||
|
<Link
|
||||||
|
className="flex grow pl-2 text-gray-500"
|
||||||
|
href={
|
||||||
|
getUriWithOrg(orgslug, '') +
|
||||||
|
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
||||||
|
'activity_',
|
||||||
|
''
|
||||||
|
)}`
|
||||||
|
}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
||||||
|
<p>Document</p>
|
||||||
|
<ArrowRight size={13} />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{activity.activity_type ===
|
||||||
|
'TYPE_ASSIGNMENT' && (
|
||||||
|
<>
|
||||||
|
<Link
|
||||||
|
className="flex grow pl-2 text-gray-500"
|
||||||
|
href={
|
||||||
|
getUriWithOrg(orgslug, '') +
|
||||||
|
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
||||||
|
'activity_',
|
||||||
|
''
|
||||||
|
)}`
|
||||||
|
}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
||||||
|
<p>Assignment</p>
|
||||||
|
<ArrowRight size={13} />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='course_metadata_right basis-1/4'>
|
||||||
|
<CoursesActions courseuuid={courseuuid} orgslug={orgslug} course={course} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='course_metadata_right basis-1/4'>
|
</GeneralWrapperStyled>
|
||||||
<CoursesActions courseuuid={courseuuid} orgslug={orgslug} course={course} />
|
|
||||||
|
{isMobile && (
|
||||||
|
<div className="fixed bottom-0 left-0 right-0 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 p-4 z-50">
|
||||||
|
<CourseActionsMobile courseuuid={courseuuid} orgslug={orgslug} course={course} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
</GeneralWrapperStyled>
|
</>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,8 @@ import { getOrgCollections } from '@services/courses/collections'
|
||||||
import { getServerSession } from 'next-auth'
|
import { getServerSession } from 'next-auth'
|
||||||
import { nextAuthOptions } from 'app/auth/options'
|
import { nextAuthOptions } from 'app/auth/options'
|
||||||
import { getOrgThumbnailMediaDirectory } from '@services/media/media'
|
import { getOrgThumbnailMediaDirectory } from '@services/media/media'
|
||||||
|
import LandingClassic from '@components/Landings/LandingClassic'
|
||||||
|
import LandingCustom from '@components/Landings/LandingCustom'
|
||||||
|
|
||||||
type MetadataProps = {
|
type MetadataProps = {
|
||||||
params: { orgslug: string }
|
params: { orgslug: string }
|
||||||
|
|
@ -71,7 +73,7 @@ const OrgHomePage = async (params: any) => {
|
||||||
access_token ? access_token : null
|
access_token ? access_token : null
|
||||||
)
|
)
|
||||||
const org = await getOrganizationContextInfo(orgslug, {
|
const org = await getOrganizationContextInfo(orgslug, {
|
||||||
revalidate: 1800,
|
revalidate: 0,
|
||||||
tags: ['organizations'],
|
tags: ['organizations'],
|
||||||
})
|
})
|
||||||
const org_id = org.id
|
const org_id = org.id
|
||||||
|
|
@ -81,141 +83,24 @@ const OrgHomePage = async (params: any) => {
|
||||||
{ revalidate: 0, tags: ['courses'] }
|
{ revalidate: 0, tags: ['courses'] }
|
||||||
)
|
)
|
||||||
|
|
||||||
|
// Check if custom landing is enabled
|
||||||
|
const hasCustomLanding = org.config?.config?.landing?.enabled
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<GeneralWrapperStyled>
|
{hasCustomLanding ? (
|
||||||
{/* Collections */}
|
<LandingCustom
|
||||||
<div className="flex flex-col space-y-4 mb-8">
|
landing={org.config.config.landing}
|
||||||
<div className="flex items-center justify-between">
|
orgslug={orgslug}
|
||||||
<TypeOfContentTitle title="Collections" type="col" />
|
/>
|
||||||
<AuthenticatedClientElement
|
) : (
|
||||||
checkMethod="roles"
|
<LandingClassic
|
||||||
ressourceType="collections"
|
courses={courses}
|
||||||
action="create"
|
collections={collections}
|
||||||
orgId={org_id}
|
orgslug={orgslug}
|
||||||
>
|
org_id={org_id}
|
||||||
<Link href={getUriWithOrg(orgslug, '/collections/new')}>
|
/>
|
||||||
<NewCollectionButton />
|
)}
|
||||||
</Link>
|
|
||||||
</AuthenticatedClientElement>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
||||||
{collections.map((collection: any) => (
|
|
||||||
<div key={collection.collection_id} className="flex flex-col p-3">
|
|
||||||
<CollectionThumbnail
|
|
||||||
collection={collection}
|
|
||||||
orgslug={orgslug}
|
|
||||||
org_id={org.org_id}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
{collections.length === 0 && (
|
|
||||||
<div className="col-span-full flex justify-center items-center py-8">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="mb-4">
|
|
||||||
<svg
|
|
||||||
width="50"
|
|
||||||
height="50"
|
|
||||||
viewBox="0 0 295 295"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
className="mx-auto"
|
|
||||||
>
|
|
||||||
<rect
|
|
||||||
opacity="0.51"
|
|
||||||
x="10"
|
|
||||||
y="10"
|
|
||||||
width="275"
|
|
||||||
height="275"
|
|
||||||
rx="75"
|
|
||||||
stroke="#4B5564"
|
|
||||||
strokeOpacity="0.15"
|
|
||||||
strokeWidth="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"
|
|
||||||
fillOpacity="0.08"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h1 className="text-xl font-bold text-gray-600 mb-2">
|
|
||||||
No collections yet
|
|
||||||
</h1>
|
|
||||||
<p className="text-md text-gray-400">
|
|
||||||
<ContentPlaceHolderIfUserIsNotAdmin
|
|
||||||
text="Create collections to group courses together"
|
|
||||||
/>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Courses */}
|
|
||||||
<div className="flex flex-col space-y-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<TypeOfContentTitle title="Courses" type="cou" />
|
|
||||||
<AuthenticatedClientElement
|
|
||||||
ressourceType="courses"
|
|
||||||
action="create"
|
|
||||||
checkMethod="roles"
|
|
||||||
orgId={org_id}
|
|
||||||
>
|
|
||||||
<Link href={getUriWithOrg(orgslug, '/courses?new=true')}>
|
|
||||||
<NewCourseButton />
|
|
||||||
</Link>
|
|
||||||
</AuthenticatedClientElement>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
||||||
{courses.map((course: any) => (
|
|
||||||
<div key={course.course_uuid} className="p-3">
|
|
||||||
<CourseThumbnail course={course} orgslug={orgslug} />
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
{courses.length === 0 && (
|
|
||||||
<div className="col-span-full flex justify-center items-center py-8">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="mb-4 ">
|
|
||||||
<svg
|
|
||||||
width="50"
|
|
||||||
height="50"
|
|
||||||
className="mx-auto"
|
|
||||||
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"
|
|
||||||
strokeOpacity="0.15"
|
|
||||||
strokeWidth="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"
|
|
||||||
fillOpacity="0.08"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h1 className="text-xl font-bold text-gray-600 mb-2">
|
|
||||||
No courses yet
|
|
||||||
</h1>
|
|
||||||
<p className="text-md text-gray-400">
|
|
||||||
<ContentPlaceHolderIfUserIsNotAdmin text='Create courses to add content' />
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</GeneralWrapperStyled>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,14 @@
|
||||||
'use client'
|
'use client'
|
||||||
import BreadCrumbs from '@components/Dashboard/Misc/BreadCrumbs'
|
import BreadCrumbs from '@components/Dashboard/Misc/BreadCrumbs'
|
||||||
import { getUriWithOrg } from '@services/config/config'
|
import { getUriWithOrg } from '@services/config/config'
|
||||||
import { ImageIcon, Info, LockIcon, SearchIcon, TextIcon, LucideIcon, Share2Icon } from 'lucide-react'
|
import { ImageIcon, Info, LockIcon, SearchIcon, TextIcon, LucideIcon, Share2Icon, LayoutDashboardIcon } from 'lucide-react'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import React, { useEffect } from 'react'
|
import React, { useEffect } from 'react'
|
||||||
import { motion } from 'framer-motion'
|
import { motion } from 'framer-motion'
|
||||||
import OrgEditGeneral from '@components/Dashboard/Pages/Org/OrgEditGeneral/OrgEditGeneral'
|
import OrgEditGeneral from '@components/Dashboard/Pages/Org/OrgEditGeneral/OrgEditGeneral'
|
||||||
import OrgEditImages from '@components/Dashboard/Pages/Org/OrgEditImages/OrgEditImages'
|
import OrgEditImages from '@components/Dashboard/Pages/Org/OrgEditImages/OrgEditImages'
|
||||||
import OrgEditSocials from '@components/Dashboard/Pages/Org/OrgEditSocials/OrgEditSocials'
|
import OrgEditSocials from '@components/Dashboard/Pages/Org/OrgEditSocials/OrgEditSocials'
|
||||||
|
import OrgEditLanding from '@components/Dashboard/Pages/Org/OrgEditLanding/OrgEditLanding'
|
||||||
|
|
||||||
export type OrgParams = {
|
export type OrgParams = {
|
||||||
subpage: string
|
subpage: string
|
||||||
|
|
@ -22,6 +23,7 @@ interface TabItem {
|
||||||
|
|
||||||
const SETTING_TABS: TabItem[] = [
|
const SETTING_TABS: TabItem[] = [
|
||||||
{ id: 'general', label: 'General', icon: TextIcon },
|
{ id: 'general', label: 'General', icon: TextIcon },
|
||||||
|
{ id: 'landing', label: 'Landing Page', icon: LayoutDashboardIcon },
|
||||||
{ id: 'previews', label: 'Images & Previews', icon: ImageIcon },
|
{ id: 'previews', label: 'Images & Previews', icon: ImageIcon },
|
||||||
{ id: 'socials', label: 'Socials', icon: Share2Icon },
|
{ id: 'socials', label: 'Socials', icon: Share2Icon },
|
||||||
]
|
]
|
||||||
|
|
@ -61,6 +63,9 @@ function OrgPage({ params }: { params: OrgParams }) {
|
||||||
} else if (params.subpage == 'socials') {
|
} else if (params.subpage == 'socials') {
|
||||||
setH1Label('Socials')
|
setH1Label('Socials')
|
||||||
setH2Label('Manage your organization social media links')
|
setH2Label('Manage your organization social media links')
|
||||||
|
} else if (params.subpage == 'landing') {
|
||||||
|
setH1Label('Landing Page')
|
||||||
|
setH2Label('Customize your organization landing page')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -103,6 +108,7 @@ function OrgPage({ params }: { params: OrgParams }) {
|
||||||
{params.subpage == 'general' ? <OrgEditGeneral /> : ''}
|
{params.subpage == 'general' ? <OrgEditGeneral /> : ''}
|
||||||
{params.subpage == 'previews' ? <OrgEditImages /> : ''}
|
{params.subpage == 'previews' ? <OrgEditImages /> : ''}
|
||||||
{params.subpage == 'socials' ? <OrgEditSocials /> : ''}
|
{params.subpage == 'socials' ? <OrgEditSocials /> : ''}
|
||||||
|
{params.subpage == 'landing' ? <OrgEditLanding /> : ''}
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,91 @@
|
||||||
|
export interface LandingBackground {
|
||||||
|
type: 'solid' | 'gradient' | 'image';
|
||||||
|
color?: string;
|
||||||
|
colors?: Array<string>;
|
||||||
|
direction?: string;
|
||||||
|
image?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LandingTestimonialContent {
|
||||||
|
text: string;
|
||||||
|
author: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LandingImage {
|
||||||
|
url: string;
|
||||||
|
alt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LandingHeading {
|
||||||
|
text: string;
|
||||||
|
color: string;
|
||||||
|
size: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LandingButton {
|
||||||
|
text: string;
|
||||||
|
link: string;
|
||||||
|
color: string;
|
||||||
|
background: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LandingLogos {
|
||||||
|
type: 'logos';
|
||||||
|
title: string;
|
||||||
|
logos: LandingImage[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LandingUsers {
|
||||||
|
user_uuid: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
image_url: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LandingPeople {
|
||||||
|
type: 'people';
|
||||||
|
title: string;
|
||||||
|
people: LandingUsers[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LandingTextAndImageSection {
|
||||||
|
type: 'text-and-image';
|
||||||
|
title: string;
|
||||||
|
text: string;
|
||||||
|
flow: 'left' | 'right';
|
||||||
|
image: LandingImage;
|
||||||
|
buttons: LandingButton[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LandingCourse {
|
||||||
|
course_uuid: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LandingFeaturedCourses {
|
||||||
|
type: 'featured-courses';
|
||||||
|
courses: LandingCourse[];
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LandingHeroSection {
|
||||||
|
type: 'hero';
|
||||||
|
title: string;
|
||||||
|
background: LandingBackground;
|
||||||
|
heading: LandingHeading;
|
||||||
|
subheading: LandingHeading;
|
||||||
|
buttons: LandingButton[];
|
||||||
|
illustration?: {
|
||||||
|
image: LandingImage;
|
||||||
|
position: 'left' | 'right';
|
||||||
|
verticalAlign: 'top' | 'center' | 'bottom';
|
||||||
|
size: 'small' | 'medium' | 'large';
|
||||||
|
};
|
||||||
|
contentAlign?: 'left' | 'center' | 'right';
|
||||||
|
}
|
||||||
|
|
||||||
|
export type LandingSection = LandingTextAndImageSection | LandingHeroSection | LandingLogos | LandingPeople | LandingFeaturedCourses;
|
||||||
|
|
||||||
|
export interface LandingObject {
|
||||||
|
sections: LandingSection[];
|
||||||
|
enabled?: boolean;
|
||||||
|
}
|
||||||
160
apps/web/components/Landings/LandingClassic.tsx
Normal file
160
apps/web/components/Landings/LandingClassic.tsx
Normal file
|
|
@ -0,0 +1,160 @@
|
||||||
|
import React from 'react'
|
||||||
|
import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
|
||||||
|
import TypeOfContentTitle from '@components/Objects/StyledElements/Titles/TypeOfContentTitle'
|
||||||
|
import CourseThumbnail from '@components/Objects/Thumbnails/CourseThumbnail'
|
||||||
|
import CollectionThumbnail from '@components/Objects/Thumbnails/CollectionThumbnail'
|
||||||
|
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
|
||||||
|
import NewCourseButton from '@components/Objects/StyledElements/Buttons/NewCourseButton'
|
||||||
|
import NewCollectionButton from '@components/Objects/StyledElements/Buttons/NewCollectionButton'
|
||||||
|
import ContentPlaceHolderIfUserIsNotAdmin from '@components/Objects/ContentPlaceHolder'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { getUriWithOrg } from '@services/config/config'
|
||||||
|
|
||||||
|
interface LandingClassicProps {
|
||||||
|
courses: any[]
|
||||||
|
collections: any[]
|
||||||
|
orgslug: string
|
||||||
|
org_id: string
|
||||||
|
}
|
||||||
|
|
||||||
|
function LandingClassic({ courses, collections, orgslug, org_id }: LandingClassicProps) {
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<GeneralWrapperStyled>
|
||||||
|
{/* Collections */}
|
||||||
|
<div className="flex flex-col space-y-4 mb-8">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<TypeOfContentTitle title="Collections" type="col" />
|
||||||
|
<AuthenticatedClientElement
|
||||||
|
checkMethod="roles"
|
||||||
|
ressourceType="collections"
|
||||||
|
action="create"
|
||||||
|
orgId={org_id}
|
||||||
|
>
|
||||||
|
<Link href={getUriWithOrg(orgslug, '/collections/new')}>
|
||||||
|
<NewCollectionButton />
|
||||||
|
</Link>
|
||||||
|
</AuthenticatedClientElement>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||||
|
{collections.map((collection: any) => (
|
||||||
|
<div key={collection.collection_id} className="flex flex-col p-3">
|
||||||
|
<CollectionThumbnail
|
||||||
|
collection={collection}
|
||||||
|
orgslug={orgslug}
|
||||||
|
org_id={org_id}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{collections.length === 0 && (
|
||||||
|
<div className="col-span-full flex justify-center items-center py-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="mb-4">
|
||||||
|
<svg
|
||||||
|
width="50"
|
||||||
|
height="50"
|
||||||
|
viewBox="0 0 295 295"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="mx-auto"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
opacity="0.51"
|
||||||
|
x="10"
|
||||||
|
y="10"
|
||||||
|
width="275"
|
||||||
|
height="275"
|
||||||
|
rx="75"
|
||||||
|
stroke="#4B5564"
|
||||||
|
strokeOpacity="0.15"
|
||||||
|
strokeWidth="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"
|
||||||
|
fillOpacity="0.08"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-xl font-bold text-gray-600 mb-2">
|
||||||
|
No collections yet
|
||||||
|
</h1>
|
||||||
|
<p className="text-md text-gray-400">
|
||||||
|
<ContentPlaceHolderIfUserIsNotAdmin
|
||||||
|
text="Create collections to group courses together"
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Courses */}
|
||||||
|
<div className="flex flex-col space-y-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<TypeOfContentTitle title="Courses" type="cou" />
|
||||||
|
<AuthenticatedClientElement
|
||||||
|
ressourceType="courses"
|
||||||
|
action="create"
|
||||||
|
checkMethod="roles"
|
||||||
|
orgId={org_id}
|
||||||
|
>
|
||||||
|
<Link href={getUriWithOrg(orgslug, '/courses?new=true')}>
|
||||||
|
<NewCourseButton />
|
||||||
|
</Link>
|
||||||
|
</AuthenticatedClientElement>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||||
|
{courses.map((course: any) => (
|
||||||
|
<div key={course.course_uuid} className="p-3">
|
||||||
|
<CourseThumbnail course={course} orgslug={orgslug} />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{courses.length === 0 && (
|
||||||
|
<div className="col-span-full flex justify-center items-center py-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="mb-4 ">
|
||||||
|
<svg
|
||||||
|
width="50"
|
||||||
|
height="50"
|
||||||
|
className="mx-auto"
|
||||||
|
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"
|
||||||
|
strokeOpacity="0.15"
|
||||||
|
strokeWidth="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"
|
||||||
|
fillOpacity="0.08"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-xl font-bold text-gray-600 mb-2">
|
||||||
|
No courses yet
|
||||||
|
</h1>
|
||||||
|
<p className="text-md text-gray-400">
|
||||||
|
<ContentPlaceHolderIfUserIsNotAdmin text='Create courses to add content' />
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</GeneralWrapperStyled>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LandingClassic
|
||||||
251
apps/web/components/Landings/LandingCustom.tsx
Normal file
251
apps/web/components/Landings/LandingCustom.tsx
Normal file
|
|
@ -0,0 +1,251 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import { LandingSection } from '@components/Dashboard/Pages/Org/OrgEditLanding/landing_types'
|
||||||
|
import CourseThumbnail from '@components/Objects/Thumbnails/CourseThumbnail'
|
||||||
|
import useSWR from 'swr'
|
||||||
|
import { getOrgCourses } from '@services/courses/courses'
|
||||||
|
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||||
|
import CourseThumbnailLanding from '@components/Objects/Thumbnails/CourseThumbnailLanding'
|
||||||
|
|
||||||
|
interface LandingCustomProps {
|
||||||
|
landing: {
|
||||||
|
sections: LandingSection[]
|
||||||
|
enabled: boolean
|
||||||
|
}
|
||||||
|
orgslug: string
|
||||||
|
}
|
||||||
|
|
||||||
|
function LandingCustom({ landing, orgslug }: LandingCustomProps) {
|
||||||
|
const session = useLHSession() as any
|
||||||
|
const access_token = session?.data?.tokens?.access_token
|
||||||
|
|
||||||
|
// Fetch all courses for the organization
|
||||||
|
const { data: allCourses } = useSWR(
|
||||||
|
orgslug ? [orgslug, access_token] : null,
|
||||||
|
([slug, token]) => getOrgCourses(slug, null, token)
|
||||||
|
)
|
||||||
|
|
||||||
|
const renderSection = (section: LandingSection) => {
|
||||||
|
switch (section.type) {
|
||||||
|
case 'hero':
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={`hero-${section.title}`}
|
||||||
|
className="min-h-[400px] sm:min-h-[500px] mt-[20px] sm:mt-[40px] mx-2 sm:mx-4 lg:mx-16 w-full flex items-center justify-center rounded-xl border border-gray-100"
|
||||||
|
style={{
|
||||||
|
background: section.background.type === 'solid'
|
||||||
|
? section.background.color
|
||||||
|
: section.background.type === 'gradient'
|
||||||
|
? `linear-gradient(${section.background.direction || '45deg'}, ${section.background.colors?.join(', ')})`
|
||||||
|
: `url(${section.background.image}) center/cover`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className={`w-full h-full flex flex-col sm:flex-row ${
|
||||||
|
section.illustration?.position === 'right' ? 'sm:flex-row-reverse' : 'sm:flex-row'
|
||||||
|
} items-stretch`}>
|
||||||
|
{/* Logo */}
|
||||||
|
{section.illustration?.image.url && (
|
||||||
|
<div className={`flex items-${section.illustration.verticalAlign} p-6 w-full ${
|
||||||
|
section.illustration.size === 'small' ? 'sm:w-1/4' :
|
||||||
|
section.illustration.size === 'medium' ? 'sm:w-1/3' :
|
||||||
|
'sm:w-2/5'
|
||||||
|
}`}>
|
||||||
|
<img
|
||||||
|
src={section.illustration.image.url}
|
||||||
|
alt={section.illustration.image.alt}
|
||||||
|
className="w-full object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className={`flex-1 flex items-center ${
|
||||||
|
section.contentAlign === 'left' ? 'justify-start text-left' :
|
||||||
|
section.contentAlign === 'right' ? 'justify-end text-right' :
|
||||||
|
'justify-center text-center'
|
||||||
|
} p-6`}>
|
||||||
|
<div className="max-w-2xl">
|
||||||
|
<h1
|
||||||
|
className="text-xl sm:text-2xl md:text-3xl font-bold mb-2 sm:mb-4"
|
||||||
|
style={{ color: section.heading.color }}
|
||||||
|
>
|
||||||
|
{section.heading.text}
|
||||||
|
</h1>
|
||||||
|
<h2
|
||||||
|
className="text-sm sm:text-base md:text-lg mb-4 sm:mb-6 md:mb-8 font-medium"
|
||||||
|
style={{ color: section.subheading.color }}
|
||||||
|
>
|
||||||
|
{section.subheading.text}
|
||||||
|
</h2>
|
||||||
|
<div className={`flex flex-col sm:flex-row gap-3 sm:gap-4 ${
|
||||||
|
section.contentAlign === 'left' ? 'justify-start' :
|
||||||
|
section.contentAlign === 'right' ? 'justify-end' :
|
||||||
|
'justify-center'
|
||||||
|
} items-center`}>
|
||||||
|
{section.buttons.map((button, index) => (
|
||||||
|
<a
|
||||||
|
key={index}
|
||||||
|
href={button.link}
|
||||||
|
className="w-full sm:w-auto px-6 py-2.5 rounded-lg text-sm font-extrabold shadow transition-transform hover:scale-105"
|
||||||
|
style={{
|
||||||
|
backgroundColor: button.background,
|
||||||
|
color: button.color
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{button.text}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
case 'text-and-image':
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={`text-image-${section.title}`}
|
||||||
|
className="py-16 mx-2 sm:mx-4 lg:mx-16 w-full"
|
||||||
|
>
|
||||||
|
<div className={`flex flex-col md:flex-row items-center gap-8 md:gap-12 bg-white rounded-xl p-6 md:p-8 lg:p-12 nice-shadow ${
|
||||||
|
section.flow === 'right' ? 'md:flex-row-reverse' : ''
|
||||||
|
}`}>
|
||||||
|
<div className="flex-1 w-full max-w-2xl">
|
||||||
|
<h2 className="text-2xl md:text-3xl font-bold mb-4 text-gray-900 tracking-tight">{section.title}</h2>
|
||||||
|
<div className="prose prose-lg prose-gray max-w-none">
|
||||||
|
<p className="text-base md:text-lg leading-relaxed text-gray-600 whitespace-pre-line">
|
||||||
|
{section.text}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-4 mt-8">
|
||||||
|
{section.buttons.map((button, index) => (
|
||||||
|
<a
|
||||||
|
key={index}
|
||||||
|
href={button.link}
|
||||||
|
className="px-6 py-3 rounded-xl font-medium shadow-sm transition-all duration-200 hover:scale-105"
|
||||||
|
style={{
|
||||||
|
backgroundColor: button.background,
|
||||||
|
color: button.color
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{button.text}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 w-full md:w-auto">
|
||||||
|
<div className="relative w-full max-w-[500px] mx-auto px-4 md:px-8">
|
||||||
|
<div className="relative w-full aspect-[4/3]">
|
||||||
|
<img
|
||||||
|
src={section.image.url}
|
||||||
|
alt={section.image.alt}
|
||||||
|
className="object-contain w-full h-full rounded-lg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
case 'logos':
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={`logos-${section.type}`}
|
||||||
|
className="py-16 mx-2 sm:mx-4 lg:mx-16 w-full"
|
||||||
|
>
|
||||||
|
{section.title && (
|
||||||
|
<h2 className="text-2xl md:text-3xl font-bold text-left mb-16 text-gray-900">{section.title}</h2>
|
||||||
|
)}
|
||||||
|
<div className="flex justify-center w-full">
|
||||||
|
<div className="flex flex-wrap justify-center gap-16 max-w-7xl">
|
||||||
|
{section.logos.map((logo, index) => (
|
||||||
|
<div key={index} className="flex items-center justify-center w-[220px] h-[120px]">
|
||||||
|
<img
|
||||||
|
src={logo.url}
|
||||||
|
alt={logo.alt}
|
||||||
|
className="max-h-24 max-w-[200px] object-contain hover:opacity-80 transition-opacity"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
case 'people':
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={`people-${section.title}`}
|
||||||
|
className="py-16 mx-2 sm:mx-4 lg:mx-16 w-full"
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl md:text-3xl font-bold text-left mb-10 text-gray-900">{section.title}</h2>
|
||||||
|
<div className="flex flex-wrap justify-center gap-x-20 gap-y-8">
|
||||||
|
{section.people.map((person, index) => (
|
||||||
|
<div key={index} className="w-[140px] flex flex-col items-center">
|
||||||
|
<div className="w-24 h-24 mb-4">
|
||||||
|
<img
|
||||||
|
src={person.image_url}
|
||||||
|
alt={person.name}
|
||||||
|
className="w-full h-full rounded-full object-cover border-4 border-white nice-shadow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-center text-gray-900">{person.name}</h3>
|
||||||
|
<p className="text-sm text-center text-gray-600 mt-1">{person.description}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
case 'featured-courses':
|
||||||
|
if (!allCourses) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={`featured-courses-${section.title}`}
|
||||||
|
className="py-16 mx-2 sm:mx-4 lg:mx-16 w-full"
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl md:text-3xl font-bold text-left mb-6 text-gray-900">{section.title}</h2>
|
||||||
|
<div className="text-center py-6 text-gray-500">Loading courses...</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const featuredCourses = allCourses.filter((course: any) =>
|
||||||
|
section.courses.includes(course.course_uuid)
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={`featured-courses-${section.title}`}
|
||||||
|
className="py-16 mx-2 sm:mx-4 lg:mx-16 w-full"
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl md:text-3xl font-bold text-left mb-6 text-gray-900">{section.title}</h2>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 w-full">
|
||||||
|
{featuredCourses.map((course: any) => (
|
||||||
|
<div key={course.course_uuid} className="w-full flex justify-center">
|
||||||
|
<CourseThumbnailLanding
|
||||||
|
course={course}
|
||||||
|
orgslug={orgslug}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{featuredCourses.length === 0 && (
|
||||||
|
<div className="col-span-full text-center py-6 text-gray-500">
|
||||||
|
No featured courses selected
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
default:
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-between w-full max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-16 h-full">
|
||||||
|
{landing.sections.map((section) => renderSection(section))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LandingCustom
|
||||||
|
|
@ -0,0 +1,232 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import { useRouter } from 'next/navigation'
|
||||||
|
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||||
|
import { getUriWithoutOrg, getUriWithOrg } from '@services/config/config'
|
||||||
|
import { getProductsByCourse } from '@services/payments/products'
|
||||||
|
import { LogIn, LogOut, ShoppingCart } from 'lucide-react'
|
||||||
|
import Modal from '@components/Objects/StyledElements/Modal/Modal'
|
||||||
|
import CoursePaidOptions from './CoursePaidOptions'
|
||||||
|
import { checkPaidAccess } from '@services/payments/payments'
|
||||||
|
import { removeCourse, startCourse } from '@services/courses/activity'
|
||||||
|
import { revalidateTags } from '@services/utils/ts/requests'
|
||||||
|
import UserAvatar from '../../UserAvatar'
|
||||||
|
import { getUserAvatarMediaDirectory } from '@services/media/media'
|
||||||
|
|
||||||
|
interface Author {
|
||||||
|
user_uuid: string
|
||||||
|
avatar_image: string
|
||||||
|
first_name: string
|
||||||
|
last_name: string
|
||||||
|
username: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CourseRun {
|
||||||
|
status: string
|
||||||
|
course_id: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Course {
|
||||||
|
id: string
|
||||||
|
authors: Author[]
|
||||||
|
trail?: {
|
||||||
|
runs: CourseRun[]
|
||||||
|
}
|
||||||
|
chapters?: Array<{
|
||||||
|
name: string
|
||||||
|
activities: Array<{
|
||||||
|
activity_uuid: string
|
||||||
|
name: string
|
||||||
|
activity_type: string
|
||||||
|
}>
|
||||||
|
}>
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CourseActionsMobileProps {
|
||||||
|
courseuuid: string
|
||||||
|
orgslug: string
|
||||||
|
course: Course & {
|
||||||
|
org_id: number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const CourseActionsMobile = ({ courseuuid, orgslug, course }: CourseActionsMobileProps) => {
|
||||||
|
const router = useRouter()
|
||||||
|
const session = useLHSession() as any
|
||||||
|
const [linkedProducts, setLinkedProducts] = useState<any[]>([])
|
||||||
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||||
|
const [hasAccess, setHasAccess] = useState<boolean | null>(null)
|
||||||
|
|
||||||
|
const isStarted = course.trail?.runs?.some(
|
||||||
|
(run) => run.status === 'STATUS_IN_PROGRESS' && run.course_id === course.id
|
||||||
|
) ?? false
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchLinkedProducts = async () => {
|
||||||
|
try {
|
||||||
|
const response = await getProductsByCourse(
|
||||||
|
course.org_id,
|
||||||
|
course.id,
|
||||||
|
session.data?.tokens?.access_token
|
||||||
|
)
|
||||||
|
setLinkedProducts(response.data || [])
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch linked products')
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchLinkedProducts()
|
||||||
|
}, [course.id, course.org_id, session.data?.tokens?.access_token])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkAccess = async () => {
|
||||||
|
if (!session.data?.user) return
|
||||||
|
try {
|
||||||
|
const response = await checkPaidAccess(
|
||||||
|
parseInt(course.id),
|
||||||
|
course.org_id,
|
||||||
|
session.data?.tokens?.access_token
|
||||||
|
)
|
||||||
|
setHasAccess(response.has_access)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to check course access')
|
||||||
|
setHasAccess(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (linkedProducts.length > 0) {
|
||||||
|
checkAccess()
|
||||||
|
}
|
||||||
|
}, [course.id, course.org_id, session.data?.tokens?.access_token, linkedProducts])
|
||||||
|
|
||||||
|
const handleCourseAction = async () => {
|
||||||
|
if (!session.data?.user) {
|
||||||
|
router.push(getUriWithoutOrg(`/signup?orgslug=${orgslug}`))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isStarted) {
|
||||||
|
await removeCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
|
||||||
|
await revalidateTags(['courses'], orgslug)
|
||||||
|
router.refresh()
|
||||||
|
} else {
|
||||||
|
await startCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
|
||||||
|
await revalidateTags(['courses'], orgslug)
|
||||||
|
|
||||||
|
// Get the first activity from the first chapter
|
||||||
|
const firstChapter = course.chapters?.[0]
|
||||||
|
const firstActivity = firstChapter?.activities?.[0]
|
||||||
|
|
||||||
|
if (firstActivity) {
|
||||||
|
// Redirect to the first activity
|
||||||
|
router.push(
|
||||||
|
getUriWithOrg(orgslug, '') +
|
||||||
|
`/course/${courseuuid}/activity/${firstActivity.activity_uuid.replace('activity_', '')}`
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
router.refresh()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return <div className="animate-pulse h-16 bg-gray-100 rounded-lg" />
|
||||||
|
}
|
||||||
|
|
||||||
|
const author = course.authors[0]
|
||||||
|
const authorName = author.first_name && author.last_name
|
||||||
|
? `${author.first_name} ${author.last_name}`
|
||||||
|
: `@${author.username}`
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<UserAvatar
|
||||||
|
border="border-4"
|
||||||
|
avatar_url={author.avatar_image ? getUserAvatarMediaDirectory(author.user_uuid, author.avatar_image) : ''}
|
||||||
|
predefined_avatar={author.avatar_image ? undefined : 'empty'}
|
||||||
|
width={40}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-xs text-neutral-400 font-medium">Author</span>
|
||||||
|
<span className="text-sm font-semibold text-neutral-800">{authorName}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
{linkedProducts.length > 0 ? (
|
||||||
|
hasAccess ? (
|
||||||
|
<button
|
||||||
|
onClick={handleCourseAction}
|
||||||
|
className={`py-2 px-4 rounded-lg font-semibold text-sm transition-colors flex items-center gap-2 ${
|
||||||
|
isStarted
|
||||||
|
? 'bg-red-500 text-white hover:bg-red-600'
|
||||||
|
: 'bg-neutral-900 text-white hover:bg-neutral-800'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{isStarted ? (
|
||||||
|
<>
|
||||||
|
<LogOut className="w-4 h-4" />
|
||||||
|
Leave Course
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<LogIn className="w-4 h-4" />
|
||||||
|
Start Course
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Modal
|
||||||
|
isDialogOpen={isModalOpen}
|
||||||
|
onOpenChange={setIsModalOpen}
|
||||||
|
dialogContent={<CoursePaidOptions course={course} />}
|
||||||
|
dialogTitle="Purchase Course"
|
||||||
|
dialogDescription="Select a payment option to access this course"
|
||||||
|
minWidth="sm"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => setIsModalOpen(true)}
|
||||||
|
className="py-2 px-4 rounded-lg bg-neutral-900 text-white font-semibold text-sm hover:bg-neutral-800 transition-colors flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<ShoppingCart className="w-4 h-4" />
|
||||||
|
Purchase
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={handleCourseAction}
|
||||||
|
className={`py-2 px-4 rounded-lg font-semibold text-sm transition-colors flex items-center gap-2 ${
|
||||||
|
isStarted
|
||||||
|
? 'bg-red-500 text-white hover:bg-red-600'
|
||||||
|
: 'bg-neutral-900 text-white hover:bg-neutral-800'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{!session.data?.user ? (
|
||||||
|
<>
|
||||||
|
<LogIn className="w-4 h-4" />
|
||||||
|
Sign In
|
||||||
|
</>
|
||||||
|
) : isStarted ? (
|
||||||
|
<>
|
||||||
|
<LogOut className="w-4 h-4" />
|
||||||
|
Leave Course
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<LogIn className="w-4 h-4" />
|
||||||
|
Start Course
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CourseActionsMobile
|
||||||
|
|
@ -32,6 +32,14 @@ interface Course {
|
||||||
trail?: {
|
trail?: {
|
||||||
runs: CourseRun[]
|
runs: CourseRun[]
|
||||||
}
|
}
|
||||||
|
chapters?: Array<{
|
||||||
|
name: string
|
||||||
|
activities: Array<{
|
||||||
|
activity_uuid: string
|
||||||
|
name: string
|
||||||
|
activity_type: string
|
||||||
|
}>
|
||||||
|
}>
|
||||||
}
|
}
|
||||||
|
|
||||||
interface CourseActionsProps {
|
interface CourseActionsProps {
|
||||||
|
|
@ -129,10 +137,29 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
|
||||||
router.push(getUriWithoutOrg(`/signup?orgslug=${orgslug}`))
|
router.push(getUriWithoutOrg(`/signup?orgslug=${orgslug}`))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const action = isStarted ? removeCourse : startCourse
|
|
||||||
await action('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
|
if (isStarted) {
|
||||||
await revalidateTags(['courses'], orgslug)
|
await removeCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
|
||||||
router.refresh()
|
await revalidateTags(['courses'], orgslug)
|
||||||
|
router.refresh()
|
||||||
|
} else {
|
||||||
|
await startCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
|
||||||
|
await revalidateTags(['courses'], orgslug)
|
||||||
|
|
||||||
|
// Get the first activity from the first chapter
|
||||||
|
const firstChapter = course.chapters?.[0]
|
||||||
|
const firstActivity = firstChapter?.activities?.[0]
|
||||||
|
|
||||||
|
if (firstActivity) {
|
||||||
|
// Redirect to the first activity
|
||||||
|
router.push(
|
||||||
|
getUriWithOrg(orgslug, '') +
|
||||||
|
`/course/${courseuuid}/activity/${firstActivity.activity_uuid.replace('activity_', '')}`
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
router.refresh()
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
|
|
|
||||||
|
|
@ -37,10 +37,26 @@ const Onboarding: React.FC = () => {
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
const [isOnboardingComplete, setIsOnboardingComplete] = useState(true);
|
const [isOnboardingComplete, setIsOnboardingComplete] = useState(true);
|
||||||
const [isTemporarilyClosed, setIsTemporarilyClosed] = useState(false);
|
const [isTemporarilyClosed, setIsTemporarilyClosed] = useState(false);
|
||||||
|
const [isMobile, setIsMobile] = useState(false);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const org = useOrg() as any;
|
const org = useOrg() as any;
|
||||||
const isUserAdmin = useAdminStatus() as any;
|
const isUserAdmin = useAdminStatus() as any;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkMobile = () => {
|
||||||
|
setIsMobile(window.innerWidth < 768);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initial check
|
||||||
|
checkMobile();
|
||||||
|
|
||||||
|
// Add event listener for window resize
|
||||||
|
window.addEventListener('resize', checkMobile);
|
||||||
|
|
||||||
|
// Cleanup
|
||||||
|
return () => window.removeEventListener('resize', checkMobile);
|
||||||
|
}, []);
|
||||||
|
|
||||||
const onboardingData: OnboardingStep[] = [
|
const onboardingData: OnboardingStep[] = [
|
||||||
{
|
{
|
||||||
imageSrc: OnBoardWelcome,
|
imageSrc: OnBoardWelcome,
|
||||||
|
|
@ -208,6 +224,7 @@ const Onboarding: React.FC = () => {
|
||||||
localStorage.setItem('isOnboardingCompleted', 'true');
|
localStorage.setItem('isOnboardingCompleted', 'true');
|
||||||
localStorage.removeItem('onboardingLastStep'); // Clean up stored step
|
localStorage.removeItem('onboardingLastStep'); // Clean up stored step
|
||||||
setIsModalOpen(false);
|
setIsModalOpen(false);
|
||||||
|
setIsOnboardingComplete(true);
|
||||||
console.log('Onboarding skipped');
|
console.log('Onboarding skipped');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -219,7 +236,7 @@ const Onboarding: React.FC = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{isUserAdmin.isAdmin && !isUserAdmin.loading && !isOnboardingComplete && <Modal
|
{isUserAdmin.isAdmin && !isUserAdmin.loading && !isOnboardingComplete && !isMobile && <Modal
|
||||||
isDialogOpen={isModalOpen}
|
isDialogOpen={isModalOpen}
|
||||||
onOpenChange={setIsModalOpen}
|
onOpenChange={setIsModalOpen}
|
||||||
minHeight="sm"
|
minHeight="sm"
|
||||||
|
|
@ -236,12 +253,20 @@ const Onboarding: React.FC = () => {
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
dialogTrigger={
|
dialogTrigger={
|
||||||
|
|
||||||
<div className='fixed pb-10 w-full bottom-0 bg-gradient-to-t from-1% from-gray-950/25 to-transparent'>
|
<div className='fixed pb-10 w-full bottom-0 bg-gradient-to-t from-1% from-gray-950/25 to-transparent'>
|
||||||
<div className='bg-gray-950 flex space-x-2 font-bold cursor-pointer hover:bg-gray-900 shadow-md items-center text-gray-200 px-5 py-2 w-fit rounded-full mx-auto'>
|
<div className='bg-gray-950 flex space-x-2 font-bold cursor-pointer hover:bg-gray-900 shadow-md items-center text-gray-200 px-5 py-2 w-fit rounded-full mx-auto'>
|
||||||
<Sprout size={20} />
|
<Sprout size={20} />
|
||||||
<p>Onboarding</p>
|
<p>Onboarding</p>
|
||||||
<div className='h-2 w-2 bg-green-500 animate-pulse rounded-full'></div>
|
<div className='h-2 w-2 bg-green-500 animate-pulse rounded-full'></div>
|
||||||
|
<div
|
||||||
|
className="ml-2 pl-2 border-l border-gray-700 cursor-pointer"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
skipOnboarding();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Check size={16} className="hover:text-green-500" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
@ -307,6 +332,13 @@ const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
|
||||||
>
|
>
|
||||||
<PictureInPicture size={16} />
|
<PictureInPicture size={16} />
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
className="inline-flex items-center px-5 space-x-2 cursor-pointer py-1 rounded-full text-gray-600 antialiased font-bold bg-gray-100 hover:bg-gray-200"
|
||||||
|
onClick={skipOnboarding}
|
||||||
|
>
|
||||||
|
<p>End</p>
|
||||||
|
<Check size={16} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='actions_buttons flex space-x-2'>
|
<div className='actions_buttons flex space-x-2'>
|
||||||
{step.buttons?.map((button, index) => (
|
{step.buttons?.map((button, index) => (
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,156 @@
|
||||||
|
'use client'
|
||||||
|
import { useOrg } from '@components/Contexts/OrgContext'
|
||||||
|
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
|
||||||
|
import ConfirmationModal from '@components/Objects/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 { BookMinus, FilePenLine, Settings2, MoreVertical } from 'lucide-react'
|
||||||
|
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { useRouter } from 'next/navigation'
|
||||||
|
import React from 'react'
|
||||||
|
import toast from 'react-hot-toast'
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@components/ui/dropdown-menu"
|
||||||
|
|
||||||
|
type Course = {
|
||||||
|
course_uuid: string
|
||||||
|
name: string
|
||||||
|
description: string
|
||||||
|
thumbnail_image: string
|
||||||
|
org_id: string
|
||||||
|
update_date: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type PropsType = {
|
||||||
|
course: Course
|
||||||
|
orgslug: string
|
||||||
|
customLink?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AdminEditOptionsProps {
|
||||||
|
course: Course
|
||||||
|
orgslug: string
|
||||||
|
deleteCourse: () => Promise<void>
|
||||||
|
}
|
||||||
|
|
||||||
|
export const removeCoursePrefix = (course_uuid: string) => course_uuid.replace('course_', '')
|
||||||
|
|
||||||
|
const AdminEditOptions: React.FC<AdminEditOptionsProps> = ({ course, orgslug, deleteCourse }) => {
|
||||||
|
return (
|
||||||
|
<AuthenticatedClientElement
|
||||||
|
action="update"
|
||||||
|
ressourceType="courses"
|
||||||
|
checkMethod="roles"
|
||||||
|
orgId={course.org_id}
|
||||||
|
>
|
||||||
|
<div className="absolute top-2 right-2 z-20">
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<button className="p-1 bg-white rounded-full hover:bg-gray-100 transition-colors shadow-md">
|
||||||
|
<MoreVertical size={20} className="text-gray-700" />
|
||||||
|
</button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end" className="w-56">
|
||||||
|
<DropdownMenuItem asChild>
|
||||||
|
<Link prefetch href={getUriWithOrg(orgslug, `/dash/courses/course/${removeCoursePrefix(course.course_uuid)}/content`)}>
|
||||||
|
<FilePenLine className="mr-2 h-4 w-4" /> Edit Content
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem asChild>
|
||||||
|
<Link prefetch href={getUriWithOrg(orgslug, `/dash/courses/course/${removeCoursePrefix(course.course_uuid)}/general`)}>
|
||||||
|
<Settings2 className="mr-2 h-4 w-4" /> Settings
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem asChild>
|
||||||
|
<ConfirmationModal
|
||||||
|
confirmationButtonText="Delete Course"
|
||||||
|
confirmationMessage="Are you sure you want to delete this course?"
|
||||||
|
dialogTitle={`Delete ${course.name}?`}
|
||||||
|
dialogTrigger={
|
||||||
|
<button className="w-full text-left flex items-center px-2 py-1 rounded-md text-sm bg-rose-500/10 hover:bg-rose-500/20 transition-colors text-red-600">
|
||||||
|
<BookMinus className="mr-4 h-4 w-4" /> Delete Course
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
functionToExecute={deleteCourse}
|
||||||
|
status="warning"
|
||||||
|
/>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</div>
|
||||||
|
</AuthenticatedClientElement>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const CourseThumbnailLanding: React.FC<PropsType> = ({ course, orgslug, customLink }) => {
|
||||||
|
const router = useRouter()
|
||||||
|
const org = useOrg() as any
|
||||||
|
const session = useLHSession() as any
|
||||||
|
|
||||||
|
const deleteCourse = async () => {
|
||||||
|
const toastId = toast.loading('Deleting course...')
|
||||||
|
try {
|
||||||
|
await deleteCourseFromBackend(course.course_uuid, session.data?.tokens?.access_token)
|
||||||
|
await revalidateTags(['courses'], orgslug)
|
||||||
|
toast.success('Course deleted successfully')
|
||||||
|
router.refresh()
|
||||||
|
} catch (error) {
|
||||||
|
toast.error('Failed to delete course')
|
||||||
|
} finally {
|
||||||
|
toast.dismiss(toastId)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const thumbnailImage = course.thumbnail_image
|
||||||
|
? getCourseThumbnailMediaDirectory(org?.org_uuid, course.course_uuid, course.thumbnail_image)
|
||||||
|
: '../empty_thumbnail.png'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative flex flex-col bg-white rounded-xl nice-shadow overflow-hidden min-w-[280px] w-full max-w-sm flex-shrink-0 m-2">
|
||||||
|
<AdminEditOptions
|
||||||
|
course={course}
|
||||||
|
orgslug={orgslug}
|
||||||
|
deleteCourse={deleteCourse}
|
||||||
|
/>
|
||||||
|
<Link prefetch href={customLink ? customLink : getUriWithOrg(orgslug, `/course/${removeCoursePrefix(course.course_uuid)}`)}>
|
||||||
|
<div
|
||||||
|
className="inset-0 ring-1 ring-inset ring-black/10 rounded-t-xl w-full aspect-video bg-cover bg-center"
|
||||||
|
style={{ backgroundImage: `url(${thumbnailImage})` }}
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
<div className='flex flex-col w-full p-4 space-y-3'>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<h2 className="font-bold text-gray-800 leading-tight text-base min-h-[2.75rem] line-clamp-2">{course.name}</h2>
|
||||||
|
<p className='text-xs text-gray-700 leading-normal min-h-[3.75rem] line-clamp-3'>{course.description}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
{course.update_date && (
|
||||||
|
<div className="inline-flex h-5 min-w-[140px] items-center justify-center px-2 rounded-md bg-gray-100/80 border border-gray-200">
|
||||||
|
<span className="text-[10px] font-medium text-gray-600 truncate">
|
||||||
|
Updated {new Date(course.update_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
prefetch
|
||||||
|
href={customLink ? customLink : getUriWithOrg(orgslug, `/course/${removeCoursePrefix(course.course_uuid)}`)}
|
||||||
|
className="inline-flex items-center justify-center w-full px-3 py-1.5 bg-black text-white text-xs font-medium rounded-lg hover:bg-gray-800 transition-colors"
|
||||||
|
>
|
||||||
|
Start Learning
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CourseThumbnailLanding
|
||||||
|
|
@ -18,6 +18,11 @@ export function getCourseThumbnailMediaDirectory(
|
||||||
return uri
|
return uri
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getOrgLandingMediaDirectory(orgUUID: string, fileId: string) {
|
||||||
|
let uri = `${getMediaUrl()}content/orgs/${orgUUID}/landing/${fileId}`
|
||||||
|
return uri
|
||||||
|
}
|
||||||
|
|
||||||
export function getUserAvatarMediaDirectory(userUUID: string, fileId: string) {
|
export function getUserAvatarMediaDirectory(userUUID: string, fileId: string) {
|
||||||
let uri = `${getMediaUrl()}content/users/${userUUID}/avatars/${fileId}`
|
let uri = `${getMediaUrl()}content/users/${userUUID}/avatars/${fileId}`
|
||||||
return uri
|
return uri
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import { getAPIUrl } from '@services/config/config'
|
import { getAPIUrl } from '@services/config/config'
|
||||||
import {
|
import {
|
||||||
|
RequestBodyFormWithAuthHeader,
|
||||||
RequestBodyWithAuthHeader,
|
RequestBodyWithAuthHeader,
|
||||||
errorHandling,
|
errorHandling,
|
||||||
getResponseMetadata,
|
getResponseMetadata,
|
||||||
|
|
@ -101,6 +102,35 @@ export async function updateUserRole(
|
||||||
return res
|
return res
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function updateOrgLanding(
|
||||||
|
org_id: any,
|
||||||
|
landing_object: any,
|
||||||
|
access_token: string
|
||||||
|
) {
|
||||||
|
const result = await fetch(
|
||||||
|
`${getAPIUrl()}orgs/${org_id}/landing`,
|
||||||
|
RequestBodyWithAuthHeader('PUT', landing_object, null, access_token)
|
||||||
|
)
|
||||||
|
const res = await getResponseMetadata(result)
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function uploadLandingContent(
|
||||||
|
org_uuid: any,
|
||||||
|
content_file: File,
|
||||||
|
access_token: string
|
||||||
|
) {
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append('content_file', content_file)
|
||||||
|
|
||||||
|
const result = await fetch(
|
||||||
|
`${getAPIUrl()}orgs/${org_uuid}/landing/content`,
|
||||||
|
RequestBodyFormWithAuthHeader('POST', formData, null, access_token)
|
||||||
|
)
|
||||||
|
const res = await getResponseMetadata(result)
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
|
||||||
export async function removeUserFromOrg(
|
export async function removeUserFromOrg(
|
||||||
org_id: any,
|
org_id: any,
|
||||||
user_id: any,
|
user_id: any,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue