Merge pull request #3208 from NoelDeMartin/MOBILE-3833

MOBILE-3833: Fix block contexts & calendar reactivity

src/addons/block/calendarupcoming/services/block-handler.ts

@@ -20,6 +20,7 @@ import { CoreCourseBlock } from '@features/course/services/course';
 import { Params } from '@angular/router';
 import { makeSingleton } from '@singletons';
 import { AddonCalendarMainMenuHandlerService } from '@addons/calendar/services/handlers/mainmenu';
+import { CoreSites } from '@services/sites';
 
 /**
  * Block handler.
@@ -39,8 +40,11 @@ export class AddonBlockCalendarUpcomingHandlerService extends CoreBlockBaseHandl
      * @return Data or promise resolved with the data.
      */
     getDisplayData(block: CoreCourseBlock, contextLevel: string, instanceId: number): CoreBlockHandlerData {
-        const linkParams: Params = contextLevel == 'course' ? { courseId: instanceId } : {};
+        const linkParams: Params = { upcoming: true };
-        linkParams.upcoming = true;
+
+        if (contextLevel == 'course' && instanceId !== CoreSites.getCurrentSiteHomeId()) {
+            linkParams.courseId = instanceId;
+        }
 
         return {
             title: 'addon.block_calendarupcoming.pluginname',
@@ -48,9 +52,6 @@ export class AddonBlockCalendarUpcomingHandlerService extends CoreBlockBaseHandl
             component: CoreBlockOnlyTitleComponent,
             link: AddonCalendarMainMenuHandlerService.PAGE_NAME,
             linkParams: linkParams,
-            navOptions: {
-                preferCurrentTab: false,
-            },
         };
     }
 

src/addons/calendar/components/calendar/calendar.ts

@@ -23,6 +23,7 @@ import {
     KeyValueDiffers,
     KeyValueDiffer,
     ViewChild,
+    HostBinding,
 } from '@angular/core';
 import { CoreEventObserver, CoreEvents } from '@singletons/events';
 import { CoreSites } from '@services/sites';
@@ -64,6 +65,7 @@ export class AddonCalendarCalendarComponent implements OnInit, DoCheck, OnDestro
     @Input() initialYear?: number; // Initial year to load.
     @Input() initialMonth?: number; // Initial month to load.
     @Input() filter?: AddonCalendarFilter; // Filter to apply.
+    @Input() hidden?: boolean; // Whether the component is hidden.
     @Input() canNavigate?: string | boolean; // Whether to include arrows to change the month. Defaults to true.
     @Input() displayNavButtons?: string | boolean; // Whether to display nav buttons created by this component. Defaults to true.
     @Output() onEventClicked = new EventEmitter<number>();
@@ -74,14 +76,13 @@ export class AddonCalendarCalendarComponent implements OnInit, DoCheck, OnDestro
     loaded = false;
 
     protected currentSiteId: string;
-    protected differ: KeyValueDiffer<unknown, unknown>; // To detect changes in the data input.
+    protected hiddenDiffer?: boolean; // To detect changes in the hidden input.
+    protected filterDiffer: KeyValueDiffer<unknown, unknown>; // To detect changes in the filters input.
     // Observers and listeners.
     protected undeleteEventObserver: CoreEventObserver;
     protected managerUnsubscribe?: () => void;
 
