http-request-manager 18.15.33 → 18.15.34

package/src/lib/http-request-services-demo/request-manager-ws-demo/services/notification-service-demo.service.ts

@@ -0,0 +1,147 @@
+import { Injectable, inject } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { StateServiceDemo } from './state-service-demo.service';
+
+/**
+ * Notification message interface
+ */
+export interface NotificationMessage {
+  id: number;
+  channel: string;
+  created: number;  // epoch seconds
+  user_name: string;
+  sessionId: any;
+  content: any;
+}
+
+/**
+ * NotificationServiceDemo - Notification channel service (MES- prefix channels)
+ *
+ * Handles:
+ * - Creating notification channels
+ * - Subscribing to notifications with date filters
+ * - Sending notifications (persisted to database)
+ * - Receiving real-time and historical notifications
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class NotificationServiceDemo {
+
+  private stateService = inject(StateServiceDemo);
+
+  // Notification channels from state service (in-memory - contains MES- channels from server)
+  notificationChannels$ = this.stateService.notificationChannels$;
+
+  // Today's notification channels from database (channels with data for today)
+  todaysNotificationChannels$ = this.stateService.todaysNotificationChannels$;
+
+  private subscribedNotificationChannelsSubject = new BehaviorSubject<Set<string>>(new Set());
+  subscribedNotificationChannels$ = this.subscribedNotificationChannelsSubject.asObservable();
+
+  // Notification messages from state service
+  notificationMessages$ = this.stateService.notificationMessages$;
+
+  // Latest notification from state service
+  latestNotification$ = this.stateService.latestNotification$;
+
+  // Expose connection status from state service
+  connectionStatus$ = this.stateService.connectionStatus$;
+
+  /**
+   * Create a notification channel
+   * NOTE: MES- prefix is added automatically by HTTPManagerStateService
+   */
+  createNotificationChannel(channel: string) {
+    console.log('📢 createNotificationChannel:', channel);
+    this.stateService.createNotificationChannel(channel);
+  }
+
+  /**
+   * Get all notification channels (in-memory)
+   */
+  getNotificationChannels() {
+    console.log('📢 getNotificationChannels');
+    this.stateService.getNotificationChannels();
+  }
+
+  /**
+   * Get today's notification channels from database
+   * Returns unique channels that have notifications posted today
+   */
+  getTodaysNotificationChannels() {
+    console.log('📢 getTodaysNotificationChannels (from DB)');
+    this.stateService.getTodaysNotificationChannels();
+  }
+
+  /**
+   * Define and load previous day's notification channels from database
+   * Creates channels in memory and broadcasts updated list
+   */
+  definePreviousNotificationChannels() {
+    console.log('📢 definePreviousNotificationChannels');
+    this.stateService.definePreviousNotificationChannels();
+  }
+
+  /**
+   * Subscribe to a notification channel with optional date filter
+   * NOTE: MES- prefix is added automatically by HTTPManagerStateService
+   * @param channel Base channel name (without MES- prefix)
+   * @param options { startEpoch?, endEpoch? }
+   * @param user User info for subscription
+   */
+  subscribeToNotificationChannel(channel: string, options?: { startEpoch?: number; endEpoch?: number }, user?: any) {
+    // Add MES- prefix for local tracking (to match what state service sends)
+    const prefixedChannel = channel.startsWith('MES-') ? channel : `MES-${channel}`;
+    console.log('📢 subscribeToNotificationChannel:', prefixedChannel, options);
+
+    // Add to local subscribed channels immediately for UI feedback
+    const currentSubs = this.subscribedNotificationChannelsSubject.value;
+    currentSubs.add(prefixedChannel);
+    this.subscribedNotificationChannelsSubject.next(new Set(currentSubs));
+
+    // Send subscription request to server (state service adds MES- prefix)
+    this.stateService.subscribeToNotificationChannel(channel, options, user);
+  }
+
+  /**
+   * Unsubscribe from a notification channel
+   * NOTE: MES- prefix is added automatically by HTTPManagerStateService
+   */
+  unsubscribeFromNotificationChannel(channel: string) {
+    // Add MES- prefix for local tracking (to match what state service sends)
+    const prefixedChannel = channel.startsWith('MES-') ? channel : `MES-${channel}`;
+    console.log('📢 unsubscribeFromNotificationChannel:', prefixedChannel);
+
+    // Remove from local subscribed channels immediately for UI feedback
+    const currentSubs = this.subscribedNotificationChannelsSubject.value;
+    currentSubs.delete(prefixedChannel);
+    this.subscribedNotificationChannelsSubject.next(new Set(currentSubs));
+
+    // Send unsubscription request to server (state service adds MES- prefix)
+    this.stateService.unsubscribeFromNotificationChannel(channel);
+  }
+
+  /**
+   * Send a notification to a channel
+   * NOTE: MES- prefix is added automatically by HTTPManagerStateService
+   */
+  sendNotification(channel: string, content: any, user?: any) {
+    const notificationContent = {
+      sessionId: {
+        id: user?.id,
+        ldap: user?.ldap,
+        name: user?.name,
+        email: user?.email,
+        color: user?.color,
+      },
+      ...content
+    };
+
+    console.log('📢 sendNotification:', channel, notificationContent);
+
+    // State service adds MES- prefix
+    this.stateService.sendNotification(channel, notificationContent);
+  }
+
+}

