http-request-manager 18.15.32 → 18.15.34

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

@@ -0,0 +1,30 @@
+export interface UploadStateInterface {
+  selectedFiles: File[]
+  isUploading: boolean
+  progress: number
+  currentFile: string | null
+  errorMessage: string | null
+  successMessage: string | null
+}
+
+export class UploadStateModel implements UploadStateInterface {
+  constructor(
+    public selectedFiles: File[] = [],
+    public isUploading: boolean = false,
+    public progress: number = 0,
+    public currentFile: string | null = null,
+    public errorMessage: string | null = null,
+    public successMessage: string | null = null
+  ) {}
+
+  static adapt(item?: any): UploadStateModel {
+    return new UploadStateModel(
+      Array.isArray(item?.selectedFiles) ? item.selectedFiles : [],
+      item?.isUploading ?? false,
+      item?.progress ?? 0,
+      item?.currentFile ?? null,
+      item?.errorMessage ?? null,
+      item?.successMessage ?? null
+    )
+  }
+}

package/src/lib/http-request-services-demo/upload-demo/upload-demo.component.html

@@ -0,0 +1,89 @@
+<div class="upload-demo-container">
+  <h2>File Upload Demo</h2>
+  <p class="demo-description">Upload multiple JPG or PNG files with progress tracking</p>
+
+  <!-- Upload Button & File Input -->
+  <div class="upload-controls">
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="fileInput.click()"
+      [disabled]="uploadState.isUploading"
+      class="upload-button">
+      <span class="material-icons">upload_file</span>
+      Select Files
+    </button>
+    <input
+      #fileInput
+      type="file"
+      multiple
+      accept="image/jpeg,image/png"
+      (change)="onFileSelected($event)"
+      [disabled]="uploadState.isUploading"
+      hidden>
+
+    <button
+      mat-button
+      color="warn"
+      (click)="clearSelection()"
+      [disabled]="uploadState.selectedFiles.length === 0 || uploadState.isUploading"
+      class="clear-button">
+      Clear
+    </button>
+  </div>
+
+  <!-- Selected Files Display -->
+  <div class="selected-files" *ngIf="uploadState.selectedFiles.length > 0">
+    <h3>Selected Files ({{uploadState.selectedFiles.length}})</h3>
+    <ul class="file-list">
+      <li *ngFor="let file of uploadState.selectedFiles" class="file-item">
+        <span class="file-icon">
+          <span class="material-icons">insert_drive_file</span>
+        </span>
+        <span class="file-name">{{file.name}}</span>
+        <span class="file-size">{{getFileSizeString(file.size)}}</span>
+        <span class="file-status valid">✓</span>
+      </li>
+    </ul>
+  </div>
+
+  <!-- Validation Errors -->
+  <div class="error-message" *ngIf="uploadState.errorMessage && !uploadState.isUploading">
+    <span class="material-icons">error</span>
+    <span>{{uploadState.errorMessage}}</span>
+  </div>
+
+  <!-- Progress Bar -->
+  <div class="progress-container" *ngIf="uploadState.isUploading">
+    <div class="progress-header">
+      <span>Uploading...</span>
+      <span class="progress-percentage">{{uploadState.progress}}%</span>
+    </div>
+    <mat-progress-bar
+      mode="determinate"
+      [value]="uploadState.progress"
+      color="primary">
+    </mat-progress-bar>
+    <div class="current-file" *ngIf="uploadState.currentFile">
+      Current: {{uploadState.currentFile}}
+    </div>
+  </div>
+
+  <!-- Success Message -->
+  <div class="success-message" *ngIf="uploadState.successMessage">
+    <span class="material-icons">check_circle</span>
+    <span>{{uploadState.successMessage}}</span>
+  </div>
+
+  <!-- Upload Action Button -->
+  <div class="upload-actions" *ngIf="uploadState.selectedFiles.length > 0 && !uploadState.isUploading">
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="startUpload()"
+      [disabled]="uploadState.selectedFiles.length === 0 || uploadState.errorMessage !== null"
+      class="start-upload-button">
+      Upload {{uploadState.selectedFiles.length}} File{{uploadState.selectedFiles.length > 1 ? 's' : ''}}
+    </button>
+  </div>
+</div>

