Add task data

src/App.tsx

@@ -10,6 +10,7 @@ function App() {
   const [columns, setColumns] = useState({});
   const [startedColumns, setStartedColumns] = useState([]);
   const [completedColumns, setCompletedColumns] = useState([]);
+  const [dateFormat, setDateFormat] = useState('');
 
   window.addEventListener('message', event => {
     const tasks = Object.fromEntries(event.data.tasks.map(task => [task.id, task]));
@@ -23,12 +24,21 @@ function App() {
     ));
     setStartedColumns(event.data.startedColumns);
     setCompletedColumns(event.data.completedColumns);
+    setDateFormat(event.data.dateFormat);
   });
 
   return (
     <div>
-      <Header name={name} description={description} />
-      <Board columns={columns} startedColumns={startedColumns} completedColumns={completedColumns} />
+      <Header
+        name={name}
+        description={description}
+      />
+      <Board
+        columns={columns}
+        startedColumns={startedColumns}
+        completedColumns={completedColumns}
+        dateFormat={dateFormat}
+      />
     </div>
   );
 }

src/Board.tsx

@@ -1,9 +1,10 @@
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import React, { useState } from "react";
 import Task from './Task';
+import VSCodeApi from "./VSCodeApi";
 
-declare var acquireVsCodeApi: any;
-const vscode = acquireVsCodeApi();
+declare var acquireVsCodeApi: Function;
+const vscode: VSCodeApi = acquireVsCodeApi();
 
 const onDragEnd = (result, columns, setColumns) => {
 
@@ -56,10 +57,11 @@ const onDragEnd = (result, columns, setColumns) => {
   });
 };
 
-const Board = ({ columns, startedColumns, completedColumns }: {
+const Board = ({ columns, startedColumns, completedColumns, dateFormat }: {
   columns: Record<string, KanbnTask[]>,
   startedColumns: string[],
-  completedColumns: string[]
+  completedColumns: string[],
+  dateFormat: string
 }) => {
   const [, setColumns] = useState(columns);
   return (
@@ -82,12 +84,25 @@ const Board = ({ columns, startedColumns, completedColumns }: {
               key={columnName}
             >
               <h2 className="kanbn-column-name">
+                {
+                  startedColumns.indexOf(columnName) > -1 &&
+                  <i className="codicon codicon-chevron-right"></i>
+                }
+                {
+                  completedColumns.indexOf(columnName) > -1 &&
+                  <i className="codicon codicon-check"></i>
+                }
                 {columnName}
                 <span className="kanbn-column-count">{column.length || ''}</span>
                 <button
                   type="button"
                   className="kanbn-create-task-button"
-                  onClick={e => null}
+                  onClick={() => {
+                    vscode.postMessage({
+                      command: 'kanbn.create',
+                      column: columnName
+                    })
+                  }}
                   title={`Create task in ${columnName}`}
                 >
                   <i className="codicon codicon-add"></i>
@@ -105,7 +120,12 @@ const Board = ({ columns, startedColumns, completedColumns }: {
                           snapshot.isDraggingOver ? 'drag-over' : null
                         ].filter(i => i).join(' ')}
                       >
-                        {column.map((task, index) => <Task task={task} index={index} />)}
+                        {column.map((task, index) => <Task
+                          task={task}
+                          index={index}
+                          dateFormat={dateFormat}
+                          vscode={vscode}
+                        />)}
                         {provided.placeholder}
                       </div>
                     );

src/KanbnTask.d.ts

@@ -10,7 +10,8 @@ declare type KanbnTask = {
     created: Date,
     updated?: Date,
     completed?: Date,
-    assigned?: string
+    assigned?: string,
+    tags?: string[]
   },
   relations: Array<{
     type: string,

src/Task.tsx

@@ -1,7 +1,14 @@
 import React from "react";
 import { Draggable } from "react-beautiful-dnd";
+import formatDate from 'dateformat';
+import VSCodeApi from "./VSCodeApi";
 
-const Task = ({ task, index }: { task: KanbnTask, index: number }) => {
+const Task = ({ task, index, dateFormat, vscode }: {
+  task: KanbnTask,
+  index: number,
+  dateFormat: string,
+  vscode: VSCodeApi
+}) => {
   return (
     <Draggable
       key={task.id}
@@ -25,20 +32,74 @@ const Task = ({ task, index }: { task: KanbnTask, index: number }) => {
           >
             <button
               type="button"
-              onClick={e => null} // TODO open task editor webview panel when clicked
+              className="kanbn-task-name"
+              onClick={() => {
+                vscode.postMessage({
+                  command: 'kanbn.task',
+                  taskId: task.id
+                })
+              }}
               title={task.id}
             >
               {task.name}
             </button>
-            {/*
-            // TODO add task info
-            truncated description (?),
-            progress as %-filled bottom border,
-            created/updated (updated date, fallback to created),
-            tags (provide default colours in css, put tagname in className),
-            count sub-tasks (if >0),
-            count comments (if >0)
-            */}
+            {
+              'tags' in task.metadata &&
+              <div className="kanbn-task-tags">
+                {task.metadata.tags!.map(tag => {
+                  return (
+                    <span className={[
+                      'kanbn-task-tag',
+                      `kanbn-task-tag-${tag}`
+                    ].join(' ')}>
+                      {tag}
+                    </span>
+                  );
+                })}
+              </div>
+            }
+            {
+              'assigned' in task.metadata &&
+              <div className="kanbn-task-assigned">
+                <i className="codicon codicon-account"></i>{task.metadata.assigned}
+              </div>
+            }
+            <div className="kanbn-task-date">
+              {
+                'updated' in task.metadata
+                  ? formatDate(task.metadata.updated, dateFormat)
+                  : formatDate(task.metadata.created, dateFormat)
+              }
+            </div>
+            <div className="kanbn-task-description">
+              {task.description}
+            </div>
+            {
+              task.comments.length > 0 &&
+              <div className="kanbn-task-comments">
+                <i className="codicon codicon-comment"></i>{task.comments.length}
+              </div>
+            }
+            {
+              task.subTasks.length > 0 &&
+              <div className="kanbn-task-sub-tasks">
+                <i className="codicon codicon-tasklist"></i>
+                {task.subTasks.filter(subTask => subTask.completed).length} / {task.subTasks.length}
+              </div>
+            }
+            {
+              task.workload !== undefined &&
+              <div className="kanbn-task-workload">
+                <i className="codicon codicon-run"></i>{task.workload}
+              </div>
+            }
+            {
+              task.workload !== undefined &&
+              task.progress !== undefined &&
+              <div className="kanbn-task-progress" style={{
+                width: `${task.progress * 100}%`
+              }}></div>
+            }
           </div>
         );
       }}

src/VSCodeApi.ts

@@ -0,0 +1,5 @@
+export default interface VSCodeApi {
+  getState: () => any;
+  setState: (newState: any) => any;
+  postMessage: (message: any) => void;
+}

src/index.css

@@ -86,7 +86,7 @@ body {
     border-color: var(--vscode-activityBar-activeBackground);
 }
 
-.kanbn-task button {
+.kanbn-task-name {
     border: none;
     outline: none;
     background-color: transparent;
@@ -94,7 +94,7 @@ body {
     color: var(--vscode-editor-foreground);
 }
 
-.kanbn-task button:focus, .kanbn-task button:hover {
+.kanbn-task-name:focus, .kanbn-task-name:hover {
     border: none;
     outline: none;
     text-decoration: underline;