Development: Replace bootstrap components with primeng in calendar (#11415)

Author: marlonnienaber

package-lock.json

@@ -28,13 +28,6 @@
     }
 </div>
 
-<ng-template #eventPopover let-pop="popover">
-    @let event = selectedEvent();
-    @if (event) {
-        <jhi-calendar-event-detail-popover [event]="event" (onClosePopover)="closePopover()" />
-    }
-</ng-template>
-
 <ng-template #eventCell let-event>
     <div
         class="event-cell"
@@ -44,15 +37,12 @@
             'tutorial-event-cell': event.isOfType(CalendarEventType.Tutorial),
             'exercise-event-cell': event.isOfExerciseType(),
         }"
-        [ngbPopover]="eventPopover"
-        triggers="manual"
-        [autoClose]="false"
-        [placement]="['bottom', 'right', 'left', 'top']"
-        (click)="openPopover(event, popover)"
-        #popover="ngbPopover"
+        (click)="eventDetailPopover.open($event, event)"
         [attr.data-testid]="event.title"
     >
         <div class="event-label">{{ event.title }}</div>
         <fa-icon [icon]="utils.getIconForEvent(event)" />
     </div>
 </ng-template>
+
+<jhi-calendar-event-detail-popover-component #eventDetailPopover />

src/main/webapp/app/core/calendar/desktop/month-presentation/calendar-desktop-month-presentation.component.html

@@ -9,7 +9,8 @@ import { CalendarService } from 'app/core/calendar/shared/service/calendar.servi
 import { CalendarEvent, CalendarEventType } from 'app/core/calendar/shared/entities/calendar-event.model';
 import { CalendarDesktopMonthPresentationComponent } from './calendar-desktop-month-presentation.component';
 import { CalendarDayBadgeComponent } from 'app/core/calendar/shared/calendar-day-badge/calendar-day-badge.component';
-import { CalendarEventDetailPopoverComponent } from 'app/core/calendar/shared/calendar-event-detail-popover/calendar-event-detail-popover.component';
+import { CalendarEventDetailPopoverComponent } from 'app/core/calendar/shared/calendar-event-detail-popover-component/calendar-event-detail-popover.component';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 
 describe('CalendarDesktopMonthPresentationComponent', () => {
     let fixture: ComponentFixture<CalendarDesktopMonthPresentationComponent>;
@@ -61,6 +62,7 @@ describe('CalendarDesktopMonthPresentationComponent', () => {
                     provide: CalendarService,
                     useFactory: () => new MockCalendarService(mockMap),
                 },
+                provideNoopAnimations(),
             ],
         }).compileComponents();
 
@@ -105,66 +107,47 @@ describe('CalendarDesktopMonthPresentationComponent', () => {
         expect(lecture3EventCell).toBeFalsy();
     });
 
-    it('should open popover', () => {
-        const eventCell = fixture.debugElement.query(By.css('[data-testid="Exam"]'));
-        expect(eventCell).toBeTruthy();
+    it('should open popover', async () => {
+        const popoverDebugElement = fixture.debugElement.query(By.directive(CalendarEventDetailPopoverComponent));
+        const popoverComponent = popoverDebugElement.componentInstance as CalendarEventDetailPopoverComponent;
 
+        const eventCell = fixture.debugElement.query(By.css('[data-testid="Exam"]'));
         eventCell.nativeElement.click();
         fixture.detectChanges();
+        await fixture.whenStable();
 
-        expect(component.selectedEvent()?.id).toBe(events[0].id);
-
-        const popoverContent = fixture.debugElement.query(By.directive(CalendarEventDetailPopoverComponent));
-        expect(popoverContent).toBeTruthy();
+        expect(popoverComponent.isOpen()).toBeTrue();
     });
 
-    it('should close popover only when close button used', () => {
+    it('should close popover only when close button used', async () => {
+        const popoverDebugElement = fixture.debugElement.query(By.directive(CalendarEventDetailPopoverComponent));
+        const popoverComponent = popoverDebugElement.componentInstance as CalendarEventDetailPopoverComponent;
+        const closeSpy = jest.spyOn(popoverComponent, 'close');
+
         const examEventCell = fixture.debugElement.query(By.css('[data-testid="Exam"]'));
         expect(examEventCell).toBeTruthy();
-
         examEventCell.nativeElement.click();
         fixture.detectChanges();
-
-        let popoverComponent = fixture.debugElement.query(By.directive(CalendarEventDetailPopoverComponent));
-        expect(component.selectedEvent()?.id).toBe(events[0].id);
-        expect(popoverComponent).toBeTruthy();
+        await fixture.whenStable();
+        expect(popoverComponent.isOpen()).toBeTrue();
 
         const emptyDayCell = fixture.debugElement.queryAll(By.css('.day-cell')).find((cell) => cell.queryAll(By.css('.event-cell')).length === 0);
         expect(emptyDayCell).toBeTruthy();
-
         emptyDayCell!.nativeElement.click();
         fixture.detectChanges();
+        await fixture.whenStable();
+        expect(popoverComponent.isOpen()).toBeFalse();
 
-        expect(component.selectedEvent()?.id).toBe(events[0].id);
-        popoverComponent = fixture.debugElement.query(By.directive(CalendarEventDetailPopoverComponent));
-        expect(popoverComponent).toBeTruthy();
-
-        const closeButton = popoverComponent.query(By.css('.close-button'));
-        expect(closeButton).toBeTruthy();
-
-        closeButton.nativeElement.click();
-        fixture.detectChanges();
-
-        expect(component.selectedEvent()).toBeUndefined();
-        popoverComponent = fixture.debugElement.query(By.directive(CalendarEventDetailPopoverComponent));
-        expect(popoverComponent).toBeFalsy();
-    });
-
-    it('should replace popover when other event selected', () => {
-        const firstEventCell = fixture.debugElement.query(By.css('[data-testid="Exam"]'));
-        firstEventCell.nativeElement.click();
+        examEventCell.nativeElement.click();
         fixture.detectChanges();
+        await fixture.whenStable();
+        expect(popoverComponent.isOpen()).toBeTrue();
 
-        let popoverComponent = fixture.debugElement.query(By.directive(CalendarEventDetailPopoverComponent));
-        expect(component.selectedEvent()?.id).toBe(events[0].id);
-        expect(popoverComponent).toBeTruthy();
-
-        const secondEventCell = fixture.debugElement.query(By.css('[data-testid="Object Design"]'));
-        secondEventCell.nativeElement.click();
+        const closeButton = document.querySelector('.close-button') as HTMLElement;
+        expect(closeButton).toBeTruthy();
+        closeButton.click();
         fixture.detectChanges();
-
-        popoverComponent = fixture.debugElement.query(By.directive(CalendarEventDetailPopoverComponent));
-        expect(popoverComponent).toBeTruthy();
-        expect(component.selectedEvent()?.id).toBe(events[1].id);
+        await fixture.whenStable();
+        expect(closeSpy).toHaveBeenCalledOnce();
     });
 });

src/main/webapp/app/core/calendar/desktop/month-presentation/calendar-desktop-month-presentation.component.spec.ts

@@ -1,54 +1,34 @@
-import { Component, computed, inject, input, signal } from '@angular/core';
+import { Component, computed, inject, input } from '@angular/core';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
-import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { Dayjs } from 'dayjs/esm';
 import { TranslateDirective } from 'app/shared/language/translate.directive';
 import * as utils from 'app/core/calendar/shared/util/calendar-util';
 import { CalendarEvent, CalendarEventType } from 'app/core/calendar/shared/entities/calendar-event.model';
 import { CalendarService } from 'app/core/calendar/shared/service/calendar.service';
 import { CalendarDayBadgeComponent } from 'app/core/calendar/shared/calendar-day-badge/calendar-day-badge.component';
-import { CalendarEventDetailPopoverComponent } from 'app/core/calendar/shared/calendar-event-detail-popover/calendar-event-detail-popover.component';
+import { CalendarEventDetailPopoverComponent } from 'app/core/calendar/shared/calendar-event-detail-popover-component/calendar-event-detail-popover.component';
 
 @Component({
     selector: 'jhi-calendar-desktop-month-presentation',
-    imports: [NgClass, NgTemplateOutlet, NgbPopover, FaIconComponent, TranslateDirective, CalendarDayBadgeComponent, CalendarEventDetailPopoverComponent],
+    imports: [NgClass, NgTemplateOutlet, FaIconComponent, TranslateDirective, CalendarDayBadgeComponent, CalendarEventDetailPopoverComponent],
     templateUrl: './calendar-desktop-month-presentation.component.html',
     styleUrls: ['./calendar-desktop-month-presentation.component.scss'],
 })
 export class CalendarDesktopMonthPresentationComponent {
-    private popover?: NgbPopover;
     private eventMap = inject(CalendarService).eventMap;
 
-    firstDayOfCurrentMonth = input.required<Dayjs>();
-    selectedEvent = signal<CalendarEvent | undefined>(undefined);
-
     readonly utils = utils;
     readonly CalendarEventType = CalendarEventType;
-    readonly weeks = computed(() => this.computeWeeksFrom(this.firstDayOfCurrentMonth()));
+
+    firstDayOfCurrentMonth = input.required<Dayjs>();
+    weeks = computed(() => this.computeWeeksFrom(this.firstDayOfCurrentMonth()));
 
     getEventsOf(day: Dayjs): CalendarEvent[] {
         const key = day.format('YYYY-MM-DD');
         return this.eventMap().get(key) ?? [];
     }
 
-    openPopover(event: CalendarEvent, popover: NgbPopover) {
-        if (this.selectedEvent() === event) {
-            this.closePopover();
-            return;
-        }
-        this.selectedEvent.set(event);
-        this.popover?.close();
-        this.popover = popover;
-        popover.open();
-    }
-
-    closePopover() {
-        this.popover?.close();
-        this.popover = undefined;
-        this.selectedEvent.set(undefined);
-    }
-
     /**
      * Computes all weeks overlapping with the month of the parameter.
      *