Merge pull request #11879 from opf/fix/flickering-avatars

Remove duplicate rendering due to queryspace updates

frontend/src/app/features/team-planner/team-planner/page/team-planner-page.component.ts

@@ -21,7 +21,10 @@ import {
   EffectCallback,
   EffectHandler,
 } from 'core-app/core/state/effects/effect-handler.decorator';
-import { teamPlannerEventAdded } from 'core-app/features/team-planner/team-planner/planner/team-planner.actions';
+import {
+  teamPlannerEventAdded,
+  teamPlannerPageRefresh,
+} from 'core-app/features/team-planner/team-planner/planner/team-planner.actions';
 import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
 import { ActionsService } from 'core-app/core/state/actions/actions.service';
 import { OpWorkPackagesCalendarService } from 'core-app/features/calendar/op-work-packages-calendar.service';
@@ -139,4 +142,8 @@ export class TeamPlannerPageComponent extends PartitionedQuerySpacePageComponent
   reloadOnEventAdded():void {
     void this.refresh(false, false);
   }
+
+  refresh(visibly = false, _firstPage = false):void {
+    this.actions$.dispatch(teamPlannerPageRefresh({ showLoading: visibly }));
+  }
 }

frontend/src/app/features/team-planner/team-planner/planner/team-planner.actions.ts

@@ -13,3 +13,8 @@ export const teamPlannerEventAdded = action(
   '[Team planner] External event added to the team planner',
   props<{ workPackage:ID }>(),
 );
+
+export const teamPlannerPageRefresh = action(
+  '[Team planner] Refresh team planner page due to external param changes',
+  props<{ showLoading:boolean }>(),
+);

frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.ts

@@ -103,6 +103,7 @@ import { ActionsService } from 'core-app/core/state/actions/actions.service';
 import {
   teamPlannerEventAdded,
   teamPlannerEventRemoved,
+  teamPlannerPageRefresh,
 } from 'core-app/features/team-planner/team-planner/planner/team-planner.actions';
 import { imagePath } from 'core-app/shared/helpers/images/path-helper';
 import {
@@ -119,10 +120,15 @@ import { WeekdayService } from 'core-app/core/days/weekday.service';
 import { RawOptionsFromRefiners } from '@fullcalendar/core/internal';
 import { ViewOptionRefiners } from '@fullcalendar/common';
 import { ResourceApi } from '@fullcalendar/resource';
+import {
+  EffectCallback,
+  EffectHandler,
+} from 'core-app/core/state/effects/effect-handler.decorator';
 
 export type TeamPlannerViewOptionKey = 'resourceTimelineWorkWeek'|'resourceTimelineWeek'|'resourceTimelineTwoWeeks';
 export type TeamPlannerViewOptions = { [K in TeamPlannerViewOptionKey]:RawOptionsFromRefiners<Required<ViewOptionRefiners>> };
 
+@EffectHandler
 @Component({
   selector: 'op-team-planner',
   templateUrl: './team-planner.component.html',
@@ -393,15 +399,6 @@ export class TeamPlannerComponent extends UntilDestroyedMixin implements OnInit,
     this.initializeCalendar();
     this.projectIdentifier = this.currentProject.identifier || undefined;
 
-    this
-      .querySpace
-      .results
-      .values$()
-      .pipe(this.untilDestroyed())
-      .subscribe(() => {
-        this.ucCalendar.getApi().refetchEvents();
-      });
-
     this.calendar.resize$
       .pipe(
         this.untilDestroyed(),
@@ -584,11 +581,13 @@ export class TeamPlannerComponent extends UntilDestroyedMixin implements OnInit,
       });
   }
 
-  public calendarEventsFunction(
+  public async calendarEventsFunction(
     fetchInfo:{ start:Date, end:Date, timeZone:string },
     successCallback:(events:EventInput[]) => void,
     failureCallback:(error:unknown) => void,
-  ):void|PromiseLike<EventInput[]> {
+  ):Promise<void> {
+    await this.workPackagesCalendar.updateTimeframe(fetchInfo, this.projectIdentifier);
+
     this
       .workPackagesCalendar
       .currentWorkPackages$
@@ -609,8 +608,6 @@ export class TeamPlannerComponent extends UntilDestroyedMixin implements OnInit,
         },
         failureCallback,
       );
-
-    void this.workPackagesCalendar.updateTimeframe(fetchInfo, this.projectIdentifier);
   }
 
   public switchView(key:TeamPlannerViewOptionKey):void {
@@ -638,35 +635,11 @@ export class TeamPlannerComponent extends UntilDestroyedMixin implements OnInit,
     }, 500);
   }
 
