Integrate shopping cart into lesson resource selection side panel #12996

AlexVelezLl · 2025-01-13T13:01:20Z

Summary

Integrates shopping cart into lesson resource selection side panel.
Implemts functionality to add selected resources to lesson.
Adds a guard to show a closing confirmation modal when closing the modal with modified changes.

Compartir.pantalla.-.2025-01-13.16_12_02.mp4

References

Closes #12990.

Reviewer guidance

Create or edit a lesson
Change browser route path from "/lesson" to "lessontemp".
Select/deselect resources to add to the lesson.
Check the shopping cart, its reactiveness, buttons, etc.
Check that save button works in different scenarios.

Implementation notes

As we shouldnt have repeated resources in a lesson, I have make sure to save unique resoures in the list. This implies that if a user is selecting a resource that is already in the lesson, it will just "ignore" it (because of the unification process). So it wont take it into account to make the save request, neither to show the close confirmation message if no new resources are being added. Does this makes sense?

...ns/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/ManageSelectedResources.vue

github-actions · 2025-01-13T13:34:01Z

Build Artifacts

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

marcellamaki

A few notes from an initial read through - I'll do a second review tomorrow. I also haven't run this locally yet or tried it out.

@pcenov I'll add you here for manual QA - please let me or Alex know if you have any questions about how to test these changes. Thank you!

...oach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue

pcenov · 2025-01-16T11:37:38Z

Hi @AlexVelezLl and @marcellamaki, I confirm that this is implemented as specified above. Noticed the following potential issues:

As noted by Alex in the description of the PR the resources which have already been added to the lesson are not marked as selected when one reopens the modal. This wasn't the case in the previous version where all added resources are marked as selected. So that question is - can we have the same implementation here, so that a coach will have a clear indication which resources are already added?

Current implementation:

selection.mp4

It's not possible to preview a resource both by clicking on a card or on the link (perhaps not in scope for this PR?):

cannot.preview.a.resource.mp4

Clicking the back arrow always brings me to the "Manage lesson resources" page while when I am navigating within folders I was expecting to be able to go back to the previous folder:

the.back.arrow.mp4

rtibbles · 2025-01-23T20:08:16Z

As noted by Alex in the description of the PR the resources which have already been added to the lesson are not marked as selected when one reopens the modal. This wasn't the case in the previous version where all added resources are marked as selected. So that question is - can we have the same implementation here, so that a coach will have a clear indication which resources are already added?

I think this is desirable - with one change from the previous behaviour - the checkboxes should be marked as selected, but disabled. This is an intentional change we introduced in the quiz workflow, so that resource selection was a 'shopping cart' experience - going to find new resources to include - not a selection and deselection experience. Removing resources is done from the lesson itself, not the resource selection flow.

rtibbles · 2025-01-23T20:14:58Z

For 2 - we have two follow up issues for the preview behaviours, so yes, I think out of scope for this PR! #12988 and #12989

For 3 - my understanding is that this is currently intended behaviour. I think we shouldn't block the PR for this, and I know there are other back arrow confusions in resource selection in quiz too, so we should keep a close eye on people's reactions to this as we do broader internal testing.

AlexVelezLl · 2025-01-24T14:05:46Z

Thank @rtibbles! I have pushed the changes to have these checkboxes selected but disabled :)

Compartir.pantalla.-.2025-01-24.09_04_54.mp4

pcenov

Thanks @AlexVelezLl - I confirm that the checkboxes of the already added resources are disabled now.

rtibbles

I think we could do with a better name for noSelectableResourcesIds see my comment on one instance.

I have a broader question about state management here, which maybe is better deferred from this PR and addressed to @marcellamaki - it seems like we're still using the lessonSummary vuex state, rather than following the pattern we followed in quiz to start from scratch with a composable for editing.

rtibbles · 2025-01-27T20:31:49Z

kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js

 import SelectionIndex from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectionIndex.vue';
 import SelectFromBookmarks from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromBookmarks.vue';
 import SelectFromChannels from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromChannels.vue';
+import ManageSelectedResources from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/ManageSelectedResources.vue';


Does adding the .vue suffix help with IDE file discovery? Just wondering if we should standardize on one way or the other. Our webpack config handles discovery of vue files without the extension, but maybe IDEs are not handling it as well?

Yes, its just for VS Code. without it, VS Code expect it to be a js file, and therefore, it just dont find the file. Adding the .vue let us navigate to the file just doing cntrl + click and It is much more comfortable. Although I haven't taken the time to investigate if I can configure VS Code for this.

This may also be influencing why this is not being supported vitejs/vite#178

Vite is also removing support for imports of vue components without the extension.

We are probably going to be better off bending with the wind!

We are probably going to be better off bending with the wind!

I agree!

kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/UpdatedResourceSelection.vue

rtibbles · 2025-01-27T20:35:33Z

