collections page empty front-end look #940

plumshum · 2024-09-17T03:40:19Z

Summary

Created the basic frontend look for the sidebar Collection page.

when implemented with backend remove the hardcoded collections

This pull request is part of the Saved Course Feature
Here is the lastest demo:

CoursePlan.and.2.more.pages.-.Personal.-.Microsoft.Edge.2024-10-19.13-01-41.mp4

empty front-end look for the sidebar
front-end look for multiple collections (Note: I hardcoded courses into the All collection, so there is no logic in place to also put it in the other collections. It's also why there's alot of duplicated code between the All collection and the dynamic collection. )
EditCollectionModal

Breaking Changes

I made Course.vue have prop :isSemesterCourseCard so that I can change the course card look for the collection.
Technically, I'm using FirestoreSemesterCourse, but I feel like I should be using CornellRosterCourse
I decided to make direct copy of TextInputModal and EditPlanModal for collections so that I don't make any breaking changes with multiple plans, but I think we can make a tempalte TextInputModal that can work for any feature modals that require its functionality

Remaining TODOs:

make Course Draggable

Depends on #882 (It has the Saved Course Icon on the side to click into this page)

Test Plan

Make sure the frontend looks accurate with design

dti-github-bot · 2024-09-17T03:40:34Z

[diff-counting] Significant lines: 610.

github-actions · 2024-09-17T03:41:52Z

Visit the preview URL for this PR (updated for commit e179d25):

https://cornelldti-courseplan-dev--pr940-hannah-collections-rg36z6dl.web.app

_{(expires Tue, 26 Nov 2024 19:04:59 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 6d4e0437c4559ed895272bbd63991394f1e0e933}

Destaq

Nice job implementing the skeleton for this, looks in-line with the rest of the site! I picked up on a couple small Figma issues that would be good to have addressed, but as soon as you do those should be good to merge. Well done with SCSS and finding a relevant icon~

Destaq · 2024-09-19T20:50:28Z

src/assets/images/dropdown.svg

Looks good, we can just invert this with some CSS when toggling it.

Destaq · 2024-09-19T20:51:45Z

src/components/Modals/CollectionsSideBar.vue

+    </div>
+    <div>
+      <button class="dropdown-item-button">
+        <img src="@/assets/images/dropdown.svg" alt="open dropdown" class="hover-image" />


Eventually (or maybe even now, depending on the scope of your task?) we could make this reactive — on click change the alt and invert the image, with an associated reactive Vue state variable.

Yes that makes sense once it becomes reactive. Another thing to consider is the change in color as well (it will become blue).

Destaq · 2024-09-19T20:52:30Z

src/components/Modals/CollectionsSideBar.vue

+  background: #587c91;
+}
+
+.top.header-title {


The Figma designs have this title be bold, as does the dropdown-item-button — could you add those updates in?

Destaq · 2024-09-19T20:53:45Z

src/components/Modals/CollectionsSideBar.vue

+  align-items: center;
+  width: 226px;
+  height: 17.126px;
+  color: #3c3c3c;


Since you already imported the SASS variables, could we update this to use the $darkGray variable?

Destaq · 2024-09-19T20:59:27Z

src/components/Requirements/RequirementSideBar.vue

+                @edit-plan="editPlan"
+                @delete-plan="deletePlan"
+              />
+              <button class="add-plan-button" @click="toggleAddPlan()">+ Add Plan</button>


If you look closely on the Figma you'll notice that the "+ Add Plan" button is slightly shorter and flex-centered horizontally with the My Plan search.

All the other navbars already do it the same way you do — this was not due to any change on your part. However we should probably consult with Joanna to make sure that it's fine to sidestep her designs like this.

Destaq · 2024-09-19T21:01:26Z

src/components/Modals/CollectionsSideBar.vue

+  <div class="sidebar">
+    <div class="sidebar-header">
+      <div class="separator-header"></div>
+      <h1 class="top header-title">Collections</h1>


There's a bit of misalignment with the Figma designs here, this text's bottom padding is a bit more than it should be (nitpicking).

Destaq · 2024-09-19T21:02:03Z

src/components/Requirements/RequirementSideBar.vue

  },
-  emits: ['showTourEndWindow', 'toggleMinimized'],
+  emits: ['showTourEndWindow', 'toggleMinimized'], // probably will remove emits with just using components


Could you clarify what you meant here?

Sorry that's an old comment. Originally, I made an 'emit' to open the sidebar, then completely scratching that idea.

- added edit collection modal and text input collection modal - fixed front-end with trash can - fixed front-end with dropdown button and edit collection button

plumshum · 2024-10-19T17:01:07Z

src/components/Course/Course.vue

