@skysoftware-co/bayan-core-widgets-ui 0.0.4 → 0.0.6

package/src/lib/top-menu-widget/components/global-search-widget/global-search-widget.component.ts

@@ -0,0 +1,153 @@
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild, inject } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import {
+  faDollar,
+  faGraduationCap,
+  faGrid,
+  faMedal,
+  faRightLeft,
+  faTools,
+  faUsers,
+} from '@fortawesome/pro-solid-svg-icons';
+import { faClock } from '@fortawesome/pro-light-svg-icons';
+import { Router } from '@angular/router';
+import { DxAutocompleteComponent, DxAutocompleteModule } from 'devextreme-angular';
+import { TranslatePipe } from '@skysoftware-co/sky-components-ui';
+import { GlobalSearchMenu } from '../../../shared/menu.dtos';
+import { BayanCoreTopMenuService } from '../../../shared/menu.service';
+import { isExternalNavigation, resolveUrl } from '../../../shared/common-methods/navigation.utils';
+
+@Component({
+  selector: 'bayan-core-global-search-widget',
+  standalone: true,
+  imports: [CommonModule, DxAutocompleteModule, FontAwesomeModule, TranslatePipe],
+  templateUrl: './global-search-widget.component.html',
+  styles: [':host { display: flex; align-items: center; height: 56px; }'],
+  styleUrls: ['../../top-menu-widget.styles.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BayanCoreGlobalSearchWidgetComponent implements OnChanges {
+  private readonly menuService = inject(BayanCoreTopMenuService);
+  private readonly document = inject(DOCUMENT);
+  private readonly router = inject(Router);
+
+  @ViewChild('searchAutoComplete') searchAutoComplete?: DxAutocompleteComponent;
+
+  @Input() baseUrl = '';
+  @Input() ActivePropertyChanged = false;
+  @Input() ActivePropertyId: number = 0;
+  @Input() placeholder = 'Type to search';
+
+  @Input() searchMode: 'contains' | 'startswith' = 'contains';
+  @Input() stylingMode: 'filled' | 'outlined' | 'underlined' = 'filled';
+  @Input() searchWrapperClass = 'top-menu-widget__search';
+  @Input() searchItemClass = 'top-menu-widget__search-item d-flex flex-column text-decoration-none';
+  @Input() searchItemTitleClass = 'top-menu-widget__search-item-title text-light fs-11 mb-1 d-flex align-content-center';
+  @Input() searchItemSubtitleClass = 'top-menu-widget__search-item-subtitle text-dark fs-13 ms-2 ps-1';
+  @Input() iconClass = 'fs-11 fw-medium me-1';
+
+  @Output() search = new EventEmitter<string>();
+  @Output() itemNavigate = new EventEmitter<GlobalSearchMenu>();
+
+  dataSource: GlobalSearchMenu[] = [];
+  readonly toolsIcon = faTools;
+  readonly gridIcon = faGrid;
+  readonly creditIcon = faDollar;
+  readonly usersIcon = faUsers;
+  readonly clockIcon = faClock;
+  readonly swapIcon = faRightLeft;
+  readonly medalIcon = faMedal;
+  readonly graduateIcon = faGraduationCap;
+
+  ngOnInit(): void {
+    this.loadMenus();
+  }
+
+    // Removed duplicate ngOnChanges
+
+  private loadMenus(): void {
+    if (this.baseUrl && this.ActivePropertyId > 0) {
+      this.menuService.getGlobalSearchMenus(this.baseUrl, this.ActivePropertyId).subscribe({
+        next: (menus) => this.dataSource = menus ?? [],
+        error: () => this.dataSource = []
+      });
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (
+      changes['ActivePropertyChanged']
+      && !changes['ActivePropertyChanged'].firstChange
+      && changes['ActivePropertyChanged'].previousValue !== changes['ActivePropertyChanged'].currentValue
+    ) {
+      this.reset();
+      this.loadMenus();
+    }
+  }
+
+  onInput(event: { event?: { target?: { value?: string } }; component?: { option: (name: string, value: string) => void } } | any): void {
+    const searchTerm = event.event?.target?.value;
+    if (typeof searchTerm === 'string' && searchTerm.startsWith(' ')) {
+      event.component?.option('value', searchTerm.trim());
+    }
+  }
+
+  onEnterKey(event: { event?: { target?: { value?: string } } } | any): void {
+    const searchTerm = (event.event?.target?.value ?? '').toString().trim();
+    if (!searchTerm) {
+      return;
+    }
+
+    const match = this.dataSource.find(
+      (item) => item.MenuSubTitle.toLowerCase().trim() === searchTerm.toLowerCase().trim(),
+    );
+
+    if (match) {
+        window.location.href = match.MenuUrl;
+      this.itemNavigate.emit(match);
+      return;
+    }
+
+    this.search.emit(searchTerm);
+  }
+
+  onItemSelected(event: Event, item: GlobalSearchMenu): void {
+    event.preventDefault();
+    event.stopPropagation();
+      if (item.MenuUrl) {
+        window.location.href = item.MenuUrl;
+      }
+  }
+
+  reset(): void {
+    this.searchAutoComplete?.instance?.option('value', '');
+  }
+
+  getText(text: string, isTranslatable = false): string {
+    return isTranslatable ? text : text;
+  }
+
+  getIconForClass(iconClass: string) {
+    switch (iconClass) {
+      case 'icon icon-tools':
+        return this.toolsIcon;
+      case 'icon icon-grid':
+        return this.gridIcon;
+      case 'icon icon-credit':
+        return this.creditIcon;
+      case 'icon icon-users':
+        return this.usersIcon;
+      case 'icon icon-clock':
+        return this.clockIcon;
+      case 'icon icon-swap':
+        return this.swapIcon;
+      case 'icon icon-medal':
+        return this.medalIcon;
+      case 'icon icon-graduation-cap':
+        return this.graduateIcon;
+      default:
+        return this.toolsIcon;
+    }
+  }
+}

package/src/lib/top-menu-widget/components/item-widget/item-widget.component.html

@@ -0,0 +1,39 @@
+@if (!hasChildren()) {
+  <li [class]="navItemClass">
+    <a
+      [class]="navLinkClass"
+      href="#"
+      (click)="onItemActivated($event)">
+      {{ item.MenuName | translate }}
+    </a>
+  </li>
+}
+
+@if (hasChildren()) {
+  <li [class]="dropdownClass" [class.open]="open()">
+    <a href="#" [class]="dropdownToggleClass" (click)="onItemActivated($event)">
+      {{ item.MenuName | translate }} <span [class]="caretClass"></span>
+    </a>
+
+    @if (open()) {
+      <ul [class]="dropdownMenuClass">
+        @for (child of item.Children; track child.MenuName) {
+          <bayan-core-item-widget
+            [baseUrl]="baseUrl"
+            [ActivePropertyChanged]="ActivePropertyChanged"
+            [item]="child"
+            (itemClick)="onChildItemClick($event)"
+            [navItemClass]="navItemClass"
+            [navLinkClass]="navLinkClass"
+            [dropdownClass]="dropdownClass"
+            [dropdownOpenClass]="dropdownOpenClass"
+            [dropdownToggleClass]="dropdownToggleClass"
+            [caretClass]="caretClass"
+            [dropdownMenuClass]="dropdownMenuClass"
+          >
+          </bayan-core-item-widget>
+        }
+      </ul>
+    }
+  </li>
+}

package/src/lib/top-menu-widget/components/item-widget/item-widget.component.ts

@@ -0,0 +1,95 @@
+import { of } from 'rxjs';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+  inject,
+  signal,
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { TranslatePipe } from '@skysoftware-co/sky-components-ui';
+import { TopMenuShortcut } from '../../../shared/menu.dtos';
+import { isExternalNavigation, resolveUrl } from '../../../shared/common-methods/navigation.utils';
+
+@Component({
+  selector: 'bayan-core-item-widget',
+  standalone: true,
+  imports: [CommonModule, TranslatePipe],
+  templateUrl: './item-widget.component.html',
+  styles: [':host { display: contents; }'],
+  styleUrls: ['../../top-menu-widget.styles.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BayanCoreItemWidgetComponent implements OnChanges {
+  private readonly document = inject(DOCUMENT);
+  private readonly router = inject(Router);
+
+  @Input() baseUrl = '';
+  @Input() ActivePropertyChanged = false;
+  @Input({ required: true }) item!: TopMenuShortcut;
+
+  @Input() navItemClass = 'nav-item';
+  @Input() navLinkClass = 'nav-link';
+  @Input() dropdownClass = 'nav-item dropdown';
+  @Input() dropdownOpenClass = 'open';
+  @Input() dropdownToggleClass = 'nav-link dropdown-toggle';
+  @Input() caretClass = 'caret';
+  @Input() dropdownMenuClass = 'dropdown-menu menu-dropdown-panel';
+
+  @Output() itemClick = new EventEmitter<TopMenuShortcut>();
+
+  readonly open = signal(false);
+
+  constructor(private readonly elementRef: ElementRef<HTMLElement>) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (
+      changes['ActivePropertyChanged']
+      && !changes['ActivePropertyChanged'].firstChange
+      && changes['ActivePropertyChanged'].previousValue !== changes['ActivePropertyChanged'].currentValue
+    ) {
+      this.open.set(false);
+    }
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    const target = event.target as Node | null;
+    if (target && !this.elementRef.nativeElement.contains(target)) {
+      this.open.set(false);
+    }
+  }
+
+  hasChildren(): boolean {
+    return (this.item.Children ?? []).length > 0;
+  }
+
+  onItemActivated(event: Event): void {
+    event.preventDefault();
+
+    if (this.hasChildren()) {
+      event.stopPropagation();
+      this.open.update((value) => !value);
+      return;
+    }
+
+    this.itemClick.emit(this.item);
+      if (typeof this.item.MenuUrl === 'string' && this.item.MenuName == 'Reports') {
+        window.open(this.item.MenuUrl, '_blank');
+      } else if (this.item.MenuUrl) {
+        window.location.href = this.item.MenuUrl;
+      }
+  }
+
+  onChildItemClick(item: TopMenuShortcut): void {
+    this.open.set(false);
+    this.itemClick.emit(item);
+  }
+}

package/src/lib/top-menu-widget/components/notifications-widget/notifications-widget.component.html

@@ -0,0 +1,10 @@
+<div [class]="wrapperClass">
+ <a [class]="linkClass"
+      [title]="title | translate"
+      (click)="onNotificationClick($event)">
+      <fa-icon [class]="iconClass" [icon]="bellIcon"></fa-icon>
+      @if ((notificationsSummary().TotalNotificationsCount || 0) > 0) {
+        <span [class]="badgeClass">{{ notificationsSummary().TotalNotificationsCount }}</span>
+      }
+    </a>
+</div>

package/src/lib/top-menu-widget/components/notifications-widget/notifications-widget.component.ts

@@ -0,0 +1,89 @@
+import { CommonModule, DOCUMENT } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+  inject,
+  signal,
+} from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faBell } from '@fortawesome/pro-solid-svg-icons';
+import { TranslatePipe } from '@skysoftware-co/sky-components-ui';
+import { isExternalNavigation, resolveUrl } from '../../../shared/common-methods/navigation.utils';
+import { NotificationsSummary } from '../../../shared/menu.dtos';
+import { BayanCoreTopMenuService } from '../../../shared/menu.service';
+
+@Component({
+  selector: 'bayan-core-notifications-widget',
+  standalone: true,
+  imports: [CommonModule, FontAwesomeModule, TranslatePipe],
+  templateUrl: './notifications-widget.component.html',
+  styles: [':host { display: flex; align-items: center; height: 56px; }'],
+  styleUrls: ['../../top-menu-widget.styles.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BayanCoreNotificationsWidgetComponent implements OnInit, OnChanges {
+  private readonly document = inject(DOCUMENT);
+  private readonly topMenuService = inject(BayanCoreTopMenuService);
+
+  @Input() baseUrl = '';
+  @Input() title = 'Notifications';
+  @Input() wrapperClass = 'notifications-icon-wrap menu-dropdown-host';
+  @Input() linkClass = 'menu-icon-btn cursor-pointer notifications-icon-btn';
+  @Input() iconClass = 'fs-6';
+  @Input() badgeClass = 'notifications-badge';
+
+  readonly bellIcon = faBell;
+  readonly notificationsSummary = signal<NotificationsSummary>({
+    NotificationsUrl: '',
+    TotalNotificationsCount: 0,
+  });
+
+  ngOnInit(): void {
+    this.loadNotificationsSummary();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['baseUrl'] && !changes['baseUrl'].firstChange) {
+      this.loadNotificationsSummary();
+    }
+  }
+
+  onNotificationClick(event?: Event): void {
+    event?.preventDefault();
+    const rawNotificationUrl = this.notificationsSummary().NotificationsUrl;
+
+    if (rawNotificationUrl) {
+      this.document.location.href = `${window.location.origin}${rawNotificationUrl}`;
+    }
+  }
+
+  private loadNotificationsSummary(): void {
+    if (!this.baseUrl) {
+      this.resetNotificationsData();
+      return;
+    }
+
+    this.topMenuService.getNotificationsSummary(this.baseUrl).subscribe({
+      next: (summary) => {
+        this.notificationsSummary.set({
+          NotificationsUrl: summary.NotificationsUrl,
+          TotalNotificationsCount: summary.TotalNotificationsCount,
+        });
+      },
+      error: () => {
+        this.resetNotificationsData();
+      },
+    });
+  }
+
+  private resetNotificationsData(): void {
+    this.notificationsSummary.set({
+      NotificationsUrl: '',
+      TotalNotificationsCount: 0,
+    });
+  }
+}

package/src/lib/top-menu-widget/components/settings-widget/settings-widget.component.html

@@ -0,0 +1,119 @@
+<div [class]="dropdownHostClass" [class.open]="dropdownOpen()">
+  <a href="#" [class]="toggleBtnClass" (click)="toggleDropdown($event)" [title]="'Settings' | translate">
+    <fa-icon [icon]="cogIcon" class="fs-6"></fa-icon>
+  </a>
+
+  @if (dropdownOpen()) {
+    <ul [class]="menuPanelClass">
+      @if (preferences?.UseAlternateNames) {
+        <li>
+          <a [class]="alternateNamesLinkClass" (click)="onAlternateNamesClick($event)">
+            @if (preferences?.UseAlternateNames) {
+              <fa-icon [class]="indicatorActiveClass" [icon]="checkIcon"></fa-icon>
+            } @else {
+              <fa-icon [class]="indicatorInvisibleClass" [icon]="checkIcon"></fa-icon>
+            }
+            {{ 'DisplayAlternateNames' | translate }}
+          </a>
+        </li>
+        <li><hr class="dropdown-divider"></li>
+      }
+
+      @if (hrBlockState?.UserCanBlockModule) {
+        <li>
+          @if (hrBlockState?.IsBlocked) {
+            <a [class]="alternateNamesLinkClass" (click)="releaseModule(BlockableModule.HumanResources, $event)">
+              <fa-icon [class]="indicatorActiveClass" [icon]="checkIcon"></fa-icon>
+              {{ 'ReleaseHR' | translate }}
+            </a>
+          } @else {
+            <a [class]="alternateNamesLinkClass" (click)="blockModule(BlockableModule.HumanResources, $event)">
+              <fa-icon [class]="indicatorInvisibleClass" [icon]="checkIcon"></fa-icon>
+              {{ 'BlockHR' | translate }}
+            </a>
+          }
+        </li>
+      }
+
+      @if (tkBlockState?.UserCanBlockModule) {
+        <li>
+          @if (tkBlockState?.IsBlocked) {
+            <a [class]="alternateNamesLinkClass" (click)="releaseModule(BlockableModule.Timekeeping, $event)">
+              <fa-icon [class]="indicatorActiveClass" [icon]="checkIcon"></fa-icon>
+              {{ 'ReleaseTK' | translate }}
+            </a>
+          } @else {
+            <a [class]="alternateNamesLinkClass" (click)="blockModule(BlockableModule.Timekeeping, $event)">
+              <fa-icon [class]="indicatorInvisibleClass" [icon]="checkIcon"></fa-icon>
+              {{ 'BlockTK' | translate }}
+            </a>
+          }
+        </li>
+      }
+
+      @if (hrBlockState?.UserCanBlockModule || tkBlockState?.UserCanBlockModule) {
+        <li><hr class="dropdown-divider"></li>
+      }
+
+      <li>
+        <span [class]="sectionLabelClass">{{ 'EmployeeNamesMode' | translate }}</span>
+      </li>
+      <li>
+        <a [class]="menuRowClass" (click)="onNameModeClick(EmployeeNamesModeOption.ShortNames, $event); $event.stopPropagation()">
+          @if (preferences?.EmployeeNamesMode === EmployeeNamesModeOption.ShortNames) {
+            <fa-icon [class]="indicatorClass" [icon]="checkIcon"></fa-icon>
+          }
+          {{ 'ShortNames' | translate }}
+        </a>
+      </li>
+      <li>
+        <a [class]="menuRowClass" (click)="onNameModeClick(EmployeeNamesModeOption.StandardNames, $event); $event.stopPropagation()">
+          @if (preferences?.EmployeeNamesMode === EmployeeNamesModeOption.StandardNames) {
+            <fa-icon [class]="indicatorClass" [icon]="checkIcon"></fa-icon>
+          }
+          {{ 'StandardNames' | translate }}
+        </a>
+      </li>
+      <li>
+        <a [class]="menuRowClass" (click)="onNameModeClick(EmployeeNamesModeOption.FullNames, $event); $event.stopPropagation()">
+          @if (preferences?.EmployeeNamesMode === EmployeeNamesModeOption.FullNames) {
+            <fa-icon [class]="indicatorClass" [icon]="checkIcon"></fa-icon>
+          }
+          {{ 'FullNames' | translate }}
+        </a>
+      </li>
+      <li><hr [class]="dividerClass"></li>
+
+      <li>
+        <a [class]="menuRowClass" (click)="onChangePasswordClick($event)">
+          <span [class]="indicatorClass"></span>
+          {{ 'ChangePassword' | translate }}
+        </a>
+      </li>
+
+      <li><hr [class]="dividerClass"></li>
+
+      <li>
+        <a [class]="menuRowClass" (click)="onOpenAboutClick($event)">
+          <fa-icon [class]="indicatorClass" [icon]="infoIcon"></fa-icon>
+          {{ 'About' | translate }}
+        </a>
+      </li>
+    </ul>
+  }
+</div>
+
+<bayan-core-change-password-widget
+    [visible]="showChangePassword"
+    [config]="changePasswordDialog"
+    (visibleChange)="showChangePassword = !!$event">
+  </bayan-core-change-password-widget>
+
+  <bayan-core-about-dialog-widget
+    [visible]="showAbout"
+    [config]="aboutDialog"
+    [licenseUrl]="licenseUrl"
+    [releaseNotesUrl]="releaseNotesUrl"
+    [supportUrl]="supportUrl"
+    (visibleChange)="showAbout = !!$event">
+  </bayan-core-about-dialog-widget>