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

crazyserver · Jan 9, 2025 · 9108e76 · 9108e76
1 parent 988a5b6
commit 9108e76
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 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
@@ -117,11 +117,11 @@ <h2>{{ 'addon.block_myoverview.pluginname' | translate }}</h2>
     </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/...cessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html b/...cessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
@@ -12,7 +12,7 @@ <h2>{{ 'addon.block_recentlyaccessedcourses.pluginname' | translate }}</h2>
     <!-- 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
@@ -12,7 +12,7 @@ <h2>{{ 'addon.block_starredcourses.pluginname' | translate }}</h2>
     <!-- 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
@@ -14,7 +14,7 @@ <h4>{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedaydate" }}</h4>
     </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
@@ -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
@@ -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
@@ -38,13 +38,13 @@ <h1>
                 </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,17 +59,17 @@ <h2 class="big">{{ 'core.courses.categories' | translate }}</h2>
                         </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>
                         <h2 *ngIf="showOnlyEnrolled" class="big">{{ 'core.courses.mycourses' | translate }}</h2>
                     </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
@@ -37,7 +37,7 @@ <h2>{{ 'core.courses.totalcoursesearchresults' | translate:{$a: searchTotal} }}<
             </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
@@ -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);
 }