Open or create tasks in a new webview panel

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

View File

@ -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(
// this._extensionPath,
// this._workspacePath,
// this._kanbn,
// message.taskId
// );
vscode.window.showInformationMessage(`Opening task ${message.taskId}`);
KanbnTaskPanel.show(
this._extensionPath,
this._workspacePath,
this._kanbn,
message.taskId,
message.columnName
);
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
vscode.window.showInformationMessage(`Creating new task in column ${message.column}`);
return;
// Update a task
case 'kanbn.update':
// 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}`);
KanbnTaskPanel.show(
this._extensionPath,
this._workspacePath,
this._kanbn,
null,
message.columnName
);
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'))

View File

@ -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 => {
// this._panel.title = index.name;
// });
if (this._taskId !== null) {
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'))

View File

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