package/src/lib/http-request-services-demo/upload-demo/upload-demo.component.scss

@@ -0,0 +1,160 @@
+.upload-demo-container {
+  padding: 1rem;
+  max-width: 60rem;
+  margin: 0 auto;
+
+  h2 {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #333;
+    margin-bottom: 0.75rem;
+  }
+
+  .demo-description {
+    font-size: 1rem;
+    color: #666;
+    margin-bottom: 1.5rem;
+  }
+
+  .upload-controls {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    align-items: center;
+
+    .upload-button,
+    .clear-button {
+      min-width: 10rem;
+    }
+  }
+
+  .selected-files {
+    background-color: #fbfbfb;
+    border: 1px solid #ccc;
+    border-radius: 0.25rem;
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+
+    h3 {
+      font-size: 1.125rem;
+      font-weight: 500;
+      color: #333;
+      margin-bottom: 0.5rem;
+    }
+
+    .file-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      .file-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.25rem 0;
+        border-bottom: 1px solid #e5e5e5;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        .file-icon {
+          color: #286fad;
+          display: flex;
+          align-items: center;
+        }
+
+        .file-name {
+          flex: 1;
+          font-size: 0.875rem;
+          color: #333;
+          font-weight: 500;
+        }
+
+        .file-size {
+          font-size: 0.875rem;
+          color: #666;
+        }
+
+        .file-status.valid {
+          color: #1c8150;
+          font-weight: 700;
+        }
+      }
+    }
+  }
+
+  .error-message {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem;
+    background-color: rgba(212, 0, 3, 0.1);
+    border: 1px solid #d40003;
+    border-radius: 0.25rem;
+    color: #d40003;
+    margin-bottom: 1.5rem;
+    font-size: 0.875rem;
+
+    .material-icons {
+      font-size: 2.5rem;
+    }
+  }
+
+  .progress-container {
+    margin-bottom: 1.5rem;
+
+    .progress-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.25rem;
+
+      span:first-child {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: #333;
+      }
+
+      .progress-percentage {
+        font-size: 0.875rem;
+        font-weight: 700;
+        color: #286fad;
+      }
+    }
+
+    .current-file {
+      font-size: 0.875rem;
+      color: #666;
+      margin-top: 0.25rem;
+      font-style: italic;
+    }
+  }
+
+  .success-message {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem;
+    background-color: rgba(28, 129, 80, 0.1);
+    border: 1px solid #1c8150;
+    border-radius: 0.25rem;
+    color: #1c8150;
+    margin-bottom: 1.5rem;
+    font-size: 0.875rem;
+
+    .material-icons {
+      font-size: 2.5rem;
+    }
+  }
+
+  .upload-actions {
+    text-align: center;
+    margin-top: 1.5rem;
+
+    .start-upload-button {
+      min-width: 15rem;
+      padding: 0.5rem 1.5rem;
+    }
+  }
+}

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

