Svelte rewrite - v1

[djplaner]

Implementation

Status - working on deleting a collection. Most of it appears to be working, but there's something wrong with the reactive stuff. It apepars to be trying to access a representation for a collection that no longer exists

Longer term tasks

Support

• [x] #162
• [x] #163
• [x] Implement internationalisation
• [ ] IMPORTANT slugify correct (not yet complete) or do a search for pages (e.g. include page, output page etc) - currently limited slugify is not exhaustive
• [x] Implement a live version of the userscript
• [x] Update docs to represent new look and capabilities

CanvasCollections

• [x] #173
• [x] #158
• [x] #156
• [x] check old collections config page
• [x] #196
• [x] Add CanvasCollectionsConfiguration element on arrow click
• [x] #154
• [x] Implement/test course copy
  • [x] double check image handling between courses

UniversityDateCalendar

• [ ] Implement holistic UDC (handle parsing course object)
• [ ] Implement as stand along singleton

CanvasCollectionsConfiguration

• [x] #157

CollectionRepresentation

• [ ] Generic way of handling dates tied to UniversityDateCalendar
• [x] #159
• [x] #164
• [x] Fully implement svelte collections only
• [x] Implement "include page"

ModuleConfiguration

• [x] #155
• [x] hide/show module configuration
• [x] #161

Cards

• [ ] Add progress check representation
• [ ] Add items drop down
• [ ] Refine full claytons

Assessment table

• [ ] Refine full claytons
• [x] #181

Table evolution

• [ ] #175
• [ ] Implement a "theme table" rep with dynamic headers/content
  • start with one column (module name) and the ability to add
  • each column as a column header and a corresponding variable name (stored in module configuration)
  • Some free-text variable names should be able to be edited within the table (edit mode)

Longer term

Canvas collections

• handle errors in getting module information - what's the fall back if no module information??

[djplaner]

Documentation

dev

Based on this repo lpshanley/tampermonkey-svelte

[djplaner]

Working on Controller

Aim being to figure out what the controller does and how it should be done in Svelte

Current Process

• [ ] injectShoelace
• [x] setContext
  • set the modulesPage, homeModulesPage, courseId and editMode parameters
• [ ] new cc_ConfigurationStore
  • does the collections oriented data gathering
• if modules || homeModules page
  • [x] set the CsrfToken
    • set the csrf component
  • [x] requestCourseObject
    • does the canvas related data gathering

Plan

setContent

Goes into the main.ts - called before the App.

If it's not a modulesPage or a course, don't add the app.

If it is pass the courseId and editMode to the component

component creation

main.ts passes context as props to <CanvasCollections courseId= editMode=>

• on load the component calls the canvas and collections configuration information
• initial content of CanvasCollections is displayed
  • if editMode but not yet loaded other stuff just show the version number and help link
  • on load add the unpublished and config switch and save as required
• on completion of the data set up
  • will add the other components to the DOM

configurationStore

After some initial configuration the process is

• getConfiguration (called externally)
• requestConfigurePageContents
  • if not gotten a page - initialiseConfigPage
  • if gotten a page - parseNewPageBody

initialiseConfigPage

• Do some local set up
• initialiseModuleConfig
• createConfigPage
• mergeModuleDetails

parseNewPageBody

• parse the JSON
• checkConvertOldConfiguration
• add collections_order array
• decode HTML entities and other decoding

[djplaner]

Planning out representations

div#canvas-collections-representation

• main container for representations
• added as first child to div#context-modules
• Will contain the CanvasCollectionsRepresentation component

Current structure is

• div.cc-nav
• div.cc-message
• div#cc-include-page
• div#cc-card-interface

CanvasCollectionsRepresentation

• access the store with collections information
• will need some other contextual information (last viewed collection, current collection)

<CanvasCollectionsRepresentation>
  <CollectionsNavigation>
  </CollectionsNavigation>
  <div.cc-message>{message for current collections}</div>
  <CollectionRepresentation>
  </CollectionRepresentation>
</CanvasCollectionsRepresentation>

To do

• [x] get the div adding when collections is on
• [x] get Svelte component added
• [x] Get it showing some collections data
• [x] Refine it

[djplaner]

Reactive representations

problem

With multiple collections with Cards representation, changing between them will change the name of the collection, but will NOT modify the representation of the cards - still showing the same cards as initially loaded.

ponderings

Should be the same if multiple assessment tables

Check this by adding multiples - CONFIRMED

Suggesting the problem is that the {collection} used for the name of the collection is reactive. What's not reactive is the code that's generating the HTML for the tables or cards

Solution

Make the calculation of moduleIds reactive by adding $: