feat: make some courses inputs optional

apps/api/src/routers/courses/courses.py

@@ -31,8 +31,8 @@ async def api_create_course(
     name: str = Form(),
     description: str = Form(),
     public: bool = Form(),
-    learnings: str = Form(),
-    tags: str = Form(),
+    learnings: str = Form(None),
+    tags: str = Form(None),
     about: str = Form(),
     current_user: PublicUser = Depends(get_current_user),
     db_session: Session = Depends(get_db_session),

apps/api/src/services/courses/courses.py

@@ -146,6 +146,9 @@ async def create_course(
         )
         course.thumbnail_image = name_in_disk
 
+    else:
+        course.thumbnail_image = ""
+
     # Insert course
     db_session.add(course)
     db_session.commit()

apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx

@@ -73,9 +73,13 @@ const CourseClient = (props: any) => {
             </h1>
           </div>
 
-
-          <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[300px] bg-cover bg-center mb-4" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(org?.org_uuid, course.course_uuid, course.thumbnail_image)})` }}>
-          </div>
+          {props.course.thumbnail_image ?
+            <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[300px] 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-[300px] 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} />
 
@@ -185,15 +189,24 @@ const CourseClient = (props: any) => {
               </div>
 
             </div>
-            <div className="course_metadata_right space-y-3 w-64 antialiased flex flex-col ml-10 h-fit p-3 py-5 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
+            <div className="course_metadata_right space-y-3 w-72 antialiased flex flex-col ml-10 h-fit p-3 py-5 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
               {user &&
-                <div className="flex mx-auto space-x-3 px-2 py-2 items-center">
+                <div className="flex flex-col mx-auto space-y-3 px-2 py-2 items-center">
                   <div className="">
-                    <Avvvatars border borderSize={5} borderColor="white" size={50} shadow value={course.authors[0].username} style='shape' />
+                    <Avvvatars radius={20} border borderSize={5} borderColor="white" size={80} shadow value={course.authors[0].user_uuid} style='shape' />
                   </div>
                   <div className="-space-y-2 ">
                     <div className="text-[12px] text-neutral-400 font-semibold">Author</div>
-                    <div className="text-xl font-bold text-neutral-800">{course.authors[0].first_name} {course.authors[0].last_name} {(course.authors[0].first_name && course.authors[0].last_name) ? course.authors[0].first_name + ' ' + course.authors[0].last_name : course.authors[0].username}</div>
+                    <div className="text-xl font-bold text-neutral-800">
+                      {course.authors[0].first_name && course.authors[0].last_name && (
+                      <div className="flex space-x-2 items-center">
+                        <p>{course.authors[0].first_name + ' ' + course.authors[0].last_name}</p><span className="text-xs bg-neutral-100 p-1 px-3 rounded-full text-neutral-400 font-semibold"> @{course.authors[0].username }</span>
+                      </div>)}
+                      {!course.authors[0].first_name && !course.authors[0].last_name && (
+                      <div className="flex space-x-2 items-center">
+                        <p>@{course.authors[0].username}</p>
+                      </div>)}
+                      </div>
                   </div>
                 </div>
               }

apps/web/components/Dashboard/UI/CourseOverviewTop.tsx

@@ -7,6 +7,8 @@ import { getUriWithOrg } from "@services/config/config";
 import { useOrg } from "@components/Contexts/OrgContext";
 import { getCourseThumbnailMediaDirectory } from "@services/media/media";
 import Link from "next/link";
+import Image from "next/image";
+import EmptyThumbnailImage from '../../../public/empty_thumbnail.png';
 
 export function CourseOverviewTop({ params }: { params: CourseOverviewParams }) {
     const course = useCourse() as any;
@@ -21,7 +23,10 @@ export function CourseOverviewTop({ params }: { params: CourseOverviewParams })
             <div className='flex'>
                 <div className='flex py-5 grow items-center'>
                     <Link href={getUriWithOrg(org?.slug, "") + `/course/${params.courseuuid}`}>
+                        {course?.courseStructure?.thumbnail ?
                         <img className="w-[100px] h-[57px] rounded-md drop-shadow-md" src={`${getCourseThumbnailMediaDirectory(org?.org_uuid, "course_" + params.courseuuid, course.courseStructure.thumbnail_image)}`} alt="" />
+                        :
+                        <Image width={100} className="h-[57px] rounded-md drop-shadow-md" src={EmptyThumbnailImage} alt="" />}
                     </Link>
                     <div className="flex flex-col course_metadata justify-center pl-5">
                         <div className='text-gray-400 font-semibold text-sm'>Course</div>

apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx

@@ -111,16 +111,16 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
                     <FormMessage match="valueMissing">Please provide a thumbnail for your course</FormMessage>
                 </Flex>
                 <Form.Control asChild>
-                    <Input onChange={handleThumbnailChange} type="file" required />
+                    <Input onChange={handleThumbnailChange} type="file" />
                 </Form.Control>
             </FormField>
             <FormField name="course-tags">
                 <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
-                    <FormLabel>Course tags (separated by comma)</FormLabel>
+                    <FormLabel>Course Learnings (separated by comma)</FormLabel>
                     <FormMessage match="valueMissing">Please provide learning elements, separated by comma (,)</FormMessage>
                 </Flex>
                 <Form.Control asChild>
-                    <Textarea onChange={handleTagsChange} required />
+                    <Textarea onChange={handleTagsChange} />
                 </Form.Control>
             </FormField>
             <FormField name="course-visibility">

apps/web/components/Objects/Thumbnails/CourseThumbnail.tsx

@@ -41,9 +41,10 @@ function CourseThumbnail(props: PropsType) {
         <div className='relative'>
             <AdminEditsArea course={props.course} orgSlug={props.orgslug} courseId={props.course.course_uuid} deleteCourses={deleteCourses} />
             <Link href={getUriWithOrg(props.orgslug, "/course/" + removeCoursePrefix(props.course.course_uuid))}>
-                <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-xl shadow-xl w-[249px] h-[131px] bg-cover" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(org?.org_uuid, props.course.course_uuid, props.course.thumbnail_image)})` }}>
 
-                </div>
+                {props.course.thumbnail_image ? <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-xl shadow-xl w-[249px] h-[131px] bg-cover" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(org?.org_uuid, props.course.course_uuid, props.course.thumbnail_image)})` }} />
+                    : <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-xl shadow-xl w-[249px] h-[131px] bg-cover" style={{ backgroundImage: `url('../empty_thumbnail.png')` , backgroundSize:'contain' }} />}
+
             </Link>
             <h2 className="font-bold text-lg w-[250px] py-2">{props.course.name}</h2>
         </div>

apps/web/services/courses/courses.ts

@@ -45,7 +45,10 @@ export async function createNewCourse(org_id: string, course_body: any, thumbnai
   formData.append("learnings", course_body.tags);
   formData.append("tags", course_body.tags);
   formData.append("about", course_body.description);
-  formData.append("thumbnail", thumbnail);
+  
+  if (thumbnail) {
+    formData.append("thumbnail", thumbnail);
+  }
 
   const result = await fetch(`${getAPIUrl()}courses/?org_id=${org_id}`, RequestBodyForm("POST", formData, null));
   const res = await errorHandling(result);