http-request-manager 18.7.21 → 18.7.24

package/src/lib/http-request-services-demo/request-manager-ws-demo/components/ws-data-control/ws-data-control.component.html

@@ -1,72 +0,0 @@
-@if ((data$ | async); as data) {
-  <div style="margin: 1rem;">
-    @if ((users$ |async); as users) {
-      <div>
-        @if (users.length > 0) {
-          <h3 style="margin: 0;">Connected Users</h3>
-        } @else {
-          <h3 style="margin: 0;">No Users</h3>
-        }
-        <mat-chip-set>
-          @for (user of users; track user.sessionId) {
-            <mat-chip
-              [class.user-chip--primary]="isUser(user, (user$ | async))"
-              [style.color]="isUser(user, (user$ | async)) ? '#fff' : null"
-              [disableRipple]="true"
-            >
-              {{ user.name }}
-            </mat-chip>
-          }
-        </mat-chip-set>
-      </div>
-    }
-    <div style="margin-top: 1rem; margin-bottom: 1rem;">
-      <mat-divider></mat-divider>
-    </div>
-
-    <div class="box" style="margin-bottom: 1rem;" *ngIf="(userAction$ | async) as userAction">
-      {{ userAction?.content?.user?.name }} has {{ userAction?.content?.method }}
-    </div>
-
-    <h3 style="margin: 0;">Data Actions</h3>
-    <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
-      <button mat-stroked-button (click)="onGetData()">Get Data</button>
-      <div style="flex:1"></div>
-      <button mat-stroked-button color="accent" (click)="onUpdateData(data)">Update Data</button>
-      <button mat-stroked-button color="warn" (click)="onRemoveData(data)">Remove Data</button>
-      <button mat-stroked-button color="primary" (click)="onAddData()">Add Data</button>
-    </div>
-    @if (data.length > 0) {
-      <div>
-        <table mat-table [dataSource]="data" style="border: 1px solid grey;">
-          <ng-container matColumnDef="id">
-            <th mat-header-cell *matHeaderCellDef> ID </th>
-            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
-          </ng-container>
-          <ng-container matColumnDef="spiffe">
-            <th mat-header-cell *matHeaderCellDef> Spiffe </th>
-            <td mat-cell *matCellDef="let element"> {{element.spiffe}} </td>
-          </ng-container>
-          <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef> Name </th>
-            <td mat-cell *matCellDef="let element"> {{element.first_name}} {{element.last_name}}</td>
-          </ng-container>
-          <ng-container matColumnDef="email">
-            <th mat-header-cell *matHeaderCellDef> Email </th>
-            <td mat-cell *matCellDef="let element"> {{element.email}} </td>
-          </ng-container>
-          <tr mat-header-row *matHeaderRowDef="['id', 'spiffe', 'name', 'email']"></tr>
-          <tr mat-row *matRowDef="let row; columns: ['id', 'spiffe', 'name', 'email'];"></tr>
-        </table>
-        <div style="border: 1px solid grey; padding: .5rem; border-top: none;">
-          <h3 style="margin: 0;">Total Records {{ data.length }}</h3>
-        </div>
-      </div>
-    } @else {
-      <div style="margin-top: 1rem; font-style: italic;">
-        No Data Available
-      </div>
-    }
-  </div>
-}
-

package/src/lib/http-request-services-demo/request-manager-ws-demo/components/ws-data-control/ws-data-control.component.scss

