http-request-manager 15.0.24 → 15.0.26

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

@@ -0,0 +1,328 @@
+<div style="margin: 2rem;">
+
+  <h2>
+    HTTP Request State Manager
+  </h2>
+
+  <div [formGroup]="requestForm" style="margin-top: 2rem;">
+    <div style="display: flex; gap: .5rem">
+      <mat-form-field appearance="outline">
+        <mat-label>State Data Type</mat-label>
+        <mat-select formControlName="datatype">
+          <mat-option value="ARRAY">Array</mat-option>
+          <mat-option value="OBJECT">Object</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div style="display: flex; gap: .5rem">
+      <mat-form-field appearance="outline">
+        <mat-label>Adapter (Model)</mat-label>
+        <mat-select formControlName="adapter" #adapterSelect>
+          <mat-option>None</mat-option>
+          <mat-option *ngFor="let adapter of sampleAdaptors" [value]="adapter.value">
+            {{adapter.label}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Mapper (Model)</mat-label>
+        <mat-select formControlName="mapper" #mapperSelect>
+          <mat-option>None</mat-option>
+          <mat-option *ngFor="let mapper of sampleMappers" [value]="mapper.value">
+            {{mapper.label}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+
+    <div style="display: flex; margin-bottom: 2rem;" *ngIf="adapterSelect.value || mapperSelect.value">
+      <div style="flex:1" class="box">
+        <h3>Adapter (Incoming)</h3>
+        <div *ngIf="adapterSelect.value; else NO_ADAPTER">
+          {{ props(adapterSelect.value) | json }}
+        </div>
+        <ng-template #NO_ADAPTER>No Transformation</ng-template>
+      </div>
+      <div style="flex:1" class="box">
+        <h3>Mapper (Outgoing)</h3>
+        <div *ngIf="mapperSelect.value; else NO_MAPPER">
+          {{ props(mapperSelect.value) | json }}
+        </div>
+        <ng-template #NO_MAPPER>No Transformation</ng-template>
+      </div>
+    </div>
+
+    <div>
+      <mat-form-field appearance="outline">
+        <mat-label>RestPath (/ delimited)</mat-label>
+        <input matInput placeholder="clients/list" formControlName="path">
+      </mat-form-field>
+    </div>
+    <div>
+      <div formArrayName="headers">
+        <div *ngFor="let task of headers.controls; let i = index" [formGroupName]="i">
+          <div style="display: flex; gap: .5rem">
+            <mat-form-field appearance="outline">
+              <mat-label>Key</mat-label>
+              <input matInput placeholder="authentication" formControlName="key">
+            </mat-form-field>
+            <mat-form-field appearance="outline" style="flex:1">
+              <mat-label>Value</mat-label>
+              <input matInput placeholder="sample" formControlName="value">
+            </mat-form-field>
+            <div style="margin-top: .5rem;">
+              <button mat-icon-button (click)="removeHeader(i)">
+                  <mat-icon>close</mat-icon>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button mat-stroked-button (click)="addHeader()">Add Header</button>
+    </div>
+    <div style="margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;">
+      <div>
+        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>
+        <div *ngIf="failedState.checked" style="display: flex; gap: .5rem; margin-top: 1rem;" formGroupName="retry">
+          <mat-form-field appearance="outline">
+            <mat-label>#of Times</mat-label>
+            <input matInput placeholder="3" formControlName="times" value="3">
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Delay Until Next</mat-label>
+            <input matInput placeholder="3" formControlName="delay" value="3">
+          </mat-form-field>
+        </div>
+      </div>
+      <div>
+        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>
+        <div *ngIf="pollingState.checked">
+          <mat-form-field appearance="outline" style="margin-top: 1rem">
+            <mat-label>#of Seconds</mat-label>
+            <input matInput placeholder="3" formControlName="polling" value="3">
+          </mat-form-field>
+        </div>
+      </div>
+      <div>
+        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>
+        <div *ngIf="DBState.checked" style="display: flex; gap: .5rem; margin-top: 1rem" formGroupName="database">
+          <mat-form-field appearance="outline">
+            <mat-label>Table Name</mat-label>
+            <input matInput placeholder="table" formControlName="table" value="">
+          </mat-form-field>
+          <div>
+            <mat-form-field appearance="outline">
+              <mat-label>Expires In</mat-label>
+              <mat-select formControlName="expiresIn">
+                <mat-option value="1m">One Minute</mat-option>
+                <mat-option value="1h">One Hour</mat-option>
+                <mat-option value="1d">One Day</mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
+        </div>
+      </div>
+      <div style="margin-top: 1rem; display: flex;">
+        <span style="flex:1"></span>
+        <button mat-stroked-button (click)="onSetStateOptions()" [disabled]="!hasChanged">
+          Set API Request Options
+        </button>
+      </div>
+      <div>
+        <mat-error *ngIf="(error$ | async) as error">
+          {{ error }}
+        </mat-error>
+      </div>
+    </div>
+  </div>
+
+  <div style="margin-bottom: 1rem; margin-top: 2rem;">
+    <mat-progress-bar mode="indeterminate"
+      *ngIf="(isPending$ | async)"
+    ></mat-progress-bar>
+    <div *ngIf="pollingState.checked">
+      <mat-progress-bar mode="determinate"
+      *ngIf="!(isPending$ | async) && (this.countdown$ | async) || -1 > 0"
+      [value]="(this.countdown$ | async)"
+      ></mat-progress-bar>
+    </div>
+
+  </div>
+
+  <div style="margin-top: 2rem" *ngIf="(GET$ | async) as data">
+    <div style="display: flex;">
+      <h2 style="flex:1;">CURRENT STATE ({{ dataType }})</h2>
+    </div>
+    <div *ngIf="data.length > 1">
+      <mat-form-field appearance="outline">
+        <mat-label>Records</mat-label>
+        <mat-select [formControl]="selectedRecord" [disabled]="data === null && data?.length === 0">
+          <mat-option [value]="">None</mat-option>
+          <mat-option *ngFor="let item of data" [value]="item">
+            {{item.name || (item.first_name) | titlecase}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div *ngIf="(dataObservable$ | async) as dataRecord">
+      <div *ngIf="(selectedRecord$ | async) as record; else NO_RECORD">
+        {{ record | json }}
+      </div>
+      <ng-template #NO_RECORD>No Record Selected from State</ng-template>
+
+    </div>
+    <div style="margin-top: 1rem;">
+      <span *ngIf="data !== null && data?.length > 0; else NO_DATA">
+        State contains a Total of {{ data.length }} Records
+      </span>
+      <ng-template #NO_DATA>No Records</ng-template>
+      <div style="display: flex; gap: .5rem; text-align: end; justify-content: flex-end;">
+        <button class="btn" mat-stroked-button (click)="onClearRecords()">Clear</button>
+        <button class="btn" mat-stroked-button (click)="onRefreshRecords()" [disabled]="hasChanged">Refresh</button>
+      </div>
+    </div>
+  </div>
+
+
+
+
+  <div style="margin-top: 1rem">
+    <mat-divider></mat-divider>
+  </div>
+
+  <div style="margin-top: 2rem">
+    <div style="display: flex;">
+      <h2 style="flex:1">GET Request ({{ dataType }})</h2>
+      <div>
+        <button mat-raised-button (click)="onGetRequest()" [disabled]="hasChanged" class="btn">Request</button>
+      </div>
+    </div>
+
+    <div *ngIf="(GET_error$ | async) as get_error" style="margin-top: .5rem;">
+      <mat-error>{{ get_error }}</mat-error>
+    </div>
+
+    <div style="margin-top: 1rem;">
+      <!-- <div [innerHTML]="(GET$ | async) | jsonv"></div> -->
+      <div *ngIf="(GET$ | async) as getData">{{ getData | json }}</div>
+    </div>
+
+  </div>
+
+  <div style="margin-top: 2rem">
+    <mat-divider></mat-divider>
+  </div>
+
+  <div style="margin-top: 2rem">
+    <div style="display: flex;">
+      <h2 style="flex:1">POST Request</h2>
+      <div>
+        <button mat-raised-button (click)="onCreateRequest()" [disabled]="hasChanged" class="btn">Request</button>
+      </div>
+    </div>
+
+    <div *ngIf="(POST_error$ | async) as post_error" style="margin-top: .5rem;">
+      <mat-error>{{ post_error }}</mat-error>
+    </div>
+
+    <div style="margin-top: 1rem;">
+      <!-- <div [innerHTML]="(POST$ | async) | jsonv"></div> -->
+      <div *ngIf="(POST$ | async) as postData">{{ postData | json }}</div>
+    </div>
+
+  </div>
+
+  <div style="margin-top: 2rem">
+    <mat-divider></mat-divider>
+  </div>
+
+  <div style="margin-top: 2rem">
+    <div style="display: flex;">
+      <h2 style="flex:1">PUT Request</h2>
+      <div>
+        <button mat-raised-button (click)="onUpdateRequest()" [disabled]="hasChanged" class="btn">Request</button>
+      </div>
+    </div>
+
+    <div *ngIf="(PUT_error$ | async) as put_error" style="margin-top: .5rem;">
+      <mat-error>{{ put_error }}</mat-error>
+    </div>
+
+    <div style="margin-top: 1rem;">
+      <!-- <div [innerHTML]="(PUT$ | async) | jsonv"></div> -->
+      <div *ngIf="(PUT$ | async) as putData">{{ putData | json }}</div>
+    </div>
+
+  </div>
+
+  <div style="margin-top: 2rem">
+    <mat-divider></mat-divider>
+  </div>
+
+  <div style="margin-top: 2rem">
+    <div style="display: flex;">
+      <h2 style="flex:1">DELETE Request</h2>
+      <div>
+        <button mat-raised-button (click)="onDeleteRequest()" [disabled]="hasChanged" class="btn">Request</button>
+      </div>
+    </div>
+
+    <div *ngIf="(DELETE_error$ | async) as delete_error" style="margin-top: .5rem;">
+      <mat-error>{{ delete_error }}</mat-error>
+    </div>
+
+    <div style="margin-top: 1rem;">
+      <!-- <div [innerHTML]="(DELETE$ | async) | jsonv"></div> -->
+      <div *ngIf="(DELETE$ | async) as deleteData">{{ deleteData | json }}</div>
+    </div>
+
+  </div>
+
+  <div style="margin-top: 2rem">
+    <mat-divider></mat-divider>
+  </div>
+
+  <div style="margin-top: 2rem">
+    <div style="display: flex;">
+      <h2 style="flex:1">Streaming GET Request</h2>
+      <div>
+        <button mat-raised-button (click)="onStreamRequest()" class="btn" [disabled]="hasChanged">Request</button>
+      </div>
+    </div>
+
+    <div *ngIf="(STREAM_error$ | async) as stream_error" style="margin-top: .5rem;">
+      <mat-error>{{ stream_error }}</mat-error>
+    </div>
+
+    <div style="margin-top: 1rem;">
+      <div *ngIf="(STREAM$ | async) as data" class="container">
+        <table mat-table [dataSource]="data">
+          <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="name">
+            <th mat-header-cell *matHeaderCellDef> First Name </th>
+            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="lastName">
+            <th mat-header-cell *matHeaderCellDef> Last Name </th>
+            <td mat-cell *matCellDef="let element"> {{element.lastName}} </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>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        </table>
+      </div>
+    </div>
+
+  </div>
+
+</div>

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

@@ -0,0 +1,24 @@
+.btn {
+    min-width: 120px;
+}
+
+.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;
+    background-color: whitesmoke;
+  }
+
+  .container {
+    height: 400px;
+    overflow: auto;
+  }
+
+  .box {
+    padding: 10px;
+    border: 1px solid #ccc;
+  }

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

@@ -0,0 +1,347 @@
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
+
+import { StateManagerDemoService } from './services/state-manager-demo.service';
+import { FormBuilder, Validators, FormArray } from '@angular/forms';
+
+import { Observable, BehaviorSubject, EMPTY, map, tap, catchError, throwError } from 'rxjs';
+
+import { ClientInfo } from '../request-manager-demo/models/sample-client-info';
+import { ClientInfoMapper } from '../request-manager-demo/models/sample-mapper-client-info';
+import { AIPrompt } from '../request-manager-demo/models/sample-ai-prompt';
+
+import { DataType } from '../../models';
+import { DatabaseStorage } from '../../models/database-storage.model';
+import { HTTPManagerService, ApiRequest } from '../../services';
+
+
+@Component({
+  selector: 'app-request-manager-state-demo',
+  templateUrl: './request-manager-state-demo.component.html',
+  styleUrls: ['./request-manager-state-demo.component.scss'],
+})
+export class RequestManagerStateDemoComponent implements OnInit {
+
+  stateManagerDemoService = inject(StateManagerDemoService)
+
+  displayedColumns = ['id','name', 'lastName', 'age']
+
+  selectedRecord$?: Observable<ClientInfo|null>
+
+  fb = inject(FormBuilder)
+
+  httpManagerService = inject(HTTPManagerService)
+
+  isPending$ = this.stateManagerDemoService.isPending$
+  error$ = this.stateManagerDemoService.error$
+
+  countdown$ = this.httpManagerService.countdown$
+
+  GET_error$ = new BehaviorSubject<string>('')
+  POST_error$ = new BehaviorSubject<string>('')
+  PUT_error$ = new BehaviorSubject<string>('')
+  DELETE_error$ = new BehaviorSubject<string>('')
+
+  STREAM_error$ = new BehaviorSubject<string>('')
+  STREAM_AI_error$ = new BehaviorSubject<string>('')
+
+  GET$ = new BehaviorSubject<any>(null)
+  POST$ = new BehaviorSubject(null)
+  PUT$ = new BehaviorSubject(null)
+  DELETE$ = new BehaviorSubject(null)
+
+  STREAM = new BehaviorSubject(null)
+  STREAM$ = this.STREAM.asObservable()
+
+  STREAM_AI = new BehaviorSubject<{response: string}[]>([])
+  STREAM_AI$ = this.STREAM_AI.asObservable()
+  .pipe(
+    map((items: any) => (items) ? items.map((item: any) => item.response) : []),
+    map((items: any) => items.join('\n').trim()),
+  )
+
+  @ViewChild("failedState", { static: true }) failedState: any
+  @ViewChild("pollingState", { static: true }) pollingState: any
+
+  questionControl = this.fb.control("", [Validators.required])
+
+  requestType = ''
+
+  prompts: string[] = []
+
+  AIType = 0
+
+  get dataObservable$() {
+
+    switch (this.requestType) {
+      case 'GET':
+        return this.GET$
+
+      case 'PUT':
+        return this.PUT$
+
+      case 'POST':
+        return this.POST$
+
+      case 'DELETE':
+        return this.DELETE$
+
+      case 'STREAM':
+        return this.STREAM
+
+      case 'STREAM_AI':
+        return this.STREAM_AI
+
+      default:
+        return this.GET$
+        break;
+    }
+
+  }
+
+  sampleClientData = {
+      id: 0,
+      name: "Old School Dates",
+      domain: "osd.com",
+      service: "osd",
+      spiffe: "osd.com/osd",
+      secret: "SMOPECXP-OS4P-USOG-X2II-3XMD1FQDR3IJX",
+      created: 1693003138,
+      modified: 1693003138,
+      icon: "",
+      imageFile: "",
+  }
+
+  selectedRecord = this.fb.control(null)
+
+  requestForm = this.fb.group({
+    datatype: this.fb.control('ARRAY'),
+    path: this.fb.control<string>("ai/"),
+    headers: this.fb.array([]),
+    adapter: [null],
+    mapper: [null],
+    retry: this.fb.group({
+    times: [3],
+    delay: [3],
+    }),
+    polling: [3],
+    database: this.fb.group({
+      table: [''],
+      expiresIn: ['1m'],
+    })
+  })
+
+  get hasChanged() {
+    return this.requestForm.dirty || this.requestForm.untouched
+  }
+
+  get dataType() {
+    return this.requestForm.get("datatype")?.value
+  }
+
+  get database() {
+    return this.requestForm.get("database")?.value
+  }
+
+  get retry() {
+    return this.requestForm.get("retry")?.value
+  }
+
+  sampleAdaptors = [
+    { label: "ClientInfo Basic", value: ClientInfo.adapt },
+    { label: "AI Prompt", value: AIPrompt.adapt },
+  ]
+
+  sampleMappers = [
+    { label: "Mapper Basic", value: ClientInfoMapper.adapt },
+    { label: "AI Prompt", value: AIPrompt.adapt },
+  ]
+
+  get headers(): FormArray {
+    return this.requestForm.get('headers') as FormArray
+  }
+
+  get isValid() {
+    this.requestForm.markAllAsTouched()
+    return this.requestForm.valid
+  }
+
+  // server = `http://sample-endpoint/as/authorization.oauth2`
+
+  arrayObjectsToObjects = (arr: any[]) => {
+    return Array.isArray(arr) ? arr.reduce((obj, item) => Object.assign(obj, { [item.key]: item.value }), {}) : {}
+  }
+
+  props = (adapter: any) => {
+    return (adapter) ? adapter() : null
+  }
+
+  constructor() { }
+
+  ngOnInit() {
+
+    this.stateManagerDemoService.data$.pipe(
+      tap((data) => console.log("API STREAM_AI response", data)),
+    )
+
+    this.error$.pipe(
+      tap((data) => {
+        debugger
+        console.log("API STREAM response", data)
+      }),
+      catchError(error => {
+        return throwError(() => this.errorHandling(error, 'STREAM'))
+      })
+    )
+
+    this.selectedRecord.valueChanges
+    .subscribe((data: ClientInfo|null) => {
+      this.selectedRecord$ = (data) ? this.stateManagerDemoService.selectRecord$(data.id) : EMPTY
+    })
+
+    this.stateManagerDemoService.data$
+    .pipe(
+      tap((data) => {
+
+        switch (this.requestType) {
+          case 'GET':
+            this.GET$.next(data)
+            break;
+
+          case 'PUT':
+            this.PUT$.next(data)
+            break;
+
+          case 'POST':
+            this.POST$.next(data)
+            break;
+
+          case 'DELETE':
+            this.DELETE$.next(data)
+            break;
+
+          case 'STREAM':
+            this.STREAM.next(data)
+            break;
+
+          case 'STREAM_AI':
+            this.STREAM_AI.next(data)
+            break;
+
+          default:
+            break;
+        }
+
+      })
+    ).subscribe()
+
+  }
+
+  addHeader() {
+    const header = this.fb.group({
+      key: ['', Validators.required],
+      value: ['']
+    });
+    this.headers.push(header)
+  }
+
+  removeHeader(index: number) {
+    this.headers.removeAt(index)
+  }
+
+  compileRequest() {
+
+    const requestParams = this.requestForm.value
+
+    requestParams.headers = this.arrayObjectsToObjects(
+      requestParams.headers || []
+    )
+
+    const pathReq = (requestParams.path === "") ? [] : (requestParams.path || "").split("/")
+
+    if (!this.pollingState.checked) requestParams.polling = 0
+
+    if (!this.failedState.checked) {
+      requestParams.retry = { times: 0,delay: 0 }
+    }
+
+    const currentOptions = ApiRequest.adapt(requestParams)
+    currentOptions.path = []
+    const apiOptions = ApiRequest.adapt({ ...currentOptions, path: pathReq })
+
+    return { apiOptions: apiOptions, path: pathReq }
+
+  }
+
+  onSetStateOptions() {
+
+    if(!this.isValid) return
+
+    const reqParams = this.compileRequest()
+
+    const db = DatabaseStorage.adapt(this.database)
+    const type = this.dataType === "ARRAY" ? DataType.ARRAY : DataType.OBJECT
+    this.stateManagerDemoService.setAPIOptions(reqParams.apiOptions, type, db)
+
+    this.requestForm.markAsPristine()
+  }
+
+  onClearRecords() {
+    this.stateManagerDemoService.clearRecords()
+  }
+
+  onRefreshRecords() {
+    this.stateManagerDemoService.refreshData()
+  }
+
+  onGetRequest() {
+    this.requestType = 'GET'
+    this.stateManagerDemoService.getClients()
+  }
+
+  onCreateRequest() {
+    this.requestType = 'POST'
+    this.stateManagerDemoService.createClient(this.sampleClientData)
+  }
+
+  onUpdateRequest() {
+    this.requestType = 'PUT'
+    this.stateManagerDemoService.updateClient(this.sampleClientData)
+  }
+
+  onDeleteRequest() {
+    this.requestType = 'DELETE'
+    this.stateManagerDemoService.deleteClient(this.sampleClientData)
+  }
+
+  onStreamRequest() {
+
+    if(!this.isValid) return
+
+    const reqParams = this.compileRequest()
+
+    reqParams.apiOptions.stream = true
+
+    this.requestType = 'STREAM'
+
+    this.stateManagerDemoService.streamRequest()
+
+  }
+
+  errorHandling(err: any, type: string) { console.log(err, type)
+    if(type === 'GET') this.GET_error$.next(err.message)
+    if(type === 'POST') this.POST_error$.next(err.message)
+    if(type === 'PUT') this.PUT_error$.next(err.message)
+    if(type === 'DELETE') this.DELETE_error$.next(err.message)
+    if(type === 'STREAM') this.STREAM_error$.next(err.message)
+    if(type === 'STREAM_AI') this.STREAM_AI_error$.next(err.message)
+  }
+
+  onSelectAIType(type: number) {
+    this.AIType = type
+  }
+
+  onClearHistory() {
+    this.prompts = []
+  }
+
+}