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

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

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

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

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

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