http-request-manager 15.0.24 → 15.0.26

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

@@ -0,0 +1,403 @@
+import { Component, 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 } from '../..'
+import { catchError, map, tap } from 'rxjs/operators'
+
+import { ToastColors, ToastDisplay, ToastMessageDisplayService } from 'toast-message-display'
+
+@Component({
+  selector: 'app-request-manager-demo',
+  templateUrl: './request-manager-demo.component.html',
+  styleUrls: ['./request-manager-demo.component.scss'],
+})
+export class RequestManagerDemoComponent implements OnInit {
+
+  displayedColumns = ['id','name', 'lastName', 'age']
+
+  private fb = inject(FormBuilder)
+  private toastMessage = inject(ToastMessageDisplayService)
+
+  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_AI$?: Observable<any>
+  STREAM$?: Observable<any>
+
+  requestParams = {
+    GET: ApiRequest.adapt(),
+    POST: ApiRequest.adapt(),
+    PUT: ApiRequest.adapt(),
+    DELETE: ApiRequest.adapt(),
+    STREAM: ApiRequest.adapt(),
+  }
+
+  @ViewChild("failedState", { static: true }) failedState: any
+  @ViewChild("pollingState", { static: true }) pollingState: any
+
+  questionControl = this.fb.control("", [Validators.required])
+
+  downloadRequest = ApiRequest.adapt({
+    server: 'assets/images',
+    path: ['me.jpg'],
+    // saveAs: 'john.jpg' // 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))
+
+  }
+
+  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 = []
+
+    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
+      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
+
+    this.requestParams.GET = reqParams.apiOptions
+    this.STREAM$ = this.httpManagerService.getRequest<ClientInfo[]>(reqParams.apiOptions, reqParams.path)
+        .pipe(
+      // tap((data) => console.log("API STREAM response", 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
+  }
+
+}