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:
Leila Lali
2018-08-31 13:08:27 -07:00
committed by GitHub
parent 8e0c19fc8d
commit b27f69aace
25 changed files with 453 additions and 94 deletions

View File

@@ -305,6 +305,15 @@ class FormContainerBuilder extends ContainerBuilderImpl<sqlops.FormContainer, sq
}
}
private removeComponentActions(formComponent: sqlops.FormComponent): void {
if (formComponent.actions) {
formComponent.actions.forEach(component => {
let componentWrapper = component as ComponentWrapper;
this._component.removeItem(componentWrapper);
});
}
}
addFormItems(formComponents: Array<sqlops.FormComponent | sqlops.FormComponentGroup>, itemLayout?: sqlops.FormItemLayout): void {
formComponents.forEach(formComponent => {
this.addFormItem(formComponent, itemLayout);
@@ -312,25 +321,56 @@ class FormContainerBuilder extends ContainerBuilderImpl<sqlops.FormContainer, sq
}
addFormItem(formComponent: sqlops.FormComponent | sqlops.FormComponentGroup, itemLayout?: sqlops.FormItemLayout): void {
this.insertFormItem(formComponent, undefined, itemLayout);
}
insertFormItem(formComponent: sqlops.FormComponent | sqlops.FormComponentGroup, index?: number, itemLayout?: sqlops.FormItemLayout): void {
let componentGroup = formComponent as sqlops.FormComponentGroup;
if (componentGroup && componentGroup.components !== undefined) {
let labelComponent = this._builder.text().component();
labelComponent.value = componentGroup.title;
this._component.addItem(labelComponent, { isGroupLabel: true });
this._component.addItem(labelComponent, { isGroupLabel: true }, index);
let componentIndex = index ? index + 1 : undefined;
componentGroup.components.forEach(component => {
let layout = component.layout || itemLayout;
let itemConfig = this.convertToItemConfig(component, layout);
itemConfig.config.isInGroup = true;
this._component.addItem(component.component as ComponentWrapper, itemConfig.config);
this._component.insertItem(component.component as ComponentWrapper, componentIndex, itemConfig.config);
if (componentIndex) {
componentIndex ++;
}
this.addComponentActions(component, layout);
});
} else {
formComponent = formComponent as sqlops.FormComponent;
let itemImpl = this.convertToItemConfig(formComponent, itemLayout);
this._component.addItem(formComponent.component as ComponentWrapper, itemImpl.config);
this._component.addItem(formComponent.component as ComponentWrapper, itemImpl.config, index);
this.addComponentActions(formComponent, itemLayout);
}
}
removeFormItem(formComponent: sqlops.FormComponent | sqlops.FormComponentGroup): boolean {
let componentGroup = formComponent as sqlops.FormComponentGroup;
let result: boolean = false;
if (componentGroup && componentGroup.components !== undefined) {
let firstComponent = componentGroup.components[0];
let index = this._component.itemConfigs.findIndex(x => x.component.id === firstComponent.component.id);
if (index) {
result = this._component.removeItemAt(index - 1);
}
componentGroup.components.forEach(element => {
this.removeComponentActions(element);
this._component.removeItem(element.component);
});
} else {
formComponent = formComponent as sqlops.FormComponent;
if (formComponent) {
result = this._component.removeItem(formComponent.component as ComponentWrapper);
this.removeComponentActions(formComponent);
}
}
return result;
}
}
class ToolbarContainerBuilder extends ContainerBuilderImpl<sqlops.ToolbarContainer, sqlops.ToolbarLayout, any> implements sqlops.ToolbarBuilder {
@@ -470,14 +510,42 @@ class ComponentWrapper implements sqlops.Component {
}
}
public addItem(item: sqlops.Component, itemLayout?: any): void {
public removeItemAt(index: number): boolean {
if (index >= 0 && index < this.itemConfigs.length) {
let itemConfig = this.itemConfigs[index];
this._proxy.$removeFromContainer(this._handle, this.id, itemConfig.toIItemConfig());
this.itemConfigs.splice(index, 1);
return true;
}
return false;
}
public removeItem(item: sqlops.Component): boolean {
let index = this.itemConfigs.findIndex(c => c.component.id === item.id);
if (index >= 0 && index < this.itemConfigs.length) {
return this.removeItemAt(index);
}
return false;
}
public insertItem(item: sqlops.Component, index: number, itemLayout?: any) {
this.addItem(item, itemLayout, index);
}
public addItem(item: sqlops.Component, itemLayout?: any, index?: number): void {
let itemImpl = item as ComponentWrapper;
if (!itemImpl) {
throw new Error(nls.localize('unknownComponentType', 'Unkown component type. Must use ModelBuilder to create objects'));
}
let config = new InternalItemConfig(itemImpl, itemLayout);
this.itemConfigs.push(config);
this._proxy.$addToContainer(this._handle, this.id, config.toIItemConfig()).then(undefined, this.handleError);
if (index !== undefined && index >= 0 && index < this.items.length) {
this.itemConfigs.splice(index, 0, config);
} else if (!index) {
this.itemConfigs.push(config);
} else {
throw new Error(nls.localize('invalidIndex', 'The index is invalid.'));
}
this._proxy.$addToContainer(this._handle, this.id, config.toIItemConfig(), index).then(undefined, this.handleError);
}
public setLayout(layout: any): Thenable<void> {

View File

@@ -53,9 +53,14 @@ export class MainThreadModelView extends Disposable implements MainThreadModelVi
return this.execModelViewAction(handle, (modelView) => modelView.clearContainer(componentId));
}
$addToContainer(handle: number, containerId: string, item: IItemConfig): Thenable<void> {
$addToContainer(handle: number, containerId: string, item: IItemConfig, index?: number): Thenable<void> {
return this.execModelViewAction(handle,
(modelView) => modelView.addToContainer(containerId, item));
(modelView) => modelView.addToContainer(containerId, item, index));
}
$removeFromContainer(handle: number, containerId: string, item: IItemConfig): Thenable<void> {
return this.execModelViewAction(handle,
(modelView) => modelView.removeFromContainer(containerId, item));
}
$setLayout(handle: number, componentId: string, layout: any): Thenable<void> {

View File

@@ -634,7 +634,8 @@ export interface MainThreadModelViewShape extends IDisposable {
$registerProvider(id: string): void;
$initializeModel(handle: number, rootComponent: IComponentShape): Thenable<void>;
$clearContainer(handle: number, componentId: string): Thenable<void>;
$addToContainer(handle: number, containerId: string, item: IItemConfig): Thenable<void>;
$addToContainer(handle: number, containerId: string, item: IItemConfig, index?: number): Thenable<void>;
$removeFromContainer(handle: number, containerId: string, item: IItemConfig): Thenable<void>;
$setLayout(handle: number, componentId: string, layout: any): Thenable<void>;
$setProperties(handle: number, componentId: string, properties: { [key: string]: any }): Thenable<void>;
$registerEvent(handle: number, componentId: string): Thenable<void>;