http-request-manager 18.15.33 → 18.15.34

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

@@ -0,0 +1,461 @@
+import { Component, Input, OnInit, ViewChild, inject } from '@angular/core'
+
+import { BehaviorSubject, EMPTY, Observable, throwError } from 'rxjs'
+import { FormArray, FormBuilder, Validators } from '@angular/forms'
+
+import { ClientInfo } from './models/sample-client-info'
+import { ClientInfoMapper } from './models/sample-mapper-client-info'
+import { AIPrompt } from './models/sample-ai-prompt'
+import { ApiRequest, HTTPManagerService, StreamType } from '../..'
+import { catchError, map, tap } from 'rxjs/operators'
+
+import { ToastColors, ToastDisplay, ToastMessageDisplayService } from 'toast-message-display'
+
+@Component({
+    selector: 'app-request-manager-basic-demo',
+    templateUrl: './request-manager-basic-demo.component.html',
+    styleUrls: ['./request-manager-basic-demo.component.scss'],
+    providers: [HTTPManagerService],
+    standalone: false
+})
+export class RequestManagerBasicDemoComponent implements OnInit {
+
+  server = 'http://localhost:8080'
+  adapter?: Function
+  mapper?: Function
+
+  displayedColumns: string[] = []
+
+  // Dynamic columns based on data structure
+  getColumnsFromData(data: any[]): string[] {
+    if (!data || data.length === 0) {
+      return []
+    }
+
+    const firstRecord = data[0]
+    if (!firstRecord || typeof firstRecord !== 'object') {
+      return []
+    }
+
+    // Extract all keys from the first record, excluding null/undefined
+    return Object.keys(firstRecord).filter(key =>
+      firstRecord[key] !== null && firstRecord[key] !== undefined
+    )
+  }
+
+  // Update displayed columns when data changes
+  updateDisplayedColumns(data: any[]): void {
+    this.displayedColumns = this.getColumnsFromData(data)
+    console.log('[DEMO] Updated columns:', this.displayedColumns)
+  }
+
+  // Helper to check if value is an object
+  isObject(value: any): boolean {
+    return value !== null && typeof value === 'object' && !Array.isArray(value)
+  }
+
+  private fb = inject(FormBuilder)
+  private toastMessage = inject(ToastMessageDisplayService)
+
+  questionControl = this.fb.control("", [Validators.required])
+
+  httpManagerService = inject(HTTPManagerService)
+
+  isPending$ = this.httpManagerService.isPending$
+  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$?: Observable<any>
+  POST$?: Observable<any>
+  PUT$?: Observable<any>
+  DELETE$?: Observable<any>
+
+  STREAM$?: Observable<any>
+  STREAM_AI$?: Observable<any>
+
+  requestParams = {
+    GET: ApiRequest.adapt(),
+    POST: ApiRequest.adapt(),
+    PUT: ApiRequest.adapt(),
+    DELETE: ApiRequest.adapt(),
+    STREAM: ApiRequest.adapt(),
+  }
+
+  streamTypes = [
+    { id: 'JSON', value: 'json' },
+    { id: 'NDJSON', value: 'ndjson' },
+    { id: 'AI Streaming', value: 'ai_streaming' },
+    { id: 'Event Stream', value: 'event_stream' },
+    { id: 'Auto', value: 'auto' },
+  ]
+
+  streamType = 'Auto'
+
+  @ViewChild("failedState", { static: true }) failedState: any
+  @ViewChild("pollingState", { static: true }) pollingState: any
+
+  downloadRequest = ApiRequest.adapt({
+    server: 'assets/images',
+    path: ['lego.png'],
+    saveAs: 'john.jpg', // Optional
+    headers: { 'Authorization': 'Bearer Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6InJ0c0ZULWItN0x1WTdEVlllU05LY0lKN1ZuYyJ9.eyJhdWQiOiI4ODhhMzFjZS01OWQzLTRhMTItYTU5Ni04ZDYyZjY0MWI1MDUiLCJpc3MiOiJodHRwczovL2xvZ2luLm1pY3Jvc29mdG9ubGluZS5jb20vNmY0MTE5ODItY2YyMy00ZTQ1LTk0NDktNGI2MDdiN2E4OGVjL3YyLjAiLCJpYXQiOjE3NjU4MzQxNDksIm5iZiI6MTc2NTgzNDE0OSwiZXhwIjoxNzY1ODM5NzQ2LCJhY2N0IjowLCJhaW8iOiJBV1FBbS84YUFBQUFVUEZOYUhSZkZ4ZVkwRWthcFBzdWZaNG1QYXV6YVRoODRRZUtQRzkrbEFIVE5XanVwQy9ZSjEwK2IrMktWVlJSSXZRNFpwS2xyWTFGd0xRZmtXOTNLbkRNckxSeEMzWTVOOGlQREZ4b1liZExucW1QL1N1ZE1pRW1Va05tTklSWSIsImF6cCI6Ijg4OGEzMWNlLTU5ZDMtNGExMi1hNTk2LThkNjJmNjQxYjUwNSIsImF6cGFjciI6IjAiLCJncm91cHMiOlsiZWE2ZDk5YjAtNDgyNC00MDU0LTk0MTQtZDNhOTZkZDA3MjRiIl0sIm5hbWUiOiJHVExDIEFwcCBTdXBlciBBZG1pbiIsIm9pZCI6IjI2NzUxY2I2LWNlMDEtNDMzMC05OTc0LWZjMzgxMjQ3YTEzYyIsInByZWZlcnJlZF91c2VybmFtZSI6Imd0bGMwMDNAZ3RsYy5jYSIsInJoIjoiMS5BUzRBZ2hsQmJ5UFBSVTZVU1V0Z2UzcUk3TTR4aW9qVFdSSktwWmFOWXZaQnRRVm1BYTR1QUEuIiwicm9sZXMiOlsiZ3RsYy5hY2wuc3VwZXJhZG1pbiJdLCJzY3AiOiJHVExDX0FwcGxpY2F0aW9uIiwic2lkIjoiMDAzZjVhZDktZmJmNi1jZTkyLTg3MjItMWEzNDExYjMzMDJiIiwic3ViIjoiS0RYQ3drVlhUbTRUUmcwaTkxbXZDZzgtQ29uLXpWbk5FQ2Y5LVg0dkpzUSIsInRpZCI6IjZmNDExOTgyLWNmMjMtNGU0NS05NDQ5LTRiNjA3YjdhODhlYyIsInVwbiI6Imd0bGMwMDNAZ3RsYy5jYSIsInV0aSI6InpBaTJoMmpVUUVHbVY0RTJXMWxqQUEiLCJ2ZXIiOiIyLjAiLCJ3aWRzIjpbImI3OWZiZjRkLTNlZjktNDY4OS04MTQzLTc2YjE5NGU4NTUwOSJdLCJ4bXNfZnRkIjoiUDJraW1ZM0tqc1BTRndxNHlZdmJ0bGhrSUk3d2tXNmFpcW1FQ1BaNEdja0JkWE5sWVhOMExXUnpiWE0ifQ.LzppoggMm27smSAy9SamtPN95vCzdELCAfhtOj5n_T_H6g9xCmNRLS9FaUFQMau6Qvl0lROKl7WDklTswLFkfxbIxCBWtXdL-LTqT5cDURSJAll8vC3zlN3Hg9pAFBUVZFRolt6Z7LvPdI3pvUOQs0yFwVzp9k6cLF8aemKdwKQrMX3XXua1MfBWZcqQ4WiBVNmKh8w6yQB35I4u5WqdFnu33nUGb-kvc18SOpoUfiJnlV-PudaEzFXdU3CjAaMEcuPFv5xLwWJKuhU73dNH4EyQDFMVGtcIHNnieOfiY_nK2_0-5DM6aI40UIRK6Bt-HmMQpnbhLps5y3ep6Z7RNw' } // Optional
+  })
+
+  // downloadRequest = ApiRequest.adapt({
+  //   server: 'oidc/ai/file'
+  // })
+
+  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: "",
+      email: "wavecoders@gmail.com"
+  }
+
+  requestForm = this.fb.group({
+    path: this.fb.control<string>("ai/"),
+    headers: this.fb.array([]),
+    adapter: [null],
+    mapper: [null],
+    retry: this.fb.group({
+      times: [3],
+      delay: [3],
+    }),
+    polling: [3],
+  })
+
+  AIType = 0
+
+  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 retry() {
+    return this.requestForm.get('retry')?.value
+  }
+
+  get headers(): FormArray {
+    return this.requestForm.get('headers') as FormArray
+  }
+
+  get isValid() {
+    this.requestForm.markAllAsTouched()
+    return this.requestForm.valid
+  }
+
+  hasId = (arr: any[]) => {
+    if (arr.length === 0) return false
+    return !isNaN(arr[arr.length - 1])
+  }
+
+  props = (adapter: any) => {
+    return (adapter) ? adapter() : null
+  }
+
+  // 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 }), {}) : {}
+  }
+
+  constructor() { }
+
+  ngOnInit() {
+
+    // const reqGet2 = ApiRequest.adapt({
+    //   server,
+    //   path: ['clients'],
+    //   headers: { authentication: "Bearer <KEY>" },
+    //   adapter: ClientInfo,
+    //   dataType: DataType.OBJECT,
+    //   // concurrent: false,
+    //   // polling: 3, //seconds
+    // })
+
+    // const req2 = [1024,1025,1026].map(item => {
+    //   return this.httpManagerService.getRequest<ClientInfo[]>(reqGet2, [item])
+    //   .pipe(
+    //     catchError(error => {
+    //       return throwError(() => new Error(error.error.message))
+    //     })
+    //   )
+    // })
+
+    // forkJoin(req2)
+    // .subscribe(res => console.log(res))
+
+  }
+
+  onStreamType(type: string) {
+    this.streamType = type
+  }
+
+  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 apiOptions = ApiRequest.adapt(requestParams)
+    apiOptions.path = []
+    apiOptions.server = this.server
+    apiOptions.adapter = this.adapter
+    apiOptions.mapper = this.mapper
+    return { apiOptions: apiOptions, path: pathReq }
+
+  }
+
+  onGetRequest() {
+
+    if(!this.isValid) return
+
+    const reqParams = this.compileRequest()
+
+    this.requestParams.GET = reqParams.apiOptions
+
+    this.GET$ = EMPTY //Cancels Previous
+    this.GET_error$.next('')
+
+    this.GET$ = this.httpManagerService.getRequest<ClientInfo[]>({...reqParams.apiOptions}, reqParams.path)
+    .pipe(
+      // tap((data) => console.log("API GET response", data)),
+      catchError(error => {
+        return throwError(() => this.errorHandling(error, 'GET'))
+      })
+    )
+
+  }
+
+  onCreateRequest() {
+
+    if(!this.isValid) return
+
+    const reqParams = this.compileRequest()
+    this.requestParams.POST = reqParams.apiOptions
+
+    this.POST$ = EMPTY //Cancels Previous
+    this.POST_error$.next('')
+
+    console.log("POST", this.sampleClientData)
+    console.log("POST", reqParams.apiOptions)
+    console.log("POST", reqParams.path)
+
+    this.POST$ = this.httpManagerService.postRequest<ClientInfo>(this.sampleClientData, reqParams.apiOptions, reqParams.path)
+    .pipe(
+      // tap((data) => console.log("API POST response", data)),
+      catchError(error => {
+        return throwError(() => this.errorHandling(error, 'POST'))
+      })
+    )
+
+  }
+
+  onUpdateRequest() {
+
+    if(!this.isValid) return
+
+    const reqParams = this.compileRequest()
+
+    if(!this.hasId(reqParams.path)) {
+      console.log("Missing ID")
+      return
+    }
+
+    this.sampleClientData.id = parseInt(reqParams.path[reqParams.path.length-1])
+    this.requestParams.PUT = reqParams.apiOptions
+
+    this.PUT$ = EMPTY //Cancels Previous
+    this.PUT_error$.next('')
+
+    this.PUT$ = this.httpManagerService.putRequest<any>(this.sampleClientData, reqParams.apiOptions, reqParams.path)
+    .pipe(
+      // tap((data) => console.log("API PUT response", data)),
+      catchError(error => {
+        return throwError(() => this.errorHandling(error, 'PUT'))
+      })
+    )
+
+  }
+
+  onDeleteRequest() {
+
+    if(!this.isValid) return
+
+    const reqParams = this.compileRequest()
+    this.requestParams.DELETE = reqParams.apiOptions
+
+    if(!this.hasId(reqParams.path)) {
+      console.log("Missing ID")
+      return
+    }
+
+    this.sampleClientData.id = parseInt(reqParams.path[reqParams.path.length-1])
+    this.requestParams.DELETE = reqParams.apiOptions
+
+    this.DELETE$ = EMPTY //Cancels Previous
+    this.DELETE_error$.next('')
+
+    this.DELETE$ = this.httpManagerService.deleteRequest<ClientInfo>(reqParams.apiOptions, reqParams.path)
+    .pipe(
+      // tap((data) => console.log("API DELETE response", data)),
+      catchError(error => {
+        return throwError(() => this.errorHandling(error, 'DELETE'))
+      })
+    )
+
+  }
+
+  onStreamPostRequest() {
+
+    if (!this.isValid) return
+
+    const reqParams = this.compileRequest()
+
+    let payload = {}
+    let apiPath: string[] = reqParams.path
+    let apiOptions = reqParams.apiOptions
+    let responseMapper: (items: any) => any = (items) => items.response
+
+    if (this.AIType === 0) {
+
+      // API request
+      payload = { prompt: this.questionControl.value }
+
+    } else {
+
+      // Local Ollama request
+      apiOptions.server = "api"
+      apiPath = ["generate"]
+      apiOptions.stream = true
+      apiOptions.streamType = this.streamType as StreamType
+      payload = {
+        model: "phi3:latest",
+        prompt: this.questionControl.value,
+        stream: true,
+      }
+
+      responseMapper = (items) => items.map((word: any) => word.response).flat().join('')
+
+    }
+
+    this.requestParams.STREAM = apiOptions
+    this.STREAM_AI$ = EMPTY
+    this.STREAM_AI_error$.next('')
+
+    this.STREAM_AI$ = this.httpManagerService.postRequest<any>(payload, apiOptions, apiPath).pipe(
+      map(responseMapper),
+      tap(() => this.questionControl.reset()),
+      catchError(error => throwError(() => this.errorHandling(error, 'STREAM')))
+    )
+
+  }
+
+
+  onStreamRequest() {
+
+    if(!this.isValid) return
+
+    const reqParams = this.compileRequest()
+
+    reqParams.apiOptions.stream = true
+    reqParams.apiOptions.streamType = StreamType.NDJSON
+
+    this.requestParams.GET = reqParams.apiOptions
+    this.STREAM$ = this.httpManagerService.getRequest<ClientInfo[]>(reqParams.apiOptions, reqParams.path)
+        .pipe(
+      tap((data) => {
+        console.log("API STREAM response", data)
+        if (data && data.length > 0) {
+          this.updateDisplayedColumns(data)
+        }
+      }),
+      catchError(error => {
+        return throwError(() => this.errorHandling(error, 'STREAM'))
+      })
+    )
+
+  }
+
+  onDownloadCompleted() {
+
+    const message = "Download Completed"
+
+    const display = ToastDisplay.adapt({
+      message,
+      action: 'Ok',
+      color: ToastColors.SUCCESS,
+      icon: 'sentiment_satisfied_alt',
+    })
+
+    this.toastMessage.toastMessage(display)
+  }
+
+  onDownloadFailed(err: string) {
+
+    const message = "Download Failed"
+
+    const display = ToastDisplay.adapt({
+      message,
+      action: 'Ok',
+      color: ToastColors.ERROR,
+      icon: 'warning',
+    })
+
+    this.toastMessage.toastMessage(display)
+  }
+
+  errorHandling(err: any, type: string) {
+    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)
+  }
+
+  onSelectAIType(type: number) {
+    this.AIType = type
+  }
+
+}

