http-request-manager 18.7.21 → 18.7.24

package/src/lib/http-request-services-demo/request-signals-manager-demo/models/sample-client-details.ts

@@ -1,24 +0,0 @@
-import { App } from "./app.model"
-
-export interface ClientDetailsInterface {
-  prod: string,
-  dev: string,
-}
-
-export class ClientDetails implements ClientDetailsInterface {
-
-  constructor(
-    public prod = '',
-    public dev = '',
-  ) {}
-
-  static adapt(item?: any): ClientDetails {
-
-    return new ClientDetails(
-      item?.prod,
-      item?.dev,
-    )
-
-  }
-
-}

package/src/lib/http-request-services-demo/request-signals-manager-demo/models/sample-client-info.ts

@@ -1,30 +0,0 @@
-export interface ClientInfoInterface {
-  domain: string
-  service: string
-  id: number
-  name: string
-}
-
-export class ClientInfo implements ClientInfoInterface {
-
-  constructor(
-    public domain = '',
-    public service = '',
-    public id = 0,
-    public name = '',
-  ) {}
-
-  static adapt(item?: any): ClientInfo {
-
-    return new ClientInfo(
-      item?.domain,
-      item?.service,
-      item?.id,
-      (item?.first_name || item?.last_name) ? `${item?.first_name} ${item?.last_name}` : '',
-    )
-
-  }
-
-}
-
-

package/src/lib/http-request-services-demo/request-signals-manager-demo/models/sample-client.model.ts

@@ -1,49 +0,0 @@
-export interface ClientDataInterface {
-  id: string|number
-  name: string
-  domain: string
-  service: string
-  spiffe: string
-  secret: string
-  created: number
-  modified: number
-  icon: string
-  imageFile: string
-  email: string
-}
-
-export class ClientData implements ClientDataInterface {
-
-  constructor(
-    public id: string|number = 0,
-    public name = '',
-    public domain = '',
-    public service = '',
-    public spiffe = '',
-    public secret = '',
-    public created = 0,
-    public modified = 0,
-    public icon = '',
-    public imageFile = '',
-    public email = '',
-  ) {}
-
-  static adapt(item?: any): ClientData {
-
-    return new ClientData(
-      item?.id,
-      item?.name,
-      item?.domain,
-      item?.service,
-      item?.spiffe,
-      item?.secret,
-      item?.created,
-      item?.modified,
-      item?.icon,
-      item?.imageFile,
-      item?.email,
-    )
-
-  }
-
-}

package/src/lib/http-request-services-demo/request-signals-manager-demo/models/sample-mapper-client-info.ts

@@ -1,33 +0,0 @@
-export interface ClientInfoMapperInterface {
-  id: number
-  first_name: string
-  last_name: string
-  email: string
-}
-
-export class ClientInfoMapper implements ClientInfoMapperInterface {
-
-  constructor(
-    public id = 0,
-    public first_name = '',
-    public last_name = '',
-    public email = '',
-  ) {}
-
-  static adapt(item?: any): ClientInfoMapper {
-
-    const first_name = (item?.name) ? item.name.split(' ')[0] : ''
-    const last_name = (item?.name) ? item.name.split(' ')[1] : ''
-
-    return new ClientInfoMapper(
-      item?.id,
-      first_name,
-      last_name,
-      item?.email,
-    )
-
-  }
-
-}
-
-

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

