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

feat: add document pdf activity type

Browse source
This commit is contained in:
swve 2023-04-26 21:43:43 +02:00
parent be57196fb7
commit 9dbd47c36f
9 changed files with 263 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

14
front/components/Modals/Activities/Create/NewActivity.tsx
View file

@ -2,15 +2,17 @@ import React, { useState } from "react";
import { ArrowLeftIcon, Cross1Icon } from "@radix-ui/react-icons";
import DynamicPageActivityImage from "public/activities_types/dynamic-page-activity.png";
import VideoPageActivityImage from "public//activities_types/video-page-activity.png";
import DocumentPdfPageActivityImage from "public//activities_types/documentpdf-page-activity.png";
import { styled, keyframes } from '@stitches/react';
import DynamicCanvaModal from "./NewActivityModal/DynamicCanva";
import VideoModal from "./NewActivityModal/Video";
import Image from "next/image";
import DocumentPdfModal from "./NewActivityModal/DocumentPdf";
function NewActivityModal({ closeModal, submitActivity, submitFileActivity, chapterId }: any) {
const [selectedView, setSelectedView] = useState("home");
return (
<div>
{selectedView === "home" && (
@ -27,11 +29,11 @@ function NewActivityModal({ closeModal, submitActivity, submitFileActivity, chap
</ActivityTypeImage>
<ActivityTypeTitle>Video Page</ActivityTypeTitle>
</ActivityOption>
<ActivityOption onClick={() => { setSelectedView("video") }}>
<ActivityOption onClick={() => { setSelectedView("documentpdf") }}>
<ActivityTypeImage>
<Image alt="Video Page" src={VideoPageActivityImage}></Image>
<Image alt="Document PDF Page" src={DocumentPdfPageActivityImage}></Image>
</ActivityTypeImage>
<ActivityTypeTitle>Video Page</ActivityTypeTitle>
<ActivityTypeTitle>PDF Document Page</ActivityTypeTitle>
</ActivityOption>
</ActivityChooserWrapper>
)}
@ -43,6 +45,10 @@ function NewActivityModal({ closeModal, submitActivity, submitFileActivity, chap
{selectedView === "video" && (
<VideoModal submitFileActivity={submitFileActivity} chapterId={chapterId} />
)}
{selectedView === "documentpdf" && (
<DocumentPdfModal submitFileActivity={submitFileActivity} chapterId={chapterId} />
)}
</div>
);
}

58
front/components/Modals/Activities/Create/NewActivityModal/DocumentPdf.tsx Normal file
View file

@ -0,0 +1,58 @@
import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/UI/Form/Form";
import React, { useState } from "react";
import * as Form from '@radix-ui/react-form';
import BarLoader from "react-spinners/BarLoader";
function DocumentPdfModal({ submitFileActivity, chapterId }: any) {
const [documentpdf, setDocumentPdf] = React.useState(null) as any;
const [isSubmitting, setIsSubmitting] = useState(false);
const [name, setName] = React.useState("");
const handleDocumentPdfChange = (event: React.ChangeEvent<any>) => {
setDocumentPdf(event.target.files[0]);
};
const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setName(event.target.value);
};
const handleSubmit = async (e: any) => {
e.preventDefault();
setIsSubmitting(true);
let status = await submitFileActivity(documentpdf, "documentpdf", { name, type: "documentpdf" }, chapterId);
setIsSubmitting(false);
};
return (
<FormLayout onSubmit={handleSubmit}>
<FormField name="documentpdf-activity-name">
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
<FormLabel>PDF Document name</FormLabel>
<FormMessage match="valueMissing">Please provide a name for your PDF Document activity</FormMessage>
</Flex>
<Form.Control asChild>
<Input onChange={handleNameChange} type="text" required />
</Form.Control>
</FormField>
<FormField name="documentpdf-activity-file">
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
<FormLabel>PDF Document file</FormLabel>
<FormMessage match="valueMissing">Please provide a PDF Document for your activity</FormMessage>
</Flex>
<Form.Control asChild>
<input type="file" onChange={handleDocumentPdfChange} required />
</Form.Control>
</FormField>
<Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
<Form.Submit asChild>
<ButtonBlack type="submit" css={{ marginTop: 10 }}>
{isSubmitting ? <BarLoader cssOverride={{borderRadius:60,}} width={60} color="#ffffff" /> : "Create activity"}
</ButtonBlack>
</Form.Submit>
</Flex>
</FormLayout>
);
}
export default DocumentPdfModal;

75
front/components/Pages/Activities/DocumentPdf/DocumentPdf.tsx Normal file
View file

@ -0,0 +1,75 @@
import { getBackendUrl } from "@services/config/config";
import React from "react";
import styled from "styled-components";
function DocumentPdfActivity({ activity, course }: { activity: any; course: any }) {
function getChapterName() {
let chapterName = "";
let chapterId = activity.chapter_id;
course.chapters.forEach((chapter: any) => {
if (chapter.chapter_id === chapterId) {
chapterName = chapter.name;
}
});
return chapterName;
}
return (
<DocumentPdfActivityLayout>
<DocumentPdfTitle>
<p>Chapter : {getChapterName()}</p>
{activity.name}
</DocumentPdfTitle>
<DocumentPdfPlayerWrapper>
<iframe
src={`${getBackendUrl()}content/uploads/documents/documentpdf/${activity.content.documentpdf.activity_id}/${activity.content.documentpdf.filename}`}
/>
</DocumentPdfPlayerWrapper>
</DocumentPdfActivityLayout>
);
}
export default DocumentPdfActivity;
const DocumentPdfActivityLayout = styled.div`
display: flex;
flex-direction: column;
margin-top: 10px;
background: #141414;
min-width: 100%;
min-height: 1200px;
`;
const DocumentPdfTitle = styled.div`
display: flex;
width: 1300px;
margin: 0 auto;
padding-top: 20px;
font-size: 24px;
font-weight: 700;
color: #fff;
flex-direction: column;
p {
font-size: 14px;
padding: 0;
margin: 0;
color: #ffffffaa;
}
`;
const DocumentPdfPlayerWrapper = styled.div`
display: flex;
width: 1300px;
margin: 0 auto;
justify-content: center;
padding-top: 20px;
iframe {
width: 1300px;
height: 500px;
border-radius: 7px;
background-color: black;
border: none;
}
`;