package/src/lib/http-request-services-demo/request-manager-ws-demo/services/state-service-demo.service.ts

@@ -0,0 +1,168 @@
+import { Injectable } from '@angular/core';
+
+import { DatabaseStorage, DataType, RetryOptions } from '../../../models';
+import { HTTPManagerStateService } from '../../../services/request-manager-state-service/http-manager-state.store';
+import { ApiRequest } from '../../../services/request-manager-state-service/models/api-request.model';
+import { OIDCClient } from '../models/oidc-client.model';
+
+/**
+ * StateServiceDemo - Core state management and WebSocket connection service
+ *
+ * Handles:
+ * - WebSocket connection setup
+ * - Base HTTP state management
+ * - Connection status and retry logic
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class StateServiceDemo extends HTTPManagerStateService<any> {
+
+  attempts$ = this.wsRetryAttempts$;
+  nextRetry$ = this.wsNextRetry$;
+
+  constructor() {
+    super(
+      ApiRequest.adapt({
+        server: '',
+        retry: RetryOptions.adapt({
+          times: 3,
+          delay: 1,
+        }),
+        adapter: OIDCClient.adapt,
+      }),
+      DataType.ARRAY,
+      DatabaseStorage.adapt({
+        table: 'ws_demo_data',
+        expiresIn: '5mn',
+      })
+    );
+  }
+
+  /**
+   * Initialize WebSocket connection with server configuration
+   * @param server - Backend server URL
+   * @param wsServer - WebSocket server URL
+   * @param jwtToken - JWT authentication token
+   * @param user - User information
+   * @param path - Path for constructing channel name (e.g., ['ai','tests'])
+   */
+  updateConnection(server: string, wsServer: string, jwtToken: string, user: any, path: (string|number)[] = ['ai','tests']) {
+    // Construct channel name from path: ['ai','tests'] → 'ai/tests'
+    const channelId = path.join('/');
+
+    this.setApiRequestOptions({
+      server,
+      path, // Set the path for HTTP requests
+      retry: RetryOptions.adapt({
+        times: 3,
+        delay: 1,
+      }),
+      adapter: OIDCClient.adapt,
+      ws: {
+        id: channelId,  // Use path-based channel ID instead of hardcoded 'USERS123'
+        wsServer,
+        jwtToken,
+        user,
+        retry: RetryOptions.adapt({
+          times: 10,
+          delay: 5,
+        }),
+      }
+    });
+
+    this.userAction$.subscribe(user => {
+      console.log('User Action:', user);
+    });
+  }
+
+  /**
+   * Get all available channels
+   */
+  override getAllChannels() {
+    this.httpManagerService.getAllChannels();
+  }
+
+  /**
+   * Subscribe to a channel
+   */
+  override subscribeToChannel(channel: string) {
+    super.subscribeToChannel(channel);
+  }
+
+  /**
+   * Unsubscribe from a channel
+   */
+  override unsubscribeFromChannel(channel: string) {
+    super.unsubscribeFromChannel(channel);
+  }
+
+  // =====================
+  // Notification Channel Methods (MES- prefix)
+  // These override methods from HTTPManagerStateService
+  // =====================
+
+  /**
+   * Create a notification channel (MES- prefix)
+   */
+  override createNotificationChannel(channel: string) {
+    super.createNotificationChannel(channel);
+  }
+
+  /**
+   * Get all notification channels list (in-memory)
+   */
+  override getNotificationChannels() {
+    super.getNotificationChannels();
+  }
+
+  /**
+   * Get today's notification channels from database
+   * Returns unique channels that have notifications posted today
+   */
+  override getTodaysNotificationChannels() {
+    super.getTodaysNotificationChannels();
+  }
+
+  /**
+   * Define and load previous day's notification channels from database
+   * Creates channels in memory and broadcasts updated list
+   */
+  definePreviousNotificationChannels() {
+    const options = ApiRequest.adapt({
+      path: ['notifications', 'channels', 'define-previous']
+    });
+
+    this.httpManagerService.postRequest({}, options).subscribe({
+      next: (response: any) => {
+        console.log('📋 Previous day channels loaded:', response);
+        // The server will broadcast updated channel list to all WebSocket clients
+      },
+      error: (error) => {
+        console.error('❌ Failed to load previous day channels:', error);
+      }
+    });
+  }
+
+  /**
+   * Subscribe to notification channel with optional date filters
+   */
+  override subscribeToNotificationChannel(channel: string, options?: { startEpoch?: number; endEpoch?: number }, user?: any) {
+    super.subscribeToNotificationChannel(channel, options, user);
+  }
+
+  /**
+   * Unsubscribe from notification channel
+   */
+  override unsubscribeFromNotificationChannel(channel: string) {
+    super.unsubscribeFromNotificationChannel(channel);
+  }
+
+  /**
+   * Send a notification to a channel
+   */
+  override sendNotification(channel: string, content: any) {
+    super.sendNotification(channel, content);
+  }
+
+}

package/src/lib/http-request-services-demo/request-signals-manager-demo/file-downloader/download-file/download-file.component.html

@@ -0,0 +1,53 @@
+@if (!isPending) {
+  @if (hasError) {
+    <div class="width center-txt" style="margin-bottom: 4px;">
+      <mat-icon color="warn" class="warn-icon">warning</mat-icon>
+    </div>
+  } @else {
+    @if (active) {
+      <div class="container-obj">
+        <div class="centered-obj-div">
+          <mat-progress-spinner
+            color="primary"
+            mode="indeterminate"
+            [diameter]="44"
+          ></mat-progress-spinner>
+        </div>
+      </div>
+    } @else {
+      <button data-tracking="export-btn" mat-icon-button (click)="onAction()" class="icon-button" [disabled]="disabled">
+        <mat-icon class="custom-icon">file_download</mat-icon>
+      </button>
+    }
+  }
+} @else {
+  @if ((progress > 0 && progress < 100)) {
+    <div
+      class="spinner-container"
+      >
+      <div class="spinner-background">
+        {{progress}}%
+      </div>
+      <mat-progress-spinner
+        color="primary"
+        [mode]="mode"
+        [value]="progress"
+        [diameter]="44"
+      ></mat-progress-spinner>
+    </div>
+  } @else {
+    <div class="container-obj">
+      <div class="centered-obj-div">
+        <mat-progress-spinner
+          color="primary"
+          mode="indeterminate"
+          [diameter]="44"
+        ></mat-progress-spinner>
+      </div>
+    </div>
+  }
+}
+
+
+
+

package/src/lib/http-request-services-demo/request-signals-manager-demo/file-downloader/download-file/download-file.component.scss

