ToDo Widget Help

[adoreparler]

I've been digging through the API docs along with other widget code to try and put this together.

I want a widget to track and update my todo list.
I am using this plugin #2946

I created this widget

let TPL = `
<div>
    <style>
    .todoListWidget {
        border: 1px solid var(--main-border-color);
        min-height:6em;
        resize: vertical;
        width: 100%;
        padding:10px;
        font-family:var(--font-code); 
    }
    .sectionTitle {
        font-size: 24px;
        font-weight: bold;
        margin-top: 10px;
    }
    </style>
    <span class="sectionTitle text-default">In Progress</span>
    <table class="table table-hover table-sm">
        <thead>
            <tr>
                <th></th>
                <th>Title</th>
                <th>Tags</th>
            </tr>
        </thead>
        <tbody id="tbodyInProgress">    
        </tbody>
    </table>
    
    <span class="sectionTitle text-info">Backlog</span>
    <table class="table table-hover table-sm">
    <thead>
            <tr>
                <th></th>
                <th>Title</th>
                <th>Tags</th>
            </tr>
        </thead>
        <tbody id="tbodyBacklog">
        </tbody>
    </table>
    
    <span class="sectionTitle text-success">Done</span>
    <table class="table table-hover table-sm">
    <thead>
            <tr>
                <th></th>
                <th>Title</th>
                <th>Tags</th>
            </tr>
        </thead>
        <tbody id="tbodyDone">
        </tbody>
    </table>
    
</div>
`

class TodoNote {
    // TodoNote Template

    title = "";
    status = "";
    tags = [];
    notePath = "";
}

class TodoListWidget extends api.RightPanelWidget {
    
    todosNotes = [];
    
    get widgetTitle() { 
        return "To-Do's"
    }
    
    get parentWidget() {
        return "right-pane"
    }
    
    async doRenderBody() {
       this.getTodos();
    }
    
    async getTodos() {
        
        const todoNotesQuery = await api.searchForNotes("#todoItem AND note.parents.parents.title = 'To-Do-Test' AND note.parents.title != 'Archive'");
        this.todoNotes = []; // clear out array
        
        for ( let i = 0; i < todoNotesQuery.length; i++ ) {
            const note = todoNotesQuery[i];
            const todoNote = new TodoNote();
            
            todoNote.title = note.title;
            
            todoNote.notePath = note.getBestNotePathString();
            
            const attributes = note.getAttributes("relation", "tag");
  
            for ( let n = 0; n < attributes.length; n++) {
                const targetNote = await attributes[n].getTargetNote();
                todoNote.tags.push({
                    title: targetNote.title,
                    iconClass: targetNote.getLabelValue("iconClass"),
                    background: targetNote.getLabelValue("badgeBackground"),
                    color: targetNote.getLabelValue("badgeColor")
                });
            }
            
            todoNote.status = note.getParentNotes()[0].title;
            
            this.todoNotes.push(todoNote);   
            
        }
        
    }
    
    async renderWidget() {
        
        let $template = $(TPL)
        
        for ( let tn = 0; tn < this.todoNotes.length; tn++ ) {
            
            const todoNote = this.todoNotes[tn];
        
            const $tr = $("<tr>");
            
            let iconClass = "";
            let buttonName = "";
            
            switch (todoNote.status) {
                case "In Progress":
                    iconClass = "bx-check-circle";
                    buttonName = "sendToDoneButton";
                    break;
                case "Done":
                    iconClass = "bx-archive-in";
                    buttonName = "sendToArchive";
                    break;
                case "Backlog":
                    iconClass = "bx-send";
                    buttonName = "sendToInProgressButton";
                    break;
            }
            
            $tr.append('<td><span id="'+buttonName+'" class="button-widget icon-action bx '+iconClass+'" title="Send to '+todoNote.status+'" /></td>');
     
            $tr.append("<td><strong><a href='#"+todoNote.notePath+"' data-action='note' data-note-path='"+todoNote.notePath+"' class='no-tooltip-preview'>"+todoNote.title+"</a></strong></td>");
        
            const $tagTD = $("<td>");
            todoNote.tags?.forEach((tag) => {
                $tagTD.append(
                    $("<span />").addClass("badge badge-secondary")
                    .text(tag.title)
                    .css("background", tag.background)
                    .css("color", tag.color)
                    .prepend($("<i />").addClass(tag.iconClass))
                );
            });
            
            $tr.append($tagTD);
            
            switch (todoNote.status) {
                case "In Progress":
                    $template.find('#tbodyInProgress').append($tr);
                    break;
                case "Backlog":
                    $template.find('#tbodyBacklog').append($tr);
                    break;
                case "Done":
                    $template.find('#tbodyDone').append($tr);
                    break;
            }
            
        }
        
        this.$body.html($template);
    }
    
