Add multiple ModelView child items at once (#14047)

This commit is contained in:
Charles Gagnon
2021-01-26 15:33:45 -08:00
committed by GitHub
parent d828a1f042
commit e79a80590a
10 changed files with 120 additions and 83 deletions

View File

@@ -289,32 +289,34 @@ export abstract class ContainerBase<T, TPropertyBag extends azdata.ComponentProp
}
/// IComponent container-related implementation
public addToContainer(componentDescriptor: IComponentDescriptor, config: any, index?: number): void {
this.logService.debug(`Adding component ${componentDescriptor.id} to container ${this.descriptor.id}`);
if (!componentDescriptor) {
return;
}
if (this.items.some(item => item.descriptor.id === componentDescriptor.id && item.descriptor.type === componentDescriptor.type)) {
return;
}
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 {0} is invalid.", index));
}
public addToContainer(items: { componentDescriptor: IComponentDescriptor, config: any, index?: number }[]): void {
items.forEach(newItem => {
this.logService.debug(`Adding component ${newItem.componentDescriptor.id} to container ${this.descriptor.id}`);
if (!newItem.componentDescriptor) {
return;
}
if (this.items.some(item => item.descriptor.id === newItem.componentDescriptor.id && item.descriptor.type === newItem.componentDescriptor.type)) {
return;
}
if (newItem.index !== undefined && newItem.index !== null && newItem.index >= 0 && newItem.index <= this.items.length) {
this.items.splice(newItem.index, 0, new ItemDescriptor(newItem.componentDescriptor, newItem.config));
} else if (!newItem.index) {
this.items.push(new ItemDescriptor(newItem.componentDescriptor, newItem.config));
} else {
throw new Error(nls.localize('invalidIndex', "The index {0} is invalid.", newItem.index));
}
this.logService.debug(`Queueing up action to register validation event handler on component ${componentDescriptor.id} in container ${this.descriptor.id}`);
this.modelStore.eventuallyRunOnComponent(componentDescriptor.id, component => {
this.logService.debug(`Registering validation event handler on component ${componentDescriptor.id} in container ${this.descriptor.id}`);
component.registerEventHandler(async event => {
if (event.eventType === ComponentEventType.validityChanged) {
this.logService.debug(`Running validation on container ${this.descriptor.id} because validity of child component ${componentDescriptor.id} changed`);
this.validate().catch(onUnexpectedError);
}
});
}, true);
this.logService.debug(`Queueing up action to register validation event handler on component ${newItem.componentDescriptor.id} in container ${this.descriptor.id}`);
this.modelStore.eventuallyRunOnComponent(newItem.componentDescriptor.id, component => {
this.logService.debug(`Registering validation event handler on component ${newItem.componentDescriptor.id} in container ${this.descriptor.id}`);
component.registerEventHandler(async event => {
if (event.eventType === ComponentEventType.validityChanged) {
this.logService.debug(`Running validation on container ${this.descriptor.id} because validity of child component ${newItem.componentDescriptor.id} changed`);
this.validate().catch(onUnexpectedError);
}
});
}, true);
});
this._changeRef.detectChanges();
this.onItemsUpdated();
return;

View File

@@ -93,8 +93,8 @@ export default class LoadingComponent extends ComponentBase<azdata.LoadingCompon
return this.getPropertyOrDefault<string>((props) => props.loadingCompletedText, localize('loadingCompletedMessage', "Loading completed"));
}
public addToContainer(componentDescriptor: IComponentDescriptor): void {
this._component = componentDescriptor;
public addToContainer(items: { componentDescriptor: IComponentDescriptor }[]): void {
this._component = items[0].componentDescriptor;
this.layout();
}

View File

@@ -68,9 +68,14 @@ export abstract class ViewBase extends AngularDisposable implements IModelView {
this.setLayout(component.id, component.layout, true);
this.registerEvent(component.id, true);
if (component.itemConfigs) {
for (let item of component.itemConfigs) {
this.addToContainer(component.id, item, undefined, true);
}
const items = component.itemConfigs.map(itemConfig => {
return {
itemConfig,
index: undefined,
initial: true
};
});
this.addToContainer(component.id, items);
}
return descriptor;
@@ -97,17 +102,26 @@ export abstract class ViewBase extends AngularDisposable implements IModelView {
});
}
addToContainer(containerId: string, itemConfig: IItemConfig, index?: number, initial: boolean = false): void {
this.logService.debug(`Queueing action to add component ${itemConfig.componentShape.id} to container ${containerId}`);
addToContainer(containerId: string, items: { itemConfig: IItemConfig, index?: number }[], initial?: boolean): void {
const itemNames = items.map(item => item.itemConfig.componentShape.id).join(',');
this.logService.debug(`Queueing action to add components ${itemNames} to container ${containerId}`);
// Do not return the promise as this should be non-blocking
this.queueAction(containerId, (component) => {
if (!component.addToContainer) {
this.logService.warn(`Container ${containerId} is trying to add component ${itemConfig.componentShape.id} but does not implement addToContainer!`);
this.logService.warn(`Container ${containerId} is trying to add components ${itemNames} but does not implement addToContainer!`);
return;
}
this.logService.debug(`Adding component ${itemConfig.componentShape.id} to container ${containerId}`);
let childDescriptor = this.defineComponent(itemConfig.componentShape);
component.addToContainer(childDescriptor, itemConfig.config, index);
this.logService.debug(`Adding components ${itemNames} to container ${containerId}`);
const itemConfigs = items.map(item => {
const componentDescriptor = this.defineComponent(item.itemConfig.componentShape);
return {
componentDescriptor,
config: item.itemConfig.config,
index: item.index
};
});
component.addToContainer(itemConfigs);
}, initial);
}