@@ -0,0 +1,101 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { UploadDemoComponent } from './upload-demo.component'
+import { HTTPManagerService, } from '../../'
+import { ToastMessageDisplayService } from 'toast-message-display'
+import { FormBuilder } from '@angular/forms'
+import { provideHttpClient } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+
+describe('UploadDemoComponent', () => {
+  let component: UploadDemoComponent
+  let fixture: ComponentFixture<UploadDemoComponent>
+  let httpManagerService: HTTPManagerService<any>
+  let toastService: ToastMessageDisplayService
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [UploadDemoComponent],
+      providers: [
+        HTTPManagerService,
+        ToastMessageDisplayService,
+        FormBuilder,
+        provideHttpClient(),
+        provideHttpClientTesting()
+      ]
+    })
+    .compileComponents()
+
+    fixture = TestBed.createComponent(UploadDemoComponent)
+    component = fixture.componentInstance
+    httpManagerService = TestBed.inject(HTTPManagerService)
+    toastService = TestBed.inject(ToastMessageDisplayService)
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+
+  it('should initialize with empty state', () => {
+    expect(component.uploadState.selectedFiles).toEqual([])
+    expect(component.uploadState.isUploading).toBe(false)
+    expect(component.uploadState.progress).toBe(0)
+    expect(component.uploadState.errorMessage).toBeNull()
+    expect(component.uploadState.successMessage).toBeNull()
+  })
+
+  it('should accept valid file types (JPG)', () => {
+    const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' })
+    const error = component.validateFile(file)
+    expect(error).toBeNull()
+  })
+
+  it('should accept valid file types (PNG)', () => {
+    const file = new File(['test'], 'test.png', { type: 'image/png' })
+    const error = component.validateFile(file)
+    expect(error).toBeNull()
+  })
+
+  it('should reject invalid file types', () => {
+    const file = new File(['test'], 'test.pdf', { type: 'application/pdf' })
+    const error = component.validateFile(file)
+    expect(error).toContain('not a valid type')
+  })
+
+  it('should reject files exceeding max size', () => {
+    const largeFile = new File(['x'.repeat(41 * 1024 * 1024)], 'large.jpg', { type: 'image/jpeg' })
+    const error = component.validateFile(largeFile)
+    expect(error).toContain('exceeds maximum size')
+  })
+
+  it('should clear selection', () => {
+    component.uploadState.selectedFiles = [new File(['test'], 'test.jpg', { type: 'image/jpeg' })]
+    component.uploadState.errorMessage = 'Test error'
+    component.uploadState.successMessage = 'Test success'
+    component.uploadState.progress = 50
+
+    component.clearSelection()
+
+    expect(component.uploadState.selectedFiles).toEqual([])
+    expect(component.uploadState.errorMessage).toBeNull()
+    expect(component.uploadState.successMessage).toBeNull()
+    expect(component.uploadState.progress).toBe(0)
+  })
+
+  it('should prevent upload with no files', () => {
+    component.startUpload()
+    expect(component.uploadState.errorMessage).toContain('Please select at least one file')
+  })
+
+  it('should format file size correctly (bytes)', () => {
+    expect(component.getFileSizeString(512)).toBe('512 bytes')
+  })
+
+  it('should format file size correctly (KB)', () => {
+    expect(component.getFileSizeString(2048)).toBe('2.0 KB')
+  })
+
+  it('should format file size correctly (MB)', () => {
+    expect(component.getFileSizeString(2 * 1024 * 1024)).toBe('2.0 MB')
+  })
+})

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

