Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Port dspace-7_x] Refactored community & collection pages #2800

Merged
merged 7 commits into from
Feb 14, 2024
Merged

[Port dspace-7_x] Refactored community & collection pages #2800

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
480c7a6
Destroy dynamically generated components in onDestroy & replace depre…
alexandrevryghem Dec 26, 2023
b28e24f
Merge branch 'memory-leak-fixes_contribute-7.4' into memory-leak-fixe…
alexandrevryghem Dec 28, 2023
6497a15
Destroy dynamically generated components in onDestroy & replace depre…
alexandrevryghem Dec 28, 2023
ff55646
108588: Fixed accessibility issues on ds-comcol-page-browse-by
alexandrevryghem Dec 4, 2023
835891f
Merge remote-tracking branch 'upstream/dspace-7_x' into generify-comp…
alexandrevryghem Feb 6, 2024
effa19f
111679: Restored missing inAndOutputNames on ClaimedTaskActionsLoader…
alexandrevryghem Feb 7, 2024
0366e8b
Replace routerLinkActive with [class.active] to ensure visibility of …
alexandrevryghem Feb 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 27 additions & 16 deletions ...result-grid-element/item-search-result/item-admin-search-result-grid-element.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, ComponentFactoryResolver, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Component, ElementRef, OnInit, ViewChild, ComponentRef, OnDestroy } from '@angular/core';
import { Item } from '../../../../../core/shared/item.model';
import { ViewMode } from '../../../../../core/shared/view-mode.model';
import {
Expand All @@ -14,6 +14,7 @@ import { GenericConstructor } from '../../../../../core/shared/generic-construct
import { ListableObjectDirective } from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
import { ThemeService } from '../../../../../shared/theme-support/theme.service';
import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
import { hasValue } from '../../../../../shared/empty.util';

@listableObjectComponent(ItemSearchResult, ViewMode.GridElement, Context.AdminSearch)
@Component({
Expand All @@ -24,17 +25,18 @@ import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service
/**
* The component for displaying a list element for an item search result on the admin search page
*/
export class ItemAdminSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> implements OnInit {
export class ItemAdminSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> implements OnDestroy, OnInit {
@ViewChild(ListableObjectDirective, { static: true }) listableObjectDirective: ListableObjectDirective;
@ViewChild('badges', { static: true }) badges: ElementRef;
@ViewChild('buttons', { static: true }) buttons: ElementRef;

protected compRef: ComponentRef<Component>;

constructor(
public dsoNameService: DSONameService,
protected truncatableService: TruncatableService,
protected bitstreamDataService: BitstreamDataService,
private themeService: ThemeService,
private componentFactoryResolver: ComponentFactoryResolver,
) {
super(dsoNameService, truncatableService, bitstreamDataService);
}
Expand All @@ -44,23 +46,32 @@ export class ItemAdminSearchResultGridElementComponent extends SearchResultGridE
*/
ngOnInit(): void {
super.ngOnInit();
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.getComponent());
const component: GenericConstructor<Component> = this.getComponent();

const viewContainerRef = this.listableObjectDirective.viewContainerRef;
viewContainerRef.clear();

const componentRef = viewContainerRef.createComponent(
componentFactory,
0,
undefined,
[
[this.badges.nativeElement],
[this.buttons.nativeElement]
]);
(componentRef.instance as any).object = this.object;
(componentRef.instance as any).index = this.index;
(componentRef.instance as any).linkType = this.linkType;
(componentRef.instance as any).listID = this.listID;
this.compRef = viewContainerRef.createComponent(
component, {
index: 0,
injector: undefined,
projectableNodes: [
[this.badges.nativeElement],
[this.buttons.nativeElement],
],
},
);
this.compRef.setInput('object',this.object);
this.compRef.setInput('index', this.index);
this.compRef.setInput('linkType', this.linkType);
this.compRef.setInput('listID', this.listID);
}

ngOnDestroy(): void {
if (hasValue(this.compRef)) {
this.compRef.destroy();
this.compRef = undefined;
}
}

/**
Expand Down
50 changes: 30 additions & 20 deletions ...lement/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, ComponentFactoryResolver, ElementRef, ViewChild } from '@angular/core';
import { Component, ElementRef, ViewChild, ComponentRef, OnDestroy, OnInit } from '@angular/core';
import { Item } from '../../../../../core/shared/item.model';
import { ViewMode } from '../../../../../core/shared/view-mode.model';
import {
Expand All @@ -24,6 +24,7 @@ import { take } from 'rxjs/operators';
import { WorkflowItemSearchResult } from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
import { ThemeService } from '../../../../../shared/theme-support/theme.service';
import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
import { hasValue } from '../../../../../shared/empty.util';

@listableObjectComponent(WorkflowItemSearchResult, ViewMode.GridElement, Context.AdminWorkflowSearch)
@Component({
Expand All @@ -34,7 +35,7 @@ import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service
/**
* The component for displaying a grid element for an workflow item on the admin workflow search page
*/
export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends SearchResultGridElementComponent<WorkflowItemSearchResult, WorkflowItem> {
export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends SearchResultGridElementComponent<WorkflowItemSearchResult, WorkflowItem> implements OnDestroy, OnInit {
/**
* Directive used to render the dynamic component in
*/
Expand All @@ -55,9 +56,10 @@ export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends S
*/
public item$: Observable<Item>;

protected compRef: ComponentRef<Component>;

constructor(
public dsoNameService: DSONameService,
private componentFactoryResolver: ComponentFactoryResolver,
private linkService: LinkService,
protected truncatableService: TruncatableService,
private themeService: ThemeService,
Expand All @@ -75,26 +77,34 @@ export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends S
this.dso = this.linkService.resolveLink(this.dso, followLink('item'));
this.item$ = (this.dso.item as Observable<RemoteData<Item>>).pipe(getAllSucceededRemoteData(), getRemoteDataPayload());
this.item$.pipe(take(1)).subscribe((item: Item) => {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.getComponent(item));
const component: GenericConstructor<Component> = this.getComponent(item);

const viewContainerRef = this.listableObjectDirective.viewContainerRef;
viewContainerRef.clear();
const viewContainerRef = this.listableObjectDirective.viewContainerRef;
viewContainerRef.clear();

const componentRef = viewContainerRef.createComponent(
componentFactory,
0,
undefined,
[
this.compRef = viewContainerRef.createComponent(
component, {
index: 0,
injector: undefined,
projectableNodes: [
[this.badges.nativeElement],
[this.buttons.nativeElement]
]);
(componentRef.instance as any).object = item;
(componentRef.instance as any).index = this.index;
(componentRef.instance as any).linkType = this.linkType;
(componentRef.instance as any).listID = this.listID;
componentRef.changeDetectorRef.detectChanges();
}
);
[this.buttons.nativeElement],
],
},
);
this.compRef.setInput('object', item);
this.compRef.setInput('index', this.index);
this.compRef.setInput('linkType', this.linkType);
this.compRef.setInput('listID', this.listID);
this.compRef.changeDetectorRef.detectChanges();
});
}

ngOnDestroy(): void {
if (hasValue(this.compRef)) {
this.compRef.destroy();
this.compRef = undefined;
}
}

/**
Expand Down
42 changes: 27 additions & 15 deletions ...ment/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, ComponentFactoryResolver, ElementRef, ViewChild, OnInit } from '@angular/core';
import { Component, ElementRef, ViewChild, OnInit, OnDestroy, ComponentRef } from '@angular/core';

import { BehaviorSubject, Observable } from 'rxjs';
import { map, mergeMap, take, tap } from 'rxjs/operators';
Expand Down Expand Up @@ -37,6 +37,7 @@ import { SupervisionOrder } from '../../../../../core/supervision-order/models/s
import { PaginatedList } from '../../../../../core/data/paginated-list.model';
import { SupervisionOrderDataService } from '../../../../../core/supervision-order/supervision-order-data.service';
import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
import { hasValue } from '../../../../../shared/empty.util';

@listableObjectComponent(WorkspaceItemSearchResult, ViewMode.GridElement, Context.AdminWorkflowSearch)
@Component({
Expand All @@ -47,7 +48,7 @@ import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service
/**
* The component for displaying a grid element for an workflow item on the admin workflow search page
*/
export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends SearchResultGridElementComponent<WorkspaceItemSearchResult, WorkspaceItem> implements OnInit {
export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends SearchResultGridElementComponent<WorkspaceItemSearchResult, WorkspaceItem> implements OnDestroy, OnInit {

/**
* The item linked to the workspace item
Expand Down Expand Up @@ -79,9 +80,13 @@ export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends
*/
@ViewChild('buttons', { static: true }) buttons: ElementRef;

/**
* The reference to the dynamic component
*/
protected compRef: ComponentRef<Component>;

constructor(
public dsoNameService: DSONameService,
private componentFactoryResolver: ComponentFactoryResolver,
private linkService: LinkService,
protected truncatableService: TruncatableService,
private themeService: ThemeService,
Expand All @@ -100,24 +105,24 @@ export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends
this.dso = this.linkService.resolveLink(this.dso, followLink('item'));
this.item$ = (this.dso.item as Observable<RemoteData<Item>>).pipe(getAllSucceededRemoteData(), getRemoteDataPayload());
this.item$.pipe(take(1)).subscribe((item: Item) => {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.getComponent(item));
const component: GenericConstructor<Component> = this.getComponent(item);

const viewContainerRef = this.listableObjectDirective.viewContainerRef;
viewContainerRef.clear();

const componentRef = viewContainerRef.createComponent(
componentFactory,
0,
undefined,
[
this.compRef = viewContainerRef.createComponent(
component, {
index: 0,
projectableNodes: [
[this.badges.nativeElement],
[this.buttons.nativeElement]
]);
(componentRef.instance as any).object = item;
(componentRef.instance as any).index = this.index;
(componentRef.instance as any).linkType = this.linkType;
(componentRef.instance as any).listID = this.listID;
componentRef.changeDetectorRef.detectChanges();
],
});
this.compRef.setInput('object', item);
this.compRef.setInput('index', this.index);
this.compRef.setInput('linkType', this.linkType);
this.compRef.setInput('listID', this.listID);
this.compRef.changeDetectorRef.detectChanges();
}
);

Expand All @@ -130,6 +135,13 @@ export class WorkspaceItemSearchResultAdminWorkflowGridElementComponent extends
});
}

ngOnDestroy(): void {
if (hasValue(this.compRef)) {
this.compRef.destroy();
this.compRef = undefined;
}
}

/**
* Fetch the component depending on the item's entity type, view mode and context
* @returns {GenericConstructor<Component>}
Expand Down
6 changes: 4 additions & 2 deletions src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@ <h2 class="comcol-browse-label h5">{{'browse.comcol.head' | translate}}</h2>
<nav class="comcol-browse mb-4" aria-label="Browse Community or Collection">
<div class="d-none d-sm-block">

<div class="list-group list-group-horizontal">
<div class="list-group list-group-horizontal" role="tablist">
<a *ngFor="let option of allOptions"
[attr.aria-current]="(currentOptionId$ | async) === option.id"
alexandrevryghem marked this conversation as resolved.
Show resolved Hide resolved
class="list-group-item"
role="tab"
[routerLink]="option.routerLink"
[queryParams]="option.params"
routerLinkActive="active">{{ option.label | translate }}</a>
[class.active]="(currentOptionId$ | async) === option.id">{{ option.label | translate }}</a>
</div>
</div>

Expand Down
21 changes: 11 additions & 10 deletions src/app/shared/context-help.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import {
ComponentFactoryResolver,
ComponentRef,
Directive,
Input,
Expand All @@ -12,6 +11,7 @@ import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
import { ContextHelpWrapperComponent } from './context-help-wrapper/context-help-wrapper.component';
import { PlacementDir } from './context-help-wrapper/placement-dir.model';
import { ContextHelpService } from './context-help.service';
import { hasValue } from './empty.util';

export interface ContextHelpDirectiveInput {
content: string;
Expand Down Expand Up @@ -43,7 +43,6 @@ export class ContextHelpDirective implements OnChanges, OnDestroy {
constructor(
private templateRef: TemplateRef<any>,
private viewContainerRef: ViewContainerRef,
private componentFactoryResolver: ComponentFactoryResolver,
private contextHelpService: ContextHelpService
) {}

Expand All @@ -53,19 +52,21 @@ export class ContextHelpDirective implements OnChanges, OnDestroy {
this.contextHelpService.add({id: this.dsContextHelp.id, isTooltipVisible: false});

if (this.wrapper === undefined) {
const factory
= this.componentFactoryResolver.resolveComponentFactory(ContextHelpWrapperComponent);
this.wrapper = this.viewContainerRef.createComponent(factory);
this.wrapper = this.viewContainerRef.createComponent(ContextHelpWrapperComponent);
}
this.wrapper.instance.templateRef = this.templateRef;
this.wrapper.instance.content = this.dsContextHelp.content;
this.wrapper.instance.id = this.dsContextHelp.id;
this.wrapper.instance.tooltipPlacement = this.dsContextHelp.tooltipPlacement;
this.wrapper.instance.iconPlacement = this.dsContextHelp.iconPlacement;
this.wrapper.setInput('templateRef', this.templateRef);
this.wrapper.setInput('content', this.dsContextHelp.content);
this.wrapper.setInput('id', this.dsContextHelp.id);
this.wrapper.setInput('tooltipPlacement', this.dsContextHelp.tooltipPlacement);
this.wrapper.setInput('iconPlacement', this.dsContextHelp.iconPlacement);
}

ngOnDestroy() {
this.clearMostRecentId();
if (hasValue(this.wrapper)) {
this.wrapper.destroy();
this.wrapper = undefined;
}
}

private clearMostRecentId(): void {
Expand Down
5 changes: 2 additions & 3 deletions src/app/shared/loading/themed-loading.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, Input, ComponentFactoryResolver, ChangeDetectorRef } from '@angular/core';
import { Component, Input, ChangeDetectorRef } from '@angular/core';
import { ThemedComponent } from '../theme-support/themed.component';
import { LoadingComponent } from './loading.component';
import { ThemeService } from '../theme-support/theme.service';
Expand All @@ -20,11 +20,10 @@ export class ThemedLoadingComponent extends ThemedComponent<LoadingComponent> {
protected inAndOutputNames: (keyof LoadingComponent & keyof this)[] = ['message', 'showMessage', 'spinner'];

constructor(
protected resolver: ComponentFactoryResolver,
protected cdr: ChangeDetectorRef,
protected themeService: ThemeService
) {
super(resolver, cdr, themeService);
super(cdr, themeService);
}

protected getComponentName(): string {
Expand Down
Loading
Loading