phares3757/vscode-kanbn
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Open or create tasks in a new webview panel

Browse Source
This commit is contained in:
Gordon
2021-04-02 16:14:58 +01:00
parent b2fc0be4f2
commit 708b130059
9 changed files with 184 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/App.tsx
View File

@ -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]));
setName(event.data.index.name);
setDescription(event.data.index.description);
setColumns(Object.fromEntries(
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);
switch (event.data.type) {
case 'index':
const tasks = Object.fromEntries(event.data.tasks.map(task => [task.id, task]));
setName(event.data.index.name);
setDescription(event.data.index.description);
setColumns(Object.fromEntries(
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);
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}
description={description}
/>
<Board
columns={columns}
startedColumns={startedColumns}
completedColumns={completedColumns}
dateFormat={dateFormat}
/>
{
type === 'index' &&
<React.Fragment>
<Header
name={name}
description={description}
/>
<Board
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>
);
}

22
src/Board.tsx
View File

@ -1,13 +1,10 @@
import { DragDropContext, Droppable } from "react-beautiful-dnd";
import React, { useState } from "react";
import Task from './Task';
import VSCodeApi from "./VSCodeApi";
import TaskItem from './TaskItem';
import { paramCase } from 'param-case';
import VSCodeApi from "./VSCodeApi";
declare var acquireVsCodeApi: Function;
const vscode: VSCodeApi = acquireVsCodeApi();
const onDragEnd = (result, columns, setColumns) => {
const onDragEnd = (result, columns, setColumns, vscode: VSCodeApi) => {
// 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}

1
src/KanbnTask.d.ts vendored
View File

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

19
src/TaskEditor.tsx Normal file
View File

@ -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;

9
src/Task.tsx → src/TaskItem.tsx
View File

@ -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;

6
src/index.css
View File

@ -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 {