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

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

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

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

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

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

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

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