Merge pull request #4278 from crazyserver/MOBILE-4733

MOBILE-4733 courses: Add course-id data attribute to course

src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html

@@ -117,11 +117,11 @@
     </core-empty-box>
 
     <!-- List of courses. -->
-    <div class="safe-area-padding" *ngIf="hasCourses">
+    <div class="safe-area-padding core-course-list" *ngIf="hasCourses">
         <ion-grid class="ion-no-padding" [class.core-no-grid]="layout !== 'card'" [class.list-item-limited-width]="layout !== 'card'">
             <ion-row class="ion-no-padding">
                 <ion-col *ngFor="let course of filteredCourses" class="ion-no-padding" size="12" size-sm="6" size-md="6" size-lg="4"
-                    size-xl="3">
+                    size-xl="3" [attr.data-course-id]="course.id">
                     <core-courses-course-list-item [course]="course" class="core-courseoverview" [showDownload]="downloadCourseEnabled"
                         [layout]="layout" />
                 </ion-col>

src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html

@@ -12,7 +12,7 @@
     <!-- List of courses. -->
     <div [hidden]="courses.length === 0" [id]="scrollElementId" class="core-horizontal-scroll"
         (scroll)="scrollControls.updateScrollPosition()">
-        <div (onResize)="scrollControls.updateScrollPosition()" class="flex-row">
+        <div (onResize)="scrollControls.updateScrollPosition()" class="flex-row core-course-list">
             <div class="safe-area-pseudo-padding-start"></div>
             <ng-container *ngFor="let course of courses">
                 <core-courses-course-list-item [course]="course" class="core-recentlyaccessedcourses" layout="summarycard" />

src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html

@@ -12,7 +12,7 @@
     <!-- List of courses. -->
     <div [hidden]="courses.length === 0" [id]="scrollElementId" class="core-horizontal-scroll"
         (scroll)="scrollControls.updateScrollPosition()">
-        <div (onResize)="scrollControls.updateScrollPosition()" class="flex-row">
+        <div (onResize)="scrollControls.updateScrollPosition()" class="flex-row core-course-list">
             <div class="safe-area-pseudo-padding-start"></div>
             <ng-container *ngFor="let course of courses">
                 <core-courses-course-list-item [course]="course" class="core-block_starredcourses" layout="summarycard" />

src/addons/block/timeline/components/events/addon-block-timeline-events.html

@@ -14,7 +14,7 @@
     </ion-item>
     <ng-container *ngFor="let event of dayEvents.events">
         <ion-item class="addon-block-timeline-activity" [detail]="false" (click)="action($event, event.url)" [attr.aria-label]="event.name"
-            button lines="full">
+            button lines="full" [attr.data-event-course-id]="event.course?.id">
             <ion-label>
                 <ion-row class="ion-justify-content-between ion-align-items-center ion-nowrap ion-no-padding">
                     <ion-col class="addon-block-timeline-activity-time ion-no-padding ion-text-nowrap">

src/addons/block/timeline/components/events/events.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit, HostBinding } from '@angular/core';
 import { CoreSites } from '@services/sites';
 import { CoreLoadings } from '@services/loadings';
 import { CoreText } from '@singletons/text';
@@ -44,6 +44,10 @@ export class AddonBlockTimelineEventsComponent implements OnInit {
 
     colorizeIcons = false;
 
+    @HostBinding('attr.data-course-id') protected get courseId(): number | null {
+        return this.course?.id ?? null;
+    }
+
     /**
      * @inheritdoc
      */

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

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { DownloadStatus } from '@/core/constants';
-import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
 import { CoreCourse } from '@features/course/services/course';
 import { CoreCourseHelper, CorePrefetchStatusInfo } from '@features/course/services/course-helper';
 import { CoreUser } from '@features/user/services/user';
@@ -43,7 +43,7 @@ import { CORE_COURSE_ALL_COURSES_CLEARED, CORE_COURSE_PROGRESS_UPDATED_EVENT } f
  *
  * Example usage:
  *
- * <core-courses-course-list-item [course]="course"></core-courses-course-list-item>
+ * <core-courses-course-list-item [course]="course" />
  */
 @Component({
     selector: 'core-courses-course-list-item',
@@ -83,6 +83,10 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
     protected element: HTMLElement;
     protected progressObserver: CoreEventObserver;
 
+    @HostBinding('attr.data-course-id') protected get courseId(): number {
+        return this.course.id;
+    }
+
     constructor(element: ElementRef) {
         this.element = element.nativeElement;
         const siteId = CoreSites.getCurrentSiteId();

src/core/features/courses/pages/categories/categories.html

@@ -38,13 +38,13 @@
                 </ion-label>
             </ion-item>
 
-            <ng-container *ngIf="categories.length > 0">
+            <div *ngIf="categories.length > 0" class="core-category-list">
                 <ion-item-divider>
                     <ion-label>
                         <h2 class="big">{{ 'core.courses.categories' | translate }}</h2>
                     </ion-label>
                 </ion-item-divider>
-                <ion-card *ngFor="let category of categories">
+                <ion-card *ngFor="let category of categories" [attr.data-category-id]="category.id">
                     <ion-item button class="ion-text-wrap" (click)="openCategory(category.id)" [attr.aria-label]="category.name"
                         [detail]="true">
                         <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.category' | translate" />
@@ -59,9 +59,9 @@
                         </ion-badge>
                     </ion-item>
                 </ion-card>
-            </ng-container>
+            </div>
 
-            <ng-container *ngIf="courses.length > 0">
+            <div *ngIf="courses.length > 0" class="core-course-list">
                 <ion-item-divider>
                     <ion-label>
                         <h2 *ngIf="!showOnlyEnrolled" class="big">{{ 'core.courses.courses' | translate }}</h2>
@@ -69,7 +69,7 @@
                     </ion-label>
                 </ion-item-divider>
                 <core-courses-course-list-item *ngFor="let course of courses" [course]="course" [showDownload]="downloadEnabled" />
-            </ng-container>
+            </div>
         </ion-list>
         <core-empty-box *ngIf="!categories.length && !courses.length" icon="fas-graduation-cap"
             [message]="'core.courses.nocoursesyet' | translate" />

src/core/features/courses/pages/list/list.html

@@ -37,7 +37,7 @@
             </ion-item-divider>
         </ng-container>
 
-        <ion-list class="list-item-limited-width">
+        <ion-list class="list-item-limited-width core-course-list">
             <core-courses-course-list-item *ngFor="let course of courses" [course]="course" [showDownload]="downloadEnabled" />
         </ion-list>
 

src/theme/theme.base.scss

@@ -241,7 +241,8 @@ ion-content.limited-width > :not([slot]) {
     min-height: 100%;
 }
 
-.core-anchor, core-format-text a {
+.core-anchor,
+core-format-text a {
     color: var(--core-link-color);
     cursor: pointer;
     text-decoration: underline;
@@ -262,7 +263,8 @@ ion-content.limited-width > :not([slot]) {
 
 // Text formats.
 // Highlight text.
-mark, .matchtext {
+mark,
+.matchtext {
     background-color: var(--text-hightlight-background-color);
 }