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.