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

switch to signals

Browse Source
This commit is contained in:
Art Lowel
2025-04-25 18:13:46 +02:00
parent fa96c8c5ab
commit 80dd89da56
3 changed files with 35 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/thumbnail/thumbnail.component.html
View File

@@ -1,5 +1,5 @@
<div class="thumbnail" [class.limit-width]="limitWidth">
@if (isLoading$ | async) {
@if (isLoading()) {
<div class="thumbnail-content outer">
<div class="inner">
<div class="centered">
@@ -9,11 +9,14 @@
</div>
}
<!-- don't use *ngIf="!isLoading" so the thumbnail can load in while the animation is playing -->
@if ((src$ | async) !== null) {
<img class="thumbnail-content img-fluid" [ngClass]="{'d-none': (isLoading$ | async)}"
[src]="(src$ | async) | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()" (load)="successHandler()">
@if (src() !== null) {
<img class="thumbnail-content img-fluid" [ngClass]="{'d-none': isLoading()}"
[src]="src() | dsSafeUrl"
[alt]="alt | translate"
(error)="errorHandler()"
(load)="successHandler()">
}
@if ((src$ | async) === null && (isLoading$ | async) === false) {
@if (src() === null && isLoading() === false) {
<div class="thumbnail-content outer">
<div class="inner">
<div class="thumbnail-placeholder centered lead">

32
src/app/thumbnail/thumbnail.component.spec.ts
View File

@@ -99,32 +99,32 @@ describe('ThumbnailComponent', () => {
});
describe('loading', () => {
it('should start out with isLoading$ true', () => {
expect(comp.isLoading$.getValue()).toBeTrue();
it('should start out with isLoading true', () => {
expect(comp.isLoading()).toBeTrue();
});
it('should set isLoading$ to false once an image is successfully loaded', () => {
comp.setSrc('http://bit.stream');
fixture.debugElement.query(By.css('img.thumbnail-content')).triggerEventHandler('load', new Event('load'));
expect(comp.isLoading$.getValue()).toBeFalse();
expect(comp.isLoading()).toBeFalse();
});
it('should set isLoading$ to false once the src is set to null', () => {
comp.setSrc(null);
expect(comp.isLoading$.getValue()).toBeFalse();
expect(comp.isLoading()).toBeFalse();
});
it('should show a loading animation while isLoading$ is true', () => {
expect(de.query(By.css('ds-loading'))).toBeTruthy();
comp.isLoading$.next(false);
comp.isLoading.set(false);
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('ds-loading'))).toBeFalsy();
});
describe('with a thumbnail image', () => {
beforeEach(() => {
comp.src$.next('https://bit.stream');
comp.src.set('https://bit.stream');
fixture.detectChanges();
});
@@ -133,7 +133,7 @@ describe('ThumbnailComponent', () => {
expect(img).toBeTruthy();
expect(img.classes['d-none']).toBeTrue();
comp.isLoading$.next(false);
comp.isLoading.set(false);
fixture.detectChanges();
img = fixture.debugElement.query(By.css('img.thumbnail-content'));
expect(img).toBeTruthy();
@@ -144,14 +144,14 @@ describe('ThumbnailComponent', () => {
describe('without a thumbnail image', () => {
beforeEach(() => {
comp.src$.next(null);
comp.src.set(null);
fixture.detectChanges();
});
it('should only show the HTML placeholder once done loading', () => {
expect(fixture.debugElement.query(By.css('div.thumbnail-placeholder'))).toBeFalsy();
comp.isLoading$.next(false);
comp.isLoading.set(false);
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('div.thumbnail-placeholder'))).toBeTruthy();
});
@@ -247,14 +247,14 @@ describe('ThumbnailComponent', () => {
describe('fallback', () => {
describe('if there is a default image', () => {
it('should display the default image', () => {
comp.src$.next('http://bit.stream');
comp.src.set('http://bit.stream');
comp.defaultImage = 'http://default.img';
comp.errorHandler();
expect(comp.src$.getValue()).toBe(comp.defaultImage);
expect(comp.src()).toBe(comp.defaultImage);
});
it('should include the alt text', () => {
comp.src$.next('http://bit.stream');
comp.src.set('http://bit.stream');
comp.defaultImage = 'http://default.img';
comp.errorHandler();
@@ -266,10 +266,10 @@ describe('ThumbnailComponent', () => {
describe('if there is no default image', () => {
it('should display the HTML placeholder', () => {
comp.src$.next('http://default.img');
comp.src.set('http://default.img');
comp.defaultImage = null;
comp.errorHandler();
expect(comp.src$.getValue()).toBe(null);
expect(comp.src()).toBe(null);
fixture.detectChanges();
const placeholder = fixture.debugElement.query(By.css('div.thumbnail-placeholder')).nativeElement;
@@ -363,7 +363,7 @@ describe('ThumbnailComponent', () => {
it('should show the default image', () => {
comp.defaultImage = 'default/image.jpg';
comp.ngOnChanges({});
expect(comp.src$.getValue()).toBe('default/image.jpg');
expect(comp.src()).toBe('default/image.jpg');
});
});
});
@@ -419,7 +419,7 @@ describe('ThumbnailComponent', () => {
});
it('should start out with isLoading$ true', () => {
expect(comp.isLoading$.getValue()).toBeTrue();
expect(comp.isLoading()).toBeTrue();
expect(de.query(By.css('ds-loading'))).toBeTruthy();
});

20
src/app/thumbnail/thumbnail.component.ts
View File

@@ -8,10 +8,12 @@ import {
Input,
OnChanges,
PLATFORM_ID,
signal,
SimpleChanges,
WritableSignal,
} from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { of as observableOf, BehaviorSubject } from 'rxjs';
import { of as observableOf } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { AuthService } from '../core/auth/auth.service';
@@ -54,7 +56,7 @@ export class ThumbnailComponent implements OnChanges {
/**
* The src attribute used in the template to render the image.
*/
src$: BehaviorSubject<string> = new BehaviorSubject<string>(undefined);
src: WritableSignal<string> = signal(undefined);
retriedWithToken = false;
@@ -77,7 +79,7 @@ export class ThumbnailComponent implements OnChanges {
* Whether the thumbnail is currently loading
* Start out as true to avoid flashing the alt text while a thumbnail is being loaded.
*/
isLoading$: BehaviorSubject<boolean> = new BehaviorSubject(true);
isLoading: WritableSignal<boolean> = signal(true);
constructor(
@Inject(PLATFORM_ID) private platformID: any,
@@ -96,8 +98,8 @@ export class ThumbnailComponent implements OnChanges {
// every time the inputs change we need to start the loading animation again, as it's possible
// that thumbnail is first set to null when the parent component initializes and then set to
// the actual value
if (this.isLoading$.getValue() === false) {
this.isLoading$.next(true);
if (!this.isLoading()) {
this.isLoading.set(true);
}
if (hasNoValue(this.thumbnail)) {
@@ -140,7 +142,7 @@ export class ThumbnailComponent implements OnChanges {
* Otherwise, fall back to the default image or a HTML placeholder
*/
errorHandler() {
const src = this.src$.getValue();
const src = this.src();
const thumbnail = this.bitstream;
const thumbnailSrc = thumbnail?._links?.content?.href;
@@ -192,9 +194,9 @@ export class ThumbnailComponent implements OnChanges {
* @param src
*/
setSrc(src: string): void {
this.src$.next(src);
this.src.set(src);
if (src === null) {
this.isLoading$.next(false);
this.isLoading.set(false);
}
}
@@ -202,6 +204,6 @@ export class ThumbnailComponent implements OnChanges {
* Stop the loading animation once the thumbnail is successfully loaded
*/
successHandler() {
this.isLoading$.next(false);
this.isLoading.set(false);
}
}