Skip to content

Design of vue lj casa 1

See also: vue-canvas-learning-journal

Plan and record the design of of the Vue application to implement a CASA.

Adopting the usable-canvas-userscript approach - NOT WORKING#

Current default build develops unique filenames. Also unable to work out easily how to include the Vue app in the user script.

  • main.js determines which Canvas pages to modify by adding a Vue app
  • Implement the Vue apps using standard Vue create-app structure
  • Usage
    • Tamper monkey
    • Have a "tampermonkey" or similar folder that contains the user script that calls the vue app - main.js in the src folder
    • development
      • npm run dev will run a server and update the Vue script
      • the dev user script will require the vue app from the localhost server
    • Installed in Canvas
      • Use whatever is produced by public

vite-plugin-monkey - working#

Will construct project structure for different frameworks. Develops a new devex for developing userscripts. Perhaps that's enough now for testing, including further testing with javascript-rest-api-client testing.

sample-userscript project working on this

  • Design an interface for the Vue app
    • use a call out on the side to reveal the interface?

GraphQL#

Early GraphQL query for course, group sets, groups and group members. Works via post.

query MyQuery {
  course(id: "some id") {
    _id
    name
    courseCode
    createdAt
    groupSetsConnection {
      nodes {
        id
        _id
        name
        memberLimit
        selfSignup
        groupsConnection {
          nodes {
            _id
            name
            updatedAt
            membersCount
            canMessage
            createdAt
            membersConnection {
              nodes {
                _id
                createdAt
                user {
                  _id
                  name
                  email
                  avatarUrl
                }
              }
            }
          }
        }
      }
    }
  }
}

Early design#

main.ts

  • We can be either
    • a group set page - add the LJ component to ???
    • the groups page

App.vue

Implements either the

  • Everyone version - which is just some help about learning journals
  • Group set version - which has the help but also opens up more info

  • Implements a "Learning Journal Status" widget the Everyone tab on the groups page

    • The Everyone tab is always there.
    • The "Learning Journal Status" widget provides

      • summary of any Learning Journals that are current active (if any)
      • links to help, including how to create one
      • perhaps a button to "refresh" the Canvas API data Question: How to do this better?
  • Places a "Learning Journal" widget in each group set tab.

CanvasLearningJournal.vue

- indication of if the current group set is a Learning Journal, or something else 
- some level of help linkage
- a UI feature to open the fuller detail

    - No chance: Either summary of why the current group set can't be a learning journal 
    - Some chance: indicates that this group set can be a learning journal, but there are missing steps. Including advice/functionality on how to complete those steps.
    - Is a learning journal: Provides a summary of the current state, including all overview of contributions.