Skip to content

Commit 69b3d3a

Browse files
timheuertimheuer
committed
Adding new button, refactoring
1 parent 11bd44b commit 69b3d3a

File tree

5 files changed

+77
-55
lines changed

5 files changed

+77
-55
lines changed

‎src/addNewResource.ts‎

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { window, Disposable, QuickInput, QuickInputButtons, ExtensionContext } from 'vscode';
2+
import { AppConstants } from './utilities/constants';
23

34
export async function newResourceInput(context: ExtensionContext) {
45

@@ -9,7 +10,7 @@ export async function newResourceInput(context: ExtensionContext) {
910
totalSteps: number;
1011
key: string;
1112
value: string;
12-
comment: string | string;
13+
comment: string | string;
1314
}
1415

1516
async function collectInputs() {
@@ -18,45 +19,45 @@ export async function newResourceInput(context: ExtensionContext) {
1819
return state as State;
1920
}
2021

21-
const title = 'Add new resource';
22+
const title = AppConstants.addNewTitle;
2223

2324
async function inputKey(input: MultiStepInput, state: Partial<State>) {
24-
state.key = await input.showInputBox({
25-
title,
26-
step: 1,
27-
totalSteps: 3,
28-
value: state.key || '',
29-
prompt: 'Provide a Key for the resource',
30-
validate: validateNotNull,
31-
shouldResume: shouldResume
32-
});
33-
return (input: MultiStepInput) => inputValue(input, state);
34-
}
35-
36-
async function inputValue(input: MultiStepInput, state: Partial<State>) {
37-
state.value = await input.showInputBox({
38-
title,
39-
step: 2,
40-
totalSteps: 3,
41-
value: state.value || '',
42-
prompt: 'Provide a Value for the resource',
43-
validate: validateNotNull,
44-
shouldResume: shouldResume
45-
});
46-
return (input: MultiStepInput) => inputComment(input, state);
47-
}
48-
49-
async function inputComment(input: MultiStepInput, state: Partial<State>) {
50-
state.comment = await input.showInputBox({
51-
title,
52-
step: 3,
53-
totalSteps: 3,
54-
value: state.comment || '',
55-
prompt: 'Provide a Comment for the resource',
56-
validate: validateNotNull,
57-
shouldResume: shouldResume
58-
});
59-
}
25+
state.key = await input.showInputBox({
26+
title,
27+
step: 1,
28+
totalSteps: 3,
29+
value: state.key || '',
30+
prompt: AppConstants.promptKeyName,
31+
validate: validateNotNull,
32+
shouldResume: shouldResume
33+
});
34+
return (input: MultiStepInput) => inputValue(input, state);
35+
}
36+
37+
async function inputValue(input: MultiStepInput, state: Partial<State>) {
38+
state.value = await input.showInputBox({
39+
title,
40+
step: 2,
41+
totalSteps: 3,
42+
value: state.value || '',
43+
prompt: AppConstants.promptValueName,
44+
validate: validateNotNull,
45+
shouldResume: shouldResume
46+
});
47+
return (input: MultiStepInput) => inputComment(input, state);
48+
}
49+
50+
async function inputComment(input: MultiStepInput, state: Partial<State>) {
51+
state.comment = await input.showInputBox({
52+
title,
53+
step: 3,
54+
totalSteps: 3,
55+
value: state.comment || '',
56+
prompt: AppConstants.promptCommentName,
57+
validate: validateNotNull,
58+
shouldResume: shouldResume
59+
});
60+
}
6061

6162
function shouldResume() {
6263
// Could show a notification with the option to resume.
@@ -71,7 +72,7 @@ export async function newResourceInput(context: ExtensionContext) {
7172
}
7273

7374
const state = await collectInputs();
74-
75+
7576
return state;
7677
}
7778

@@ -138,7 +139,7 @@ class MultiStepInput {
138139
}
139140
}
140141

