MOBILE-3806 course: Fix and improve course list item

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

@@ -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)"
+                <ng-container *ngTemplateOutlet="mainInfo"></ng-container>
-                    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>
             </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)"
+                    <ng-container *ngTemplateOutlet="mainInfo"></ng-container>
-                        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>
                 </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>

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

@@ -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') {
+                if (this.courseStatus == CoreConstants.DOWNLOADED || this.courseStatus == CoreConstants.OUTDATED) {
-                    this.deleteCourse();
+                    this.deleteCourseStoredData();
                 }
                 break;
             case 'hide':

src/core/features/courses/components/course-progress/course-progress.ts

@@ -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;