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

[joni]

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:

[Stef_retired]

@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]

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

[jsimon3]

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).

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]

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]

@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]

@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]

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

[corey_mcneill]

@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]

anything is possible if you believe @corey_mcneill.  .   

[jsimon3]

@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();