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

Related entity thumbnails.

Browse Source
This commit is contained in:
Michael Spalti
2022-09-14 16:33:25 -07:00
parent 84ad250de6
commit abe19b12bb
21 changed files with 71 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts
View File

@@ -48,7 +48,7 @@ describe('BrowseByMetadataPageComponent', () => {
browseBy: {
showThumbnails: true
}
}
};
const mockEntries = [
{

4
src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.spec.ts
View File

@@ -62,13 +62,13 @@ const environmentUseThumbs = {
browseBy: {
showThumbnails: true
}
}
};
const enviromentNoThumbs = {
browseBy: {
showThumbnails: false
}
}
};
describe('JournalIssueSearchResultListElementComponent', () => {
beforeEach(waitForAsync(() => {

4
src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.spec.ts
View File

@@ -61,13 +61,13 @@ const environmentUseThumbs = {
browseBy: {
showThumbnails: true
}
}
};
const enviromentNoThumbs = {
browseBy: {
showThumbnails: false
}
}
};
describe('JournalVolumeSearchResultListElementComponent', () => {
beforeEach(waitForAsync(() => {

4
src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.spec.ts
View File

@@ -57,13 +57,13 @@ const environmentUseThumbs = {
browseBy: {
showThumbnails: true
}
}
};
const enviromentNoThumbs = {
browseBy: {
showThumbnails: false
}
}
};
describe('JournalSearchResultListElementComponent', () => {
beforeEach(waitForAsync(() => {

4
src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.spec.ts
View File

@@ -55,13 +55,13 @@ const environmentUseThumbs = {
browseBy: {
showThumbnails: true
}
}
};
const enviromentNoThumbs = {
browseBy: {
showThumbnails: false
}
}
};
describe('OrgUnitSearchResultListElementComponent', () => {
beforeEach(waitForAsync(() => {

4
src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.spec.ts
View File

@@ -55,13 +55,13 @@ const environmentUseThumbs = {
browseBy: {
showThumbnails: true
}
}
};
const enviromentNoThumbs = {
browseBy: {
showThumbnails: false
}
}
};
describe('PersonSearchResultListElementComponent', () => {
beforeEach(waitForAsync(() => {

4
src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.spec.ts
View File

@@ -56,13 +56,13 @@ const environmentUseThumbs = {
browseBy: {
showThumbnails: true
}
}
};
const enviromentNoThumbs = {
browseBy: {
showThumbnails: false
}
}
};
describe('ProjectSearchResultListElementComponent', () => {
beforeEach(waitForAsync(() => {

4
src/app/entity-groups/research-entities/submission/item-list-elements/person/person-search-result-list-submission-element.component.spec.ts
View File

@@ -42,13 +42,13 @@ const environmentUseThumbs = {
browseBy: {
showThumbnails: true
}
}
};
const enviromentNoThumbs = {
browseBy: {
showThumbnails: false
}
}
};
function init() {
mockItemWithMetadata = Object.assign(

6
src/app/item-page/simple/abstract-incremental-list/abstract-incremental-list.component.ts
View File

@@ -10,6 +10,7 @@ import { hasValue, isNotEmpty } from '../../../shared/empty.util';
* An abstract component for displaying an incremental list of objects
*/
export class AbstractIncrementalListComponent<T> implements OnInit, OnDestroy {
/**
* The amount to increment the list by
* Define this amount in the child component overriding this component
@@ -21,6 +22,11 @@ export class AbstractIncrementalListComponent<T> implements OnInit, OnDestroy {
*/
objects: T[];
/**
* Placeholder css class (defined in global-styles)
*/
placeholderFontClass: string;
/**
* A list of open subscriptions
*/

11
src/app/item-page/simple/related-items/related-items-component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Input } from '@angular/core';
import { Component, ElementRef, Input } from '@angular/core';
import { Item } from '../../../core/shared/item.model';
import { Observable } from 'rxjs';
import { RemoteData } from '../../../core/data/remote-data';
@@ -7,6 +7,7 @@ import { ViewMode } from '../../../core/shared/view-mode.model';
import { RelationshipService } from '../../../core/data/relationship.service';
import { AbstractIncrementalListComponent } from '../abstract-incremental-list/abstract-incremental-list.component';
import { FindListOptions } from '../../../core/data/find-list-options.model';
import { setPlaceHolderFontSize } from '../../../shared/utils/object-list-utils';
@Component({
selector: 'ds-related-items',
@@ -18,6 +19,7 @@ import { FindListOptions } from '../../../core/data/find-list-options.model';
* It expects a parent item and relationship type, as well as a label to display on top
*/
export class RelatedItemsComponent extends AbstractIncrementalListComponent<Observable<RemoteData<PaginatedList<Item>>>> {
/**
* The parent of the list of related items to display
*/
@@ -53,9 +55,14 @@ export class RelatedItemsComponent extends AbstractIncrementalListComponent<Obse
*/
viewMode = ViewMode.ListElement;
constructor(public relationshipService: RelationshipService) {
constructor(public relationshipService: RelationshipService, protected elementRef: ElementRef) {
super();
}
ngOnInit(): void {
const width = this.elementRef.nativeElement.offsetWidth;
this.placeholderFontClass = setPlaceHolderFontSize(width);
super.ngOnInit();
}
/**
* Get a specific page

4
src/app/item-page/simple/related-items/related-items.component.html
View File

@@ -1,4 +1,5 @@
<ds-metadata-field-wrapper [label]="label">
<ds-metadata-field-wrapper [label]="label" [ngClass]="placeholderFontClass">
<div #relatedItems>
<ng-container *ngFor="let objectPage of objects; let i = index">
<ng-container *ngVar="(objectPage | async) as itemsRD">
<ds-listable-object-component-loader *ngFor="let item of itemsRD?.payload?.page"
@@ -17,4 +18,5 @@
</div>
</ng-container>
</ng-container>
</div>
</ds-metadata-field-wrapper>

6
src/app/item-page/simple/related-items/related-items.component.scss
View File

@@ -0,0 +1,6 @@
ds-listable-object-component-loader {
margin-bottom: 10px;
display: block;
}

22
src/app/shared/object-collection/object-collection.component.ts
View File

@@ -21,6 +21,7 @@ import { ViewMode } from '../../core/shared/view-mode.model';
import { CollectionElementLinkType } from './collection-element-link.type';
import { PaginatedList } from '../../core/data/paginated-list.model';
import { Context } from '../../core/shared/context.model';
import { setPlaceHolderFontSize } from '../utils/object-list-utils';
/**
* Component that can render a list of listable objects in different view modes
@@ -167,7 +168,9 @@ export class ObjectCollectionComponent implements OnInit {
map((params) => isEmpty(params?.view) ? ViewMode.ListElement : params.view),
distinctUntilChanged()
);
this.setPlaceHolderFontSize();
const width = this.elementRef.nativeElement.offsetWidth;
this.placeholderFontClass = setPlaceHolderFontSize(width);
}
/**
@@ -177,6 +180,8 @@ export class ObjectCollectionComponent implements OnInit {
* Route is a singleton service provided by Angular.
* @param router
* Router is a singleton service provided by Angular.
* @param elementRef
* Used only to read DOM for the element width
*/
constructor(
private cdRef: ChangeDetectorRef,
@@ -236,19 +241,4 @@ export class ObjectCollectionComponent implements OnInit {
this.next.emit(true);
}
/**
* Sets the class to be used for the "no thumbnail"
* placeholder font size.
*/
setPlaceHolderFontSize() {
const width = this.elementRef.nativeElement.offsetWidth;
if (width < 750) {
this.placeholderFontClass = 'thumb-font-1';
} else if (width < 1000) {
this.placeholderFontClass = 'thumb-font-2';
} else {
this.placeholderFontClass = 'thumb-font-3';
}
}
}

8
src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.spec.ts
View File

@@ -71,13 +71,13 @@ const environmentUseThumbs = {
browseBy: {
showThumbnails: true
}
}
};
const enviromentNoThumbs = {
browseBy: {
showThumbnails: false
}
}
};
describe('ItemListPreviewComponent', () => {
beforeEach(waitForAsync(() => {
@@ -226,6 +226,6 @@ describe('ItemListPreviewComponent', () => {
it('should add the ds-thumbnail element', () => {
const thumbnail = fixture.debugElement.query(By.css('ds-thumbnail'));
expect(thumbnail).toBeFalsy();
})
})
});
});
});

2
src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.spec.ts
View File

@@ -60,7 +60,7 @@ const environmentUseThumbs = {
browseBy: {
showThumbnails: true
}
}
};
const rdItem = createSuccessfulRemoteDataObject(item);
const workflowitem = Object.assign(new WorkflowItem(), { item: observableOf(rdItem) });

3
src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.spec.ts
View File

@@ -60,7 +60,7 @@ const environmentUseThumbs = {
browseBy: {
showThumbnails: true
}
}
};
const rd = createSuccessfulRemoteDataObject(item);
mockResultObject.indexableObject = Object.assign(new WorkflowItem(), { item: observableOf(rd) });
@@ -120,7 +120,6 @@ describe('WorkflowItemSearchResultListElementComponent', () => {
}));
it('should add an offset to the actions element', () => {
const thumbnail = fixture.debugElement.query(By.css('.offset-3'));
expect(thumbnail).toBeTruthy();

2
src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.spec.ts
View File

@@ -60,7 +60,7 @@ const environmentUseThumbs = {
browseBy: {
showThumbnails: true
}
}
};
const rd = createSuccessfulRemoteDataObject(item);
mockResultObject.indexableObject = Object.assign(new WorkspaceItem(), { item: observableOf(rd) });

4
src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts
View File

@@ -48,7 +48,7 @@ const environmentUseThumbs = {
browseBy: {
showThumbnails: true
}
}
};
describe('CollectionSearchResultListElementComponent', () => {
beforeEach(waitForAsync(() => {
@@ -98,7 +98,7 @@ describe('CollectionSearchResultListElementComponent', () => {
describe('when environment is set to show thumbnail images', () => {
it('should offset content', () => {
const offset = fixture.debugElement.query(By.css('offset-md-2'))
const offset = fixture.debugElement.query(By.css('offset-md-2'));
});
});

4
src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts
View File

@@ -48,7 +48,7 @@ const environmentUseThumbs = {
browseBy: {
showThumbnails: true
}
}
};
describe('CommunitySearchResultListElementComponent', () => {
beforeEach(waitForAsync(() => {
@@ -99,7 +99,7 @@ describe('CommunitySearchResultListElementComponent', () => {
describe('when environment is set to show thumbnail images', () => {
it('should offset content', () => {
const offset = fixture.debugElement.query(By.css('offset-md-2'))
const offset = fixture.debugElement.query(By.css('offset-md-2'));
});
});
});

4
src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.spec.ts
View File

@@ -64,13 +64,13 @@ const environmentUseThumbs = {
browseBy: {
showThumbnails: true
}
}
};
const enviromentNoThumbs = {
browseBy: {
showThumbnails: false
}
}
};
describe('ItemSearchResultListElementComponent', () => {
beforeEach(waitForAsync(() => {

13
src/app/shared/utils/object-list-utils.ts Normal file
View File

@@ -0,0 +1,13 @@
/**
* Sets the class to be used for the "no thumbnail"
* placeholder font size in lists.
*/
export function setPlaceHolderFontSize(width: number): string {
if (width < 750) {
return 'thumb-font-1';
} else if (width < 1000) {
return 'thumb-font-2';
} else {
return 'thumb-font-3';
}
}