Help with a dataviewjs query trying to get links working

[n00bzorz89]

What I’m trying to do

so ive gotten the layout and nesting done the way i want it for now, ill do some tweaking to the CSS later.

This is my dashboard ATM i am creating a dynamic dropdown menu and im so so so close to getting it finished, the last thing i need…is working links to the files. They may appear to be links but when clicked they do nothing.

Things I have tried

this is the Dataviewjs query i am currently using to get what ive shown in the picture above.

function formatDate(dateString) {
    let date = new Date(dateString);
    let options = { year: '2-digit', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: true };
    return date.toLocaleString('en-US', options);
}

let folderTree = new Map();

function addToFolderTree(path, content) {
    let parts = path.split('/');
    let currentLevel = folderTree;
    for (let i = 0; i < parts.length; i++) {
        let part = parts[i];
        if (!currentLevel.has(part)) {
            currentLevel.set(part, { folders: new Map(), files: '' });
        }
        if (i === parts.length - 1) {
            currentLevel.get(part).files = content;
        } else {
            currentLevel = currentLevel.get(part).folders;
        }
    }
}

for (let group of dv.pages('"----01. PROJECTS"').groupBy(p => p.file.folder)) {
    let folderName = group.key;
    let rows = group.rows.map(k => `
        <tr>
            <td><a href="${k.file.path}">${k.file.name}</a></td>
            <td>${formatDate(k.file.ctime)}</td>
            <td>${formatDate(k.file.mtime)}</td>
        </tr>
    `).join('');
    
    let tableContent = `
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Created</th>
                    <th>Modified</th>
                </tr>
            </thead>
            <tbody>
                ${rows}
>             </tbody>
        </table>
    `;
    
    addToFolderTree(folderName, tableContent);
}

function renderFolderTree(folderMap, level = 0) {
    let content = '';
    for (let [folder, data] of folderMap.entries()) {
        let subcontent = data.folders.size > 0 ? renderFolderTree(data.folders, level + 1) : '';
        let folderContent = data.files ? data.files : '';
        if (level > 0) {
            content += `<details><summary>${folder}</summary>${subcontent}${folderContent}</details>`;
        } else {
            content += `${subcontent}${folderContent}`;
        }
    }
    return content;
}

dv.header(6, renderFolderTree(folderTree));

please tell me there is a way to do this because i am SO…So close to exactly what i want

oh and last thing…whats the CSS to remove those dang triangles on the dropdowns lol

[n00bzorz89]

Think i got it!

function formatDate(dateString) {
  let date = new Date(dateString);
  let options = { year: "2-digit", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", hour12: true };
  return date.toLocaleString("en-US", options);
}

let folderTree = new Map();

function addToFolderTree(path, content) {
  let parts = path.split("/");
  let currentLevel = folderTree;
  for (let i = 0; i < parts.length; i++) {
    let part = parts[i];
    if (!currentLevel.has(part)) {
      currentLevel.set(part, { folders: new Map(), files: "" });
    }
    if (i === parts.length - 1) {
      currentLevel.get(part).files = content;
    } else {
      currentLevel = currentLevel.get(part).folders;
    }
  }
}

for (let group of dv.pages('"----01. PROJECTS"').groupBy(p => p.file.folder)) {
  let folderName = group.key;
  let rows = group.rows
    .map(
      k => `| [${k.file.name.replace(/\|/g, "\\|")}](/${k.file.path.replace(/ /g, "%20")}) | ${formatDate(k.file.ctime)} | ${formatDate(k.file.mtime)} |`
    )
    .join("\n");

  let tableContent = `
| Name | Created | Modified |
| ---- | ------- | -------- |
${rows}
`;

  addToFolderTree(folderName, tableContent);
}

function renderFolderTree(folderMap, level = 0) {
  let content = "";
  for (let [folder, data] of folderMap.entries()) {
    let subcontent = data.folders.size > 0 ? renderFolderTree(data.folders, level + 1) : "";
    let folderContent = data.files ? data.files : "";
    if (level > 0) {
      content += `### ${folder}\n<details><summary>Click to expand</summary>\n\n${subcontent}${folderContent}\n\n</details>\n`;
    } else {
      content += `${subcontent}${folderContent}`;
    }
  }
  return content;
}

dv.header(6, renderFolderTree(folderTree));

And the links actually work! not just looking like they do in the first query XD.

Now i still just need to get the CSS to remove those dang triangles on the dropdowns lol