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.

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

Implement sort most popular sessions view #12

Merged
merged 13 commits into from
Sep 10, 2024

Conversation

odkhang
Copy link
Contributor

@odkhang odkhang commented Aug 30, 2024

This PR closes/references issue fossasia/eventyay-talk#161 . It does so by:

Add sort dropdown in session view
implement logic when sort with title/time/popularity

Summary by Sourcery

Implement a sorting feature in the calendar session view, allowing users to sort sessions by title, time, or popularity. Introduce dropdown components for filtering sessions by tracks, rooms, and session types, and enhance the UI for better responsiveness and usability.

New Features:

  • Introduce a sorting feature in the calendar session view, allowing users to sort sessions by title, time, or popularity.
  • Add dropdown components for filtering sessions by tracks, rooms, and session types.

Enhancements:

  • Refactor the session filtering logic to support multiple criteria, including tracks, rooms, and session types.
  • Improve the UI by adding a sticky position to the settings panel and adjusting the layout for better responsiveness.

Copy link

sourcery-ai bot commented Aug 30, 2024

Reviewer's Guide by Sourcery

This pull request implements sorting functionality in the calendar session view. It adds a sort dropdown menu and implements logic for sorting sessions by title, time, or popularity. The changes primarily affect the App.vue, LinearSchedule.vue, and Session.vue components, with additional new components created for the dropdown functionality.

File-Level Changes

Change Details Files
Implemented sorting functionality in the calendar session view
  • Added a sort dropdown menu with options for title, time, and popularity
  • Implemented sorting logic in LinearSchedule component
  • Updated Session component to display date information
  • Created new AppDropdown, AppDropdownContent, and AppDropdownItem components for dropdown functionality
  • Modified the layout and styling of the schedule view to accommodate new sorting features
src/App.vue
src/components/LinearSchedule.vue
src/components/Session.vue
src/components/GridSchedule.vue
src/utils.js
src/components/AppDropdown.vue
src/components/AppDropdownContent.vue
src/components/AppDropdownItem.vue
Refactored filtering functionality
  • Replaced modal-based filtering with dropdown-based filtering
  • Updated filter data structure to include tracks, rooms, and session types
  • Modified filtering logic to work with the new dropdown-based UI
src/App.vue
Improved responsive design for mobile devices
  • Added a sort icon for mobile view
  • Implemented a dropdown menu for sorting options on mobile
  • Adjusted styling for better display on smaller screens
src/App.vue
src/components/GridSchedule.vue
src/components/AppDropdownContent.vue

Tips
  • Trigger a new Sourcery review by commenting @sourcery-ai review on the pull request.
  • Continue your discussion with Sourcery by replying directly to review comments.
  • You can change your review settings at any time by accessing your dashboard:
    • Enable or disable the Sourcery-generated pull request summary or reviewer's guide;
    • Change the review language;
  • You can always contact us if you have any questions or feedback.

Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

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

Hey @odkhang - I've reviewed your changes and they look great!

Here's what I looked at during the review
  • 🟡 General issues: 2 issues found
  • 🟢 Security: all looks good
  • 🟢 Testing: all looks good
  • 🟢 Complexity: all looks good
  • 🟢 Documentation: all looks good

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment to tell me if it was helpful.

src/App.vue Outdated Show resolved Hide resolved
Comment on lines 64 to 73
return Object.entries(buckets).map(([date, sessions]) => {
let sessionBucket = {}
return Object.entries(buckets).map(([date, sessions]) => ({
date: sessions[0].start,
// sort by room for stable sort across time buckets
sessions: sessions.sort((a, b) => this.rooms.findIndex(room => room.id === a.room.id) - this.rooms.findIndex(room => room.id === b.room.id))
}))
} else {
let sortedSessions = this.sessions.slice().sort((a, b) => {
switch (this.sortBy) {
case 'title':
sessionBucket = {
date: sessions[0].start,
// sort by room for stable sort across time buckets
sessions: sessions.sort((a, b) => {
return a.title.localeCompare(b.title)
})
Copy link

Choose a reason for hiding this comment

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

suggestion (performance): Optimize sorting logic for better performance

The new sorting implementation in sessionBuckets computed property is more flexible but potentially less efficient for the 'time' sort case. Consider optimizing this logic, perhaps by maintaining separate sorted lists for each sort type and updating them incrementally as sessions change.

src/components/LinearSchedule.vue Outdated Show resolved Hide resolved
return Object.entries(buckets).map(([date, sessions]) => ({
date: sessions[0].start,
// sort by room for stable sort across time buckets
sessions: sessions.sort((a, b) => this.rooms.findIndex(room => room.id === a.room.id) - this.rooms.findIndex(room => room.id === b.room.id))
Copy link
Member

Choose a reason for hiding this comment

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

This project already include lodash, please use "sort-by-key" strategy (https://lodash.com/docs/4.17.15#sortBy), it produces simpler code.

@odkhang
Copy link
Contributor Author

odkhang commented Sep 4, 2024

Hi @hongquan, fixed as your suggestion, please help me to review it again

src/components/LinearSchedule.vue Outdated Show resolved Hide resolved
src/components/AppDropdownItem.vue Outdated Show resolved Hide resolved
src/components/GridSchedule.vue Outdated Show resolved Hide resolved
src/components/LinearSchedule.vue Outdated Show resolved Hide resolved
@mariobehling mariobehling changed the title Implement sort in calendar session view Implement sort most popular sessions view Sep 9, 2024
@mariobehling mariobehling merged commit be7cc17 into fossasia:master Sep 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants