Skip to content
Snippets Groups Projects
Commit 3d8ffd6f authored by L. Henze's avatar L. Henze
Browse files

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
parent 61edfea1
Branches
Tags
No related merge requests found
......@@ -12,34 +12,7 @@
<select name="browse-type" class="form-control" aria-label="Browse Community or Collection" (change)="onSelectChange(($event.target))">
<option *ngIf="contentType=='collection'"
[value]="['/collections/' + id ]"
[routerLink]="['/collections/' + id ]"
routerLinkActive="active"
#rla="routerLinkActive"
[attr.selected]="rla.isActive === true ? 'selected' : null " >
{{'collection.page.browse.recent.head' | translate}}
</option>
<option *ngIf="contentType=='community'"
[value]="['/communities/' + id ]"
[routerLink]="['/communities/' + id ]"
routerLinkActive="active"
#rla="routerLinkActive"
[attr.selected]="rla.isActive === true ? 'selected' : null " >
{{'community.all-lists.head' | translate}}
</option>
<option *ngFor="let config of types"
[value]="['/browse/' + config.id]"
[routerLink]="['/browse/' + config.id]"
[queryParams]="{scope: id}"
[attr.data-params]="[id]"
routerLinkActive="active"
#rla="routerLinkActive"
[attr.selected]="rla.isActive === true ? 'selected' : null ">
{{'browse.comcol.by.' + config.id | translate}}
</option>
<option *ngFor="let option of allOptions" >{{ option.label | translate }}</option>
</select>
</div>
</nav>
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;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment