Design of vue lj casa 3
See also: vue-canvas-learning-journal
Adopted approach#
Development#
Aspect | Approach |
---|---|
Javascript framework | Vue |
UI framework | Quasar using SVG icons |
Broad design#
The Vue app will be implemented as a user script which modifies the Canvas "people" and "groups" pages.
Inline help links implemented with tooltips linking to a mkdocs site hosted on the github repo.
Tasks#
- Adopt/adapt the Collections tooltip/help approach
- Implement the root components for the people and group set pages
- Implement the reporting mechanism for the group set pages
Tooltip/help approach#
Install and implement a basic mkdocs docs site.
Collections used a Object defined in each component of the structure
const HELP = {
"<tooltipname>" : {
tooltip: "tooltip html",
url: "url to the help page"
}
}
Vue cheatsheet for rendering data into html is very useful
Problem Quasar tooltip component won't allow HTML as a tooltip - at least not from a variable. For now, sticking with just text.
Solution Ended up going with Shoelace as the icons were also problematic in Quasar.
People page root component#
Early implementation
Group set page root component#
Early implementation
Todo
- "waiting" spinner for course data
- check on group set id prop matching an actual group set id
- implement functions to check if a group set is configured as a learning journal
- implement simple reporting
- implement creation functionality