@@ -0,0 +1,136 @@
+import { Component, OnInit, OnDestroy, inject } from '@angular/core'
+import { ApiRequest, HTTPManagerService } from '../../'
+import { ToastMessageDisplayService } from 'toast-message-display'
+import { ToastColors } from 'toast-message-display'
+import { UploadStateModel } from './models/upload-state.model'
+
+@Component({
+  selector: 'lib-upload-demo',
+  templateUrl: './upload-demo.component.html',
+  styleUrls: ['./upload-demo.component.scss'],
+  standalone: false
+})
+export class UploadDemoComponent implements OnInit, OnDestroy {
+
+  private httpManager = inject(HTTPManagerService)
+  private toastService = inject(ToastMessageDisplayService)
+
+  uploadState = UploadStateModel.adapt()
+
+  allowedTypes = ['image/jpeg', 'image/png']
+  maxFileSize = 40 * 1024 * 1024 // 40MB
+
+  ngOnInit(): void {
+    // Initialize component
+  }
+
+  ngOnDestroy(): void {
+    // Clean up subscriptions
+  }
+
+  onFileSelected(event: Event): void {
+    const input = event.target as HTMLInputElement
+    const files = input.files
+
+    if (!files || files.length === 0) {
+      return
+    }
+
+    this.uploadState.selectedFiles = []
+    this.uploadState.errorMessage = null
+
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i]
+      const validationError = this.validateFile(file)
+
+      if (validationError) {
+        this.uploadState.errorMessage = validationError
+        continue
+      }
+
+      this.uploadState.selectedFiles.push(file)
+    }
+
+    if (this.uploadState.selectedFiles.length === 0 && !this.uploadState.errorMessage) {
+      this.uploadState.errorMessage = 'Please select at least one valid file (JPG or PNG)'
+    }
+  }
+
+  validateFile(file: File): string | null {
+    // Check file type
+    if (!this.allowedTypes.includes(file.type)) {
+      return `File "${file.name}" is not a valid type. Only JPG and PNG files are allowed.`
+    }
+
+    // Check file size
+    if (file.size > this.maxFileSize) {
+      return `File "${file.name}" exceeds maximum size of 10MB.`
+    }
+
+    return null
+  }
+
+  clearSelection(): void {
+    this.uploadState.selectedFiles = []
+    this.uploadState.errorMessage = null
+    this.uploadState.successMessage = null
+    this.uploadState.progress = 0
+    this.uploadState.currentFile = null
+  }
+
+  startUpload(): void {
+    if (this.uploadState.selectedFiles.length === 0) {
+      this.uploadState.errorMessage = 'Please select at least one file to upload'
+      return
+    }
+
+    if (this.uploadState.errorMessage) {
+      return
+    }
+
+    this.uploadState.isUploading = true
+    this.uploadState.progress = 0
+    this.uploadState.errorMessage = null
+    this.uploadState.successMessage = null
+
+    const options = ApiRequest.adapt({
+      server: 'gtlcApi',
+      path: ['uploader'],
+      uploadFieldName: 'files',
+      allowedTypes: this.allowedTypes,
+      maxFileSize: this.maxFileSize
+    })
+
+    this.httpManager.uploadRequest<any>(this.uploadState.selectedFiles, options, ['upload'])
+    .subscribe({
+      next: (response) => {
+        this.uploadState.progress = 100
+        this.uploadState.successMessage = `Successfully uploaded ${this.uploadState.selectedFiles.length} file(s)`
+        this.toastService.toastMessage({
+          message: this.uploadState.successMessage || '',
+          color: ToastColors.SUCCESS
+        })
+        this.uploadState.isUploading = false
+      },
+      error: (error: any) => {
+        this.uploadState.errorMessage = error.message || 'Upload failed. Please try again.'
+        this.toastService.toastMessage({
+          message: this.uploadState.errorMessage || '',
+          color: ToastColors.ERROR
+        })
+        this.uploadState.isUploading = false
+        this.uploadState.progress = 0
+      }
+    })
+  }
+
+  getFileSizeString(size: number): string {
+    if (size < 1024) {
+      return `${size} bytes`
+    } else if (size < 1024 * 1024) {
+      return `${(size / 1024).toFixed(1)} KB`
+    } else {
+      return `${(size / (1024 * 1024)).toFixed(1)} MB`
+    }
+  }
+}

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);
+  }
+}

package/src/lib/interceptors/request-error.interceptor.ts

@@ -0,0 +1,65 @@
+import { inject, Injectable } from '@angular/core'
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpErrorResponse } from '@angular/common/http'
+import { Observable, catchError, throwError } from 'rxjs'
+
+import { ToastMessageDisplayService, ToastDisplay, ToastColors } from 'toast-message-display'
+
+@Injectable()
+export class RequestErrorInterceptor implements HttpInterceptor {
+
+  toastMessage = inject(ToastMessageDisplayService)
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+
+    return next.handle(req).pipe(
+
+      catchError((error: HttpErrorResponse) => {
+
+        const displayError = ToastDisplay.adapt({
+          message: 'This is a toast message. This is an Error!!',
+          action: 'OK',
+          color: ToastColors.SUCCESS,
+          icon: 'info',
+          duration: 5 * 1000, //5 seconds
+        })
+
+        if (error.status >= 400 && error.status < 500) {
+
+          displayError.color = ToastColors.WARN
+          displayError.message = error.error || `${error.status}: ${error.statusText}`
+
+          console.error('Client Error:', {
+            status: error.status,
+            message: error.message,
+            error: error.error,
+            text: error.statusText,
+          })
+
+          this.toastMessage.toastMessage(displayError)
+
+        } else if (error.status >= 500) {
+
+          displayError.color = ToastColors.ERROR
+          displayError.message = error.error || `${error.status}: ${error.statusText}`
+
+          console.error('Server Error:', {
+            status: error.status,
+            message: error.message,
+            error: error.error,
+            text: error.statusText,
+          })
+
+          this.toastMessage.toastMessage(displayError)
+
+        }
+
+        return throwError(() => error)
+
+      })
+
+    )
+  }
+
+}
+
+