package/src/lib/http-request-services-demo/request-manager-demo/file-downloader/download-file/download-file.component.html

@@ -0,0 +1,53 @@
+@if (!isPending) {
+  @if (hasError) {
+    <div class="width center-txt" style="margin-bottom: 4px;">
+      <mat-icon color="warn" class="warn-icon">warning</mat-icon>
+    </div>
+  } @else {
+    @if (active) {
+      <div class="container-obj">
+        <div class="centered-obj-div">
+          <mat-progress-spinner
+            color="primary"
+            mode="indeterminate"
+            [diameter]="44"
+          ></mat-progress-spinner>
+        </div>
+      </div>
+    } @else {
+      <button data-tracking="export-btn" mat-icon-button (click)="onAction()" class="icon-button" [disabled]="disabled">
+        <mat-icon class="custom-icon">file_download</mat-icon>
+      </button>
+    }
+  }
+} @else {
+  @if ((progress > 0 && progress < 100)) {
+    <div
+      class="spinner-container"
+      >
+      <div class="spinner-background">
+        {{progress}}%
+      </div>
+      <mat-progress-spinner
+        color="primary"
+        [mode]="mode"
+        [value]="progress"
+        [diameter]="44"
+      ></mat-progress-spinner>
+    </div>
+  } @else {
+    <div class="container-obj">
+      <div class="centered-obj-div">
+        <mat-progress-spinner
+          color="primary"
+          mode="indeterminate"
+          [diameter]="44"
+        ></mat-progress-spinner>
+      </div>
+    </div>
+  }
+}
+
+
+
+