@@ -1,41 +0,0 @@
-.user-chip--primary {
-  background-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5)) !important;
-  color: #fff !important;
-  --mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));
-  --mdc-evolution-chip-label-text-color: #fff;
-}
-
-.user-chip--primary :is(
-  .mdc-evolution-chip__text-label,
-  .mdc-evolution-chip__action,
-  .mdc-evolution-chip__cell,
-  .mat-mdc-chip-action-label
-) {
-  color: #fff !important;
-}
-
-.user-chip--primary,
-.user-chip--primary * {
-  color: #fff !important;
-}
-
-:host ::ng-deep .user-chip--primary {
-  background-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5)) !important;
-  color: #fff !important;
-  --mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));
-  --mdc-evolution-chip-label-text-color: #fff;
-
-  .mdc-evolution-chip__text-label,
-  .mdc-evolution-chip__action,
-  .mdc-evolution-chip__cell,
-  .mat-mdc-chip-action-label,
-  * {
-    color: #fff !important;
-  }
-}
-
-.box {
-  padding: .5rem;
-  border: 1px solid rgb(174, 174, 13);
-  background-color: rgb(236, 236, 175);
-}

package/src/lib/http-request-services-demo/request-manager-ws-demo/components/ws-data-control/ws-data-control.component.spec.ts

