Introduce copy class functionality #13517

AllanOXDi · 2025-06-26T20:39:01Z

Summary

This pull request introduces the ability to make copy of classes, along with improvements to class management actions, on the ManageClassPage.

References

Closes #13443

Reviewer guidance

Navigate to class in the table and click the vertical ellipsis icon in the final column.
Verify the dropdown menu contains "Copy Class", "Rename Class", and "Delete" options.
Test "Rename Class": 1. Select "Rename Class". 2. Verify the KModal appears with a textbox. 3. Enter a new name and confirm the rename.
Test "Delete": 1. Select "Delete". 2. Verify the ClassDeleteModal appears.
Test "Copy Class": 1. Select "Copy Class". 2. Verify the SidePanelModal appears.
Check that the class name textbox is pre-filled with "Copy of {original class name}".
Verify the coach dropdown lists available coaches and pre-selects existing ones. and Test selecting and deselecting coaches
Click the "Copy Class" button within the side panel. and confirm the if the copy of the class appears in the class table.

github-actions · 2025-06-26T21:15:01Z

Build Artifacts

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

nucleogenesis

I've added a few notes here and found a few bugs in testing. Please focus on these first before the following note.

One additional issue I ran into is that the KDropdown is behaving oddly. When I open the menu and click copy, rename, delete - they all work.

But when using the keyboard, only the delete option does anything - the other two just close the dropdown but don't trigger their expected behaviour.

I did some console log debugging and I can tell you that the code you have in your handleOptionSelection handler is running properly where a console.log inside of your if(selection.value === Modals.COPY_CLASS) blocks will run based on which was clicked... just for some reason it seems the value is not being sent.

For example - I have this: console.log(selection, row) at the top of the function and when I click or use the keyboard, the same value comes through the console.

I'm not sure what to do here so once the comments I left are resolved, try to give this a look and we can chat about it on Slack as needed.

nucleogenesis · 2025-07-07T16:10:14Z

kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue

      />
+
+      <ClassRenameModal
+        v-if="openRenameModal"


The cancel button on the modal doesn't work for some reason. I see that closeModal dispatches an action classManagement/displayModal.

It might be worth considering just tracking which modal is visible locally within the component here rather than leaning on the Vuex action function.

nucleogenesis · 2025-07-07T16:13:00Z

kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue

+
+        classCoachesIds.value = classDetails.value.coaches
+          .map(coach => coach.id)
+          .filter(id => id !== undefined);


Did you find coaches that had an undefined ID value?

nucleogenesis · 2025-07-07T17:25:49Z

kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue

+        <template #default>
+          <div>
+            <KTextbox
+              :value="copyOfClass$({ class: classDetails.name })"


The value here must be something reactive like a ref because this way the title of the class is always going to be "Copy of Class" even when I type something else into the textbox here.

I suggest something like const copiedClassName = ref(null); - then where you open the modal, set it's value to the copyOfClass$ string w/ the class-to-be-copied's name.

Then, when the modal closes, be sure to set the copiedClassName.value = null again so that the value isn't present the next time you open the side panel.

Noting that copying the same class twice will replicate the error I got for this

kolibri/plugins/coach/assets/src/views/quizzes/QuizSummaryPage/ManageExamModals.vue

LianaHarris360

If I'm not mistaken, I believe that all of the coaches in the facility should be listed in the side panel, with only the coaches assigned to the original class being pre-selected.

kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue

nucleogenesis

The notes I added here are blocking - but one non-blocking thought is that we should clarify with Tomiwa about if the coaches should be pre-selected upon opening the panel or if they should be fully deselected.

nucleogenesis · 2025-07-08T19:49:50Z

kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue

+        classCoachesIds.value = classDetails.value.coaches.map(coach => coach.id);
+        classCoaches.value = facilityUsers.value


Why does classCoaches.value get assigned by way of the facilityUsers var but the classCoachesIds is set using classDetails?

If classCoachesIds is representing the value of "what coaches are selected" and the classCoaches is representing the list of coach objects passed as options to SelectableList it seems like they should be derived from the same source.

When I tested this, the selectable list was empty for all classes despite them having coaches in them.

