Open or create tasks in a new webview panel

ext-src/KanbnBoardPanel.ts

@@ -43,6 +43,7 @@ export default class KanbnBoardPanel {
         return;
       }
       KanbnBoardPanel.currentPanel._panel.webview.postMessage({
+        type: 'index',
         index,
         tasks: (await KanbnBoardPanel.currentPanel._kanbn.loadAllTrackedTasks(index)).map(
           task => KanbnBoardPanel.currentPanel!._kanbn.hydrateTask(index, task)
@@ -75,10 +76,14 @@ export default class KanbnBoardPanel {
       // Restrict the webview to only loading content from allowed paths
       localResourceRoots: [
         vscode.Uri.file(path.join(this._extensionPath, 'build')),
-        vscode.Uri.file(path.join(this._workspacePath, '.kanbn')),
+        vscode.Uri.file(path.join(this._workspacePath, this._kanbn.getFolderName())),
         vscode.Uri.file(path.join(this._extensionPath, 'node_modules', 'vscode-codicons', 'dist'))
       ]
     });
+    this._panel.iconPath = {
+      light: vscode.Uri.file(path.join(this._extensionPath, 'resources', 'project_light.svg')),
+      dark: vscode.Uri.file(path.join(this._extensionPath, 'resources', 'project_dark.svg'))
+    };
 
     // Set the webview's title to the kanbn project name
     this._kanbn.getIndex().then(index => {
@@ -102,19 +107,19 @@ export default class KanbnBoardPanel {
           return;
 
         case 'kanbn.task':
-          // KanbnTaskPanel.create(
+          KanbnTaskPanel.show(
-          //   this._extensionPath,
+            this._extensionPath,
-          //   this._workspacePath,
+            this._workspacePath,
-          //   this._kanbn,
+            this._kanbn,
-          //   message.taskId
+            message.taskId,
-          // );
+            message.columnName
-          vscode.window.showInformationMessage(`Opening task ${message.taskId}`);
+          );
           return;
 
         // Move a task
         case 'kanbn.move':
           try {
-            await kanbn.moveTask(message.task, message.column, message.position);
+            await kanbn.moveTask(message.task, message.columnName, message.position);
           } catch (e) {
             vscode.window.showErrorMessage(e.message);
           }
@@ -122,20 +127,13 @@ export default class KanbnBoardPanel {
 
         // Create a task
         case 'kanbn.create':
-          // TODO open task panel with blank task
+          KanbnTaskPanel.show(
-          vscode.window.showInformationMessage(`Creating new task in column ${message.column}`);
+            this._extensionPath,
-          return;
+            this._workspacePath,
-
+            this._kanbn,
-        // Update a task
+            null,
-        case 'kanbn.update':
+            message.columnName
-          // TODO update task
+          );
-          vscode.window.showInformationMessage(`Editing task ${message.taskId}`);
-          return;
-
-        // Delete a task
-        case 'kanbn.delete':
-          // TODO delete task
-          vscode.window.showInformationMessage(`Deleting task ${message.taskId}`);
           return;
       }
     }, null, this._disposables);
@@ -165,7 +163,7 @@ export default class KanbnBoardPanel {
       .file(path.join(this._extensionPath, 'build', mainStyle))
       .with({ scheme: 'vscode-resource' });
     const customStyleUri = vscode.Uri
-      .file(path.join(this._workspacePath, '.kanbn', 'board.css'))
+      .file(path.join(this._workspacePath, this._kanbn.getFolderName(), 'board.css'))
       .with({ scheme: 'vscode-resource' });
     const codiconsUri = vscode.Uri
       .file(path.join(this._extensionPath, 'node_modules', 'vscode-codicons', 'dist', 'codicon.css'))

ext-src/KanbnTaskPanel.ts

@@ -3,25 +3,77 @@ import * as vscode from 'vscode';
 
 export default class KanbnTaskPanel {
   private static readonly viewType = 'react';
+  private static panels: KanbnTaskPanel[] = [];
 
   private readonly _panel: vscode.WebviewPanel;
   private readonly _extensionPath: string;
   private readonly _workspacePath: string;
   private readonly _kanbn: typeof import('@basementuniverse/kanbn/src/main');
+  private readonly _taskId: string|null;
+  private readonly _columnName: string;
   private _disposables: vscode.Disposable[] = [];
 
+  public static async show(
+    extensionPath: string,
+    workspacePath: string,
+    kanbn: typeof import('@basementuniverse/kanbn/src/main'),
+    taskId: string|null,
+    columnName: string
+  ) {
+    const column = vscode.window.activeTextEditor ? vscode.window.activeTextEditor.viewColumn : undefined;
+
+    // Create a new panel
+    const taskPanel = new KanbnTaskPanel(
+      extensionPath,
+      workspacePath,
+      column || vscode.ViewColumn.One,
+      kanbn,
+      taskId,
+      columnName
+    );
+    KanbnTaskPanel.panels.push(taskPanel);
+
+    let index: any;
+    try {
+      index = await kanbn.getIndex();
+    } catch (error) {
+      vscode.window.showErrorMessage(error instanceof Error ? error.message : error);
+      return;
+    }
+    let task: any = null;
+    if (taskId) {
+      try {
+        task = await kanbn.getTask(taskId);
+      } catch (error) {
+        vscode.window.showErrorMessage(error instanceof Error ? error.message : error);
+        return;
+      }
+    }
+    taskPanel._panel.webview.postMessage({
+      type: 'task',
+      task,
+      columnName: taskPanel._columnName,
+      tasks: await kanbn.loadAllTrackedTasks(index),
+      dateFormat: kanbn.getDateFormat(index)
+    });
+  }
+
   private constructor(
     extensionPath: string,
     workspacePath: string,
     column: vscode.ViewColumn,
-    kanbn: typeof import('@basementuniverse/kanbn/src/main')
+    kanbn: typeof import('@basementuniverse/kanbn/src/main'),
+    taskId: string|null,
+    columnName: string
   ) {
     this._extensionPath = extensionPath;
     this._workspacePath = workspacePath;
     this._kanbn = kanbn;
+    this._taskId = taskId;
+    this._columnName = columnName;
 
     // Create and show a new webview panel
-    this._panel = vscode.window.createWebviewPanel(KanbnTaskPanel.viewType, 'Kanbn Task', column, {
+    this._panel = vscode.window.createWebviewPanel(KanbnTaskPanel.viewType, 'New task', column, {
       // Enable javascript in the webview
       enableScripts: true,
 
@@ -31,15 +83,17 @@ export default class KanbnTaskPanel {
       // Restrict the webview to only loading content from allowed paths
       localResourceRoots: [
         vscode.Uri.file(path.join(this._extensionPath, 'build')),
-        vscode.Uri.file(path.join(this._workspacePath, '.kanbn')),
+        vscode.Uri.file(path.join(this._workspacePath, this._kanbn.getFolderName())),
         vscode.Uri.file(path.join(this._extensionPath, 'node_modules', 'vscode-codicons', 'dist'))
       ]
     });
 
     // Set the webview's title to the kanbn task name
-    // this._kanbn.getIndex().then(index => {
+    if (this._taskId !== null) {
-    //   this._panel.title = index.name;
+      this._kanbn.getTask(this._taskId).then(task => {
-    // });
+        this._panel.title = task.name;
+      });
+    }
 
     // Set the webview's initial html content
     this._panel.webview.html = this._getHtmlForWebview();
@@ -60,7 +114,7 @@ export default class KanbnTaskPanel {
         // Update a task
         case 'kanbn.update':
           // TODO update task
-          vscode.window.showInformationMessage(`Editing task ${message.taskId}`);
+          vscode.window.showInformationMessage(`Updating task ${message.taskId}`);
           return;
 
         // Delete a task
@@ -93,7 +147,7 @@ export default class KanbnTaskPanel {
       .file(path.join(this._extensionPath, 'build', mainStyle))
       .with({ scheme: 'vscode-resource' });
     const customStyleUri = vscode.Uri
-      .file(path.join(this._workspacePath, '.kanbn', 'board.css'))
+      .file(path.join(this._workspacePath, this._kanbn.getFolderName(), 'board.css'))
       .with({ scheme: 'vscode-resource' });
     const codiconsUri = vscode.Uri
       .file(path.join(this._extensionPath, 'node_modules', 'vscode-codicons', 'dist', 'codicon.css'))

ext-src/extension.ts

@@ -87,7 +87,10 @@ export async function activate(context: vscode.ExtensionContext) {
 
     // Initialise file watcher
     const uri = vscode.workspace.workspaceFolders[0].uri.fsPath;
-    const fileWatcher = vscode.workspace.createFileSystemWatcher(new vscode.RelativePattern(uri, '.kanbn/*'));
+    const fileWatcher = vscode.workspace.createFileSystemWatcher(new vscode.RelativePattern(
+      uri,
+      `${kanbn.getFolderName()}/**.*`
+    ));
     fileWatcher.onDidChange(() => {
       kanbnStatusBarItem.update();
       KanbnBoardPanel.update();

src/App.tsx

@@ -1,44 +1,77 @@
-import Board from './Board';
 import Header from './Header';
+import Board from './Board';
+import TaskEditor from './TaskEditor';
 import React, { useState } from "react";
+import VSCodeApi from "./VSCodeApi";
+
+declare var acquireVsCodeApi: Function;
+const vscode: VSCodeApi = acquireVsCodeApi();
 
 const zip = (a: Array<any>, b: Array<any>): Array<[any, any]> => a.map((v: any, i: number): [any, any] => [v, b[i]]);
 
 function App() {
+  const [type, setType] = useState('');
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
   const [columns, setColumns] = useState({});
   const [startedColumns, setStartedColumns] = useState([]);
   const [completedColumns, setCompletedColumns] = useState([]);
   const [dateFormat, setDateFormat] = useState('');
+  const [task, setTask] = useState({});
+  const [columnName, setColumnName] = useState('');
 
   window.addEventListener('message', event => {
-    const tasks = Object.fromEntries(event.data.tasks.map(task => [task.id, task]));
+    switch (event.data.type) {
-    setName(event.data.index.name);
+      case 'index':
-    setDescription(event.data.index.description);
+        const tasks = Object.fromEntries(event.data.tasks.map(task => [task.id, task]));
-    setColumns(Object.fromEntries(
+        setName(event.data.index.name);
-      zip(
+        setDescription(event.data.index.description);
-        Object.keys(event.data.index.columns),
+        setColumns(Object.fromEntries(
-        Object.values(event.data.index.columns).map(column => (column as string[]).map(taskId => tasks[taskId]))
+          zip(
-      )
+            Object.keys(event.data.index.columns),
-    ));
+            Object.values(event.data.index.columns).map(column => (column as string[]).map(taskId => tasks[taskId]))
-    setStartedColumns(event.data.startedColumns);
+          )
-    setCompletedColumns(event.data.completedColumns);
+        ));
+        setStartedColumns(event.data.startedColumns);
+        setCompletedColumns(event.data.completedColumns);
+        break;
+
+      case 'task':
+        setTask(event.data.task);
+        setColumnName(event.data.columnName);
+        break;
+    }
+    setType(event.data.type);
     setDateFormat(event.data.dateFormat);
   });
 
   return (
     <div>
-      <Header
+      {
-        name={name}
+        type === 'index' &&
-        description={description}
+        <React.Fragment>
-      />
+          <Header
-      <Board
+            name={name}
-        columns={columns}
+            description={description}
-        startedColumns={startedColumns}
+          />
-        completedColumns={completedColumns}
+          <Board
-        dateFormat={dateFormat}
+            columns={columns}
-      />
+            startedColumns={startedColumns}
+            completedColumns={completedColumns}
+            dateFormat={dateFormat}
+            vscode={vscode}
+          />
+        </React.Fragment>
+      }
+      {
+        type === 'task' &&
+        <TaskEditor
+          task={task as KanbnTask|null}
+          columnName={columnName}
+          dateFormat={dateFormat}
+          vscode={vscode}
+        />
+      }
     </div>
   );
 }

src/Board.tsx

@@ -1,13 +1,10 @@
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import React, { useState } from "react";
-import Task from './Task';
+import TaskItem from './TaskItem';
-import VSCodeApi from "./VSCodeApi";
 import { paramCase } from 'param-case';
+import VSCodeApi from "./VSCodeApi";
 
-declare var acquireVsCodeApi: Function;
+const onDragEnd = (result, columns, setColumns, vscode: VSCodeApi) => {
-const vscode: VSCodeApi = acquireVsCodeApi();
-
-const onDragEnd = (result, columns, setColumns) => {
 
   // No destination means the item was dragged to an invalid location
   if (!result.destination) {
@@ -53,16 +50,17 @@ const onDragEnd = (result, columns, setColumns) => {
   vscode.postMessage({
     command: 'kanbn.move',
     task: removed.id,
-    column: destination.droppableId,
+    columnName: destination.droppableId,
     position: destination.index
   });
 };
 
-const Board = ({ columns, startedColumns, completedColumns, dateFormat }: {
+const Board = ({ columns, startedColumns, completedColumns, dateFormat, vscode }: {
   columns: Record<string, KanbnTask[]>,
   startedColumns: string[],
   completedColumns: string[],
-  dateFormat: string
+  dateFormat: string,
+  vscode: VSCodeApi
 }) => {
   const [, setColumns] = useState(columns);
   return (
@@ -73,7 +71,7 @@ const Board = ({ columns, startedColumns, completedColumns, dateFormat }: {
       }}
     >
       <DragDropContext
-        onDragEnd={result => onDragEnd(result, columns, setColumns)}
+        onDragEnd={result => onDragEnd(result, columns, setColumns, vscode)}
       >
         {Object.entries(columns).map(([columnName, column]) => {
           return (
@@ -104,7 +102,7 @@ const Board = ({ columns, startedColumns, completedColumns, dateFormat }: {
                   onClick={() => {
                     vscode.postMessage({
                       command: 'kanbn.create',
-                      column: columnName
+                      columnName
                     })
                   }}
                   title={`Create task in ${columnName}`}
@@ -124,7 +122,7 @@ const Board = ({ columns, startedColumns, completedColumns, dateFormat }: {
                           snapshot.isDraggingOver ? 'drag-over' : null
                         ].filter(i => i).join(' ')}
                       >
-                        {column.map((task, index) => <Task
+                        {column.map((task, index) => <TaskItem
                           task={task}
                           index={index}
                           dateFormat={dateFormat}

src/KanbnTask.d.ts

@@ -10,6 +10,7 @@ declare type KanbnTask = {
     created: Date,
     updated?: Date,
     started?: Date,
+    due?: Date,
     completed?: Date,
     assigned?: string,
     tags?: string[]

src/TaskEditor.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import formatDate from 'dateformat';
+import VSCodeApi from "./VSCodeApi";
+
+const TaskEditor = ({ task, columnName, dateFormat, vscode }: {
+  task: KanbnTask|null,
+  columnName: string,
+  dateFormat: string,
+  vscode: VSCodeApi
+}) => {
+  return (
+    <div>
+      Viewing or editing task: {task ? task.name : '(creating new task)'}<br />
+      Column: {columnName}
+    </div>
+  );
+}
+
+export default TaskEditor;

src/TaskItem.tsx

@@ -3,7 +3,7 @@ import { Draggable } from "react-beautiful-dnd";
 import formatDate from 'dateformat';
 import VSCodeApi from "./VSCodeApi";
 
-const Task = ({ task, index, dateFormat, vscode }: {
+const TaskItem = ({ task, index, dateFormat, vscode }: {
   task: KanbnTask,
   index: number,
   dateFormat: string,
@@ -12,6 +12,7 @@ const Task = ({ task, index, dateFormat, vscode }: {
   const createdDate = 'created' in task.metadata ? formatDate(task.metadata.created, dateFormat) : '';
   const updatedDate = 'updated' in task.metadata ? formatDate(task.metadata.updated, dateFormat) : '';
   const startedDate = 'started' in task.metadata ? formatDate(task.metadata.started, dateFormat) : '';
+  const dueDate = 'due' in task.metadata ? formatDate(task.metadata.due, dateFormat) : '';
   const completedDate = 'completed' in task.metadata ? formatDate(task.metadata.completed, dateFormat) : '';
   return (
     <Draggable
@@ -41,7 +42,8 @@ const Task = ({ task, index, dateFormat, vscode }: {
                 onClick={() => {
                   vscode.postMessage({
                     command: 'kanbn.task',
-                    taskId: task.id
+                    taskId: task.id,
+                    columnName: task.column
                   })
                 }}
                 title={task.id}
@@ -79,6 +81,7 @@ const Task = ({ task, index, dateFormat, vscode }: {
                   createdDate ? `Created ${createdDate}` : null,
                   updatedDate ? `Updated ${updatedDate}` : null,
                   startedDate ? `Started ${startedDate}` : null,
+                  dueDate ? `Due ${dueDate}` : null,
                   completedDate ? `Completed ${completedDate}` : null
                 ].filter(i => i).join('\n')}>
                   <i className="codicon codicon-clock"></i>{updatedDate || createdDate}
@@ -118,4 +121,4 @@ const Task = ({ task, index, dateFormat, vscode }: {
   );
 }
 
-export default Task;
+export default TaskItem;

src/index.css

@@ -41,6 +41,8 @@ body {
     height: 16px;
     width: 16px;
     margin-right: 8px;
+    cursor: pointer;
+    border-radius: 1px;
 }
 
 .kanbn-create-task-button:focus, .kanbn-create-task-button:hover {
@@ -127,6 +129,7 @@ body {
     background-color: transparent;
     font-weight: bold;
     color: var(--vscode-editor-foreground);
+    cursor: pointer;
 }
 
 .kanbn-task-name:focus, .kanbn-task-name:hover {
@@ -156,10 +159,11 @@ body {
     display: inline-block;
     background-color: var(--vscode-activityBar-inactiveForeground);
     color: var(--vscode-editor-background);
+    font-size: 0.8em;
     font-weight: bold;
     padding: 2px 4px;
     margin: 4px 4px 4px 0;
-    border-radius: 2px;
+    border-radius: 4px;
 }
 
 .kanbn-task-tag-Nothing {