oip-common 0.0.6 → 0.0.7

package/src/services/app.layout.service.ts

@@ -0,0 +1,236 @@
+import { Injectable, effect, signal, computed } from '@angular/core';
+import { Subject } from 'rxjs';
+import { convertToPrimeNgDateFormat } from '../helpers/date.helper';
+
+export interface AppConfig {
+  preset?: string;
+  primary?: string;
+  surface?: string | null;
+  darkTheme?: boolean;
+  menuMode?: string;
+  language?: string;
+  dateFormat: string;
+  timeFormat: string;
+  dateTimeFormat: string;
+  timeZone: string;
+}
+
+interface LayoutState {
+  staticMenuDesktopInactive?: boolean;
+  overlayMenuActive?: boolean;
+  configSidebarVisible?: boolean;
+  staticMenuMobileActive?: boolean;
+  menuHoverActive?: boolean;
+}
+
+interface MenuChangeEvent {
+  key: string;
+  routeEvent?: boolean;
+}
+
+@Injectable({ providedIn: 'root' })
+export class LayoutService {
+  _config: AppConfig = this.getAppConfigFromStorage();
+
+  _state: LayoutState = {
+    staticMenuDesktopInactive: false,
+    overlayMenuActive: false,
+    configSidebarVisible: false,
+    staticMenuMobileActive: false,
+    menuHoverActive: false
+  };
+
+  layoutConfig = signal<AppConfig>(this._config);
+
+  layoutState = signal<LayoutState>(this._state);
+
+  private readonly configUpdate = new Subject<AppConfig>();
+
+  private readonly overlayOpen = new Subject<any>();
+
+  private readonly menuSource = new Subject<MenuChangeEvent>();
+
+  private readonly resetSource = new Subject();
+
+  menuSource$ = this.menuSource.asObservable();
+
+  resetSource$ = this.resetSource.asObservable();
+
+  configUpdate$ = this.configUpdate.asObservable();
+
+  overlayOpen$ = this.overlayOpen.asObservable();
+
+  theme = computed(() => (this.layoutConfig()?.darkTheme ? 'light' : 'dark'));
+
+  isSidebarActive = computed(() => this.layoutState().overlayMenuActive || this.layoutState().staticMenuMobileActive);
+
+  isDarkTheme = computed(() => this.layoutConfig().darkTheme);
+
+  getPrimary = computed(() => this.layoutConfig().primary);
+
+  getSurface = computed(() => this.layoutConfig().surface);
+
+  isOverlay = computed(() => this.layoutConfig().menuMode === 'overlay');
+
+  language = computed(() => this.layoutConfig().language);
+
+  dateFormat = computed(() => this.layoutConfig().dateFormat);
+
+  primeNgDateFormat = computed(() => convertToPrimeNgDateFormat(this.layoutConfig().dateFormat));
+
+  timeFormat = computed(() => this.layoutConfig().timeFormat);
+
+  dateTimeFormat = computed(() => `${this.layoutConfig().dateFormat} ${this.layoutConfig().timeFormat}`);
+
+  monthFormat = computed(() => {
+    const reDay = /d+/i;
+    const reDelimeter = /^[^\w]|[^\w]$|([^\w])\1+/;
+    const ngDateFormat = convertToPrimeNgDateFormat(this.layoutConfig().dateFormat);
+    const ngDate = ngDateFormat.replace(reDay, '');
+    const dateGroups = ngDate.match(reDelimeter);
+    if (Array.isArray(dateGroups) && dateGroups.length > 1) {
+      return dateGroups[1] !== undefined
+        ? ngDate.replace(dateGroups[0], '')
+        : ngDate.startsWith(dateGroups[0])
+          ? ngDate.substring(1)
+          : ngDate.substring(0, ngDate.length - 1);
+    }
+    return ngDateFormat;
+  });
+
+  timeZone = computed(() => this.layoutConfig().timeZone);
+
+  transitionComplete = signal<boolean>(false);
+
+  private initialized = false;
+
+  constructor() {
+    effect(() => {
+      const config = this.layoutConfig();
+      if (config) {
+        this.onConfigUpdate();
+      }
+    });
+
+    effect(() => {
+      const config = this.layoutConfig();
+
+      if (!this.initialized || !config) {
+        this.initialized = true;
+        return;
+      }
+
+      this.handleDarkModeTransition(config);
+    });
+  }
+
+  /**
+   * Get application settings from browser storage
+   * @returns AppConfig
+   */
+  private getAppConfigFromStorage(): AppConfig {
+    const appConfigUiString = localStorage.getItem('layoutConfig');
+    if (appConfigUiString != null) {
+      const config = JSON.parse(appConfigUiString) as AppConfig;
+      config.timeZone ??= Intl.DateTimeFormat().resolvedOptions().timeZone;
+      return config;
+    }
+    return {
+      preset: 'Aura',
+      primary: 'emerald',
+      surface: null,
+      darkTheme: false,
+      menuMode: 'static',
+      language: 'ru',
+      dateFormat: 'yyyy-MM-dd',
+      timeFormat: 'HH:mm:ss',
+      dateTimeFormat: 'yyyy-MM-dd HH:mm:ss',
+      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+    };
+  }
+
+  private handleDarkModeTransition(config: AppConfig): void {
+    if ((document as any).startViewTransition) {
+      this.startViewTransition(config);
+    } else {
+      this.toggleDarkMode(config);
+      this.onTransitionEnd();
+    }
+  }
+
+  private startViewTransition(config: AppConfig): void {
+    const transition = (document as any).startViewTransition(() => {
+      this.toggleDarkMode(config);
+    });
+
+    transition.ready
+      .then(() => {
+        this.onTransitionEnd();
+      })
+      .catch(() => {});
+  }
+
+  toggleDarkMode(config?: AppConfig): void {
+    const _config = config || this.layoutConfig();
+    if (_config.darkTheme) {
+      document.documentElement.classList.add('app-dark');
+    } else {
+      document.documentElement.classList.remove('app-dark');
+    }
+  }
+
+  private onTransitionEnd() {
+    this.transitionComplete.set(true);
+    setTimeout(() => {
+      this.transitionComplete.set(false);
+    });
+  }
+
+  onMenuToggle() {
+    if (this.isOverlay()) {
+      this.layoutState.update((prev) => ({ ...prev, overlayMenuActive: !this.layoutState().overlayMenuActive }));
+
+      if (this.layoutState().overlayMenuActive) {
+        this.overlayOpen.next(null);
+      }
+    }
+
+    if (this.isDesktop()) {
+      this.layoutState.update((prev) => ({
+        ...prev,
+        staticMenuDesktopInactive: !this.layoutState().staticMenuDesktopInactive
+      }));
+    } else {
+      this.layoutState.update((prev) => ({
+        ...prev,
+        staticMenuMobileActive: !this.layoutState().staticMenuMobileActive
+      }));
+
+      if (this.layoutState().staticMenuMobileActive) {
+        this.overlayOpen.next(null);
+      }
+    }
+  }
+
+  isDesktop() {
+    return window.innerWidth > 991;
+  }
+
+  isMobile() {
+    return !this.isDesktop();
+  }
+
+  onConfigUpdate() {
+    this._config = { ...this.layoutConfig() };
+    this.configUpdate.next(this.layoutConfig());
+    localStorage.setItem('layoutConfig', JSON.stringify(this.layoutConfig()));
+  }
+
+  onMenuStateChange(event: MenuChangeEvent) {
+    this.menuSource.next(event);
+  }
+
+  reset() {
+    this.resetSource.next(true);
+  }
+}

