http-request-manager 18.15.34 → 18.16.1

package/src/lib/http-request-manager.module.ts

@@ -1,147 +0,0 @@
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
-import { ModuleWithProviders, NgModule } from '@angular/core';
-
-
-import { WithCredentialsInterceptor, RequestHeadersInterceptor } from './interceptors';
-import { TranslateModule } from '@ngx-translate/core';
-
-import { CommonModule } from '@angular/common';
-
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatButtonModule } from '@angular/material/button';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTableModule } from '@angular/material/table';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatNativeDateModule } from '@angular/material/core';
-import { MatCardModule } from '@angular/material/card';
-import { ProxyDebuggerInterceptor } from './interceptors/proxy-debugger.interceptor';
-import { MatTabsModule } from '@angular/material/tabs';
-
-import { ConfigOptions } from './models/config-options.model';
-import { CONFIG_SETTINGS_TOKEN } from './models/config-token.model';
-import { HTTPManagerService } from './services/request-manager-services/http-manager.service';
-import { LocalStorageManagerService } from './services/local-storage-manager-service/local-storage-manager.service';
-
-import { FileDownloaderModule } from './http-request-services-demo/request-manager-demo/file-downloader/file-download.module';
-import { ToastMessageDisplayModule, ToastMessageDisplayService } from 'toast-message-display';
-
-// Message Display System
-import { MessageDisplayRouterService, SnackbarStrategy } from './message-display';
-
-// Fix: Import components directly instead of from public-api to avoid circular dependency
-import { HttpRequestServicesDemoComponent } from './http-request-services-demo/http-request-services-demo.component';
-import { DatabaseDataDemoComponent } from './http-request-services-demo/database-data-demo/database-data-demo.component';
-import { LocalStorageDemoComponent } from './http-request-services-demo/local-storage-demo/local-storage-demo.component';
-import { RequestManagerDemoComponent } from './http-request-services-demo/request-manager-demo/request-manager-demo.component';
-import { RequestManagerStateDemoComponent } from './http-request-services-demo/request-manager-state-demo/request-manager-state-demo.component';
-
-import { LocalStorageSignalsDemoComponent } from './http-request-services-demo/local-storage-signals-demo/local-storage-signals-demo.component';
-import { RequestManagerWsDemoComponent } from './http-request-services-demo/request-manager-ws-demo/request-manager-ws-demo.component';
-import { RequestSignalsManagerDemoComponent } from './http-request-services-demo/request-signals-manager-demo/request-signals-manager-demo.component';
-import { StoreStateManagerDemoComponent } from './http-request-services-demo/store-state-manager-demo/store-state-manager-demo.component';
-
-import { WsDataControlComponent } from './http-request-services-demo/request-manager-ws-demo/components/ws-data-control/ws-data-control.component';
-import { WsMessagingComponent } from './http-request-services-demo/request-manager-ws-demo/components/ws-messaging/ws-messaging.component';
-import { WsNotificationsComponent } from './http-request-services-demo/request-manager-ws-demo/components/ws-notifications/ws-notifications.component';
-import { WsAiMessagingComponent } from './http-request-services-demo/request-manager-ws-demo/components/ws-ai-messaging/ws-ai-messaging.component';
-import { WsChatsComponent } from './http-request-services-demo/request-manager-ws-demo/components/ws-chats/ws-chats.component';
-import { RequestManagerBasicDemoComponent } from './http-request-services-demo/request-manager-basic-demo/request-manager-basic-demo.component';
-import { UploadDemoComponent } from './http-request-services-demo/upload-demo/upload-demo.component';
-
-// import { MessengerChatModule } from 'src/app/components/messenger-chat/messenger-chat.module';
-// import { StoreStateManagerModule } from "src/app/beta_components/store-state-manager/store-state-manager.module";
-
-
-@NgModule({
-  imports: [
-    CommonModule,
-    ToastMessageDisplayModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MatButtonModule,
-    MatTabsModule,
-    MatSelectModule,
-    MatChipsModule,
-    MatMenuModule,
-    MatIconModule,
-    MatTableModule,
-    MatButtonToggleModule,
-    MatAutocompleteModule,
-    MatProgressBarModule,
-    MatProgressSpinnerModule,
-    MatSlideToggleModule,
-    MatDividerModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatToolbarModule,
-    MatSlideToggleModule,
-    TranslateModule.forRoot(),
-    MatSidenavModule,
-    MatDatepickerModule,
-    MatNativeDateModule,
-    MatCardModule,
-    FileDownloaderModule,
-    // MessengerChatModule,
-    // StoreStateManagerModule
-],
-  declarations: [
-    RequestManagerBasicDemoComponent,
-    HttpRequestServicesDemoComponent,
-    RequestManagerStateDemoComponent,
-    RequestManagerDemoComponent,
-    RequestSignalsManagerDemoComponent,
-    LocalStorageDemoComponent,
-    LocalStorageSignalsDemoComponent,
-    RequestManagerWsDemoComponent,
-    StoreStateManagerDemoComponent,
-    DatabaseDataDemoComponent,
-    WsDataControlComponent,
-    WsMessagingComponent,
-    WsNotificationsComponent,
-    WsAiMessagingComponent,
-    WsChatsComponent,
-    UploadDemoComponent,
-  ],
-  exports: [
-    HttpRequestServicesDemoComponent,
-    UploadDemoComponent,
-  ],
-  providers: [
-    { provide: HTTP_INTERCEPTORS, useClass: WithCredentialsInterceptor, multi: true },
-    { provide: HTTP_INTERCEPTORS, useClass: RequestHeadersInterceptor, multi: true },
-    { provide: HTTP_INTERCEPTORS, useClass: ProxyDebuggerInterceptor, multi: true },
-    { provide: CONFIG_SETTINGS_TOKEN, useValue: ConfigOptions.adapt() },
-    HTTPManagerService, LocalStorageManagerService,
-    ToastMessageDisplayService,
-    MessageDisplayRouterService,
-    SnackbarStrategy
-  ],
-})
-export class HttpRequestManagerModule {
-
-  static forRoot(config: ConfigOptions = ConfigOptions.adapt()): ModuleWithProviders<HttpRequestManagerModule> {
-    return {
-      ngModule: HttpRequestManagerModule,
-      providers: [
-        { provide: CONFIG_SETTINGS_TOKEN, useValue: ConfigOptions.adapt(config) },
-        HTTPManagerService, LocalStorageManagerService //all services that need access to config
-      ],
-    };
-    }
-
-}
-
-

package/src/lib/http-request-services-demo/database-data-demo/database-data-demo.component.html

@@ -1,116 +0,0 @@
-<div style="padding: 2rem;">
-
-  <h2>
-    Database Manager Service Demo
-  </h2>
-
-  <div style="margin-bottom: 1rem; display: flex; gap: 1rem;">
-    <button mat-stroked-button
-      color="primary"
-      (click)="clearAllData()"
-    >
-      Clear Data
-    </button>
-    <button mat-stroked-button
-      color="primary"
-      (click)="updateData()"
-    >
-      Update Data
-    </button>
-    <div style="flex:1"></div>
-    <button
-        mat-stroked-button
-        color="warn"
-        [disabled]="!dataToDisplay.length"
-        (click)="removeData()"
-    >
-      Remove Data
-    </button>
-    <button mat-stroked-button
-      color="primary"
-      (click)="addData()"
-    >
-      Add Data
-    </button>
-  </div>
-
-  <div class="table-container">
-    <table mat-table [dataSource]="dataSource">
-
-      <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef>ID</th>
-        <td mat-cell *matCellDef="let element">{{element.id}}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="last_name">
-        <th mat-header-cell *matHeaderCellDef>Last Name</th>
-        <td mat-cell *matCellDef="let element">{{element.last_name}}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="age">
-        <th mat-header-cell *matHeaderCellDef>Age</th>
-        <td mat-cell *matCellDef="let element">{{element.age}}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef>Amount</th>
-        <td mat-cell *matCellDef="let element">{{element.amount | currency}}</td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-    </table>
-  </div>
-
-  <!-- ── SQL Query Section ─────────────────────────────────────────────── -->
-  <mat-divider style="margin: 2rem 0;"></mat-divider>
-
-  <h3 style="margin-bottom: 1rem;">SQL Query with DexieJS</h3>
-
-  <div style="display: flex; gap: 1rem; align-items: flex-start;">
-    <mat-form-field style="flex: 1;" appearance="outline">
-      <mat-label>SQL Query</mat-label>
-      <textarea
-        matInput
-        [(ngModel)]="sqlQuery"
-        rows="3"
-        placeholder="e.g. SELECT * FROM sample_table WHERE age > 20"
-        (keydown.control.enter)="runSqlQuery()"
-      ></textarea>
-      <mat-hint>Ctrl+Enter to execute</mat-hint>
-    </mat-form-field>
-
-    <button
-      mat-flat-button
-      color="primary"
-      style="margin-top: 4px;"
-      [disabled]="sqlLoading || !sqlQuery.trim()"
-      (click)="runSqlQuery()"
-    >
-      {{ sqlLoading ? 'Running…' : 'Execute' }}
-    </button>
-  </div>
-
-  <!-- Error -->
-  <div *ngIf="sqlError" style="color: #d32f2f; margin: 0.5rem 0 1rem; font-size: 0.875rem;">
-    <mat-icon style="vertical-align: middle; font-size: 16px; height: 16px; width: 16px;">error</mat-icon>
-    {{ sqlError }}
-  </div>
-
-  <!-- Results table (dynamic columns) -->
-  <div *ngIf="!sqlLoading && sqlResults.length > 0" class="table-container" style="margin-top: 1rem;">
-    <div>
-      {{ sqlResults | json }}
-    </div>
-    <p style="font-size: 0.8rem; color: #666; margin-top: 0.5rem;">
-      {{ sqlResults.length }} row{{ sqlResults.length === 1 ? '' : 's' }} returned
-    </p>
-  </div>
-
-  <!-- Empty state -->
-  <p *ngIf="!sqlLoading && !sqlError && sqlResults.length === 0 && sqlQuery.trim()"
-     style="color: #888; font-size: 0.875rem; margin-top: 0.5rem;">
-    No results to display. Execute a query above.
-  </p>
-
-</div>