    async refreshWithNote(note) {
        this.refreshWidget();
    }
    
    async refreshWidget() {
        await this.getTodos();
        await this.renderWidget();
    }
    
}

module.exports = new TodoListWidget()

What I am looking for is the following help:

• Clean up anything that could be more efficiently written
• Randomly if I use the refresh browser button it duplicates all of the items. But I can't figure out what causes it.
• Add a button to the left menu panel button area to open and close(hide) this widget.
• Write code for the buttons so that, the in progress button moves the note to done, the backlog button moves the note to in progress, the done button moves it to archive.

I'll keep playing with it but would not mind help/opinions.

[sottey]

Nice job! Couple thoughts:

1. It might be simpler to use getNotesByLabel() from the backend API, as it would allow users to put their todo's anywhere they want. Of course, you ould need, then another way to track status.
2. An esthetic thing, a lot of note trackers apply the strikethrough font attribute to complete items
3. Drag and drop is not super straight forward but can be done. My scoTask add in for Trilium allows dragging from one section to another.
4. Glad some other people are looking into this. I haven;t had enough time to complete mine. I hope to at some point this winter for release. for now I just use it myself:

Nice job!

[adoreparler]

Thanks for the feedback :)
Any chance of sharing your code :) It might help be write the button code to move stuff from one note to another. Also would not mind seeing the drag and drop

[sottey]

Hey there, here are the functions I have to implement the drag and drop. I will try to get the entire source code ready for release soon.

function configureDragAndDrop() {   
    let groupList = document.querySelectorAll(".taskGroup");  

    let sectionOneGroup = document.getElementById("sectionOneTasks");
    let sectionTwoGroup = document.getElementById("sectionTwoTasks");
    let sectionThreeGroup = document.getElementById("sectionThreeTasks");

    // Dragover and dragstart handlers
    groupList.forEach((item) => {
        item.addEventListener("dragover", dragoverHandler)
        item.addEventListener("dragstart", dragstartHandler)
    });    

    sectionOneGroup.addEventListener("drop", () => {addDropHandler(sectionOneTaskHolder, moveToSectionThree, false)});
    sectionTwoGroup.addEventListener("drop", () => {addDropHandler(sectionTwoTaskHolder, moveToSectionThree, false)});
    sectionThreeGroup.addEventListener("drop", () => {addDropHandler(sectionThreeTaskHolder, moveToSectionOne, true)});
}

function dragoverHandler(event) {
    event.preventDefault();
}

function dragstartHandler(event) {
    dragged = event.target.parentNode;
}

function addDropHandler(taskHolder, eventMethod, isChecked) {
    event.preventDefault();
    console.log(taskHolder,eventMethod);

    var taskItem = dragged;
    var dueDate = taskItem.querySelector("input[type=date]");

    itemText = taskItem.innerText;

    var newItem = createNewTaskItem(itemText, isChecked, dueDate.value);  
    if (taskHolder.id == "sectionThreeItemList" ) {
        removeLabelColor(newItem);           
    }

    taskHolder.appendChild(newItem);
    taskItem.parentNode.removeChild(taskItem);

    bindTaskEvents(newItem, eventMethod);
    updateNoneLabels();
    save();
}

[adoreparler]

Alright, I think I got the buttons working, I still need to do a little code cleanup and still need to git rid of the dupe issue (when I f5 refresh the screen they get duped, not sure if this is a react thing where it runs twice or what, ill look into it eventually)
I have some more functionality I want to add, but will update this thread when they are ready.

Also still interested in any help cleaning the code up to best practices for Trilium.

Here is the new code for now

let TPL = `
<div>
    <style>
    .todoListWidget {
        border: 1px solid var(--main-border-color);
        min-height:6em;
        resize: vertical;
        width: 100%;
        padding:10px;
        font-family:var(--font-code); 
    }
    .sectionTitle {
        font-size: 24px;
        font-weight: bold;
        margin-top: 10px;
    }
    </style>
    <span class="sectionTitle text-default">In Progress</span>
    <table class="table table-hover table-sm">
        <thead>
            <tr>
                <th></th>
                <th>Title</th>
                <th>Tags</th>
            </tr>
        </thead>
        <tbody id="tbodyInProgress">    
        </tbody>
    </table>
    
    <span class="sectionTitle text-info">Backlog</span>
    <table class="table table-hover table-sm">
    <thead>
            <tr>
                <th></th>
                <th>Title</th>
                <th>Tags</th>
            </tr>
        </thead>
        <tbody id="tbodyBacklog">
        </tbody>
    </table>
    
    <span class="sectionTitle text-success">Done</span>
    <table class="table table-hover table-sm">
    <thead>
            <tr>
                <th></th>
                <th>Title</th>
                <th>Tags</th>
            </tr>
        </thead>
        <tbody id="tbodyDone">
        </tbody>
    </table>
    
</div>
`