package/src/services/app.menu.service.ts

@@ -0,0 +1,64 @@
+import { inject, Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { BaseDataService } from './base-data.service';
+import { MenuChangeEvent } from '../events/menu-change.event';
+import { EditModuleInstanceDto } from '../dtos/edit-module-instance.dto';
+import { Menu } from '../api/Menu';
+import { AppTitleService } from './app-title.service';
+import { AddModuleInstanceDto, ModuleInstanceDto } from '../api/data-contracts';
+
+@Injectable()
+export class MenuService extends BaseDataService {
+  private readonly menuSource = new Subject<MenuChangeEvent>();
+  private readonly resetSource = new Subject();
+  private readonly titleService = inject(AppTitleService);
+  private readonly menuDataService = inject(Menu);
+  menuSource$ = this.menuSource.asObservable();
+  resetSource$ = this.resetSource.asObservable();
+  contextMenuItem: any;
+
+  public menu: ModuleInstanceDto[] = [];
+  public adminMode: boolean = false;
+
+  async loadMenu() {
+    this.menu = this.adminMode ? await this.getAdminMenu() : await this.getMenu();
+  }
+
+  /**
+   * Handles changes in the menu state.
+   * @param {MenuChangeEvent} event - The event containing information about the menu state change.
+   * @return {void}
+   */
+  onMenuStateChange(event: MenuChangeEvent): void {
+    this.menuSource.next(event);
+    this.titleService.setTitle(event.item.label);
+  }
+
+  reset() {
+    this.resetSource.next(true);
+  }
+
+  getMenu() {
+    return this.menuDataService.menuGet();
+  }
+
+  getAdminMenu() {
+    return this.menuDataService.menuGetAdminMenu();
+  }
+
+  getModules() {
+    return this.menuDataService.menuGetModules();
+  }
+
+  addModuleInstance(addModuleInstance: AddModuleInstanceDto) {
+    return this.menuDataService.menuAddModuleInstance(addModuleInstance as AddModuleInstanceDto);
+  }
+
+  deleteItem(moduleInstanceId: number) {
+    return this.sendRequest(this.baseUrl + 'api/menu/delete-module-instance?id=' + moduleInstanceId, 'DELETE');
+  }
+
+  editModuleInstance(item: EditModuleInstanceDto) {
+    return this.sendRequest(this.baseUrl + 'api/menu/edit-module-instance', 'POST', item);
+  }
+}

package/src/services/auth.service.ts

@@ -0,0 +1,58 @@
+import { inject, Injectable } from '@angular/core';
+import { Router, UrlTree } from '@angular/router';
+import { catchError, map, switchMap } from 'rxjs/operators';
+import { Observable, combineLatest, of } from 'rxjs';
+import { SecurityService } from './security.service';
+
+/**
+ * A route guard that ensures the user is authenticated and has a valid access token.
+ * If the access token is expired, it attempts to refresh the session.
+ * If authentication fails or refresh is unsuccessful, redirects to the unauthorized page.
+ */
+@Injectable()
+export class AuthGuardService {
+  private readonly oidcSecurityService = inject(SecurityService);
+  private readonly router = inject(Router);
+
+  /**
+   * Checks whether the route can be activated.
+   * - Returns `true` if the user is authenticated and the token is valid.
+   * - Attempts to refresh the token if expired.
+   * - Redirects to `/unauthorized` if not authenticated or refresh fails.
+   *
+   * @returns {Observable<boolean | UrlTree>} A stream resolving to true (allow), or UrlTree (redirect).
+   */
+  canActivate(): Observable<boolean | UrlTree> {
+    return combineLatest([this.oidcSecurityService.isAuthenticated(), this.oidcSecurityService.isTokenExpired()]).pipe(
+      switchMap(([authenticated, tokenExpired]) => {
+        if (!authenticated) {
+          return of(this.router.parseUrl('/unauthorized'));
+        }
+        if (!tokenExpired) {
+          return of(true);
+        }
+
+        // Token is expired; attempt to refresh
+        return this.tryRefreshToken();
+      })
+    );
+  }
+
+  /**
+   * Attempts to refresh the session using the refresh token.
+   * If successful, allows route activation; otherwise, redirects to `/unauthorized`.
+   *
+   * @returns {boolean | UrlTree} A stream resolving to true or redirect UrlTree.
+   */
+  tryRefreshToken(): Observable<boolean | UrlTree> {
+    return this.oidcSecurityService.forceRefreshSession().pipe(
+      map((refreshSuccess) => {
+        return refreshSuccess ? true : this.router.parseUrl('/unauthorized');
+      }),
+      catchError((err) => {
+        console.warn(err);
+        return of(this.router.parseUrl('/unauthorized'));
+      })
+    );
+  }
+}

package/src/services/base-data.service.ts

@@ -0,0 +1,74 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { lastValueFrom, Observable } from 'rxjs';
+
+/**
+ * BaseDataService provides a unified interface for sending HTTP requests
+ * using Angular's HttpClient. It supports standard HTTP methods and automatic
+ * credential handling.
+ */
+@Injectable()
+export class BaseDataService {
+  private readonly http = inject(HttpClient);
+
+  /**
+   * Gets the base URL of the application from the HTML <base> tag.
+   */
+  get baseUrl(): string {
+    return document.getElementsByTagName('base')[0].href;
+  }
+
+  /**
+   * Sends an HTTP request with the specified method and data.
+   *
+   * @template TResponse - Expected response type.
+   * @param url - The target URL for the HTTP request.
+   * @param method - The HTTP method to use (GET, PUT, POST, DELETE). Default is 'GET'.
+   * @param data - An object containing request parameters or payload.
+   * @returns A promise that resolves to the response of type TResponse.
+   */
+  sendRequest<TResponse>(
+    url: string,
+    method: 'GET' | 'PUT' | 'POST' | 'DELETE' = 'GET',
+    data: any = {}
+  ): Promise<TResponse> {
+    const httpOptions = { withCredentials: true };
+    let result: Observable<TResponse>;
+
+    switch (method) {
+      case 'GET':
+        result = this.http.get<TResponse>(url, { params: data });
+        break;
+      case 'PUT':
+        result = this.http.put<TResponse>(url, data, httpOptions);
+        break;
+      case 'POST':
+        result = this.http.post<TResponse>(url, data, httpOptions);
+        break;
+      case 'DELETE':
+        result = this.http.request<TResponse>('DELETE', url, {
+          body: data,
+          headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+          withCredentials: true
+        });
+        break;
+    }
+
+    return lastValueFrom(result);
+  }
+
+  /**
+   * Sends a GET request and retrieves a response as a Blob.
+   *
+   * @param url - The target URL for the GET request.
+   * @returns A promise that resolves to a Object response.
+   */
+  getBlob(url: string): Promise<object> {
+    const httpOptions = {
+      responseType: 'blob' as 'json',
+      withCredentials: true
+    };
+    const result = this.http.get(url, httpOptions);
+    return lastValueFrom(result);
+  }
+}

package/src/services/l10n.service.ts

@@ -0,0 +1,71 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { TranslateService } from '@ngx-translate/core';
+import { lastValueFrom } from 'rxjs';
+
+/**
+ * Service for managing translation loading in the application
+ */
+@Injectable({ providedIn: 'root' }) // Provided at root level for singleton usage
+export class L10nService {
+  private loadedTranslations: Set<string> = new Set();
+  private httpClient = inject(HttpClient);
+  private translateService = inject(TranslateService);
+
+  /**
+   * Loads translations for a specific component
+   * @param component - Name of the component to load translations for
+   */
+  async loadComponentTranslations(component: string): Promise<void> {
+    const lang = this.translateService.currentLang;
+    await this.loadTranslations(component, lang);
+  }
+
+  /**
+   * Gets the translated value of a key (or an array of keys)
+   * @returns the translated key, or an object of translated keys
+   */
+  public async get(key: string) {
+    await this.loadComponentTranslations(key);
+    return this.translateService.get(key);
+  }
+
+  /**
+   * Internal method to load translations from JSON files
+   * @param component - Component or translation namespace
+   * @param lang - Language code to load translations for
+   */
+  private async loadTranslations(component: string, lang: string): Promise<void> {
+    // Create unique key for this component-language combination
+    const key = `${component}.${lang}`;
+
+    // Skip if translations are already loaded
+    if (this.loadedTranslations.has(key)) {
+      return;
+    }
+
+    try {
+      // Load translation file from assets
+      const translations = await lastValueFrom(this.httpClient.get(`./assets/i18n/${component}.${lang}.json`));
+
+      // Get existing translations for the language
+      const current = this.translateService.translations[lang] || {};
+
+      // Merge new translations with existing ones
+      this.translateService.setTranslation(lang, { ...current, ...translations }, true);
+
+      // Mark these translations as loaded
+      this.loadedTranslations.add(key);
+    } catch (e) {
+      console.warn(`No translations found for ${component}.${lang}.json`);
+      console.error(e);
+    }
+  }
+
+  /**
+   * Changes the lang currently used
+   */
+  use(selectedLanguage: string) {
+    this.translateService.use(selectedLanguage);
+  }
+}

package/src/services/msg.service.ts

@@ -0,0 +1,76 @@
+import { inject, Injectable } from '@angular/core';
+import { MessageService } from 'primeng/api';
+import { HttpErrorResponse } from '@angular/common/http';
+import { ToastMessageOptions } from 'primeng/api';
+import { TranslateService } from '@ngx-translate/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MsgService {
+  protected readonly messageService: MessageService = inject(MessageService);
+  private readonly translate = inject(TranslateService);
+  private readonly lifetime: number = 2000;
+
+  add(msg: ToastMessageOptions) {
+    this.messageService.add(msg);
+  }
+
+  success(detail: any, summary: any = this.translate.instant('msgService.success'), life: number = this.lifetime) {
+    this.messageService.add({
+      severity: 'success',
+      summary: summary,
+      detail: detail,
+      life: life
+    });
+  }
+
+  info(detail: any, summary: any = this.translate.instant('msgService.info'), life: number = this.lifetime) {
+    this.messageService.add({
+      severity: 'info',
+      summary: summary,
+      detail: detail,
+      life: life
+    });
+  }
+
+  warn(detail: any, summary: any = this.translate.instant('msgService.warn'), life: number = this.lifetime) {
+    this.messageService.add({
+      severity: 'warn',
+      summary: summary,
+      detail: detail,
+      life: life
+    });
+  }
+
+  error(detail: any, summary: any = this.translate.instant('msgService.error'), life: number = this.lifetime) {
+    if (detail instanceof HttpErrorResponse) {
+      summary = `Error: ${detail.status} ${detail.statusText}`;
+      detail = `${detail.name} \r\n ${detail.message}`;
+    }
+    this.messageService.add({
+      severity: 'error',
+      summary: summary,
+      detail: detail.toString(),
+      life: life
+    });
+  }
+
+  contrast(detail: any, summary: any = this.translate.instant('msgService.error'), life: number = this.lifetime) {
+    this.messageService.add({
+      severity: 'contrast',
+      summary: summary,
+      detail: detail,
+      life: life
+    });
+  }
+
+  secondary(detail: any, summary: any = this.translate.instant('msgService.secondary'), life: number = this.lifetime) {
+    this.messageService.add({
+      severity: 'secondary',
+      summary: summary,
+      detail: detail,
+      life: life
+    });
+  }
+}

