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

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

@@ -1,26 +0,0 @@
-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

@@ -1,68 +0,0 @@
-@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

@@ -1,93 +0,0 @@
-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

@@ -1,34 +0,0 @@
-<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

@@ -1,66 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,57 +0,0 @@
-@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

@@ -1,108 +0,0 @@
-<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 #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]="emailRowClass()">
-              <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]="'calc(100% - 44px)'"
-    [width]="'100%'"
-    [direction]="'vertical'"
-    [useNative]="false"
-    [elementAttr]="{ class: scrollViewClass() }"
-    [scrollByThumb]="true"
-    [showScrollbar]="'onScroll'"
-    [bounceEnabled]="false"
-    (onReachBottom)="onReachBottom()"
-  >
-    <div [class]="groupedListClass()">
-      @if (items().length === 0 && !isLoadingVisible()) {
-        <div [class]="emptyStateClass()">
-          {{ 'NoDataToDisplay' | translate }}
-        </div>
-      } @else if (items().length > 0) {
-        @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>
-
-  @if (isLoadingVisible()) {
-    <div class="position-absolute top-50 start-50 translate-middle z-3">
-      <dx-load-indicator [visible]="true"></dx-load-indicator>
-    </div>
-  }
-</dx-popup>