Skip to content

Design of vue lj casa 5

See also: vue-canvas-learning-journal

List of current development tasks for the Canvas Learning Journal

Current work#

  • cljCreateGroups (see below)
  • cljCreateLearningJournal (see below)
  • groupset overview loading progress doesn't get replaced if the CLJ not open
  • Add a reload/refresh button that gets the Canvas API data afresh

  • cljPromptParticipationDetails

    • try out Vuex data table or alternative vue3-easy-data-table

      Problem with data table (Vuex) is the icons and Canvas' i[class*=icon-]:before rule which is changing the font to a Canvas font to make those icons work. Vuetify add v-icon and v-icon--size-default classes. Remove those classes and it appears to work (manually). Can it be made to work programmatically? - [x] fix up group cell for details and css - [x] test for presence of real avatar url - [x] fix up counting stats for student and staff - [x] test for the topic having an assignment - [ ] And maybe if the student actually has a submission??? no student entries would suggest nothing - [x] link to forum - [ ] testing for an unanswered reply can't really rely just on last post...or needs to make it clear from the naming - [ ] add days since last student entry and unanswered to stats generation for topics

    • numGroups calculation in participation getting too many groups

  • cljTopicEntries

    • make the threaded entries display collaps/expandable in various ways
    • live on the actual replies itself
    • collapse/expand all to reduce space in the table
    • identify where/how to get the entries and replies
      • should be in the `promptsByGroupId[..].stats.view
      • and each one can have a 'replies' property - descending
    • generate the recursive structure of replies

      • entries being shown
      • get user name
      • recurse to show replies
      • change the structure of the table to give more space to the threaded replies
  • Defining group set status as a learning journal

    • document status
    • lmsDataApi - implement a 'learningJournalState' property
    • implement the cljStatusLearningJournal component
    • modify cljEveryone to show that state/status
    • modify cljGroupSet to show the state/status
    • refining the GraphQL query to get all the data

    • Did some initial work but now refining as working on each component

  • Implement initial root components just the infrastructure

  • canvasApiData

    • Clean up canvasApiData to do list
    • Getting discussions data via REST API
    • Getting the contents of discussion topics for a groupset via REST API
    • check/update to get all group set information
    • identify if a group set can be a learning journal
    • get the prompt data - identify when this should 🙋

      e.g. at load time or when/if the group set is displayed (latter seems a good choice) - [ ] Implement methods to be used by other components

cljGroupSet#

  • hide orchestrate and parts of configure when not learning journal
  • Implement cljConfigure
  • Implement cljOrchestrate

cljCreatePrompt#

  • identify the data/API required to create a ???
  • implement a lib/create???.ts file
  • defines a type/class for the data/API
  • Implements the async call to the API to create the learning journal
  • link it to the component
    • use the type to guide creation of the form
    • identify the other data required to scaffold form completion
    • interact with the async call to create and report progress/end result

cljCreateLearningJournal#

  • identify the data/API required to create a ???
  • implement a lib/create???.ts file
  • defines a type/class for the data/API
  • Implements the async call to the API to create the learning journal
  • link it to the component
    • use the type to guide creation of the form
    • identify the other data required to scaffold form completion
    • interact with the async call to create and report progress/end result

cljCreateGroups#

Called from cljGroupSet when there are students who do not have the group

  • provide a button when pressed
  • opens a dialog that allows
  • selection of what groups to create

    • which sections of students to include - drop down with all sections
    • Ability to select individual students to exclude - table showing all students without groups
    • add some blurb about what to do
    • correctly label the search on name and sections
    • add a "Create groups" button
  • and then creates the groups

    • add a function/method to create the groups
      • Identify how to create groups from AEL LJ
      • update the display
      • do a synchronous call to the API to create the groups
    • returning to the original state

cljConfigure#

  • hide cljStatusDiscussions and cljOrchestrate when not learning journal

cljStatusGroupSet#

  • whether/what to add in terms of configuration buttons/links when no groups, no prompts
  • How to display the details of students who are not in a group (used in multiple places)

cljStatusStudentGroups#

  • model method to calculate statistics about entries in prompts

    • groups without student entries: 7 days and ever
    • groups without staff entries: 7 days and ever

cljStatusDiscussions#

  • show table and rows for all groups

    • basic rows with names and columns
    • add status property to each group's discussion topics objects
      • this.groupSets[0].groups[0].prompts[0].stats
    • add status property to each groupset's discussion topics objects based on the relevant group's discussion status property

Trying to figure out how to add prompt stats to discussionTopics

this.groupSets[0].discussionTopics[0].prompts = {} // a dict of points to the prompts....grouped by discussion topic, rather than group

cljOrchestrate#

General#

Operations#

  • How to trap and handle errors
  • code based documentation
  • testing

Visual design#

  • colour schemes
  • look and feel

Documentation site#

  • Identify list of in application document links required
  • Identify components of the documentation site
  • Organise into structure
  • Identify look and feel
  • develop content

main.ts#

  • Ensure App only added for teaching staff
  • Clean up debugging

App.vue#

  • Handle all possibilities retrieving Canvas data via the API

    • Waiting for data to be retrieved Not currently being done
    • Error retrieving data
    • Data successfully retrieved currently working roughly

canvasApiData#

  • Rename functions to be more specific to the Canvas Learning Journal (rather than course)
  • transform the GraphQL object into something a little more useful - see design-of-vue-lj-data-structures
  • Be able to get all the learning journal data (drawn from LearningJournal class from Python version)

    • discussion topics (global)
    • group set topics and messages

      Sort of working
      
    • Course level??

      • teachers
      • staff_list
      • students - i.e. those in the section?? or all students???
    • Group set level

      • members
      • stats

      • prompts - Prompt level (part of each group set) - prompts (array of dicts)

        • prompt_stats
        • assignment info about the assignment, including discussion topic?
        • responses array of dicts for all responses to a prompt

          • topic_id - discussion topic information (specific to the group)
          • group_id
          • prompt_topic - the actual discussion topic object
          • entries full discussion topic
          • entry_stats
      • groups (part of each group set)

  • Add in specific CLJ methods

    • isGroupSetALearningJournal
    • getNumLearningJournals
    • getNoGroupStudents