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

package/src/lib/shared/common-methods/navigation.utils.ts

@@ -0,0 +1,21 @@
+export function resolveUrl(baseUrl: string | null | undefined, url: string | null | undefined): string | null {
+  if (!url) {
+    return null;
+  }
+
+  return baseUrl ? joinUrl(baseUrl, url) : url;
+}
+
+export function isExternalNavigation(baseUrl: string | null | undefined, url: string): boolean {
+  return isAbsoluteUrl(url) || (!!baseUrl && isAbsoluteUrl(baseUrl));
+}
+
+export function joinUrl(baseUrl: string, url: string): string {
+  const normalizedBaseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+  const normalizedUrl = url.startsWith('/') ? url : `/${url}`;
+  return `${normalizedBaseUrl}${normalizedUrl}`;
+}
+
+function isAbsoluteUrl(url: string): boolean {
+  return /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i.test(url);
+}

package/src/lib/shared/menu.dtos.ts

@@ -0,0 +1,107 @@
+export interface ApiEnvelope<T> {
+  ResponseData: T;
+  ApiVersion: number;
+}
+
+export interface TopMenuShortcut {
+  MenuName: string;
+  MenuUrl: string | null;
+  Children: TopMenuShortcut[];
+}
+
+export interface SystemMenu {
+  MenuName: string;
+  MenuUrl: string | null;
+  IconClass: string | null;
+  Expanded: boolean;
+  Children: SystemMenu[];
+}
+
+export interface GlobalSearchMenu {
+  MenuTitle: string;
+  MenuSubTitle: string;
+  IconClass: string;
+  MenuUrl: string;
+  IsTranslatable: boolean;
+}
+
+export interface PropertyOption {
+  PropertyId: number;
+  PropertyName: string;
+}
+
+export interface UserPanel {
+  UserDisplayName: string;
+  ActivePropertyId: number;
+  ActivePropertyName: string;
+  PhotoPath: string | null;
+  NameInitials: string;
+  IsSSOLogin: boolean;
+  Properties: PropertyOption[];
+}
+
+export interface SwitchPropertyRequest {
+  PropertyId: number;
+}
+
+export interface SwitchPropertyResult {
+  PropertyId: number;
+}
+
+export enum EmployeeNamesModeOption {
+  ShortNames = 1,
+  StandardNames = 2,
+  FullNames = 3,
+}
+
+export interface AppFramePreferences {
+  UseAlternateNames: boolean;
+  DisplayAlternateNames: boolean;
+  EmployeeNamesMode: EmployeeNamesModeOption;
+  VersionNumber: string;
+}
+
+export interface SetDisplayAlternateNamesRequest {
+  DisplayAlternateNames: boolean;
+}
+
+export interface SetEmployeeNamesModeRequest {
+  EmployeeNamesMode: EmployeeNamesModeOption;
+}
+
+export enum BlockableModule {
+  HumanResources = 4,
+  Timekeeping = 5,
+}
+
+export interface ModuleBlockState {
+  IsBlocked: boolean;
+  UserCanBlockModule: boolean;
+}
+
+export interface BlockReleaseModuleRequest {
+  Module: BlockableModule;
+}
+
+export interface NotificationsSummary {
+  TotalNotificationsCount: number;
+  NotificationsUrl: string;
+}
+
+export interface ChangePasswordRequest {
+  CurrentPassword: string;
+  NewPassword: string;
+}
+
+export enum SystemModule {
+  Corporate = 1,
+  Cluster = 2,
+  Setup = 3,
+  HumanResources = 4,
+  Timekeeping = 5,
+  Payroll = 6,
+  Training = 7,
+  Workflow = 8,
+  Appraisal = 9,
+  BusinessIntelligence = 10,
+}

package/src/lib/shared/menu.service.ts