@@ -1,380 +0,0 @@
-<div style="margin: 2rem;">
-
-  <h2>
-    <span>HTTP Request Signals Manager</span>
-    <span style="margin-left: .5rem;">
-      <mat-icon color="accent">fiber_new</mat-icon>
-    </span>
-  </h2>
-
-  <div [formGroup]="requestForm" style="margin-top: 2rem;">
-    <div style="display: flex; gap: .5rem">
-      <mat-form-field appearance="outline">
-        <mat-label>Adapter (Model)</mat-label>
-        <mat-select formControlName="adapter" #adapterSelect>
-          <mat-option>None</mat-option>
-          @for (adapter of sampleAdaptors; track adapter) {
-            <mat-option [value]="adapter.value">
-              {{adapter.label}}
-            </mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field appearance="outline">
-        <mat-label>Mapper (Model)</mat-label>
-        <mat-select formControlName="mapper" #mapperSelect>
-          <mat-option>None</mat-option>
-          @for (mapper of sampleMappers; track mapper) {
-            <mat-option [value]="mapper.value">
-              {{mapper.label}}
-            </mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-    </div>
-    @if (adapterSelect.value || mapperSelect.value) {
-      <div style="display: flex; margin-bottom: 2rem;">
-        <div style="flex:1" class="box">
-          <h3>Adapter (Incoming)</h3>
-          @if (adapterSelect.value) {
-            <div>
-              {{ props(adapterSelect.value) | json }}
-            </div>
-          } @else {
-            No Transformation
-          }
-        </div>
-        <div style="flex:1" class="box">
-          <h3>Mapper (Outgoing)</h3>
-          @if (mapperSelect.value) {
-            <div>
-              {{ props(mapperSelect.value) | json }}
-            </div>
-          } @else {
-            No Transformation
-          }
-        </div>
-      </div>
-    }
-    <div>
-      <mat-form-field appearance="outline">
-        <mat-label>RestPath (/ delimited)</mat-label>
-        <input matInput placeholder="clients/list" formControlName="path">
-      </mat-form-field>
-    </div>
-    <div>
-      <div formArrayName="headers">
-        @for (task of headers.controls; track task; let i = $index) {
-          <div [formGroupName]="i">
-            <div style="display: flex; gap: .5rem">
-              <mat-form-field appearance="outline">
-                <mat-label>Key</mat-label>
-                <input matInput placeholder="authentication" formControlName="key">
-              </mat-form-field>
-              <mat-form-field appearance="outline" style="flex:1">
-                <mat-label>Value</mat-label>
-                <input matInput placeholder="sample" formControlName="value">
-              </mat-form-field>
-              <div style="margin-top: .5rem;">
-                <button mat-icon-button (click)="removeHeader(i)">
-                  <mat-icon>close</mat-icon>
-                </button>
-              </div>
-            </div>
-          </div>
-        }
-      </div>
-      <button mat-stroked-button (click)="addHeader()" class="btn">Add Header</button>
-    </div>
-    <div style="margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;">
-      <div>
-        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>
-        @if (failedState.checked) {
-          <div style="display: flex; gap: .5rem; margin-top: 1rem;" formGroupName="retry">
-            <mat-form-field appearance="outline">
-              <mat-label>#of Times</mat-label>
-              <input matInput placeholder="3" formControlName="times" value="3">
-            </mat-form-field>
-            <mat-form-field appearance="outline">
-              <mat-label>Delay Until Next</mat-label>
-              <input matInput placeholder="3" formControlName="delay" value="3">
-            </mat-form-field>
-          </div>
-        }
-      </div>
-      <div>
-        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>
-        @if (pollingState.checked) {
-          <div>
-            <mat-form-field appearance="outline" style="margin-top: 1rem">
-              <mat-label>#of Seconds</mat-label>
-              <input matInput placeholder="3" formControlName="polling" value="3">
-            </mat-form-field>
-          </div>
-        }
-      </div>
-    </div>
-  </div>
-
-  <div style="margin-bottom: 1rem; margin-top: 2rem;">
-    @if (isPending()) {
-      <mat-progress-bar mode="indeterminate"
-      ></mat-progress-bar>
-    }
-    @if (pollingState.checked && !isPending()) {
-      <mat-progress-bar mode="determinate"
-        [value]="countdown()"
-      ></mat-progress-bar>
-    }
-  </div>
-
-  <div style="margin-top: 1rem">
-    <mat-divider></mat-divider>
-  </div>
-
-  <div style="margin-top: 2rem">
-    <div style="display: flex;">
-      <h2 style="flex:1">GET Request</h2>
-      <div>
-        <button mat-raised-button (click)="onGetRequest()" class="btn">Request</button>
-      </div>
-    </div>
-
-    @if (GET_error) {
-      <div style="margin-top: .5rem;">
-        <mat-error>{{ GET_error }}</mat-error>
-      </div>
-    }
-
-    @if (GET_result) {
-      <div style="margin-top: 1rem;">
-        {{ GET_result | json }}
-      </div>
-    }
-
-  </div>
-
-  <div style="margin-top: 2rem">
-    <mat-divider></mat-divider>
-  </div>
-
-  <div style="margin-top: 2rem">
-    <div style="display: flex;">
-      <h2 style="flex:1">POST Request</h2>
-      <div>
-        <button mat-raised-button (click)="onCreateRequest()" class="btn">Request</button>
-      </div>
-    </div>
-
-    @if (POST_error) {
-      <div style="margin-top: .5rem;">
-        <mat-error>{{ POST_error }}</mat-error>
-      </div>
-    }
-
-    @if (POST_result) {
-      <div style="margin-top: 1rem;">
-        {{ POST_result | json }}
-      </div>
-    }
-
-  </div>
-
-  <div style="margin-top: 2rem">
-    <mat-divider></mat-divider>
-  </div>
-
-  <div style="margin-top: 2rem">
-    <div style="display: flex;">
-      <h2 style="flex:1">PUT Request</h2>
-      <div>
-        <button mat-raised-button (click)="onUpdateRequest()" class="btn">Request</button>
-      </div>
-    </div>
-
-    @if (PUT_error) {
-      <div style="margin-top: .5rem;">
-        <mat-error>{{ PUT_error }}</mat-error>
-      </div>
-    }
-
-    <h3>Include Record ID in the RestPath</h3>
-
-    @if (PUT_result) {
-      <div style="margin-top: 1rem;">
-        {{ PUT_result | json }}
-      </div>
-    }
-
-  </div>
-
-  <div style="margin-top: 2rem">
-    <mat-divider></mat-divider>
-  </div>
-
-  <div style="margin-top: 2rem">
-    <div style="display: flex;">
-      <h2 style="flex:1">DELETE Request</h2>
-      <div>
-        <button mat-raised-button (click)="onDeleteRequest()" class="btn">Request</button>
-      </div>
-    </div>
-
-    <h3>Include Record ID in the RestPath</h3>
-
-    @if (DELETE_error) {
-      <div style="margin-top: .5rem;">
-        <mat-error>{{ DELETE_error }}</mat-error>
-      </div>
-    }
-
-    @if (DELETE_result) {
-      <div style="margin-top: 1rem;">
-        {{ DELETE_result | json }}
-      </div>
-    }
-
-  </div>
-
-  <div style="margin-top: 2rem">
-    <mat-divider></mat-divider>
-  </div>
-
-  <div style="margin-top: 2rem">
-    <div style="display: flex;">
-      <h2 style="flex:1">Streaming GET Request</h2>
-      <div>
-        <button mat-raised-button (click)="onStreamRequest()" class="btn">Request</button>
-      </div>
-    </div>
-
-    <!-- <div *ngIf="(STREAM_error$ | async) as stream_error" style="margin-top: .5rem;">
-    <mat-error>{{ stream_error }}</mat-error>
-  </div> -->
-
-  <div style="margin-top: 1rem;">
-    @if (STREAM_result; as data) {
-      <div class="container">
-        <table mat-table [dataSource]="data">
-          <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="name">
-            <th mat-header-cell *matHeaderCellDef> First Name </th>
-            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
-          </ng-container>
-          <ng-container matColumnDef="lastName">
-            <th mat-header-cell *matHeaderCellDef> Last Name </th>
-            <td mat-cell *matCellDef="let element"> {{element.lastName}} </td>
-          </ng-container>
-          <ng-container matColumnDef="age">
-            <th mat-header-cell *matHeaderCellDef> Age </th>
-            <td mat-cell *matCellDef="let element"> {{element.age}} </td>
-          </ng-container>
-          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
-      </div>
-    }
-  </div>
-
-</div>
-
-<div style="margin-top: 2rem">
-  <mat-divider></mat-divider>
-</div>
-
-<div style="margin-top: 2rem">
-  <div style="display: flex;">
-    <h2 style="flex:1; padding-top: .5rem;">AI -@if (AIType === 1) {
-      <span>STREAMING</span>
-    } POST Request</h2>
-    <div style="display: flex; gap: 1rem;">
-      <button mat-raised-button [matMenuTriggerFor]="menu" style="min-width: 120px;">
-        <mat-icon>lan</mat-icon>
-        @if (AIType === 0) {
-          <span>Server</span>
-        } @else {
-          Local
-        }
-      </button>
-      <mat-menu #menu="matMenu">
-        <button mat-menu-item (click)="onSelectAIType(0)">Server</button>
-        <button mat-menu-item (click)="onSelectAIType(1)">Local</button>
-      </mat-menu>
-      <div>
-        <button mat-raised-button (click)="onStreamPostRequest()" class="btn">Ask Me</button>
-      </div>
-    </div>
-  </div>
-
-  <div style="display: flex;">
-    <mat-form-field appearance="outline" style="flex:1">
-      <mat-label>Ask me a Question</mat-label>
-      <textarea matInput placeholder="Why is the sky blue?" [formControl]="questionControl"></textarea>
-    </mat-form-field>
-  </div>
-
-  @if (STREAM_AI_error) {
-    <div style="margin-top: .5rem;">
-      <mat-error>{{ STREAM_AI_error }}</mat-error>
-    </div>
-  }
-
-  @if (AIType === 1) {
-    <div style="color: red;">
-      You must have Ollama active and the 'phi3:latest' model to use this feature.
-    </div>
-  } @else {
-    <span style="color: gray;">
-      Define the RestPath to the API endpoint that will handle the AI request.
-      Use: 'ai/chat' for server
-    </span>
-  }
-
-  <div>
-    @if (STREAM_AI_result) {
-      <div style="margin-top: 1rem; font-size: 1.2rem; border-radius: 1rem; border: black 1px solid; padding: 2rem;">
-        <p style="margin-bottom: .5rem; white-space:pre-wrap; line-height: 1.6rem;">{{STREAM_AI_result}}</p>
-      </div>
-    }
-  </div>
-
-</div>
-
-<div style="margin-top: 1.5rem; margin-bottom: 1rem; line-height: 1.5rem;">
-  <mat-divider></mat-divider>
-</div>
-
-<div>
-  <div style="display: flex;">
-    <h2 style="flex:1; margin-bottom: 0; padding-top: .5rem; display: flex;">
-      <div>
-        Download File
-      </div>
-      <div style="flex:1; margin-left: 1rem;">
-        <mat-slide-toggle #disable>
-          @if (disable.checked) {
-            <span>
-              Enable
-            </span>
-          } @else {
-            Disable
-          }
-        </mat-slide-toggle>
-      </div>
-    </h2>
-    <div>
-      <app-file-downloader
-        [disabled]="disable.checked"
-        [delayError]="3"
-        [apiRequest]="downloadRequest"
-        (completed)="onDownloadCompleted()"
-        (failed)="onDownloadFailed($event)"
-      ></app-file-downloader>
-    </div>
-  </div>
-</div>
-
-</div>

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

@@ -1,24 +0,0 @@
-.btn {
-    min-width: 120px;
-}
-
-.mat-mdc-row .mat-mdc-cell {
-    border-bottom: 1px solid transparent;
-    border-top: 1px solid transparent;
-    cursor: pointer;
-  }
-
-  .mat-mdc-row:hover .mat-mdc-cell {
-    border-color: currentColor;
-    background-color: whitesmoke;
-  }
-
-  .container {
-    height: 400px;
-    overflow: auto;
-  }
-
-  .box {
-    padding: 10px;
-    border: 1px solid #ccc;
-  }