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-avatar *ngIf="course.courseimage" slot="start">
<img [url]="course.courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" />
<ion-icon *ngIf="!course().courseimage" name="fas-graduation-cap" slot="start" aria-hidden="true" />
<ion-avatar *ngIf="course().courseimage" slot="start">
<img [url]="course().courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" />
</ion-avatar>

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

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