@@ -0,0 +1,157 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable, inject } from '@angular/core';
+import { catchError, map, Observable, throwError } from 'rxjs';
+import {
+  ApiEnvelope,
+  AppFramePreferences,
+  BlockableModule,
+  BlockReleaseModuleRequest,
+  ChangePasswordRequest,
+  GlobalSearchMenu,
+  ModuleBlockState,
+  NotificationsSummary,
+  SetDisplayAlternateNamesRequest,
+  SetEmployeeNamesModeRequest,
+  SwitchPropertyRequest,
+  SwitchPropertyResult,
+  SystemMenu,
+  SystemModule,
+  TopMenuShortcut,
+  UserPanel,
+} from './menu.dtos';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class BayanCoreTopMenuService {
+  private readonly http = inject(HttpClient);
+
+  private unwrap<T>(obs: Observable<ApiEnvelope<T>>): Observable<T> {
+    return obs.pipe(
+      map((env) => {
+        if (!env.ResponseData) {
+          throw new Error('No data received');
+        }
+
+        return env.ResponseData;
+      }),
+      catchError((error) => throwError(() => error)),
+    );
+  }
+
+  private getBaseUrl(baseUrl: string): string {
+    let url = baseUrl.replace('/api','');
+    return `${url.replace(/\/$/, '')}/api/app-frame`;
+  }
+
+  getMicroserviceMenusByProperty(
+    baseUrl: string,
+    propertyId: number | string,
+    systemModule: SystemModule,
+  ): Observable<SystemMenu[]> {
+    const params = new HttpParams()
+      .set('PropertyId', propertyId)
+      .set('SystemModule', systemModule);
+
+    return this.unwrap(
+      this.http.get<ApiEnvelope<SystemMenu[]>>(`${this.getBaseUrl(baseUrl)}/left-menu`, { params }),
+    );
+  }
+
+  getMicroserviceTopMenusShortcut(
+    baseUrl: string,
+    propertyId: number | string,
+    systemModule: SystemModule,
+  ): Observable<TopMenuShortcut[]> {
+    const params = new HttpParams()
+      .set('PropertyId', propertyId)
+      .set('SystemModule', systemModule);
+
+    return this.unwrap(
+      this.http.get<ApiEnvelope<TopMenuShortcut[]>>(`${this.getBaseUrl(baseUrl)}/top-shortcuts`, {
+        params,
+      }),
+    );
+  }
+
+  getGlobalSearchMenus(baseUrl: string, propertyId?: number): Observable<GlobalSearchMenu[]> {
+    let params = new HttpParams();
+
+    if (propertyId != null) {
+      params = params.set('PropertyId', propertyId);
+    }
+
+    return this.unwrap(
+      this.http.get<ApiEnvelope<GlobalSearchMenu[]>>(
+        `${this.getBaseUrl(baseUrl)}/global-search-menu`,
+        { params },
+      ),
+    );
+  }
+
+  getUserPanel(baseUrl: string): Observable<UserPanel> {
+    return this.unwrap(this.http.get<ApiEnvelope<UserPanel>>(`${this.getBaseUrl(baseUrl)}/user-panel`));
+  }
+
+  switchProperty(baseUrl: string, request: SwitchPropertyRequest): Observable<SwitchPropertyResult> {
+    return this.unwrap(
+      this.http.post<ApiEnvelope<SwitchPropertyResult>>(
+        `${this.getBaseUrl(baseUrl)}/switch-property`,
+        request,
+      ),
+    );
+  }
+
+  getPreferences(baseUrl: string): Observable<AppFramePreferences> {
+    return this.unwrap(
+      this.http.get<ApiEnvelope<AppFramePreferences>>(`${this.getBaseUrl(baseUrl)}/preferences`),
+    );
+  }
+
+  setDisplayAlternateNames(
+    baseUrl: string,
+    request: SetDisplayAlternateNamesRequest,
+  ): Observable<void> {
+    return this.http.post<void>(`${this.getBaseUrl(baseUrl)}/preferences/alternate-names`, request);
+  }
+
+  setEmployeeNamesMode(baseUrl: string, request: SetEmployeeNamesModeRequest): Observable<void> {
+    return this.http.post<void>(
+      `${this.getBaseUrl(baseUrl)}/preferences/employee-names-mode`,
+      request,
+    );
+  }
+
+  getModuleBlockState(
+    baseUrl: string,
+    systemModule: SystemModule | BlockableModule,
+  ): Observable<ModuleBlockState> {
+    const params = new HttpParams().set('SystemModule', systemModule);
+
+    return this.unwrap(
+      this.http.get<ApiEnvelope<ModuleBlockState>>(`${this.getBaseUrl(baseUrl)}/module-block-state`, {
+        params,
+      }),
+    );
+  }
+
+  blockModule(baseUrl: string, request: BlockReleaseModuleRequest): Observable<void> {
+    return this.http.post<void>(`${this.getBaseUrl(baseUrl)}/block-module`, request);
+  }
+
+  releaseModule(baseUrl: string, request: BlockReleaseModuleRequest): Observable<void> {
+    return this.http.post<void>(`${this.getBaseUrl(baseUrl)}/release-module`, request);
+  }
+
+  getNotificationsSummary(baseUrl: string): Observable<NotificationsSummary> {
+    return this.unwrap(
+      this.http.get<ApiEnvelope<NotificationsSummary>>(
+        `${this.getBaseUrl(baseUrl)}/notifications-summary`,
+      ),
+    );
+  }
+
+  changePassword(baseUrl: string, request: ChangePasswordRequest): Observable<boolean> {
+    return this.http.post<boolean>(`${this.getBaseUrl(baseUrl)}/change-password`, request);
+  }
+}

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

