MOBILE-3757 course: Display activity dates in course page

src/core/features/course/components/format/core-course-format.html

@@ -146,7 +146,8 @@
         <ng-container *ngFor="let module of section.modules">
             <core-course-module *ngIf="module.visibleoncoursepage !== 0" [module]="module" [courseId]="course?.id"
                 [downloadEnabled]="downloadEnabled" [section]="section" (completionChanged)="onCompletionChange($event)"
-                (statusChanged)="onModuleStatusChange()">
+                (statusChanged)="onModuleStatusChange()" [showActivityDates]="course?.showactivitydates"
+                [showCompletionConditions]="course?.showcompletionconditions">
             </core-course-module>
         </ng-container>
     </section>

src/core/features/course/components/module/core-course-module.html

@@ -6,7 +6,7 @@
             (click)="moduleClicked($event)"
             [attr.aria-label]="module.handlerData.a11yTitle"
             [ngClass]="{
-                'has-module-description': module.description,
+                'has-module-info': hasInfo,
                 'item-media': module.handlerData.icon,
                 'item-dimmed': module.visible === 0 || module.uservisible === false
             }"
@@ -74,9 +74,9 @@
             </div>
         </ion-item>
         <ion-item
-            *ngIf="module.description"
+            *ngIf="hasInfo"
             id="core-course-module-{{module.id}}-info"
-            class="ion-text-wrap core-course-module-handler core-module-module-description {{module.handlerData.class}}"
+            class="ion-text-wrap core-course-module-handler core-module-module-info {{module.handlerData.class}}"
             [ngClass]="{
                 'item-media': module.handlerData.icon,
                 'item-dimmed': module.visible === 0 || module.uservisible === false
@@ -84,6 +84,11 @@
             detail="false"
         >
             <ion-label>
+                <div *ngIf="showActivityDates && module.dates && module.dates.length" class="core-module-dates">
+                    <p *ngFor="let date of module.dates">
+                        <strong>{{ date.label }}</strong> {{ date.timestamp * 1000 | coreFormatDate:'strftimedatetime' }}
+                    </p>
+                </div>
                 <core-format-text class="core-module-description" *ngIf="module.description" maxHeight="80" [text]="module.description"
                     contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
                 </core-format-text>

src/core/features/course/components/module/module.scss

@@ -31,7 +31,7 @@
         }
     }
 
-    .core-module-module-description {
+    .core-module-module-info {
         ion-badge {
             text-align: start;
         }
@@ -51,15 +51,15 @@
         clear: both;
     }
 
-    .core-module-main-item + .core-module-module-description ion-label {
+    .core-module-main-item + .core-module-module-info ion-label {
         margin-top: 0px;
     }
 
-    .core-module-main-item.has-module-description {
+    .core-module-main-item.has-module-info {
         --inner-border-width: 0;
     }
 
-    .core-module-module-description ion-label {
+    .core-module-module-info ion-label {
         margin-inline-start: 50px;
     }
 

src/core/features/course/components/module/module.ts

@@ -47,6 +47,8 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
     @Input() module!: CoreCourseModule; // The module to render.
     @Input() courseId?: number; // The course the module belongs to.
     @Input() section?: CoreCourseSection; // The section the module belongs to.
+    @Input() showActivityDates = false; // Whether to show activity dates.
+    @Input() showCompletionConditions = false;  // Whether to show activity completion conditions.
     // eslint-disable-next-line @angular-eslint/no-input-rename
     @Input('downloadEnabled') set enabled(value: boolean) {
         this.downloadEnabled = value;
@@ -61,7 +63,7 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
 
         // Get current status to decide which icon should be shown.
         this.calculateAndShowStatus();
-    };
+    }
 
     @Output() completionChanged = new EventEmitter<CoreCourseModuleCompletionData>(); // Notify when module completion changes.
     @Output() statusChanged = new EventEmitter<CoreCourseModuleStatusChangedData>(); // Notify when the download status changes.
@@ -71,6 +73,7 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
     spinner?: boolean; // Whether to display a loading spinner.
     downloadEnabled?: boolean; // Whether the download of sections and modules is enabled.
     modNameTranslated = '';
+    hasInfo = false;
 
     protected prefetchHandler?: CoreCourseModulePrefetchHandler;
     protected statusObserver?: CoreEventObserver;
@@ -89,6 +92,10 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
         }
 
         this.module.handlerData.a11yTitle = this.module.handlerData.a11yTitle ?? this.module.handlerData.title;
+        this.hasInfo = !!(
+            this.module.description ||
+            (this.showActivityDates && this.module.dates && this.module.dates.length)
+        );
 
         if (this.module.handlerData.showDownloadButton) {
             // Listen for changes on this module status, even if download isn't enabled.

src/core/features/course/services/course.ts

@@ -1262,6 +1262,8 @@ export type CoreCourseSummary = {
     timeaccess?: number; // @since 3.6. Timeaccess.
     showshortname: boolean; // @since 3.6. Showshortname.
     coursecategory: string; // @since 3.7. Coursecategory.
+    showactivitydates: boolean | null; // @since 3.11. Whether the activity dates are shown or not.
+    showcompletionconditions: boolean | null; // @since 3.11. Whether the activity completion conditions are shown or not.
 };
 
 /**
@@ -1442,6 +1444,10 @@ export type CoreCourseWSModule = {
     completion?: number; // Type of completion tracking: 0 means none, 1 manual, 2 automatic.
     completiondata?: CoreCourseModuleWSCompletionData; // Module completion data.
     contents: CoreCourseModuleContentFile[];
+    dates?: {
+        label: string;
+        timestamp: number;
+    }[]; // @since 3.11. Activity dates.
     contentsinfo?: { // Contents summary information.
         filescount: number; // Total number of files.
         filessize: number; // Total files size.

src/core/features/courses/services/courses.ts

@@ -1264,6 +1264,8 @@ export type CoreEnrolledCourseData = CoreEnrolledCourseBasicData & {
     isfavourite?: boolean; // If the user marked this course a favourite.
     hidden?: boolean; // If the user hide the course from the dashboard.
     overviewfiles?: CoreWSExternalFile[];
+    showactivitydates?: boolean; // @since 3.11. Whether the activity dates are shown or not.
+    showcompletionconditions?: boolean; // @since 3.11. Whether the activity completion conditions are shown or not.
 };
 
 /**
@@ -1281,6 +1283,8 @@ export type CoreCourseBasicSearchedData = CoreCourseBasicData & {
     }[];
     enrollmentmethods: string[]; // Enrollment methods list.
     customfields?: CoreCourseCustomField[]; // Custom fields and associated values.
+    showactivitydates?: boolean; // @since 3.11. Whether the activity dates are shown or not.
+    showcompletionconditions?: boolean; // @since 3.11. Whether the activity completion conditions are shown or not.
 };
 
 export type CoreCourseSearchedData = CoreCourseBasicSearchedData & {
@@ -1342,6 +1346,8 @@ export type CoreCourseGetCoursesData = CoreEnrolledCourseBasicData & {
     forcetheme?: string; // Name of the force theme.
     courseformatoptions?: CoreCourseFormatOption[]; // Additional options for particular course format.
     customfields?: CoreCourseCustomField[]; // Custom fields and associated values.
+    showactivitydates?: boolean; // @since 3.11. Whether the activity dates are shown or not.
+    showcompletionconditions?: boolean; // @since 3.11. Whether the activity completion conditions are shown or not.
 };
 
 /**