-    constructor(
+    constructor(differs: KeyValueDiffers) {
-        differs: KeyValueDiffers,
-    ) {
         this.currentSiteId = CoreSites.getCurrentSiteId();
 
         // Listen for events "undeleted" (offline).
@@ -104,7 +105,12 @@ export class AddonCalendarCalendarComponent implements OnInit, DoCheck, OnDestro
             this.currentSiteId,
         );
 
-        this.differ = differs.find([]).create();
+        this.hiddenDiffer = this.hidden;
+        this.filterDiffer = differs.find(this.filter ?? {}).create();
+    }
+
+    @HostBinding('attr.hidden') get hiddenAttribute(): string | null {
+        return this.hidden ? 'hidden' : null;
     }
 
     /**
@@ -137,7 +143,7 @@ export class AddonCalendarCalendarComponent implements OnInit, DoCheck, OnDestro
 
         if (items?.length) {
             // Check if there's any change in the filter object.
-            const changes = this.differ.diff(this.filter || {});
+            const changes = this.filterDiffer.diff(this.filter ?? {});
             if (changes) {
                 items.forEach((month) => {
                     if (month.loaded && month.weeks) {
@@ -146,6 +152,14 @@ export class AddonCalendarCalendarComponent implements OnInit, DoCheck, OnDestro
                 });
             }
         }
+
+        if (this.hiddenDiffer !== this.hidden) {
+            this.hiddenDiffer = this.hidden;
+
+            if (!this.hidden) {
+                this.slides?.slides?.getSwiper().then(swipper => swipper.update());
+            }
+        }
     }
 
     get timeFormat(): string {

src/core/features/block/components/side-blocks-button/side-blocks-button.ts

@@ -30,7 +30,8 @@ import { CoreBlockSideBlocksComponent } from '../side-blocks/side-blocks';
 })
 export class CoreBlockSideBlocksButtonComponent implements OnInit, OnDestroy {
 
-    @Input() courseId!: number;
+    @Input() contextLevel!: string;
+    @Input() instanceId!: number;
     @ViewChild('button', { read: ElementRef }) button?: ElementRef<HTMLElement>;
 
     protected element: HTMLElement;
@@ -54,7 +55,8 @@ export class CoreBlockSideBlocksButtonComponent implements OnInit, OnDestroy {
         CoreDomUtils.openSideModal({
             component: CoreBlockSideBlocksComponent,
             componentProps: {
-                courseId: this.courseId,
+                contextLevel: this.contextLevel,
+                instanceId: this.instanceId,
             },
         });
     }

src/core/features/block/components/side-blocks/side-blocks.html

@@ -14,7 +14,7 @@
     <core-loading [hideUntil]="loaded">
         <ion-list *ngIf="blocks.length > 0">
             <ng-container *ngFor="let block of blocks">
-                <core-block *ngIf="block.visible" [block]="block" contextLevel="course" [instanceId]="courseId"></core-block>
+                <core-block *ngIf="block.visible" [block]="block" [contextLevel]="contextLevel" [instanceId]="instanceId"></core-block>
             </ng-container>
         </ion-list>
 

src/core/features/block/components/side-blocks/side-blocks.ts

@@ -32,7 +32,8 @@ import { CoreCoursesDashboard } from '@features/courses/services/dashboard';
 })
 export class CoreBlockSideBlocksComponent implements OnInit {
 
-    @Input() courseId?: number;
+    @Input() contextLevel!: string;
+    @Input() instanceId!: number;
 
     @ViewChildren(CoreBlockComponent) blocksComponents?: QueryList<CoreBlockComponent>;
 
@@ -56,8 +57,8 @@ export class CoreBlockSideBlocksComponent implements OnInit {
     async invalidateBlocks(): Promise<void> {
         const promises: Promise<void>[] = [];
 
-        if (this.courseId) {
+        if (this.contextLevel === 'course') {
-            promises.push(CoreCourse.invalidateCourseBlocks(this.courseId));
+            promises.push(CoreCourse.invalidateCourseBlocks(this.instanceId));
         } else {
             promises.push(CoreCoursesDashboard.invalidateDashboardBlocks());
         }
@@ -79,8 +80,8 @@ export class CoreBlockSideBlocksComponent implements OnInit {
      */
     async loadContent(): Promise<void> {
         try {
-            if (this.courseId) {
+            if (this.contextLevel === 'course') {
-                this.blocks = await CoreBlockHelper.getCourseBlocks(this.courseId);
+                this.blocks = await CoreBlockHelper.getCourseBlocks(this.instanceId);
             } else {
                 const blocks = await CoreCoursesDashboard.getDashboardBlocks();
 

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

@@ -44,7 +44,8 @@
 </core-dynamic-component>
 
 
-<core-block-side-blocks-button slot="fixed" *ngIf="loaded && course && displayBlocks && hasBlocks" [courseId]="course.id">
+<core-block-side-blocks-button slot="fixed" *ngIf="loaded && course && displayBlocks && hasBlocks" contextlevel="course"
+    [instanceId]="course.id">
 </core-block-side-blocks-button>
 
 <!-- Course Index button. -->

src/core/features/course/format/singleactivity/components/core-course-format-single-activity.html

@@ -2,5 +2,5 @@
     <core-dynamic-component [component]="componentClass" [data]="data"></core-dynamic-component>
 </div>
 
-<core-block-side-blocks-button slot="fixed" *ngIf="course && hasBlocks" [courseId]="course.id">
+<core-block-side-blocks-button slot="fixed" *ngIf="course && hasBlocks" contextLevel="course" [instanceId]="course.id">
 </core-block-side-blocks-button>

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

@@ -15,7 +15,8 @@
             </ng-container>
         </ion-list>
 
-        <core-block-side-blocks-button slot="fixed" *ngIf="hasSideBlocks"></core-block-side-blocks-button>
+        <core-block-side-blocks-button slot="fixed" *ngIf="hasSideBlocks" contextLevel="user" [instanceId]="userId">
+        </core-block-side-blocks-button>
 
         <core-empty-box *ngIf="blocks.length == 0" icon="fas-cubes" [message]="'core.course.nocontentavailable' | translate">
         </core-empty-box>

src/core/features/sitehome/pages/index/index.html

@@ -45,7 +45,7 @@
                 </ng-container>
             </ng-container>
         </ion-list>
-        <core-block-side-blocks-button slot="fixed" *ngIf="hasBlocks" [courseId]="siteHomeId">
+        <core-block-side-blocks-button slot="fixed" *ngIf="hasBlocks" contextLevel="course" [instanceId]="siteHomeId">
         </core-block-side-blocks-button>
 
         <core-empty-box *ngIf="!hasContent" icon="fas-box-open" [message]="'core.course.nocontentavailable' | translate">