http-request-manager 18.15.33 → 18.15.34

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

@@ -0,0 +1,576 @@
+import { Component, Input, OnInit, ViewChild, inject } from '@angular/core';
+
+import { StateManagerDemoService } from './services/state-manager-demo.service';
+import { DatabaseManagerService } from '../../services/database-manager-service/database.manager.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 } from '../../services/request-manager-services/http-manager.service';
+import { ApiRequest } from '../../services/request-manager-state-service/models/api-request.model';
+import { StreamType } from '../../services/request-manager-state-service/models/stream-type.enum';
+import { RequestOptions } from '../../services/request-manager-state-service/models/request-options.model';
+
+
+@Component({
+    selector: 'app-request-manager-state-demo',
+    templateUrl: './request-manager-state-demo.component.html',
+    styleUrls: ['./request-manager-state-demo.component.scss'],
+    providers: [StateManagerDemoService, HTTPManagerService],
+    standalone: false
+})
+export class RequestManagerStateDemoComponent implements OnInit {
+
+  @Input() server = 'http://localhost:8080'
+  @Input() adapter?: Function
+  @Input() mapper?: Function
+
+  stateManagerDemoService = inject(StateManagerDemoService)
+  databaseManagerService = inject(DatabaseManagerService)
+
+  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('[STATE 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)
+  }
+
+  getRecordLabel(item: any): string {
+    if (!item || typeof item !== 'object') {
+      return ''
+    }
+
+    return this.normalizeLabelValue(item.name) || this.normalizeLabelValue(item.first_name)
+  }
+
+  private normalizeLabelValue(value: any): string {
+    if (typeof value === 'string') {
+      return value
+    }
+
+    if (typeof value === 'number' || typeof value === 'boolean') {
+      return String(value)
+    }
+
+    return ''
+  }
+
+  // Helper to safely get data length
+  getDataLength(data: any): number {
+    if (Array.isArray(data)) {
+      return data.length
+    }
+    return 0
+  }
+
+  selectedRecord$?: Observable<ClientInfo|null>
+
+  fb = inject(FormBuilder)
+
+  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'
+
+  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
+  @ViewChild("DBState", { static: true }) DBState: 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'],
+      ignoreQueryParams: [''],
+      queryParamsExpiresIn: ['never'],
+    })
+  })
+
+  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: any) => {
+        // console.log('[COMPONENT] State data received:', data)
+
+        switch (this.requestType) {
+          case 'GET':
+            // console.log('[COMPONENT] Updating GET$ with data:', data)
+            this.GET$.next(data)
+            break;
+
+          case 'PUT':
+            // console.log('[COMPONENT] Updating PUT$ with data:', data)
+            this.PUT$.next(data)
+            break;
+
+          case 'POST':
+            // console.log('[COMPONENT] Updating POST$ with data:', data)
+            this.POST$.next(data)
+            break;
+
+          case 'DELETE':
+            // console.log('[COMPONENT] Updating DELETE$ with data:', data)
+            this.DELETE$.next(data)
+            break;
+
+          case 'STREAM':
+            // console.log('[COMPONENT] Updating STREAM$ with data:', data)
+            this.STREAM.next(data)
+            // Update table columns dynamically based on streaming data
+            if (data && Array.isArray(data) && data.length > 0) {
+              this.updateDisplayedColumns(data)
+            }
+            break;
+
+          case 'STREAM_AI':
+            // console.log('[COMPONENT] Updating STREAM_AI$ with data:', data)
+            this.STREAM_AI.next(data)
+            break;
+
+          default:
+            // console.log('[COMPONENT] No requestType set, ignoring data')
+            break;
+        }
+
+      })
+    ).subscribe()
+
+  }
+
+  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)
+  }
+
+  private parsePathInput(pathInput?: string): any[] {
+    const raw = typeof pathInput === 'string' ? pathInput.trim() : ''
+
+    if (!raw) {
+      return []
+    }
+
+    const [rawPath = '', rawQuery = ''] = raw.split('?', 2)
+    const pathSegments = rawPath
+      .split('/')
+      .map((segment) => segment.trim())
+      .filter((segment) => segment.length > 0)
+      .map((segment) => decodeURIComponent(segment))
+
+    if (!rawQuery) {
+      return pathSegments
+    }
+
+    const searchParams = new URLSearchParams(rawQuery)
+    const queryObject: Record<string, any> = {}
+
+    searchParams.forEach((value, key) => {
+      const normalizedKey = key.trim()
+
+      if (!normalizedKey) {
+        return
+      }
+
+      const normalizedValue = this.normalizeQueryValue(value)
+
+      if (Object.prototype.hasOwnProperty.call(queryObject, normalizedKey)) {
+        const currentValue = queryObject[normalizedKey]
+        queryObject[normalizedKey] = Array.isArray(currentValue)
+          ? [...currentValue, normalizedValue]
+          : [currentValue, normalizedValue]
+        return
+      }
+
+      queryObject[normalizedKey] = normalizedValue
+    })
+
+    return Object.keys(queryObject).length > 0
+      ? [...pathSegments, queryObject]
+      : pathSegments
+  }
+
+  private normalizeQueryValue(value: string): string | number | boolean {
+    const trimmedValue = value.trim()
+    const lowerValue = trimmedValue.toLowerCase()
+
+    if (lowerValue === 'true') {
+      return true
+    }
+
+    if (lowerValue === 'false') {
+      return false
+    }
+
+    if (trimmedValue !== '' && !Number.isNaN(Number(trimmedValue))) {
+      return Number(trimmedValue)
+    }
+
+    return trimmedValue
+  }
+
+  compileRequest() {
+
+    const requestParams = this.requestForm.value
+
+    requestParams.headers = this.arrayObjectsToObjects(
+      requestParams.headers || []
+    )
+
+    const pathReq = this.parsePathInput(requestParams.path || '')
+
+    if (!this.pollingState.checked) requestParams.polling = 0
+
+    if (!this.failedState.checked) {
+      requestParams.retry = { times: 0,delay: 0 }
+    }
+
+    const currentOptions = ApiRequest.adapt(requestParams)
+    currentOptions.path = []
+    currentOptions.server = this.server
+    currentOptions.adapter = this.adapter
+    currentOptions.mapper = this.mapper
+    const apiOptions = ApiRequest.adapt({ ...currentOptions, path: pathReq })
+
+    return { apiOptions: apiOptions, path: pathReq }
+
+  }
+
+  private parseWatchParams(value?: string): string[] {
+    if (!value || typeof value !== 'string') {
+      return []
+    }
+
+    return value
+      .split(',')
+      .map((item) => item.trim())
+      .filter((item) => item.length > 0)
+  }
+
+  private normalizeWatchExpiry(value?: string | number): string | number | undefined {
+    if (typeof value === 'undefined' || value === null || value === '') {
+      return undefined
+    }
+
+    if (typeof value === 'string' && value.trim().toLowerCase() === 'never') {
+      return undefined
+    }
+
+    return value
+  }
+
+  private buildDemoRequestOptions(path: any[], headers: any): RequestOptions {
+    const dbValue: any = this.database || {}
+    const isDbEnabled = !!this.DBState?.checked
+    const parsedWatchParams = this.parseWatchParams(dbValue?.ignoreQueryParams)
+
+    return RequestOptions.adapt({
+      path,
+      headers,
+      forceRefresh: false,
+      watchParams: isDbEnabled && parsedWatchParams.length > 0 ? parsedWatchParams : undefined,
+      watchExpiresAt: isDbEnabled ? this.normalizeWatchExpiry(dbValue?.queryParamsExpiresIn) : undefined,
+    })
+  }
+
+  onSetStateOptions() {
+
+    const dbValue = this.database
+    // console.log('[onSetStateOptions] Called, checking form values:', {
+    //   isValid: this.isValid,
+    //   database: dbValue,
+    //   hasTable: !!dbValue?.table,
+    //   tableValue: dbValue?.table,
+    //   dataType: this.dataType
+    // })
+
+    if(!this.isValid) {
+      // console.log('[onSetStateOptions] Form invalid, aborting')
+      return
+    }
+
+    const reqParams = this.compileRequest()
+
+    const db = DatabaseStorage.adapt(dbValue)
+    // console.log('[onSetStateOptions] DatabaseStorage.adapt result:', db)
+
+    const type = this.dataType === "ARRAY" ? DataType.ARRAY : DataType.OBJECT
+    // console.log('[onSetStateOptions] Calling setAPIOptions with:', { db, type, hasTable: !!db?.table })
+    this.stateManagerDemoService.setAPIOptions(reqParams.apiOptions, type, db)
+
+    this.requestForm.markAsPristine()
+  }
+
+  onClearRecords() {
+    this.stateManagerDemoService.clearRecords()
+  }
+
+  deleteDatabase() {
+    this.databaseManagerService.clearDatabase()
+  }
+
+  onGetRequest() {
+    this.requestType = 'GET'
+    const reqParams = this.compileRequest()
+    const requestOptions = this.buildDemoRequestOptions(reqParams.path, reqParams.apiOptions.headers)
+    this.stateManagerDemoService.getClients(requestOptions)
+  }
+
+  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() {
+    // console.log('[COMPONENT] onStreamRequest called')
+
+    if(!this.isValid) {
+      // console.log('[COMPONENT] Form invalid, aborting')
+      return
+    }
+
+    // console.log('[COMPONENT] Compiling request...')
+    const reqParams = this.compileRequest()
+
+    // console.log('[COMPONENT] Setting stream options:', reqParams.apiOptions)
+    reqParams.apiOptions.stream = true
+    reqParams.apiOptions.streamType = this.streamType as StreamType
+    this.requestType = 'STREAM'
+
+    const streamOptions = RequestOptions.adapt({
+      ...this.buildDemoRequestOptions(reqParams.path, reqParams.apiOptions.headers),
+    })
+
+    // console.log('[COMPONENT] Calling streamRequest...')
+    this.stateManagerDemoService.streamRequest(streamOptions)
+
+  }
+
+  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 = []
+  }
+
+}

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

