[User Settings] Sort/Filter Enrollments by Term in User Profile view

When pulling up a User's profile from the Admin view, it's a pain to figure out which courses they're enrolled in this term, because the list is only sorted alphabetically, not by Term or by which courses have been completed. 

If I could hide the completed enrollments or closed Terms - or at least sort the list so that the most recent Term shows up on top instead of mixed in - it would make things a lot easier when I'm trying to manage which courses my students are enrolled in each Term. 

Here's a screenshot of the view I'm talking about - you can see two different terms (2019-2020 and 2020-2021) mixed up:

canvasideas.jpg

18 Comments
Stef_retired
Instructure Alumni
Instructure Alumni
Status changed to: Open

@joni 

Thanks for sharing this idea. As it moves forward for broader discussion, you might also be interested in subscribing to this related discussion: Improve "Page Views" UI

corey_mcneill
Community Explorer

YES! I would love to see it made easier for admins to know which classes a user is enrolled in. 

jsimon3
Community Participant

So this is something that I did for our institution a while ago. I would have replied earlier but this new UI and model in Canvas Community is poo poo (to put it politely). This can be implemented as is and it will sort(active courses, completed courses, unpublished courses).

jsimon3_0-1599159497703.png

 

 

 

 

function sortCoursesPeopleView() {
  const checkIfNull = async (selector) => {
    while (document.querySelector(selector) === null) {
      await new Promise((resolve) => requestAnimationFrame(resolve));
    }
    return document.querySelector(selector);
  };
  checkIfNull("#user-info-fieldsets").then(() => {


    const ulList = document.querySelector("#courses_list > div > ul");
    let items = ulList.querySelectorAll("li");

    for (
      let i = 0, arr = ["active", "completed", "unpublished"];
      i < arr.length;
      i++
    ) {
      for (let j = 0; j < items.length; j++) {
        if (~(" " + items[j].className + " ").indexOf(" " + arr[i] + " "))
          ulList.appendChild(items[j]);
      }
    }
  });
};
sortCoursesPeopleView();

 

 

 

  

corey_mcneill
Community Explorer

Hey @jsimon3 

I am somewhat a novice when it comes to coding. Is this something that I would include as a part of my customized javascript within Canvas, or as apart of a CSS file?

Thank you!  

jsimon3
Community Participant

@corey_mcneill It's no prob. This would go into your customized javascript file. If one exists just append this to the bottom of it. If one does not exist go to a text editor (notepad, textedit, gedit --depending on what OS you have) and paste the code in. After that save the file as customized.js, or something of that nature just make sure to keep the .js.

joni
Community Explorer

@jsimon3 Wow, this is perfect! And thanks for the tip on editing the custom javascript file - I hadn't messed with the theme editor outside of putting logos on, so it never would have occurred to me to try something like that, but this works like a charm. 

jsimon3
Community Participant

@joni I am glad to hear that it is working. Now your school admins will appreciate you more, hopefully.
(*´∀`*)ゞ

corey_mcneill
Community Explorer

@jsimon3 this is great! Thank you so much! Do you know if it is possible to modify this js to make the courses window larger on the page? So I can see more classes at once.

Thanks! 

jsimon3
Community Participant

jsimon3_0-1599685523438.png

anything is possible if you believe @corey_mcneill.  .   

jsimon3
Community Participant

@joni @corey_mcneill I updated the script so that you can now manually manipulate the height of the enrollments view as well as sort them.

 

 

 

function sortCoursesPeopleView() {
  const checkIfNull = async (selector) => {
    while (document.querySelector(selector) === null) {
      await new Promise((resolve) => requestAnimationFrame(resolve));
    }
    return document.querySelector(selector);
  };
  checkIfNull("#user-info-fieldsets").then(() => {
    const enrollmentsFieldset = document.querySelector("#courses > #content");
    enrollmentsFieldset.setAttribute("style","resize: vertical; overflow: scroll; font-size: 0.8em; height:200px;");
    const subFieldset = document.querySelector("#courses_list > div > ul");
    subFieldset.setAttribute("style", "margin-left: 5px; font-size: 0.9em; margin-bottom: 10px; overflow:auto");

    let ulList = document.querySelector("#courses_list > div > ul");
    let items = ulList.querySelectorAll("li");

    for (
      let i = 0, arr = ["active", "completed", "unpublished"];
      i < arr.length;
      i++
    ) {
      for (let j = 0; j < items.length; j++) {
        if (~(" " + items[j].className + " ").indexOf(" " + arr[i] + " "))
          ulList.appendChild(items[j]);
      }
    }
  });
}sortCoursesPeopleView();