Rewrite calender component to also use refresh action like team planner

frontend/src/app/features/calendar/calendar.actions.ts

@@ -0,0 +1,10 @@
+import { ID } from '@datorama/akita';
+import {
+  action,
+  props,
+} from 'ts-action';
+
+export const calendarRefreshRequest = action(
+  '[Calendar] Refresh calendar page due to external param changes',
+  props<{ showLoading:boolean }>(),
+);

frontend/src/app/features/calendar/op-work-packages-calendar.service.ts

@@ -109,19 +109,6 @@ export class OpWorkPackagesCalendarService extends UntilDestroyedMixin {
     super();
   }
 
-  workPackagesListener$(callbackFn:() => void):void {
-    this
-      .querySpace
-      .results
-      .values$()
-      .pipe(
-        this.untilDestroyed(),
-      )
-      .subscribe(() => {
-        callbackFn();
-      });
-  }
-
   calendarOptions(additionalOptions:CalendarOptions):CalendarOptions {
     return { ...this.defaultOptions(), ...additionalOptions };
   }

frontend/src/app/features/calendar/wp-calendar-page/wp-calendar-page.component.ts

@@ -45,6 +45,10 @@ import { WorkPackageSettingsButtonComponent } from 'core-app/features/work-packa
 import { QueryResource } from 'core-app/features/hal/resources/query-resource';
 import { QueryParamListenerService } from 'core-app/features/work-packages/components/wp-query/query-param-listener.service';
 import { OpProjectIncludeComponent } from 'core-app/shared/components/project-include/project-include.component';
+import { teamPlannerPageRefresh } from 'core-app/features/team-planner/team-planner/planner/team-planner.actions';
+import { calendarRefreshRequest } from 'core-app/features/calendar/calendar.actions';
+import { ActionsService } from 'core-app/core/state/actions/actions.service';
+import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
 
 @Component({
   templateUrl: '../../work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component.html',
@@ -57,6 +61,8 @@ import { OpProjectIncludeComponent } from 'core-app/shared/components/project-in
   ],
 })
 export class WorkPackagesCalendarPageComponent extends PartitionedQuerySpacePageComponent {
+  @InjectField(ActionsService) actions$:ActionsService;
+
   @ViewChild(WorkPackagesCalendarComponent, { static: true }) calendarElement:WorkPackagesCalendarComponent;
 
   text = {
@@ -130,4 +136,11 @@ export class WorkPackagesCalendarPageComponent extends PartitionedQuerySpacePage
   protected loadInitialQuery():void {
     // We never load the initial query as the calendar service does all that.
   }
+
+  /**
+   * Instead of refreshing the query space diretly, send an effect so fullcalendar can reload individually
+   */
+  refresh(visibly = false, _firstPage = false):void {
+    this.actions$.dispatch(calendarRefreshRequest({ showLoading: visibly }));
+  }
 }

frontend/src/app/features/calendar/wp-calendar/wp-calendar.component.ts

@@ -77,7 +77,15 @@ import {
 import { OpCalendarService } from 'core-app/features/calendar/op-calendar.service';
 import { WeekdayService } from 'core-app/core/days/weekday.service';
 import { DayResourceService } from 'core-app/core/state/days/day.service';
-
+import {
+  EffectCallback,
+  EffectHandler,
+} from 'core-app/core/state/effects/effect-handler.decorator';
+import { teamPlannerPageRefresh } from 'core-app/features/team-planner/team-planner/planner/team-planner.actions';
+import { calendarRefreshRequest } from 'core-app/features/calendar/calendar.actions';
+import { ActionsService } from 'core-app/core/state/actions/actions.service';
+
+@EffectHandler
 @Component({
   templateUrl: './wp-calendar.template.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -107,6 +115,7 @@ export class WorkPackagesCalendarComponent extends UntilDestroyedMixin implement
   };
 
   constructor(
+    readonly actions$:ActionsService,
     readonly states:States,
     readonly $state:StateService,
     readonly wpTableFilters:WorkPackageViewFiltersService,
@@ -146,7 +155,6 @@ export class WorkPackagesCalendarComponent extends UntilDestroyedMixin implement
     // Clear any old subscribers
     this.querySpace.stopAllSubscriptions.next();
 
-    this.setupWorkPackagesListener();
     this.initializeCalendar();
   }
 
@@ -304,13 +312,6 @@ export class WorkPackagesCalendarComponent extends UntilDestroyedMixin implement
     this.workPackagesCalendar.showEventContextMenu({ workPackageId, event });
   }
 
-  private setupWorkPackagesListener():void {
-    this.workPackagesCalendar.workPackagesListener$(() => {
-      this.alreadyLoaded = true;
-      this.ucCalendar.getApi().refetchEvents();
-    });
-  }
-
   private updateResults(collection:WorkPackageCollectionResource) {
     this.workPackagesCalendar.warnOnTooManyResults(collection, this.static);
     return this.mapToCalendarEvents(collection.elements);
@@ -395,4 +396,9 @@ export class WorkPackagesCalendarComponent extends UntilDestroyedMixin implement
       api.addEvent({ ...day }, 'background');
     });
   }
+
+  @EffectCallback(calendarRefreshRequest)
+  reloadOnRefreshRequest():void {
+    this.ucCalendar.getApi().refetchEvents();
+  }
 }