I made a task list with a sort of reverse multi level grouping

[skaramicke]

I have a lot of different types of tasks in my main vault and I wanted a dynamic overview of them that is primarily grouped by the type of task.

Illustration of the problem

Imagine these two notes:

Note 1: Project A.md

Project A

Research

• Topic 1
• Topic 2

To do

• Task 1
• Task 2

Note 2: Project B.md

Project B

Research

• Topic 1
• Topic 2

To do

• Task 1
• Task 2

Overview: Overview.md

Overview

Research

Project A

• Topic 1
• Topic 2

Project B

• Topic 1
• Topic 2

To do

Project A

• Task 1
• Task 2

Project B

• Task 1
• Task 2

What the code does

The code extracts tasks from all pages in the current note's folder and its subfolders. The tasks are first grouped by the section titles, and then by which note they're from.

Each file header links to which ever section of the note the tasks are in.

The Code

The code goes inside what ever dataviewjs keyword you're using, like this:

```dataviewjs
{code}
```

The javascript code

/**
 * Extracts the section name from a task object.
 * @param {Object} task - The task object.
 * @returns {string} - The extracted section name.
 */
const extractSectionName = (task) => {
  let parts = ("" + task.section).match(/\[\[(.+)\|(.+)\]\]/);
  let sectionSegments = parts[2].split(" > ");
  let sectionName = sectionSegments[sectionSegments.length - 1];
  return sectionName;
};

/**
 * Extracts the page name from a task object.
 * @param {Object} task - The task object.
 * @returns {string} - The extracted page name.
 */
const extractPageName = (task) => {
  let parts = ("" + task.section).match(/\[\[(.+)\|(.+)\]\]/);
  return parts[1]
    .split(dv.current().file.folder + "/")
    .join("")
    .split(".md")[0];
};

/**
 * Extracts the section link from a task object.
 * @param {Object} task - The task object.
 * @returns {string} - The extracted section link.
 */
const extractSectionLink = (task) => {
  let parts = ("" + task.section).match(/\[\[(.+)\|(.+)\]\]/);
  return parts[1];
};

/**
 * Generates a task link with the specified text.
 * @param {Object} task - The task object.
 * @param {string} text - The text for the task link.
 * @returns {string} - The generated task link.
 */
const taskLink = (task, text) => {
  let link = extractSectionLink(task);
  return `[[${link}|${text}]]`;
};

/**
 * Prints a page with clickable links based on the previous path.
 * @param {Array} previousPath - The previous path array.
 * @returns {Function} - A function that takes a page object and prints the page.
 */
const printPage = (previousPath) => {
  return (page) => {
    let currentPath = page.key.split("/");
    let matchingCharacters = 0;
    previousPath.forEach((segment, i) => {
      if (previousPath.length >= i + 1 && currentPath[i] == segment) {
        matchingCharacters += segment.length + 3;
      } else {
        return;
      }
    });
    let clickablePart = "";
    let previousPart = "  ";
    if (matchingCharacters == 0) {
      clickablePart = taskLink(page.rows[0], currentPath.join(" > "));
    } else {
      previousPart =
        "  ==" +
        currentPath.join(" > ").substring(0, matchingCharacters - 3) +
        "== ";
      clickablePart = taskLink(
        page.rows[0],
        currentPath.join(" > ").substring(matchingCharacters - 3)
      );
    }
    dv.header(4, previousPart + clickablePart);
    previousPath = currentPath;
    dv.taskList(page.rows, false);
  };
};

/**
 * Prints a section with its pages.
 * @param {Object} section - The section object.
 */
const printSection = (section) => {
  dv.header(2, section.key);
  let previousPath = [];
  section.rows.groupBy(extractPageName).forEach(printPage(previousPath));
};

/**
 * Gets the current folder path.
 * @returns {string} - The current folder path.
 */
const getCurrentFolderPath = () => {
  return dv.current().file.path.split("/").slice(0, -1).join("/");
};

dv.pages('"' + getCurrentFolderPath() + '"')
  .file.tasks.where((t) => !t.fullyCompleted)
  .groupBy(extractSectionName)
  .forEach(printSection);

Reusing the code

Since I wanted to use the same code in multiple places, for instance in multiple levels of my projects folder tree, I put the code in a template file and include it like so:

```dataviewjs
dv.io.load("99 - Meta/templates/tasklist.md").then(code => dv.span(code));
```

That way I can make changes to a single file, instead of 20 or so files.

Visuals

/Projects/Example Overview.md

/Projects/Bike/Bike Overview.md

I'm still figuring out how to make it as readable as possible. I found it easier to find a specific project's tasks when the part of the folder structure that is the same as the previous one is greyed out; but it looks a bit wonky. As the code is written now, I can't know if the first folder has siblings paths anywhere in the tree, so I abandoned the idea of making a nested list of indented headers. Also I couldn't find a good way to indent the dv.tasklist itself anyway.

Please Feedback!

Any suggestions on how to improve it are very welcome!

A lot of this is naively coded. I've been using dataview for a week. If there are simpler ways of doing this that doesn't sacrifice the features I've outlined, I'm all ears.