@skysoftware-co/bayan-hr-widgets-ui 2.0.25 → 2.0.27

package/src/lib/my-upcoming-events-widget/my-upcoming-events-widget.component.html

@@ -0,0 +1,74 @@
+<!-- Card View -->
+<div [class]="cardClass()">
+  <hr-card-header [icon]="calendarStar" [title]="'UpcomingEvents' | translate"></hr-card-header>
+
+  @if (birthdays().length > 0 || holidays().length > 0) {
+    <hr-event-tab-bar
+      [selectedType]="selectedEventType()"
+      [selectedLanguage]="selectedLanguage()"
+      [tabSelectedClass]="tabSelectedClass()"
+      [tabNotSelectedClass]="tabNotSelectedClass()"
+      [tabTextSelectedClass]="tabTextSelectedClass()"
+      [tabTextNotSelectedClass]="tabTextNotSelectedClass()"
+      [containerClass]="tabContainerClass()"
+      [tabItemClass]="tabItemClass()"
+      [tabTextClass]="tabTextClass()"
+      [tabIconClass]="tabIconClass()"
+      (tabSelected)="onTabClick($event)"
+    ></hr-event-tab-bar>
+
+    <hr-event-item
+      [events]="filteredEvents()"
+      [showDates]="false"
+      [showProperty]="showProperty()"
+      [selectedLanguage]="selectedLanguage()"
+      [selectedEventType]="selectedEventType()"
+      [weekendWarningDescription]="weekendWarning()"
+      [eventIconClass]="eventIconClass()"
+      [eventNameBoldClass]="eventNameBoldClass()"
+      [eventDescriptionClass]="eventDescriptionClass()"
+      [propertyBadgeClass]="propertyBadgeClass()"
+      [noEventsTextClass]="noEventsTextClass()"
+      [warningTextClass]="warningTextClass()"
+      [dateFormat]="dateFormat()"
+    ></hr-event-item>
+
+    <div [class]="viewAllContainerClass()">
+      <a [class]="viewAllLinkClass()" (click)="showPopup()">{{ 'ViewAll' | translate }}</a>
+    </div>
+  } @else {
+    <div [class]="noEventsTextClass()">{{ 'NoEvents' | translate }}</div>
+  }
+</div>
+
+<!-- Popup -->
+<hr-upcoming-events-popup
+  [visible]="popupVisible()"
+  [events]="popupEvents()"
+  [hasBirthdays]="birthdays().length > 0"
+  [hasHolidays]="holidays().length > 0"
+  [isLoading]="false"
+  [selectedLanguage]="selectedLanguage()"
+  [showProperty]="showProperty()"
+  [weekendWarningDescription]="weekendWarning()"
+  [popupTitle]="'UpcomingEvents' | translate"
+  [selectedEventType]="selectedPopupEventType()"
+  [tabSelectedClass]="tabSelectedClass()"
+  [tabNotSelectedClass]="tabNotSelectedClass()"
+  [tabTextSelectedClass]="tabTextSelectedClass()"
+  [tabTextNotSelectedClass]="tabTextNotSelectedClass()"
+  [tabContainerClass]="tabContainerClass()"
+  [tabItemClass]="tabItemClass()"
+  [tabTextClass]="tabTextClass()"
+  [tabIconClass]="tabIconClass()"
+  [eventIconClass]="eventIconClass()"
+  [eventNameBoldClass]="eventNameBoldClass()"
+  [eventDescriptionClass]="eventDescriptionClass()"
+  [propertyBadgeClass]="propertyBadgeClass()"
+  [noEventsTextClass]="noEventsTextClass()"
+  [warningTextClass]="warningTextClass()"
+  [dateFormat]="dateFormat()"
+  (visibleChange)="onPopupVisibleChange($event)"
+  (tabSelected)="onPopupTabClick($event)"
+  (closed)="onPopupClose()"
+></hr-upcoming-events-popup>

package/src/lib/my-upcoming-events-widget/my-upcoming-events-widget.component.ts

