From 9108e76f8340f4cb9b7e4763f1e988dd64be92d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 9 Jan 2025 11:00:17 +0100
Subject: [PATCH] MOBILE-4733 courses: Add course-id data attribute to course

---
 .../components/myoverview/addon-block-myoverview.html  |  4 ++--
 .../addon-block-recentlyaccessedcourses.html           |  2 +-
 .../starredcourses/addon-block-starredcourses.html     |  2 +-
 .../components/events/addon-block-timeline-events.html |  2 +-
 src/addons/block/timeline/components/events/events.ts  |  6 +++++-
 .../components/course-list-item/course-list-item.ts    |  8 ++++++--
 .../features/courses/pages/categories/categories.html  | 10 +++++-----
 src/core/features/courses/pages/list/list.html         |  2 +-
 src/theme/theme.base.scss                              |  6 ++++--
 9 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
index a204b78f6..b7a34cbaf 100644
--- a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
+++ b/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>
diff --git a/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html b/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
index 1b76456b0..384b2b797 100644
--- a/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
+++ b/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" />
diff --git a/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html b/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
index f022f3e2c..be62d2b75 100644
--- a/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
+++ b/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" />
diff --git a/src/addons/block/timeline/components/events/addon-block-timeline-events.html b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
index 4068ea1ad..e9a6c41ec 100644
--- a/src/addons/block/timeline/components/events/addon-block-timeline-events.html
+++ b/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">
diff --git a/src/addons/block/timeline/components/events/events.ts b/src/addons/block/timeline/components/events/events.ts
index 141b8b917..c980dc591 100644
--- a/src/addons/block/timeline/components/events/events.ts
+++ b/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
      */
diff --git a/src/core/features/courses/components/course-list-item/course-list-item.ts b/src/core/features/courses/components/course-list-item/course-list-item.ts
index c87a6e519..98810f867 100644
--- a/src/core/features/courses/components/course-list-item/course-list-item.ts
+++ b/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();
diff --git a/src/core/features/courses/pages/categories/categories.html b/src/core/features/courses/pages/categories/categories.html
index 09e2de396..2cb43e48a 100644
--- a/src/core/features/courses/pages/categories/categories.html
+++ b/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" />
diff --git a/src/core/features/courses/pages/list/list.html b/src/core/features/courses/pages/list/list.html
index b896132fb..d8478dd39 100644
--- a/src/core/features/courses/pages/list/list.html
+++ b/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>
 
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index f5f8d1d1e..bbf97167f 100644
--- a/src/theme/theme.base.scss
+++ b/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);
 }