mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: format with prettier
This commit is contained in:
swve
parent
03fb09c3d6
commit
a147ad6610
164 changed files with 11257 additions and 8154 deletions
|
|
@ -1,112 +1,144 @@
|
|||
import React, { useState } from "react";
|
||||
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 } 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, submitExternalVideo, chapterId, course }: any) {
|
||||
const [selectedView, setSelectedView] = useState("home");
|
||||
import React, { useState } from 'react'
|
||||
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 } 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,
|
||||
submitExternalVideo,
|
||||
chapterId,
|
||||
course,
|
||||
}: any) {
|
||||
const [selectedView, setSelectedView] = useState('home')
|
||||
|
||||
return (
|
||||
<div>
|
||||
{selectedView === "home" && (
|
||||
{selectedView === 'home' && (
|
||||
<ActivityChooserWrapper>
|
||||
<ActivityOption onClick={() => { setSelectedView("dynamic") }}>
|
||||
<ActivityOption
|
||||
onClick={() => {
|
||||
setSelectedView('dynamic')
|
||||
}}
|
||||
>
|
||||
<ActivityTypeImage>
|
||||
<Image alt="Dynamic Page" src={DynamicPageActivityImage}></Image>
|
||||
</ActivityTypeImage>
|
||||
<ActivityTypeTitle>Dynamic Page</ActivityTypeTitle>
|
||||
</ActivityOption>
|
||||
<ActivityOption onClick={() => { setSelectedView("video") }}>
|
||||
<ActivityOption
|
||||
onClick={() => {
|
||||
setSelectedView('video')
|
||||
}}
|
||||
>
|
||||
<ActivityTypeImage>
|
||||
<Image alt="Video Page" src={VideoPageActivityImage}></Image>
|
||||
</ActivityTypeImage>
|
||||
<ActivityTypeTitle>Video Page</ActivityTypeTitle>
|
||||
</ActivityOption>
|
||||
<ActivityOption onClick={() => { setSelectedView("documentpdf") }}>
|
||||
<ActivityOption
|
||||
onClick={() => {
|
||||
setSelectedView('documentpdf')
|
||||
}}
|
||||
>
|
||||
<ActivityTypeImage>
|
||||
<Image alt="Document PDF Page" src={DocumentPdfPageActivityImage}></Image>
|
||||
<Image
|
||||
alt="Document PDF Page"
|
||||
src={DocumentPdfPageActivityImage}
|
||||
></Image>
|
||||
</ActivityTypeImage>
|
||||
<ActivityTypeTitle>PDF Document Page</ActivityTypeTitle>
|
||||
</ActivityOption>
|
||||
</ActivityChooserWrapper>
|
||||
)}
|
||||
|
||||
{selectedView === "dynamic" && (
|
||||
<DynamicCanvaModal submitActivity={submitActivity} chapterId={chapterId} course={course} />
|
||||
{selectedView === 'dynamic' && (
|
||||
<DynamicCanvaModal
|
||||
submitActivity={submitActivity}
|
||||
chapterId={chapterId}
|
||||
course={course}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selectedView === "video" && (
|
||||
<VideoModal submitFileActivity={submitFileActivity} submitExternalVideo={submitExternalVideo}
|
||||
chapterId={chapterId} course={course} />
|
||||
{selectedView === 'video' && (
|
||||
<VideoModal
|
||||
submitFileActivity={submitFileActivity}
|
||||
submitExternalVideo={submitExternalVideo}
|
||||
chapterId={chapterId}
|
||||
course={course}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selectedView === "documentpdf" && (
|
||||
<DocumentPdfModal submitFileActivity={submitFileActivity} chapterId={chapterId} course={course} />
|
||||
{selectedView === 'documentpdf' && (
|
||||
<DocumentPdfModal
|
||||
submitFileActivity={submitFileActivity}
|
||||
chapterId={chapterId}
|
||||
course={course}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
const ActivityChooserWrapper = styled("div", {
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "start",
|
||||
const ActivityChooserWrapper = styled('div', {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'start',
|
||||
marginTop: 10,
|
||||
});
|
||||
})
|
||||
|
||||
const ActivityOption = styled("div", {
|
||||
width: "180px",
|
||||
textAlign: "center",
|
||||
const ActivityOption = styled('div', {
|
||||
width: '180px',
|
||||
textAlign: 'center',
|
||||
borderRadius: 10,
|
||||
background: "#F6F6F6",
|
||||
border: "4px solid #F5F5F5",
|
||||
margin: "auto",
|
||||
background: '#F6F6F6',
|
||||
border: '4px solid #F5F5F5',
|
||||
margin: 'auto',
|
||||
|
||||
// hover
|
||||
"&:hover": {
|
||||
cursor: "pointer",
|
||||
background: "#ededed",
|
||||
border: "4px solid #ededed",
|
||||
// hover
|
||||
'&:hover': {
|
||||
cursor: 'pointer',
|
||||
background: '#ededed',
|
||||
border: '4px solid #ededed',
|
||||
|
||||
transition: "background 0.2s ease-in-out, border 0.2s ease-in-out",
|
||||
transition: 'background 0.2s ease-in-out, border 0.2s ease-in-out',
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const ActivityTypeImage = styled("div", {
|
||||
const ActivityTypeImage = styled('div', {
|
||||
height: 80,
|
||||
borderRadius: 8,
|
||||
margin: 2,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "end",
|
||||
textAlign: "center",
|
||||
background: "#ffffff",
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'end',
|
||||
textAlign: 'center',
|
||||
background: '#ffffff',
|
||||
|
||||
// hover
|
||||
"&:hover": {
|
||||
cursor: "pointer",
|
||||
// hover
|
||||
'&:hover': {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const ActivityTypeTitle = styled("div", {
|
||||
display: "flex",
|
||||
const ActivityTypeTitle = styled('div', {
|
||||
display: 'flex',
|
||||
fontSize: 12,
|
||||
height: "20px",
|
||||
height: '20px',
|
||||
fontWeight: 500,
|
||||
color: "rgba(0, 0, 0, 0.38);",
|
||||
color: 'rgba(0, 0, 0, 0.38);',
|
||||
|
||||
// center text vertically
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
textAlign: "center",
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
textAlign: 'center',
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
export default NewActivityModal;
|
||||
export default NewActivityModal
|
||||
|
|
|
|||
|
|
@ -1,40 +1,56 @@
|
|||
import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input } from "@components/StyledElements/Form/Form";
|
||||
import React, { useState } from "react";
|
||||
import * as Form from '@radix-ui/react-form';
|
||||
import BarLoader from "react-spinners/BarLoader";
|
||||
import FormLayout, {
|
||||
ButtonBlack,
|
||||
Flex,
|
||||
FormField,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
Input,
|
||||
} from '@components/StyledElements/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, course }: any) {
|
||||
const [documentpdf, setDocumentPdf] = React.useState(null) as any;
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [name, setName] = React.useState("");
|
||||
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]);
|
||||
};
|
||||
setDocumentPdf(event.target.files[0])
|
||||
}
|
||||
|
||||
const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setName(event.target.value);
|
||||
};
|
||||
setName(event.target.value)
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: any) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
let status = await submitFileActivity(documentpdf, "documentpdf", { name: name,
|
||||
chapter_id: chapterId,
|
||||
activity_type: "TYPE_DOCUMENT",
|
||||
activity_sub_type:"SUBTYPE_DOCUMENT_PDF",
|
||||
published_version:1,
|
||||
version:1,
|
||||
course_id: course.id, }, chapterId);
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
let status = await submitFileActivity(
|
||||
documentpdf,
|
||||
'documentpdf',
|
||||
{
|
||||
name: name,
|
||||
chapter_id: chapterId,
|
||||
activity_type: 'TYPE_DOCUMENT',
|
||||
activity_sub_type: 'SUBTYPE_DOCUMENT_PDF',
|
||||
published_version: 1,
|
||||
version: 1,
|
||||
course_id: course.id,
|
||||
},
|
||||
chapterId
|
||||
)
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<FormLayout onSubmit={handleSubmit}>
|
||||
<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>
|
||||
<FormMessage match="valueMissing">
|
||||
Please provide a name for your PDF Document activity
|
||||
</FormMessage>
|
||||
</Flex>
|
||||
<Form.Control asChild>
|
||||
<Input onChange={handleNameChange} type="text" required />
|
||||
|
|
@ -43,7 +59,9 @@ function DocumentPdfModal({ submitFileActivity, chapterId, course }: any) {
|
|||
<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>
|
||||
<FormMessage match="valueMissing">
|
||||
Please provide a PDF Document for your activity
|
||||
</FormMessage>
|
||||
</Flex>
|
||||
<Form.Control asChild>
|
||||
<input type="file" onChange={handleDocumentPdfChange} required />
|
||||
|
|
@ -52,13 +70,21 @@ function DocumentPdfModal({ submitFileActivity, chapterId, course }: any) {
|
|||
|
||||
<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 type="submit" css={{ marginTop: 10 }}>
|
||||
{isSubmitting ? (
|
||||
<BarLoader
|
||||
cssOverride={{ borderRadius: 60 }}
|
||||
width={60}
|
||||
color="#ffffff"
|
||||
/>
|
||||
) : (
|
||||
'Create activity'
|
||||
)}
|
||||
</ButtonBlack>
|
||||
</Form.Submit>
|
||||
</Flex>
|
||||
</FormLayout>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default DocumentPdfModal;
|
||||
export default DocumentPdfModal
|
||||
|
|
|
|||
|
|
@ -1,41 +1,51 @@
|
|||
import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/StyledElements/Form/Form";
|
||||
import React, { useState } from "react";
|
||||
import * as Form from '@radix-ui/react-form';
|
||||
import BarLoader from "react-spinners/BarLoader";
|
||||
import FormLayout, {
|
||||
ButtonBlack,
|
||||
Flex,
|
||||
FormField,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
Input,
|
||||
Textarea,
|
||||
} from '@components/StyledElements/Form/Form'
|
||||
import React, { useState } from 'react'
|
||||
import * as Form from '@radix-ui/react-form'
|
||||
import BarLoader from 'react-spinners/BarLoader'
|
||||
|
||||
function DynamicCanvaModal({ submitActivity, chapterId, course }: any) {
|
||||
const [activityName, setActivityName] = useState("");
|
||||
const [activityDescription, setActivityDescription] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [activityName, setActivityName] = useState('')
|
||||
const [activityDescription, setActivityDescription] = useState('')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const handleActivityNameChange = (e: any) => {
|
||||
setActivityName(e.target.value);
|
||||
};
|
||||
setActivityName(e.target.value)
|
||||
}
|
||||
|
||||
const handleActivityDescriptionChange = (e: any) => {
|
||||
setActivityDescription(e.target.value);
|
||||
};
|
||||
setActivityDescription(e.target.value)
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: any) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
await submitActivity({
|
||||
name: activityName,
|
||||
chapter_id: chapterId,
|
||||
activity_type: "TYPE_DYNAMIC",
|
||||
activity_sub_type:"SUBTYPE_DYNAMIC_PAGE",
|
||||
published_version:1,
|
||||
version:1,
|
||||
activity_type: 'TYPE_DYNAMIC',
|
||||
activity_sub_type: 'SUBTYPE_DYNAMIC_PAGE',
|
||||
published_version: 1,
|
||||
version: 1,
|
||||
course_id: course.id,
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
})
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
return (
|
||||
<FormLayout onSubmit={handleSubmit}>
|
||||
<FormField name="dynamic-activity-name">
|
||||
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
|
||||
<FormLabel>Activity name</FormLabel>
|
||||
<FormMessage match="valueMissing">Please provide a name for your activity</FormMessage>
|
||||
<FormMessage match="valueMissing">
|
||||
Please provide a name for your activity
|
||||
</FormMessage>
|
||||
</Flex>
|
||||
<Form.Control asChild>
|
||||
<Input onChange={handleActivityNameChange} type="text" required />
|
||||
|
|
@ -44,7 +54,9 @@ function DynamicCanvaModal({ submitActivity, chapterId, course }: any) {
|
|||
<FormField name="dynamic-activity-desc">
|
||||
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
|
||||
<FormLabel>Activity description</FormLabel>
|
||||
<FormMessage match="valueMissing">Please provide a description for your activity</FormMessage>
|
||||
<FormMessage match="valueMissing">
|
||||
Please provide a description for your activity
|
||||
</FormMessage>
|
||||
</Flex>
|
||||
<Form.Control asChild>
|
||||
<Textarea onChange={handleActivityDescriptionChange} required />
|
||||
|
|
@ -53,14 +65,21 @@ function DynamicCanvaModal({ submitActivity, chapterId, course }: any) {
|
|||
|
||||
<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 type="submit" css={{ marginTop: 10 }}>
|
||||
{isSubmitting ? (
|
||||
<BarLoader
|
||||
cssOverride={{ borderRadius: 60 }}
|
||||
width={60}
|
||||
color="#ffffff"
|
||||
/>
|
||||
) : (
|
||||
'Create activity'
|
||||
)}
|
||||
</ButtonBlack>
|
||||
</Form.Submit>
|
||||
</Flex>
|
||||
</FormLayout>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default DynamicCanvaModal;
|
||||
export default DynamicCanvaModal
|
||||
|
|
|
|||
|
|
@ -1,67 +1,87 @@
|
|||
import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input } from "@components/StyledElements/Form/Form";
|
||||
import React, { useState } from "react";
|
||||
import * as Form from '@radix-ui/react-form';
|
||||
import BarLoader from "react-spinners/BarLoader";
|
||||
import { Youtube } from "lucide-react";
|
||||
import FormLayout, {
|
||||
ButtonBlack,
|
||||
Flex,
|
||||
FormField,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
Input,
|
||||
} from '@components/StyledElements/Form/Form'
|
||||
import React, { useState } from 'react'
|
||||
import * as Form from '@radix-ui/react-form'
|
||||
import BarLoader from 'react-spinners/BarLoader'
|
||||
import { Youtube } from 'lucide-react'
|
||||
|
||||
interface ExternalVideoObject {
|
||||
name: string,
|
||||
type: string,
|
||||
name: string
|
||||
type: string
|
||||
uri: string
|
||||
chapter_id: string
|
||||
}
|
||||
|
||||
|
||||
function VideoModal({ submitFileActivity, submitExternalVideo, chapterId, course }: any) {
|
||||
const [video, setVideo] = React.useState(null) as any;
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [name, setName] = React.useState("");
|
||||
const [youtubeUrl, setYoutubeUrl] = React.useState("");
|
||||
const [selectedView, setSelectedView] = React.useState("file") as any;
|
||||
function VideoModal({
|
||||
submitFileActivity,
|
||||
submitExternalVideo,
|
||||
chapterId,
|
||||
course,
|
||||
}: any) {
|
||||
const [video, setVideo] = React.useState(null) as any
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [name, setName] = React.useState('')
|
||||
const [youtubeUrl, setYoutubeUrl] = React.useState('')
|
||||
const [selectedView, setSelectedView] = React.useState('file') as any
|
||||
|
||||
const handleVideoChange = (event: React.ChangeEvent<any>) => {
|
||||
setVideo(event.target.files[0]);
|
||||
};
|
||||
setVideo(event.target.files[0])
|
||||
}
|
||||
|
||||
const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setName(event.target.value);
|
||||
};
|
||||
setName(event.target.value)
|
||||
}
|
||||
|
||||
const handleYoutubeUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setYoutubeUrl(event.target.value);
|
||||
};
|
||||
const handleYoutubeUrlChange = (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
setYoutubeUrl(event.target.value)
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: any) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
|
||||
if (selectedView === "file") {
|
||||
let status = await submitFileActivity(video, "video", {
|
||||
name: name,
|
||||
chapter_id: chapterId,
|
||||
activity_type: "TYPE_VIDEO",
|
||||
activity_sub_type: "SUBTYPE_VIDEO_HOSTED",
|
||||
published_version: 1,
|
||||
version: 1,
|
||||
course_id: course.id,
|
||||
}, chapterId);
|
||||
if (selectedView === 'file') {
|
||||
let status = await submitFileActivity(
|
||||
video,
|
||||
'video',
|
||||
{
|
||||
name: name,
|
||||
chapter_id: chapterId,
|
||||
activity_type: 'TYPE_VIDEO',
|
||||
activity_sub_type: 'SUBTYPE_VIDEO_HOSTED',
|
||||
published_version: 1,
|
||||
version: 1,
|
||||
course_id: course.id,
|
||||
},
|
||||
chapterId
|
||||
)
|
||||
|
||||
setIsSubmitting(false);
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
if (selectedView === "youtube") {
|
||||
if (selectedView === 'youtube') {
|
||||
let external_video_object: ExternalVideoObject = {
|
||||
name,
|
||||
type: "youtube",
|
||||
type: 'youtube',
|
||||
uri: youtubeUrl,
|
||||
chapter_id: chapterId
|
||||
chapter_id: chapterId,
|
||||
}
|
||||
|
||||
|
||||
let status = await submitExternalVideo(external_video_object, 'activity', chapterId);
|
||||
setIsSubmitting(false);
|
||||
let status = await submitExternalVideo(
|
||||
external_video_object,
|
||||
'activity',
|
||||
chapterId
|
||||
)
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
/* TODO : implement some sort of progress bar for file uploads, it is not possible yet because i'm not using axios.
|
||||
and the actual upload isn't happening here anyway, it's in the submitFileActivity function */
|
||||
|
|
@ -71,7 +91,9 @@ function VideoModal({ submitFileActivity, submitExternalVideo, chapterId, course
|
|||
<FormField name="video-activity-name">
|
||||
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
|
||||
<FormLabel>Video name</FormLabel>
|
||||
<FormMessage match="valueMissing">Please provide a name for your video activity</FormMessage>
|
||||
<FormMessage match="valueMissing">
|
||||
Please provide a name for your video activity
|
||||
</FormMessage>
|
||||
</Flex>
|
||||
<Form.Control asChild>
|
||||
<Input onChange={handleNameChange} type="text" required />
|
||||
|
|
@ -80,29 +102,67 @@ function VideoModal({ submitFileActivity, submitExternalVideo, chapterId, course
|
|||
<div className="flex flex-col rounded-md bg-gray-50 outline-dashed outline-gray-200">
|
||||
<div className="">
|
||||
<div className="flex m-4 justify-center space-x-2 mb-0">
|
||||
<div onClick={() => { setSelectedView("file") }} className="rounded-full bg-slate-900 text-zinc-50 py-2 px-4 text-sm drop-shadow-md hover:cursor-pointer hover:bg-slate-700 ">Video upload</div>
|
||||
<div onClick={() => { setSelectedView("youtube") }} className="rounded-full bg-slate-900 text-zinc-50 py-2 px-4 text-sm drop-shadow-md hover:cursor-pointer hover:bg-slate-700">YouTube Video</div>
|
||||
<div
|
||||
onClick={() => {
|
||||
setSelectedView('file')
|
||||
}}
|
||||
className="rounded-full bg-slate-900 text-zinc-50 py-2 px-4 text-sm drop-shadow-md hover:cursor-pointer hover:bg-slate-700 "
|
||||
>
|
||||
Video upload
|
||||
</div>
|
||||
<div
|
||||
onClick={() => {
|
||||
setSelectedView('youtube')
|
||||
}}
|
||||
className="rounded-full bg-slate-900 text-zinc-50 py-2 px-4 text-sm drop-shadow-md hover:cursor-pointer hover:bg-slate-700"
|
||||
>
|
||||
YouTube Video
|
||||
</div>
|
||||
</div>
|
||||
{selectedView === "file" && (<div className="p-4 justify-center m-auto align-middle">
|
||||
<FormField name="video-activity-file">
|
||||
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
|
||||
<FormLabel>Video file</FormLabel>
|
||||
<FormMessage match="valueMissing">Please provide a video for your activity</FormMessage>
|
||||
</Flex>
|
||||
<Form.Control asChild>
|
||||
<input type="file" onChange={handleVideoChange} required />
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
</div>)}
|
||||
{selectedView === "youtube" && (
|
||||
{selectedView === 'file' && (
|
||||
<div className="p-4 justify-center m-auto align-middle">
|
||||
<FormField name="video-activity-file">
|
||||
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
|
||||
<FormLabel className="flex justify-center align-middle"><Youtube className="m-auto pr-1" /><span className="flex">YouTube URL</span></FormLabel>
|
||||
<FormMessage match="valueMissing">Please provide a video for your activity</FormMessage>
|
||||
<Flex
|
||||
css={{
|
||||
alignItems: 'baseline',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<FormLabel>Video file</FormLabel>
|
||||
<FormMessage match="valueMissing">
|
||||
Please provide a video for your activity
|
||||
</FormMessage>
|
||||
</Flex>
|
||||
<Form.Control asChild>
|
||||
<Input className="bg-white" onChange={handleYoutubeUrlChange} type="text" required />
|
||||
<input type="file" onChange={handleVideoChange} required />
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
</div>
|
||||
)}
|
||||
{selectedView === 'youtube' && (
|
||||
<div className="p-4 justify-center m-auto align-middle">
|
||||
<FormField name="video-activity-file">
|
||||
<Flex
|
||||
css={{
|
||||
alignItems: 'baseline',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<FormLabel className="flex justify-center align-middle">
|
||||
<Youtube className="m-auto pr-1" />
|
||||
<span className="flex">YouTube URL</span>
|
||||
</FormLabel>
|
||||
<FormMessage match="valueMissing">
|
||||
Please provide a video for your activity
|
||||
</FormMessage>
|
||||
</Flex>
|
||||
<Form.Control asChild>
|
||||
<Input
|
||||
className="bg-white"
|
||||
onChange={handleYoutubeUrlChange}
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
</div>
|
||||
|
|
@ -112,13 +172,25 @@ function VideoModal({ submitFileActivity, submitExternalVideo, chapterId, course
|
|||
|
||||
<Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
|
||||
<Form.Submit asChild>
|
||||
<ButtonBlack className="bg-black" type="submit" css={{ marginTop: 10 }}>
|
||||
{isSubmitting ? <BarLoader cssOverride={{ borderRadius: 60, }} width={60} color="#ffffff" /> : "Create activity"}
|
||||
<ButtonBlack
|
||||
className="bg-black"
|
||||
type="submit"
|
||||
css={{ marginTop: 10 }}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<BarLoader
|
||||
cssOverride={{ borderRadius: 60 }}
|
||||
width={60}
|
||||
color="#ffffff"
|
||||
/>
|
||||
) : (
|
||||
'Create activity'
|
||||
)}
|
||||
</ButtonBlack>
|
||||
</Form.Submit>
|
||||
</Flex>
|
||||
</FormLayout>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default VideoModal;
|
||||
export default VideoModal
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue