@skysoftware-co/bayan-hr-widgets-ui 2.0.18 → 2.0.20

package/src/lib/my-profile/ticket-widget/components/ticket-card/ticket-card.component.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { HRTranslatePipe } from '../../../../shared/pipes/translate.pipe';
+import { WidgetCardComponent } from '../../../../shared/components/widget-card/widget-card-component';
+
+@Component({
+  selector: 'hr-ticket-card',
+  standalone: true,
+  imports: [CommonModule, HRTranslatePipe, WidgetCardComponent],
+  templateUrl: './ticket-card.component.html',
+})
+export class HRTicketCardComponent {
+  @Input({ required: true }) name: string | null = '';
+  @Input() typeName: string | null = '';
+  @Input() entitlementText: string = '';
+  @Input() ticketClassName: string | null = '';
+  @Input() ticketSectorName: string | null = '';
+  @Input() isDependent: boolean = false;
+
+  @Input() cardClass: string = 'p-3 card-shadow border border-1 h-100 rounded rounded-2';
+  @Input() cardHeight: number = 135;
+  @Input() nameClass: string = 'text-dark fs-16';
+  @Input() subtitleClass: string = 'field-secondary-label-sm mb-3';
+  @Input() labelClass: string = 'text-secondary';
+  @Input() valueClass: string = 'text-dark-gray mx-1';
+}

package/src/lib/my-profile/ticket-widget/my-profile-ticket-widget.component.html

@@ -0,0 +1,68 @@
+@if (hasData()) {
+  <sky-section-divider
+    [fontAwesomeIcon]="ticketsIcon()"
+    [text]="sectionTitle() | translate | uppercase"
+    [iconClass]="headerIconClass()"
+    [textClass]="headerTextClass()"
+    [dividerClass]="headerDividerClass()"
+  ></sky-section-divider>
+
+  @let details = ticketDetails();
+  @if (details) {
+    @let employeeDetails = details.EmployeeTicketDetails;
+    @if (!employeeDetails && details.DependentTicketDetails?.length == 0) {
+      <sky-empty-design-card
+        [containerClass]="emptyStateContainerClass()"
+        [cardBodyClass]="''"
+        [cardBodyContainerClass]="''"
+        [visibleIcon]="false"
+        [visibleQuickAction]="false"
+        [emptyTextClass]="emptyStateTextClass()"
+        [emptyText]="'NoTicketEntitlement' | translate"
+      ></sky-empty-design-card>
+    } @else {
+      <div class="row mb-5">
+        @if (employeeDetails) {
+          <div [class]="columnClass()" [style.height.px]="cardHeight()">
+            <hr-ticket-card
+              [name]="employeeDetails.EmployeeFirstName"
+              [entitlementText]="getMonthsPerTicketEntitlement(employeeDetails.MonthsPerTicketEntitlement)"
+              [ticketClassName]="employeeDetails.TicketClassName"
+              [ticketSectorName]="employeeDetails.TicketSectorName"
+              [cardClass]="cardClass()"
+              [cardHeight]="cardHeight()"
+              [nameClass]="nameClass()"
+              [subtitleClass]="subtitleClass()"
+              [labelClass]="labelClass()"
+              [valueClass]="valueClass()"
+            ></hr-ticket-card>
+          </div>
+        }
+        @for (dependent of details.DependentTicketDetails ?? []; track dependent) {
+          <div [class]="columnClass()" [style.height.px]="cardHeight()">
+            <hr-ticket-card
+              [name]="dependent.DependentName"
+              [typeName]="dependent.DependentTypeName"
+              [entitlementText]="getMonthsPerTicketEntitlement(dependent.MonthsPerTicketEntitlement)"
+              [isDependent]="true"
+              [cardClass]="cardClass()"
+              [cardHeight]="cardHeight()"
+              [nameClass]="nameClass()"
+              [subtitleClass]="subtitleClass()"
+            ></hr-ticket-card>
+          </div>
+        }
+      </div>
+    }
+  } @else {
+    <sky-empty-design-card
+      [containerClass]="emptyStateContainerClass()"
+      [cardBodyClass]="''"
+      [cardBodyContainerClass]="''"
+      [visibleIcon]="false"
+      [visibleQuickAction]="false"
+      [emptyTextClass]="emptyStateTextClass()"
+      [emptyText]="isLoading() ? (sectionTitle() | translate) + ' ' + ('IsLoading' | translate) : ('NoTicketEntitlement' | translate)"
+    ></sky-empty-design-card>
+  }
+}

