Use Accessible Cards in Lesson Resource Selection

[nucleogenesis]

Summary

Screencast_20250207_133314.webm

• Updates LessonResourceSelection to use AccessibleFolderCard & AccessibleResourceCard.

TODO

• Wire up bookmarks

References

Closes #12732

Reviewer guidance

TBD

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.18.0a1.dev0_git.55.g7990b078.pex
Windows Installer (EXE)	kolibri-0.18.0a1.dev0+git.55.g7990b078-windows-setup-unsigned.exe
Debian Package	kolibri_0.18.0a1.dev0+git.55.g7990b078-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.18.0a1.dev0+git.55.g7990b078.dmg
Android Package (APK)	kolibri-0.18.0a1.dev0+git.55.g7990b078-0.1.4-debug.apk
Raspberry Pi Image	kolibri-pi-image-0.18.0a1.dev0+git.55.g7990b078.zip
TAR file	kolibri-0.18.0a1.dev0+git.55.g7990b078.tar.gz
WHL file	kolibri-0.18.0a1.dev0+git.55.g7990b078-py2.py3-none-any.whl

[nucleogenesis]

@marcellamaki @AlexVelezLl

The Bookmarks count is not updated on the root page of the LessonResourceSelection when I add/remove bookmarks while navigating the tree. So if I have 4 bookmarks, go in and add 4 more, then I go back to the root and see the bookmarks card still has 4.

I tried to hack at it to fix it a bit but couldn't get it to re-fetch correctly. I gave it like 30 mins and gave up on it - should I make a follow-up for issue for this?

FWIW I tried:

• Put the force: true on the ContentNodeResource.fetch_bookmarks call that happens on that page
• Call the getBookmarks in SelectionIndex during route update and enter, which didn't work
• Combination of these two things
• Get the fetchData method from the fetchBookmarks and call it when the page loads (this resulted in infinite page reloads 🤷‍♂️ )
• I threw other things at the wall with no luck 😅

It seems like it might be some part of how the fetchBookmarks object works - I expected the fetchData method to be the one that'd work so maybe I'm missing something there.

[AlexVelezLl]

Hey @nucleogenesis! Yes, we will need to call the bookmarksFetch.fetchData right after we save or remove a bookmark or if we dont want to make another api call here to load them, we can also add/remove items from the bookmarksFetch.data ref array and update the bookmarksFetch.count value. Any of them will properly update the bookmarks list.

Get the fetchData method from the fetchBookmarks and call it when the page loads (this resulted in infinite page reloads 🤷‍♂️ )

The reason of the infinite page reload here is because fetching bookmarks triggers this loading computed property to true, and this causes a remount of the router view here. And thats why if we call it inside the setup method it will cause an infinite loop of loading -> fetching -> loading -> fetching, etc. A solution for this could be to replace this v-else with a v-show so the component is not unmounted, but I dont think fetching the bookmarks all the times that we open the select from bookmarks page would be very efficient, and also because we also need the bookmarks updated in the SelectionIndex page because there we also render the bookmarks count, so we would also need to call it inside that subpage.

I think this can be a follow up issue, and we can explore more there the implications of each option :)

[AlexVelezLl]

Just wonder if it would be better to check the existence of content.bookmark object to verify if the resource has been bookmarked? For example we use this to show the "bookmarked x days ago" in the SelectFromBookmarks subpage here.

With this we avoid needing to load all bookmarks each time this component is mounted. Because this component will be remounted each time we navigate through the folder tree/bookmarks/search results and I think we can save us from making this fetch all these times.

[AlexVelezLl]

I found a little regression here. In the SelectFromBookmarks component, the cards now dont show the Bookmarked label:

Before:

After: