Project structure

Concepts

• Editors
  • DisplayComponent - Viewing and Interaction
  • EditorComponent - Has temp data waiting to be saved
• environment
• styles

Editor data store strategy:

Single copy of fully fetched data, to guarantee data ready when used in components

• allow shared code that deals with multiple domain objects
• always next() the whole store, which has multiple domains

This avoids the following anti-pattern:

Anti-pattern:

ChartEditorContextToolBoxComponent:
  // 3 domains
chartEditorActiveItems: ChartEditorActiveItems;
hierarchyStoreData: Map<string, MisHierarchy>;
hierarchyColumnStoreData: Map<string, MisHierarchyColumn>;

// long and repeated code in each component
ngOnInit() {
  this.subscriptions.push(this.chartEditorActiveItemsStore.getObservable().subscribe((data: any) => {
    this.chartEditorActiveItems = data.get(this.chartEditorActiveItemsStore.activeChartId);
  }));
  this.subscriptions.push(this.chartEditorHierarchyEditorStore.getObservable().subscribe((data: Map<string, MisHierarchy>) => {
    this.hierarchyStoreData = data;
  }));
  this.subscriptions.push(this.chartEditorHierarchyColumnEditorStore.getObservable().subscribe((data: Map<string, MisHierarchyColumn>) => {
    this.hierarchyColumnStoreData = data;
  }));
}

// The following method can't be extracted to a service to be shared
getHierarchyColumnOfHierarchy(columnType: string): MisHierarchyColumn {
  const hierarchyPosition: number = this.hierarchyStoreData.get('' + this.chartEditorActiveItems.activeHierarchyId).hierarchyPosition;
  return first(R.pipe(
      R.filter((it: MisHierarchyColumn) => it.hierarchyPosition === hierarchyPosition),
      R.filter((it: MisHierarchyColumn) => it.columnType === columnType)
  )(this.hierarchyColumnStoreData.toArray()));
}

Problems:

• no guarantee of data ready
• repeated code in each component
• hard to unit test when joining domains

Walkthrough the code structure