class TodoNote {
    // TodoNote Template

    title = "";
    status = "";
    tags = [];
    notePath = "";
    noteId = "";
}

class TodoListWidget extends api.RightPanelWidget {
    
    todosNotes = [];
    
    get widgetTitle() { 
        return "To-Do's"
    }
    
    get parentWidget() {
        return "right-pane"
    }
    
    async doRenderBody() {
       this.getTodos();
       
    }
    
    async getTodos() {
        
        const todoNotesQuery = await api.searchForNotes("#todoItem AND note.parents.parents.title = 'To-Do' AND note.parents.title != 'Archive'");
        this.todoNotes = []; // clear out array
        
        for ( let i = 0; i < todoNotesQuery.length; i++ ) {
            const note = todoNotesQuery[i];
            const todoNote = new TodoNote();
            
            todoNote.title = note.title;
            todoNote.noteId = note.noteId;
            
            todoNote.notePath = note.getBestNotePathString();
            
            const attributes = note.getAttributes("relation", "tag");
  
            for ( let n = 0; n < attributes.length; n++) {
                const targetNote = await attributes[n].getTargetNote();
                todoNote.tags.push({
                    title: targetNote.title,
                    iconClass: targetNote.getLabelValue("iconClass"),
                    background: targetNote.getLabelValue("badgeBackground"),
                    color: targetNote.getLabelValue("badgeColor")
                });
            }
            
            todoNote.status = note.getParentNotes()[0].title;
            
            this.todoNotes.push(todoNote);   
            
        }
        
    }
    
    async renderWidget() {
        
        let $template = $(TPL)
        
        for ( let tn = 0; tn < this.todoNotes.length; tn++ ) {
            
            const todoNote = this.todoNotes[tn];
        
            const $tr = $("<tr>");
            
            let iconClass = "";
            let clickNoteStatus = "";
            
            switch (todoNote.status) {
                case "In Progress":
                    iconClass = "bx-check-circle";
                    clickNoteStatus = "Done";
                    break;
                case "Done":
                    iconClass = "bx-archive-in";
                    clickNoteStatus = "Archive";
                    break;
                case "Backlog":
                    iconClass = "bx-send";
                    clickNoteStatus = "In Progress"
                    break;
            }
            
            let $tdButton = $("<td>");
            $tdButton.append( $('<span class="button-widget icon-action bx '+iconClass+'" title="Send to '+todoNote.status+'" />')).click( async () => this.updateTask(todoNote.noteId, clickNoteStatus) );
            
            $tr.append($tdButton);
     
            $tr.append("<td><strong><a href='#"+todoNote.notePath+"' data-action='note' data-note-path='"+todoNote.notePath+"' class='no-tooltip-preview'>"+todoNote.title+"</a></strong></td>");
        
            const $tagTD = $("<td>");
            todoNote.tags?.forEach((tag) => {
                $tagTD.append(
                    $("<span />").addClass("badge badge-secondary")
                    .text(tag.title)
                    .css("background", tag.background)
                    .css("color", tag.color)
                    .prepend($("<i />").addClass(tag.iconClass))
                );
            });
            
            $tr.append($tagTD);
            
            switch (todoNote.status) {
                case "In Progress":
                    $template.find('#tbodyInProgress').append($tr);
                    break;
                case "Backlog":
                    $template.find('#tbodyBacklog').append($tr);
                    break;
                case "Done":
                    $template.find('#tbodyDone').append($tr);
                    break;
            }
            
        }
        
        this.$body.html($template);
    }
    
    async updateTask(noteId, newStatus) {
        
        await api.runOnBackend( 
            async (note_id, new_status) => { 
                await updateNote(note_id, new_status)
            },
            [noteId, newStatus]
        );
        
        this.refresh();
    }
    
    async refreshWithNote(note) {
        this.refreshWidget();
    }
    
    async refreshWidget() {
        await this.getTodos();
        await this.renderWidget();
    }
    
}

