http-request-manager 15.0.24 → 15.0.26

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/http-request-manager",
+  "assets": ["./assets"],
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "http-request-manager",
-  "version": "15.0.24",
+  "version": "15.0.26",
   "homepage": "https://wavecoders.ca",
   "author": "Mike Bonifacio <wavecoders@gmail.com> (http://wavecoders@gmail.com/)",
   "description": "This is an Angular Module containing Components/Services using Material",
@@ -33,18 +33,5 @@
   "dest": "../../dist/http-request-manager",
   "lib": {
     "entryFile": "src/public-api.ts"
-  },
-  "module": "fesm2022/http-request-manager.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/http-request-manager.mjs",
-      "esm": "./esm2022/http-request-manager.mjs",
-      "default": "./fesm2022/http-request-manager.mjs"
-    }
   }
 }

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

@@ -0,0 +1,101 @@
+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 { 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 { LocalStorageDemoComponent } from './http-request-services-demo/local-storage-demo/local-storage-demo.component';
+// import { DatabaseDataDemoComponent } from './global-data-demo/database-data-demo/database-data-demo.component';
+
+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 { 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 { ProxyDebuggerInterceptor } from './interceptors/proxy-debugger.interceptor';
+
+import { HttpRequestServicesDemoComponent } from './http-request-services-demo/http-request-services-demo.component';
+
+import { ConfigOptions } from './models';
+import { CONFIG_SETTINGS_TOKEN } from './models/config-token.model';
+import { HTTPManagerService, LocalStorageManagerService } from './services';
+
+import { FileDownloaderModule } from './http-request-services-demo/request-manager-demo/file-downloader/file-download.module';
+
+import { ToastMessageDisplayModule } from 'toast-message-display';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ToastMessageDisplayModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatSelectModule,
+    MatChipsModule,
+    MatMenuModule,
+    MatIconModule,
+    MatTableModule,
+    MatButtonToggleModule,
+    MatAutocompleteModule,
+    MatProgressBarModule,
+    MatSlideToggleModule,
+    MatDividerModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatToolbarModule,
+    MatSlideToggleModule,
+    TranslateModule.forRoot(),
+    MatSidenavModule,
+    FileDownloaderModule,
+  ],
+  declarations: [
+    HttpRequestServicesDemoComponent,
+    RequestManagerStateDemoComponent,
+    RequestManagerDemoComponent,
+    LocalStorageDemoComponent
+    // DatabaseDataDemoComponent,
+  ],
+  exports: [
+    HttpRequestServicesDemoComponent,
+  ],
+  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
+  ],
+})
+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,3 @@
+<p>
+  database-data-demo works!
+</p>

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

