collection backend

scripts/migration/savedCourses-migration.ts

@@ -0,0 +1,31 @@
+/* eslint-disable no-console */
+
+import { usernameCollection, semestersCollection } from '../firebase-config';
+
+/**
+ * Perform migration of a default The 'All' Collection for All Courses saved
+ */
+async function runOnUser(userEmail: string) {
+  const emptyCourses = [];
+  await semestersCollection.doc(userEmail).update({
+    savedCourses: [{ name: 'All', emptyCourses }],
+  });
+}
+
+async function main() {
+  const userEmail = process.argv[2];
+  if (userEmail != null) {
+    await runOnUser(userEmail);
+    return;
+  }
+  const collection = await usernameCollection.get();
+  for (const { id } of collection.docs) {
+    console.group(`Running on ${id}...`);
+    // Intentionally await in a loop to have no interleaved console logs.
+    // eslint-disable-next-line no-await-in-loop
+    await runOnUser(id);
+    console.groupEnd();
+  }
+}
+
+main();

src/components/Course/Course.vue

@@ -10,7 +10,7 @@
     <save-course-modal
       :courseCode="courseCode"
       @close-save-course-modal="closeSaveCourseModal"
-      @add-course-collection="addCourseCollection"
+      @save-course="saveCourse"
       @add-collection="addCollection"
       v-if="isSaveCourseOpen"
     />
@@ -88,9 +88,9 @@ import {
   reportCourseColorChange,
   reportSubjectColorChange,
 } from '@/components/BottomBar/BottomBarState';
+import { isCourseConflict } from '@/store';
 import { clickOutside } from '@/utilities';
 import EditColor from '../Modals/EditColor.vue';
-import { isCourseConflict } from '@/store';
 
 export default defineComponent({
   components: { CourseCaution, CourseMenu, EditColor, SaveCourseModal },
@@ -113,6 +113,15 @@ export default defineComponent({
     'course-on-click': (course: FirestoreSemesterCourse) => typeof course === 'object',
     'edit-course-credit': (credit: number, uniqueID: number) =>
       typeof credit === 'number' && typeof uniqueID === 'number',
+    'save-course': (
+      course: FirestoreSemesterCourse,
+      addedToCollections: string[],
+      deletedFromCollection: string[]
+    ) =>
+      typeof course === 'object' &&
+      typeof addedToCollections === 'object' &&
+      typeof deletedFromCollection === 'object',
+    'add-collection': (name: string) => typeof name === 'string',
   },
   data() {
     return {
@@ -182,13 +191,12 @@ export default defineComponent({
     closeEditColorModal() {
       this.isEditColorOpen = false;
     },
-    addCollection() {
-      this.isSaveCourseOpen = false;
-      // TODO: implement add collection
+    addCollection(name: string) {
+      this.$emit('add-collection', name);
     },
-    addCourseCollection() {
-      this.isSaveCourseOpen = false;
-      // TODO: implement save course
+    saveCourse(addedToCollections: string[], deletedFromCollections: string[]) {
+      const course = { ...this.courseObj };
+      this.$emit('save-course', course, addedToCollections, deletedFromCollections);
     },
     colorCourse(color: string) {
       this.$emit('color-course', color, this.courseObj.uniqueID, this.courseObj.code);

src/components/Modals/SaveCourseModal.scss

@@ -0,0 +1,200 @@
+@import '@/assets/scss/_variables.scss';
+.saveCourseModal {
+    &-title {
+      display: flex;
+      justify-content: space-between;
+      padding-top: 0.6rem;
+      gap: 0.5rem;
+      img {
+        margin-top: 2%;
+        align-self: flex-start;
+      }
+    }
+
+    &-header {
+      display: flex;
+      align-self: center;
+      margin-bottom: 0.7rem;
+      width: 112%;
+      height: 2rem;
+      border: 0.3px solid $lightGray;
+      color: $primaryGray;
+      padding: 1rem;
+
+      &-text {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 13px;
+        font-weight: 900;
+        width: 100%;
+
+        &-addButton {
+          cursor: pointer;
+          &:hover {
+            opacity: 0.5;
+          }
+        }
+      }
+    }
+
+    &-body {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      color: $primaryGray;
+      width: 100%;
+      position: relative;
+      max-height: 4.5rem;
+      overflow-y: auto;
+      overflow-x: hidden;
+      box-sizing: border-box;
+
+      ::-webkit-scrollbar-button {
+        display: none; // Hide the up and down arrows
+      }
+
+      &-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: 0.5rem;
+        width: 100%;
+
+        &.default-collection {
+          justify-content: center;
+          align-items: center;
+        }
+
+        &-collection {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          color: $primaryGray;
+          gap: 0.5rem;
+          padding: 0rem;
+
+          input[type='checkbox'] {
+            margin: 0;
+            padding: 0;
+            appearance: none;
+            width: 12px;
+            height: 12px;
+            border-radius: 10%;
+            border: 1px solid $lightGray;
+            background-color: white;
+            cursor: pointer;
+            position: relative; // For the ::before element positioning
+            user-select: none;
+            outline: none;
+
+            &:hover {
+              border: 1px solid $emGreen;
+            }
+
+            &:checked{
+              background-color: $emGreen;
+              border: 1px solid $emGreen;
+            }
+
+            // Show checkbox vector when checked
+            &:checked::before{
+              content: '';
+              background-image: url('@/assets/images/checkmark-color.svg');
+              background-size: contain;
+              background-repeat: no-repeat;
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-48%, -38%);
+              width: 9px;
+              height: 9px;
+            }
+          }
+
+          label {
+            cursor: pointer;
+            user-select: none;
+            margin: 0;
+            padding: 0;
+            outline: none;
+          }
+        }
+      }
+      &-bottom {
+        display: flex;
+        align-items: center;
+        justify-items: center;
+        width: 100%;
+
+        input[type='checkbox'] {
+          margin-right: 0.35rem;
+          appearance: none;
+          width: 12px;
+          height: 12px;
+          border-radius: 10%;
+          border: 1px solid $lightGray;
+          background-color: white;
+          cursor: pointer;
+          position: relative; // For the ::before element positioning
+          user-select: none;
+          outline: none;
+
+          &:hover {
+            border: 1px solid $emGreen;
+          }
+
+          &:checked {
+            background-color: $emGreen;
+            border: 1px solid $emGreen;
+          }
+
+          // Show checkbox vector when checked
+          &:checked::before {
+            content: '';
+            background-image: url('@/assets/images/checkmark-color.svg');
+            background-size: contain;
+            background-repeat: no-repeat;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-48%, -38%);
+            width: 9px;
+            height: 9px;
+          }
+        }
+
+        .new-collection-label {
+          flex-grow: 1;
+          display: flex;
+          align-items: center;
+          margin-top: 0.3rem;
+
+          .editable-input {
+            border: 1px solid $lightGray;
+            border-radius: 4px;
+            box-sizing: border-box;
+            transition: border 0.2s ease;
+            width: 80%;
+            padding-left: 0.1rem;
+
+            &:focus {
+              outline: none;
+              border-color: $lightGray;
+              box-shadow: none;
+            }
+          }
+        }
+      }
+    }
+    &-divider-line {
+      display: flex;
+      align-self: center;
+      width: 112%;
+      height: 0.3px;
+      background-color: $lightGray;
+    }
+  }