@@ -0,0 +1,37 @@
+@if (visible) {
+  <div [class]="backdropClass" (click)="onBackdropClick($event)">
+    <div [class]="modalClass" role="dialog" aria-labelledby="topMenuAboutDialogTitle" aria-modal="true">
+      <div [class]="headerClass">
+        <h4 [class]="titleClass" id="topMenuAboutDialogTitle">{{ config.title || 'AboutSkyBayan' | translate }}</h4>
+        <button type="button" [class]="closeBtnClass" (click)="closeDialog()" [attr.aria-label]="(config.closeButtonLabel || 'Close') | translate">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+
+      <div [class]="bodyClass">
+        <div class="row align-items-start">
+          <div class="col-4">
+            @if (config.logoUrl) {
+              <img [src]="config.logoUrl" alt="Logo" [class]="logoClass">
+            }
+          </div>
+          <div class="col-8">
+            <h3 [class]="productNameClass">{{ (config.title || 'AboutSkyBayan') | translate }}</h3>
+            <p [class]="versionTextClass">{{ (config.versionLabel || 'Version') | translate }} {{ config.version || '' }}</p>
+            <p [class]="upToDateClass">
+              <fa-icon [icon]="checkCircleIcon" class="text-info me-1"></fa-icon>
+              <small class="text-muted">{{ (config.statusLabel || 'SkyBayanUpToDate') | translate }}</small>
+            </p>
+            <p [class]="copyrightClass">{{ (config.copyright || '') | translate }}</p>
+          </div>
+        </div>
+      </div>
+
+      <div [class]="actionsClass">
+        <button type="button" [class]="actionBtnClass" (click)="openLicense()">{{ (config.licenseButtonLabel || 'LicenseInformation') | translate }}</button>
+        <button type="button" [class]="actionBtnClass" (click)="openReleaseNotes()">{{ (config.releaseNotesButtonLabel || 'ReleaseNotes') | translate }}</button>
+        <button type="button" [class]="actionBtnClass" (click)="openSupport()">{{ (config.supportButtonLabel || 'TechnicalSupport') | translate }}</button>
+      </div>
+    </div>
+  </div>
+}

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

