from @art-lowel: create array and map all options to it

I created a list in the component that contains all the possible values a button or an option in the select can have, that way we can get rid of those *ngIfs in the template, and render everything with an *ngFor
Instead of putting all the data needed to select an option and to redirect to the correct option in the template, I created an interface to represent all the info we need: ComColPageNavOption
During ngOnInit, I first take the browseBy types in the config, and perform a map operation on them, that basically means, turn every element of this array in to something else using the function inside the map operator.
So inside the map function I each BrowseByTypeConfig object in to a ComColPageNavOption object
Afterwards I check whether we're dealing with a collection or a community, and in each case I create a ComColPageNavOption object, and add it to the front of the allOptions array
...this.allOptions means enumerate everything that's currently in the allOptions array, so I put my new object first, then enumerate everything that was already there, and assign the result again to this.allOptions
This commit is contained in:
L. Henze
2019-10-08 12:15:25 -04:00
parent 61edfea1de
commit 3d8ffd6fe3
2 changed files with 34 additions and 29 deletions

View File

@@ -1,8 +1,17 @@
import { Component, Inject, Input, OnInit } from '@angular/core';
import { filter, map, startWith, tap } from 'rxjs/operators';
import { getCollectionPageRoute } from '../../+collection-page/collection-page-routing.module';
import { getCommunityPageRoute } from '../../+community-page/community-page-routing.module';
import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
import { Router, ActivatedRoute, RouterModule } from '@angular/router';
import { BrowseByTypeConfig } from '../../../config/browse-by-type-config.interface';
export interface ComColPageNavOption {
id: string;
label: string,
routerLink: string
params?: any;
};
/**
* A component to display the "Browse By" section of a Community or Collection page
* It expects the ID of the Community or Collection as input to be passed on as a scope
@@ -23,11 +32,34 @@ export class ComcolPageBrowseByComponent implements OnInit {
*/
types: BrowseByTypeConfig[];
allOptions: ComColPageNavOption[];
constructor(@Inject(GLOBAL_CONFIG) public config: GlobalConfig, private router: Router) {
}
ngOnInit(): void {
this.types = this.config.browseBy.types;
this.allOptions = this.config.browseBy.types
.map((config: BrowseByTypeConfig) => ({
id: config.id,
label: `browse.comcol.by.${config.id}`,
routerLink: `/browse/${config.id}`,
params: { scope: this.id }
}));
if (this.contentType === 'collection') {
this.allOptions = [ {
id: this.id,
label: 'collection.page.browse.recent.head',
routerLink: getCollectionPageRoute(this.id)
}, ...this.allOptions ];
} else if (this.contentType === 'community') {
this.allOptions = [{
id: this.id,
label: 'community.all-lists.head',
routerLink: getCommunityPageRoute(this.id)
}, ...this.allOptions ];
}
}
onSelectChange(target) {
const optionIndex = target.selectedIndex;