-  renderTemplate(template:TemplateRef<unknown>, id:string, data:ResourceLabelContentArg|EventContentArg):{ domNodes:unknown[] } {
-    if (this.isDraggedEvent(id)) {
-      this.viewLookup.markForDestruction(id);
-    }
-
-    const ref = this.viewLookup.getView(template, id, data);
-    return { domNodes: ref.rootNodes };
-  }
-
-  unrenderTemplate(id:string):void {
-    this.viewLookup.markForDestruction(id);
-  }
-
   isDraggedEvent(id:string):boolean {
     const dragging = this.draggingItem$.getValue();
     return !!dragging && (dragging.event.extendedProps?.workPackage as undefined|WorkPackageResource)?.href === id;
   }
 
-  eventId(data:EventContentArg):string {
-    return [
-      data.event.id,
-      data.event.start?.toISOString(),
-      data.event.end?.toISOString(),
-      data.timeText,
-      `dragging=${data.isDragging.toString()}`,
-      `resizing=${data.isResizing.toString()}`,
-    ].join('-');
-  }
-
   public showAssigneeAddRow():void {
     this.showAddAssignee$.next(true);
     this.ucCalendar.getApi().refetchEvents();
@@ -1001,4 +974,14 @@ export class TeamPlannerComponent extends UntilDestroyedMixin implements OnInit,
       api.addEvent({ ...day }, 'background');
     });
   }
+
+  @EffectCallback(teamPlannerPageRefresh)
+  reloadOnEventAdded(action:ReturnType<typeof teamPlannerPageRefresh>):void {
+    if (action.showLoading) {
+      this.loading$ = new Subject<unknown>();
+      this.toastService.addLoading(this.loading$);
+    }
+
+    this.ucCalendar.getApi().refetchEvents();
+  }
 }

frontend/src/app/features/work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component.ts

@@ -233,7 +233,7 @@ export class PartitionedQuerySpacePageComponent extends WorkPackagesViewBase imp
     }
   }
 
-  refresh(visibly = false, firstPage = false):Promise<QueryResource> {
+  refresh(visibly = false, firstPage = false):void {
     let promise = this.loadQuery(firstPage);
 
     if (visibly) {
@@ -245,21 +245,14 @@ export class PartitionedQuerySpacePageComponent extends WorkPackagesViewBase imp
 
       this.loadingIndicator = promise;
     } else {
-      promise = promise.then((loadedQuery:QueryResource) => {
+      void promise.then((loadedQuery:QueryResource) => {
         this.wpStatesInitialization.initialize(loadedQuery, loadedQuery.results);
-        return loadedQuery;
       });
     }
-
-    return promise;
   }
 
   protected inviteModal = InviteUserModalComponent;
 
-  openInviteUserModal():void {
-    this.opModalService.show(this.inviteModal, 'global');
-  }
-
   protected loadQuery(firstPage = false):Promise<QueryResource> {
     let promise:Promise<QueryResource>;
     const query = this.currentQuery;

frontend/src/app/features/work-packages/routing/wp-view-base/work-packages-view.base.ts

@@ -221,7 +221,7 @@ export abstract class WorkPackagesViewBase extends UntilDestroyedMixin implement
    *
    * @param A refresh request
    */
-  public abstract refresh(visibly:boolean, firstPage:boolean):Promise<unknown>;
+  public abstract refresh(visibly:boolean, firstPage:boolean):void;
 
   /**
    * Set the loading indicator for this set instance