hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-18 07:23:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

101353: Fix issues in BrowseByTaxonomyPage and VocabularyTreeview

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html
View File

@@ -5,5 +5,5 @@
(select)="onSelect($event)"> (select)="onSelect($event)">
</ds-vocabulary-treeview> </ds-vocabulary-treeview>
</div> </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> </div>

21
src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts
View File

@@ -25,16 +25,27 @@ export class BrowseByTaxonomyPageComponent implements OnInit {
/** /**
* The query parameters, contain the selected entries * The query parameters, contain the selected entries
*/ */
queryParams: { 'f.subject': string[] }; filterValues: string[];
ngOnInit() { ngOnInit() {
this.vocabularyOptions = { name: 'srsc', closed: true }; 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 { onSelect(detail: VocabularyEntryDetail): void {
this.selectedItems.push(detail); if (!this.selectedItems.includes(detail)) {
const filterValues = this.selectedItems this.selectedItems.push(detail);
.map((item: VocabularyEntryDetail) => `${item.value},equals`); this.filterValues = this.selectedItems
this.queryParams = { 'f.subject': filterValues }; .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`; });
}
} }
} }

8
src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
View File

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

4
src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.spec.ts
View File

@@ -264,14 +264,14 @@ describe('VocabularyTreeviewComponent test suite', () => {
it('should not display checkboxes by default', async () => { it('should not display checkboxes by default', async () => {
fixture.detectChanges(); 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); expect(de.queryAll(By.css('cdk-tree-node')).length).toEqual(3);
}); });
it('should display checkboxes if multiSelect is true', async () => { it('should display checkboxes if multiSelect is true', async () => {
comp.multiSelect = true; comp.multiSelect = true;
fixture.detectChanges(); 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); expect(de.queryAll(By.css('cdk-tree-node')).length).toEqual(3);
}); });
}); });

8
src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts
View File

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