EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4612 course-image: Use signals in course-image component

main
Dani Palou 2024-06-27 13:09:25 +02:00
parent c4748c5238
commit e33627f1c1
2 changed files with 21 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/core/components/course-image/course-image.html
View File

@ -1,4 +1,4 @@
<ion-icon *ngIf="!course.courseimage" name="fas-graduation-cap" slot="start" aria-hidden="true" /> <ion-icon *ngIf="!course().courseimage" name="fas-graduation-cap" slot="start" aria-hidden="true" />
<ion-avatar *ngIf="course.courseimage" slot="start"> <ion-avatar *ngIf="course().courseimage" slot="start">
<img [url]="course.courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" /> <img [url]="course().courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" />
</ion-avatar> </ion-avatar>

44
src/core/components/course-image/course-image.ts
View File

@ -13,7 +13,7 @@
// limitations under the License. // limitations under the License.
import { toBoolean } from '@/core/transforms/boolean'; import { toBoolean } from '@/core/transforms/boolean';
import { Component, Input, ElementRef, OnInit, OnChanges, HostBinding } from '@angular/core'; import { Component, ElementRef, HostBinding, input, effect } from '@angular/core';
import { CoreCourseListItem } from '@features/courses/services/courses'; import { CoreCourseListItem } from '@features/courses/services/courses';
import { CoreCoursesHelper } from '@features/courses/services/courses-helper'; import { CoreCoursesHelper } from '@features/courses/services/courses-helper';
import { CoreColors } from '@singletons/colors'; import { CoreColors } from '@singletons/colors';
@ -23,41 +23,31 @@ import { CoreColors } from '@singletons/colors';
templateUrl: 'course-image.html', templateUrl: 'course-image.html',
styleUrls: ['./course-image.scss'], styleUrls: ['./course-image.scss'],
}) })
export class CoreCourseImageComponent implements OnInit, OnChanges { export class CoreCourseImageComponent {
@Input({ required: true }) course!: CoreCourseListItem; course = input.required<CoreCourseListItem>();
@Input({ transform: toBoolean }) fill = false; fill = input(false, { transform: toBoolean });
protected element: HTMLElement; protected element: HTMLElement;
constructor(element: ElementRef) { constructor(element: ElementRef) {
this.element = element.nativeElement; this.element = element.nativeElement;
effect(() => {
this.setCourseColor();
});
} }
@HostBinding('class.fill-container') @HostBinding('class.fill-container')
get fillContainer(): boolean { get fillContainer(): boolean {
return this.fill; return this.fill();
}
/**
* @inheritdoc
*/
ngOnInit(): void {
this.setCourseColor();
}
/**
* @inheritdoc
*/
ngOnChanges(): void {
this.setCourseColor();
} }
/** /**
* Removes the course image set because it cannot be loaded and set the fallback icon color. * Removes the course image set because it cannot be loaded and set the fallback icon color.
*/ */
loadFallbackCourseIcon(): void { loadFallbackCourseIcon(): void {
this.course.courseimage = undefined; this.course().courseimage = undefined;
// Set the color because it won't be set at this point. // Set the color because it won't be set at this point.
this.setCourseColor(); this.setCourseColor();
@ -67,15 +57,17 @@ export class CoreCourseImageComponent implements OnInit, OnChanges {
* Set course color. * Set course color.
*/ */
protected async setCourseColor(): Promise<void> { protected async setCourseColor(): Promise<void> {
await CoreCoursesHelper.loadCourseColorAndImage(this.course); const course = this.course();
if (this.course.color) { await CoreCoursesHelper.loadCourseColorAndImage(course);
this.element.style.setProperty('--course-color', this.course.color);
const tint = CoreColors.lighter(this.course.color, 50); if (course.color) {
this.element.style.setProperty('--course-color', course.color);
const tint = CoreColors.lighter(course.color, 50);
this.element.style.setProperty('--course-color-tint', tint); this.element.style.setProperty('--course-color-tint', tint);
} else if(this.course.colorNumber !== undefined) { } else if(course.colorNumber !== undefined) {
this.element.classList.add('course-color-' + this.course.colorNumber); this.element.classList.add('course-color-' + course.colorNumber);
} }
} }