@@ -0,0 +1,199 @@
+import { ChangeDetectionStrategy, Component, effect, inject, input, output, signal } from '@angular/core';
+import { HRSelfWidgetsService } from '../services/hr-self-widgets.service';
+import { faCalendarStar } from '@fortawesome/pro-light-svg-icons';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { HRCardHeaderComponent } from '../shared/components/card-header/card-header.component';
+import { HREventItemComponent } from './components/event-item/event-item.component';
+import { HREventTabBarComponent } from './components/event-tab-bar/event-tab-bar.component';
+import { HREventsPopupComponent } from './components/events-popup/events-popup.component';
+import {
+  EventOption,
+  RelativeDay,
+  Birthday,
+  PublicHoliday,
+  UpcomingEventsV2,
+  EventTypeEnum,
+  FilteredUpcomingEvent,
+} from '../shared/types/common';
+import { HRTranslatePipe } from '../shared/pipes/translate.pipe';
+
+@Component({
+  selector: 'hr-my-upcoming-events-widget',
+  standalone: true,
+  imports: [
+    FontAwesomeModule,
+    HRCardHeaderComponent,
+    HREventItemComponent,
+    HREventTabBarComponent,
+    HREventsPopupComponent,
+    HRTranslatePipe,
+  ],
+  templateUrl: './my-upcoming-events-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyUpcomingEventsWidgetComponent {
+  readonly baseUrl = input<string>('');
+  readonly weekendWarningDescription = input<string>('WeekendDayNotDefined');
+  readonly selectedLanguage = input<string>('en');
+  readonly showProperty = input<boolean>(true);
+
+  readonly cardClass = input<string>('bg-light-gray border-0 card p-3 card-shadow rounded rounded-4 mt-3');
+  readonly noEventsTextClass = input<string>('text-center my-3 text-light-gray');
+  readonly viewAllLinkClass = input<string>('fs-14 mt-2');
+  readonly viewAllContainerClass = input<string>('d-flex justify-content-end cursor-pointer');
+  readonly warningTextClass = input<string>('text-center my-2 text-light-gray');
+  readonly tabSelectedClass = input<string>('selected-event-option');
+  readonly tabNotSelectedClass = input<string>('not-selected-event-option');
+  readonly tabTextSelectedClass = input<string>('text-white');
+  readonly tabTextNotSelectedClass = input<string>('text-primary');
+  readonly tabContainerClass = input<string>('d-flex gap-2 mb-3');
+  readonly tabItemClass = input<string>(
+    'col-1 align-items-center rounded rounded-3 cursor-pointer text-center d-flex justify-content-center py-2 px-3',
+  );
+  readonly tabTextClass = input<string>('fs-16');
+  readonly tabIconClass = input<string>('fs-6');
+  readonly eventIconClass = input<string>('fs-6 text-primary pe-2');
+  readonly eventNameBoldClass = input<string>('fw-medium');
+  readonly eventDescriptionClass = input<string>('text-primary fw-medium');
+  readonly propertyBadgeClass = input<string>('property-badge cursor-pointer me-1');
+  readonly dateFormat = input<string>('dd/MM/yyyy');
+
+  readonly isLoadingChanged = output<boolean>();
+  readonly viewAllClicked = output<void>();
+
+  readonly externalViewAll = input<boolean>(false);
+
+  readonly selectedEventType = signal<EventTypeEnum | null>(null);
+  readonly selectedPopupEventType = signal<EventTypeEnum | null>(null);
+
+  readonly calendarStar = faCalendarStar;
+
+  readonly filteredEvents = signal<FilteredUpcomingEvent[]>([]);
+  readonly birthdays = signal<Birthday[]>([]);
+  readonly holidays = signal<PublicHoliday[]>([]);
+
+  readonly popupEvents = signal<FilteredUpcomingEvent[]>([]);
+  readonly popupVisible = signal(false);
+
+  readonly weekendWarning = signal<string | null>(null);
+
+  private readonly selfWidgetsService = inject(HRSelfWidgetsService);
+
+  private readonly loadEventsEffect = effect(() => {
+    this.loadEvents(EventOption.All);
+  });
+
+  onTabClick(eventType: EventTypeEnum | null) {
+    this.selectedEventType.set(eventType);
+    this.filteredEvents.set(this.buildEvents(this.cardData(), eventType, 2));
+  }
+
+  onPopupTabClick(eventType: EventTypeEnum | null) {
+    this.selectedPopupEventType.set(eventType);
+    this.popupEvents.set(this.buildEvents(this.cardData(), eventType));
+  }
+
+  showPopup() {
+    if (this.externalViewAll()) {
+      this.viewAllClicked.emit();
+      return;
+    }
+    this.popupEvents.set(this.buildEvents(this.cardData(), this.selectedPopupEventType()));
+    this.popupVisible.set(true);
+  }
+
+  onPopupClose() {
+    this.popupVisible.set(false);
+    this.selectedPopupEventType.set(null);
+  }
+
+  onPopupVisibleChange(visible: boolean) {
+    this.popupVisible.set(visible);
+  }
+
+  // --- Private ---
+
+  private readonly cardData = signal<UpcomingEventsV2 | null>(null);
+
+  private getUpcomingEvents(eventOption: EventOption) {
+    return this.selfWidgetsService.getUpcomingEvents(this.baseUrl(), eventOption);
+  }
+
+  private loadEvents(eventOption: EventOption) {
+    this.isLoadingChanged.emit(true);
+    this.getUpcomingEvents(eventOption).subscribe({
+      next: (response: any) => {
+        this.cardData.set(response.ResponseData);
+        const currentData = this.cardData();
+        this.birthdays.set(currentData?.Birthdays || []);
+        this.holidays.set(currentData?.PublicHolidays || []);
+        this.weekendWarning.set(currentData?.IsWeekendConfigured === false ? this.weekendWarningDescription() : null);
+        this.filteredEvents.set(this.buildEvents(currentData, null, 2));
+        this.isLoadingChanged.emit(false);
+      },
+      error: () => {
+        this.isLoadingChanged.emit(false);
+      },
+    });
+  }
+
+  private buildEvents(
+    source: UpcomingEventsV2 | null,
+    eventType: EventTypeEnum | null,
+    limit?: number,
+  ): FilteredUpcomingEvent[] {
+    const birthdays = source?.Birthdays || [];
+    const holidays = source?.PublicHolidays || [];
+
+    let filtered: FilteredUpcomingEvent[];
+
+    if (eventType === EventTypeEnum.Birthdays) {
+      filtered = birthdays
+        .map(b => this.mapBirthday(b))
+        .sort((a, b) => new Date(a.EventDate).getTime() - new Date(b.EventDate).getTime());
+    } else if (eventType === EventTypeEnum.PublicHolidays) {
+      filtered = holidays
+        .map(h => this.mapHoliday(h))
+        .sort((a, b) => new Date(a.EventDate).getTime() - new Date(b.EventDate).getTime());
+    } else {
+      if (limit) {
+        filtered = [...birthdays.map(b => this.mapBirthday(b)), ...holidays.map(h => this.mapHoliday(h))]
+          .sort((a, b) => new Date(a.EventDate).getTime() - new Date(b.EventDate).getTime())
+          .slice(0, 2);
+      } else {
+        filtered = [...birthdays.map(b => this.mapBirthday(b)), ...holidays.map(h => this.mapHoliday(h))];
+      }
+    }
+
+    if (limit) {
+      filtered = filtered.slice(0, limit);
+    }
+
+    return filtered.sort((a, b) => new Date(a.EventDate).getTime() - new Date(b.EventDate).getTime());
+  }
+
+  private mapBirthday(b: Birthday): FilteredUpcomingEvent {
+    const birthdate = new Date(b.Birthdate);
+    const eventDate = new Date(new Date().getFullYear(), birthdate.getMonth(), birthdate.getDate());
+    return {
+      EventDate: eventDate,
+      Name: b.EmployeeShortName,
+      EventType: EventTypeEnum.Birthdays,
+      Description: b.RelativeDay.toString(),
+      IsIn2Days: RelativeDay[b.RelativeDay as unknown as keyof typeof RelativeDay] === RelativeDay.TwoDays,
+      PropertyName: b.EmployeePropertyName,
+      PropertySymbol: b.EmployeePropertySymbol,
+    };
+  }
+
+  private mapHoliday(h: PublicHoliday): FilteredUpcomingEvent {
+    return {
+      EventDate: new Date(h.StartDate),
+      StartDate: new Date(h.StartDate),
+      EndDate: new Date(h.EndDate),
+      Name: h.Description,
+      EventType: EventTypeEnum.PublicHolidays,
+      Description: h.WeekContext.toString(),
+    };
+  }
+}