101353: Fix issues in BrowseByTaxonomyPage and VocabularyTreeview

This commit is contained in:
Nona Luypaert
2023-04-26 15:57:42 +02:00
parent a80cae8fb5
commit 03bf4befab
5 changed files with 29 additions and 14 deletions

View File

@@ -5,5 +5,5 @@
(select)="onSelect($event)">
</ds-vocabulary-treeview>
</div>
<a class="btn btn-primary" [routerLink]="['/search']" [queryParams]=queryParams>{{ 'browse.taxonomy.button' | translate }}</a>
<a class="btn btn-primary" [routerLink]="['/search']" [queryParams]="{ 'f.subject': filterValues }">{{ 'browse.taxonomy.button' | translate }}</a>
</div>

View File

@@ -25,16 +25,27 @@ export class BrowseByTaxonomyPageComponent implements OnInit {
/**
* The query parameters, contain the selected entries
*/
queryParams: { 'f.subject': string[] };
filterValues: string[];
ngOnInit() {
this.vocabularyOptions = { name: 'srsc', closed: true };
}
/**
* Adds detail to selectedItems, transforms it to be used as query parameter
* and adds that to filterValues. If they already contained the detail,
* it gets deleted from both arrays.
*
* @param detail VocabularyEntryDetail to be added/deleted
*/
onSelect(detail: VocabularyEntryDetail): void {
this.selectedItems.push(detail);
const filterValues = this.selectedItems
.map((item: VocabularyEntryDetail) => `${item.value},equals`);
this.queryParams = { 'f.subject': filterValues };
if (!this.selectedItems.includes(detail)) {
this.selectedItems.push(detail);
this.filterValues = this.selectedItems
.map((item: VocabularyEntryDetail) => `${item.value},equals`);
} else {
this.selectedItems = this.selectedItems.filter((entry: VocabularyEntryDetail) => { return entry !== detail; });
this.filterValues = this.filterValues.filter((value: string) => { return value !== `${detail.value},equals`; });
}
}
}

View File

@@ -33,8 +33,8 @@
container="body"
(click)="onSelect(node.item)">
<span *ngIf="multiSelect" class="form-check">
<input class="form-check-input" type="checkbox" id="leaf-node-checkbox" [checked]="node.isSelected">
<label class="form-check-label" for="leaf-node-checkbox">{{node.item.display}}</label>
<input class="form-check-input" type="checkbox" id="leaf-node-checkbox_{{node.item.id}}" [checked]="node.isSelected">
<label class="form-check-label" for="leaf-node-checkbox_{{node.item.id}}">{{node.item.display}}</label>
</span>
<span *ngIf="!multiSelect">{{node.item.display}}</span>
</button>
@@ -57,8 +57,8 @@
container="body"
(click)="onSelect(node.item)">
<span *ngIf="multiSelect" class="form-check">
<input class="form-check-input" type="checkbox" id="expandable-node-checkbox" [checked]="node.isSelected">
<label class="form-check-label" for="expandable-node-checkbox">{{node.item.display}}</label>
<input class="form-check-input" type="checkbox" id="expandable-node-checkbox_{{node.item.id}}" [checked]="node.isSelected">
<label class="form-check-label" for="expandable-node-checkbox_{{node.item.id}}">{{node.item.display}}</label>
</span>
<span *ngIf="!multiSelect">{{node.item.display}}</span>
</button>

View File

@@ -264,14 +264,14 @@ describe('VocabularyTreeviewComponent test suite', () => {
it('should not display checkboxes by default', async () => {
fixture.detectChanges();
expect(de.query(By.css('input[checkbox]'))).toBeNull();
expect(de.query(By.css('.form-check-input'))).toBeNull();
expect(de.queryAll(By.css('cdk-tree-node')).length).toEqual(3);
});
it('should display checkboxes if multiSelect is true', async () => {
comp.multiSelect = true;
fixture.detectChanges();
expect(de.queryAll(By.css('#leaf-node-checkbox')).length).toEqual(3);
expect(de.queryAll(By.css('.form-check-input')).length).toEqual(3);
expect(de.queryAll(By.css('cdk-tree-node')).length).toEqual(3);
});
});

View File

@@ -245,8 +245,12 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit {
* Method called on entry select
*/
onSelect(item: VocabularyEntryDetail) {
this.selectedItems.push(item.id);
this.select.emit(item);
if (!this.selectedItems.includes(item.id)) {
this.selectedItems.push(item.id);
this.select.emit(item);
} else {
this.selectedItems = this.selectedItems.filter((detail: string) => { return detail !== item.id; });
}
}
/**