mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-18 09:35:39 -05:00
373 lines
10 KiB
TypeScript
373 lines
10 KiB
TypeScript
/*---------------------------------------------------------------------------------------------
|
|
* Copyright (c) Microsoft Corporation. All rights reserved.
|
|
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
|
*--------------------------------------------------------------------------------------------*/
|
|
|
|
'use strict';
|
|
|
|
import * as sqlops from 'sqlops';
|
|
import * as Utils from '../utils';
|
|
import * as vscode from 'vscode';
|
|
import SplitPropertiesPanel from './splitPropertiesPanel';
|
|
import * as fs from 'fs';
|
|
import * as path from 'path';
|
|
|
|
/**
|
|
* The main controller class that initializes the extension
|
|
*/
|
|
export default class MainController implements vscode.Disposable {
|
|
|
|
constructor(protected context: vscode.ExtensionContext) {
|
|
|
|
}
|
|
|
|
// PUBLIC METHODS //////////////////////////////////////////////////////
|
|
|
|
public dispose(): void {
|
|
this.deactivate();
|
|
}
|
|
|
|
/**
|
|
* Deactivates the extension
|
|
*/
|
|
public deactivate(): void {
|
|
Utils.logDebug('Main controller deactivated');
|
|
}
|
|
|
|
public activate(): Promise<boolean> {
|
|
const buttonHtml = fs.readFileSync(path.join(__dirname, 'button.html')).toString();
|
|
const counterHtml = fs.readFileSync(path.join(__dirname, 'counter.html')).toString();
|
|
this.registerSqlServicesModelView();
|
|
this.registerSplitPanelModelView();
|
|
|
|
sqlops.tasks.registerTask('sqlservices.clickTask', (profile) => {
|
|
vscode.window.showInformationMessage(`Clicked from profile ${profile.serverName}.${profile.databaseName}`);
|
|
});
|
|
|
|
vscode.commands.registerCommand('sqlservices.openDialog', () => {
|
|
this.openDialog();
|
|
});
|
|
|
|
vscode.commands.registerCommand('sqlservices.openEditor', () => {
|
|
this.openEditor();
|
|
});
|
|
|
|
vscode.commands.registerCommand('sqlservices.openEditorWithWebView', () => {
|
|
this.openEditorWithWebview(buttonHtml, counterHtml);
|
|
});
|
|
|
|
vscode.commands.registerCommand('sqlservices.openEditorWithWebView2', () => {
|
|
this.openEditorWithWebview2();
|
|
});
|
|
|
|
return Promise.resolve(true);
|
|
}
|
|
|
|
private openDialog(): void {
|
|
let dialog = sqlops.window.modelviewdialog.createDialog('Test dialog');
|
|
let tab1 = sqlops.window.modelviewdialog.createTab('Test tab 1');
|
|
|
|
let tab2 = sqlops.window.modelviewdialog.createTab('Test tab 2');
|
|
tab2.content = 'sqlservices';
|
|
dialog.content = [tab1, tab2];
|
|
dialog.okButton.onClick(() => console.log('ok clicked!'));
|
|
dialog.cancelButton.onClick(() => console.log('cancel clicked!'));
|
|
dialog.okButton.label = 'ok';
|
|
dialog.cancelButton.label = 'no';
|
|
let customButton1 = sqlops.window.modelviewdialog.createButton('Test button 1');
|
|
customButton1.onClick(() => console.log('button 1 clicked!'));
|
|
let customButton2 = sqlops.window.modelviewdialog.createButton('Test button 2');
|
|
customButton2.onClick(() => console.log('button 2 clicked!'));
|
|
dialog.customButtons = [customButton1, customButton2];
|
|
tab1.registerContent(async (view) => {
|
|
let inputBox = view.modelBuilder.inputBox()
|
|
.withProperties({
|
|
//width: 300
|
|
}).component();
|
|
let inputBox2 = view.modelBuilder.inputBox().component();
|
|
|
|
let checkbox = view.modelBuilder.checkBox()
|
|
.withProperties({
|
|
label: 'Copy-only backup'
|
|
})
|
|
.component();
|
|
checkbox.onChanged(e => {
|
|
console.info("inputBox.enabled " + inputBox.enabled);
|
|
inputBox.enabled = !inputBox.enabled;
|
|
});
|
|
let button = view.modelBuilder.button()
|
|
.withProperties({
|
|
label: '+'
|
|
}).component();
|
|
let button3 = view.modelBuilder.button()
|
|
.withProperties({
|
|
label: '-'
|
|
|
|
}).component();
|
|
let button2 = view.modelBuilder.button()
|
|
.component();
|
|
button.onDidClick(e => {
|
|
inputBox2.value = 'Button clicked';
|
|
});
|
|
let dropdown = view.modelBuilder.dropDown()
|
|
.withProperties({
|
|
value: 'Full',
|
|
values: ['Full', 'Differential', 'Transaction Log']
|
|
})
|
|
.component();
|
|
let f = 0;
|
|
inputBox.onTextChanged((params) => {
|
|
vscode.window.showInformationMessage(inputBox.value);
|
|
f = f + 1;
|
|
inputBox2.value = f.toString();
|
|
});
|
|
dropdown.onValueChanged((params) => {
|
|
vscode.window.showInformationMessage(inputBox2.value);
|
|
inputBox.value = dropdown.value;
|
|
});
|
|
let radioButton = view.modelBuilder.radioButton()
|
|
.withProperties({
|
|
value: 'option1',
|
|
name: 'radioButtonOptions',
|
|
label: 'Option 1',
|
|
checked: true
|
|
//width: 300
|
|
}).component();
|
|
let radioButton2 = view.modelBuilder.radioButton()
|
|
.withProperties({
|
|
value: 'option2',
|
|
name: 'radioButtonOptions',
|
|
label: 'Option 2'
|
|
}).component();
|
|
let inputBox3 = view.modelBuilder.inputBox().component();
|
|
let inputBox4 = view.modelBuilder.inputBox().component();
|
|
let form2Model = view.modelBuilder.formContainer()
|
|
.withFormItems([{
|
|
component: inputBox3,
|
|
title: 'inputBox3'
|
|
}, {
|
|
component: inputBox4,
|
|
title: 'inputBox4'
|
|
}], {
|
|
horizontal: true
|
|
}).component();
|
|
let groupModel1 = view.modelBuilder.groupContainer()
|
|
.withLayout({
|
|
}).withItems([
|
|
form2Model
|
|
]).component();
|
|
radioButton.onDidClick(() => {
|
|
inputBox.value = radioButton.value;
|
|
groupModel1.enabled = true;
|
|
});
|
|
radioButton2.onDidClick(() => {
|
|
inputBox.value = radioButton.value;
|
|
groupModel1.enabled = false;
|
|
});
|
|
|
|
let flexRadioButtonsModel = view.modelBuilder.flexContainer()
|
|
.withLayout({
|
|
flexFlow: 'column',
|
|
alignItems: 'left',
|
|
height: 50
|
|
}).withItems([
|
|
radioButton, groupModel1, radioButton2]
|
|
, { flex: '1 1 50%' }).component();
|
|
let formModel = view.modelBuilder.formContainer()
|
|
.withFormItems([{
|
|
component: inputBox,
|
|
title: 'Backup name'
|
|
}, {
|
|
component: inputBox2,
|
|
title: 'Recovery model'
|
|
}, {
|
|
component: dropdown,
|
|
title: 'Backup type'
|
|
}, {
|
|
component: checkbox,
|
|
title: ''
|
|
}, {
|
|
component: inputBox2,
|
|
title: 'Backup files',
|
|
actions: [button, button3]
|
|
}, {
|
|
component: flexRadioButtonsModel,
|
|
title: 'Options'
|
|
}], {
|
|
horizontal: false,
|
|
componentWidth: 400
|
|
}).component();
|
|
await view.initializeModel(formModel);
|
|
});
|
|
|
|
sqlops.window.modelviewdialog.openDialog(dialog);
|
|
}
|
|
|
|
private openEditor(): void {
|
|
let editor = sqlops.workspace.createModelViewEditor('Test Model View');
|
|
editor.registerContent(async view => {
|
|
let inputBox = view.modelBuilder.inputBox()
|
|
.withValidation(component => component.value !== 'valid')
|
|
.component();
|
|
let formModel = view.modelBuilder.formContainer()
|
|
.withFormItems([{
|
|
component: inputBox,
|
|
title: 'Enter anything but "valid"'
|
|
}]).component();
|
|
view.onClosed((params) => {
|
|
vscode.window.showInformationMessage('The model view editor is closed.');
|
|
});
|
|
await view.initializeModel(formModel);
|
|
});
|
|
editor.openEditor();
|
|
}
|
|
|
|
private openEditorWithWebview(html1: string, html2: string): void {
|
|
let editor = sqlops.workspace.createModelViewEditor('Editor webview', { retainContextWhenHidden: true });
|
|
editor.registerContent(async view => {
|
|
let count = 0;
|
|
let webview1 = view.modelBuilder.webView()
|
|
.withProperties({
|
|
html: html1
|
|
})
|
|
.component();
|
|
let webview2 = view.modelBuilder.webView()
|
|
.withProperties({
|
|
html: html2
|
|
})
|
|
.component();
|
|
webview1.onMessage((params) => {
|
|
count++;
|
|
webview2.message = count;
|
|
});
|
|
|
|
let flexModel = view.modelBuilder.flexContainer()
|
|
.withLayout({
|
|
flexFlow: 'column',
|
|
alignItems: 'flex-start',
|
|
height: 500
|
|
}).withItems([
|
|
webview1, webview2
|
|
], { flex: '1 1 50%' })
|
|
.component();
|
|
await view.initializeModel(flexModel);
|
|
});
|
|
editor.openEditor();
|
|
}
|
|
|
|
private openEditorWithWebview2(): void {
|
|
let editor = sqlops.workspace.createModelViewEditor('Editor webview2', { retainContextWhenHidden: true });
|
|
editor.registerContent(async view => {
|
|
|
|
let inputBox = view.modelBuilder.inputBox().component();
|
|
let dropdown = view.modelBuilder.dropDown()
|
|
.withProperties({
|
|
value: 'aa',
|
|
values: ['aa', 'bb', 'cc']
|
|
})
|
|
.component();
|
|
let button = view.modelBuilder.button()
|
|
.withProperties({
|
|
label: 'Run'
|
|
}).component();
|
|
let toolbarModel = view.modelBuilder.toolbarContainer()
|
|
.withToolbarItems([{
|
|
component: inputBox,
|
|
title: 'User name:'
|
|
}, {
|
|
component: dropdown,
|
|
title: 'favorite:'
|
|
}, {
|
|
component: button
|
|
}]).component();
|
|
|
|
|
|
let webview = view.modelBuilder.webView()
|
|
.component();
|
|
|
|
let flexModel = view.modelBuilder.flexContainer().component();
|
|
flexModel.addItem(toolbarModel, { flex: '0' });
|
|
flexModel.addItem(webview, { flex: '1' });
|
|
flexModel.setLayout({
|
|
flexFlow: 'column',
|
|
alignItems: 'stretch',
|
|
height: '100%'
|
|
});
|
|
|
|
let templateValues = {url: 'http://whoisactive.com/docs/'};
|
|
Utils.renderTemplateHtml(path.join(__dirname, '..'), 'templateTab.html', templateValues)
|
|
.then(html => {
|
|
webview.html = html;
|
|
});
|
|
|
|
await view.initializeModel(flexModel);
|
|
});
|
|
editor.openEditor();
|
|
}
|
|
|
|
|
|
private registerSqlServicesModelView(): void {
|
|
sqlops.ui.registerModelViewProvider('sqlservices', async (view) => {
|
|
let flexModel = view.modelBuilder.flexContainer()
|
|
.withLayout({
|
|
flexFlow: 'row',
|
|
alignItems: 'center'
|
|
}).withItems([
|
|
// 1st child panel with N cards
|
|
view.modelBuilder.flexContainer()
|
|
.withLayout({
|
|
flexFlow: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
})
|
|
.withItems([
|
|
view.modelBuilder.card()
|
|
.withProperties<sqlops.CardProperties>({
|
|
label: 'label1',
|
|
value: 'value1',
|
|
actions: [{ label: 'action' }]
|
|
})
|
|
.component()
|
|
]).component(),
|
|
// 2nd child panel with N cards
|
|
view.modelBuilder.flexContainer()
|
|
.withLayout({ flexFlow: 'column' })
|
|
.withItems([
|
|
view.modelBuilder.card()
|
|
.withProperties<sqlops.CardProperties>({
|
|
label: 'label2',
|
|
value: 'value2',
|
|
actions: [{ label: 'action' }]
|
|
})
|
|
.component()
|
|
]).component()
|
|
], { flex: '1 1 50%' })
|
|
.component();
|
|
await view.initializeModel(flexModel);
|
|
});
|
|
}
|
|
|
|
private registerSplitPanelModelView(): void {
|
|
sqlops.ui.registerModelViewProvider('splitPanel', async (view) => {
|
|
let numPanels = 3;
|
|
let splitPanel = new SplitPropertiesPanel(view, numPanels);
|
|
await view.initializeModel(splitPanel.modelBase);
|
|
|
|
// Add a bunch of cards after an initial timeout
|
|
setTimeout(async () => {
|
|
|
|
for (let i = 0; i < 10; i++) {
|
|
let panel = i % numPanels;
|
|
let card = view.modelBuilder.card().component();
|
|
card.label = `label${i.toString()}`;
|
|
|
|
splitPanel.addItem(card, panel);
|
|
}
|
|
|
|
}, 0);
|
|
|
|
});
|
|
}
|
|
}
|
|
|