@@ -0,0 +1,60 @@
+:not(spinner-container).spinner-container {
+  position: relative;
+
+  .spinner-background {
+    position: absolute;
+    width: 44px;
+    height: 44px;
+    font-size: 12px;
+    line-height: 32px;
+    text-align: center;
+    overflow: hidden;
+    border-radius: 50%;
+    border: solid 5px whitesmoke;
+  }
+
+}
+
+.center-txt {
+  align-content: center;
+  text-align: -webkit-center;
+}
+
+.width {
+  width: 48px;
+  height: 48px;
+}
+
+.icon-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  padding: 0;
+}
+
+// .custom-icon {
+//   font-size: 32px;
+//   line-height: 1;
+//   position: relative;
+//   left: -4px;
+// }
+
+.container-obj {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 48px;
+}
+
+.centered-obj-div {
+  text-align: center
+}
+
+// .warn-icon {
+//   position: relative;
+//   top: 6px;
+//   width: 48px;
+// }

package/src/lib/http-request-services-demo/request-signals-manager-demo/file-downloader/download-file/download-file.component.ts

@@ -0,0 +1,72 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
+import { Subscription, timer } from 'rxjs';
+
+@Component({
+    selector: 'app-download-file',
+    templateUrl: './download-file.component.html',
+    styleUrls: ['./download-file.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class DownloadFileComponent implements OnInit {
+
+  private subscriptions = new Subscription();
+
+  @Input() event?: Function;
+  @Input() displayError = 3; // seconds
+  @Input() diameter = 32;
+  @Input() mode: ProgressSpinnerMode = 'determinate';
+  @Input() isPending = false;
+
+  @Input() active = false;
+  @Input() disabled = false;
+
+  @Output() error = new EventEmitter<void>();
+
+  private _progress = 0;
+  @Input() set progress(value: any) {
+    this._progress = value ?? 0;
+  }
+
+  get progress() {
+    return this._progress;
+  }
+
+  private _hasError = false;
+  private errorTimerActive = false;
+
+  @Input() set hasError(value: boolean | any) {
+
+    this._hasError = !!value;
+
+    if (this._hasError && !this.errorTimerActive) {
+      this.errorTimerActive = true;
+      this.active = false;
+      this.error.emit()
+      this.subscriptions.add(
+        timer(this.displayError * 1000)
+        .subscribe((err) => {
+          this._hasError = false;
+          this.errorTimerActive = false;
+        })
+      );
+    }
+
+  }
+
+  get hasError() {
+    return this._hasError;
+  }
+
+  ngOnInit() {}
+
+  onAction() {
+    this.isPending = false
+    if (this.event) this.event()
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe()
+  }
+}

package/src/lib/http-request-services-demo/request-signals-manager-demo/file-downloader/file-download.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DownloadFileComponent } from './download-file/download-file.component';
+import { FileDownloaderComponent } from './file-downloader.component';
+
+import { SpinnerComponent } from './spinner/spinner.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatButtonModule } from '@angular/material/button';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatButtonModule,
+  ],
+  declarations: [
+    SpinnerComponent,
+    DownloadFileComponent,
+    FileDownloaderComponent,
+  ],
+  exports: [
+    FileDownloaderComponent
+  ]
+})
+export class FileDownloaderModule { }

package/src/lib/http-request-services-demo/request-signals-manager-demo/file-downloader/file-downloader.component.html

@@ -0,0 +1,10 @@
+<app-download-file
+  [disabled]="disabled"
+  [displayError]="3"
+  [event]="onDownloadStreaming.bind(this)"
+  [isPending]="(isPending$ | async) || false"
+  [progress]="(progress$ | async)"
+  [hasError]="(error$ | async)"
+  (error)="onError(labels.error)"
+  [active]="active"
+></app-download-file>

package/src/lib/http-request-services-demo/request-signals-manager-demo/file-downloader/file-downloader.component.scss