package/src/services/security-data.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { BaseDataService } from './base-data.service';
+import { SecurityDto } from '../dtos/security.dto';
+import { PutSecurityDto } from '../dtos/put-security.dto';
+
+@Injectable()
+export class SecurityDataService extends BaseDataService {
+  getSecurity(controller: string, id: number) {
+    return this.sendRequest<SecurityDto[]>(this.baseUrl + `api/${controller}/get-security?id=${id}`);
+  }
+
+  saveSecurity(controller: string, request: PutSecurityDto) {
+    return this.sendRequest<any>(this.baseUrl + `api/${controller}/put-security`, 'PUT', request);
+  }
+
+  getRealmRoles() {
+    return this.sendRequest<string[]>(this.baseUrl + `api/security/get-realm-roles`);
+  }
+}

package/src/services/security-storage.service.ts

@@ -0,0 +1,21 @@
+import { AbstractSecurityStorage } from 'angular-auth-oidc-client';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class SecurityStorageService implements AbstractSecurityStorage {
+  read(key: string) {
+    return localStorage.getItem(key);
+  }
+
+  write(key: string, value: any): void {
+    localStorage.setItem(key, value);
+  }
+
+  remove(key: string): void {
+    localStorage.removeItem(key);
+  }
+
+  clear(): void {
+    localStorage.clear();
+  }
+}