@@ -0,0 +1,68 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faCheckCircle } from '@fortawesome/pro-solid-svg-icons';
+import { TranslatePipe } from '@skysoftware-co/sky-components-ui';
+import { TopMenuWidgetAboutDialogConfig } from '../../top-menu-widget.models';
+
+@Component({
+  selector: 'bayan-core-about-dialog-widget',
+  standalone: true,
+  imports: [CommonModule, FontAwesomeModule, TranslatePipe],
+  templateUrl: './about-dialog-widget.component.html',
+  styleUrls: ['../../top-menu-widget.styles.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BayanCoreAboutDialogWidgetComponent {
+
+  @Input() baseUrl = '';
+  @Input() visible = false;
+  @Input({ required: true }) config!: TopMenuWidgetAboutDialogConfig;
+  @Input() licenseUrl = '';
+  @Input() releaseNotesUrl = '';
+  @Input() supportUrl = 'https://skyits.com/contact';
+
+  // CSS class attributes as @Input with defaults
+  @Input() backdropClass: string = 'about-backdrop';
+  @Input() modalClass: string = 'about-modal';
+  @Input() headerClass: string = 'about-modal-header';
+  @Input() titleClass: string = 'about-modal-title';
+  @Input() closeBtnClass: string = 'about-close-btn';
+  @Input() bodyClass: string = 'about-modal-body';
+  @Input() logoClass: string = 'img-fluid about-logo';
+  @Input() productNameClass: string = 'about-product-name';
+  @Input() versionTextClass: string = 'about-version-text mb-1';
+  @Input() upToDateClass: string = 'about-up-to-date mb-2';
+  @Input() copyrightClass: string = 'about-copyright mb-0';
+  @Input() actionsClass: string = 'about-modal-actions';
+  @Input() actionBtnClass: string = 'about-action-btn';
+
+  @Output() visibleChange = new EventEmitter<boolean>();
+  @Output() licenseClick = new EventEmitter<void>();
+  @Output() releaseNotesClick = new EventEmitter<void>();
+  @Output() supportClick = new EventEmitter<void>();
+
+  readonly checkCircleIcon = faCheckCircle;
+
+  onBackdropClick(event: MouseEvent): void {
+    if ((event.target as HTMLElement).classList.contains('about-backdrop')) {
+      this.closeDialog();
+    }
+  }
+
+  closeDialog(): void {
+    this.visibleChange.emit(false);
+  }
+
+  openLicense() {
+    window.open(this.licenseUrl, '_blank');
+  }
+
+  openReleaseNotes() {
+    window.open(this.releaseNotesUrl, '_blank');
+  }
+
+  openSupport() {
+    window.open(this.supportUrl, '_blank');
+  }
+}

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

@@ -0,0 +1,56 @@
+<dx-popup
+  [visible]="visible"
+  (onHiding)="closeDialog()"
+  [title]="config.title | translate"
+  [showCloseButton]="true"
+  [width]="450"
+  [height]="'auto'"
+  [dragEnabled]="false"
+  [shading]="true"
+  shadingColor="rgba(0,0,0,0.4)">
+  <div *dxTemplate="let data of 'content'">
+    <dx-form
+      #changePasswordForm
+      [formData]="formData"
+      labelLocation="top"
+      [showColonAfterLabel]="false"
+      class="mb-3 mx-2">
+      <dxi-item
+        dataField="currentPassword"
+        editorType="dxTextBox"
+        [editorOptions]="getCurrentPasswordEditorOptions()">
+        <dxo-label [text]="config.currentPasswordLabel | translate"></dxo-label>
+        <dxi-validation-rule type="required"></dxi-validation-rule>
+      </dxi-item>
+
+      <dxi-item
+        dataField="newPassword"
+        editorType="dxTextBox"
+        [editorOptions]="getNewPasswordEditorOptions()">
+        <dxo-label [text]="config.newPasswordLabel | translate"></dxo-label>
+        <dxi-validation-rule type="required"></dxi-validation-rule>
+      </dxi-item>
+
+      <dxi-item
+        dataField="confirmNewPassword"
+        editorType="dxTextBox"
+        [editorOptions]="getConfirmPasswordEditorOptions()">
+        <dxo-label [text]="config.confirmNewPasswordLabel | translate"></dxo-label>
+        <dxi-validation-rule type="required"></dxi-validation-rule>
+        <dxi-validation-rule
+          type="compare"
+          [comparisonTarget]="passwordComparison">
+        </dxi-validation-rule>
+      </dxi-item>
+    </dx-form>
+
+    <sky-footer-actions
+      [primaryButtonText]="config.primaryButtonText | translate"
+      [showSecondaryButton]="false"
+      [isLoading]="isSubmitting"
+      [disabledPrimaryButton]="isSubmitting || !isChangePasswordValid()"
+      (PrimaryButtonClick)="onSaveButtonClick()"
+      [errorMessage]="errorMessage">
+    </sky-footer-actions>
+  </div>
+</dx-popup>

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

@@ -0,0 +1,158 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild, signal, WritableSignal, inject } from '@angular/core';
+import { DxFormComponent, DxFormModule, DxPopupModule } from 'devextreme-angular';
+import { SkyFooterActionsComponent, TranslatePipe } from '@skysoftware-co/sky-components-ui';
+import {
+  TopMenuWidgetChangePasswordDialogConfig,
+  TopMenuWidgetChangePasswordPayload,
+} from '../../top-menu-widget.models';
+import { BayanCoreTopMenuService } from '../../../shared/menu.service';
+import { SkyAlertToastService } from '@skysoftware-co/sky-components-ui';
+// import { SkyAlertType } from '@skysoftware-co/sky-components-ui/lib/constants/constants';
+
+
+@Component({
+  selector: 'bayan-core-change-password-widget',
+  standalone: true,
+  imports: [CommonModule, DxPopupModule, DxFormModule, SkyFooterActionsComponent, TranslatePipe],
+  templateUrl: './change-password-widget.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BayanCoreChangePasswordWidgetComponent {
+  private readonly menuService = inject(BayanCoreTopMenuService);
+  private readonly alertToastService = inject(SkyAlertToastService);
+  private readonly translate = inject(TranslatePipe);
+
+  @Input() baseUrl = '';
+  @Input() visible = false;
+  @Input({ required: true }) config!: TopMenuWidgetChangePasswordDialogConfig;
+  @Input() isSubmitting = false;
+  @Output() visibleChange = new EventEmitter<boolean>();
+
+  @ViewChild('changePasswordForm') changePasswordForm?: DxFormComponent;
+
+  readonly currentPasswordMode = signal<'password' | 'text'>('password');
+  readonly newPasswordMode = signal<'password' | 'text'>('password');
+  readonly confirmNewPasswordMode = signal<'password' | 'text'>('password');
+
+  formData: TopMenuWidgetChangePasswordPayload = {
+    currentPassword: '',
+    newPassword: '',
+    confirmNewPassword: '',
+  };
+  errorMessage: WritableSignal<string> = signal('');
+
+  closeDialog(): void {
+    this.visible = false;
+    this.visibleChange.emit(false);
+    this.resetForm();
+    this.errorMessage.set('');
+  }
+
+  resetForm(): void {
+    this.formData = {
+      currentPassword: '',
+      newPassword: '',
+      confirmNewPassword: '',
+    };
+    this.errorMessage.set('');
+  }
+
+  onSaveButtonClick(): void {
+    const isValid = this.changePasswordForm?.instance.validate().isValid ?? false;
+    if (!isValid) {
+      return;
+    }
+    this.isSubmitting = true;
+    this.menuService.changePassword(this.baseUrl, {
+        CurrentPassword: this.formData.currentPassword,
+        NewPassword: this.formData.newPassword
+      }).subscribe({
+      next: () => {
+        this.isSubmitting = false;
+        this.closeDialog();
+        this.showAlert('PasswordChangedSuccessfully');
+      },
+      error: (e: any) => {
+        this.isSubmitting = false;
+        this.errorMessage.set(this.translate.transform("FailedToChangePassword"));
+        // Optionally show error notification here
+      }
+    });
+  }
+  togglePasswordMode(field: 'currentPasswordMode' | 'newPasswordMode' | 'confirmNewPasswordMode'): void {
+    const current = this[field]();
+    this[field].set(current === 'text' ? 'password' : 'text');
+  }
+
+  updateField(field: keyof TopMenuWidgetChangePasswordPayload, value: string): void {
+    this.formData = {
+      ...this.formData,
+      [field]: value,
+    };
+  }
+
+  isChangePasswordValid(): boolean {
+    return !!this.formData.currentPassword && !!this.formData.newPassword && !!this.formData.confirmNewPassword && this.formData.newPassword === this.formData.confirmNewPassword;
+  }
+
+  getCurrentPasswordEditorOptions(): object {
+    return {
+      maxLength: 256,
+      disabled: this.isSubmitting,
+      mode: this.currentPasswordMode(),
+      onValueChanged: (event: { value?: string }) => this.updateField('currentPassword', event.value ?? ''),
+      buttons: [{
+        name: 'password',
+        location: 'after',
+        options: {
+          stylingMode: 'text',
+          icon: this.currentPasswordMode() === 'text' ? 'eyeopen' : 'eyeclose',
+          onClick: () => this.togglePasswordMode('currentPasswordMode'),
+        },
+      }],
+    };
+  }
+
+  getNewPasswordEditorOptions(): object {
+    return {
+      maxLength: 256,
+      disabled: this.isSubmitting,
+      mode: this.newPasswordMode(),
+      onValueChanged: (event: { value?: string }) => this.updateField('newPassword', event.value ?? ''),
+      buttons: [{
+        name: 'password',
+        location: 'after',
+        options: {
+          stylingMode: 'text',
+          icon: this.newPasswordMode() === 'text' ? 'eyeopen' : 'eyeclose',
+          onClick: () => this.togglePasswordMode('newPasswordMode'),
+        },
+      }],
+    };
+  }
+
+  getConfirmPasswordEditorOptions(): object {
+    return {
+      maxLength: 256,
+      disabled: this.isSubmitting,
+      mode: this.confirmNewPasswordMode(),
+      onValueChanged: (event: { value?: string }) => this.updateField('confirmNewPassword', event.value ?? ''),
+      buttons: [{
+        name: 'password',
+        location: 'after',
+        options: {
+          stylingMode: 'text',
+          icon: this.confirmNewPasswordMode() === 'text' ? 'eyeopen' : 'eyeclose',
+          onClick: () => this.togglePasswordMode('confirmNewPasswordMode'),
+        },
+      }],
+    };
+  }
+
+  passwordComparison = (): string => this.formData.newPassword;
+
+  showAlert(message: string, type: string = 'success') {
+    this.alertToastService.toastInformation(message, type as any);
+  }
+}

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

@@ -0,0 +1,39 @@
+<div [class]="searchWrapperClass">
+  <dx-autocomplete
+    #searchAutoComplete
+    [placeholder]="placeholder | translate"
+    [dataSource]="dataSource"
+    valueExpr="menuSubTitle"
+    [searchExpr]="['menuSubTitle']"
+    [showClearButton]="false"
+    [showDropDownButton]="false"
+    [searchMode]="searchMode"
+    [width]="'100%'"
+    [stylingMode]="stylingMode"
+    [wrapItemText]="true"
+    [searchTimeout]="100"
+    (onInput)="onInput($event)"
+    (onEnterKey)="onEnterKey($event)">
+    <div class="w-100" *dxTemplate="let item of 'item'">
+      <a
+        [class]="searchItemClass"
+        href="{{item.MenuUrl}}" >
+        <div [class]="searchItemTitleClass">
+          <fa-icon [icon]="getIconForClass(item.iconClass)" [class]="iconClass"></fa-icon>
+          @if (item.isTranslatable) {
+            {{ item.menuTitle | translate }}
+          } @else {
+            {{ item.menuTitle }}
+          }
+        </div>
+        <div [class]="searchItemSubtitleClass">
+          @if (item.isTranslatable) {
+            {{ item.menuSubTitle | translate }}
+          } @else {
+            {{ item.menuSubTitle }}
+          }
+        </div>
+      </a>
+    </div>
+  </dx-autocomplete>
+</div>