oip-common 0.0.1

package/src/components/top-bar.component.ts

@@ -0,0 +1,147 @@
+import { Component, inject } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { StyleClassModule } from 'primeng/styleclass';
+import { LayoutService } from '../services/app.layout.service';
+import { AppConfiguratorComponent } from './app-configurator.component';
+import { LogoComponent } from './logo.component';
+import { SecurityService } from '../services/security.service';
+import { TopBarService } from '../services/top-bar.service';
+import { Tab, TabList, Tabs } from 'primeng/tabs';
+import { AvatarModule } from 'primeng/avatar';
+import { UserService } from '../services/user.service';
+import { ButtonModule } from 'primeng/button';
+
+@Component({
+  selector: 'app-topbar',
+  standalone: true,
+  imports: [
+    RouterModule,
+    CommonModule,
+    StyleClassModule,
+    AppConfiguratorComponent,
+    LogoComponent,
+    Tabs,
+    TabList,
+    Tab,
+    AvatarModule,
+    ButtonModule
+  ],
+  template: ` <div class="layout-topbar">
+    <div class="layout-topbar-logo-container">
+      <button class="layout-menu-button layout-topbar-action" (click)="layoutService.onMenuToggle()">
+        <i class="pi pi-bars"></i>
+      </button>
+      <a class="layout-topbar-logo" id="oip-app-topbar-logo-link" routerLink="">
+        <logo [height]="36" [width]="36"></logo>
+        <span>OIP</span>
+      </a>
+    </div>
+
+    @if (securityService.isAdmin && topBarService.topBarItems.length > 0) {
+      <p-tabs class="layout-topbar-tabs ml-2" [(value)]="topBarService.activeId">
+        <p-tablist>
+          @for (tab of topBarService.availableTopBarItems; track tab.id) {
+            <p-tab id="oip-app-topbar-tab-{{ tab.id }}" [value]="tab.id">
+              <i class="pi {{ tab.icon }}"></i>
+              <span class="ml-2">{{ tab.caption }}</span>
+            </p-tab>
+          }
+        </p-tablist>
+      </p-tabs>
+    }
+    <div class="layout-topbar-actions">
+      <div class="layout-config-menu">
+        <p-button
+          class="layout-topbar-action"
+          id="oip-app-topbar-theme-button"
+          severity="secondary"
+          type="button"
+          [rounded]="true"
+          [text]="true"
+          (click)="toggleDarkMode()">
+          <i
+            class="pi"
+            [ngClass]="{
+              'pi-moon': layoutService.isDarkTheme(),
+              'pi-sun': !layoutService.isDarkTheme()
+            }"></i>
+        </p-button>
+        <div class="relative">
+          <p-button
+            class="layout-topbar-action layout-topbar-action-highlight"
+            enterActiveClass="animate-scalein"
+            enterFromClass="hidden"
+            id="oip-app-topbar-palette-button"
+            leaveActiveClass="animate-fadeout"
+            leaveToClass="hidden"
+            pStyleClass="@next"
+            [hideOnOutsideClick]="true"
+            [rounded]="true">
+            <i class="pi pi-palette"></i>
+          </p-button>
+          <app-configurator />
+        </div>
+      </div>
+
+      <button
+        class="layout-topbar-menu-button layout-topbar-action"
+        enterActiveClass="animate-scalein"
+        enterFromClass="hidden"
+        id="oip-app-topbar-menu-expand-button"
+        leaveActiveClass="animate-fadeout"
+        leaveToClass="hidden"
+        pStyleClass="@next"
+        [hideOnOutsideClick]="true">
+        <i class="pi pi-ellipsis-v"></i>
+      </button>
+
+      <div class="layout-topbar-menu hidden lg:block">
+        <div class="layout-topbar-menu-content">
+          <button
+            class="layout-topbar-action"
+            id="oip-app-topbar-logout-button"
+            type="button"
+            (click)="securityService.logout()"
+            (keydown)="logoutKeyDown($event)">
+            <i class="pi pi-sign-out"></i>
+            <span>Logout</span>
+          </button>
+          <button class="layout-topbar-action" routerLink="config">
+            <p-avatar
+              class="p-link flex align-items-center"
+              id="oip-app-topbar-user-avatar"
+              shape="circle"
+              size="normal"
+              [image]="userService.photoLoaded ? userService.photo : null"
+              >{{ !userService.photoLoaded ? userService.shortLabel : null }}
+            </p-avatar>
+            <span class="ml-2">Profile</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>`
+})
+export class AppTopbar {
+  items!: MenuItem[];
+  securityService = inject(SecurityService);
+  topBarService = inject(TopBarService);
+  userService = inject(UserService);
+
+  constructor(public layoutService: LayoutService) {}
+
+  toggleDarkMode() {
+    this.layoutService.layoutConfig.update((state) => ({
+      ...state,
+      darkTheme: !state.darkTheme
+    }));
+  }
+
+  logoutKeyDown($event: KeyboardEvent) {
+    if ($event.key === 'Enter') {
+      this.securityService.logout();
+    }
+  }
+}