package/src/lib/http-request-services-demo/database-data-demo/database-data-demo.component.ts

@@ -1,255 +0,0 @@
-import { Component, OnInit, inject, OnDestroy } from '@angular/core';
-import { Subject, Observable, ReplaySubject } from 'rxjs';
-import { tap } from 'rxjs/operators';
-import { DataSource } from '@angular/cdk/collections';
-
-import { TableSchemaDef } from '../../services/database-manager-service/models/table-schema';
-import { DatabaseManagerService } from '../../services/database-manager-service';
-import { DexieSqlService } from '../../services/SQL-DixieJS service/dexie-sql.service';
-
-export interface TableRecord {
-  id: number;
-  last_name: string;
-  age: number;
-  amount: number;
-}
-
-@Component({
-    selector: 'app-database-data-demo',
-    templateUrl: './database-data-demo.component.html',
-    styleUrls: ['./database-data-demo.component.scss'],
-    standalone: false
-})
-export class DatabaseDataDemoComponent implements OnInit, OnDestroy {
-
-  db  = inject(DatabaseManagerService);
-  sql = inject(DexieSqlService);
-  private destroy$ = new Subject<void>();
-
-  dataToDisplay: TableRecord[] = [];
-  dataSource = new DatabaseDataSource(this.dataToDisplay);
-  displayedColumns: string[] = ['id', 'last_name', 'age', 'amount'];
-
-  names = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis'];
-
-  // ── SQL Query section ────────────────────────────────────────────────────
-  sqlQuery        = 'SELECT * FROM sample_table';
-  sqlResults:     any[]    = [];
-  sqlResultCols:  string[] = [];
-  sqlError:       string | null = null;
-  sqlLoading      = false;
-
-  constructor() { }
-
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  addData() {
-
-    const newRecord: TableRecord = {
-      id: Math.max(...this.dataToDisplay.map(r => r.id), 0) + 1,
-      last_name: this.names[Math.floor(Math.random() * this.names.length)],
-      age: Math.floor(Math.random() * 80) + 18,
-      amount: Math.floor(Math.random() * 1000)
-    };
-
-    this.dataToDisplay = [...this.dataToDisplay, newRecord];
-    this.db.createTableRecord('sample_table', newRecord).subscribe(
-      () => this.refreshData()
-    );
-
-  }
-
-  removeData() {
-    if (this.dataToDisplay.length > 0) {
-      const removedRecord = this.dataToDisplay[this.dataToDisplay.length - 1];
-      this.dataToDisplay = this.dataToDisplay.slice(0, -1);
-      this.db.deleteTableRecord('sample_table', removedRecord.id).subscribe(
-        () => this.refreshData()
-      );
-    }
-  }
-
-  updateData() {
-
-    if (this.dataToDisplay.length === 0) return;
-
-    const randomIndex = Math.floor(Math.random() * this.dataToDisplay.length);
-    const recordToUpdate = this.dataToDisplay[randomIndex];
-
-    const updatedRecord: TableRecord = {
-      ...recordToUpdate,
-      last_name: this.names[Math.floor(Math.random() * this.names.length)],
-      age: Math.floor(Math.random() * 80) + 18,
-      amount: Math.floor(Math.random() * 1000)
-    };
-
-    this.dataToDisplay = this.dataToDisplay.map((r, index) =>
-      index === randomIndex ? updatedRecord : r
-    );
-
-    this.db.updateTableRecord('sample_table', updatedRecord).subscribe(
-      () => this.refreshData()
-    );
-
-  }
-
-  clearAllData() {
-    if (this.dataToDisplay.length === 0) return;
-
-    const idsToDelete = this.dataToDisplay.map(r => r.id);
-    this.dataToDisplay = [];
-
-    this.db.deleteTableRecords('sample_table', idsToDelete).subscribe(
-      () => this.refreshData()
-    );
-  }
-
-  private refreshData() {
-    this.db.getTableRecords('sample_table').subscribe(
-      (records: any) => {
-        this.dataToDisplay = records || [];
-        this.dataSource.setData(this.dataToDisplay);
-      }
-    );
-  }
-
-  ngOnInit() {
-
-    const tableDef = TableSchemaDef.adapt({
-      table: 'sample_table',
-      schema: '++id, last_name, age, amount'
-    });
-
-    this.db.createDatabaseTable(tableDef).subscribe(() => {
-      console.log('Database Table Initialized');
-
-      // hasTable
-      this.db.hasDatabaseTable('sample_table')
-        .subscribe(data => console.log('hasDatabaseTable:', data))
-
-      // Tables
-      this.db.getDatabaseTables()
-        .subscribe(data => console.log('getDatabaseTables:', data))
-
-      // getTable
-      this.db.getDatabaseTable('sample_table')
-        .subscribe(data => console.log('getDatabaseTable:', data))
-
-      // Table Schema
-      this.db.getDatabaseTableSchema('sample_table')
-        .subscribe(data => console.log('getDatabaseTableSchema:', data))
-
-      // Insert Table Records
-      const records = [
-        { id: 1, age: 12, last_name: 'Bonifacio', amount: 80 },
-        { id: 2, age: 15, last_name: 'Johns', amount: 700 },
-        { id: 3, age: 22, last_name: 'Kims', amount: 234 },
-        { id: 4, age: 45, last_name: 'Harrys', amount: 1200 },
-      ]
-
-      this.db.createTableRecords('sample_table', records).subscribe(() => {
-        this.refreshData();
-      });
-    });
-  }
-
-  createTable(tableDef: TableSchemaDef) {
-    return this.db.createDatabaseTable(tableDef)
-  }
-
-  // CRUD
-  findTableRecords(table: string, column: string, value: any) {
-    return this.db.findTableRecords(table, column, value)
-    .pipe(
-      tap((data: any) => console.log('findTableRecords:', data))
-    )
-  }
-
-  findTableRecord(table: string, column: string, value: any) {
-    return this.db.findTableRecord(table, column, value)
-    .pipe(
-      tap((data: any) => console.log('findTableRecord:', data))
-    )
-  }
-
-  getTableRecords(table: string) {
-    return this.db.getTableRecords(table)
-    .pipe(
-      tap((data: any) => console.log('getTableRecords:', data))
-    )
-  }
-
-  getTableRecord(table: string, id: number) {
-    return this.db.getTableRecord(table, id)
-    .pipe(
-      tap((data: any) => console.log('getTableRecord:', data))
-    )
-  }
-
-  createTableRecord<T>(table: string, record: T) {
-    return this.db.createTableRecord(table, record)
-    .pipe(
-      tap((data: any) => console.log('createTableRecord:', data))
-    )
-  }
-
-  updateTableRecord<T>(table: string, record: T) {
-    return this.db.updateTableRecord(table, record)
-    .pipe(
-      tap((data: any) => console.log('updateTableRecord:', data))
-    )
-  }
-
-  deleteTableRecord<T>(table: string, id: number) {
-    return this.db.deleteTableRecord(table, id)
-    .pipe(
-      tap((data: any) => console.log('deleteTableRecord:', data))
-    )
-  }
-
-  runSqlQuery() {
-    const q = (this.sqlQuery ?? '').trim();
-    if (!q) return;
-
-    this.sqlLoading = true;
-    this.sqlError   = null;
-    this.sqlResults = [];
-    this.sqlResultCols = [];
-
-    this.sql.query(q).subscribe({
-      next: rows => {
-        this.sqlResults    = rows;
-        this.sqlResultCols = rows.length > 0 ? Object.keys(rows[0]) : [];
-        this.sqlLoading    = false;
-      },
-      error: err => {
-        this.sqlError   = err?.message ?? String(err);
-        this.sqlLoading = false;
-      }
-    });
-  }
-
-}
-
-class DatabaseDataSource extends DataSource<TableRecord> {
-  private _dataStream = new ReplaySubject<TableRecord[]>();
-
-  constructor(initialData: TableRecord[]) {
-    super();
-    this.setData(initialData);
-  }
-
-  connect(): Observable<TableRecord[]> {
-    return this._dataStream;
-  }
-
-  disconnect() {}
-
-  setData(data: TableRecord[]) {
-    this._dataStream.next(data);
-  }
-
-}