package/src/lib/my-profile/ticket-widget/my-profile-ticket-widget.component.ts

@@ -0,0 +1,93 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit, inject, input, output, signal } from '@angular/core';
+import { HRTranslatePipe } from '../../shared/pipes/translate.pipe';
+import { faTicketsAirline } from '@fortawesome/pro-light-svg-icons';
+import { SkyEmptyDesignCardComponent, SkySectionDividerComponent } from '@skysoftware-co/sky-components-ui';
+import { HRSelfWidgetsService } from '../../services/hr-self-widgets.service';
+import { HRTicketCardComponent } from './components/ticket-card/ticket-card.component';
+import { EntitlementsTicket } from '../../shared/types/common';
+
+@Component({
+  selector: 'hr-my-profile-ticket-widget',
+  standalone: true,
+  imports: [
+    CommonModule,
+    HRTranslatePipe,
+    SkySectionDividerComponent,
+    SkyEmptyDesignCardComponent,
+    HRTicketCardComponent,
+  ],
+  providers: [HRTranslatePipe],
+  templateUrl: './my-profile-ticket-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyProfileTicketWidgetComponent implements OnInit {
+  readonly baseUrl = input.required<string>();
+  readonly sectionTitle = input<string>('Tickets');
+  readonly ticketsIcon = input(faTicketsAirline);
+
+  readonly headerIconClass = input<string>('primary-icon-xl');
+  readonly headerTextClass = input<string>('mt-2 field-secondary-label-lg');
+  readonly headerDividerClass = input<string>('flex-grow-1 ms-2');
+  readonly emptyStateContainerClass = input<string>(
+    'd-flex flex-column justify-content-center align-items-center my-5',
+  );
+  readonly emptyStateTextClass = input<string>('field-secondary-label-md');
+  readonly columnClass = input<string>('col-lg-4 col-6 mt-4');
+  readonly cardHeight = input<number>(135);
+  readonly cardClass = input<string>('p-3 card-shadow border border-1 h-100 rounded rounded-2');
+  readonly nameClass = input<string>('text-dark fs-16');
+  readonly subtitleClass = input<string>('field-secondary-label-sm mb-3');
+  readonly labelClass = input<string>('fs-12 text-secondary');
+  readonly valueClass = input<string>('fs-12 text-dark-gray mx-1');
+
+  readonly isLoadingChanged = output<boolean>();
+  readonly errorOccurred = output<string>();
+
+  readonly ticketDetails = signal<EntitlementsTicket | null>(null);
+  readonly isLoading = signal(true);
+  readonly hasData = signal(true);
+
+  private readonly selfWidgetsService = inject(HRSelfWidgetsService);
+  private readonly translatePipe = inject(HRTranslatePipe);
+
+  ngOnInit(): void {
+    if (!this.baseUrl()) {
+      this.isLoading.set(false);
+      return;
+    }
+    this.loadData();
+  }
+
+  private loadData(): void {
+    this.isLoadingChanged.emit(true);
+    this.selfWidgetsService.getEntitlementsTicket(this.baseUrl()).subscribe({
+      next: data => {
+        this.ticketDetails.set(data);
+        this.isLoading.set(false);
+        const details = this.ticketDetails();
+        this.hasData.set(!!details?.EmployeeTicketDetails || (details?.DependentTicketDetails?.length ?? 0) > 0);
+        this.isLoadingChanged.emit(false);
+      },
+      error: error => {
+        this.ticketDetails.set(null);
+        this.isLoading.set(false);
+        this.hasData.set(false);
+        this.errorOccurred.emit(error?.error?.ResponseData?.Errors?.[0]?.Message);
+        this.isLoadingChanged.emit(false);
+      },
+    });
+  }
+
+  getMonthsPerTicketEntitlement(monthsPerTicketEntitlement: number | null): string {
+    if (monthsPerTicketEntitlement != null && monthsPerTicketEntitlement != 0) {
+      if (monthsPerTicketEntitlement > 1) {
+        const template = this.translatePipe.transform('TicketEvery{{value}}Months');
+        return template.replace('{{value}}', String(monthsPerTicketEntitlement));
+      } else {
+        const template = this.translatePipe.transform('TicketEvery{{value}}Month');
+        return template.replace('{{value}}', String(monthsPerTicketEntitlement));
+      }
+    } else return this.translatePipe.transform('NotEntitled');
+  }
+}

package/src/lib/my-profile/vacations-widget/my-profile-vacations-widget.component.html

@@ -0,0 +1,34 @@
+<sky-section-divider
+  [fontAwesomeIcon]="vacationsIcon()"
+  [text]="sectionTitle() | translate | uppercase"
+  [iconClass]="headerIconClass()"
+  [textClass]="headerTextClass()"
+  [dividerClass]="headerDividerClass()"
+></sky-section-divider>
+
+@if (vacationEntitlements().length > 0) {
+  <div [class]="rowClass()">
+    <div [class]="labelClass()" [ngClass]="labelColumnClass()">{{ 'Type' | translate }}</div>
+    <div [class]="labelClass()" [ngClass]="valueColumnClass()">{{ 'Entitlement' | translate }}</div>
+    @for (vacationEntitlement of vacationEntitlements(); track vacationEntitlement) {
+      <div [class]="valueClass()" [ngClass]="labelColumnClass()">
+        {{ vacationEntitlement.VacationTypeName }}
+      </div>
+      <div [class]="valueClass()" [ngClass]="valueColumnClass()">
+        {{ vacationEntitlement.EntitlementDays }}
+      </div>
+    }
+  </div>
+} @else {
+  <sky-empty-design-card
+    [containerClass]="emptyStateContainerClass()"
+    [cardBodyClass]="''"
+    [cardBodyContainerClass]="''"
+    [visibleIcon]="false"
+    [visibleQuickAction]="false"
+    [emptyTextClass]="emptyStateTextClass()"
+    [emptyText]="
+      isLoading() ? (sectionTitle() | translate) + ' ' + ('IsLoading' | translate) : ('There\'sNoInformationInThisSectionYet' | translate)
+    "
+  ></sky-empty-design-card>
+}

package/src/lib/my-profile/vacations-widget/my-profile-vacations-widget.component.ts

@@ -0,0 +1,66 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit, inject, input, output, signal } from '@angular/core';
+import { HRTranslatePipe } from '../../shared/pipes/translate.pipe';
+import { faIslandTropical } from '@fortawesome/pro-light-svg-icons';
+import { SkyEmptyDesignCardComponent, SkySectionDividerComponent } from '@skysoftware-co/sky-components-ui';
+import { HRSelfWidgetsService } from '../../services/hr-self-widgets.service';
+import { EntitlementsVacation } from '../../shared/types/common';
+
+@Component({
+  selector: 'hr-my-profile-vacations-widget',
+  standalone: true,
+  imports: [CommonModule, HRTranslatePipe, SkySectionDividerComponent, SkyEmptyDesignCardComponent],
+  templateUrl: './my-profile-vacations-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyProfileVacationsWidgetComponent implements OnInit {
+  readonly baseUrl = input.required<string>();
+  readonly sectionTitle = input<string>('Vacations');
+  readonly vacationsIcon = input(faIslandTropical);
+
+  readonly headerIconClass = input<string>('primary-icon-xl');
+  readonly headerTextClass = input<string>('mt-2 field-secondary-label-lg');
+  readonly headerDividerClass = input<string>('flex-grow-1 ms-2');
+  readonly rowClass = input<string>('row mt-4');
+  readonly labelClass = input<string>('field-secondary-label-sm');
+  readonly valueClass = input<string>('fs-14 fw-meduim mt-2');
+  readonly labelColumnClass = input<string>('col-6');
+  readonly valueColumnClass = input<string>('col-6');
+  readonly emptyStateContainerClass = input<string>(
+    'd-flex flex-column justify-content-center align-items-center my-5',
+  );
+  readonly emptyStateTextClass = input<string>('field-secondary-label-md');
+
+  readonly isLoadingChanged = output<boolean>();
+  readonly errorOccurred = output<string>();
+
+  readonly vacationEntitlements = signal<EntitlementsVacation[]>([]);
+  readonly isLoading = signal(true);
+
+  private readonly selfWidgetsService = inject(HRSelfWidgetsService);
+
+  ngOnInit(): void {
+    if (!this.baseUrl()) {
+      this.isLoading.set(false);
+      return;
+    }
+    this.loadData();
+  }
+
+  private loadData(): void {
+    this.isLoadingChanged.emit(true);
+    this.selfWidgetsService.getEntitlementsVacations(this.baseUrl()).subscribe({
+      next: data => {
+        this.vacationEntitlements.set(data ?? []);
+        this.isLoading.set(false);
+        this.isLoadingChanged.emit(false);
+      },
+      error: error => {
+        this.vacationEntitlements.set([]);
+        this.isLoading.set(false);
+        this.errorOccurred.emit(error?.error?.ResponseData?.Errors?.[0]?.Message);
+        this.isLoadingChanged.emit(false);
+      },
+    });
+  }
+}

package/src/lib/my-team-subordinates-popup-widget/components/employee-main-info-card/employee-information-card.component.ts

@@ -0,0 +1,65 @@
+import { ChangeDetectionStrategy, Component, effect, input, output } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faChevronDown } from '@fortawesome/pro-solid-svg-icons';
+import { BayanEmployeeBadgeComponent, BayanEmployeeBadgeDTO } from '@skysoftware-co/bayan-components-ui';
+import { HighlightPipe, isRTL } from '@skysoftware-co/sky-components-ui';
+import { EmployeeMainInfo } from '../../../shared/types/common';
+
+@Component({
+  selector: 'app-employee-main-info-card',
+  standalone: true,
+  imports: [FontAwesomeModule, NgClass, BayanEmployeeBadgeComponent, HighlightPipe],
+  templateUrl: './employee-main-info-card.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EmployeeMainInfoCardComponent {
+  readonly employeeMainInfo = input<EmployeeMainInfo | null>(null);
+  readonly searchValue = input<string>('');
+
+  readonly badgeClass = input<string>('badge employee-rounded-badge-xl fs-5');
+  readonly badgeImageClass = input<string>('rounded-circle');
+  readonly badgeWidth = input<string>('50px');
+  readonly badgeHeight = input<string>('50px');
+  readonly employeeInfoContainerClass = input<string>('d-flex align-content-center');
+  readonly employeeDetailsClass = input<string>('ms-3');
+  readonly employeeNameContainerClass = input<string>('d-flex align-items-center');
+  readonly employeeNameClass = input<string>('fs-13 text-dark-gray fw-medium text-ellipsis-one-line');
+  readonly employeePositionClass = input<string>('fs-12 fw-normal text-dark-gray text-ellipsis-one-line mb-1');
+  readonly employeeGradeClass = input<string>('fs-12 text-dark-gray');
+
+  readonly showGrade = input<boolean>(false);
+  readonly showPropertySymbol = input<boolean>(true);
+  readonly showChangeEmployeeButton = input<boolean>(false);
+  readonly alignCenter = input<boolean>(true);
+
+  readonly ChangeEmployeeButtonHandler = output<void>();
+  readonly isRTL = isRTL();
+  employeeBadge: BayanEmployeeBadgeDTO = {
+    EmployeePhotoKey: null,
+    EmployeePhotoFailed: false,
+    EmployeeNameInitials: '',
+  };
+
+  dropDownIcon = faChevronDown;
+  faildToLoadEmployeePhoto = false;
+
+  constructor() {
+    effect(() => {
+      const info = this.employeeMainInfo();
+      if (info) {
+        this.employeeBadge.EmployeePhotoKey = info.PhotoKey || null;
+        this.employeeBadge.EmployeeNameInitials = info.EmployeeNameInitials || '';
+        this.employeeBadge.EmployeePhotoFailed = false;
+      }
+    });
+  }
+
+  convertEmployee() {
+    this.ChangeEmployeeButtonHandler.emit();
+  }
+
+  handleEmployeePhotoError() {
+    this.employeeBadge.EmployeePhotoFailed = true;
+  }
+}

package/src/lib/my-team-subordinates-popup-widget/components/employee-main-info-card/employee-main-info-card.component.html

@@ -0,0 +1,57 @@
+@if (employeeMainInfo(); as info) {
+  <div [class]="employeeInfoContainerClass()" [ngClass]="{ 'align-items-center': alignCenter() }">
+    <bayan-employee-badge
+      [badge]="employeeBadge"
+      [badgeClass]="badgeClass()"
+      [imageClass]="badgeImageClass()"
+      [width]="badgeWidth()"
+      [height]="badgeHeight()"
+      (employeePhotoError)="handleEmployeePhotoError()"
+    ></bayan-employee-badge>
+
+    <div [class]="employeeDetailsClass()">
+      <div [class]="employeeNameContainerClass()">
+        <div
+          [class]="employeeNameClass()"
+          data-bs-toggle="tooltip"
+          [title]="info.EmployeeNumber + ' | ' + info.EmployeeName"
+          [innerHTML]="info.EmployeeNumber + ' | ' + info.EmployeeName | highlight: searchValue()"
+        ></div>
+        @if (showChangeEmployeeButton()) {
+          <button type="button" class="border-0 ms-2 bg-none" (click)="convertEmployee()">
+            <fa-icon [icon]="dropDownIcon" class="text-primary fs-5"></fa-icon>
+          </button>
+        }
+      </div>
+      @if (info.PositionName != null && info.PositionName != '') {
+        <div [class]="employeePositionClass()" data-bs-toggle="tooltip" [title]="info.PositionName">
+          <span [innerHTML]="info.PositionName | highlight: searchValue()"></span>
+        </div>
+      }
+      @if (showGrade() && info.GradeName != null) {
+        <div [class]="employeeGradeClass()" [title]="info.GradeName">
+          <span [innerHTML]="info.GradeName"></span>
+        </div>
+      }
+      <div
+        class="d-flex text-dark-gray mb-0"
+        data-bs-toggle="tooltip"
+        [title]="showPropertySymbol() ? info.PropertySymbol + ' | ' + info.AdminUnitName : info.AdminUnitName"
+      >
+        <div class="fs-12">
+          @if (showPropertySymbol()) {
+            <span class="property-badge cursor-pointer me-1" title="{{ info.PropertyName }}">
+              <span [innerHTML]="info.PropertySymbol"></span>
+            </span>
+          }
+          <span
+            class="fw-normal ms-1"
+            [ngClass]="{ 'me-1': isRTL && showPropertySymbol(), 'ms-1': !isRTL && showPropertySymbol() }"
+            [title]="info.AdminUnitName"
+            [innerHTML]="info.AdminUnitName | highlight: searchValue()"
+          ></span>
+        </div>
+      </div>
+    </div>
+  </div>
+}

package/src/lib/my-team-subordinates-popup-widget/components/my-team-subordinates-popup/my-team-popup.component.html

@@ -0,0 +1,109 @@
+<dx-popup
+  [visible]="isPopupVisible()"
+  [width]="'755px'"
+  [height]="'680px'"
+  [showCloseButton]="true"
+  [showTitle]="true"
+  [title]="'MyTeam' | translate"
+  shadingColor="rgba(0,0,0,0.4)"
+  (onShowing)="loadPage(true)"
+  (onHiding)="closePopup()"
+>
+  <ng-template #loadingIndicatorTemplate>
+    <div [class]="loadingContainerClass()">
+      <dx-load-indicator [visible]="true" [class]="loadingIndicatorClass()"></dx-load-indicator>
+    </div>
+  </ng-template>
+
+  <ng-template #employeeCardTemplate let-employee>
+    <div [class]="employeeCardClass()" [style.height]="employeeCardHeight()">
+      <div [class]="employeeRowClass()">
+        <div [class]="employeeInfoColumnClass()">
+          <app-employee-main-info-card
+            [employeeMainInfo]="toEmployeeMainInfo(employee)"
+            [searchValue]="searchValue()"
+            [showGrade]="showGrade()"
+            [showPropertySymbol]="showPropertySymbol()"
+            [showChangeEmployeeButton]="false"
+          ></app-employee-main-info-card>
+        </div>
+        <div [class]="contactColumnClass()">
+          <div [class]="contactContainerClass()">
+            <span [class]="contactTitleClass()">{{ 'ContactInfo' | translate }}:</span>
+            <span [class]="contactRowClass()">
+              <fa-icon [icon]="emailIcon()" [class]="contactIconClass()"></fa-icon>
+              @if (hasEmployeeEmail(employee)) {
+                <a
+                  [class]="emailTextClass()"
+                  [href]="'mailto:' + getEmployeeEmailDisplay(employee)"
+                  [title]="getEmployeeEmailDisplay(employee)"
+                  [innerHTML]="getEmployeeEmailDisplay(employee)"
+                ></a>
+              } @else {
+                <span [class]="emailPlaceholderClass()">-</span>
+              }
+            </span>
+            <span [class]="contactRowClass()">
+              <fa-icon [icon]="phoneIcon()" [class]="contactIconClass()"></fa-icon>
+              <span [title]="getEmployeePhoneDisplay(employee)" [innerHTML]="getEmployeePhoneDisplay(employee)"></span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ng-template>
+
+  <div [class]="headerRowClass()">
+    <div [class]="switchContainerClass()">
+      <input
+        [class]="switchInputClass()"
+        type="checkbox"
+        role="switch"
+        id="myTeamDirectOnlySwitch"
+        [checked]="showAllSubordinates()"
+        (change)="onToggleChange($event)"
+      />
+      <label [class]="switchLabelClass()" for="myTeamDirectOnlySwitch">
+        {{ 'ShowAllSubordinates' | translate }}
+      </label>
+    </div>
+    <dx-text-box
+      [value]="searchValue()"
+      [placeholder]="'Search...' | translate"
+      [width]="'250px'"
+      mode="search"
+      (onValueChanged)="onSearchChanged($event.value)"
+    ></dx-text-box>
+  </div>
+
+  <dx-scroll-view
+    #dataScrollView
+    [height]="500"
+    [width]="'100%'"
+    [elementAttr]="{ class: scrollViewClass() }"
+    [scrollByContent]="true"
+    [scrollByThumb]="true"
+    [showScrollbar]="'always'"
+    [bounceEnabled]="false"
+    (onReachBottom)="onReachBottom($event)"
+  >
+    <div [class]="groupedListClass()">
+      @if (isDataLoading()) {
+        <ng-container *ngTemplateOutlet="loadingIndicatorTemplate"></ng-container>
+      } @else if (items().length === 0) {
+        <div [class]="emptyStateClass()">
+          {{ 'NoDataToDisplay' | translate }}
+        </div>
+      } @else {
+        @for (group of items(); track group.adminUnitName) {
+          @if (showAllSubordinates()) {
+            <div [class]="groupHeaderClass()" [innerHTML]="group.adminUnitName | highlight: searchValue()"></div>
+          }
+          @for (emp of group.employees; track emp.EmployeeNumber) {
+            <ng-container *ngTemplateOutlet="employeeCardTemplate; context: { $implicit: emp }"></ng-container>
+          }
+        }
+      }
+    </div>
+  </dx-scroll-view>
+</dx-popup>