@@ -1,205 +0,0 @@
-import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
-import { WsDataControlComponent } from './ws-data-control.component';
-import { StateDataRequestService } from '../services/state-data-request.service';
-import { BehaviorSubject } from 'rxjs';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatTableModule } from '@angular/material/table';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDividerModule } from '@angular/material/divider';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { CommonModule } from '@angular/common';
-
-describe('WsDataControlComponent', () => {
-  let component: WsDataControlComponent;
-  let fixture: ComponentFixture<WsDataControlComponent>;
-
-  // Mock Data
-  const mockUser = { sessionId: 'session-123', name: 'Mike Boni' };
-  const mockUsers = [mockUser, { sessionId: 'session-456', name: 'Other User' }];
-  const mockData = [
-    { id: 1, spiffe: 'wavecoders.com/developer/1111', first_name: 'John', last_name: 'Doe', email: 'john@test.com' },
-    { id: 63, spiffe: 'wavecoders.com/developer/2222', first_name: 'mike', last_name: 'boni', email: 'mikeboni@hotmail.com' }
-  ];
-  const mockAction = { content: { user: mockUser, method: 'updated data' } };
-
-  // Subjects to control the observables in the mock service
-  const userSubject = new BehaviorSubject<any>(mockUser);
-  const usersSubject = new BehaviorSubject<any[]>(mockUsers);
-  const userActionSubject = new BehaviorSubject<any>(mockAction);
-  const dataSubject = new BehaviorSubject<any[]>(mockData);
-
-  // Mock Service Class
-  class MockStateDataRequestService {
-    user$ = userSubject.asObservable();
-    userList$ = usersSubject.asObservable();
-    userAction$ = userActionSubject.asObservable();
-    data$ = dataSubject.asObservable();
-
-    updateConnection(server: string, wsServer: string, jwtToken: string, user: any, path: string[], wsChannel: string) {}
-    getData() {}
-    addData() {}
-    updateData(data: any) {}
-    deleteData(data: any) {}
-  }
-
-  let mockServiceInstance: MockStateDataRequestService;
-
-  beforeEach(async () => {
-    // Ensure mock data is available immediately
-    dataSubject.next(mockData);
-    userSubject.next(mockUser);
-    usersSubject.next(mockUsers);
-    userActionSubject.next(mockAction);
-
-    // Create mock service instance
-    mockServiceInstance = new MockStateDataRequestService();
-
-    // Spy on methods
-    spyOn(mockServiceInstance, 'updateConnection');
-    spyOn(mockServiceInstance, 'getData');
-    spyOn(mockServiceInstance, 'addData');
-    spyOn(mockServiceInstance, 'updateData');
-    spyOn(mockServiceInstance, 'deleteData');
-
-    await TestBed.configureTestingModule({
-      declarations: [WsDataControlComponent],
-      imports: [
-        CommonModule,
-        MatChipsModule,
-        MatTableModule,
-        MatButtonModule,
-        MatDividerModule,
-        NoopAnimationsModule
-      ],
-      providers: [
-        { provide: StateDataRequestService, useValue: mockServiceInstance }
-      ]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(WsDataControlComponent);
-    component = fixture.componentInstance;
-
-    // Set required @Input properties
-    component.server = 'http://api.test.com';
-    component.wsServer = 'ws://ws.test.com';
-    component.jwtToken = 'mock-jwt-token';
-    component.user = mockUser;
-    component.path = ['ai', 'tests'];
-    component.wsChannel = 'demo-channel';
-
-    // Ensure initial data is available for table rendering test
-    fixture.detectChanges();
-  });
-
-  it('should create the component', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should call updateConnection and getData during initialization', () => {
-    expect(mockServiceInstance.updateConnection).toHaveBeenCalledWith(
-      component.server,
-      component.wsServer,
-      component.jwtToken,
-      component.user,
-      component.path,
-      component.wsChannel
-    );
-    expect(mockServiceInstance.getData).toHaveBeenCalled();
-  });
-
-  it('should call getData when onGetData is triggered', () => {
-    component.onGetData();
-    // once during init, once during manual call
-    expect(mockServiceInstance.getData).toHaveBeenCalledTimes(2);
-  });
-
-  it('should call addData when onAddData is triggered', () => {
-    component.onAddData();
-    expect(mockServiceInstance.addData).toHaveBeenCalled();
-  });
-
-  it('should call updateData with generated random spiffe when onUpdateData is triggered', () => {
-    // Call the method - we can't easily mock RandomNumber, so we just verify updateData is called
-    component.onUpdateData(mockData);
-
-    expect(mockServiceInstance.updateData).toHaveBeenCalled();
-
-    // Verify the data structure passed to updateData
-    const callArgs = (mockServiceInstance.updateData as any).calls.mostRecent().args[0];
-    expect(callArgs).toBeDefined();
-    expect(callArgs.spiffe).toBeDefined();
-    expect(callArgs.spiffe).toMatch(/^wavecoders\.com\/developer\/\d{4,5}$/);
-    expect(callArgs.id).toBe(63);
-    expect(callArgs.first_name).toBe('mike');
-    expect(callArgs.last_name).toBe('boni');
-    expect(callArgs.email).toBe('mikeboni@hotmail.com');
-  });
-
-  it('should call deleteData with the last record when onRemoveData is triggered', () => {
-    component.onRemoveData(mockData);
-    const lastRecord = mockData[mockData.length - 1];
-    expect(mockServiceInstance.deleteData).toHaveBeenCalledWith(lastRecord);
-  });
-
-  it('should correctly verify if a user is the current user via isUser', () => {
-    const userA = { sessionId: 'AAA' };
-    const userB = { sessionId: 'AAA' };
-    const userC = { sessionId: 'CCC' };
-
-    expect(component.isUser(userA, userB)).toBeTrue();
-    expect(component.isUser(userA, userC)).toBeFalse();
-  });
-
-  it('should handle userAction$ timing logic (reset after 3 seconds)', fakeAsync(() => {
-    let currentAction: any;
-    const sub = component.userAction$.subscribe(val => currentAction = val);
-
-    // 1. Initial state (from BehaviorSubject)
-    expect(currentAction).toEqual(mockAction);
-
-    // 2. Push new action
-    const newAction = { content: { user: mockUser, method: 'added data' } };
-    userActionSubject.next(newAction);
-    tick(); // process the pipe
-    expect(currentAction).toEqual(newAction);
-
-    // 3. Wait 3 seconds
-    tick(3000);
-    expect(currentAction).toBeNull();
-
-    sub.unsubscribe();
-  }));
-
-  it('should render the table when data is available', fakeAsync(() => {
-    // Initial setup
-    fixture.detectChanges();
-    tick();
-
-    const compiled = fixture.nativeElement as HTMLElement;
-
-    // Multiple rounds of change detection to ensure async pipes resolve
-    for (let i = 0; i < 3; i++) {
-      fixture.detectChanges();
-      tick();
-    }
-
-    const table = compiled.querySelector('table');
-    expect(table).toBeTruthy();
-
-    // Give Angular Material table more time to render
-    fixture.detectChanges();
-    tick();
-
-    // Check for table rows (header + data rows)
-    const rows = compiled.querySelectorAll('tr');
-    expect(rows.length).toBeGreaterThan(1);
-  }));
-
-  it('should display "No Data Available" when data list is empty', () => {
-    dataSubject.next([]);
-    fixture.detectChanges();
-
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.textContent).toContain('No Data Available');
-  });
-});