@@ -0,0 +1,105 @@
+import { Component, OnInit, inject } from '@angular/core';
+
+import { TableSchemaDef } from '../../services/database-manager-services/models/table-schema';
+import { DatabaseManagerService } from '../../services/database-manager-services';
+
+@Component({
+  selector: 'app-database-data-demo',
+  templateUrl: './database-data-demo.component.html',
+  styleUrls: ['./database-data-demo.component.scss']
+})
+export class DatabaseDataDemoComponent implements OnInit {
+
+  db = inject(DatabaseManagerService)
+
+  constructor() { }
+
+  ngOnInit() {
+
+    const tableDef = TableSchemaDef.adapt({table: 'Sample Table', schema: ['id', 'lastName', 'age']})
+    console.log(tableDef)
+
+    this.createTable(tableDef).subscribe(() => {
+
+      // hasTable
+      this.db.hasDatabaseTable('Sample Table').subscribe(data => console.log(data))
+
+      // Tables
+      this.db.getDatabaseTables().subscribe(data => console.log(data))
+
+      // getTable
+      this.db.getDatabaseTable('Sample Table').subscribe(data => console.log(data))
+
+      // Table Schema
+      this.db.getDatabaseTableSchema('Sample Table').subscribe(data => console.log(data))
+
+      // Update Table Schema
+      // const newTableDef = TableSchemaDef.adapt({table: 'sample', schema: ['id', 'name', 'age', 'amount']})
+      // this.db.updateDatabaseTableSchema(newTableDef)
+
+      // Insert Table Record
+      const record = { id: 12, age: 45, last_name: 'Bonifacio', amount: 1200 }
+
+      this.db.createTableRecord('Sample Table', record).subscribe(data => console.log(data))
+
+      // Insert Table Records
+      const records = [
+        { id: 12, age: 12, last_name: 'Bonifacio', amount: 80 },
+        { id: 10, age: 15, last_name: 'Johns', amount: 700 },
+        { id: 1, age: 22, last_name: 'Kims', amount: 234 },
+        { id: 2, age: 45, last_name: 'Harrys', amount: 1200 },
+      ]
+
+      this.db.createTableRecords('Sample Table', records).subscribe(data => console.log(data))
+
+      // Update Table Record
+      const recordUpdate = { id: 12, age: 45, last_name: 'Bonifacio', amount: 5000 }
+
+      this.db.createTableRecord('Sample Table', record).subscribe(data => console.log(data))
+
+      // Update Table Records
+      // const recordsUpdate = [
+      //   { id: 12, age: 12, last_name: 'Bonifacio', amount: 5000 },
+      //   { id: 10, age: 15, last_name: 'Johns', amount: 5000 },
+      // ]
+
+      // this.db.updateTableRecords('sample_table', records).subscribe(data => console.log(data))
+
+    })
+
+  }
+
+  createTable(tableDef: TableSchemaDef) {
+    return this.db.createDatabaseTable(tableDef)
+  }
+
+  // CRUD
+  findTableRecords(table: string, column: string, value: any) {
+
+  }
+
+  findTableRecord(table: string, column: string, value: any) {
+
+  }
+
+  getTableRecords(table: string) {
+
+  }
+
+  getTableRecord(table: string, id: number) {
+
+  }
+
+  createTableRecord<T>(table: string, record: T) {
+
+  }
+
+  updateTableRecord<T>(table: string, record: T) {
+
+  }
+
+  deleteTableRecord<T>(table: string, id: number) {
+
+  }
+
+}

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

@@ -0,0 +1,64 @@
+<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">
+    <ng-container *ngFor="let type of requestTypes; index as i">
+      <div
+        *ngIf="type?.divider"
+        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>
+    </ng-container>
+
+  </mat-menu>
+</mat-toolbar>
+
+<span [ngSwitch]="selectedService">
+  <p *ngSwitchCase="'http_service'">
+    <ng-container *ngTemplateOutlet="HTTP_OPTIONS"></ng-container>
+    <app-request-manager-demo></app-request-manager-demo>
+  </p>
+  <p *ngSwitchCase="'http_state_service'">
+    <ng-container *ngTemplateOutlet="HTTP_OPTIONS"></ng-container>
+    <app-request-manager-state-demo></app-request-manager-state-demo>
+  </p>
+  <p *ngSwitchCase="'database_service'">
+    <!-- <app-database-data-demo></app-database-data-demo> -->
+  </p>
+  <p *ngSwitchCase="'local_storage_service'">
+    <ng-container *ngTemplateOutlet="LOCAL_OPTIONS"></ng-container>
+    <app-local-storage-demo></app-local-storage-demo>
+  </p>
+  <p *ngSwitchDefault>
+    Other
+  </p>
+</span>
+
+<ng-template #HTTP_OPTIONS>
+  <ng-container *ngIf="injectionOptions?.httpRequestOptions">
+    <div class="box">
+      <h3 style="font-weight: bold;">Injection Token Detected - HTTP Options</h3>
+      {{ injectionOptions?.httpRequestOptions| json }}
+    </div>
+  </ng-container>
+</ng-template>
+
+<ng-template #LOCAL_OPTIONS>
+  <ng-container class="box" *ngIf="injectionOptions?.LocalStorageOptions">
+    <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;
+}

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