141-
async showInputBox<P extends InputBoxParameters>({ title, step, totalSteps, value, prompt, validate, buttons, shouldResume, placeholder }: P) {
142+
async showInputBox<P extends InputBoxParameters>({ title, step, totalSteps, value, prompt, validate, shouldResume, placeholder }: P) {
142143
const disposables: Disposable[] = [];
143144
try {
144145
return await new Promise<string | (P extends { buttons: (infer I)[] } ? I : never)>((resolve, reject) => {
@@ -149,8 +150,7 @@ class MultiStepInput {
149150
input.value = value || '';
150151
input.prompt = prompt;
151152
input.buttons = [
152-
...(this.steps.length > 1 ? [QuickInputButtons.Back] : []),
153-
...(buttons || [])
153+
...(this.steps.length > 1 ? [QuickInputButtons.Back] : [])
154154
];
155155
input.placeholder = placeholder;
156156
let validating = validate('');

‎src/extension.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export function activate(context: vscode.ExtensionContext) {
1010
printChannelOutput("ResX Editor extension activated.", true);
1111

1212
context.subscriptions.push(ResxProvider.register(context));
13-
13+
1414
}
1515

1616
/**
@@ -20,7 +20,7 @@ export function activate(context: vscode.ExtensionContext) {
2020
* @param reveal Whether the output channel should be revealed.
2121
*/
2222
export const printChannelOutput = (content: string, verbose: boolean, reveal = false): void => {
23-
23+
2424
// do not throw on logging, just log to console in the event of an error
2525
try {
2626
if (!outputChannel) {
@@ -30,19 +30,18 @@ export const printChannelOutput = (content: string, verbose: boolean, reveal = f
3030
if (verbose && !vscode.workspace.getConfiguration("resx-editor").get("verboseLogging")) {
3131
return;
3232
}
33-
33+
3434
const timestamp = new Date().toISOString();
3535

3636
outputChannel.appendLine(`[${timestamp}] ${content}`);
37-
37+
3838
if (reveal) {
3939
outputChannel.show(true);
4040
}
4141
}
42-
catch (e)
43-
{
42+
catch (e) {
4443
console.log(e);
4544
}
4645
};
4746

48-
export function deactivate() {}
47+
export function deactivate() { }

‎src/resxProvider.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as resx from 'resx';
33
import { getNonce } from './utilities/getNonce';
44
import { printChannelOutput } from './extension';
55
import { newResourceInput } from './addNewResource';
6+
import { AppConstants } from './utilities/constants';
67

78
export class ResxProvider implements vscode.CustomTextEditorProvider {
89

@@ -13,7 +14,7 @@ export class ResxProvider implements vscode.CustomTextEditorProvider {
1314
return providerRegistration;
1415
}
1516

16-
private static readonly viewType = 'resx-editor.editor';
17+
private static readonly viewType = AppConstants.viewTypeId;
1718
private registered = false;
1819
private currentPanel: vscode.WebviewPanel | undefined = undefined;
1920

@@ -40,14 +41,14 @@ export class ResxProvider implements vscode.CustomTextEditorProvider {
4041
if (!this.registered) {
4142
printChannelOutput("deleteResource command registered", true);
4243
this.registered = true;
43-
let deleteCommand = vscode.commands.registerCommand('resx-editor.deleteResource', () => {
44+
let deleteCommand = vscode.commands.registerCommand(AppConstants.deleteResource, () => {
4445

4546
this.currentPanel?.webview.postMessage({
4647
type: 'delete'
4748
});
4849
});
4950

50-
let addCommand = vscode.commands.registerCommand('resx-editor.addNewResource', () => {
51+
let addCommand = vscode.commands.registerCommand(AppConstants.commandAddNewResource, () => {
5152
// get all the inputs we need
5253
const inputs = newResourceInput(this.context);
5354
// then do something with them
@@ -102,6 +103,10 @@ export class ResxProvider implements vscode.CustomTextEditorProvider {
102103
printChannelOutput(e.message, true);
103104
vscode.window.showInformationMessage(e.message);
104105
return;
106+
case 'add':
107+
vscode.commands.executeCommand(AppConstants.commandAddNewResource);
108+
return;
109+
105110
}
106111
});
107112

@@ -131,10 +136,11 @@ export class ResxProvider implements vscode.CustomTextEditorProvider {
131136
<meta name="viewport" content="width=device-width, initial-scale=1.0">
132137
<meta
133138
http-equiv="Content-Security-Policy"
134-
content="default-src 'none'; img-src ${webview.cspSource} https:; script-src ${webview.cspSource}; style-src ${webview.cspSource};script-src 'nonce-${nonce}';"
139+
content="default-src 'none'; img-src ${webview.cspSource} https:; script-src ${webview.cspSource}; style-src ${webview.cspSource};"
135140
/>
136141
</head>
137142
<body>
143+
<vscode-button id="add-resource-button">Add New Resource</vscode-button>
138144
<vscode-data-grid id="resource-table" aria-label="Basic" generate-header="sticky" aria-label="Sticky Header"></vscode-data-grid>
139145
<script type="module" nonce="${nonce}" src="${webviewUri}"></script>
140146
</body>

‎src/utilities/constants.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export class AppConstants {
2+
static commandAddNewResource = 'resx-editor.addNewResource';
3+
static deleteResource = 'resx-editor.deleteResource';
4+
static viewTypeId = 'resx-editor.editor';
5+
static promptKeyName = 'Provide a Key for the resource';
6+
static promptValueName = 'Provide a Value for the resource';
7+
static promptCommentName = 'Provide a Comment for the resource';
8+
static addNewTitle = 'Add new resource';
9+
}

‎src/webview/webview.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
1-
import { provideVSCodeDesignSystem, vsCodeDataGrid, vsCodeDataGridCell, vsCodeDataGridRow } from '@vscode/webview-ui-toolkit';
1+
import { provideVSCodeDesignSystem, vsCodeDataGrid, vsCodeDataGridCell, vsCodeDataGridRow, vsCodeButton } from '@vscode/webview-ui-toolkit';
22

33
const vscode = acquireVsCodeApi();
4-
provideVSCodeDesignSystem().register(vsCodeDataGrid(), vsCodeDataGridRow(), vsCodeDataGridCell());
4+
provideVSCodeDesignSystem().register(vsCodeDataGrid(), vsCodeDataGridRow(), vsCodeDataGridCell(), vsCodeButton());
55
let currentRowData = null;
66

77
(function () {
88

99
var table = /** @type {HTMLElement} */ (document.getElementById("resource-table"));
10+
var addNewButton = document.getElementById("add-resource-button");
11+
12+
addNewButton.onclick = () => {
13+
vscode.postMessage({
14+
type: 'add'
15+
});
16+
};
17+
1018

1119
table.onclick = cellClick;
1220
table.oncontextmenu = cellRightClick;

0 commit comments

Comments
 (0)