I made one change: classCoaches.value = classDeatils.value.coaches.map() (no need for the filter since we're using class details, but I kept the map() call. This fixed the missing coaches list.

Why does classCoaches.value get assigned by way of the facilityUsers var but the classCoachesIds is set using classDetails?

I was trying to list all coaches in the facility and only pre-select the coaches that belong to the selected class as @LianaHarris360 had suggested.

😅 that makes sense - thanks for clarifying

nucleogenesis · 2025-07-08T20:18:09Z

kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue

+      isClassNameInvalid() {
+        return this.tableRows.some(row => row[0] === this.copiedClassName);
+      },


This is flashing the message to the user before closing the side panel when the copying is successful.

This condition will be evaluated before the completion of handleSubmitClassCopy because once this line is evaluated:

this.$store.commit('classManagement/SET_STATE', { classes: updatedClasses });

That's where the tableRows is updated. You could maybe try closing the side panel before calling that commit in the function to mitigate this issue.

@AllanOXDi I'm still seeing this flash.

Perhaps a flag like this.submitting or this.loading could be added and set to true until the very end of the handleSubmitClassCopy function where you set it back.

Then in the isClassNameInvalid add a && !this.submitting to the end of it.

nucleogenesis

I added a note about console errors I'm seeing and identified the cause of why I see no coaches on my end.

I have 1000 user and like 20 of them are coaches. When you're getting facilityUsers from the useUserManagement composable you're only getting the first page of users which, in my case, results in there being no coaches shown.

I suggest rather than calling useUserManagement() that you could basically just use FacilityUser.fetchCollection sort of how it is in that composable but with the params like kind: UserKinds.COACH so that the query only fetches the kinds of users we need here.

Something that isn't in scope for this PR - but we really should consider - is making the handleSelection handler here leverage useUserManagement's coupling to the route query params so that the user's text input searches by way of the API (w/ the kind=UserKinds.COACH in the params).

I don't think a facility will be likely to have 100+ coaches but we should certainly be prepared for it. (cc @marcellamaki @radinamatic)

nucleogenesis · 2025-07-09T20:30:14Z

kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue

+
+      <ClassRenameModal
+        v-show="openRenameModal"
+        :classname="classDetails.name"


Seems to be related to here (nearby?)

I don't think a facility will be likely to have 100+ coaches but we should certainly be prepared for it

Yes, it seems unlikely, but also worth being prepared for/refactoring for in follow up.

route query params so that the user's text input searches by way of the API (w/ the kind=UserKinds.COACH in the params)

So a backend match for keyword (well, name filtering) search?

Yeah that's kind what I was thinking but coming back to it I'm less confident that'd work so well as we'd need to re-call the composable each time the search changed.

nucleogenesis

Added a couple comments - the blocker is the flashing error message. Let me know if my suggestion is unclear there and we can sort it out together.

nucleogenesis · 2025-07-10T18:08:05Z

kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue

+
+      const fetchFacilityUsers = async () => {
+        const resp = await FacilityUserResource.fetchCollection({
+          getParams: pickBy({


pickBy here isn't doing anything so we can remove it

For more context - pickBy is used to conditionally take key-value pairs from an object based on a callback function's boolean return value. Since your using all of the values in the object anyway, no need to pickBy anything.

For example:

const obj = { a: 1, b: 2, c: 3 }; const odds = pickBy(obj, val => val % 2 !== 0); // { a: 1, c: 3 } const evens = pickBy(obj, val => val % 2 === 0); // { b: 2 }

nucleogenesis · 2025-07-10T18:12:14Z

kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue

+      isClassNameInvalid() {
+        return this.tableRows.some(row => row[0] === this.copiedClassName);
+      },


@AllanOXDi I'm still seeing this flash.

Perhaps a flag like this.submitting or this.loading could be added and set to true until the very end of the handleSubmitClassCopy function where you set it back.

Then in the isClassNameInvalid add a && !this.submitting to the end of it.

AlexVelezLl

Hi @AllanOXDi! Just took a look, and noted couple of things :)

AlexVelezLl · 2025-07-10T18:18:01Z

kolibri/plugins/facility/assets/src/views/ManageClassPage/SelectableList.vue

          :label="option.label"
-        />
+        >
+          <template v-if="displayUserRole">


(Blocking) We shouldn't be hard-coding this in the SelectableList component. The SelectableList component is meant to be a generic component that renders and accessible selectable searchable list. It shouldn't expose a displayUserRole prop and hardcoded coach role tag here.

What we can do instead to have more flexibility of how we render the options is to expose an optionLabel slot that takes the option as parameter. Such as:

<slot name="optionLabel" :option="option"></slot>

and then in the parent component we can compute the label we have with the userTypeDisplay and all the styles we need,without making this general-purpose component specific to a given context.

kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue

AlexVelezLl · 2025-07-10T18:33:42Z

kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue

+        @cancel="closeModal"
+        @success="handleRenameSuccess()"
+      />
+      <SidePanelModal


I think we should move this to be its own component. Its bloating too much this ManageClassPage component.

kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue

AlexVelezLl · 2025-07-10T18:40:08Z

kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue

+        }
+      };
+
+      fetchFacilityUsers();


Just a heads up that we are loading these coaches on every ManageClassPage render, even if we dont want to copy the class. Moving the class copy to its own component will prevent this.

kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue

nucleogenesis · 2025-07-11T18:51:33Z

kolibri/plugins/facility/assets/src/views/ManageClassPage/CopyClassSidePanel.vue

+            type="text"
+            :label="classTitleLabel$()"
+            :autofocus="true"
+            :maxlength="120"


This should be 100 to match the API (I tried making a max-length class name and got an API error)

Ooops! Taken care of

nucleogenesis

Tested out and everything works great. Thanks for extracting that side panel out - it really makes the index file much cleaner (thanks for suggesting @AlexVelezLl !).

github-actions bot added SIZE: medium APP: Facility Re: Facility App (user/class management, facility settings, csv import/export, etc.) DEV: frontend and removed SIZE: medium labels Jun 26, 2025

AllanOXDi marked this pull request as ready for review June 27, 2025 01:03

AllanOXDi marked this pull request as draft June 30, 2025 18:24

AllanOXDi added the work-in-progress Not ready for review label Jun 30, 2025

rtibbles assigned LianaHarris360 Jul 1, 2025

github-actions bot added APP: Coach Re: Coach App (lessons, quizzes, groups, reports, etc.) SIZE: medium labels Jul 3, 2025

AllanOXDi force-pushed the introduce-copy-class-functionality branch from 78aa70f to b6ceced Compare July 7, 2025 14:30

AllanOXDi marked this pull request as ready for review July 7, 2025 14:31

AllanOXDi requested review from LianaHarris360 and nucleogenesis July 7, 2025 14:31

nucleogenesis requested changes Jul 7, 2025

View reviewed changes

LianaHarris360 reviewed Jul 7, 2025

View reviewed changes

kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue Outdated Show resolved Hide resolved

nucleogenesis added this to the Kolibri 0.19: Bulk User Management milestone Jul 8, 2025

nucleogenesis requested changes Jul 8, 2025

View reviewed changes

AllanOXDi requested review from LianaHarris360 and nucleogenesis July 9, 2025 18:30

nucleogenesis requested changes Jul 9, 2025

View reviewed changes

nucleogenesis requested changes Jul 10, 2025

View reviewed changes

AlexVelezLl reviewed Jul 10, 2025

View reviewed changes

AllanOXDi requested review from AlexVelezLl and nucleogenesis July 11, 2025 16:00

AllanOXDi added 4 commits July 11, 2025 21:50

modals for each option selection pops up

06115a0

adjusts the width of the ktexbox

c212139

aligns the bottom navigation buttons

bc8e645

cancel button dismisses the modal

d17116d

AllanOXDi added 22 commits July 11, 2025 21:50

fix the auto select

b4e5080

can select and deselect a coach

9baab94

adds snackbar on clicking copy a class button

eb7a19d

can copy class with coaches

334240c

dismisses rename modal

60bb85d

adds user role label in the selectablelist

e063155

adds user role label in the selectablelist

cad057a

fix: update classes state after coach assignment in class duplication

6f9d91e

removes '' on the copied class name

80fa055

fixes misaligned table header

bf5a7ab

auto fills the new name of a class with copy of prefix word

7f99e6f

uses reactive copy class element

7072855

removes space

0b50109

prevents submitting of a form incase classname already exist

27d9746

modals open on keyboard navigation

85a46c3

migitates the flashing snackbar

0c37b51

reverts changes

8d09acc

fetches coaches directly from facilityUserResource api

99baadc

user label passed as a slot

d2398bc

adds arial-label to selectablelist

274a069

class refresh on renaming

e876f15

transfer copy sidepanel into its own component

0f8d1d0

nucleogenesis reviewed Jul 11, 2025

View reviewed changes

AllanOXDi added 2 commits July 11, 2025 21:55

changes the maxlength to 100

5c76270

fix strings

0773cb5

AllanOXDi force-pushed the introduce-copy-class-functionality branch from 2de9496 to 0773cb5 Compare July 11, 2025 18:58

nucleogenesis approved these changes Jul 11, 2025

View reviewed changes

nucleogenesis merged commit c570ad4 into learningequality:develop Jul 11, 2025
51 checks passed

		classCoachesIds.value = classDetails.value.coaches.map(coach => coach.id);
		classCoaches.value = facilityUsers.value

Introduce copy class functionality #13517

Introduce copy class functionality #13517

Uh oh!

Conversation

AllanOXDi commented Jun 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

References

Reviewer guidance

Uh oh!

github-actions bot commented Jun 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nucleogenesis left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

LianaHarris360 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nucleogenesis left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nucleogenesis left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nucleogenesis left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AlexVelezLl left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

AlexVelezLl Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

AllanOXDi commented Jun 26, 2025 •

edited

Loading

github-actions bot commented Jun 26, 2025 •

edited

Loading

nucleogenesis left a comment •

edited

Loading

AlexVelezLl Jul 10, 2025 •

edited

Loading