@@ -0,0 +1,34 @@
+import { Component, Inject, OnInit } from '@angular/core';
+
+import { CONFIG_SETTINGS_TOKEN } from '../models/config-token.model';
+import { ConfigOptions } from '../models/config-options.model';
+
+@Component({
+  selector: 'app-http-request-services-demo',
+  templateUrl: './http-request-services-demo.component.html',
+  styleUrls: ['./http-request-services-demo.component.scss']
+})
+export class HttpRequestServicesDemoComponent implements OnInit {
+
+  requestTypes = [
+    { name: "Http Service", value: 'http_service' },
+    { name: "Http State Service", value: 'http_state_service' },
+    { name: "Database Service", value: 'database_service', divider: true, disabled: true },
+    { name: "Local Storage Service", value: 'local_storage_service' },
+  ]
+
+  selectedService = this.requestTypes[0].value
+
+  injectionOptions?: ConfigOptions
+
+  constructor(@Inject(CONFIG_SETTINGS_TOKEN) private configOptions?: ConfigOptions) { }
+
+  ngOnInit() {
+    if(this.configOptions) this.injectionOptions = this.configOptions
+  }
+
+  onSelected(type: number) {
+    this.selectedService = this.requestTypes[type].value
+  }
+
+}

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

@@ -0,0 +1,195 @@
+<div style="margin: 2rem;">
+
+  <div style="display: flex; gap: 1rem">
+    <h2 style="padding-top: .5rem; display: flex;">
+      <div style="padding-top: .5rem;">Local Storage Manager</div>
+      <div>
+        <button mat-icon-button [matMenuTriggerFor]="menu">
+          <mat-icon>info</mat-icon>
+        </button>
+      </div>
+    </h2>
+    <span style="flex:1"></span>
+    <div style="padding-top: .25rem;">
+      <mat-button-toggle-group name="storage" [formControl]="typeControl" (change)="onCancel()">
+        <mat-button-toggle value="0">Local Storage</mat-button-toggle>
+        <mat-button-toggle value="1">Session Storage</mat-button-toggle>
+      </mat-button-toggle-group>
+    </div>
+    <div style="margin-top: .25rem;">
+      <button mat-icon-button (click)="onCreate()">
+        <mat-icon>add</mat-icon>
+      </button>
+    </div>
+  </div>
+
+  <ng-container *ngIf="storeProps?.storageName || storeProps?.storageSettingsName">
+    <div style="display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;"
+    >
+      <div style="display: flex;">
+        <div *ngIf="storeProps?.storageSettingsName" style="flex:1">
+          Database: <b>{{ storeProps?.storageSettingsName }}</b>
+        </div>
+        <div *ngIf="storeProps?.storageName" style="flex:1">
+          Data: <b>{{ storeProps?.storageName }}</b>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+
+  <div style="margin-top: 2rem;" [formGroup]="newStoreForm" *ngIf="create; else LIST">
+
+    <h2>Create Store</h2>
+
+    <div style="display: flex; gap: 1rem;">
+      <div style="flex:1">
+        <mat-form-field appearance="outline">
+          <mat-label>Store Name</mat-label>
+          <input matInput placeholder="sample" formControlName="name">
+        </mat-form-field>
+      </div>
+      <div>
+        <mat-form-field appearance="outline">
+          <mat-label>Expires In...</mat-label>
+          <mat-select formControlName="expiresIn">
+            <mat-option value="0">None</mat-option>
+            <mat-option value="30s">30 Seconds</mat-option>
+            <mat-option value="1mn">1 Minute</mat-option>
+            <mat-option value="1hr">1 Hour</mat-option>
+            <mat-option value="1d">1 Day</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+      <div style="margin-top: 1rem;">
+        <mat-slide-toggle formControlName="encrypted">Encrypted</mat-slide-toggle>
+      </div>
+    </div>
+
+    <div style="display: flex;">
+      <mat-form-field appearance="outline" style="flex: 1;">
+        <mat-label>Data (Must be an Object or Array of any)</mat-label>
+        <textarea matInput placeholder="[]" formControlName="data" #json></textarea>
+      </mat-form-field>
+    </div>
+    <mat-error *ngIf="!isValidJSON(json.value)">Not Valid Data</mat-error>
+
+    <div style="display: flex;">
+      <span style="flex:1"></span>
+      <button mat-stroked-button (click)="onCreateStore()" [disabled]="!(isValid && isValidJSON(json.value))">
+        Save Store
+      </button>
+    </div>
+
+  </div>
+
+  <ng-template #LIST>
+
+    <div style="margin-top: 1rem;">
+      <mat-divider></mat-divider>
+    </div>
+{{ settings$ | async | json }}
+    <div *ngIf="filterData(settings$ | async) as data">
+      <ng-container *ngIf="data.length > 0; else NO_DATA">
+        <table mat-table [dataSource]="data">
+          <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef> Store </th>
+            <td mat-cell *matCellDef="let element" style="font-weight: bold; text-transform: uppercase;"> {{element.name}} </td>
+          </ng-container>
+
+          <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="encrypted">
+            <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Encrypted </th>
+            <td mat-cell *matCellDef="let element" style="text-align: center;">
+              <ng-container *ngIf="element.options.encrypted; else NO">YES</ng-container>
+              <ng-template #NO><span style="color:gray">NO</span></ng-template>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="expires">
+            <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Expires </th>
+            <td mat-cell *matCellDef="let element" style="text-align: center;">
+              <ng-container *ngIf="element.options.expires !== 0; else NO_DATA">
+                {{expiresIn(element.options.expires)}}
+              </ng-container>
+              <ng-template #NO_DATA>
+                ∞
+              </ng-template>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="option">
+            <th mat-header-cell *matHeaderCellDef></th>
+            <td mat-cell *matCellDef="let element" style="padding-right: 0;">
+              <div style="display: flex;justify-content: flex-end;">
+                <button mat-icon-button color="warn" (click)="onDelete(element); $event.stopPropagation()">
+                  <mat-icon>close</mat-icon>
+                </button>
+              </div>
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onSelectedRow(row)"></tr>
+        </table>
+      </ng-container>
+
+      <ng-template #NO_DATA>
+        <h3 style="margin-top: 1rem;">No Data</h3>
+      </ng-template>
+
+      <div *ngIf="(data$ | async) as data" style="margin-top: 2rem;">
+        <div style="margin-bottom: 1rem;">
+          <mat-divider></mat-divider>
+        </div>
+
+        <h3>STORE: <span style="font-weight: bold;">{{ store.name | uppercase }}</span></h3>
+        <h3>SETTINGS: {{ setting$(store.name) | async | json }}</h3>
+        <div style="display: flex;">
+          <mat-form-field appearance="outline" style="flex: 1;">
+            <mat-label>Data (Must be an Object or Array of any)</mat-label>
+            <textarea matInput placeholder="[]" #json [value]="data"></textarea>
+          </mat-form-field>
+        </div>
+        <mat-error *ngIf="!isValidJSON(json.value)">Not Valid Data</mat-error>
+
+        <div style="display: flex; gap: .5rem;">
+          <span style="flex:1"></span>
+          <button mat-stroked-button (click)="onCancel()">Cancel</button>
+          <button mat-stroked-button (click)="onUpdate(store, json.value)" [disabled]="!(isValidJSON(json.value))">Update</button>
+        </div>
+      </div>
+    </div>
+
+  </ng-template>
+
+  <div style="margin-top: 1rem;">
+    <mat-divider></mat-divider>
+  </div>
+
+  <div style="margin-top: 1rem;">
+    <button mat-stroked-button (click)="onReset()">Delete All Stores</button>
+  </div>
+
+</div>
+
+
+<mat-menu #menu="matMenu">
+  <div style="padding: 1rem;">
+    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>
+    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>
+    <mat-divider></mat-divider>
+  <div style="font-size: smaller; margin-top: .5rem;">
+    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>
+    <div style="background-color: whitesmoke; padding: 1rem;">
+      &#123;<br>
+        provide: APP_ID,<br>
+        useValue: "056991ac-3537-43ab-b5b9-83edf6554eff",<br>
+      &#125;
+    </div>
+  </div>
+  </div>
+</mat-menu>

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

@@ -0,0 +1,17 @@
+  .mat-mdc-row .mat-mdc-cell {
+    border-bottom: 1px solid transparent;
+    border-top: 1px solid transparent;
+    cursor: pointer;
+  }
+
+  .mat-mdc-row:hover .mat-mdc-cell {
+    border-color: currentColor;
+  }
+
+  .demo-row-is-clicked {
+    font-weight: bold;
+  }
+
+  .mat-mdc-menu-panel.mat-mdc-menu-panel {
+    max-width: 280px !important;
+  }