package/src/lib/http-request-services-demo/request-manager-ws-demo/components/ws-data-control/ws-data-control.component.ts

@@ -1,77 +0,0 @@
-import { Component, inject, Input, OnInit } from '@angular/core';
-import { RandomNumber } from '../../../../services/utils/encryption/random';
-
-import { StateDataRequestService } from '../services/state-data-request.service';
-import { switchMap, timer, map, startWith } from 'rxjs';
-
-@Component({
-    selector: 'app-ws-data-control',
-    templateUrl: './ws-data-control.component.html',
-    styleUrls: ['./ws-data-control.component.scss'],
-    standalone: false
-})
-export class WsDataControlComponent implements OnInit {
-
-  @Input() server!: string;
-  @Input() wsServer!: string;
-  @Input() jwtToken!: string;
-  @Input() user!: any;
-  @Input() path: string[] = ['ai','tests'];
-  @Input() wsChannel: string = '';
-
-  stateDataRequestService = inject(StateDataRequestService)
-
-  user$ = this.stateDataRequestService.user$
-  users$ = this.stateDataRequestService.userList$
-
-  userAction$ = this.stateDataRequestService.userAction$
-  .pipe(
-    switchMap((action) =>
-      timer(3 * 1000).pipe(
-        map(() => null),
-        startWith(action)
-      )
-    )
-  );
-
-  data$ = this.stateDataRequestService.data$;
-
-  isUser = (user: any, userItem: any) => {
-    return user.sessionId === userItem.sessionId
-  }
-
-  ngOnInit() {
-    this.stateDataRequestService.updateConnection(this.server, this.wsServer, this.jwtToken, this.user, this.path, this.wsChannel);
-    this.stateDataRequestService.getData()
-  }
-
-  onGetData() {
-    this.stateDataRequestService.getData()
-  }
-
-  onAddData() {
-    this.stateDataRequestService.addData()
-  }
-
-  onUpdateData(data: any[]) {
-
-    const num = RandomNumber(1000, 9999)
-
-    const newData = {
-      "spiffe": `wavecoders.com/developer/${num}`,
-      "id": 63,
-      "last_name": "boni",
-      "email": "mikeboni@hotmail.com",
-      "first_name": "mike"
-    }
-
-    this.stateDataRequestService.updateData(newData)
-
-  }
-
-  onRemoveData(data: any) {
-    const lastRec = data[data.length -1]
-    this.stateDataRequestService.deleteData(lastRec)
-  }
-
-}

package/src/lib/http-request-services-demo/request-manager-ws-demo/components/ws-messaging/ws-messaging.component.css

@@ -1,11 +0,0 @@
-button[mat-raised-button],
-button[mat-stroked-button] {
-  min-width: 120px;
-}
-
-mat-chip-option {
-  min-width: 120px;
-  justify-content: center;
-  border-radius: 4px !important;
-  padding: 0.25rem !important;
-}

package/src/lib/http-request-services-demo/request-manager-ws-demo/components/ws-messaging/ws-messaging.component.html

