http-request-manager 18.7.19 → 18.7.21

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

@@ -0,0 +1,72 @@
+@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

@@ -0,0 +1,41 @@
+.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

@@ -0,0 +1,205 @@
+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

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,96 @@
+
+  @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

@@ -0,0 +1,31 @@
+/* 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();
+  });
+});