...oach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue

        PageNames,
      };
    },
    computed: {
-      totalSize() {
+      ...mapState('lessonSummary', ['currentLesson', 'workingResources']),


Oh, have we not migrated lesson editing over to using composition API for state? Are we updating the lessonSummary vuex whenever we edit things as well? cc @marcellamaki

Are we updating the lessonSummary vuex whenever we edit things as well?

Yes, thats why I had to call this setWorkingResources call here.

And in the LessonSummaryPage, we also update this workingResources array when we remove a resource from the lesson

kolibri/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue

Line 343 in 0b44855

this.setWorkingResources(resources);

.

...ns/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/ManageSelectedResources.vue

AlexVelezLl · 2025-01-27T21:50:53Z

Thanks @rtibbles! I have addressed the comments :)

marcellamaki

Approving since @pcenov has given the 👍 with manual QA, and it looks like Richards remaining feedback has all been addressed. Thanks @AlexVelezLl!

AlexVelezLl · 2025-01-29T22:03:27Z

Thanks @marcellamaki!

github-actions bot added APP: Coach Re: Coach App (lessons, quizzes, groups, reports, etc.) DEV: frontend labels Jan 13, 2025

AlexVelezLl commented Jan 13, 2025

View reviewed changes

...ns/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/ManageSelectedResources.vue Show resolved Hide resolved

AlexVelezLl added this to the Kolibri 0.18: Coach Resource Discovery milestone Jan 13, 2025

AlexVelezLl requested review from rtibbles and marcellamaki January 13, 2025 21:18

rtibbles assigned marcellamaki Jan 14, 2025

marcellamaki requested changes Jan 15, 2025

View reviewed changes

marcellamaki requested a review from pcenov January 15, 2025 22:03

AlexVelezLl force-pushed the tide-up-shopping-cart branch from 68422bf to 58f9ff6 Compare January 16, 2025 16:54

AlexVelezLl requested a review from marcellamaki January 22, 2025 13:09

pcenov approved these changes Jan 24, 2025

View reviewed changes

rtibbles reviewed Jan 27, 2025

View reviewed changes

AlexVelezLl added 7 commits January 27, 2025 16:18

Move SelectedResources file

cc50a0a

Integrate shopping cart into the lesson resource selection side panel

e80d354

Implement save lesson resources

d6ab330

Show close confirmation dialog

4a3d32b

Disable buttons while saving

78414b6

Move strings to searchAndFilterStrings and coachStrings

c89b9f8

Disable currently selected resources

12467f4

AlexVelezLl force-pushed the tide-up-shopping-cart branch from 82cf6cf to 12467f4 Compare January 27, 2025 21:26

Enhance naming

85a925d

AlexVelezLl force-pushed the tide-up-shopping-cart branch from 4728873 to 85a925d Compare January 27, 2025 21:46

AlexVelezLl requested a review from rtibbles January 27, 2025 21:50

marcellamaki approved these changes Jan 29, 2025

View reviewed changes

AlexVelezLl merged commit bf19897 into learningequality:develop Jan 29, 2025
37 checks passed

AlexVelezLl deleted the tide-up-shopping-cart branch January 29, 2025 22:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Integrate shopping cart into lesson resource selection side panel #12996

Integrate shopping cart into lesson resource selection side panel #12996

AlexVelezLl commented Jan 13, 2025 •

edited

Loading

github-actions bot commented Jan 13, 2025 •

edited

Loading

marcellamaki left a comment •

edited

Loading

pcenov commented Jan 16, 2025

rtibbles commented Jan 23, 2025

rtibbles commented Jan 23, 2025

AlexVelezLl commented Jan 24, 2025

pcenov left a comment

rtibbles left a comment

rtibbles Jan 27, 2025

AlexVelezLl Jan 27, 2025

rtibbles Jan 27, 2025

AlexVelezLl Jan 27, 2025 •

edited

Loading

rtibbles Jan 27, 2025

AlexVelezLl Jan 27, 2025

AlexVelezLl commented Jan 27, 2025

marcellamaki left a comment

AlexVelezLl commented Jan 29, 2025

Integrate shopping cart into lesson resource selection side panel #12996

Integrate shopping cart into lesson resource selection side panel #12996

Conversation

AlexVelezLl commented Jan 13, 2025 • edited Loading

Summary

References

Reviewer guidance

Implementation notes

github-actions bot commented Jan 13, 2025 • edited Loading

Build Artifacts

marcellamaki left a comment • edited Loading

Choose a reason for hiding this comment

pcenov commented Jan 16, 2025

rtibbles commented Jan 23, 2025

rtibbles commented Jan 23, 2025

AlexVelezLl commented Jan 24, 2025

pcenov left a comment

Choose a reason for hiding this comment

rtibbles left a comment

Choose a reason for hiding this comment

rtibbles Jan 27, 2025

Choose a reason for hiding this comment

AlexVelezLl Jan 27, 2025

Choose a reason for hiding this comment

rtibbles Jan 27, 2025

Choose a reason for hiding this comment

AlexVelezLl Jan 27, 2025 • edited Loading

Choose a reason for hiding this comment

rtibbles Jan 27, 2025

Choose a reason for hiding this comment

AlexVelezLl Jan 27, 2025

Choose a reason for hiding this comment

AlexVelezLl commented Jan 27, 2025

marcellamaki left a comment

Choose a reason for hiding this comment

AlexVelezLl commented Jan 29, 2025

AlexVelezLl commented Jan 13, 2025 •

edited

Loading

github-actions bot commented Jan 13, 2025 •

edited

Loading

marcellamaki left a comment •

edited

Loading

AlexVelezLl Jan 27, 2025 •

edited

Loading