package/src/lib/http-request-services-demo/request-manager-demo/file-downloader/download-file/download-file.component.scss

@@ -0,0 +1,60 @@
+:not(spinner-container).spinner-container {
+  position: relative;
+
+  .spinner-background {
+    position: absolute;
+    width: 44px;
+    height: 44px;
+    font-size: 12px;
+    line-height: 32px;
+    text-align: center;
+    overflow: hidden;
+    border-radius: 50%;
+    border: solid 5px whitesmoke;
+  }
+
+}
+
+.center-txt {
+  align-content: center;
+  text-align: -webkit-center;
+}
+
+.width {
+  width: 48px;
+  height: 48px;
+}
+
+.icon-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  padding: 0;
+}
+
+// .custom-icon {
+//   font-size: 32px;
+//   line-height: 1;
+//   position: relative;
+//   left: -4px;
+// }
+
+.container-obj {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 48px;
+}
+
+.centered-obj-div {
+  text-align: center
+}
+
+// .warn-icon {
+//   position: relative;
+//   top: 6px;
+//   width: 48px;
+// }

package/src/lib/http-request-services-demo/request-manager-demo/file-downloader/download-file/download-file.component.ts

@@ -0,0 +1,72 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
+import { Subscription, timer } from 'rxjs';
+
+@Component({
+    selector: 'app-download-file',
+    templateUrl: './download-file.component.html',
+    styleUrls: ['./download-file.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class DownloadFileComponent implements OnInit {
+
+  private subscriptions = new Subscription();
+
+  @Input() event?: Function;
+  @Input() displayError = 3; // seconds
+  @Input() diameter = 32;
+  @Input() mode: ProgressSpinnerMode = 'determinate';
+  @Input() isPending = false;
+
+  @Input() active = false;
+  @Input() disabled = false;
+
+  @Output() error = new EventEmitter<void>();
+
+  private _progress = 0;
+  @Input() set progress(value: any) {
+    this._progress = value ?? 0;
+  }
+
+  get progress() {
+    return this._progress;
+  }
+
+  private _hasError = false;
+  private errorTimerActive = false;
+
+  @Input() set hasError(value: boolean | any) {
+
+    this._hasError = !!value;
+
+    if (this._hasError && !this.errorTimerActive) {
+      this.errorTimerActive = true;
+      this.active = false;
+      this.error.emit()
+      this.subscriptions.add(
+        timer(this.displayError * 1000)
+        .subscribe((err) => {
+          this._hasError = false;
+          this.errorTimerActive = false;
+        })
+      );
+    }
+
+  }
+
+  get hasError() {
+    return this._hasError;
+  }
+
+  ngOnInit() {}
+
+  onAction() {
+    this.isPending = false
+    if (this.event) this.event()
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe()
+  }
+}

package/src/lib/http-request-services-demo/request-manager-demo/file-downloader/file-download.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DownloadFileComponent } from './download-file/download-file.component';
+import { FileDownloaderComponent } from './file-downloader.component';
+
+import { SpinnerComponent } from './spinner/spinner.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatButtonModule } from '@angular/material/button';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatButtonModule,
+  ],
+  declarations: [
+    SpinnerComponent,
+    DownloadFileComponent,
+    FileDownloaderComponent,
+  ],
+  exports: [
+    FileDownloaderComponent
+  ]
+})
+export class FileDownloaderModule { }

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

@@ -0,0 +1,10 @@
+<app-download-file
+  [disabled]="disabled"
+  [displayError]="3"
+  [event]="onDownloadStreaming.bind(this)"
+  [isPending]="(isPending$ | async) || false"
+  [progress]="(progress$ | async)"
+  [hasError]="(error$ | async)"
+  (error)="onError(labels.error)"
+  [active]="active"
+></app-download-file>