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

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

@@ -0,0 +1,235 @@
+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';
+import { BayanCoreAboutDialogWidgetComponent } from '../about-dialog-widget/about-dialog-widget.component';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  inject,
+  signal,
+} from '@angular/core';
+import { BayanCoreTopMenuService } from '../../../shared/menu.service';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faCheck, faCog, faInfoCircle } from '@fortawesome/pro-solid-svg-icons';
+import { TranslatePipe } from '@skysoftware-co/sky-components-ui';
+// Removed duplicate import
+
+
+@Component({
+  selector: 'bayan-core-settings-widget',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FontAwesomeModule,
+    TranslatePipe,
+    BayanCoreChangePasswordWidgetComponent,
+    BayanCoreAboutDialogWidgetComponent
+  ],
+  templateUrl: './settings-widget.component.html',
+  styleUrls: ['../../top-menu-widget.styles.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BayanCoreSettingsWidgetComponent implements OnInit, OnChanges {
+  private readonly menuService = inject(BayanCoreTopMenuService);
+  private readonly alertToastService = inject(SkyAlertToastService);
+  @Input() baseUrl: string = '';
+  @Input() licenseUrl = '';
+  @Input() releaseNotesUrl = '';
+  @Input() supportUrl = 'https://skyits.com/contact';
+
+  @Input() ActivePropertyChanged: boolean = false;
+  @Input() systemModule : SystemModule | null =null;
+
+  @Input() checkIcon: any = faCheck;
+  @Input() cogIcon: any = faCog;
+  @Input() infoIcon: any = faInfoCircle;
+  @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 = 'menu-icon-btn';
+  @Input() menuPanelClass: string = 'settings-menu menu-dropdown-panel';
+  @Input() sectionLabelClass: string = 'menu-section-label';
+  @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';
+
+  @Output() alternateNamesChange = new EventEmitter<boolean>();
+  @Output() nameModeChange = new EventEmitter<EmployeeNamesModeOption>();
+
+  preferences: AppFramePreferences | null = null;
+  BlockableModule = BlockableModule;
+  EmployeeNamesModeOption = EmployeeNamesModeOption;
+  hrBlockState: ModuleBlockState | null = null;
+  tkBlockState: ModuleBlockState | null = null;
+  changePasswordDialog = {
+    title: 'ChangePassword',
+    currentPasswordLabel: 'CurrentPassword',
+    newPasswordLabel: 'NewPassword',
+    confirmNewPasswordLabel: 'ConfirmPassword',
+    primaryButtonText: 'Change',
+  };
+
+   aboutDialog = {
+    title: 'Sky Bayan Human Resources Management',
+    logoUrl: 'https://cdn-dev.skysoftware.cloud/bayan/images/logo-enterprise.png',
+    version: '',
+    versionLabel: 'Version',
+    copyright: `Copyright 2026, Sky Software Co LLC All Rights Reserved\nSky Bayan and Sky Bayan Logo are registered trademarks of Sky Software`,
+    statusLabel: 'SkyBayanUpToDate',
+    licenseButtonLabel: 'LicenseInformation',
+    releaseNotesButtonLabel: 'ReleaseNotes',
+    supportButtonLabel: 'TechnicalSupport',
+    closeButtonLabel: 'Close',
+  };
+
+  constructor(private readonly elementRef: ElementRef<HTMLElement>) {}
+
+  // ...existing methods...
+
+  showAlert(message: string, type: string = 'success') {
+    this.alertToastService.toastInformation(message, type as any);
+  }
+
+  ngOnInit(): void {
+    this.loadPreferences();
+    this.loadModuleBlockStates();
+  }
+
+  loadModuleBlockStates() {
+    if (this.baseUrl) {
+      this.menuService.getModuleBlockState(this.baseUrl, BlockableModule.HumanResources).subscribe({
+        next: state => this.hrBlockState = state,
+        error: () => this.hrBlockState = null
+      });
+      this.menuService.getModuleBlockState(this.baseUrl, BlockableModule.Timekeeping).subscribe({
+        next: state => this.tkBlockState = state,
+        error: () => this.tkBlockState = null
+      });
+    }
+  }
+
+  loadPreferences() {
+    if (this.baseUrl) {
+      this.menuService.getPreferences(this.baseUrl).subscribe({
+        next: prefs => {
+          this.preferences = prefs;
+          this.aboutDialog.version = prefs.VersionNumber;
+        },
+        error: () => {
+          this.preferences = null;
+        }
+      });
+    }
+  }
+
+  // No need to derive flags, use preferences directly in template and logic.
+  ngOnChanges(changes: SimpleChanges): void {
+    if (
+      changes['ActivePropertyChanged']
+      && !changes['ActivePropertyChanged'].firstChange
+      && changes['ActivePropertyChanged'].previousValue !== changes['ActivePropertyChanged'].currentValue
+    ) {
+      this.dropdownOpen.set(false);
+      this.loadPreferences();
+      this.loadModuleBlockStates();
+    }
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    const target = event.target as Node | null;
+    if (target && !this.elementRef.nativeElement.contains(target)) {
+      this.dropdownOpen.set(false);
+    }
+  }
+
+  toggleDropdown(event: Event): void {
+    event.preventDefault();
+    this.dropdownOpen.update((value) => !value);
+  }
+
+  async onAlternateNamesClick(event: Event): Promise<void> {
+    event.preventDefault();
+    this.dropdownOpen.set(false);
+    if (!this.preferences || !this.baseUrl) {
+      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();
+      await this.loadPreferences();
+      this.alternateNamesChange.emit(newValue);
+    } catch (err) {}
+  }
+
+  async onNameModeClick(nameMode: EmployeeNamesModeOption, event: Event): Promise<void> {
+    event.preventDefault();
+    this.dropdownOpen.set(false);
+
+    if (!this.preferences || !this.baseUrl) {
+      return;
+    }
+
+    try {
+      await this.menuService.setEmployeeNamesMode(this.baseUrl, { EmployeeNamesMode: nameMode }).toPromise();
+      // Reload preferences
+      await this.loadPreferences();
+      this.nameModeChange.emit(nameMode);
+    } catch (err) {
+      // Optionally handle error
+    }
+  }
+
+  onChangePasswordClick(event: Event): void {
+    event.preventDefault();
+    this.dropdownOpen.set(false);
+    this.showChangePassword = true;
+  }
+
+  onOpenAboutClick(event: Event): void {
+    event.preventDefault();
+    this.dropdownOpen.set(false);
+    this.showAbout = true;
+  }
+
+  async blockModule(module: BlockableModule, event: Event): Promise<void> {
+    event.preventDefault();
+    this.dropdownOpen.set(false);
+    if (!this.baseUrl) return;
+    try {
+      await this.menuService.blockModule(this.baseUrl, { Module: module }).toPromise();
+      await this.loadModuleBlockStates();
+      const key = module === BlockableModule.HumanResources ? 'BlockHRSuccess' : 'BlockTKSuccess';
+      this.showAlert(key);
+    } catch {}
+  }
+
+  async releaseModule(module: BlockableModule, event: Event): Promise<void> {
+    event.preventDefault();
+    this.dropdownOpen.set(false);
+    if (!this.baseUrl) return;
+    try {
+      await this.menuService.releaseModule(this.baseUrl, { Module: module }).toPromise();
+      await this.loadModuleBlockStates();
+      const key = module === BlockableModule.HumanResources ? 'ReleaseHRSuccess' : 'ReleaseTKSuccess';
+      this.showAlert(key);
+    } catch {}
+  }
+}

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

@@ -0,0 +1,54 @@
+<div [ngClass]="[wrapperClass, dropdownOpen() ? dropdownOpenClass : '']">
+  <a href="#" [class]="toggleButtonClass" (click)="toggleDropdown($event)">
+    <bayan-employee-badge [badge]="badge()" width="34px" height="34px"></bayan-employee-badge>
+
+    <div [class]="employeeInfoClass">
+      <span [class]="userNameClass">{{ userPanel()?.UserDisplayName || '' }}</span>
+
+      @if (userPanel()?.ActivePropertyName) {
+        <span [class]="propertyNameClass">{{ userPanel()?.ActivePropertyName }}</span>
+      }
+    </div>
+
+    <span [class]="caretClass">&#9660;</span>
+  </a>
+
+  @if (dropdownOpen()) {
+    <ul [class]="menuClass">
+      @if ((userPanel()?.Properties?.length || 0) > 0) {
+        <li [class]="sectionLabelClass">{{ 'Properties' | translate }}</li>
+
+        @for (property of userPanel()?.Properties ?? []; track property.PropertyId) {
+          <li>
+            <a
+              class="text-dark-gray"
+              [ngClass]="[menuItemClass, property.PropertyId === userPanel()?.ActivePropertyId ? menuItemActiveClass : '']"
+              (click)="selectProperty($event, property)">
+              @if (property.PropertyId === userPanel()?.ActivePropertyId) {
+                <span [class]="indicatorClass">&#9658;</span>
+              } @else {
+                <span [class]="indicatorClass + ' ' + invisibleIndicatorClass"></span>
+              }
+
+              {{ property.PropertyName }}
+            </a>
+          </li>
+        }
+
+        <li><hr [class]="dividerClass"></li>
+      }
+
+      @if (!userPanel()?.IsSSOLogin) {
+        <li>
+          <a class="text-dark-gray" [class]="signOutButtonClass"
+          [ngClass]="{'ms-3': !showSignOutIcon}" (click)="signOut($event)">
+            @if (showSignOutIcon) {
+              <fa-icon [class]="signOutIconClass" [icon]="signOutIcon"></fa-icon>
+            }
+            {{ 'SignOut' | translate }}
+          </a>
+        </li>
+      }
+    </ul>
+  }
+</div>

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

@@ -0,0 +1,140 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  computed,
+  inject,
+  signal,
+} from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faPersonRunning } from '@fortawesome/pro-solid-svg-icons';
+import { BayanEmployeeBadgeComponent, BayanEmployeeBadgeDTO } from '@skysoftware-co/bayan-components-ui';
+import { TranslatePipe } from '@skysoftware-co/sky-components-ui';
+import { UserPanel, PropertyOption } from '../../../shared/menu.dtos';
+import { BayanCoreTopMenuService } from '../../../shared/menu.service';
+
+@Component({
+  selector: 'bayan-core-user-panel-widget',
+  standalone: true,
+  imports: [CommonModule, FontAwesomeModule, BayanEmployeeBadgeComponent, TranslatePipe],
+  templateUrl: './user-panel-widget.component.html',
+  styleUrls: ['../../top-menu-widget.styles.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BayanCoreUserPanelWidgetComponent implements OnInit, OnChanges {
+  private readonly topMenuService = inject(BayanCoreTopMenuService);
+
+  @Input() baseUrl = '';
+  @Input() wrapperClass = 'menu-dropdown-host';
+  @Input() dropdownOpenClass = 'open';
+  @Input() toggleButtonClass = 'employee-toggle';
+  @Input() employeeInfoClass = 'employee-info';
+  @Input() userNameClass = 'user-name';
+  @Input() propertyNameClass = 'property-name';
+  @Input() caretClass = 'employee-caret';
+  @Input() menuClass = 'employee-menu menu-dropdown-panel';
+  @Input() sectionLabelClass = 'menu-section-label';
+  @Input() menuItemClass = 'menu-item';
+  @Input() menuItemActiveClass = 'menu-item-active';
+  @Input() indicatorClass = 'menu-indicator';
+  @Input() invisibleIndicatorClass = 'menu-indicator invisible';
+  @Input() dividerClass = 'menu-divider';
+  @Input() signOutButtonClass = 'menu-item menu-item-signout';
+  @Input() showSignOutIcon = true;
+  @Input() signOutIconClass = 'mx-2';
+
+  @Output() propertyChanged = new EventEmitter<PropertyOption>();
+  @Output() signOutClick = new EventEmitter<void>();
+
+  readonly signOutIcon = faPersonRunning;
+  readonly dropdownOpen = signal(false);
+  readonly userPanel = signal<UserPanel | null>(null);
+
+  readonly badge = computed<BayanEmployeeBadgeDTO>(() => ({
+    EmployeePhotoKey: this.userPanel()?.PhotoPath ?? null,
+    EmployeePhotoFailed: false,
+    EmployeeNameInitials: this.userPanel()?.NameInitials ?? '',
+  }));
+
+  constructor(private readonly elementRef: ElementRef<HTMLElement>) {}
+
+  ngOnInit(): void {
+    this.loadUserPanel();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['baseUrl'] && !changes['baseUrl'].firstChange) {
+      this.loadUserPanel();
+    }
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    const target = event.target as Node | null;
+    if (target && !this.elementRef.nativeElement.contains(target)) {
+      this.dropdownOpen.set(false);
+    }
+  }
+
+  toggleDropdown(event: Event): void {
+    event.preventDefault();
+    this.dropdownOpen.update((value) => !value);
+  }
+
+  selectProperty(event: Event, property: PropertyOption): void {
+    event.preventDefault();
+    if (property.PropertyId === this.userPanel()?.ActivePropertyId) {
+      this.dropdownOpen.set(false);
+      return;
+    }
+
+    this.dropdownOpen.set(false);
+
+    this.topMenuService
+      .switchProperty(this.baseUrl, { PropertyId: property.PropertyId })
+      .subscribe({
+        next: () => {
+          this.topMenuService.getUserPanel(this.baseUrl).subscribe({
+            next: (userPanel) => {
+              this.userPanel.set(userPanel);
+              this.propertyChanged.emit(property);
+            },
+          });
+        },
+      });
+  }
+
+  signOut(event: Event): void {
+    event.preventDefault();
+    this.dropdownOpen.set(false);
+    this.signOutClick.emit();
+  }
+
+  private loadUserPanel(): void {
+    if (!this.baseUrl) {
+      this.userPanel.set(null);
+      return;
+    }
+
+    this.topMenuService.getUserPanel(this.baseUrl).subscribe({
+      next: (userPanel) => {
+        this.userPanel.set(userPanel);
+        let property : PropertyOption = {
+          PropertyId: userPanel.ActivePropertyId,
+          PropertyName: userPanel.ActivePropertyName };
+        this.propertyChanged.emit(property);
+      },
+      error: () => {
+        this.userPanel.set(null);
+      },
+    });
+  }
+}

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

@@ -0,0 +1,107 @@
+<header class="top-bar-header shadow-sm w-100 sticky-top">
+  <dx-toolbar class="header-toolbar px-4">
+    <dxi-item location="before">
+      <div *dxTemplate>
+        <a
+          class="navbar-brand-link" href="#"
+          [class.collapsed]="sidebarCollapsed"
+          (click)="onLogoClicked($event)">
+            <img
+              [src]="getLogoSrc()"
+              alt=""
+              [class.header-logo]="!sidebarCollapsed"
+              [class.header-logo-collapsed]="sidebarCollapsed && !!collapsedLogoUrl">
+        </a>
+      </div>
+    </dxi-item>
+
+    @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; 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>
+            }
+        </ul>
+      </div>
+    </dxi-item>
+  }
+
+    @if (showGlobalSearch) {
+      <dxi-item location="after" locateInMenu="never">
+        <div *dxTemplate>
+          <bayan-core-global-search-widget
+            #globalSearchWidget
+            [baseUrl]="baseUrl"
+            [ActivePropertyId]="ActivePropertyId"
+            [ActivePropertyChanged]="ActivePropertyChanged"
+            (search)="searchSubmit.emit($event)">
+          </bayan-core-global-search-widget>
+        </div>
+      </dxi-item>
+    }
+
+    @if (showUserPanel) {
+      <dxi-item location="after" locateInMenu="never">
+        <div *dxTemplate>
+          <bayan-core-user-panel-widget
+            [baseUrl]="baseUrl"
+            [showSignOutIcon]="false"
+            (propertyChanged)="onPropertyChanged($event)"
+            (signOutClick)="signOutClick.emit()">
+          </bayan-core-user-panel-widget>
+        </div>
+      </dxi-item>
+    }
+
+    @if (showSettings) {
+      <dxi-item location="after" locateInMenu="never">
+        <div *dxTemplate>
+          <bayan-core-settings-widget
+            [ActivePropertyChanged]="ActivePropertyChanged"
+            [baseUrl]="baseUrl"
+            [licenseUrl]="licenseUrl"
+            [releaseNotesUrl]="releaseNotesUrl"
+            [supportUrl]="supportUrl"
+            [systemModule]="systemModule"
+            (alternateNamesChange)="alternateNamesChange.emit($event)"
+            (employeeNameModeChange)="onEmployeeNameModeChange($event)">
+          </bayan-core-settings-widget>
+        </div>
+      </dxi-item>
+    }
+
+    @if (showNotifications) {
+      <dxi-item location="after" locateInMenu="never">
+        <div *dxTemplate>
+          <bayan-core-notifications-widget [baseUrl]="baseUrl"
+                                           [title]="notificationsTitle | translate" >
+          </bayan-core-notifications-widget>
+        </div>
+      </dxi-item>
+    }
+
+    @if (showHelp) {
+      <dxi-item location="after" locateInMenu="never">
+        <div *dxTemplate>
+          <a
+            [class]="helpAnchorClass"
+            [title]="helpTitle | translate"
+            [target]="helpUrlTarget"
+            href="#"
+            (click)="onHelpClicked($event)">
+            <fa-icon [icon]="helpIcon" class="fs-6"></fa-icon>
+          </a>
+        </div>
+      </dxi-item>
+    }
+  </dx-toolbar>
+</header>
+
+<!-- Dialogs are now rendered inside settings-widget, not here -->