http-request-manager 18.7.19 → 18.7.21

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

@@ -0,0 +1,410 @@
+import { Component, OnInit, ViewChild, inject } from '@angular/core'
+
+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, HTTPManagerSignalsService } from '../..'
+
+import { ToastColors, ToastDisplay, ToastMessageDisplayService } from 'toast-message-display'
+
+@Component({
+    selector: 'app-request-signals-manager-demo',
+    templateUrl: './request-signals-manager-demo.component.html',
+    styleUrls: ['./request-signals-manager-demo.component.scss'],
+    standalone: false
+})
+export class RequestSignalsManagerDemoComponent implements OnInit {
+
+  displayedColumns = ['id','name', 'lastName', 'age']
+
+  private fb = inject(FormBuilder)
+  private toastMessage = inject(ToastMessageDisplayService)
+
+  httpManagerSignalsService = inject(HTTPManagerSignalsService)
+
+  // Using signals service: signals are callable in templates (e.g. isPending())
+  isPending = this.httpManagerSignalsService.isPending
+  countdown = this.httpManagerSignalsService.countdown
+
+  // per-operation plain results and error messages (no rxjs in component)
+  GET_result: any = null
+  POST_result: any = null
+  PUT_result: any = null
+  DELETE_result: any = null
+
+  STREAM_result: any = null
+  STREAM_AI_result: any = null
+
+  GET_error: string = ''
+  POST_error: string = ''
+  PUT_error: string = ''
+  DELETE_error: string = ''
+  STREAM_error: string = ''
+  STREAM_AI_error: string = ''
+
+  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
+
+    // reset local state
+    this.GET_result = null
+    this.GET_error = ''
+
+    this.httpManagerSignalsService.getRequest<ClientInfo[]>(reqParams.apiOptions, reqParams.path)
+      .subscribe({
+        next: (res) => this.GET_result = res,
+        error: (err) => this.errorHandling(err, 'GET')
+      })
+
+  }
+
+  onCreateRequest() {
+
+    if(!this.isValid) return
+
+    const reqParams = this.compileRequest()
+    this.requestParams.POST = reqParams.apiOptions
+
+    // reset local state
+    this.POST_result = null
+    this.POST_error = ''
+
+    this.httpManagerSignalsService.postRequest<ClientInfo>(this.sampleClientData, reqParams.apiOptions, reqParams.path)
+      .subscribe({
+        next: (res) => this.POST_result = res,
+        error: (err) => this.errorHandling(err, '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
+
+    // reset local state
+    this.PUT_result = null
+    this.PUT_error = ''
+
+    this.httpManagerSignalsService.putRequest<any>(this.sampleClientData, reqParams.apiOptions, reqParams.path)
+      .subscribe({
+        next: (res) => this.PUT_result = res,
+        error: (err) => this.errorHandling(err, '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
+
+    // reset local state
+    this.DELETE_result = null
+    this.DELETE_error = ''
+
+    this.httpManagerSignalsService.deleteRequest<ClientInfo>(reqParams.apiOptions, reqParams.path)
+      .subscribe({
+        next: (res) => this.DELETE_result = res,
+        error: (err) => this.errorHandling(err, '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_result = null
+    this.STREAM_AI_error = ''
+
+    this.httpManagerSignalsService.postRequest<any>(payload, apiOptions, apiPath)
+      .subscribe({
+        next: (res) => {
+          try {
+            this.STREAM_AI_result = responseMapper(res)
+          } catch (e) {
+            this.STREAM_AI_result = res
+          }
+          this.questionControl.reset()
+        },
+        error: (err) => this.errorHandling(err, 'STREAM')
+      })
+
+  }
+
+
+  onStreamRequest() {
+
+    if(!this.isValid) return
+
+    const reqParams = this.compileRequest()
+
+    reqParams.apiOptions.stream = true
+
+    this.requestParams.GET = reqParams.apiOptions
+    this.STREAM_result = null
+    this.STREAM_error = ''
+
+    this.httpManagerSignalsService.getRequest<ClientInfo[]>(reqParams.apiOptions, reqParams.path)
+      .subscribe({
+        next: (res) => this.STREAM_result = res,
+        error: (err) => this.errorHandling(err, '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) {
+    const message = err?.message || String(err)
+    // set local error state
+    if (type === 'GET') this.GET_error = message
+    if (type === 'POST') this.POST_error = message
+    if (type === 'PUT') this.PUT_error = message
+    if (type === 'DELETE') this.DELETE_error = message
+    if (type === 'STREAM') this.STREAM_error = message
+
+    // also set the shared service error signal
+    this.httpManagerSignalsService.error.set(message)
+
+    return err
+  }
+
+  onSelectAIType(type: number) {
+    this.AIType = type
+  }
+
+}

package/src/lib/http-request-services-demo/store-state-manager-demo/models/settings.model.ts

@@ -0,0 +1,28 @@
+export interface SettingsInterface {
+  enum_1: any
+  enum_2: any
+  enum_3: any
+  enum_4: any
+}
+
+export class Settings implements SettingsInterface {
+
+  constructor(
+    public enum_1 = [],
+    public enum_2 = [],
+    public enum_3 = [],
+    public enum_4 = [],
+  ) {}
+
+  static adapt(item?: any): Settings {
+
+    return new Settings(
+      item?.enum_1,
+      item?.enum_2,
+      item?.enum_3,
+      item?.enum_4,
+    )
+
+  }
+
+}

package/src/lib/http-request-services-demo/store-state-manager-demo/services/settings-state.service.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+
+import { map } from 'rxjs';
+
+import { SettingOptions, StorageType } from '../../../services';
+import { StoreStateManagerService, StateStorageOptions } from '../../../services/store-state-manager-service';
+import { Settings } from '../models/settings.model';
+
+
+@Injectable()
+export class SettingsStateService extends StoreStateManagerService {
+
+  constructor() {
+
+    super(
+      StateStorageOptions.adapt({
+      store: 'sampleStore',
+      options: SettingOptions.adapt({
+        storage: StorageType.SESSION,
+        encrypted: false
+      }),
+      model: Settings.adapt,
+    }
+  ))
+
+  }
+
+  updateEnum_1(value: any) {
+    this.updateData(value)
+  }
+
+  updateEnum_2(value: any) {
+    this.updateData(value)
+  }
+
+  getEnum(key: string) {
+    return this.data$.pipe(
+      map(item => item[key])
+    )
+  }
+
+  getEnum_1() {
+    return this.data$.pipe(
+      map(item => item?.enum_1)
+    )
+  }
+
+}

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

@@ -0,0 +1,23 @@
+<div style="margin: 2rem;">
+
+  <h2>
+    <span>Store State Manager</span>
+    <span style="margin-left: .5rem;">
+      <mat-icon color="accent">fiber_new</mat-icon>
+    </span>
+  </h2>
+
+  {{ dataState$ | async | json}}
+
+  <div style="display: flex; gap:.5rem; margin-top: 1rem; margin-bottom: 1rem;">
+    <button mat-stroked-button (click)="onUpdateEnum_1()">Update Start</button>
+    <button mat-stroked-button (click)="onUpdateEnum_2()">Update End</button>
+    <button mat-stroked-button (click)="onGetEnum_1()">Dump</button>
+  </div>
+
+  <div>
+    <h3 style="margin: 0;">Enum 1</h3>
+    {{ dataEnum$ | async | json}}
+  </div>
+
+</div>

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

@@ -0,0 +1,36 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { RandomNumber } from '../../services';
+import { SettingsStateService } from './services/settings-state.service';
+
+@Component({
+    selector: 'app-store-state-manager-demo',
+    templateUrl: './store-state-manager-demo.component.html',
+    styleUrls: ['./store-state-manager-demo.component.css'],
+    providers: [SettingsStateService],
+    standalone: false
+})
+export class StoreStateManagerDemoComponent implements OnInit {
+
+  settingsStateService = inject(SettingsStateService)
+  dataState$ = this.settingsStateService.data$
+
+  dataEnum$ = this.settingsStateService.getEnum_1()
+
+  ngOnInit() {
+  }
+
+  onUpdateEnum_1() {
+    const rnd = RandomNumber(1000, 9999)
+    this.settingsStateService.updateEnum_1({enum_1: [{ users: [1,2,3, rnd], random: rnd }]})
+  }
+
+  onUpdateEnum_2() {
+    const rnd = RandomNumber(1000, 9999)
+    this.settingsStateService.updateEnum_2({enum_2: [{ users: [1,2,3, rnd], random: rnd }]})
+  }
+
+  onGetEnum_1() {
+    this.settingsStateService.getEnum_1().subscribe(data => console.log('DUMP:', data))
+  }
+
+}

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+export * from "./services/index"
+export * from "./interceptors/index"
+export * from "./models/index"

package/src/lib/interceptors/credentials.interceptor.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class WithCredentialsInterceptor implements HttpInterceptor {
+
+  intercept(req: HttpRequest<any>, next: HttpHandler):
+    Observable<HttpEvent<any>> {
+
+      req = req.clone({ withCredentials: true })
+
+      return next.handle(req);
+  }
+}

package/src/lib/interceptors/index.ts

@@ -0,0 +1,6 @@
+
+export * from "./models/index";
+
+export * from "./credentials.interceptor";
+export * from "./request-header.interceptor";
+export * from "./request-error.interceptor";

package/src/lib/interceptors/models/error-settings.model.ts

@@ -0,0 +1,22 @@
+export interface ErrorDisplaySettingsInterface {
+  displayTime: number
+  position: string
+}
+
+export class ErrorDisplaySettings implements ErrorDisplaySettingsInterface {
+
+  constructor(
+    public displayTime = 3 * 1000,
+    public position = 'top'
+  ) {}
+
+  static adapt(item?: any): ErrorDisplaySettings {
+
+    return new ErrorDisplaySettings(
+      (item?.displayTime) ? item.displayTime * 1000 : 3 * 1000,
+      item?.position,
+    )
+
+  }
+
+}

package/src/lib/interceptors/models/index.ts

@@ -0,0 +1,2 @@
+
+export * from "./error-settings.model";

package/src/lib/interceptors/proxy-debugger.interceptor.ts

@@ -0,0 +1,46 @@
+import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
+import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+export const PROXY_CONFIG = new InjectionToken<Record<string, any>>('PROXY_CONFIG');
+
+@Injectable()
+export class ProxyDebuggerInterceptor implements HttpInterceptor {
+
+  constructor(@Optional() @Inject(PROXY_CONFIG) private proxyConfig: Record<string, any>) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+
+    if (!this.proxyConfig) {
+      return next.handle(req);
+    }
+
+    const headers = req.headers.keys().reduce((acc, key) => {
+      acc[key] = req.headers.get(key) || '';
+      return acc;
+    }, {} as Record<string, string>);
+
+    for (const proxyPath in this.proxyConfig) {
+      if (this.proxyConfig.hasOwnProperty(proxyPath)) {
+        const proxyDetails = this.proxyConfig[proxyPath];
+        const regex = new RegExp('^' + proxyPath.replace('/', '').replace('*', '(.*)'));
+
+        if (regex.test(req.url)) {
+          const target = proxyDetails.target;
+          const endpoint = req.url.replace(regex, '$1');
+          const actualPath = target + '/' + endpoint;
+
+          console.log('Request Proxied:', {
+            requestUrl: req.url,
+            requestPayload: req.body,
+            headers: headers,
+            proxyPath: proxyPath,
+            actualPath: actualPath,
+          });
+        }
+      }
+    }
+
+    return next.handle(req);
+  }
+}