mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-26 17:23:15 -05:00
model view remove and insert components (#2351)
* added the ability to remove a component from a container to insert it to a position
This commit is contained in:
@@ -91,10 +91,6 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC
|
||||
|
||||
/// IComponent implementation
|
||||
|
||||
public layout(): void {
|
||||
this._changeRef.detectChanges();
|
||||
}
|
||||
|
||||
public setLayout(layout: any): void {
|
||||
// TODO allow configuring the look and feel
|
||||
this.layout();
|
||||
|
||||
@@ -81,10 +81,6 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
|
||||
}
|
||||
/// IComponent implementation
|
||||
|
||||
public layout(): void {
|
||||
this._changeRef.detectChanges();
|
||||
}
|
||||
|
||||
public setLayout (layout: any): void {
|
||||
// TODO allow configuring the look and feel
|
||||
this.layout();
|
||||
|
||||
@@ -63,10 +63,6 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
|
||||
|
||||
/// IComponent implementation
|
||||
|
||||
public layout(): void {
|
||||
this._changeRef.detectChanges();
|
||||
}
|
||||
|
||||
public setLayout(layout: any): void {
|
||||
// TODO allow configuring the look and feel
|
||||
this.layout();
|
||||
|
||||
@@ -21,6 +21,7 @@ import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentW
|
||||
import URI from 'vs/base/common/uri';
|
||||
import { IdGenerator } from 'vs/base/common/idGenerator';
|
||||
import { createCSSRule, removeCSSRulesContainingSelector } from 'vs/base/browser/dom';
|
||||
import * as nls from 'vs/nls';
|
||||
|
||||
|
||||
export type IUserFriendlyIcon = string | URI | { light: string | URI; dark: string | URI };
|
||||
@@ -46,7 +47,9 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
|
||||
protected _onEventEmitter = new Emitter<IComponentEventArgs>();
|
||||
|
||||
public layout(): void {
|
||||
this._changeRef.detectChanges();
|
||||
if (!this._changeRef['destroyed']) {
|
||||
this._changeRef.detectChanges();
|
||||
}
|
||||
}
|
||||
|
||||
protected baseInit(): void {
|
||||
@@ -222,17 +225,34 @@ export abstract class ContainerBase<T> extends ComponentBase {
|
||||
}
|
||||
|
||||
/// IComponent container-related implementation
|
||||
public addToContainer(componentDescriptor: IComponentDescriptor, config: any): void {
|
||||
public addToContainer(componentDescriptor: IComponentDescriptor, config: any, index?: number): void {
|
||||
if (this.items.some(item => item.descriptor.id === componentDescriptor.id && item.descriptor.type === componentDescriptor.type)) {
|
||||
return;
|
||||
}
|
||||
this.items.push(new ItemDescriptor(componentDescriptor, config));
|
||||
if (index !== undefined && index !== null && index >= 0 && index < this.items.length) {
|
||||
this.items.splice(index, 0, new ItemDescriptor(componentDescriptor, config));
|
||||
} else if(!index) {
|
||||
this.items.push(new ItemDescriptor(componentDescriptor, config));
|
||||
} else {
|
||||
throw new Error(nls.localize('invalidIndex', 'The index is invalid.'));
|
||||
}
|
||||
this.modelStore.eventuallyRunOnComponent(componentDescriptor.id, component => component.registerEventHandler(event => {
|
||||
if (event.eventType === ComponentEventType.validityChanged) {
|
||||
this.validate();
|
||||
}
|
||||
}));
|
||||
this._changeRef.detectChanges();
|
||||
return;
|
||||
}
|
||||
|
||||
public removeFromContainer(componentDescriptor: IComponentDescriptor): boolean {
|
||||
let index = this.items.findIndex(item => item.descriptor.id === componentDescriptor.id && item.descriptor.type === componentDescriptor.type);
|
||||
if (index >= 0) {
|
||||
this.items.splice(index, 1);
|
||||
this._changeRef.detectChanges();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
public clearContainer(): void {
|
||||
|
||||
@@ -189,10 +189,6 @@ export default class DeclarativeTableComponent extends ComponentBase implements
|
||||
|
||||
/// IComponent implementation
|
||||
|
||||
public layout(): void {
|
||||
this._changeRef.detectChanges();
|
||||
}
|
||||
|
||||
public setLayout(layout: any): void {
|
||||
// TODO allow configuring the look and feel
|
||||
this.layout();
|
||||
|
||||
@@ -98,10 +98,6 @@ export default class DropDownComponent extends ComponentBase implements ICompone
|
||||
|
||||
/// IComponent implementation
|
||||
|
||||
public layout(): void {
|
||||
this._changeRef.detectChanges();
|
||||
}
|
||||
|
||||
public setLayout(layout: any): void {
|
||||
// TODO allow configuring the look and feel
|
||||
this.layout();
|
||||
|
||||
@@ -104,10 +104,6 @@ export default class FileBrowserTreeComponent extends ComponentBase implements I
|
||||
|
||||
/// IComponent implementation
|
||||
|
||||
public layout(): void {
|
||||
this._changeRef.detectChanges();
|
||||
}
|
||||
|
||||
public setLayout(): void {
|
||||
// TODO allow configuring the look and feel
|
||||
this.layout();
|
||||
|
||||
@@ -152,7 +152,7 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
|
||||
/// IComponent implementation
|
||||
|
||||
public layout(): void {
|
||||
this._changeRef.detectChanges();
|
||||
super.layout();
|
||||
this.layoutInputBox();
|
||||
}
|
||||
|
||||
|
||||
@@ -14,13 +14,14 @@ import { IDisposable } from 'vs/base/common/lifecycle';
|
||||
* @export
|
||||
* @interface IComponent
|
||||
*/
|
||||
export interface IComponent {
|
||||
export interface IComponent extends IDisposable {
|
||||
descriptor: IComponentDescriptor;
|
||||
modelStore: IModelStore;
|
||||
layout();
|
||||
registerEventHandler(handler: (event: IComponentEventArgs) => void): IDisposable;
|
||||
clearContainer?: () => void;
|
||||
addToContainer?: (componentDescriptor: IComponentDescriptor, config: any) => void;
|
||||
addToContainer?: (componentDescriptor: IComponentDescriptor, config: any, index?: number) => void;
|
||||
removeFromContainer?: (componentDescriptor: IComponentDescriptor) => void;
|
||||
setLayout?: (layout: any) => void;
|
||||
setProperties?: (properties: { [key: string]: any; }) => void;
|
||||
enabled: boolean;
|
||||
|
||||
@@ -75,11 +75,6 @@ export default class ListBoxComponent extends ComponentBase implements IComponen
|
||||
}
|
||||
|
||||
/// IComponent implementation
|
||||
|
||||
public layout(): void {
|
||||
this._changeRef.detectChanges();
|
||||
}
|
||||
|
||||
public setLayout(layout: any): void {
|
||||
// TODO allow configuring the look and feel
|
||||
this.layout();
|
||||
|
||||
@@ -60,10 +60,6 @@ export default class LoadingComponent extends ComponentBase implements IComponen
|
||||
|
||||
/// IComponent implementation
|
||||
|
||||
public layout(): void {
|
||||
this._changeRef.detectChanges();
|
||||
}
|
||||
|
||||
public setLayout(): void {
|
||||
this.layout();
|
||||
}
|
||||
|
||||
@@ -51,6 +51,7 @@ export class ModelStore implements IModelStore {
|
||||
let id = component.descriptor.id;
|
||||
this._componentMappings[id] = undefined;
|
||||
this._componentActions[id] = undefined;
|
||||
this._descriptorMappings[id] = undefined;
|
||||
// TODO notify model for cleanup
|
||||
}
|
||||
|
||||
|
||||
@@ -65,10 +65,6 @@ export default class RadioButtonComponent extends ComponentBase implements IComp
|
||||
|
||||
/// IComponent implementation
|
||||
|
||||
public layout(): void {
|
||||
this._changeRef.detectChanges();
|
||||
}
|
||||
|
||||
public setLayout(layout: any): void {
|
||||
// TODO allow configuring the look and feel
|
||||
this.layout();
|
||||
|
||||
@@ -132,8 +132,7 @@ export default class TableComponent extends ComponentBase implements IComponent,
|
||||
|
||||
public layout(): void {
|
||||
this.layoutTable();
|
||||
|
||||
this._changeRef.detectChanges();
|
||||
super.layout();
|
||||
}
|
||||
|
||||
private layoutTable(): void {
|
||||
|
||||
@@ -43,10 +43,6 @@ export default class TextComponent extends ComponentBase implements IComponent,
|
||||
|
||||
/// IComponent implementation
|
||||
|
||||
public layout(): void {
|
||||
this._changeRef.detectChanges();
|
||||
}
|
||||
|
||||
public setLayout(layout: any): void {
|
||||
// TODO allow configuring the look and feel
|
||||
this.layout();
|
||||
|
||||
@@ -123,12 +123,11 @@ export default class TreeComponent extends ComponentBase implements IComponent,
|
||||
/// IComponent implementation
|
||||
|
||||
public layout(): void {
|
||||
this._changeRef.detectChanges();
|
||||
if (this._tree) {
|
||||
|
||||
this.layoutTree();
|
||||
this._tree.refresh();
|
||||
}
|
||||
super.layout();
|
||||
}
|
||||
|
||||
private layoutTree(): void {
|
||||
|
||||
@@ -71,15 +71,31 @@ export abstract class ViewBase extends AngularDisposable implements IModelView {
|
||||
return descriptor;
|
||||
}
|
||||
|
||||
private removeComponent(component: IComponentShape): void {
|
||||
if (component.itemConfigs) {
|
||||
for (let item of component.itemConfigs) {
|
||||
this.removeFromContainer(component.id, item);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
clearContainer(componentId: string): void {
|
||||
this.queueAction(componentId, (component) => component.clearContainer());
|
||||
}
|
||||
|
||||
addToContainer(containerId: string, itemConfig: IItemConfig): void {
|
||||
addToContainer(containerId: string, itemConfig: IItemConfig, index?: number): void {
|
||||
// Do not return the promise as this should be non-blocking
|
||||
this.queueAction(containerId, (component) => {
|
||||
let childDescriptor = this.defineComponent(itemConfig.componentShape);
|
||||
component.addToContainer(childDescriptor, itemConfig.config);
|
||||
component.addToContainer(childDescriptor, itemConfig.config, index);
|
||||
});
|
||||
}
|
||||
|
||||
removeFromContainer(containerId: string, itemConfig: IItemConfig): void {
|
||||
let childDescriptor = this.modelStore.getComponentDescriptor(itemConfig.componentShape.id);
|
||||
this.queueAction(containerId, (component) => {
|
||||
component.removeFromContainer(childDescriptor);
|
||||
this.removeComponent(itemConfig.componentShape);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user