Merge pull request #6878 from opf/fix/full_view_browser_back_to_calendar

give up on two way binding to prevent empty calendar

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

@@ -22,7 +22,6 @@ import {DomSanitizer} from "@angular/platform-browser";
 })
 export class WorkPackagesCalendarController implements OnInit, OnDestroy {
   calendarOptions:Options;
-  events:any;
   @ViewChild(CalendarComponent) ucCalendar:CalendarComponent;
   @Input() projectIdentifier:string;
   @Input() static:boolean = false;
@@ -44,14 +43,16 @@ export class WorkPackagesCalendarController implements OnInit, OnDestroy {
     this.tableState.stopAllSubscriptions.next();
 
     this.setCalendarOptions();
-
-    this.setupWorkPackagesListener();
   }
 
   ngOnDestroy() {
     // nothing to do
   }
 
+  public onCalendarInitialized() {
+    this.setupWorkPackagesListener();
+  }
+
   public updateTimeframe($event:any) {
     let calendarView = this.calendarElement.fullCalendar('getView')!;
     let startDate = (calendarView.start as Moment).format('YYYY-MM-DD');
@@ -147,7 +148,7 @@ export class WorkPackagesCalendarController implements OnInit, OnDestroy {
   }
 
   private mapToCalendarEvents(workPackages:WorkPackageResource[]) {
-    this.events = workPackages.map((workPackage:WorkPackageResource) => {
+    let events = workPackages.map((workPackage:WorkPackageResource) => {
       let startDate = this.eventDate(workPackage, 'start');
       let endDate = this.eventDate(workPackage, 'due');
 
@@ -159,6 +160,13 @@ export class WorkPackagesCalendarController implements OnInit, OnDestroy {
         workPackage: workPackage
       };
     });
+
+    // Instead of using two way bindings we manually trigger
+    // event rendering here. For whatever reasons, when embedded
+    // in a grid, having two way binding will lead to having constantly
+    // removed the events after showing them initially.
+    // It appears as if the two way binding is initialized twice if used.
+    this.ucCalendar.renderEvents(events);
   }
 
   private warnOnTooManyResults(collection:WorkPackageCollectionResource) {
@@ -192,7 +200,6 @@ export class WorkPackagesCalendarController implements OnInit, OnDestroy {
         center: 'title',
         right: 'month,basicWeek'
       },
-      events: [],
       views: {
         month: {
           fixedWeekCount: false
@@ -204,16 +211,11 @@ export class WorkPackagesCalendarController implements OnInit, OnDestroy {
   private get staticOptions() {
     return {
       editable: false,
-      eventLimit: 17,
+      eventLimit: 18,
       locale: this.i18n.locale,
       height: 400,
-      header: {
-        left: '',
-        center: '',
-        right: ''
-      },
-      defaultView: 'basicWeek',
-      events: []
+      header: false,
+      defaultView: 'basicWeek'
     };
   }
 

frontend/src/app/components/wp-calendar/wp-calendar.template.html

@@ -5,7 +5,7 @@
      style="position: relative">
     <ng-fullcalendar #ucCalendar
                      [options]="calendarOptions"
-                     [(eventsModel)]="events"
+                     (initialized)="onCalendarInitialized()"
                      (viewRender)="updateTimeframe($event)"
                      (eventRender)="addTooltip($event)"
                      (eventClick)="toWPFullView($event)">