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

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

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

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

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

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

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

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

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

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