package/src/lib/http-request-services-demo/http-request-services-demo.component.html

@@ -1,123 +0,0 @@
-<mat-toolbar  style="display:flex">
-  <div>Http Request Manager Services</div>
-  <div style="flex:1"></div>
-  <button mat-stroked-button [matMenuTriggerFor]="menu">Services</button>
-  <mat-menu #menu="matMenu">
-    @for (type of requestTypes; track type; let i = $index) {
-      @if (type?.divider) {
-        <div
-          style="margin-top: .5rem; margin-bottom: .5rem;"
-          >
-          <mat-divider></mat-divider>
-        </div>
-      }
-      <button
-        mat-menu-item
-        (click)="onSelected(i)"
-        [disabled]="type.disabled"
-        >
-        {{ type.name }}
-      </button>
-    }
-
-  </mat-menu>
-</mat-toolbar>
-
-<span>
-  @switch (selectedService) {
-    @case ('basic_http_service') {
-      <p>
-        <app-request-manager-basic-demo></app-request-manager-basic-demo>
-      </p>
-    }
-    @case ('http_service') {
-      <p>
-        <ng-container *ngTemplateOutlet="HTTP_OPTIONS"></ng-container>
-        <app-request-manager-demo
-          [server]="server"
-          [adapter]="adapter"
-          [mapper]="mapper"
-        ></app-request-manager-demo>
-      </p>
-    }
-    <!-- <p *ngSwitchCase="'http_signals_service'">
-    <ng-container *ngTemplateOutlet="HTTP_OPTIONS"></ng-container>
-    <app-request-signals-manager-demo></app-request-signals-manager-demo>
-  </p> -->
-  @case ('http_state_service') {
-    <p>
-      <ng-container *ngTemplateOutlet="HTTP_OPTIONS"></ng-container>
-      <app-request-manager-state-demo
-        [server]="server"
-        [adapter]="adapter"
-        [mapper]="mapper"
-      ></app-request-manager-state-demo>
-    </p>
-  }
-  @case ('http_state_service_ws') {
-    <p>
-      <ng-container *ngTemplateOutlet="HTTP_OPTIONS"></ng-container>
-      <app-request-manager-ws-demo
-        [server]="server"
-        [wsServer]="wsServer"
-        [jwtToken]="jwtToken"
-        [user]="user"
-        [path]="path"
-      ></app-request-manager-ws-demo>
-    </p>
-  }
-  @case ('file_upload_demo') {
-    <p>
-      <lib-upload-demo></lib-upload-demo>
-    </p>
-  }
-  @case ('database_service') {
-    <p>
-      <app-database-data-demo></app-database-data-demo>
-    </p>
-  }
-  @case ('local_storage_service') {
-    <p>
-      <ng-container *ngTemplateOutlet="LOCAL_OPTIONS"></ng-container>
-      <app-local-storage-demo></app-local-storage-demo>
-    </p>
-  }
-  <!-- <p *ngSwitchCase="'local_storage_signals_service'">
-  <ng-container *ngTemplateOutlet="LOCAL_OPTIONS"></ng-container>
-  <app-local-storage-signals-demo></app-local-storage-signals-demo>
-</p> -->
-@case ('store_state_manager') {
-  <p>
-    <ng-container *ngTemplateOutlet="LOCAL_OPTIONS"></ng-container>
-    <app-store-state-manager-demo></app-store-state-manager-demo>
-  </p>
-}
-@default {
-  <p>
-    Other
-  </p>
-}
-}
-</span>
-
-<ng-template #HTTP_OPTIONS>
-  @if (injectionOptions?.httpRequestOptions) {
-    <div class="box">
-      <h3 style="font-weight: bold;">Injection Token Detected - HTTP Options</h3>
-      {{ injectionOptions?.httpRequestOptions| json }}
-    </div>
-  }
-</ng-template>
-
-<ng-template #LOCAL_OPTIONS>
-  @if (injectionOptions?.LocalStorageOptions) {
-    <ng-container class="box">
-      <div class="box">
-        <h3 style="font-weight: bold;">Injection Token Detected - LocalStorage Options</h3>
-        {{ injectionOptions?.LocalStorageOptions| json }}
-      </div>
-    </ng-container>
-  }
-</ng-template>
-
-

package/src/lib/http-request-services-demo/http-request-services-demo.component.scss

@@ -1,6 +0,0 @@
-.box {
-  padding: 1rem;
-  background-color: whitesmoke;
-  border: thin gray solid;
-  margin-top: 1rem;
-}