learningequality
[Remove Vuetify from Studio] Channel collections table (first draft version)
🙂 Looking for an issue? Welcome! This issue is open for contribution. If this is the first time you’re requesting an issue, please:
- Read Contributing guidelines carefully. Pay extra attention to Using generative AI. Pull requests and comments that don’t follow the guidelines won’t be answered.
- Confirm that you’ve read the guidelines in your comment.
Sub-issue of https://github.com/learningequality/studio/issues/5060.
Complexity: Medium
Summary
Remove Vuetify from the collections table in Channels > Collections:
Currently, ChannelSetList built with several Vuetify components is used.
To remove these Vuetify dependencies:
- Create a new component,
StudioCollectionsTable - Examine
ChannelSetListandChannelSetItemand re-implement all features inStudioCollectionsTable - Use
StudioCollectionsTableon this page instead ofChannelSetList
StudioCollectionsTable requirements
- Utilizes
KTablefor table interface - Utilizes
StudioCopyTokenin tokens columnStudioCopyTokendisplays a Token label that shouldn't appear when used in tables - ignore it for now, it will be addressed in a separate task
- Uses same user experience patterns as the table in our other platform Kolibri in Facility > Users (table code):
- Instead of Options button, has the 'three dots' button dropdown
- When there is not enough space on the screen, first and last columns become sticky (see Table with sticky columns in
KTabledocs) - Utilizes
KPageContaineras table container. On all screen widths, container width is the same as in Kolibri, with maximum1440px.
Note: Due to these requirements, the new look and experience will notably differ from the current version. This is intended - do not try to override KTable to resemble the original (the goal is a first draft version of the refactored page that a core team member will then take over and complete in cooperation with our designers).
Do not modify ChannelSetList or ChannelSetItem.
How to get there
- Login as
[email protected]with passworda - Go to Channels > Collections
Guidance
- How to run Kolibri
- Find detailed guidance with many code examples in KDS documentation
- Read the project for more useful references
Out of Scope
- Do not refactor any other areas of the codebase
- Do not modify
ChannelSetListorChannelSetItem
Expected UI/UX changes
Many. Details to be clarified later. See the Note in the Summary section.
Acceptance criteria
These are general acceptance criteria for the project. For each sub-issue, consider which are relevant.
General
- [ ] The specification above is followed.
- [ ] Except for "Expected UI/UX changes," there are no functional or visual differences in user experience.
- [ ] There are no
::v-deepor/deep/selectors. - [ ] All user interactions are manually tested with no regressions.
- [ ] Pull request includes screenshots.
a11y and i18n
See the project's "Guidance" for useful references.
- [ ] Implementation meets a11y standards
- [ ] All components are LTR and RTL compliant (preview with
pnpm run devserversince:hotdoesn't render RTL properly) - [ ] User-facing strings are translated (except in Administration)
- [ ] The
notranslateclass been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. user-generated text) - [ ] Mobile experience is reasonable
Unit tests
- [ ] If there is a unit test suite already, it is meaningfully updated (even if tests don't fail)
- [ ] If there is no unit test suite, a new one is created. Do not use obsolete
@vue/test-utilsapproach. Instead, use@testing-library/vue(Vue Testing Library).
Following up on your request for a more complex issue @Prashant-thakur77 - if you'd be interested in this one, let me know.
Thank you @Prashant-thakur77. I also mentioned you in another issue so if you will be interested in the other too, just address them slowly step by step - there's enough time.
Ah your comment disappeared @Prashant-thakur77 - not sure if that was intentional. Let me know ;)
@MisRob You can go ahead and assign me this issue .Happy to work on it :)
Thank you @Prashant-thakur77. I also mentioned you in another issue so if you will be interested in the other too, just address them slowly step by step - there's enough time.
Thanks, @MisRob! I’d love to work on that issue too. I’m just not sure if it’s allowed to work on two medium-level issues simultaneously, but if it’s fine, I’d be glad to help with that as well.
In this case, yes @Prashant-thakur77 - you could start with this one - we won't likely merge it right away because I will need some more time for internal feedback than usual, and so as I'm dealing with it, you could have a look at the other one. That said - ultimately choose the order of work and kinds of issues that make sense in regard to your motivation. We make exceptions when it makes sense - if invited by a core team member, no worries :)
Got it, thanks for clarifying! I’ll start with this one and then check out the other issue as well.
@MisRob Just did a little work , LINK: https://github.com/user-attachments/assets/615ef18f-892d-4ba7-b0a0-4cc7f3630cf7
Showed the StickyColumn USED on first and last column and Responsiveness of the page . https://github.com/user-attachments/assets/579f9b96-ac17-476c-9052-d7e500a726bc
Utilizes KPageContainer as table container. On all screen widths, container width is the same as in Kolibri, with maximum 1440px.
HLO @MisRob can you elaborate a little on this part.what is the aim here and on all screen width scenario.Do i need to use useKResponsiveWindow here?
Hi @Prashant-thakur77, I suspect the page will need some design thought for small screen sizes, given it says:
the goal is a first draft version of the refactored page that a core team member will then take over and complete in cooperation with our designers
I think it should be appropriate to simply have a max-width of the mentioned size and a width: 100%. That is similar to what I find on Kolibri. The use of useKResponsiveWindow should be unnecessary at this time.
