feat: various improvements

wip: frontend

feat: enable cascade on foreign keys

wip1

wip2

fix chapters issues

wip4
This commit is contained in:
swve 2023-11-29 22:29:48 +01:00
parent 2bf80030d7
commit 187f75e583
71 changed files with 879 additions and 568 deletions

View file

@ -9,7 +9,7 @@ import VideoModal from "./NewActivityModal/Video";
import Image from "next/image";
import DocumentPdfModal from "./NewActivityModal/DocumentPdf";
function NewActivityModal({ closeModal, submitActivity, submitFileActivity, submitExternalVideo, chapterId }: any) {
function NewActivityModal({ closeModal, submitActivity, submitFileActivity, submitExternalVideo, chapterId, course }: any) {
const [selectedView, setSelectedView] = useState("home");
@ -39,16 +39,16 @@ function NewActivityModal({ closeModal, submitActivity, submitFileActivity, subm
)}
{selectedView === "dynamic" && (
<DynamicCanvaModal submitActivity={submitActivity} chapterId={chapterId} />
<DynamicCanvaModal submitActivity={submitActivity} chapterId={chapterId} course={course} />
)}
{selectedView === "video" && (
<VideoModal submitFileActivity={submitFileActivity} submitExternalVideo={submitExternalVideo}
chapterId={chapterId} />
chapterId={chapterId} course={course} />
)}
{selectedView === "documentpdf" && (
<DocumentPdfModal submitFileActivity={submitFileActivity} chapterId={chapterId} />
<DocumentPdfModal submitFileActivity={submitFileActivity} chapterId={chapterId} course={course} />
)}
</div>
);

View file

@ -3,7 +3,7 @@ import React, { useState } from "react";
import * as Form from '@radix-ui/react-form';
import BarLoader from "react-spinners/BarLoader";
function DocumentPdfModal({ submitFileActivity, chapterId }: any) {
function DocumentPdfModal({ submitFileActivity, chapterId, course }: any) {
const [documentpdf, setDocumentPdf] = React.useState(null) as any;
const [isSubmitting, setIsSubmitting] = useState(false);
const [name, setName] = React.useState("");
@ -19,7 +19,13 @@ function DocumentPdfModal({ submitFileActivity, chapterId }: any) {
const handleSubmit = async (e: any) => {
e.preventDefault();
setIsSubmitting(true);
let status = await submitFileActivity(documentpdf, "documentpdf", { name, type: "documentpdf" }, chapterId);
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);
};

View file

@ -3,7 +3,7 @@ import React, { useState } from "react";
import * as Form from '@radix-ui/react-form';
import BarLoader from "react-spinners/BarLoader";
function DynamicCanvaModal({ submitActivity, chapterId }: any) {
function DynamicCanvaModal({ submitActivity, chapterId, course }: any) {
const [activityName, setActivityName] = useState("");
const [activityDescription, setActivityDescription] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
@ -21,9 +21,12 @@ function DynamicCanvaModal({ submitActivity, chapterId }: any) {
setIsSubmitting(true);
await submitActivity({
name: activityName,
chapterId: chapterId,
type: "dynamic",
org_id : "test",
chapter_id: chapterId,
activity_type: "TYPE_DYNAMIC",
activity_sub_type:"SUBTYPE_DYNAMIC_PAGE",
published_version:1,
version:1,
course_id: course.id,
});
setIsSubmitting(false);
};

View file

@ -8,10 +8,11 @@ interface ExternalVideoObject {
name: string,
type: string,
uri: string
chapter_id: string
}
function VideoModal({ submitFileActivity, submitExternalVideo, chapterId }: 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("");
@ -33,18 +34,30 @@ function VideoModal({ submitFileActivity, submitExternalVideo, chapterId }: any)
const handleSubmit = async (e: any) => {
e.preventDefault();
setIsSubmitting(true);
if (selectedView === "file") {
let status = await submitFileActivity(video, "video", { name, type: "video" }, chapterId);
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);
}
if (selectedView === "youtube") {
let external_video_object: ExternalVideoObject = {
name,
type: "youtube",
uri: youtubeUrl
uri: youtubeUrl,
chapter_id: chapterId
}
let status = await submitExternalVideo(external_video_object, 'activity' ,chapterId);
let status = await submitExternalVideo(external_video_object, 'activity', chapterId);
setIsSubmitting(false);
}

View file

@ -4,7 +4,7 @@ import * as Form from '@radix-ui/react-form';
import React, { useState } from "react";
import BarLoader from "react-spinners/BarLoader";
function NewChapterModal({ submitChapter, closeModal }: any) {
function NewChapterModal({ submitChapter, closeModal, course }: any) {
const [chapterName, setChapterName] = useState("");
const [chapterDescription, setChapterDescription] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
@ -19,9 +19,17 @@ function NewChapterModal({ submitChapter, closeModal }: any) {
const handleSubmit = async (e: any) => {
e.preventDefault();
setIsSubmitting(true);
await submitChapter({ name: chapterName, description: chapterDescription, activities: [] });
const chapter_object = {
name: chapterName,
description: chapterDescription,
thumbnail_image: "",
course_id: course.id,
org_id: course.org_id
};
await submitChapter(chapter_object);
setIsSubmitting(false);
};
@ -49,9 +57,9 @@ function NewChapterModal({ submitChapter, closeModal }: 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 Chapter"}
</ButtonBlack>
{isSubmitting ? <BarLoader cssOverride={{ borderRadius: 60, }} width={60} color="#ffffff" />
: "Create Chapter"}
</ButtonBlack>
</Form.Submit>
</Flex>
</FormLayout>

View file

@ -1,3 +1,4 @@
'use client';
import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, Input, Textarea } from '@components/StyledElements/Form/Form'
import * as Form from '@radix-ui/react-form'
import { FormMessage } from "@radix-ui/react-form";
@ -12,16 +13,21 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
const [isSubmitting, setIsSubmitting] = useState(false);
const [name, setName] = React.useState("");
const [description, setDescription] = React.useState("");
const [learnings, setLearnings] = React.useState("");
const [visibility, setVisibility] = React.useState("");
const [tags, setTags] = React.useState("");
const [isLoading, setIsLoading] = React.useState(false);
const [thumbnail, setThumbnail] = React.useState(null) as any;
const router = useRouter();
const [orgId, setOrgId] = React.useState(null) as any;
const [org, setOrg] = React.useState(null) as any;
const getOrgMetadata = async () => {
const org = await getOrganizationContextInfoWithoutCredentials(orgslug, { revalidate: 360, tags: ['organizations'] });
setOrgId(org.org_id);
setOrgId(org.id);
}
@ -33,6 +39,20 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
setDescription(event.target.value);
};
const handleLearningsChange = (event: React.ChangeEvent<any>) => {
setLearnings(event.target.value);
}
const handleVisibilityChange = (event: React.ChangeEvent<any>) => {
setVisibility(event.target.value);
console.log(event.target.value);
}
const handleTagsChange = (event: React.ChangeEvent<any>) => {
setTags(event.target.value);
}
const handleThumbnailChange = (event: React.ChangeEvent<any>) => {
setThumbnail(event.target.files[0]);
};
@ -40,7 +60,9 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
const handleSubmit = async (e: any) => {
e.preventDefault();
setIsSubmitting(true);
let status = await createNewCourse(orgId, { name, description }, thumbnail);
let status = await createNewCourse(orgId, { name, description, tags, visibility }, thumbnail);
await revalidateTags(['courses'], orgslug);
setIsSubmitting(false);
@ -92,13 +114,25 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
<Input onChange={handleThumbnailChange} type="file" required />
</Form.Control>
</FormField>
<FormField name="course-learnings">
<FormField name="course-tags">
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
<FormLabel>Course keywords</FormLabel>
<FormLabel>Course tags (separated by comma)</FormLabel>
<FormMessage match="valueMissing">Please provide learning elements, separated by comma (,)</FormMessage>
</Flex>
<Form.Control asChild>
<Textarea required />
<Textarea onChange={handleTagsChange} required />
</Form.Control>
</FormField>
<FormField name="course-visibility">
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
<FormLabel>Course Visibility</FormLabel>
<FormMessage match="valueMissing">Please choose cours visibility</FormMessage>
</Flex>
<Form.Control asChild>
<select onChange={handleVisibilityChange} className='border border-gray-300 rounded-md p-2' required>
<option value="true">Public (Available to see on the internet) </option>
<option value="false">Private (Private to users) </option>
</select>
</Form.Control>
</FormField>