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

package/{src → projects/bayan-core-ui/src}/lib/top-menu-widget/components/item-widget/item-widget.component.ts

@@ -1,22 +1,18 @@
-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',
@@ -45,7 +41,8 @@ export class BayanCoreItemWidgetComponent implements OnChanges {
 
   @Output() itemClick = new EventEmitter<TopMenuShortcut>();
 
-  readonly open = signal(false);
+  @Input() open = false;
+  @Output() toggleOpen = new EventEmitter<void>();
 
   constructor(private readonly elementRef: ElementRef<HTMLElement>) {}
 
@@ -55,15 +52,6 @@ export class BayanCoreItemWidgetComponent implements OnChanges {
       && !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);
     }
   }
 
@@ -73,23 +61,20 @@ export class BayanCoreItemWidgetComponent implements OnChanges {
 
   onItemActivated(event: Event): void {
     event.preventDefault();
-
     if (this.hasChildren()) {
       event.stopPropagation();
-      this.open.update((value) => !value);
+      this.toggleOpen.emit();
       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;
-      }
+    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 → projects/bayan-core-ui/src}/lib/top-menu-widget/components/notifications-widget/notifications-widget.component.html

@@ -1,5 +1,5 @@
 <div [class]="wrapperClass">
- <a [class]="linkClass"
+  <a [class]="linkClass"
       [title]="title | translate"
       (click)="onNotificationClick($event)">
       <fa-icon [class]="iconClass" [icon]="bellIcon"></fa-icon>

package/{src → projects/bayan-core-ui/src}/lib/top-menu-widget/components/notifications-widget/notifications-widget.component.ts

@@ -31,9 +31,9 @@ export class BayanCoreNotificationsWidgetComponent implements OnInit, OnChanges
 
   @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() wrapperClass = 'menu-dropdown-host';
+  @Input() linkClass = 'menu-icon-btn notifications-icon-btn';
+  @Input() iconClass = '';
   @Input() badgeClass = 'notifications-badge';
 
   readonly bellIcon = faBell;

package/projects/bayan-core-ui/src/lib/top-menu-widget/components/settings-widget/settings-widget.component.html

@@ -0,0 +1,111 @@
+<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]="menuRowClass" (click)="onAlternateNamesClick($event)">
+            @if (preferences?.DisplayAlternateNames) {
+              <fa-icon [class]="indicatorActiveClass" [icon]="checkIcon"></fa-icon>
+            } @else {
+              <fa-icon [class]="indicatorInvisibleClass" [icon]="checkIcon"></fa-icon>
+            }
+            {{ 'DisplayAlternateNames' | translate }}
+          </a>
+        </li>
+        <li><hr [class]="dividerClass"></li>
+      }
+
+      <li>
+        <span [class]="sectionLabelClass + ' menu-section-label'">{{ 'EmployeeNamesMode' | translate }}</span>
+      </li>
+      <li>
+        <a [class]="menuRowClass + (preferences?.EmployeeNamesMode === EmployeeNamesModeOption.FullNames ? ' menu-item-active' : '')"
+           (click)="onNameModeClick(EmployeeNamesModeOption.FullNames, $event); $event.stopPropagation()">
+          <fa-icon [class]="preferences?.EmployeeNamesMode === EmployeeNamesModeOption.FullNames ? indicatorActiveClass : indicatorInvisibleClass" [icon]="checkIcon"></fa-icon>
+          {{ 'FullNames' | translate }}
+        </a>
+      </li>
+      <li>
+        <a [class]="menuRowClass + (preferences?.EmployeeNamesMode === EmployeeNamesModeOption.ShortNames ? ' menu-item-active' : '')"
+           (click)="onNameModeClick(EmployeeNamesModeOption.ShortNames, $event); $event.stopPropagation()">
+          <fa-icon [class]="preferences?.EmployeeNamesMode === EmployeeNamesModeOption.ShortNames ? indicatorActiveClass : indicatorInvisibleClass" [icon]="checkIcon"></fa-icon>
+          {{ 'ShortNames' | translate }}
+        </a>
+      </li>
+      <li>
+        <a [class]="menuRowClass + (preferences?.EmployeeNamesMode === EmployeeNamesModeOption.StandardNames ? ' menu-item-active' : '')"
+           (click)="onNameModeClick(EmployeeNamesModeOption.StandardNames, $event); $event.stopPropagation()">
+          <fa-icon [class]="preferences?.EmployeeNamesMode === EmployeeNamesModeOption.StandardNames ? indicatorActiveClass : indicatorInvisibleClass" [icon]="checkIcon"></fa-icon>
+          {{ 'StandardNames' | translate }}
+        </a>
+      </li>
+      <li><hr [class]="dividerClass"></li>
+
+      @if (hrBlockState && hrBlockState.UserCanBlockModule && systemModule == SystemModule.Payroll) {
+        <li>
+          @if (hrBlockState.IsBlocked) {
+            <a [class]="menuRowClass" (click)="releaseModule(BlockableModule.HumanResources, $event)">
+              {{ 'ReleaseHR' | translate }}
+            </a>
+          } @else {
+            <a [class]="menuRowClass" (click)="blockModule(BlockableModule.HumanResources, $event)">
+              {{ 'BlockHR' | translate }}
+            </a>
+          }
+        </li>
+        <li><hr [class]="dividerClass"></li>
+      }
+
+      @if (tkBlockState && tkBlockState.UserCanBlockModule && systemModule == SystemModule.HumanResources) {
+        <li>
+          @if (tkBlockState.IsBlocked) {
+            <a [class]="menuRowClass" (click)="releaseModule(BlockableModule.Timekeeping, $event)">
+              {{ 'ReleaseTK' | translate }}
+            </a>
+          } @else {
+            <a [class]="menuRowClass" (click)="blockModule(BlockableModule.Timekeeping, $event)">
+              {{ 'BlockTK' | 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
+    [baseUrl]="baseUrl"
+    [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>

package/{src → projects/bayan-core-ui/src}/lib/top-menu-widget/components/settings-widget/settings-widget.component.ts

@@ -1,4 +1,4 @@
-import { ModuleBlockState, AppFramePreferences, EmployeeNamesModeOption, BlockableModule } from '../../../shared/menu.dtos';
+import { ModuleBlockState, AppFramePreferences, EmployeeNamesModeOption, BlockableModule, SystemModule } from '../../../shared/menu.dtos';
 import { SkyAlertToastService } from '@skysoftware-co/sky-components-ui';
 import { CommonModule } from '@angular/common';
 import { BayanCoreChangePasswordWidgetComponent } from '../change-password-widget/change-password-widget.component';
@@ -47,6 +47,7 @@ export class BayanCoreSettingsWidgetComponent implements OnInit, OnChanges {
   @Input() supportUrl = 'https://skyits.com/contact';
 
   @Input() ActivePropertyChanged: boolean = false;
+  @Input() systemModule : SystemModule | null =null;
 
   @Input() checkIcon: any = faCheck;
   @Input() cogIcon: any = faCog;
@@ -54,18 +55,18 @@ export class BayanCoreSettingsWidgetComponent implements OnInit, OnChanges {
   @Input() dropdownOpen = signal(false);
   showChangePassword = false;
   showAbout = false;
-
+  currentModule: SystemModule | null = null;
+  SystemModule = SystemModule;
   // CSS class bindings for customization
   @Input() dropdownHostClass: string = 'dropdown menu-dropdown-host';
-  @Input() toggleBtnClass: string = 'settings-toggle menu-icon-btn';
+  @Input() toggleBtnClass: string = 'menu-icon-btn';
   @Input() menuPanelClass: string = 'settings-menu menu-dropdown-panel';
   @Input() sectionLabelClass: string = 'menu-section-label';
-  @Input() menuRowClass: string = 'dropdown-item header-dropdown-item menu-row text-dark-gray';
+  @Input() menuRowClass: string = 'header-dropdown-item';
   @Input() dividerClass: string = 'dropdown-divider';
   @Input() indicatorClass: string = 'menu-indicator';
   @Input() indicatorActiveClass: string = 'menu-indicator menu-indicator-active';
   @Input() indicatorInvisibleClass: string = 'menu-indicator invisible';
-  @Input() alternateNamesLinkClass: string = 'dropdown-item header-dropdown-item menu-row text-dark-gray';
 
   @Output() alternateNamesChange = new EventEmitter<boolean>();
   @Output() nameModeChange = new EventEmitter<EmployeeNamesModeOption>();
@@ -169,6 +170,7 @@ export class BayanCoreSettingsWidgetComponent implements OnInit, OnChanges {
       return;
     }
     // Toggle the value
+    this.preferences.UseAlternateNames = !this.preferences.UseAlternateNames;
     const newValue = !this.preferences.UseAlternateNames;
     try {
       await this.menuService.setDisplayAlternateNames(this.baseUrl, { DisplayAlternateNames: newValue }).toPromise();

package/{src → projects/bayan-core-ui/src}/lib/top-menu-widget/components/user-panel-widget/user-panel-widget.component.html

@@ -40,7 +40,8 @@
 
       @if (!userPanel()?.IsSSOLogin) {
         <li>
-          <a class="text-dark-gray" [class]="signOutButtonClass" (click)="signOut($event)">
+          <a class="text-dark-gray" [class]="signOutButtonClass"
+          [ngClass]="{'ms-3': !showSignOutIcon}" (click)="signOut($event)">
             @if (showSignOutIcon) {
               <fa-icon [class]="signOutIconClass" [icon]="signOutIcon"></fa-icon>
             }

package/{src → projects/bayan-core-ui/src}/lib/top-menu-widget/components/user-panel-widget/user-panel-widget.component.ts

@@ -45,7 +45,7 @@ export class BayanCoreUserPanelWidgetComponent implements OnInit, OnChanges {
   @Input() menuItemClass = 'menu-item';
   @Input() menuItemActiveClass = 'menu-item-active';
   @Input() indicatorClass = 'menu-indicator';
-  @Input() invisibleIndicatorClass = 'invisible';
+  @Input() invisibleIndicatorClass = 'menu-indicator invisible';
   @Input() dividerClass = 'menu-divider';
   @Input() signOutButtonClass = 'menu-item menu-item-signout';
   @Input() showSignOutIcon = true;

package/{src → projects/bayan-core-ui/src}/lib/top-menu-widget/top-menu-widget.component.html

@@ -15,14 +15,16 @@
       </div>
     </dxi-item>
 
-    @if (ShowShourtcutMenus) {
+    @if (showShortcutMenus) {
       <dxi-item location="before" locateInMenu="never">
         <div *dxTemplate>
           <ul class="nav navbar-nav d-flex flex-row align-items-center mb-0 gap-1">
-            @for (item of menuItems; track item.MenuName) {
+            @for (item of menuItems; track item.MenuName; let idx = $index) {
               <bayan-core-item-widget [item]="item"
                                       [baseUrl]="baseUrl"
                                       [ActivePropertyChanged]="ActivePropertyChanged"
+                                      [open]="openDropdownIndex === idx"
+                                      (toggleOpen)="openDropdownIndex = openDropdownIndex === idx ? null : idx"
                                       (itemClick)="menuItemClick.emit($event)">
               </bayan-core-item-widget>
             }
@@ -35,6 +37,7 @@
       <dxi-item location="after" locateInMenu="never">
         <div *dxTemplate>
           <bayan-core-global-search-widget
+            #globalSearchWidget
             [baseUrl]="baseUrl"
             [ActivePropertyId]="ActivePropertyId"
             [ActivePropertyChanged]="ActivePropertyChanged"
@@ -66,6 +69,7 @@
             [licenseUrl]="licenseUrl"
             [releaseNotesUrl]="releaseNotesUrl"
             [supportUrl]="supportUrl"
+            [systemModule]="systemModule"
             (alternateNamesChange)="alternateNamesChange.emit($event)"
             (employeeNameModeChange)="onEmployeeNameModeChange($event)">
           </bayan-core-settings-widget>

package/{src → projects/bayan-core-ui/src}/lib/top-menu-widget/top-menu-widget.component.ts

@@ -34,8 +34,6 @@ import { BayanCoreUserPanelWidgetComponent } from './components/user-panel-widge
     BayanCoreGlobalSearchWidgetComponent,
     BayanCoreUserPanelWidgetComponent,
     BayanCoreSettingsWidgetComponent,
-    BayanCoreAboutDialogWidgetComponent,
-    BayanCoreChangePasswordWidgetComponent,
     BayanCoreNotificationsWidgetComponent,
   ],
   templateUrl: './top-menu-widget.component.html',
@@ -43,10 +41,13 @@ import { BayanCoreUserPanelWidgetComponent } from './components/user-panel-widge
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BayanCoreTopMenuWidgetComponent implements OnInit {
+  globalSearchWidget?: BayanCoreGlobalSearchWidgetComponent;
   private readonly document = inject(DOCUMENT);
   private readonly router = inject(Router);
   private readonly menuService = inject(BayanCoreTopMenuService);
 
+  openDropdownIndex: number|null = null;
+
   @Input() baseUrl = '';
   @Input() systemModule : SystemModule | null =null;
   menuItems: TopMenuShortcut[] = [];
@@ -64,7 +65,7 @@ export class BayanCoreTopMenuWidgetComponent implements OnInit {
   @Input() showGlobalSearch = true;
   @Input() showUserPanel = true;
   @Input() showSettings = true;
-  @Input() ShowShourtcutMenus = true;
+  @Input() showShortcutMenus = true;
   @Input() showNotifications = true;
   @Input() notificationsTitle = 'Notifications';
 
@@ -96,6 +97,16 @@ export class BayanCoreTopMenuWidgetComponent implements OnInit {
     this.loadShortcutMenus();
   }
 
+  ngOnChanges(changes: any): void {
+    if (
+      (changes['baseUrl'] && !changes['baseUrl'].firstChange && changes['baseUrl'].previousValue !== changes['baseUrl'].currentValue) ||
+      (changes['ActivePropertyId'] && !changes['ActivePropertyId'].firstChange && changes['ActivePropertyId'].previousValue !== changes['ActivePropertyId'].currentValue) ||
+      (changes['systemModule'] && !changes['systemModule'].firstChange && changes['systemModule'].previousValue !== changes['systemModule'].currentValue)
+    ) {
+      this.globalSearchWidget?.reset();
+    }
+  }
+
   onEmployeeNameModeChange(event: any): void {
      this.employeeNameModeChange.emit(event);
   }
@@ -130,12 +141,17 @@ export class BayanCoreTopMenuWidgetComponent implements OnInit {
   onPropertyChanged(property: PropertyOption): void {
     this.ActivePropertyChanged = !this.ActivePropertyChanged;
     this.ActivePropertyId = property.PropertyId;
-    this.propertyChanged.emit(property);
     this.loadShortcutMenus();
+    this.propertyChanged.emit(property);
   }
 
   private loadShortcutMenus(): void {
-    if (this.ShowShourtcutMenus && this.ActivePropertyId > 0 && this.systemModule && this.baseUrl) {
+    this.menuItems=[];
+    if(!this.showShortcutMenus) return;
+    if(!this.baseUrl) return;
+    if(!this.systemModule) return;
+
+    if (this.ActivePropertyId > 0) {
       this.menuService.getMicroserviceTopMenusShortcut(this.baseUrl, this.ActivePropertyId, this.systemModule)
         .subscribe({
           next: (menus: any) => this.menuItems = menus ?? [],