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

fix: block issues

Browse source
This commit is contained in:
swve 2023-12-14 21:15:24 +01:00
parent 759c68babb
commit 573b9a43fc
14 changed files with 214 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

12
apps/api/src/routers/blocks.py
View file

@ -28,14 +28,14 @@ router = APIRouter()
async def api_create_image_file_block( async def api_create_image_file_block(
request: Request, request: Request,
file_object: UploadFile, file_object: UploadFile,
activity_id: str = Form(), activity_uuid: str = Form(),
db_session=Depends(get_db_session), db_session=Depends(get_db_session),
current_user: PublicUser = Depends(get_current_user), current_user: PublicUser = Depends(get_current_user),
) -> BlockRead: ) -> BlockRead:
""" """
Create new image file Create new image file
""" """
return await create_image_block(request, file_object, activity_id, db_session) return await create_image_block(request, file_object, activity_uuid, db_session)
@router.get("/image") @router.get("/image")
@ -60,14 +60,14 @@ async def api_get_image_file_block(
async def api_create_video_file_block( async def api_create_video_file_block(
request: Request, request: Request,
file_object: UploadFile, file_object: UploadFile,
activity_id: str = Form(), activity_uuid: str = Form(),
db_session=Depends(get_db_session), db_session=Depends(get_db_session),
current_user: PublicUser = Depends(get_current_user), current_user: PublicUser = Depends(get_current_user),
) -> BlockRead: ) -> BlockRead:
""" """
Create new video file Create new video file
""" """
return await create_video_block(request, file_object, activity_id, db_session) return await create_video_block(request, file_object, activity_uuid, db_session)
@router.get("/video") @router.get("/video")
@ -92,14 +92,14 @@ async def api_get_video_file_block(
async def api_create_pdf_file_block( async def api_create_pdf_file_block(
request: Request, request: Request,
file_object: UploadFile, file_object: UploadFile,
activity_id: str = Form(), activity_uuid: str = Form(),
db_session=Depends(get_db_session), db_session=Depends(get_db_session),
current_user: PublicUser = Depends(get_current_user), current_user: PublicUser = Depends(get_current_user),
) -> BlockRead: ) -> BlockRead:
""" """
Create new pdf file Create new pdf file
""" """
return await create_pdf_block(request, file_object, activity_id, db_session) return await create_pdf_block(request, file_object, activity_uuid, db_session)
@router.get("/pdf") @router.get("/pdf")

18
apps/api/src/services/blocks/block_types/imageBlock/imageBlock.py
View file

@ -1,5 +1,6 @@
from datetime import datetime from datetime import datetime
from uuid import uuid4 from uuid import uuid4
from src.db.organizations import Organization
from fastapi import HTTPException, status, UploadFile, Request from fastapi import HTTPException, status, UploadFile, Request
from sqlmodel import Session, select from sqlmodel import Session, select
from src.db.activities import Activity from src.db.activities import Activity
@ -10,9 +11,9 @@ from src.services.users.users import PublicUser
async def create_image_block( async def create_image_block(
request: Request, image_file: UploadFile, activity_id: str, db_session: Session request: Request, image_file: UploadFile, activity_uuid: str, db_session: Session
): ):
statement = select(Activity).where(Activity.id == activity_id) statement = select(Activity).where(Activity.activity_uuid == activity_uuid)
activity = db_session.exec(statement).first() activity = db_session.exec(statement).first()
if not activity: if not activity:
@ -22,8 +23,9 @@ async def create_image_block(
block_type = "imageBlock" block_type = "imageBlock"
# get org_id from activity # get org_uuid
org_id = activity.org_id statement = select(Organization).where(Organization.id == activity.org_id)
org = db_session.exec(statement).first()
# get course # get course
statement = select(Course).where(Course.id == activity.course_id) statement = select(Course).where(Course.id == activity.course_id)
@ -40,12 +42,12 @@ async def create_image_block(
block_data = await upload_file_and_return_file_object( block_data = await upload_file_and_return_file_object(
request, request,
image_file, image_file,
activity_id, activity_uuid,
block_uuid, block_uuid,
["jpg", "jpeg", "png", "gif"], ["jpg", "jpeg", "png", "gif"],
block_type, block_type,
str(org_id), org.org_uuid,
str(course.id), str(course.course_uuid),
) )
# create block # create block
@ -53,7 +55,7 @@ async def create_image_block(
activity_id=activity.id if activity.id else 0, activity_id=activity.id if activity.id else 0,
block_type=BlockTypeEnum.BLOCK_IMAGE, block_type=BlockTypeEnum.BLOCK_IMAGE,
content=block_data.dict(), content=block_data.dict(),
org_id=org_id, org_id=org.id if org.id else 0,
course_id=course.id if course.id else 0, course_id=course.id if course.id else 0,
block_uuid=block_uuid, block_uuid=block_uuid,
creation_date=str(datetime.now()), creation_date=str(datetime.now()),

18
apps/api/src/services/blocks/block_types/pdfBlock/pdfBlock.py
View file

@ -1,5 +1,6 @@
from datetime import datetime from datetime import datetime
from uuid import uuid4 from uuid import uuid4
from src.db.organizations import Organization
from fastapi import HTTPException, status, UploadFile, Request from fastapi import HTTPException, status, UploadFile, Request
from sqlmodel import Session, select from sqlmodel import Session, select
from src.db.activities import Activity from src.db.activities import Activity
@ -11,9 +12,9 @@ from src.services.users.users import PublicUser
async def create_pdf_block( async def create_pdf_block(
request: Request, pdf_file: UploadFile, activity_id: str, db_session: Session request: Request, pdf_file: UploadFile, activity_uuid: str, db_session: Session
): ):
statement = select(Activity).where(Activity.id == activity_id) statement = select(Activity).where(Activity.activity_uuid == activity_uuid)
activity = db_session.exec(statement).first() activity = db_session.exec(statement).first()
if not activity: if not activity:
@ -23,8 +24,9 @@ async def create_pdf_block(
block_type = "pdfBlock" block_type = "pdfBlock"
# get org_id from activity # get org_uuid
org_id = activity.org_id statement = select(Organization).where(Organization.id == activity.org_id)
org = db_session.exec(statement).first()
# get course # get course
statement = select(Course).where(Course.id == activity.course_id) statement = select(Course).where(Course.id == activity.course_id)
@ -41,12 +43,12 @@ async def create_pdf_block(
block_data = await upload_file_and_return_file_object( block_data = await upload_file_and_return_file_object(
request, request,
pdf_file, pdf_file,
activity_id, activity_uuid,
block_uuid, block_uuid,
["pdf"], ["pdf"],
block_type, block_type,
str(org_id), org.org_uuid,
str(course.id), str(course.course_uuid),
) )
# create block # create block
@ -54,7 +56,7 @@ async def create_pdf_block(
activity_id=activity.id if activity.id else 0, activity_id=activity.id if activity.id else 0,
block_type=BlockTypeEnum.BLOCK_DOCUMENT_PDF, block_type=BlockTypeEnum.BLOCK_DOCUMENT_PDF,
content=block_data.dict(), content=block_data.dict(),
org_id=org_id, org_id=org.id if org.id else 0,
course_id=course.id if course.id else 0, course_id=course.id if course.id else 0,
block_uuid=block_uuid, block_uuid=block_uuid,
creation_date=str(datetime.now()), creation_date=str(datetime.now()),

18
apps/api/src/services/blocks/block_types/videoBlock/videoBlock.py
View file

@ -1,5 +1,6 @@
from datetime import datetime from datetime import datetime
from uuid import uuid4 from uuid import uuid4
from src.db.organizations import Organization
from fastapi import HTTPException, status, UploadFile, Request from fastapi import HTTPException, status, UploadFile, Request
from sqlmodel import Session, select from sqlmodel import Session, select
from src.db.activities import Activity from src.db.activities import Activity
@ -11,9 +12,9 @@ from src.services.users.users import PublicUser
async def create_video_block( async def create_video_block(
request: Request, video_file: UploadFile, activity_id: str, db_session: Session request: Request, video_file: UploadFile, activity_uuid: str, db_session: Session
): ):
statement = select(Activity).where(Activity.id == activity_id) statement = select(Activity).where(Activity.activity_uuid == activity_uuid)
activity = db_session.exec(statement).first() activity = db_session.exec(statement).first()
if not activity: if not activity:
@ -23,8 +24,9 @@ async def create_video_block(
block_type = "videoBlock" block_type = "videoBlock"
# get org_id from activity # get org_uuid
org_id = activity.org_id statement = select(Organization).where(Organization.id == activity.org_id)
org = db_session.exec(statement).first()
# get course # get course
statement = select(Course).where(Course.id == activity.course_id) statement = select(Course).where(Course.id == activity.course_id)
@ -41,12 +43,12 @@ async def create_video_block(
block_data = await upload_file_and_return_file_object( block_data = await upload_file_and_return_file_object(
request, request,
video_file, video_file,
activity_id, activity_uuid,
block_uuid, block_uuid,
["mp4", "webm", "ogg"], ["mp4", "webm", "ogg"],
block_type, block_type,
str(org_id), org.org_uuid,
str(course.id), str(course.course_uuid),
) )
# create block # create block
@ -54,7 +56,7 @@ async def create_video_block(
activity_id=activity.id if activity.id else 0, activity_id=activity.id if activity.id else 0,
block_type=BlockTypeEnum.BLOCK_VIDEO, block_type=BlockTypeEnum.BLOCK_VIDEO,
content=block_data.dict(), content=block_data.dict(),
org_id=org_id, org_id=org.id if org.id else 0,
course_id=course.id if course.id else 0, course_id=course.id if course.id else 0,
block_uuid=block_uuid, block_uuid=block_uuid,
creation_date=str(datetime.now()), creation_date=str(datetime.now()),

2
apps/api/src/services/blocks/schemas/files.py
View file

@ -7,4 +7,4 @@ class BlockFile(BaseModel):
file_name: str file_name: str
file_size: int file_size: int
file_type: str file_type: str
activity_id: str activity_uuid: str

12
apps/api/src/services/blocks/utils/upload_files.py
View file

@ -7,12 +7,12 @@ from src.services.utils.upload_content import upload_content
async def upload_file_and_return_file_object( async def upload_file_and_return_file_object(
request: Request, request: Request,
file: UploadFile, file: UploadFile,
activity_id: str, activity_uuid: str,
block_id: str, block_id: str,
list_of_allowed_file_formats: list, list_of_allowed_file_formats: list,
type_of_block: str, type_of_block: str,
org_id: str, org_uuid: str,
course_id: str, course_uuid: str,
): ):
# get file id # get file id
file_id = str(uuid.uuid4()) file_id = str(uuid.uuid4())
@ -45,12 +45,12 @@ async def upload_file_and_return_file_object(
file_name=file_name, file_name=file_name,
file_size=file_size, file_size=file_size,
file_type=file_type, file_type=file_type,
activity_id=activity_id, activity_uuid=activity_uuid,
) )
await upload_content( await upload_content(
f"courses/{course_id}/activities/{activity_id}/dynamic/blocks/{type_of_block}/{block_id}", f"courses/{course_uuid}/activities/{activity_uuid}/dynamic/blocks/{type_of_block}/{block_id}",
org_id=org_id, org_uuid=org_uuid,
file_binary=file_binary, file_binary=file_binary,
file_and_format=f"{file_id}.{file_format}", file_and_format=f"{file_id}.{file_format}",
) )

83
apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
View file

@ -12,6 +12,7 @@ import { useRouter } from "next/navigation";
import AuthenticatedClientElement from "@components/Security/AuthenticatedClientElement"; import AuthenticatedClientElement from "@components/Security/AuthenticatedClientElement";
import { getCourseThumbnailMediaDirectory } from "@services/media/media"; import { getCourseThumbnailMediaDirectory } from "@services/media/media";
import { useOrg } from "@components/Contexts/OrgContext"; import { useOrg } from "@components/Contexts/OrgContext";
import { CourseProvider } from "@components/Contexts/CourseContext";
interface ActivityClientProps { interface ActivityClientProps {
activityid: string; activityid: string;
@ -44,47 +45,49 @@ function ActivityClient(props: ActivityClientProps) {
return ( return (
<> <>
<GeneralWrapperStyled> <CourseProvider courseuuid={course?.course_uuid}>
<div className="space-y-4 pt-4"> <GeneralWrapperStyled>
<div className="flex space-x-6"> <div className="space-y-4 pt-4">
<div className="flex"> <div className="flex space-x-6">
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseuuid}`}> <div className="flex">
<img className="w-[100px] h-[57px] rounded-md drop-shadow-md" src={`${getCourseThumbnailMediaDirectory(org?.org_uuid, course.course_uuid, course.thumbnail_image)}`} alt="" /> <Link href={getUriWithOrg(orgslug, "") + `/course/${courseuuid}`}>
</Link> <img className="w-[100px] h-[57px] rounded-md drop-shadow-md" src={`${getCourseThumbnailMediaDirectory(org?.org_uuid, course.course_uuid, course.thumbnail_image)}`} alt="" />
</div> </Link>
<div className="flex flex-col -space-y-1"> </div>
<p className="font-bold text-gray-700 text-md">Course </p> <div className="flex flex-col -space-y-1">
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{course.name}</h1> <p className="font-bold text-gray-700 text-md">Course </p>
</div> <h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{course.name}</h1>
</div>
<ActivityIndicators course_uuid={courseuuid} current_activity={activityid} activity={activity} orgslug={orgslug} course={course} />
<div className="flex justify-between items-center">
<div className="flex flex-col -space-y-1">
<p className="font-bold text-gray-700 text-md">Chapter : {getChapterName(activity.coursechapter_id)}</p>
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{activity.name}</h1>
</div>
<div className="flex space-x-2">
<AuthenticatedClientElement checkMethod="authentication">
<MarkStatus activity={activity} activityid={activityid} course={course} orgslug={orgslug} />
</AuthenticatedClientElement>
</div>
</div>
{activity ? (
<div className={`p-7 pt-4 drop-shadow-sm rounded-lg ${activity.activity_type == 'TYPE_DYNAMIC' ? 'bg-white' : 'bg-zinc-950'}`}>
<div>
{activity.activity_type == "TYPE_DYNAMIC" && <Canva content={activity.content} activity={activity} />}
{/* todo : use apis & streams instead of this */}
{activity.activity_type == "TYPE_VIDEO" && <VideoActivity course={course} activity={activity} />}
{activity.activity_type == "TYPE_DOCUMENT" && <DocumentPdfActivity course={course} activity={activity} />}
</div> </div>
</div> </div>
) : (<div></div>)} <ActivityIndicators course_uuid={courseuuid} current_activity={activityid} activity={activity} orgslug={orgslug} course={course} />
{<div style={{ height: "100px" }}></div>}
</div> <div className="flex justify-between items-center">
</GeneralWrapperStyled> <div className="flex flex-col -space-y-1">
<p className="font-bold text-gray-700 text-md">Chapter : {getChapterName(activity.coursechapter_id)}</p>
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{activity.name}</h1>
</div>
<div className="flex space-x-2">
<AuthenticatedClientElement checkMethod="authentication">
<MarkStatus activity={activity} activityid={activityid} course={course} orgslug={orgslug} />
</AuthenticatedClientElement>
</div>
</div>
{activity ? (
<div className={`p-7 pt-4 drop-shadow-sm rounded-lg ${activity.activity_type == 'TYPE_DYNAMIC' ? 'bg-white' : 'bg-zinc-950'}`}>
<div>
{activity.activity_type == "TYPE_DYNAMIC" && <Canva content={activity.content} activity={activity} />}
{/* todo : use apis & streams instead of this */}
{activity.activity_type == "TYPE_VIDEO" && <VideoActivity course={course} activity={activity} />}
{activity.activity_type == "TYPE_DOCUMENT" && <DocumentPdfActivity course={course} activity={activity} />}
</div>
</div>
) : (<div></div>)}
{<div style={{ height: "100px" }}></div>}
</div>
</GeneralWrapperStyled>
</CourseProvider>
</> </>
); );
} }
@ -110,7 +113,7 @@ export function MarkStatus(props: { activity: any, activityid: string, course: a
console.log('isActivityCompleted', isActivityCompleted()); console.log('isActivityCompleted', isActivityCompleted());
return ( return (
<>{ isActivityCompleted() ? ( <>{isActivityCompleted() ? (
<div className="bg-teal-600 rounded-md drop-shadow-md flex flex-col p-3 text-sm text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out" > <div className="bg-teal-600 rounded-md drop-shadow-md flex flex-col p-3 text-sm text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out" >
<i> <i>
<Check size={15}></Check> <Check size={15}></Check>

134
apps/web/components/Objects/Editor/Editor.tsx
View file

@ -36,6 +36,8 @@ import ts from 'highlight.js/lib/languages/typescript'
import html from 'highlight.js/lib/languages/xml' import html from 'highlight.js/lib/languages/xml'
import python from 'highlight.js/lib/languages/python' import python from 'highlight.js/lib/languages/python'
import java from 'highlight.js/lib/languages/java' import java from 'highlight.js/lib/languages/java'
import { CourseProvider } from "@components/Contexts/CourseContext";
import { OrgProvider } from "@components/Contexts/OrgContext";
interface Editor { interface Editor {
@ -127,71 +129,75 @@ function Editor(props: Editor) {
return ( return (
<Page> <Page>
<motion.div <OrgProvider orgslug={props.org?.slug}>
initial={{ opacity: 0, scale: 0.98 }} <CourseProvider courseuuid={props.course.course_uuid}>
animate={{ opacity: 1, scale: 1 }} <motion.div
key="modal" initial={{ opacity: 0, scale: 0.98 }}
transition={{ animate={{ opacity: 1, scale: 1 }}
type: "spring", key="modal"
stiffness: 360, transition={{
damping: 70, type: "spring",
delay: 0.02, stiffness: 360,
}} damping: 70,
exit={{ opacity: 0 }} delay: 0.02,
> }}
<EditorTop className="fixed bg-white bg-opacity-95 backdrop-blur backdrop-brightness-125"> exit={{ opacity: 0 }}
<EditorDocSection> >
<EditorInfoWrapper> <EditorTop className="fixed bg-white bg-opacity-95 backdrop-blur backdrop-brightness-125">
<Link href="/"> <EditorDocSection>
<EditorInfoLearnHouseLogo width={25} height={25} src={learnhouseIcon} alt="" /> <EditorInfoWrapper>
</Link> <Link href="/">
<Link target="_blank" href={`/course/${course_uuid}/edit`}> <EditorInfoLearnHouseLogo width={25} height={25} src={learnhouseIcon} alt="" />
<EditorInfoThumbnail src={`${getCourseThumbnailMediaDirectory(props.org?.org_uuid, props.course.course_uuid, props.course.thumbnail_image)}`} alt=""></EditorInfoThumbnail> </Link>
</Link> <Link target="_blank" href={`/course/${course_uuid}/edit`}>
<EditorInfoDocName> <EditorInfoThumbnail src={`${getCourseThumbnailMediaDirectory(props.org?.org_uuid, props.course.course_uuid, props.course.thumbnail_image)}`} alt=""></EditorInfoThumbnail>
{" "} </Link>
<b>{props.course.name}</b> <SlashIcon /> {props.activity.name}{" "} <EditorInfoDocName>
</EditorInfoDocName> {" "}
<b>{props.course.name}</b> <SlashIcon /> {props.activity.name}{" "}
</EditorInfoDocName>
</EditorInfoWrapper> </EditorInfoWrapper>
<EditorButtonsWrapper> <EditorButtonsWrapper>
<ToolbarButtons editor={editor} /> <ToolbarButtons editor={editor} />
</EditorButtonsWrapper> </EditorButtonsWrapper>
</EditorDocSection> </EditorDocSection>
<EditorUsersSection> <EditorUsersSection>
<EditorUserProfileWrapper> <EditorUserProfileWrapper>
{!auth.isAuthenticated && <span>Loading</span>} {!auth.isAuthenticated && <span>Loading</span>}
{auth.isAuthenticated && <Avvvatars value={auth.userInfo.user_uuid} style="shape" />} {auth.isAuthenticated && <Avvvatars value={auth.userInfo.user_uuid} style="shape" />}
</EditorUserProfileWrapper> </EditorUserProfileWrapper>
<DividerVerticalIcon style={{ marginTop: "auto", marginBottom: "auto", color: "grey", opacity: '0.5' }} /> <DividerVerticalIcon style={{ marginTop: "auto", marginBottom: "auto", color: "grey", opacity: '0.5' }} />
<EditorLeftOptionsSection className="space-x-2 pl-2 pr-3"> <EditorLeftOptionsSection className="space-x-2 pl-2 pr-3">
<div className="bg-sky-600 hover:bg-sky-700 transition-all ease-linear px-3 py-2 font-black text-sm shadow text-teal-100 rounded-lg hover:cursor-pointer" onClick={() => props.setContent(editor.getJSON())}> Save </div> <div className="bg-sky-600 hover:bg-sky-700 transition-all ease-linear px-3 py-2 font-black text-sm shadow text-teal-100 rounded-lg hover:cursor-pointer" onClick={() => props.setContent(editor.getJSON())}> Save </div>
<ToolTip content="Preview"> <ToolTip content="Preview">
<Link target="_blank" href={`/course/${course_uuid}/activity/${activity_uuid}`}> <Link target="_blank" href={`/course/${course_uuid}/activity/${activity_uuid}`}>
<div className="flex bg-neutral-600 hover:bg-neutral-700 transition-all ease-linear h-9 px-3 py-2 font-black justify-center items-center text-sm shadow text-neutral-100 rounded-lg hover:cursor-pointer"> <div className="flex bg-neutral-600 hover:bg-neutral-700 transition-all ease-linear h-9 px-3 py-2 font-black justify-center items-center text-sm shadow text-neutral-100 rounded-lg hover:cursor-pointer">
<Eye className="mx-auto items-center" size={15} /> <Eye className="mx-auto items-center" size={15} />
</div> </div>
</Link> </Link>
</ToolTip> </ToolTip>
</EditorLeftOptionsSection> </EditorLeftOptionsSection>
</EditorUsersSection> </EditorUsersSection>
</EditorTop> </EditorTop>
</motion.div> </motion.div>
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.99 }} initial={{ opacity: 0, scale: 0.99 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ transition={{
type: "spring", type: "spring",
stiffness: 360, stiffness: 360,
damping: 70, damping: 70,
delay: 0.5, delay: 0.5,
}} }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
> >
<EditorContentWrapper> <EditorContentWrapper>
<EditorContent editor={editor} /> <EditorContent editor={editor} />
</EditorContentWrapper> </EditorContentWrapper>
</motion.div> </motion.div>
</CourseProvider>
</OrgProvider>
</Page> </Page>
); );
} }

37
apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
View file

@ -1,19 +1,22 @@
import { NodeViewWrapper } from "@tiptap/react"; import { NodeViewWrapper } from "@tiptap/react";
import React from "react"; import React, { useEffect } from "react";
import styled from "styled-components"; import styled from "styled-components";
import { Resizable } from 're-resizable'; import { Resizable } from 're-resizable';
import { AlertTriangle, Image, Loader } from "lucide-react"; import { AlertTriangle, Image, Loader } from "lucide-react";
import { uploadNewImageFile } from "../../../../../services/blocks/Image/images"; import { uploadNewImageFile } from "../../../../../services/blocks/Image/images";
import { UploadIcon } from "@radix-ui/react-icons"; import { UploadIcon } from "@radix-ui/react-icons";
import { getActivityBlockMediaDirectory } from "@services/media/media"; import { getActivityBlockMediaDirectory } from "@services/media/media";
import { useOrg } from "@components/Contexts/OrgContext";
import { useCourse } from "@components/Contexts/CourseContext";
function ImageBlockComponent(props: any) { function ImageBlockComponent(props: any) {
const org = useOrg() as any;
const course = useCourse() as any;
const [image, setImage] = React.useState(null); const [image, setImage] = React.useState(null);
const [isLoading, setIsLoading] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false);
const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject); const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject);
const [imageSize, setImageSize] = React.useState({ width: props.node.attrs.size ? props.node.attrs.size.width : 300 }); const [imageSize, setImageSize] = React.useState({ width: props.node.attrs.size ? props.node.attrs.size.width : 300 });
const fileId = blockObject ? `${blockObject.block_data.file_id}.${blockObject.block_data.file_format}` : null; const fileId = blockObject ? `${blockObject.content.file_id}.${blockObject.content.file_format}` : null;
const handleImageChange = (event: React.ChangeEvent<any>) => { const handleImageChange = (event: React.ChangeEvent<any>) => {
setImage(event.target.files[0]); setImage(event.target.files[0]);
}; };
@ -21,7 +24,7 @@ function ImageBlockComponent(props: any) {
const handleSubmit = async (e: any) => { const handleSubmit = async (e: any) => {
e.preventDefault(); e.preventDefault();
setIsLoading(true); setIsLoading(true);
let object = await uploadNewImageFile(image, props.extension.options.activity.activity_id); let object = await uploadNewImageFile(image, props.extension.options.activity.activity_uuid);
setIsLoading(false); setIsLoading(false);
setblockObject(object); setblockObject(object);
props.updateAttributes({ props.updateAttributes({
@ -30,6 +33,10 @@ function ImageBlockComponent(props: any) {
}); });
}; };
useEffect(() => {
}
, [course, org]);
return ( return (
<NodeViewWrapper className="block-image"> <NodeViewWrapper className="block-image">
{!blockObject && props.extension.options.editable && ( {!blockObject && props.extension.options.editable && (
@ -50,10 +57,10 @@ function ImageBlockComponent(props: any) {
{blockObject && ( {blockObject && (
<Resizable defaultSize={{ width: imageSize.width, height: "100%" }} <Resizable defaultSize={{ width: imageSize.width, height: "100%" }}
handleStyles={{ handleStyles={{
right: { position: 'unset', width: 7, height: 30, borderRadius: 20, cursor: 'col-resize', backgroundColor: 'black', opacity: '0.3', margin: 'auto', marginLeft:5 }, right: { position: 'unset', width: 7, height: 30, borderRadius: 20, cursor: 'col-resize', backgroundColor: 'black', opacity: '0.3', margin: 'auto', marginLeft: 5 },
}} }}
style={{ margin: "auto", display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }} style={{ margin: "auto", display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }}
maxWidth={1000} maxWidth={1000}
minWidth={200} minWidth={200}
onResizeStop={(e, direction, ref, d) => { onResizeStop={(e, direction, ref, d) => {
@ -68,15 +75,15 @@ function ImageBlockComponent(props: any) {
}} }}
> >
<img <img
src={`${getActivityBlockMediaDirectory(props.extension.options.activity.org_id, src={`${getActivityBlockMediaDirectory(org?.org_uuid,
props.extension.options.activity.course_uuid, course?.courseStructure.course_uuid,
props.extension.options.activity.activity_id, props.extension.options.activity.activity_uuid,
blockObject.block_id, blockObject.block_uuid,
blockObject ? fileId : ' ', 'imageBlock')}`} blockObject ? fileId : ' ', 'imageBlock')}`}
alt="" alt=""
className="rounded-lg shadow " className="rounded-lg shadow "
/> />
</Resizable> </Resizable>

22
apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
View file

@ -1,17 +1,21 @@
import { NodeViewWrapper } from "@tiptap/react"; import { NodeViewWrapper } from "@tiptap/react";
import React from "react"; import React, { useEffect } from "react";
import styled from "styled-components"; import styled from "styled-components";
import { AlertCircle, AlertTriangle, FileText, Image, ImagePlus, Info, Loader } from "lucide-react"; import { AlertCircle, AlertTriangle, FileText, Image, ImagePlus, Info, Loader } from "lucide-react";
import { getPDFFile, uploadNewPDFFile } from "../../../../../services/blocks/Pdf/pdf"; import { getPDFFile, uploadNewPDFFile } from "../../../../../services/blocks/Pdf/pdf";
import { getBackendUrl } from "../../../../../services/config/config"; import { getBackendUrl } from "../../../../../services/config/config";
import { UploadIcon } from "@radix-ui/react-icons"; import { UploadIcon } from "@radix-ui/react-icons";
import { getActivityBlockMediaDirectory } from "@services/media/media"; import { getActivityBlockMediaDirectory } from "@services/media/media";
import { useOrg } from "@components/Contexts/OrgContext";
import { useCourse } from "@components/Contexts/CourseContext";
function PDFBlockComponent(props: any) { function PDFBlockComponent(props: any) {
const org = useOrg() as any;
const course = useCourse() as any;
const [pdf, setPDF] = React.useState(null); const [pdf, setPDF] = React.useState(null);
const [isLoading, setIsLoading] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false);
const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject); const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject);
const fileId = blockObject ? `${blockObject.block_data.file_id}.${blockObject.block_data.file_format}` : null; const fileId = blockObject ? `${blockObject.content.file_id}.${blockObject.content.file_format}` : null;
const handlePDFChange = (event: React.ChangeEvent<any>) => { const handlePDFChange = (event: React.ChangeEvent<any>) => {
setPDF(event.target.files[0]); setPDF(event.target.files[0]);
@ -20,7 +24,7 @@ function PDFBlockComponent(props: any) {
const handleSubmit = async (e: any) => { const handleSubmit = async (e: any) => {
e.preventDefault(); e.preventDefault();
setIsLoading(true); setIsLoading(true);
let object = await uploadNewPDFFile(pdf, props.extension.options.activity.activity_id); let object = await uploadNewPDFFile(pdf, props.extension.options.activity.activity_uuid);
setIsLoading(false); setIsLoading(false);
setblockObject(object); setblockObject(object);
props.updateAttributes({ props.updateAttributes({
@ -28,6 +32,10 @@ function PDFBlockComponent(props: any) {
}); });
}; };
useEffect(() => {
}
, [course, org]);
return ( return (
<NodeViewWrapper className="block-pdf"> <NodeViewWrapper className="block-pdf">
{!blockObject && ( {!blockObject && (
@ -49,10 +57,10 @@ function PDFBlockComponent(props: any) {
<BlockPDF> <BlockPDF>
<iframe <iframe
className="shadow rounded-lg h-96 w-full object-scale-down bg-black" className="shadow rounded-lg h-96 w-full object-scale-down bg-black"
src={`${getActivityBlockMediaDirectory(props.extension.options.activity.org_id, src={`${getActivityBlockMediaDirectory(org?.org_uuid,
props.extension.options.activity.course_uuid, course?.courseStructure.course_uuid,
props.extension.options.activity.activity_id, props.extension.options.activity.activity_uuid,
blockObject.block_id, blockObject.block_uuid,
blockObject ? fileId : ' ', 'pdfBlock')}`} blockObject ? fileId : ' ', 'pdfBlock')}`}
/> />
</BlockPDF> </BlockPDF>

22
apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
View file

@ -1,17 +1,21 @@
import { NodeViewWrapper } from "@tiptap/react"; import { NodeViewWrapper } from "@tiptap/react";
import { AlertTriangle, Image, Loader, Video } from "lucide-react"; import { AlertTriangle, Image, Loader, Video } from "lucide-react";
import React from "react"; import React, { useEffect } from "react";
import styled from "styled-components"; import styled from "styled-components";
import { getBackendUrl } from "../../../../../services/config/config"; import { getBackendUrl } from "../../../../../services/config/config";
import { uploadNewVideoFile } from "../../../../../services/blocks/Video/video"; import { uploadNewVideoFile } from "../../../../../services/blocks/Video/video";
import { getActivityBlockMediaDirectory } from "@services/media/media"; import { getActivityBlockMediaDirectory } from "@services/media/media";
import { UploadIcon } from "@radix-ui/react-icons"; import { UploadIcon } from "@radix-ui/react-icons";
import { useOrg } from "@components/Contexts/OrgContext";
import { useCourse } from "@components/Contexts/CourseContext";
function VideoBlockComponents(props: any) { function VideoBlockComponents(props: any) {
const org = useOrg() as any;
const course = useCourse() as any;
const [video, setVideo] = React.useState(null); const [video, setVideo] = React.useState(null);
const [isLoading, setIsLoading] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false);
const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject); const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject);
const fileId = blockObject ? `${blockObject.block_data.file_id}.${blockObject.block_data.file_format}` : null; const fileId = blockObject ? `${blockObject.content.file_id}.${blockObject.content.file_format}` : null;
const handleVideoChange = (event: React.ChangeEvent<any>) => { const handleVideoChange = (event: React.ChangeEvent<any>) => {
setVideo(event.target.files[0]); setVideo(event.target.files[0]);
@ -20,7 +24,7 @@ function VideoBlockComponents(props: any) {
const handleSubmit = async (e: any) => { const handleSubmit = async (e: any) => {
e.preventDefault(); e.preventDefault();
setIsLoading(true); setIsLoading(true);
let object = await uploadNewVideoFile(video, props.extension.options.activity.activity_id); let object = await uploadNewVideoFile(video, props.extension.options.activity.activity_uuid);
setIsLoading(false); setIsLoading(false);
setblockObject(object); setblockObject(object);
props.updateAttributes({ props.updateAttributes({
@ -28,6 +32,10 @@ function VideoBlockComponents(props: any) {
}); });
}; };
useEffect(() => {
}
, [course, org]);
return ( return (
<NodeViewWrapper className="block-video"> <NodeViewWrapper className="block-video">
{!blockObject && ( {!blockObject && (
@ -50,10 +58,10 @@ function VideoBlockComponents(props: any) {
<video <video
controls controls
className="rounded-lg shadow h-96 w-full object-scale-down bg-black" className="rounded-lg shadow h-96 w-full object-scale-down bg-black"
src={`${getActivityBlockMediaDirectory(props.extension.options.activity.org_id, src={`${getActivityBlockMediaDirectory(org?.org_uuid,
props.extension.options.activity.course_uuid, course?.courseStructure.course_uuid,
props.extension.options.activity.activity_id, props.extension.options.activity.activity_uuid,
blockObject.block_id, blockObject.block_uuid,
blockObject ? fileId : ' ', 'videoBlock')}`} blockObject ? fileId : ' ', 'videoBlock')}`}
></video> ></video>
</BlockVideo> </BlockVideo>

4
apps/web/services/blocks/Image/images.ts
View file

@ -1,11 +1,11 @@
import { getAPIUrl } from "@services/config/config"; import { getAPIUrl } from "@services/config/config";
import { RequestBody, RequestBodyForm } from "@services/utils/ts/requests"; import { RequestBody, RequestBodyForm } from "@services/utils/ts/requests";
export async function uploadNewImageFile(file: any, activity_id: string) { export async function uploadNewImageFile(file: any, activity_uuid: string) {
// Send file thumbnail as form data // Send file thumbnail as form data
const formData = new FormData(); const formData = new FormData();
formData.append("file_object", file); formData.append("file_object", file);
formData.append("activity_id", activity_id); formData.append("activity_uuid", activity_uuid);
return fetch(`${getAPIUrl()}blocks/image`, RequestBodyForm("POST", formData, null)) return fetch(`${getAPIUrl()}blocks/image`, RequestBodyForm("POST", formData, null))
.then((result) => result.json()) .then((result) => result.json())

4
apps/web/services/blocks/Pdf/pdf.ts
View file

@ -1,11 +1,11 @@
import { getAPIUrl } from "@services/config/config"; import { getAPIUrl } from "@services/config/config";
import { RequestBody, RequestBodyForm } from "@services/utils/ts/requests"; import { RequestBody, RequestBodyForm } from "@services/utils/ts/requests";
export async function uploadNewPDFFile(file: any, activity_id: string) { export async function uploadNewPDFFile(file: any, activity_uuid: string) {
// Send file thumbnail as form data // Send file thumbnail as form data
const formData = new FormData(); const formData = new FormData();
formData.append("file_object", file); formData.append("file_object", file);
formData.append("activity_id", activity_id); formData.append("activity_uuid", activity_uuid);
return fetch(`${getAPIUrl()}blocks/pdf`, RequestBodyForm("POST", formData, null)) return fetch(`${getAPIUrl()}blocks/pdf`, RequestBodyForm("POST", formData, null))
.then((result) => result.json()) .then((result) => result.json())

4
apps/web/services/blocks/Video/video.ts
View file

@ -1,11 +1,11 @@
import { getAPIUrl } from "@services/config/config"; import { getAPIUrl } from "@services/config/config";
import { RequestBody, RequestBodyForm } from "@services/utils/ts/requests"; import { RequestBody, RequestBodyForm } from "@services/utils/ts/requests";
export async function uploadNewVideoFile(file: any, activity_id: string) { export async function uploadNewVideoFile(file: any, activity_uuid: string) {
// Send file thumbnail as form data // Send file thumbnail as form data
const formData = new FormData(); const formData = new FormData();
formData.append("file_object", file); formData.append("file_object", file);
formData.append("activity_id", activity_id); formData.append("activity_uuid", activity_uuid);
return fetch(`${getAPIUrl()}blocks/video`, RequestBodyForm("POST", formData, null)) return fetch(`${getAPIUrl()}blocks/video`, RequestBodyForm("POST", formData, null))
.then((result) => result.json()) .then((result) => result.json())