130 ability to make course public

devU-api/package.json

@@ -53,7 +53,7 @@
     "prettier": "^2.3.0",
     "rimraf": "^3.0.2",
     "ts-jest": "^27.0.2",
-    "ts-node": "^10.0.0",
+    "ts-node": "^10.9.2",
     "ts-node-dev": "^2.0.0",
     "typescript": "^4.3.2"
   },

devU-api/scripts/populate-db.ts

@@ -55,16 +55,23 @@ async function SendPOST(path: string, requestBody: string | FormData, requesterE
   return responseBody
 }
 
-async function CreateCourse(name: string, number: string, semester: string) {
+async function CreateCourse(
+  name: string, 
+  number: string, 
+  semester: string, 
+  isPublic: boolean 
+) {
   const courseData = {
-    name: name,
-    semester: semester,
-    number: number,
-    startDate: '2024-01-24T00:00:00-0500',
-    endDate: '2024-05-10T23:59:59-0500',
-  }
-  console.log('Creating course: ', courseData.name)
-  return await SendPOST('/courses/instructor', JSON.stringify(courseData), 'admin')
+      name: name,
+      semester: semester,
+      number: number,
+      startDate: '2024-01-24T00:00:00-0500',
+      endDate: '2024-05-10T23:59:59-0500',
+      is_public: isPublic // Include the public property
+  };
+
+  console.log('Creating course: ', courseData.name);
+  return await SendPOST('/courses/instructor', JSON.stringify(courseData), 'admin');
 }
 
 async function joinCourse(courseId: number, userId: number, role: string) {
@@ -208,8 +215,8 @@ async function runCourseAndSubmission() {
   const jones = await fetchToken('[email protected]', 'jones')
 
   //Create courses
-  const courseId1 = (await CreateCourse('Testing Course Name1', 'CSE101', 's2024')).id
-  const courseId2 = (await CreateCourse('Testing Course Name2', 'CSE102', 's2024')).id
+  const courseId1 = (await CreateCourse('Testing Course Name1', 'CSE101', 's2024',true)).id
+  const courseId2 = (await CreateCourse('Testing Course Name2', 'CSE102', 's2024',true)).id
 
   //Enroll students
   await joinCourse(courseId1, billy, 'student')

devU-api/src/entities/course/course.model.ts

@@ -58,4 +58,11 @@ export default class CourseModel {
 
   @DeleteDateColumn({ name: 'deleted_at' })
   deletedAt?: Date
+
+  @Column({ type: 'boolean', name: 'is_public', default: false }) 
+  isPublic: boolean;
+
+  @Column({ name: 'private_data', type: 'timestamp', default: () => 'now()' })
+  private_data?: Date;
+
 }

devU-api/src/entities/course/course.serializer.ts

@@ -12,5 +12,7 @@ export function serialize(course: CourseModel): Course {
     endDate: course.endDate.toISOString(),
     createdAt: course.createdAt.toISOString(),
     updatedAt: course.updatedAt.toISOString(),
+    isPublic: course.isPublic,
+    private_data: course.private_data ? course.private_data.toISOString() : undefined
   }
 }

devU-api/src/migration/1626719306608-addAssignmentsAndCourses.ts

@@ -15,6 +15,8 @@ export class addAssignmentsAndCourses1626719306608 implements MigrationInterface
           "created_at" TIMESTAMP NOT NULL DEFAULT now(),
           "updated_at" TIMESTAMP NOT NULL DEFAULT now(),
           "deleted_at" TIMESTAMP,
+          "is_public" boolean NOT NULL DEFAULT false,
+          "private_data" TIMESTAMP NOT NULL DEFAULT now(),
           CONSTRAINT "courses_primary_key_constraint" PRIMARY KEY ("id")
       )`
     )

devU-client/src/components/listItems/courseListItem.scss

@@ -60,13 +60,29 @@
 
   color: $text-color;
 
-
+  &.enrolled {
+    background-color: #dff0d8; // Light green background for enrolled courses
+    border-color: #3c763d; // Darker green border for enrolled courses
+    color: #3c763d; // Change text color to darker green
+  }
   &:hover,
   &:focus {
     background: $list-item-background-hover;
   }
 }
 
+.enrollmentStatus {
+  margin-left: 10px;
+  font-weight: bold; // Make it bold for emphasis
+}
+
+.enrolled {
+  color: green; // Change color for enrolled courses
+}
+
+.notEnrolled {
+  color: red; // Change color for not enrolled courses
+}
 
 @media (max-width: $medium) {
   .subText {

devU-client/src/components/listItems/courseListItem.tsx

@@ -44,7 +44,17 @@ const CourseListItem = ({course, isOpen}: Props) => {
                     {infoSection("Course Number", course.number)}
                     {infoSection("Semester", prettyPrintSemester(course.semester))}
                     {infoSection("Start/End Date", prettyPrintDate(course.startDate), prettyPrintDate(course.endDate))}
+                    <div className={styles.courseVisibility}>
+             {course && (
+                course.isPublic ? (
+                    <span className={styles.public}>Public Course</span>
+                ) : (
+                    <span className={styles.private}>Private Course</span>
+                )
+            )}
+        </div>
                 </Link>
+
             }
         </div>
     )

devU-client/src/components/misc/globalToolbar.tsx

@@ -29,7 +29,7 @@ const GlobalToolbar = () => {
             <DarkModeToggle />
             {
             <Link to={`/courses`} className={styles.link} >
-              My Courses
+              Join a Course
             </Link>
             }     
             {/*<Link to={`/myCourses`} className={styles.link}>*/}

devU-client/src/components/pages/forms/courses/courseUpdatePage.tsx

@@ -44,12 +44,14 @@ const CourseUpdatePage = ({ }) => {
         name: '',
         number: '',
         semester: '',
+        isPublic: false 
     })
     const [startDate, setStartDate] = useState(new Date().toISOString())
     const [endDate, setEndDate] = useState(new Date().toISOString())
     const [studentEmail, setStudentEmail] = useState("")
     const [emails, setEmails] = useState<string[]>([])
     const [invalidFields, setInvalidFields] = useState(new Map<string, string>())
+    const [privateDate, setPrivateDate] = useState(new Date().toISOString().split("T")[0]);
 
     const { courseId } = useParams() as UrlParams
     useEffect(() => {
@@ -60,9 +62,11 @@ const CourseUpdatePage = ({ }) => {
                     name: res.name,
                     number: res.number,
                     semester: res.semester,
+                    isPublic: res.isPublic 
                 });
                 setStartDate(new Date(res.startDate).toISOString().split("T")[0]);
                 setEndDate(new Date(res.endDate).toISOString().split("T")[0]);
+                setPrivateDate(new Date(res.privateDate).toISOString().split("T")[0]); 
                 isMounted = true;
             });
         }
@@ -80,17 +84,24 @@ const CourseUpdatePage = ({ }) => {
             setFormData(prevState => ({ ...prevState, [key]: value }))
         }
     }
-
+    const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setFormData(prevState => ({ ...prevState, isPublic: e.target.checked })); 
+    };
     const handleStartDateChange = (event: React.ChangeEvent<HTMLInputElement>) => { setStartDate(event.target.value) }
     const handleEndDateChange = (event: React.ChangeEvent<HTMLInputElement>) => { setEndDate(event.target.value) }
 
+    const handlePrivateDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setPrivateDate(event.target.value);
+    };
     const handleCourseUpdate = () => {
         const finalFormData = {
             name: formData.name,
             number: formData.number,
             semester: formData.semester,
             startDate: startDate + "T16:02:41.849Z",
             endDate: endDate + "T16:02:41.849Z",
+            isPublic: formData.isPublic,
+            privateDate: privateDate + "T16:02:41.849Z",
         }
 
         RequestService.put(`/api/courses/${courseId}`, finalFormData)
@@ -267,6 +278,20 @@ const CourseUpdatePage = ({ }) => {
                             <label htmlFor='end-date'>End Date *</label>
                             <input type="date" id="end-date" value={endDate} onChange={handleEndDateChange} />
                         </div>
+                        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', gap: '5px' }}>
+                            <label htmlFor='private-date'>Private Date *</label>
+                            <input type="date" id="private-date" value={privateDate} onChange={handlePrivateDateChange} />
+                        </div>
+                        <div>
+                        <label>
+                            <input
+                                type="checkbox"
+                                checked={formData.isPublic} 
+                                onChange={handleCheckboxChange}
+                            />
+                            Make this course public
+                        </label>
+                        </div>
                     </div>
                     <div style={{ display: 'flex', justifyContent: 'center' }}>
                         <button className='btnPrimary' onClick={handleCourseUpdate}>Update Course</button>