@@ -1,96 +0,0 @@
-
-  @if ((data$ | async); as data) {
-  @if ((user$ | async); as user) {
-    <div style="display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;">
-
-        <!-- Channel Creation Section -->
-        <div style="padding: 1rem; background: #e3f2fd; border-radius: 4px;">
-          <strong>Create New Channel</strong>
-          <div style="display: flex; flex-direction: column; margin-top: 0.5rem;">
-            <mat-form-field appearance="outline" style="width: 100%;">
-              <mat-label>Channel Name</mat-label>
-              <input matInput [formControl]="newChannelName" placeholder="Enter channel name"
-                     (keydown.enter)="onCreateChannel()">
-            </mat-form-field>
-            <div style="display: flex; justify-content: flex-end; margin-top: -0.5rem;">
-              <button mat-raised-button color="primary" (click)="onCreateChannel()"
-                      [disabled]="newChannelName.invalid">
-                Create Channel
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Messaging Section - only show when subscribed to channels -->
-        @if ((subscribedChannels$ | async); as subscribedChannels) {
-          @if (subscribedChannels.length > 0) {
-            <div style="padding: 1rem; background: #fff3e0; border-radius: 4px;" [formGroup]="messages">
-              <strong>Send Message</strong>
-
-              <!-- Channel Selection with Checkboxes -->
-              <div style="margin-top: 0.5rem;">
-                <mat-form-field appearance="outline" style="width: 100%;">
-                  <mat-label>Select Channels</mat-label>
-                  <mat-select formControlName="selectedChannels" multiple>
-                    <mat-select-trigger>
-                      @if (selectedChannels.value?.length === 1) {
-                        {{ selectedChannels.value[0] }}
-                      } @else if (selectedChannels.value?.length > 1) {
-                        {{ selectedChannels.value[0] }} (+{{ selectedChannels.value.length - 1 }} {{ selectedChannels.value.length === 2 ? 'other' : 'others' }})
-                      }
-                    </mat-select-trigger>
-                    @for (channel of subscribedChannels; track channel) {
-                      <mat-option [value]="channel">{{ channel }}</mat-option>
-                    }
-                  </mat-select>
-                </mat-form-field>
-              </div>
-
-              <!-- Message Input -->
-              <div style="display: flex; flex-direction: column;">
-                <mat-form-field style="width: 100%;" appearance="outline">
-                  <mat-label>Message</mat-label>
-                  <textarea
-                    matInput placeholder="Type your message..."
-                    formControlName="content"
-                    (keydown.enter)="onSendMessage(user); $event.preventDefault()"
-                  ></textarea>
-                </mat-form-field>
-                <div style="display: flex; justify-content: flex-end; margin-top: -0.5rem;">
-                  <button mat-raised-button color="primary" (click)="onSendMessage(user)"
-                          [disabled]="messages.invalid">
-                    Send
-                  </button>
-                </div>
-              </div>
-            </div>
-          }
-        }
-
-    </div>
-  }
-  }
-
-  <!-- Channel List with Subscription Controls using Chips -->
-  @if ((channels$ | async); as channels) {
-    @if ((subscribedChannels$ | async); as subscribedChannels) {
-      <div style="padding: 1rem; background: #f5f5f5; border-radius: 4px; margin-top: 1rem;">
-        <strong>Subscribe to Channel(s)</strong>
-        <div style="margin-top: 0.5rem;">
-          @if (channels.length === 0) {
-            <div style="color: #666; font-style: italic;">No channels available. Create one above.</div>
-          } @else {
-            <mat-chip-listbox aria-label="Channel selection" [multiple]="true">
-              @for (channel of channels; track channel) {
-                <mat-chip-option
-                  [selected]="isSubscribed(channel, subscribedChannels)"
-                  (click)="onChipClick(channel, subscribedChannels)">
-                  {{ channel }}
-                </mat-chip-option>
-              }
-            </mat-chip-listbox>
-          }
-        </div>
-      </div>
-    }
-  }

package/src/lib/http-request-services-demo/request-manager-ws-demo/components/ws-messaging/ws-messaging.component.spec.ts

@@ -1,31 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
-
-import { WsMessagingComponent } from './ws-messaging.component';
-
-describe('WsMessagingComponent', () => {
-  let component: WsMessagingComponent;
-  let fixture: ComponentFixture<WsMessagingComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [ HttpClientTestingModule ],
-      declarations: [ WsMessagingComponent ],
-      schemas: [ NO_ERRORS_SCHEMA ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(WsMessagingComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});