Base component hierarchy

To reuse common logic, we have defined a set of components which are extended by others, each providing some functionality, such as:

• AbstractComponent: The root of the component hierarchy. Receives the Angular Injector on the constructor, and gets from it some core shared services. Also defines some common behavior, such as a list of subscriptions that are automatically unsubscribed on destroy, and the addSub method to register a subscription. Defines the ngOnInit and ngOnDestroy methods, so every subclass that overrides one of these must call the super() implementation;
• BaseComponent: Base class for general-purpose components. Provides access to several commonly-used shared services;
• BasePageComponent: Common class for components that represent a 'page', that is, displayed in the Angular <router-outlet>. This is a generic class, parameterized with the data type fetched on initialization. When initializing the data, the onDataInitialized(data) callback method is called. Defines the abstract method resolveMenu(data), which should return which ActiveMenu (or an observable) represents the current page, so on page refresh (F5 / direct link) the appropriated menu can be highlighted;
• BaseSearchPageComponent: Common class for components that represent a search page. A search page generally has a filter, and display results with a given type. Both the data type fetched upon initialization and the type of the displayed results are generic parameters. The form state is remembered when navigating back (eg, from the details page). Subclasses must implement the following methods:
  • getFormControlNames(): Return the names of the filter fields;
  • toSearchParams(formValue): The form state and the query fields may be different (example, ranges are arrays in queries, and separated fields in the form. This method converts the form value to the query. There is no need to worry about removing unused form variables, as the generated code only uses valid fields;
  • doSearch(query): Return the observable of the HTTP response which will perform the search on the server;
  • getInitialFormValue(data): Not actually abstract, but can be overridden. By convention, all fetched DataForSearch classes have a query field, with the default filters. The default implementation returns the data.query field, but it could be customized.
• BaseViewPageComponent: Common class for pages that just shows data;
• BaseControlComponent: Superclass for components that represent a widget displayed in a form, used for data input. Subclasses will generally provide NG_VALUE_ACCESSOR, so the component can be used on Angular forms;
• BaseFormFieldComponent: Superclass for controls which are displayed in a form with a label and a field. Can be marked as required.