@@ -0,0 +1,29 @@
+
+$snackBarTextColor: white;
+$snackBarBackgroundNormal: #F44336;
+$snackBarActionColor: white;
+
+.snackBarInfo {
+    background-color: $snackBarBackgroundNormal;
+    color: $snackBarTextColor;
+}
+.mat-simple-snackbar > span {
+    font-weight: bold;
+}
+.mat-simple-snackbar-action {
+    .mat-button {
+        .mat-button-wrapper {
+            color: $snackBarActionColor;
+        }
+    }
+}
+
+.cdk-overlay-pane > .mat-snack-bar-container {
+  width: 100%;
+}
+
+
+.mat-snack-bar-container {
+  max-width: 100% !important;
+  width: 100%;
+}

package/src/lib/http-request-services-demo/request-signals-manager-demo/file-downloader/file-downloader.component.ts

@@ -0,0 +1,100 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { catchError, distinctUntilChanged, finalize } from 'rxjs/operators';
+
+import { ToastColors, ToastDisplay } from 'toast-message-display';
+
+import { DownloadLabels } from './models/download-labels-model';
+import { HTTPManagerService } from '../../../services/request-manager-services/http-manager.service';
+import { ApiRequest } from '../../../services/request-manager-state-service/models/api-request.model';
+import { Subscription, throwError } from 'rxjs';
+
+@Component({
+    selector: 'app-file-downloader',
+    templateUrl: './file-downloader.component.html',
+    styleUrls: ['./file-downloader.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class FileDownloaderComponent extends HTTPManagerService<any> implements OnInit {
+
+  @Input() delayError = 3
+  @Input() apiRequest: ApiRequest = ApiRequest.adapt()
+  @Input() displayErrorMessage = false
+
+  @Input() saveFileAs?: string
+
+  _labels = DownloadLabels.adapt()
+  @Input() set labels(value: DownloadLabels) {
+    this._labels = (value) ? DownloadLabels.adapt(value) : DownloadLabels.adapt()
+  }
+
+  active = false
+
+  subscription = new Subscription()
+
+  get labels() {
+    return this._labels
+  }
+
+  @Output() completed = new EventEmitter<void>()
+  @Output() failed = new EventEmitter<string>()
+
+  @Input() disabled = false
+
+  constructor() {
+    super()
+  }
+
+  ngOnInit() {
+
+  }
+
+  onDownloadStreaming() {
+
+    if (this.active) return;
+    this.active = true;
+
+    return this.downloadRequest(this.apiRequest, [])
+      .pipe(
+        distinctUntilChanged(),
+        catchError((err) => {
+
+          this.onError(err.message)
+          this.active = false
+          this.failed.emit(err)
+
+          return throwError(() => err)
+
+        }),
+        finalize(() => {
+          if (!this.active) return
+          this.active = false
+          this.completed.emit()
+        })
+      )
+      .subscribe()
+  }
+
+
+  onError(message: string) {
+
+    if(!message || !this.displayErrorMessage) return
+
+    const display = ToastDisplay.adapt({
+      message,
+      action: 'Ok',
+      color: ToastColors.ERROR,
+      icon: 'error',
+    });
+
+    this.active = false
+
+    this.toastMessage.toastMessage(display);
+
+  }
+
+  OnDestroy() {
+    this.subscription.unsubscribe()
+  }
+
+}

package/src/lib/http-request-services-demo/request-signals-manager-demo/file-downloader/models/download-labels-model.ts

@@ -0,0 +1,22 @@
+export interface DownloadLabelsInterface {
+  error: string;
+  action: string;
+  icon: string;
+}
+
+export class DownloadLabels implements DownloadLabelsInterface {
+  constructor(
+    public error = '',
+    public action = '',
+    public icon = 'error',
+  ) {}
+
+ static adapt(item?: any): DownloadLabelsInterface {
+    return new DownloadLabels(
+      item?.error,
+      item?.action,
+      item?.icon,
+    )
+
+  }
+}

package/src/lib/http-request-services-demo/request-signals-manager-demo/file-downloader/spinner/spinner.component.html

@@ -0,0 +1,8 @@
+<div class="spinner-background">{{display}}</div>
+<mat-progress-spinner
+    [color]="color"
+    [diameter]="diameter"
+    [mode]="mode || 'indeterminate'"
+    [strokeWidth]="strokeWidth"
+    [value]="value">
+</mat-progress-spinner>