+    deleteCourseFromCollection() {
+      this.deletingCourse = true;
+      this.$emit('delete-course-from-collection', this.courseObj.code);
+      // wait to allow deletion


Another way to do this?

- fixed padding - fixed null issue

* add icon * fix icon * feature flag * fixed feature flags * collections page empty front-end look (#940) * added save-collection emit * create sidebar vue * connected dashboard and sidebar * finished empty front-end look * adjust hover * fixed positioning * update artifact version * added front-end look for saved courses in collection * fixed collectionsidebar css for frontend implementation * edit collection modal + front-end fixes - added edit collection modal and text input collection modal - fixed front-end with trash can - fixed front-end with dropdown button and edit collection button * frontend fixes - fixed padding - fixed null issue * added helper function in utilities * ran prettier * frontend fixes --------- Co-authored-by: Hannah Zhou <[email protected]> Co-authored-by: Hannah Zhou <[email protected]>

* [Saved Courses] add save modal (#912) * Change course menu to click state (#898) * add save button and icon * change position of save course button * added new Save Course Modal * added new Save Course Modal * added basic front-end look * re-edit teleport modal * fixed basic front-end look * renamed icon * fixed frontend alignment * fixed frontend alignment and file path * added feature flag for save course modal * fixed front-end bug and modal hierachy * change method and emit names --------- Co-authored-by: KaylinChan <[email protected]> * added collections in store. add backend methods and gtags * added basic functionality for save course - can save a course when press 'done' - course is saved to an empty collection - add functions for add & edit collection * fixed functionality for save courses to mutliple collections - can save one course to multiple collections w/ checkbox - saved course will be removed from semester view and from fullfilled requirements - pop up notification * finished backend and fixed frontend - finished scrollable checkbox frontend - fixed the bug for selecting a singular checkbox - believed its stored in firestore when added to collection - renamed collection to savedCourses for firesetore clarity * created editabilify for collection names - saveCourseModal allow user to name their new collections - moved scss into a separate file * fixed backend error and logic - added updateDoc in backend functions - made edit Collections modal more functional with saveCourse * [Saved Courses] Add Icon to Sidebar (#882) * add icon * fix icon * feature flag * fixed feature flags * collections page empty front-end look (#940) * added save-collection emit * create sidebar vue * connected dashboard and sidebar * finished empty front-end look * adjust hover * fixed positioning * update artifact version * added front-end look for saved courses in collection * fixed collectionsidebar css for frontend implementation * edit collection modal + front-end fixes - added edit collection modal and text input collection modal - fixed front-end with trash can - fixed front-end with dropdown button and edit collection button * frontend fixes - fixed padding - fixed null issue * added helper function in utilities * ran prettier * frontend fixes --------- Co-authored-by: Hannah Zhou <[email protected]> Co-authored-by: Hannah Zhou <[email protected]> * merged sidebar with backend * fixed migration script and bottom course bar * feat: draggable saved courses * chore: prettify things * ran prettier and type check * fixed cu review api * fixed div * remove feature flag * frontend and type check fixes * resolved front-end issue with plans * fixed more front-end and confirmation modal * fixed frontend * ran prettier * last fix --------- Co-authored-by: KaylinChan <[email protected]> Co-authored-by: andrew xu <[email protected]> Co-authored-by: Simon Ilincev <[email protected]> Co-authored-by: Simon Ilincev <[email protected]>

plumshum added 5 commits September 15, 2024 14:23

added save-collection emit

7bba74d

create sidebar vue

a02c58c

connected dashboard and sidebar

5724136

finished empty front-end look

6cd1462

adjust hover

acfb901

plumshum requested a review from a team as a code owner September 17, 2024 03:40

fixed positioning

e75bc69

plumshum self-assigned this Sep 17, 2024

update artifact version

bd322f1

Destaq reviewed Sep 19, 2024

View reviewed changes

plumshum added 3 commits October 19, 2024 00:58

added front-end look for saved courses in collection

012313d

fixed collectionsidebar css for frontend implementation

aa98cc9

edit collection modal + front-end fixes

5d431e6

- added edit collection modal and text input collection modal - fixed front-end with trash can - fixed front-end with dropdown button and edit collection button

plumshum commented Oct 19, 2024

View reviewed changes

plumshum added 2 commits October 27, 2024 14:38

frontend fixes

a146740

- fixed padding - fixed null issue

added helper function in utilities

e179d25

plumshum merged commit 4dac616 into andrew--saved-courses-icon Oct 27, 2024
10 of 11 checks passed

plumshum deleted the hannah--collections-page branch October 27, 2024 19:10

nidhi-mylavarapu mentioned this pull request Oct 30, 2024

Saved Courses Release! #958

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

collections page empty front-end look #940

collections page empty front-end look #940

plumshum commented Sep 17, 2024 •

edited

Loading

dti-github-bot commented Sep 17, 2024 •

edited

Loading

github-actions bot commented Sep 17, 2024 •

edited

Loading

Destaq left a comment

Destaq Sep 19, 2024

Destaq Sep 19, 2024

plumshum Sep 22, 2024

Destaq Sep 19, 2024

Destaq Sep 19, 2024

Destaq Sep 19, 2024

Destaq Sep 19, 2024

Destaq Sep 19, 2024

plumshum Sep 22, 2024

plumshum Oct 19, 2024

collections page empty front-end look #940

collections page empty front-end look #940

Conversation

plumshum commented Sep 17, 2024 • edited Loading

Summary

Test Plan

dti-github-bot commented Sep 17, 2024 • edited Loading

github-actions bot commented Sep 17, 2024 • edited Loading

Destaq left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

plumshum commented Sep 17, 2024 •

edited

Loading

dti-github-bot commented Sep 17, 2024 •

edited

Loading

github-actions bot commented Sep 17, 2024 •

edited

Loading