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

MOBILE-3806 course: Fix and improve course list item

main
Pau Ferrer Ocaña 2021-11-25 11:52:28 +01:00
parent 84e97ef5cf
commit dc08698aac
3 changed files with 36 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
View File

@ -10,27 +10,7 @@
<ion-label>
<ion-row>
<ion-col class="ion-align-self-center">
<p *ngIf="course.categoryname || (course.displayname && course.shortname && course.fullname != course.displayname)"
class="core-course-additional-info">
<span *ngIf="course.categoryname" class="core-course-category">
<core-format-text [text]="course.categoryname"></core-format-text>
</span>
<span *ngIf="course.categoryname && course.displayname && course.shortname && course.fullname != course.displayname"
class="core-course-category"> | </span>
<span *ngIf="course.displayname && course.shortname && course.fullname != course.displayname"
class="core-course-shortname">
<core-format-text [text]="course.shortname" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text>
</span>
</p>
<p class="item-heading">
<ion-icon name="fas-star" *ngIf="course.isfavourite" [attr.aria-label]="'core.courses.favourite' | translate">
</ion-icon>
<span class="sr-only" *ngIf="course.isfavourite">{{ 'core.courses.aria:favourite' | translate }}</span>
<span class="sr-only">{{ 'core.courses.aria:coursename' | translate }}</span>
<core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text>
</p>
<ng-container *ngTemplateOutlet="mainInfo"></ng-container>
</ion-col>
<ion-col size="auto" class="ion-align-self-center">
<ng-container *ngIf="!isEnrolled">
@ -47,11 +27,10 @@
<core-progress-bar [progress]="progress" a11yText="core.courses.aria:courseprogress"></core-progress-bar>
</p>
</ion-label>
</ion-item>
<ion-card [attr.course-color]="course.color ? null : course.colorNumber" *ngIf="layout == 'card' || layout == 'summarycard'"
class="core-course-list-card" [class.item-dimmed]="course.hidden">
class="core-course-list-card" [class.item-dimmed]="course.hidden" [attr.aria-label]="course.displayname || course.fullname">
<div (click)="openCourse()" class="core-course-thumb" [class.core-course-color-img]="course.courseImage"
[style.background-color]="course.color">
<img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt="" />
@ -62,28 +41,7 @@
<ion-label class="ion-text-wrap core-course-title">
<ion-row>
<ion-col>
<p *ngIf="course.categoryname || (course.displayname && course.shortname && course.fullname != course.displayname)"
class="core-course-additional-info">
<span class="sr-only">{{ 'core.courses.aria:coursecategory' | translate }}</span>
<span *ngIf="course.categoryname" class="core-course-category">
<core-format-text [text]="course.categoryname"></core-format-text>
</span>
<span *ngIf="course.categoryname && course.displayname && course.shortname && course.fullname != course.displayname"
class="core-course-category"> | </span>
<span *ngIf="course.displayname && course.shortname && course.fullname != course.displayname"
class="core-course-shortname">
<core-format-text [text]="course.shortname" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text>
</span>
</p>
<p class="item-heading">
<ion-icon name="fas-star" *ngIf="course.isfavourite" [attr.aria-label]="'core.courses.favourite' | translate">
</ion-icon>
<span class="sr-only" *ngIf="course.isfavourite">{{ 'core.courses.aria:favourite' | translate }}</span>
<span class="sr-only">{{ 'core.courses.aria:coursename' | translate }}</span>
<core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text>
</p>
<ng-container *ngTemplateOutlet="mainInfo"></ng-container>
</ion-col>
<ion-col size="auto"
*ngIf="isEnrolled && ((downloadCourseEnabled && !courseOptionMenuEnabled && showDownload) || courseOptionMenuEnabled)">
@ -122,3 +80,27 @@
</ion-button>
</div>
</ng-template>
<ng-template #mainInfo>
<p *ngIf="course.categoryname || (course.displayname && course.shortname && course.fullname != course.displayname)"
class="core-course-additional-info">
<span *ngIf="course.categoryname" class="core-course-category">
<span class="sr-only">{{ 'core.courses.aria:coursecategory' | translate }}</span>
<core-format-text [text]="course.categoryname"></core-format-text>
</span>
<span *ngIf="course.categoryname && course.displayname && course.shortname && course.fullname != course.displayname"
class="core-course-category"> | </span>
<span *ngIf="course.displayname && course.shortname && course.fullname != course.displayname" class="core-course-shortname">
<core-format-text [text]="course.shortname" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text>
</span>
</p>
<p class="item-heading">
<ion-icon name="fas-star" *ngIf="course.isfavourite" [attr.aria-label]="'core.courses.favourite' | translate">
</ion-icon>
<span class="sr-only" *ngIf="course.isfavourite">{{ 'core.courses.aria:favourite' | translate }}</span>
<span class="sr-only">{{ 'core.courses.aria:coursename' | translate }}</span>
<core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id">
</core-format-text>
</p>
</ng-template>

10
src/core/features/courses/components/course-list-item/course-list-item.ts
View File

@ -250,13 +250,13 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
}
/**
* Delete the course.
* Delete course stored data.
*/
async deleteCourse(): Promise<void> {
async deleteCourseStoredData(): Promise<void> {
try {
await CoreDomUtils.showDeleteConfirm('core.course.confirmdeletestoreddata');
} catch (error) {
if (CoreDomUtils.isCanceledError(error)) {
if (!CoreDomUtils.isCanceledError(error)) {
throw error;
}
@ -299,8 +299,8 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
}
break;
case 'delete':
if (this.courseStatus == 'downloaded' || this.courseStatus == 'outdated') {
this.deleteCourse();
if (this.courseStatus == CoreConstants.DOWNLOADED || this.courseStatus == CoreConstants.OUTDATED) {
this.deleteCourseStoredData();
}
break;
case 'hide':

6
src/core/features/courses/components/course-progress/course-progress.ts
View File

@ -35,6 +35,8 @@ import { CoreUser } from '@features/user/services/user';
*
* <core-courses-course-progress [course]="course">
* </core-courses-course-progress>
*
* @deprecated since 4.0 Use core-courses-course-list-item instead.
*/
@Component({
selector: 'core-courses-course-progress',
@ -175,7 +177,7 @@ export class CoreCoursesCourseProgressComponent implements OnInit, OnDestroy, On
try {
await CoreDomUtils.showDeleteConfirm('core.course.confirmdeletestoreddata');
} catch (error) {
if (CoreDomUtils.isCanceledError(error)) {
if (!CoreDomUtils.isCanceledError(error)) {
throw error;
}
@ -233,7 +235,7 @@ export class CoreCoursesCourseProgressComponent implements OnInit, OnDestroy, On
}
break;
case 'delete':
if (this.courseStatus == 'downloaded' || this.courseStatus == 'outdated') {
if (this.courseStatus == CoreConstants.DOWNLOADED || this.courseStatus == CoreConstants.OUTDATED) {
this.deleteCourse();
}
break;