module.exports = new TodoListWidget()

subnote "updateNote" backend script

module.exports = async function (noteId, newParentTitle) {
    
    const taskNote = await api.getNote(noteId);
    
    // Get parent note from by using newParentTitle to search for it
    const newParentNote = ( await taskNote.getParentNotes()[0].getParentNotes()[0].getChildNotes()).find((m) => m.title == newParentTitle );
    
    // Bascially move note to newParentNote
    const oldParentNoteId = taskNote.getParentNotes()[0].noteId;
    
    await api.toggleNoteInParent(true, taskNote.noteId, newParentNote.noteId);

    await api.toggleNoteInParent(false, taskNote.noteId,oldParentNoteId );
    
};

[adoreparler]

Here is button functionality in play

[adoreparler]

does toggleNoteInParent ever get deleted, or is it lingering somewhere? Does this do the same thing if I were to drag the note from one parent to another?
@zadam

[adoreparler]

Added a new task button to the top of the widget

module.exports = async function(mainTodoNoteName, newParentTitle) {
 
    const taskNoteId = await api.runOnBackend((main_todo_note_name, new_parent_title) => {
    
        const parentNoteQuery = api.searchForNote("note.title = '" + new_parent_title + "' AND note.parents.title = '" + main_todo_note_name + "'");
    
        const resp = api.createTextNote(parentNoteQuery.noteId, "New Task", '');
        
        return resp.note.noteId;
        
    }, [mainTodoNoteName, newParentTitle]);
    
    await api.waitUntilSynced();
    
    await api.activateNewNote(taskNoteId);
};

<div class="header-actions">
        <span 
            id="newTask"
            class="button-widget icon-action bx bx-list-plus"
            title="New Todo" />
    </div>

added this to the render method

$template.find('#newTask').click(async () => createNewNote(this.MAIN_NOTE_NAME, this.NEW_NOTE_PARENT_NAME));

[adoreparler]

[adoreparler]

[adoreparler]

Does anyone know how I can get a

api.addButtonToToolbar({
        title: 'Hide To-Do\'s',
        icon: 'bx bx-show',
        action: () => {
        }
    });

to basically show or hide my widget?

[sottey]

There was some amazing work done here on showing and hiding a panel on the right: https://github.com/soulsands/trilium-chat

[adoreparler]

I tried event listener's all day yesterday. But kind of got it to work today.

leftPanelButton

api.addButtonToToolbar({
    title: 'Hide To-Do\'s test',
    icon: 'bx bx-show',
    action: async () => {
        var showHideTodoWidget = new CustomEvent('showHideTodoWidget');
        document.dispatchEvent(showHideTodoWidget);
    }
});

class TodoListWidget extends api.RightPanelWidget {
    
    // SETTINGS //
    NEW_NOTE_PARENT_NAME = "Backlog";
    MAIN_NOTE_NAME = "To-Do-Test";
    // // // // //
    
    // // Feauture List To do //
    // New Task button on left panel
    // Hide / Show list
    // Tabbed Lists for multiple lists
    // // // //
    
    constructor() {
        super();
        this.show_widget = true;
        document.addEventListener('showHideTodoWidget', this.showHideTodoWidget.bind(this), false);
    }
    
    todosNotes = [];
    
    get widgetTitle() { 
        return "To-Do's"
    }
    
    get parentWidget() {
        return "right-pane"
    }
    
    showHideTodoWidget() {
        this.show_widget = !this.show_widget;
        this.refresh();
    }
    
    async doRenderBody() {
       this.getTodos();
    }
    
    isEnabled() {
        return (
            super.isEnabled() && this.show_widget
        );
    }
    
    async getTodos() {
        
        const todoNotesQuery = await api.searchForNotes("#todoItem AND note.parents.parents.title = '" + this.MAIN_NOTE_NAME + "' AND note.parents.title != 'Archive'");
        this.todoNotes = []; // clear out array
        
        for ( let i = 0; i < todoNotesQuery.length; i++ ) {
            const note = todoNotesQuery[i];
            const todoNote = new TodoNote();
            
            todoNote.title = note.title;
            todoNote.noteId = note.noteId;
            todoNote.dueDate = note.getLabel('dueDate');
            
            todoNote.notePath = note.getBestNotePathString();
            
            const attributes = note.getAttributes("relation", "tag");
  
            for ( let n = 0; n < attributes.length; n++) {
                const targetNote = await attributes[n].getTargetNote();
                todoNote.tags.push({
                    title: targetNote.title,
                    iconClass: targetNote.getLabelValue("iconClass"),
                    background: targetNote.getLabelValue("badgeBackground"),
                    color: targetNote.getLabelValue("badgeColor")
                });
            }
            
            todoNote.status = note.getParentNotes()[0].title;
            
            this.todoNotes.push(todoNote);   
            
        }
        
    }
    