package/src/dtos/context-menu-item.dto.ts

@@ -0,0 +1,23 @@
+import { IsActiveMatchOptions, Params, QueryParamsHandling } from '@angular/router';
+
+export interface ContextMenuItemDto {
+  url: any;
+  class: string | string[] | Set<string> | { [p: string]: any } | null | undefined;
+  command: any;
+  disabled: boolean;
+  fragment: string | undefined;
+  icon: string | string[] | Set<string> | { [p: string]: any } | null | undefined;
+  items: ContextMenuItemDto[];
+  label: string;
+  preserveFragment: unknown;
+  queryParamsHandling: QueryParamsHandling | null | undefined;
+  routerLink: string;
+  routerLinkActiveOptions: { exact: boolean } | IsActiveMatchOptions;
+  visible: boolean;
+  skipLocationChange: unknown;
+  queryParams: Params | null | undefined;
+  target: string;
+  state: { [p: string]: any } | undefined;
+  replaceUrl: unknown;
+  badgeClass: string;
+}

package/src/dtos/edit-module-instance.dto.ts

@@ -0,0 +1,8 @@
+export interface EditModuleInstanceDto {
+  moduleInstanceId: number;
+  moduleId: number;
+  parentId: number;
+  label: string;
+  icon: string;
+  viewRoles: string[];
+}

package/src/dtos/no-settings.dto.ts

@@ -0,0 +1,4 @@
+/**
+ * A data transfer object indicating the absence of settings.
+ */
+export interface NoSettingsDto {}

package/src/dtos/put-security.dto.ts

@@ -0,0 +1,6 @@
+import { SecurityDto } from './security.dto';
+
+export interface PutSecurityDto {
+  id: number;
+  securities: SecurityDto[];
+}

package/src/dtos/security.dto.ts

@@ -0,0 +1,6 @@
+export interface SecurityDto {
+  code: string;
+  name: string;
+  description: string;
+  roles: string[];
+}

package/src/dtos/top-bar.dto.ts

@@ -0,0 +1,13 @@
+// TopBarDto interface
+export interface TopBarDto {
+  // Identifier of item
+  id: 'content' | 'settings' | 'security';
+  // Icon from prime icon
+  icon: string;
+  // Caption
+  caption: string;
+  // Claims from SSO
+  claims?: string[];
+  // Method from module call when index toolbar change
+  click?(): void;
+}

package/src/events/menu-change.event.ts

@@ -0,0 +1,23 @@
+import { ContextMenuItemDto } from '../dtos/context-menu-item.dto';
+
+/**
+ * Represents an event triggered when a menu item is clicked.
+ * @interface MenuChangeEvent
+ * @class
+ */
+export interface MenuChangeEvent {
+  /**
+   * A string representing a key, used for identification or access.
+   */
+  key: string;
+  /**
+   * Indicates whether a route event has occurred.
+   * @type {boolean}
+   */
+  routeEvent?: boolean;
+  /**
+   * Represents a single item within a context menu.  Contains data necessary to display the item
+   * and execute its associated action.
+   */
+  item: ContextMenuItemDto;
+}

