http-request-manager 15.0.26 → 18.0.2

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

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

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

@@ -1,347 +0,0 @@
-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 = []
-  }
-
-}