implement kanban board

README.md

@@ -1,2 +1,30 @@
 # trilium-kanban
 A Kanban integration for Trilium Notes
+
+![Demo](screenshots/demo.gif)
+
+## Installation
+
+1. Download the latest release from the [releases page](https://github.com/CyrilLeblanc/trilium-kanban/releases)
+2. Import the `.zip` file into Trilium for right-clicking on a note and selecting `Import into note`.
+3. Setup a Kanban board. See [Usage](#usage) for more details.
+
+## Features
+
+- Kanban view for child notes.
+- Drag and drop to change the order of items.
+- Drag and drop to change the board of an item.
+- Drag and drop to change the order of boards.
+- Click on an item to open the note.
+
+## Create a Kanban board
+
+- Create a note of type `Render Note`.
+- Add the relation to `kanban` HTML note.
+- Add the label `#sortOrder=sortOrder`.
+- Create a board by creating a sub-note.
+- Create an item by creating a sub-note of a board.
+
+## Credits
+- [Trilium Notes](https://github.com/zadam/trilium)
+- [jKanban](https://github.com/riktar/jkanban)

src/kanban/js.js

@@ -0,0 +1,11 @@
+// the only custom change made in "jkanban.min.js" is the 
+// use of "globalThis.jKanban" instead of "this.jKanban"
+// this is made to prevent an error in the loading of the library
+
+const kanban = new jKanban({
+    element: "#kanban",
+    boards: await getInitialData(),
+    dropEl: moveItemToBoard,
+    click: showNote,
+    dragendBoard: reorderBoards
+})

src/kanban/js/getInitialValue.js

@@ -0,0 +1,23 @@
+module.exports = async function() {
+    const { noteId } = api.originEntity;
+
+    return await api.runOnBackend(kanbanNoteId => {
+        const kanbanNote = api.getNote(kanbanNoteId);
+        const boards = kanbanNote.getChildNotes();
+
+        return boards.map(board => {
+            const items = board.getChildNotes();
+
+            return {
+                id: board.noteId,
+                title: board.title,
+                item: items.map(item => (
+                    {
+                        id: item.noteId,
+                        title: item.title
+                    }
+                ))
+            };
+        });
+    }, [noteId]);
+}

src/kanban/js/moveItemToBoard.js

@@ -0,0 +1,27 @@
+module.exports = async function(el, target, source, sibling) {
+    if (target == source) {
+        return;
+    }
+
+    const itemId = $(el).data("eid");
+    const targetBoardId = $(target).parents(".kanban-board").data("id");
+    const sourceBoardId = $(source).parents(".kanban-board").data("id");
+
+    const result = await api.runOnBackend((itemId, targetBoardId, sourceBoardId) => {        
+        if (targetBoardId != sourceBoardId) {
+            // add in target board
+            api.toggleNoteInParent(true, itemId, targetBoardId);
+
+            // remove item from source board
+            api.toggleNoteInParent(false, itemId, sourceBoardId);
+        }
+
+        return true;
+    }, [itemId, targetBoardId, sourceBoardId])
+
+    if (!result) {
+        api.showError("An error occurred while moving the item.");
+    }
+
+    await api.waitUntilSynced();
+};

src/kanban/js/reorderBoards.js

@@ -0,0 +1,38 @@
+module.exports = async function(el) {
+    const { noteId: kanbanNoteId } = api.originEntity;
+
+    // get notes id ordered
+    const $container = $(el).parents(".kanban-container");
+    const noteOrderedIds = [];
+    $container.children().each((index, el) => {
+        const id = $(el).data("id");
+        noteOrderedIds.push(id);
+    });
+
+    const result = await api.runOnBackend((kanbanNoteId, noteOrderedIds) => {
+        const kanbanNote = api.getNote(kanbanNoteId);
+        const orderLabel = kanbanNote.getLabelValue("sorted");
+
+        // don't reorder if there's no #sorted attribute on kanban note
+        if (!orderLabel) {
+            return true;
+        }
+
+        noteOrderedIds.forEach((noteId, index) => {
+            const note = api.getNote(noteId);
+
+            if (note.getLabelValue(orderLabel) != index) {
+                note.setLabel(orderLabel, index);
+                note.save();
+            }
+        });
+
+        return true;
+    }, [kanbanNoteId, noteOrderedIds]);
+
+    if (!result) {
+        api.showError("An error occured when ordering boards.");
+    }
+
+    await api.waitUntilSynced();
+}

src/kanban/js/showNote.js

@@ -0,0 +1,5 @@
+module.exports = function (el) {
+    const noteId = $(el).data("eid");
+
+    api.activateNote(noteId);
+}

src/kanban/kanban.css

@@ -0,0 +1,7 @@
+.kanban-board {
+    background-color: var(--left-pane-background-color);
+}
+
+.kanban-item {
+    background-color: var(--main-background-color);
+}