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 infinite scrolling in new and deprecated view #1766

Merged
merged 4 commits into from
Mar 13, 2025

Conversation

UnniKohonen
Copy link
Contributor

@UnniKohonen UnniKohonen commented Mar 11, 2025

Reasons for creating this PR

Changes view in sidebar does not currently load more concepts as the list is scrolled in Skosmos 3. This PR adds functionality to address this.

Link to relevant issue(s), if any

Description of the changes in this PR

  • Add an event listener for scrolling changes list
  • Load more concepts when list is scrolled to the bottom
  • Add spinners when loading content
  • Add a cypress test for loading new changes
  • Add dark color to deprecated concepts' line throughs

Addresses requirement 7 in #1735

Known problems or uncertainties in this PR

Checklist

  • phpUnit tests pass locally with my changes
  • I have added tests that show that the new code works, or tests are not relevant for this PR (e.g. only HTML/CSS changes)
  • The PR doesn't reduce accessibility of the front-end code (e.g. tab focus, scaling to different resolutions, use of .sr-only class, color contrast)
  • The PR doesn't introduce unintended code changes (e.g. empty lines or useless reindentation)

@UnniKohonen UnniKohonen added this to the 3.0 milestone Mar 11, 2025
@UnniKohonen UnniKohonen self-assigned this Mar 11, 2025
@UnniKohonen UnniKohonen requested a review from joelit March 12, 2025 10:18
Copy link
Contributor

@joelit joelit left a comment

Choose a reason for hiding this comment

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

I'd personally take some of the logging off at this point, but we can have a look at JS logging levels as a whole in a separate issue instead of tackling it here.

The feature works as intended, even in a mobile width single-column window - LGTM!

@@ -67,9 +72,52 @@ function startChangesApp () {

this.changedConcepts = changesByDate
this.loadingConcepts = false
this.currentOffset = 200
// Add scrolling event listener back after changes are loaded
this.$refs.tabChanges.$refs.list.addEventListener('scroll', this.handleScrollEvent)
console.log('changes', this.changedConcepts)
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe we don't need the logging anymore at this point

return data.json()
})
.then(data => {
console.log('data', data)
Copy link
Contributor

Choose a reason for hiding this comment

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

Ditto. Maybe we don't need the logging anymore at this point.

if (data.changeList.length > 0) {
this.$refs.tabChanges.$refs.list.addEventListener('scroll', this.handleScrollEvent)
}
console.log('changes', this.changedConcepts)
Copy link
Contributor

Choose a reason for hiding this comment

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

Ditto. Maybe we don't need the logging anymore at this point.

@joelit
Copy link
Contributor

joelit commented Mar 13, 2025

I created a separate issue about logging levels - #1773

@UnniKohonen UnniKohonen merged commit 54fe53f into main Mar 13, 2025
11 checks passed
@UnniKohonen UnniKohonen deleted the issue1765-changes-view-infinite-scroll branch March 13, 2025 07:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Issue/PR closed
Development

Successfully merging this pull request may close these issues.

Implement infinite scrolling in new and deprecated view
2 participants