package/src/helpers/date.helper.ts

@@ -0,0 +1,94 @@
+/**
+ * Convert Date to string in format 2022-02-22
+ * @param date
+ */
+export function dateToString(date: Date): string {
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+
+  return `${year}-${month}-${day}`;
+}
+
+/**
+ * Convert string in format 2022-02-22 to Date
+ * @param date
+ */
+export function stringToDate(date: string): Date {
+  const dateParts = date.split('-');
+  const day = parseInt(dateParts[2], 10);
+  const month = parseInt(dateParts[1], 10) - 1;
+  const year = parseInt(dateParts[0], 10);
+
+  return new Date(year, month, day);
+}
+
+/**
+ * Add days to date
+ * @param date
+ * @param days
+ */
+export function addDays(date: Date, days: number): Date {
+  const clonedDate = structuredClone(date);
+  clonedDate.setDate(clonedDate.getDate() + days);
+  return clonedDate;
+}
+
+/**
+ * Get today's date
+ * @param date
+ */
+export function getTodayDate(): Date {
+  const date = new Date();
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+/* Convert dateformat from DatePipe to PrimeNG*/
+export function convertToPrimeNgDateFormat(dateformat: string): string {
+  switch (dateformat) {
+    case 'dd.MM.yyyy':
+      return 'dd.mm.yy';
+    case 'dd.MM.yy':
+      return 'dd.mm.y';
+    case 'yyyy-MM-dd':
+      return 'yy-mm-dd';
+    case 'dd.MMM.yyyy':
+      return 'dd.M.yy';
+    default:
+      console.error(`Failed to convert format: ${dateformat}`);
+  }
+}
+
+/**
+ * Преобразовать все свойства объекта со строковыми датами в даты
+ * @param obj
+ */
+export function restoreDates(obj: any) {
+  if (obj === null || typeof obj !== 'object') return obj;
+
+  if (Array.isArray(obj)) {
+    return obj.map((item) => restoreDates(item));
+  }
+
+  const result = {};
+  for (const key in obj) {
+    const value = obj[key];
+
+    if (typeof value === 'string' && isIsoDate(value)) {
+      result[key] = new Date(value);
+    } else if (typeof value === 'object' && value !== null && !(value instanceof Date)) {
+      result[key] = restoreDates(value);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+
+/**
+ * Проверить, является ли строка датой в ISO формате
+ * @param str
+ */
+export function isIsoDate(str: string) {
+  return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?Z$/.test(str);
+}

package/src/intercepts/i18n-intercept.service.ts

@@ -0,0 +1,13 @@
+import { inject } from '@angular/core';
+import { HttpInterceptorFn } from '@angular/common/http';
+import { LayoutService } from '../services/app.layout.service';
+
+export const langIntercept: HttpInterceptorFn = (req, next) => {
+  const layoutService = inject(LayoutService);
+  const lang = layoutService.language() ? layoutService.language() : 'en';
+  const httpHeaders = req.headers.set('Accept-language', lang);
+  const authReq = req.clone({
+    headers: httpHeaders
+  });
+  return next(authReq);
+};

package/src/modules/http-loader.factory.ts

@@ -0,0 +1,40 @@
+import { HttpClient } from '@angular/common/http';
+import { map, Observable } from 'rxjs';
+import { OpenIdConfiguration, StsConfigHttpLoader } from 'angular-auth-oidc-client';
+import { GetKeycloakClientSettingsResponse } from '../api/data-contracts';
+
+/**
+ * Load keycloak settings from backend and save to sessionStorage
+ * @param httpClient
+ * @returns StsConfigHttpLoader
+ */
+export const httpLoaderAuthFactory = (httpClient: HttpClient) => {
+  const KEYCLOAK_SETTINGS_KEY = 'keycloak-client-settings';
+  const settingsStings = sessionStorage.getItem(KEYCLOAK_SETTINGS_KEY);
+  if (settingsStings) {
+    const config$ = new Observable<GetKeycloakClientSettingsResponse>((subscribe) => {
+      subscribe.next(JSON.parse(settingsStings));
+    });
+    return new StsConfigHttpLoader(config$);
+  } else {
+    const config$ = httpClient.get<GetKeycloakClientSettingsResponse>(`api/security/get-keycloak-client-settings`).pipe(
+      map((config: GetKeycloakClientSettingsResponse) => {
+        const authConfig: OpenIdConfiguration = {
+          authority: config.authority,
+          redirectUrl: window.location.origin,
+          postLogoutRedirectUri: window.location.origin,
+          clientId: config.clientId,
+          scope: config.scope,
+          responseType: config.responseType,
+          useRefreshToken: config.useRefreshToken,
+          silentRenew: config.silentRenew,
+          logLevel: config.logLevel,
+          secureRoutes: config.secureRoutes
+        };
+        sessionStorage.setItem(KEYCLOAK_SETTINGS_KEY, JSON.stringify(authConfig));
+        return authConfig;
+      })
+    );
+    return new StsConfigHttpLoader(config$);
+  }
+};

package/src/modules/secure.pipe.ts

@@ -0,0 +1,19 @@
+import { inject, Pipe, PipeTransform } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { map, Observable } from 'rxjs';
+
+@Pipe({
+  standalone: true,
+  name: 'secure'
+})
+export class SecurePipe implements PipeTransform {
+  private readonly http = inject(HttpClient);
+  private readonly sanitizer = inject(DomSanitizer);
+
+  transform(url: any): Observable<SafeUrl> {
+    return this.http
+      .get(url, { responseType: 'blob' })
+      .pipe(map((val) => this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val))));
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,42 @@
+// Components
+export * from './components/base-module.component';
+export * from './components/security.component';
+export * from './components/top-bar.component';
+export * from './components/footer.component';
+export * from './components/menu/menu.component';
+export * from './components/app.layout.component';
+export * from './components/sidebar.component';
+export * from './components/logo.component';
+export * from './components/notfound.component';
+export * from './components/auth/unauthorized/unauthorized.component';
+export * from './components/auth/error/error.component';
+export * from './components/profile.component';
+export { ConfigComponent } from './components/config.component';
+export * from './components/db-migration.component';
+export { AppModulesComponent } from './components/app-modules.component';
+
+// Dtos
+export * from './dtos/top-bar.dto';
+export * from './dtos/security.dto';
+export * from './dtos/put-security.dto';
+export * from './dtos/no-settings.dto';
+
+// Services
+export * from './services/base-data.service';
+export * from './services/top-bar.service';
+export * from './services/security.service';
+export * from './services/security-data.service';
+export * from './services/msg.service';
+export * from './services/auth.service';
+export * from './services/app.layout.service';
+export * from './services/app.menu.service';
+export * from './services/user.service';
+export * from './services/security-storage.service';
+
+// Events
+export * from './events/menu-change.event';
+
+// other
+export { langIntercept } from './intercepts/i18n-intercept.service';
+export { SecurePipe } from './modules/secure.pipe';
+export { httpLoaderAuthFactory } from './modules/http-loader.factory';

package/src/services/app-title.service.ts

@@ -0,0 +1,22 @@
+import { inject, Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { Title } from '@angular/platform-browser';
+
+/**
+ * Service to manage the application title.
+ */
+@Injectable({ providedIn: 'root' })
+export class AppTitleService {
+  private readonly title = inject(Title);
+  private titleSubject = new BehaviorSubject<string>('');
+  public title$ = this.titleSubject.asObservable();
+
+  /**
+   * Set the title of the current HTML document.
+   * @param newTitle
+   */
+  setTitle(newTitle: string): void {
+    this.title.setTitle(newTitle);
+    this.titleSubject.next(newTitle);
+  }
+}