http-request-manager 18.15.32 → 18.15.34

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

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

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

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

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

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