    async renderWidget() {
        
        let $template = $(htmlContent);
        
        $template.find('#newTask').click(async () => createNewNote(this.MAIN_NOTE_NAME, this.NEW_NOTE_PARENT_NAME));
        
        for ( let tn = 0; tn < this.todoNotes.length; tn++ ) {
            
            const todoNote = this.todoNotes[tn];
        
            const $tr = $("<tr>");
            
            let iconClass = "";
            let clickNoteStatus = "";
            
            switch (todoNote.status) {
                case "In Progress":
                    iconClass = "bx-check-circle";
                    clickNoteStatus = "Done";
                    break;
                case "Done":
                    iconClass = "bx-archive-in";
                    clickNoteStatus = "Archive";
                    break;
                case "Backlog":
                    iconClass = "bx-send";
                    clickNoteStatus = "In Progress"
                    break;
            }
            
            let $tdButton = $("<td>");
            $tdButton.append( $('<span class="button-widget icon-action bx '+iconClass+'" title="Send to '+todoNote.status+'" />')).click( async () => this.updateTask(todoNote.noteId, clickNoteStatus) );
            
            $tr.append($tdButton);
     
            $tr.append("<td><strong><a style='" + (todoNote.dueDate? 'color:darkcyan' : '' ) + "' href='#"+todoNote.notePath+"' data-action='note' data-note-path='"+todoNote.notePath+"' class=''>"+todoNote.title+"</a></strong></td>");
        
            const $tagTD = $("<td>");
            todoNote.tags?.forEach((tag) => {
                $tagTD.append(
                    $("<span />").addClass("badge badge-secondary")
                    .text(tag.title)
                    .css("background", tag.background)
                    .css("color", tag.color)
                    .prepend($("<i />").addClass(tag.iconClass))
                );
            });
            
            $tr.append($tagTD);
            
            switch (todoNote.status) {
                case "In Progress":
                    $template.find('#tbodyInProgress').append($tr);
                    break;
                case "Backlog":
                    $template.find('#tbodyBacklog').append($tr);
                    break;
                case "Done":
                    $template.find('#tbodyDone').append($tr);
                    break;
            }
            
        }
        
        this.$body.html($template);
    }
    
    async updateTask(noteId, newStatus) {
        
        await api.runOnBackend( 
            async (note_id, new_status) => { 
                await updateNote(note_id, new_status)
            },
            [noteId, newStatus]
        );
        
        this.refresh();
    }
    
    async refreshWithNote(note) {
        this.refreshWidget();
    }
    
    async refreshWidget() {
        await this.getTodos();
        await this.renderWidget();
    }
    
    async showHideWidget() {
        this.show_widget = !this.show_widget;
        api.showMessage("Triggered, its now: " + this.show_widget);
        //this.refresh();
    }
    
}

module.exports = new TodoListWidget()

[adoreparler]

This works, but I feel like this is not the answer :P

showHideTodoWidget() {
        this.show_widget = !this.show_widget;
        if (this.show_widget) {
            $("#right-pane").show();
        } else {
            $("#right-pane").hide();
        }
        this.refresh();
    }

[sottey]

If it works, then it IS an answer.... It might just not be THE answer. :-)

[adoreparler]

Added some Tabs and the ability to have multiple Todo lists. I have a refresh button and a new task button now also.

TodoListWidget.zip

[TheBig-O]

I think I'm posting what you're asking for. I appreciate your taking the time to help sort this out.

[adoreparler]

what version of Trillium are you running?

[TheBig-O]

Version 0.62.2 (0.62.2)

[adoreparler]

Try removing all the .js extensions from the title of the notes
if you see my video in a couple of replies above, I don't have that and its trying to find TodoNote class but you have it labeled as TodoNote.js

[TheBig-O]

That was it. As simple as that. As soon as I removed them and reloaded the front end, it showed all my active items.
THANKS!

[flyerfan017]

Thank you, this is exactly what i was looking for to help me stay on task at work. Is there an easy way to get the active To Do list (tab) to be a different color? if i have multiple to do list i would like to have the one that is active visually identified to make sure i can add an item to the correct list.

[adoreparler]

I think I was having trouble getting that to work. I do not use Trillium anymore, so you might have to dig into the code and play around with it.