@@ -0,0 +1,89 @@
+import { Injectable } from '@angular/core';
+
+import { DataType, DatabaseStorage } from '../../../models';
+import { HTTPManagerStateService } from '../../../services/request-manager-state-service/http-manager-state.store';
+import { ApiRequest } from '../../../services/request-manager-state-service/models/api-request.model';
+import { RequestOptions } from '../../../services/request-manager-state-service/models/request-options.model';
+
+import { ClientInfo } from '../../request-manager-demo/models/sample-client-info';
+import { ClientInfoMapper } from '../../request-manager-demo/models/sample-mapper-client-info';
+
+@Injectable()
+export class StateManagerDemoService extends HTTPManagerStateService<any> {
+
+  constructor() {
+    super(
+      ApiRequest.adapt({
+        server: "",
+        path: [],
+        headers: {},
+        adapter: ClientInfo.adapt,
+        mapper: ClientInfoMapper.adapt,
+        stream: false,
+      }),
+      DataType.ARRAY,
+      DatabaseStorage.adapt()
+    )
+  }
+
+  setAPIOptions(apiOptions: ApiRequest, dataType: DataType, database?: DatabaseStorage) {
+    this.setApiRequestOptions(apiOptions, dataType, database)
+  }
+
+  getClients(options?: RequestOptions) {
+
+    // const headers = {
+    //   auth: "sample-auth-token"
+    // }
+    // const sampleOptions = RequestOptions.adapt({ path: ["id", 12], headers, sample: true })
+    this.fetchRecords(options)
+
+  }
+
+  createClient(data: any) {
+
+    // const headers = {
+    //   auth: "sample-auth-token"
+    // }
+
+    // const sampleOptions = RequestOptions.adapt({ path: ["id", 12], headers, sample: true })
+    this.createRecord(data)
+
+  }
+
+  updateClient(data: ClientInfo) {
+
+    // const headers = {
+    //   auth: "sample-auth-token"
+    // }
+    data.id = 1031
+    const sampleOptions = RequestOptions.adapt({ path: [data.id] })
+    this.updateRecord(data, sampleOptions)
+
+  }
+
+  deleteClient(data: ClientInfo) {
+
+    // const headers = {
+    //   auth: "sample-auth-token"
+    // }
+
+    data.id = 1031
+    const sampleOptions = RequestOptions.adapt({ path: [data.id] })
+    this.deleteRecord(sampleOptions)
+
+  }
+
+  streamRequest(options?: RequestOptions) {
+    console.log('[DEMO SERVICE] streamRequest called')
+
+    const headers = {
+      auth: "sample-auth-token"
+    }
+
+    console.log('[DEMO SERVICE] Calling fetchStream with headers:', headers)
+    this.fetchStream(options)
+
+  }
+
+}