Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

collection backend #944

Merged
merged 6 commits into from
Oct 29, 2024
Merged

collection backend #944

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c475ccb
added collections in store. add backend methods and gtags
plumshum Oct 2, 2024
3108134
added basic functionality for save course
plumshum Oct 5, 2024
32add4c
fixed functionality for save courses to mutliple collections
plumshum Oct 5, 2024
36f9925
finished backend and fixed frontend
plumshum Oct 17, 2024
5d4df16
created editabilify for collection names
plumshum Oct 18, 2024
726dbe3
fixed backend error and logic
plumshum Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 17 additions & 8 deletions src/components/Course/Course.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@
<save-course-modal
:courseCode="courseCode"
@close-save-course-modal="closeSaveCourseModal"
@add-course-collection="addCourseCollection"
@save-course="saveCourse"
@add-collection="addCollection"
@edit-collection="editCollection"
v-if="isSaveCourseOpen"
/>
<edit-color
Expand Down Expand Up @@ -88,9 +89,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 },
Expand All @@ -113,6 +114,11 @@ 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, collections: string[]) =>
typeof course === 'object' && typeof collections === 'object',
'add-collection': (name: string) => typeof name === 'string',
'edit-collection': (name: string, oldname: string) =>
typeof name === 'string' && typeof oldname === 'string',
},
data() {
return {
Expand Down Expand Up @@ -182,13 +188,16 @@ 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(collections: string[]) {
const course = { ...this.courseObj };
this.$emit('save-course', course, collections);
},
/* only to rename the collection */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for adding these comments + details! your code is super clear - the add collection vs edit collection vs save course is very clearly divided. i know you're working on the merge right now but that should hopefully be pretty straightforward with your you divided all of the logic

editCollection(name: string, oldname: string) {
this.$emit('edit-collection', name, oldname);
},
colorCourse(color: string) {
this.$emit('color-course', color, this.courseObj.uniqueID, this.courseObj.code);
Expand Down
194 changes: 194 additions & 0 deletions src/components/Modals/SaveCourseModal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
@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;
}
}
}
}
&-divider-line {
display: flex;
align-self: center;
width: 112%;
height: 0.3px;
background-color: $lightGray;
}
}
Loading
Loading