http-request-manager 18.15.32 → 18.15.34

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: ['lego.png'],
+    // 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,49 @@
+import { Injectable } from '@angular/core';
+
+import { map } from 'rxjs';
+
+import { SettingOptions } from '../../../services/local-storage-manager-service/models/setting-options.model';
+import { StorageType } from '../../../services/local-storage-manager-service/models/storage-type.enum';
+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/utils/encryption/random';
+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/http-request-services-demo/store-state-signals-demo/store-state-signals-demo.component.ts

@@ -0,0 +1,161 @@
+import { Component, OnInit, signal, computed } from '@angular/core';
+import { StoreStateManagerSignalsService } from '../../services/store-state-manager-service/store-state-manager-signals.service';
+import { StateStorageOptions } from '../../services/store-state-manager-service/models/state-storage-options.model';
+
+interface CounterState {
+  count: number;
+  lastUpdated: string;
+  history: number[];
+}
+
+const defaultCounterState: () => CounterState = () => ({
+  count: 0,
+  lastUpdated: new Date().toISOString(),
+  history: []
+});
+
+@Component({
+  selector: 'app-store-state-signals-demo',
+  template: `
+    <div class="demo-container">
+      <h2>Store State Manager Signals Demo</h2>
+      <p>Signal-based state management with localStorage persistence</p>
+
+      <div class="state-display">
+        <h3>Current State (Signal)</h3>
+        <pre>{{ stateJson() }}</pre>
+      </div>
+
+      <div class="actions">
+        <button (click)="increment()">Increment</button>
+        <button (click)="decrement()">Decrement</button>
+        <button (click)="reset()">Reset</button>
+        <button (click)="addToHistory()">Add to History</button>
+      </div>
+
+      <div class="history">
+        <h3>History: {{ historyLength() }} items</h3>
+        <ul>
+          @for (item of history(); track item; let i = $index) {
+            <li>{{ i + 1 }}. {{ item }}</li>
+          }
+        </ul>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .demo-container {
+      padding: 20px;
+      max-width: 600px;
+      margin: 0 auto;
+    }
+    .state-display {
+      background: #f5f5f5;
+      padding: 15px;
+      border-radius: 5px;
+      margin: 20px 0;
+    }
+    pre {
+      background: #fff;
+      padding: 10px;
+      border: 1px solid #ddd;
+      border-radius: 3px;
+    }
+    .actions {
+      display: flex;
+      gap: 10px;
+      margin: 20px 0;
+    }
+    button {
+      padding: 10px 20px;
+      background: #007bff;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    button:hover {
+      background: #0056b3;
+    }
+    .history {
+      margin-top: 20px;
+    }
+    ul {
+      max-height: 200px;
+      overflow-y: auto;
+    }
+  `]
+})
+export class StoreStateSignalsDemoComponent implements OnInit {
+
+  private stateManager!: StoreStateManagerSignalsService<CounterState>;
+
+  // Signals from service
+  stateJson = signal<string>('');
+  historyLength = signal<number>(0);
+  history = signal<number[]>([]);
+
+  ngOnInit() {
+    const options = StateStorageOptions.adapt({
+      store: 'counter-state',
+      model: defaultCounterState,
+      options: {
+        storage: 'global',
+        encrypted: false
+      }
+    });
+
+    this.stateManager = new StoreStateManagerSignalsService<CounterState>();
+    this.stateManager.init(options);
+
+    // Update signals when state changes
+    this.updateSignals();
+  }
+
+  private updateSignals() {
+    const state = this.stateManager.data();
+    if (state) {
+      this.stateJson.set(JSON.stringify(state, null, 2));
+      this.historyLength.set(state.history.length);
+      this.history.set([...state.history]);
+    }
+  }
+
+  increment() {
+    const current = this.stateManager.data();
+    if (current) {
+      this.stateManager.updateState({
+        count: current.count + 1,
+        lastUpdated: new Date().toISOString()
+      });
+      this.updateSignals();
+    }
+  }
+
+  decrement() {
+    const current = this.stateManager.data();
+    if (current) {
+      this.stateManager.updateState({
+        count: current.count - 1,
+        lastUpdated: new Date().toISOString()
+      });
+      this.updateSignals();
+    }
+  }
+
+  reset() {
+    this.stateManager.resetState();
+    this.updateSignals();
+  }
+
+  addToHistory() {
+    const current = this.stateManager.data();
+    if (current) {
+      this.stateManager.updateState({
+        history: [...current.history, current.count],
+        lastUpdated: new Date().toISOString()
+      });
+      this.updateSignals();
+    }
+  }
+}

package/src/lib/http-request-services-demo/upload-demo/models/index.ts

@@ -0,0 +1 @@
+export * from './upload-state.model'